AI Chat With Sidebar

<section
  class="ws-ai-chat mx-auto flex h-[650px] max-w-5xl 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);
  "
>
  <!-- Sidebar -->
  <aside
    class="hidden w-64 shrink-0 flex-col border-r md:flex"
    style="border-color: var(--ws-ai-chat-border); background: var(--ws-ai-chat-ai-bg)"
  >
    <!-- New Chat button -->
    <div class="p-4">
      <button
        class="flex w-full items-center justify-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-medium transition hover:opacity-80"
        style="border-color: var(--ws-ai-chat-border); color: var(--ws-ai-chat-text)"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
        </svg>
        New Chat
      </button>
    </div>

    <!-- Conversation list -->
    <nav class="flex-1 overflow-y-auto px-3 pb-4" aria-label="Conversation history">
      <p class="mb-2 px-2 text-[10px] font-semibold uppercase tracking-widest" style="color: var(--ws-ai-chat-text-soft)">Recent</p>
      <ul class="space-y-1">
        <li>
          <a
            href="#"
            class="block rounded-lg px-3 py-2.5 text-sm transition hover:opacity-80"
            style="background: var(--ws-ai-chat-bg)"
            aria-current="page"
          >
            <p class="truncate font-medium">Pricing table design</p>
            <p class="mt-0.5 text-[11px]" style="color: var(--ws-ai-chat-text-soft)">Today</p>
          </a>
        </li>
        <li>
          <a href="#" class="block rounded-lg px-3 py-2.5 text-sm transition hover:opacity-80">
            <p class="truncate font-medium" style="color: var(--ws-ai-chat-text)">Hero section gradient</p>
            <p class="mt-0.5 text-[11px]" style="color: var(--ws-ai-chat-text-soft)">Yesterday</p>
          </a>
        </li>
        <li>
          <a href="#" class="block rounded-lg px-3 py-2.5 text-sm transition hover:opacity-80">
            <p class="truncate font-medium" style="color: var(--ws-ai-chat-text)">Navigation patterns</p>
            <p class="mt-0.5 text-[11px]" style="color: var(--ws-ai-chat-text-soft)">Mar 19</p>
          </a>
        </li>
        <li>
          <a href="#" class="block rounded-lg px-3 py-2.5 text-sm transition hover:opacity-80">
            <p class="truncate font-medium" style="color: var(--ws-ai-chat-text)">Auth form accessibility</p>
            <p class="mt-0.5 text-[11px]" style="color: var(--ws-ai-chat-text-soft)">Mar 18</p>
          </a>
        </li>
      </ul>
    </nav>
  </aside>

  <!-- Chat area -->
  <div class="flex flex-1 flex-col">
    <!-- 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">Pricing table design</p>
        <p class="text-xs" style="color: var(--ws-ai-chat-text-soft)">Online</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 ready to help you design a pricing table. How many tiers do you need?
        </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)"
        >
          Three tiers: Free, Pro, and Enterprise. The Pro tier should be highlighted.
        </div>
      </div>

      <!-- 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)">
          Here's a responsive three-tier pricing layout. The Pro tier uses a contrasting accent color and a "Recommended" badge. All tiers stack vertically on mobile and expand to a three-column grid on large screens.
        </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)"
        >
          Looks great, can you add a toggle for monthly and annual billing?
        </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-sidebar" class="sr-only">Type a message</label>
        <input
          id="chat-input-sidebar"
          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>
  </div>
</section>