PageWeave/Design
llms.txt Contribute
Menu
Styles Themes Components Skills ↗ Prompts Guides Collections Changelog About

Components / Chat Panel

7 Component chatagentconversationai .md

Chat Panel

Agent conversation UI

Live preview — rendered in this site's theme Chat Panel
AI Agent
Build me a landing page for my coffee roastery.
Done — draft live at roastery.pageweave.site. Want a shop section next?
Yes, plus a wholesale inquiry form.

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 Copy-paste source

<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>