shadcn.io is not affiliated with official shadcn/ui
AI Prompt Picker Command Menu Block for Solid
A writing assistant's command menu shown open over a chat window: eleven Writing, Coding and Analysis prompts, three recent conversations, an Ask row for your own words, and a composer in the foot that a prompt fills.
Installation
Overview
Start a message from a prompt instead of a blank box with this AI prompt command menu for Solid with Ark UI. It opens from the assistant page in Draftlark, a writing assistant, whose header holds an outline field with its ⌘ K cap, and the chat window is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command: Writing, Coding and Analysis prompts with their words under the title, and the recent conversations. Typing adds a first row, Ask, that carries your own words. Choosing a prompt fills a composer line in the foot of the menu and the composer of the drawn window behind it, with "Ready to send. Nothing is sent here."; a conversation opens in the drawn window and closes the menu. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same prompts, composer and query. For assistants, writing tools and any chat box where a good first prompt saves a minute.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a chat window, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a prompt or a query in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
What does choosing a prompt do?
It fills the composer, and only that. The text of the prompt appears in the composer line at the foot of the menu (two lines, cut with an ellipsis if longer) and in the composer of the drawn chat window behind the menu, the status line says which prompt was used, and the menu stays open so you can pick another to replace it. Nothing is answered, and the line under the composer says "Nothing is sent here." The Clear button empties it.
What is the Ask row?
Once you type, the first row reads Ask with your words in quotes. Enter puts those words in the composer as they are, cut at 160 characters, and clears the search, so the same field serves for finding a prompt and for writing a message. Prompts and conversations that match are listed under it, and the foot counts only those.
What happens when I choose a recent conversation?
Its title becomes the title of the drawn chat window, the status line says it was opened in this demo only, and the menu closes with focus on the field. The three conversations are typed constants with fixed days, and no history is loaded.
What stays local, and how do I wire it?
All of it. The eleven prompts, the three conversations and the model name (a made-up one) are typed constants, and the composer is a line of text, not an input. In your app replace the composer line with your real textarea, set its value in pick, focus it and close the menu, and load PROMPTS and CHATS from your own store.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter fills the composer or opens the conversation, and Tab reaches the Clear button. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.