Prompt Input

The ChatPromptInput component provides a rich message input with several integrated features.

Core Input

A textarea with keyboard shortcuts:

The textarea auto-resizes as the user types.

Suggestions

On an empty chat (no messages yet), quick-start suggestions appear above the input:

┌──────────────────────────────────────────┐
│  💡 "Summarize this document"            │
│  💡 "What are the key findings?"         │
│  💡 "Compare these two topics"           │
│  💡 "Explain this concept simply"        │
└──────────────────────────────────────────┘

Clicking a suggestion populates the input and sends immediately.

Voice Input

The mic button enables speech-to-text:

1. User clicks the mic button
2. Browser's MediaRecorder API captures audio
3. On stop, the audio blob is sent to the transcription endpoint:

   POST /api/transcribe-audio/
   Content-Type: multipart/form-data
   { audio_file, workspace_id, language }

4. Backend processes with OpenAI Whisper
5. Transcribed text is inserted into the input

Language Selector

A popover dropdown lets the user select the transcription language (defaults to English). This is sent to the Whisper API as a hint for better accuracy.

Model Selector

Users can switch the AI model mid-conversation without opening settings:

┌─────────────────────────┐
│ Model: gpt-4o      ▼    │
├─────────────────────────┤
│ ○ gpt-4o                │
│ ○ gpt-4-turbo           │
│ ○ claude-sonnet-4-5     │
│ ○ gemini-2.5-pro        │
│ ...                     │
└─────────────────────────┘

Selecting a model triggers a PUT request to update the chat session's ai_model field.

Message Submission

async function handleSubmit(content: string) {
  setIsAiThinking(true);

  const res = await fetch(
    `/api/workspaces/${workspaceId}/chats/${chatId}/messages/`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ role: "user", content }),
    }
  );

  const data = await res.json();
  // Update message list with user message + AI response
  setIsAiThinking(false);
}

AI Thinking State

While the AI is processing, the UI shows:

• A typing indicator in the message list
• The send button is disabled
• The input is grayed out

Attachments

The prompt input supports file attachments via the AI elements PromptInputProvider:

<PromptInputProvider>
  <PromptInputTextarea placeholder="Type a message..." />
  <PromptInputActions>
    <PromptInputAttachment />
    <PromptInputSubmit />
  </PromptInputActions>
</PromptInputProvider>

Attached files are uploaded and can be referenced in the conversation.