Chat

Drop-in agent chat UI with model selection, voice input, and streaming.

A drop-in agent chat UI with model selection, voice input, streaming, and tool calling. The pieces compose: render the whole stack in a single page or pull in just the input or message list to embed a mini-chat anywhere.

Features

  • MessageInput — textarea with send-on-Enter, dictation slot, optional auto-focus on mount.
  • ModelSelector — switches between configured providers; persists the user's choice to localStorage.
  • BlockMessageList — renders conversation history with markdown, code highlighting, and tool-call rows.
  • ConversationList — past conversations with rename and delete; usable inline, in a sheet, or as a sidebar.
  • ChatState — orchestrates streaming, conversation switching, and error state.
  • Tool calling — the chat service supports server-side tool calls; the UI surfaces tool_use and tool_result rows automatically.
  • Per-user keys (BYOK) — each user supplies their own AI provider key under Account → AI Providers. The chat input is disabled until a key is set.

Setup

Local dev

The chat is gated behind the chat feature flag (on by default). Each user must add at least one AI provider key under Account → AI providers — the chat input stays disabled until then. No global env-var fallback yet.

Staging / prod

Same as local — keys are encrypted per-user via the AI keys service. Required runtime secrets:

  • AI_KEYS_SECRET — 32-byte base64-encoded AES-GCM key for at-rest encryption of user keys.

Provider-specific OAuth or API credentials are not required at the platform level; users bring their own.

Implementation details

  • Route — src/routes/(svelm)/(app)/demo/chat/ — guarded by guardFeature('chat', locals.features); +page.server.ts loads conversations and active messages.
  • Components — src/lib/svelm/agents/ui/ — exports BlockMessageList, MessageInput, ModelSelector, ConversationList, ChatState, createChatConfig, setChatConfig, setChatState.
  • Service — src/lib/svelm/agents/client.ts (browser) and src/lib/server/svelm/agents/chat-handler.ts (worker); streams via SSE.
  • Schema — src/lib/server/svelm/db/conversations.schema.ts — chat_conversations and chat_messages tables, FK'd to user.
  • Models — src/lib/svelm/agents/models.ts — defaultAiModels lists the canned provider/model entries; project can override via defineAiModels.
  • Nav — wired into the Demos section of src/lib/components/layout/nav-default.ts under the chat feature flag.