shadcn.io is not affiliated with official shadcn/ui
Chat With Sidebar AI Block for Ark UI
A project workspace window with a Sidebar of three projects, their chats and a Library of saved prompts and files, where choosing a project changes the top bar line and the composer, instructions are editable, and a model select prints its window.
Installation
Overview
Give an assistant a place for each piece of work, with this AI chat with sidebar for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Workbay, a project workspace. The catalog Sidebar groups three Projects, the chats of the chosen project and a Library of Saved prompts and Files, with a Native Select in its foot that picks the model and prints its window ("Orvane 2 Fast, 128K"). Choosing a project sets the top bar's line ("Instructions: ..., 3 files") and the composer's placeholder; Edit instructions opens a small form under the top bar with a field and an estimated token count, and Save changes the line and what the replies say. A saved prompt puts its text in the composer, and Files lists the project's three file names. The assistant's turns are plain prose in Message, yours a quiet Bubble, and the composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
Everything. Projects, chats, prompts, file names, instructions and replies are typed at the top of the file, and the replies come from a short script that quotes the project's instructions, as the line under the window says. Nothing is uploaded, read or saved: file names are only names. To wire it, load PROJECTS and START from your API, persist saveEdit, and send the request, the instructions and the file list to your model where post says to.
What do the instructions change?
They are shown in the top bar line, edited in the form under it, and used by the replies: an unkeyed request is answered with a sentence that starts from the project's first instruction, so a change is visible straight away. The token count is the text's length divided by four, a rough rule and not a tokenizer.
How is the rail organised?
Projects are one link each. Under them the chats of the chosen project, and under those the Library, whose two views replace the log in the page: Saved prompts, each with a Use button that places it in the composer and returns to the chat, and Files. The links are # links that change local state, and the open item is marked current.
Does the model select do anything?
It prints the model and its window in the foot ("Orvane 2 Deep, 200K window, an example figure") and says so in the status line. The models are fictional and the figures are examples; the replies do not change with the model. In your app, send the chosen value with the request.
Is it usable with a keyboard and a screen reader?
Tab runs the rail, the top bar, the page and the composer. The Edit instructions button says whether its form is expanded; Save and Cancel return focus to it, and opening the form focuses the field. The log is announced as a log, every message starts with a hidden name and time, and one polite status line says what changed.