@classic-homes/agent-chat

Svelte 5 chat UI for Classic Agent: session state, message list, composer, tool timeline, artifacts and MCP-UI sandbox frames. The Classic App's /agent page and agent panel use it.

Requirements

• svelte 5 and @classic-homes/theme-svelte 1.39 or later (peer dependencies).

• Tailwind with @classic-homes/theme-tailwind-preset. The components are styled with Tailwind utility classes and theme tokens, so the consumer's Tailwind build has to scan this package:

  // tailwind.config.js
  export default {
    content: [
      './src/**/*.{html,js,svelte,ts}',
      './node_modules/@classic-homes/theme-svelte/**/*.{html,js,svelte,ts}',
      './node_modules/@classic-homes/agent-chat/**/*.{js,svelte}',
    ],
    presets: [require('@classic-homes/theme-tailwind-preset')],
  };
  

  Without that entry the chat renders unstyled. Markdown prose (rendered from model text) uses arbitrary-variant utilities on its container ([&_ul]:list-disc), not a stylesheet: the Classic App's cascade-layers polyfill outranks plain component CSS.

Usage

<script lang="ts">
  import { AgentChat } from '@classic-homes/agent-chat';
</script>

<AgentChat {client} sandboxOrigin={AGENT_SANDBOX_ORIGIN} {conversationId} mode={me.mode} />

client is an AgentApiClient from @classic-homes/agent-client. sandboxOrigin is the agent-api origin that serves /frame; artifacts and MCP-UI resources only ever render there.

Components

AgentChat composes the rest; each is also exported for other layouts:

• ChatHeader, ConversationSidebar: title and conversation actions; the history rail. ChatHeader's menu opens ShortcutsDialog (the chat's CHAT_SHORTCUTS plus the host's shortcuts, e.g. a panel toggle). Hosts implement their own app-level shortcuts.
• MessageList: transcript with day separators and a jump-to-latest button.
• MessageItem → UserMessage / AssistantMessage, with MessageActions (copy, time, MessageFeedback thumbs up/down with an optional note, Regenerate and Edit on the latest turn), ArtifactChip, MessageFiles (image lightbox, downloads) and ProposalCard (read-only document edits; applying stays in the Office add-in).
• Composer: attach by button, drop or paste; prompts turns on the / saved-prompt menu (ComposerPrompt.text may be a loader, e.g. fetching the template).
• ToolTimeline: tool calls with status and duration, delegations nested; toolLabels maps tool names to readable ones (AgentChat passes both through).
• Agent picker: pass agents (from /api/agents); with more than one, a new conversation offers a picker in the composer until its first message. The conversation keeps that agent; header receives { agent, agentName } and onagentchange reports it.
• Welcome: the empty conversation, with a greeting (userName), a capability line and up to four suggestions that send when chosen. AgentChat shows it unless the host passes an empty snippet, a loading skeleton while an existing conversation's transcript arrives, and an error with Try again when that load fails.
• ArtifactPanel, UiFrame, ModeBanner.

Publishing: docs/operations/package-publishing.md.