{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chat-widget",
  "title": "Chat Widget",
  "description": "Simple chat display with message list, avatars, timestamps, and message input.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/chat-widget/components/chat-widget.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\n/* ---------------------------------------------------------------------------\n * Types\n * -------------------------------------------------------------------------- */\n\ninterface ChatMessage {\n  id: string\n  name: string\n  avatarUrl: string\n  text: string\n  time: string\n  isOwn?: boolean\n}\n\n/* ---------------------------------------------------------------------------\n * ChatWidget\n * -------------------------------------------------------------------------- */\n\ninterface ChatWidgetProps extends React.HTMLAttributes<HTMLDivElement> {\n  messages?: ChatMessage[]\n  onSend?: (text: string) => void\n  height?: number\n}\n\nconst ChatWidget = React.forwardRef<HTMLDivElement, ChatWidgetProps>(\n  ({ className, messages = [], onSend, height = 250, ...props }, ref) => {\n    const [inputValue, setInputValue] = React.useState(\"\")\n    const messagesEndRef = React.useRef<HTMLDivElement>(null)\n\n    const scrollToBottom = React.useCallback(() => {\n      messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" })\n    }, [])\n\n    React.useEffect(() => {\n      scrollToBottom()\n    }, [messages, scrollToBottom])\n\n    const handleSend = () => {\n      if (inputValue.trim() && onSend) {\n        onSend(inputValue.trim())\n        setInputValue(\"\")\n      }\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault()\n        handleSend()\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"bg-white rounded-[3px] shadow-[0_1px_1px_rgba(0,0,0,0.1)]\", className)}\n        {...props}\n      >\n        {/* Messages container */}\n        <div\n          className=\"overflow-y-auto p-[10px]\"\n          style={{ height: `${height}px` }}\n        >\n          {messages.map((msg) => (\n            <div\n              key={msg.id}\n              className={cn(\n                \"flex mb-[10px] gap-[10px]\",\n                msg.isOwn && \"flex-row-reverse\"\n              )}\n            >\n              {/* Avatar */}\n              <img\n                src={msg.avatarUrl}\n                alt={msg.name}\n                className=\"w-[40px] h-[40px] rounded-full object-cover flex-shrink-0\"\n              />\n\n              {/* Message content */}\n              <div className={cn(\"max-w-[70%]\", msg.isOwn && \"text-right\")}>\n                {/* Name and time */}\n                <div\n                  className={cn(\n                    \"flex items-center gap-[8px] mb-[2px] text-[12px]\",\n                    msg.isOwn && \"flex-row-reverse\"\n                  )}\n                >\n                  <span className=\"font-semibold text-[#333]\">{msg.name}</span>\n                  <span className=\"text-[#999]\">{msg.time}</span>\n                </div>\n\n                {/* Message bubble */}\n                <div\n                  className={cn(\n                    \"inline-block py-[5px] px-[10px] rounded-[5px] text-[14px] text-left\",\n                    msg.isOwn\n                      ? \"bg-[#3c8dbc] text-white\"\n                      : \"bg-[#d2d6de] text-[#333]\"\n                  )}\n                >\n                  {msg.text}\n                </div>\n              </div>\n            </div>\n          ))}\n          <div ref={messagesEndRef} />\n        </div>\n\n        {/* Input area */}\n        <div className=\"border-t border-t-[#f4f4f4] p-[10px]\">\n          <div className=\"flex gap-[5px]\">\n            <input\n              type=\"text\"\n              placeholder=\"Type Message ...\"\n              className=\"flex-1 border border-[#d2d6de] rounded-[4px] py-[6px] px-[12px] text-[14px] outline-none focus:border-[#3c8dbc]\"\n              value={inputValue}\n              onChange={(e) => setInputValue(e.target.value)}\n              onKeyDown={handleKeyDown}\n            />\n            <button\n              type=\"button\"\n              className=\"bg-[#3c8dbc] text-white border-none rounded-[4px] py-[6px] px-[15px] text-[14px] cursor-pointer hover:bg-[#367fa9]\"\n              onClick={handleSend}\n            >\n              Send\n            </button>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nChatWidget.displayName = \"ChatWidget\"\n\nexport { ChatWidget }\nexport type { ChatWidgetProps, ChatMessage }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}