{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-3",
  "title": "Support Chat Widget",
  "description": "Customer support chat widget with an agent header, a system marker, quick-reply chips, and a working composer in a compact help-desk panel.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "bubble",
    "button",
    "input",
    "marker",
    "message",
    "message-scroller"
  ],
  "files": [
    {
      "path": "registry/blocks/chat/3/chat-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bubble, BubbleContent } from \"@/components/ui/bubble\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Marker, MarkerContent } from \"@/components/ui/marker\"\nimport { Message, MessageContent } from \"@/components/ui/message\"\nimport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n} from \"@/components/ui/message-scroller\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype ChatMessage = { id: number; from: \"me\" | \"agent\"; text: string }\n\nconst initialMessages: ChatMessage[] = [\n  {\n    id: 1,\n    from: \"agent\",\n    text: \"Hi there! Thanks for reaching out. How can we help you today?\",\n  },\n]\n\nconst quickReplies = [\n  \"I need help with billing\",\n  \"How do I reset my password?\",\n  \"Talk to a human\",\n]\n\nexport default function ChatBlock() {\n  const [messages, setMessages] = React.useState(initialMessages)\n  const [draft, setDraft] = React.useState(\"\")\n  const nextId = React.useRef(initialMessages.length + 1)\n\n  const sendText = (text: string) => {\n    const trimmed = text.trim()\n    if (!trimmed) return\n    const id = nextId.current++\n    setMessages((prev) => [...prev, { id, from: \"me\", text: trimmed }])\n  }\n\n  const onSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    sendText(draft)\n    setDraft(\"\")\n  }\n\n  const repliesVisible = messages.length === 1\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-muted/30 px-6 py-16 text-foreground\">\n      <MessageScrollerProvider autoScroll defaultScrollPosition=\"end\">\n        <div className=\"flex h-[540px] w-full max-w-sm flex-col overflow-hidden rounded-lg border border-border bg-background\">\n          <div className=\"flex items-center gap-3 border-b border-border bg-card p-4\">\n            <span className=\"flex size-9 items-center justify-center rounded-full bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"Headset\"\n                tabler=\"IconHeadset\"\n                hugeicons=\"CustomerSupportIcon\"\n                phosphor=\"Headset\"\n                remixicon=\"RiCustomerService2Fill\"\n                className=\"size-5\"\n                aria-hidden=\"true\"\n              />\n            </span>\n            <div className=\"flex flex-col\">\n              <span className=\"text-sm font-semibold\">Acme Support</span>\n              <span className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n                <span\n                  className=\"size-1.5 rounded-full bg-success\"\n                  aria-hidden=\"true\"\n                />\n                Typically replies in a few minutes\n              </span>\n            </div>\n          </div>\n\n          <MessageScroller className=\"flex-1\">\n            <MessageScrollerViewport>\n              <MessageScrollerContent className=\"gap-4 p-4\">\n                <Marker variant=\"separator\">\n                  <MarkerContent>Conversation started</MarkerContent>\n                </Marker>\n                {messages.map((message) => (\n                  <MessageScrollerItem\n                    key={message.id}\n                    messageId={String(message.id)}\n                    scrollAnchor={message.from === \"me\"}\n                  >\n                    <Message align={message.from === \"me\" ? \"end\" : \"start\"}>\n                      <MessageContent>\n                        <Bubble\n                          variant={message.from === \"me\" ? \"default\" : \"muted\"}\n                        >\n                          <BubbleContent>{message.text}</BubbleContent>\n                        </Bubble>\n                      </MessageContent>\n                    </Message>\n                  </MessageScrollerItem>\n                ))}\n              </MessageScrollerContent>\n            </MessageScrollerViewport>\n            <MessageScrollerButton />\n          </MessageScroller>\n\n          {repliesVisible && (\n            <div className=\"flex flex-wrap gap-2 border-t border-border p-3\">\n              {quickReplies.map((reply) => (\n                <button\n                  key={reply}\n                  type=\"button\"\n                  onClick={() => sendText(reply)}\n                  className=\"rounded-md border border-border px-3 py-1.5 text-xs text-foreground transition-colors hover:bg-muted\"\n                >\n                  {reply}\n                </button>\n              ))}\n            </div>\n          )}\n\n          <form\n            onSubmit={onSubmit}\n            className=\"flex items-center gap-2 border-t border-border p-3\"\n          >\n            <Input\n              value={draft}\n              onChange={(e) => setDraft(e.target.value)}\n              placeholder=\"Send a message...\"\n              aria-label=\"Message\"\n            />\n            <Button\n              type=\"submit\"\n              size=\"icon\"\n              disabled={!draft.trim()}\n              aria-label=\"Send message\"\n            >\n              <IconPlaceholder\n                lucide=\"Send\"\n                tabler=\"IconSend\"\n                hugeicons=\"SentIcon\"\n                phosphor=\"PaperPlane\"\n                remixicon=\"RiSendPlane2Fill\"\n                className=\"size-4\"\n                aria-hidden=\"true\"\n              />\n            </Button>\n          </form>\n        </div>\n      </MessageScrollerProvider>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/chat-3.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "success": "oklch(0.432 0.095 166.913)"
    },
    "dark": {
      "success": "oklch(0.765 0.177 163.223)"
    }
  },
  "meta": {
    "height": "676px",
    "tier": "free"
  },
  "categories": [
    "chat"
  ],
  "type": "registry:block"
}