AI Chat Streaming

<section
  class="ws-ai-chat mx-auto flex h-[600px] max-w-3xl flex-col overflow-hidden rounded-2xl border shadow-md"
  style="
    --ws-ai-chat-bg: oklch(0.985 0.002 75);
    --ws-ai-chat-text: oklch(0.205 0.015 75);
    --ws-ai-chat-text-soft: oklch(0.556 0.01 75);
    --ws-ai-chat-border: oklch(0.885 0.008 75);
    --ws-ai-chat-accent: oklch(0.588 0.16 250);
    --ws-ai-chat-user-bg: oklch(0.588 0.16 250);
    --ws-ai-chat-ai-bg: oklch(0.95 0.004 75);
    background: var(--ws-ai-chat-bg);
    color: var(--ws-ai-chat-text);
    border-color: var(--ws-ai-chat-border);
  "
>
  <style>
    @keyframes ws-ai-chat-dot {
      0%, 20% { opacity: 0.2; transform: translateY(0); }
      50% { opacity: 1; transform: translateY(-4px); }
      80%, 100% { opacity: 0.2; transform: translateY(0); }
    }
    .ws-ai-chat-dot { animation: ws-ai-chat-dot 1.4s ease-in-out infinite; }
    .ws-ai-chat-dot:nth-child(2) { animation-delay: 0.2s; }
    .ws-ai-chat-dot:nth-child(3) { animation-delay: 0.4s; }
    @media (prefers-reduced-motion: reduce) {
      .ws-ai-chat-dot { animation: none; opacity: 0.5; transform: none; }
    }
  </style>

  <!-- Header -->
  <header
    class="flex items-center gap-3 border-b px-6 py-4"
    style="border-color: var(--ws-ai-chat-border)"
  >
    <div
      class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-white"
      style="background: var(--ws-ai-chat-accent)"
    >
      AI
    </div>
    <div>
      <p class="text-sm font-semibold">AI Assistant</p>
      <p class="text-xs" style="color: var(--ws-ai-chat-text-soft)">Typing...</p>
    </div>
  </header>

  <!-- Messages -->
  <div class="flex flex-1 flex-col gap-4 overflow-y-auto px-6 py-6" role="log" aria-label="Chat messages" aria-live="polite">
    <!-- AI message -->
    <div class="flex items-start gap-3">
      <div
        class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
        style="background: var(--ws-ai-chat-accent)"
        aria-hidden="true"
      >
        AI
      </div>
      <div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm" style="background: var(--ws-ai-chat-ai-bg)">
        Hello! I'm your AI assistant. How can I help you today?
      </div>
    </div>

    <!-- User message -->
    <div class="flex items-start justify-end gap-3">
      <div
        class="max-w-[75%] rounded-2xl rounded-tr-sm px-4 py-3 text-sm text-white"
        style="background: var(--ws-ai-chat-user-bg)"
      >
        What are the benefits of using a design token system?
      </div>
    </div>

    <!-- AI message with partial response -->
    <div class="flex items-start gap-3">
      <div
        class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
        style="background: var(--ws-ai-chat-accent)"
        aria-hidden="true"
      >
        AI
      </div>
      <div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm" style="background: var(--ws-ai-chat-ai-bg)">
        Design tokens provide several key benefits for your workflow:

        <strong>1. Consistency</strong> — Every component draws from the same source of truth, eliminating visual drift across your product.

        <strong>2. Scalability</strong> — When you change a token value, it propagates everywhere automatically, making large-scale updates
      </div>
    </div>

    <!-- Typing indicator -->
    <div class="flex items-start gap-3">
      <div class="h-8 w-8 shrink-0" aria-hidden="true"></div>
      <div
        class="flex items-center gap-1.5 rounded-2xl rounded-tl-sm px-4 py-3"
        style="background: var(--ws-ai-chat-ai-bg)"
        role="status"
        aria-label="AI is typing"
      >
        <span class="ws-ai-chat-dot inline-block h-2 w-2 rounded-full" style="background: var(--ws-ai-chat-text-soft)"></span>
        <span class="ws-ai-chat-dot inline-block h-2 w-2 rounded-full" style="background: var(--ws-ai-chat-text-soft)"></span>
        <span class="ws-ai-chat-dot inline-block h-2 w-2 rounded-full" style="background: var(--ws-ai-chat-text-soft)"></span>
      </div>
    </div>
  </div>

  <!-- Input area -->
  <div class="border-t px-4 py-4" style="border-color: var(--ws-ai-chat-border)">
    <form class="flex items-center gap-3" onsubmit="return false">
      <label for="chat-input-streaming" class="sr-only">Type a message</label>
      <input
        id="chat-input-streaming"
        type="text"
        placeholder="Type a message..."
        class="flex-1 rounded-xl border px-4 py-2.5 text-sm outline-none transition focus:ring-2"
        style="
          border-color: var(--ws-ai-chat-border);
          background: var(--ws-ai-chat-bg);
          color: var(--ws-ai-chat-text);
        "
      />
      <button
        type="submit"
        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-white transition hover:opacity-90"
        style="background: var(--ws-ai-chat-accent)"
        aria-label="Send message"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
        </svg>
      </button>
    </form>
  </div>
</section>