M4: Drop-in Chat Widget (Single Script Tag)

[kovtcharov]

Priority: P2 — Maximum developer experience

Effort: Medium (5-7 days)
Depends on: #652 (M3: JavaScript Chat Client)

Problem

Even with a JS client library, developers still need to build chat UI: message bubbles, input handling, streaming display, collapse/expand, mobile layout, scroll behavior, typing indicators. This is 500+ lines of HTML/CSS/JS that every integration rebuilds.

Deliverable

A self-contained chat widget loadable via <script> tag:

<script src="https://cdn.amd.com/gaia/chat-widget.min.js"></script>
<script>
  GaiaChatWidget.init({
    apiUrl: 'http://localhost:8080',
    model: 'gaia-chat',
    systemPrompt: 'You are a helpful assistant...',
    position: 'bottom-dock',     // 'bottom-dock' | 'bottom-right' | 'side-panel'
    title: 'AI Assistant',
    starterQuestions: [
      'What is this about?',
      'Summarize the key points'
    ],
    theme: 'dark',               // 'dark' | 'light' | 'auto'
    collapsible: true,
    height: '350px',
    maxHeight: '60vh'
  });
</script>

Features

• Self-contained — single JS file, no external CSS or dependencies
• Positions: bottom dock (full-width), bottom-right bubble, side panel
• Streaming with typing indicator
• Markdown rendering in responses (tables, bold, lists, code)
• Starter question chips
• Conversation history (sessionStorage)
• Collapse/expand with keyboard shortcut
• Mobile responsive (full-screen overlay)
• Dark/light/auto theme with CSS custom properties for customization
• Clear conversation button
• Connection error state with retry
• Built on M3's GaiaClient

Files to create

• src/gaia/clients/js/src/widget.ts — widget implementation
• src/gaia/clients/js/src/widget-styles.ts — embedded CSS
• Build config to produce chat-widget.min.js (~30KB target)

Acceptance criteria

• Single <script> tag adds a working chat panel to any webpage
• Works on any page regardless of existing CSS (shadow DOM or scoped styles)
• All three position modes work
• Mobile responsive
• Customizable via options and CSS custom properties
• Total bundle size under 40KB minified

Context

Full milestone plan: docs/plans/webapp-integration.md