Chat

Chat integration patterns: floating launcher, embedded with sidebar, and full-page layouts using existing VB primitives.

Overview

These patterns compose <chat-window> with existing VB primitives to create complete chat experiences. No new custom elements are needed — <dialog>, commandfor, and <layout-sidebar> handle the shell.

Floating Launcher

A fixed-position FAB button opens a <dialog> containing chat-window. The commandfor/command attributes handle open/close automatically with proper focus management.

<button commandfor="chat-dialog" command="show-modal"
        class="chat-trigger" aria-label="Open chat">
  <icon-wc name="message-circle"></icon-wc>
</button>

<dialog id="chat-dialog">
  <chat-window endpoint="/api/chat">
    <script type="application/json" data-participants>
    { "user": { "name": "You", "role": "user" },
      "assistant": { "name": "Assistant", "role": "agent" } }
    </script>
    <header>
      <h3>AI Assistant</h3>
      <button commandfor="chat-dialog" command="close"
              class="ghost small" aria-label="Close">
        <icon-wc name="x"></icon-wc>
      </button>
    </header>
    <chat-thread role="log" aria-label="Chat" aria-live="polite">
    </chat-thread>
    <chat-input name="message">
      <textarea data-grow rows="1" placeholder="Ask anything..."></textarea>
      <footer>
        <button type="submit" class="small" data-send aria-label="Send">
          <icon-wc name="send"></icon-wc>
        </button>
      </footer>
    </chat-input>
  </chat-window>
</dialog>

Unread Badge

Add an unread count using <layout-badge> positioned over the trigger button.

Embedded with Sidebar

For always-visible chat panels, use <layout-sidebar> with a chat history list in the aside. The sidebar collapses on narrow viewports.

Full-Page with History Drawer

A full-viewport chat using height: 100dvh on the window. The history drawer uses <dialog data-position="start"> for a slide-in panel triggered from the header.

<chat-window endpoint="/api/ai" style="height: 100dvh">
  <script type="application/json" data-participants>
  { "user": { "name": "You", "role": "user" },
    "assistant": { "name": "Assistant", "role": "agent" } }
  </script>
  <header>
    <button commandfor="chat-history" command="show-modal"
            class="ghost small" aria-label="History">
      <icon-wc name="sidebar"></icon-wc>
    </button>
    <h3>Chat</h3>
    <select data-model-select aria-label="Select model">
      <option value="claude-sonnet-4-6">Sonnet 4.6</option>
      <option value="claude-haiku-4-5">Haiku 4.5</option>
    </select>
  </header>
  <chat-thread role="log" aria-label="Conversation" aria-live="polite">
  </chat-thread>
  <chat-input name="message">
    <textarea data-grow rows="1" data-max-rows="8"
              placeholder="Ask anything..."></textarea>
    <footer>
      <button type="submit" class="small" data-send aria-label="Send">
        <icon-wc name="send"></icon-wc>
      </button>
    </footer>
  </chat-input>
</chat-window>

<dialog id="chat-history" data-position="start">
  <header>
    <h3>History</h3>
    <button commandfor="chat-history" command="close" class="ghost small">
      <icon-wc name="x"></icon-wc>
    </button>
  </header>
  <nav aria-label="Previous conversations">
    <a href="/chat/5" aria-current="true">Current conversation</a>
    <a href="/chat/4">Refund request</a>
    <a href="/chat/3">Setup help</a>
  </nav>
</dialog>

Key Primitives Used

Need	Primitive	Why
Launcher trigger	`commandfor` / `command="show-modal"`	Native focus management, no JS
Chat overlay	`<dialog>`	Modal with backdrop, Escape to close
History drawer	`<dialog data-position="start">`	Slide-in panel with VB styling
Split layout	`<layout-sidebar>`	Responsive sidebar collapse
Unread count	`<layout-badge>`	Color-coded badge overlay

<chat-window> — The orchestrating web component
<chat-input> — Form-associated input
<chat-thread> — Scrollable message container
<dialog> — Native modal/drawer
<layout-sidebar> — Split panel layout

Welcome to Vanilla Breeze