{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "direct-chat",
  "title": "Direct Chat",
  "description": "Chat widget with message bubbles (left/right aligned), contacts panel toggle, and message input.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/box.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/use-direct-chat.json"
  ],
  "files": [
    {
      "path": "registry/new-york/direct-chat/components/direct-chat.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 DirectChatMessageData {\n  id: string\n  name: string\n  avatarUrl: string\n  text: string\n  time: string\n  isOwn?: boolean\n}\n\ninterface DirectChatContactData {\n  id: string\n  name: string\n  avatarUrl: string\n  status?: \"online\" | \"offline\" | \"away\" | \"busy\"\n  lastMessage?: string\n}\n\n/* ---------------------------------------------------------------------------\n * DirectChatMessage\n * -------------------------------------------------------------------------- */\n\ninterface DirectChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  avatarUrl: string\n  text: string\n  time: string\n  isOwn?: boolean\n  variant?: string\n}\n\nconst DirectChatMessage = React.forwardRef<HTMLDivElement, DirectChatMessageProps>(\n  ({ className, name, avatarUrl, text, time, isOwn = false, variant, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex mb-[10px] gap-[10px]\",\n          isOwn && \"flex-row-reverse\",\n          className\n        )}\n        {...props}\n      >\n        {/* Avatar */}\n        <img\n          src={avatarUrl}\n          alt={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%]\", isOwn && \"text-right\")}>\n          {/* Name and time */}\n          <div\n            className={cn(\n              \"flex items-center gap-[8px] mb-[2px] text-[12px]\",\n              isOwn && \"flex-row-reverse\"\n            )}\n          >\n            <span className=\"font-semibold text-[#333]\">{name}</span>\n            <span className=\"text-[#999]\">{time}</span>\n          </div>\n\n          {/* Message bubble */}\n          <div\n            className={cn(\n              \"relative inline-block py-[5px] px-[10px] rounded-[5px] text-[14px] text-left\",\n              isOwn\n                ? \"bg-[var(--adminlte-light-blue,#3c8dbc)] text-white\"\n                : \"bg-[#d2d6de] text-[#333]\",\n              isOwn && variant\n            )}\n          >\n            {text}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nDirectChatMessage.displayName = \"DirectChatMessage\"\n\n/* ---------------------------------------------------------------------------\n * DirectChatContacts\n * -------------------------------------------------------------------------- */\n\ninterface DirectChatContactsProps extends React.HTMLAttributes<HTMLDivElement> {\n  contacts: DirectChatContactData[]\n  visible?: boolean\n}\n\nconst statusColors: Record<string, string> = {\n  online: \"bg-[#00a65a]\",\n  offline: \"bg-[#d2d6de]\",\n  away: \"bg-[#f39c12]\",\n  busy: \"bg-[#dd4b39]\",\n}\n\nconst DirectChatContacts = React.forwardRef<HTMLDivElement, DirectChatContactsProps>(\n  ({ className, contacts, visible = false, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"absolute top-0 bottom-0 right-0 w-full bg-[#222d32] overflow-y-auto transition-transform duration-300 z-10\",\n          visible ? \"translate-x-0\" : \"translate-x-full\",\n          className\n        )}\n        {...props}\n      >\n        <ul className=\"list-none m-0 p-0\">\n          {contacts.map((contact) => (\n            <li\n              key={contact.id}\n              className=\"border-b border-b-[rgba(255,255,255,0.2)] p-[10px] cursor-pointer hover:bg-[rgba(255,255,255,0.1)]\"\n            >\n              <a href=\"#\" className=\"flex items-center gap-[10px] no-underline text-white\">\n                <div className=\"relative flex-shrink-0\">\n                  <img\n                    src={contact.avatarUrl}\n                    alt={contact.name}\n                    className=\"w-[40px] h-[40px] rounded-full object-cover\"\n                  />\n                  <span\n                    className={cn(\n                      \"absolute bottom-0 right-0 w-[10px] h-[10px] rounded-full border-2 border-[#222d32]\",\n                      statusColors[contact.status || \"offline\"]\n                    )}\n                  />\n                </div>\n                <div className=\"flex-1 min-w-0\">\n                  <span className=\"block text-[14px] font-semibold truncate\">\n                    {contact.name}\n                  </span>\n                  {contact.lastMessage && (\n                    <span className=\"block text-[12px] text-[rgba(255,255,255,0.6)] truncate\">\n                      {contact.lastMessage}\n                    </span>\n                  )}\n                </div>\n              </a>\n            </li>\n          ))}\n        </ul>\n      </div>\n    )\n  }\n)\nDirectChatContacts.displayName = \"DirectChatContacts\"\n\n/* ---------------------------------------------------------------------------\n * DirectChat\n * -------------------------------------------------------------------------- */\n\ninterface DirectChatProps extends React.HTMLAttributes<HTMLDivElement> {\n  messages?: DirectChatMessageData[]\n  contacts?: DirectChatContactData[]\n  variant?: string\n  height?: number\n  onSendMessage?: (text: string) => void\n}\n\nconst DirectChat = React.forwardRef<HTMLDivElement, DirectChatProps>(\n  (\n    {\n      className,\n      messages = [],\n      contacts = [],\n      variant,\n      height = 250,\n      onSendMessage,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [inputValue, setInputValue] = React.useState(\"\")\n    const [contactsVisible, setContactsVisible] = React.useState(false)\n\n    const handleSend = () => {\n      if (inputValue.trim() && onSendMessage) {\n        onSendMessage(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(\"relative bg-white overflow-hidden\", className)}\n        {...props}\n      >\n        {/* Box tools - contacts toggle */}\n        {contacts.length > 0 && (\n          <div className=\"absolute top-[10px] right-[10px] z-20\">\n            <button\n              type=\"button\"\n              className=\"bg-transparent border-none text-[#999] cursor-pointer text-[14px] hover:text-[#333]\"\n              onClick={() => setContactsVisible(!contactsVisible)}\n              aria-label=\"Toggle contacts\"\n            >\n              <span className=\"inline-block w-[20px] h-[20px] text-center\">\n                {contactsVisible ? \"\\u2715\" : \"\\u2630\"}\n              </span>\n            </button>\n          </div>\n        )}\n\n        {/* Messages container */}\n        <div\n          className=\"overflow-y-auto p-[10px]\"\n          style={{ height: `${height}px` }}\n        >\n          {messages.map((msg) => (\n            <DirectChatMessage\n              key={msg.id}\n              name={msg.name}\n              avatarUrl={msg.avatarUrl}\n              text={msg.text}\n              time={msg.time}\n              isOwn={msg.isOwn}\n              variant={variant}\n            />\n          ))}\n          {children}\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\n        {/* Contacts overlay */}\n        {contacts.length > 0 && (\n          <DirectChatContacts\n            contacts={contacts}\n            visible={contactsVisible}\n          />\n        )}\n      </div>\n    )\n  }\n)\nDirectChat.displayName = \"DirectChat\"\n\nexport { DirectChat, DirectChatMessage, DirectChatContacts }\nexport type {\n  DirectChatProps,\n  DirectChatMessageProps,\n  DirectChatContactsProps,\n  DirectChatMessageData,\n  DirectChatContactData,\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}