> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Chat Panel

Agent conversation UI

- Category: Components
- Tags: chat agent conversation ai

## Usage

The desktop-app chat panel is the signature element of agentic-web marketing sites: window chrome header, conversation body, input bar.

## Rules

- The agent is always named **"AI Agent"** — vendor-neutral, never a model name.
- User bubbles `chat-start` in neutral; agent replies `chat-end` in primary. Consistency matters more than realism.
- Window dots are decorative `<i>` elements — mark them `aria-hidden` contextually or leave as pure CSS shapes.
- Animate the typing sequence only on landing heroes; static elsewhere (CLS-safe ghost render first).
- Keep copy short — bubbles over two lines break the illusion of speed.

## HTML source

```html
<div class="max-w-md border border-base-content/15 bg-base-100">
  <div class="flex items-center justify-between px-4 py-2.5 border-b border-base-content/10">
    <span class="font-mono text-xs uppercase tracking-[0.14em] text-base-content/60">AI Agent</span>
    <span class="flex gap-1.5"><i class="w-2 h-2 rounded-full bg-error/70 inline-block"></i><i class="w-2 h-2 rounded-full bg-warning/70 inline-block"></i><i class="w-2 h-2 rounded-full bg-success/70 inline-block"></i></span>
  </div>
  <div class="p-4 space-y-4">
    <div class="chat chat-start">
      <div class="chat-bubble bg-neutral text-neutral-content border-0">Build me a landing page for my coffee roastery.</div>
    </div>
    <div class="chat chat-end">
      <div class="chat-bubble bg-primary text-primary-content border-0">Done — draft live at roastery.pageweave.site. Want a shop section next?</div>
    </div>
    <div class="chat chat-start">
      <div class="chat-bubble bg-neutral text-neutral-content border-0">Yes, plus a wholesale inquiry form.</div>
    </div>
  </div>
  <div class="px-4 py-3 border-t border-base-content/10 flex items-center gap-2">
    <input type="text" placeholder="Ask for changes…" class="input input-sm input-bordered flex-1 bg-base-200 border-base-content/15" />
    <button class="btn btn-primary btn-sm border-0">Send</button>
  </div>
</div>
```