Floating Chat Widget with Expandable Window

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its 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/chat10.tsx instead.

Usage

The file also exports chat10Demo, 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 { Chat10, chat10Demo } from "@/components/blocks/chat/chat10";

export default function Page() {
  return <Chat10 {...chat10Demo} />;
}

Props

Types

export interface Chat10Message {
  id: string;
  from: "agent" | "user";
  text: string;
}

Behavior notes

• The bubble-to-window open/close toggle is real client state (useState) with a Tailwind opacity/scale transition, not just CSS :hover.
• The pulsing notification dot (animate-ping) only shows while the widget is closed and is purely decorative, it doesn't track real unread counts.
• The composer input and send button are decorative, typing does update the native input value but there is no onSubmit/onClick handler wired to send anything.
• Positioned with a relative wrapper sized like a corner overlay rather than a page-covering fixed position, so it previews sensibly inside the block thumbnail/iframe instead of covering the whole page.