Complete AI Chat Interface

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its avatar, avatar-initials, button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/chat/chat11.tsx instead.

Usage

The file also exports chat11Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Chat11, chat11Demo } from "@/components/blocks/chat/chat11";

export default function Page() {
  return <Chat11 {...chat11Demo} />;
}

Props

Types

export interface Chat11Message {
  id: string;
  role: "user" | "assistant";
  text: string;
  timestamp: string;
}

Behavior notes

• The composer textarea is real controlled state (useState), and the send button clears it, but no message is ever appended to the thread and no request is sent, there is no backend behind this block.
• Timestamps are fixed literal strings passed in as data, never computed with new Date(), so the same markup is stable across server and client renders.
• The typing indicator is a static, always-on decorative element when showTypingIndicator is true (three CSS animate-bounce dots with staggered animationDelay), it doesn't reflect any real streaming state.
• Avatars fall back to initials via initialsFromName when no avatar image is supplied.