{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "open-in-v0-chat",
  "title": "Chat Basic",
  "description": "A basic chat example block for bootstrapping the chat UI.",
  "dependencies": [
    "@radix-ui/react-separator",
    "@radix-ui/react-slot",
    "class-variance-authority",
    "emoji-picker-react"
  ],
  "registryDependencies": [
    "https://mesailor.github.io/r/chat.json",
    "separator",
    "input-group",
    "sidebar",
    "badge",
    "popover",
    "button",
    "dropdown-menu",
    "skeleton",
    "dialog",
    "avatar",
    "sheet"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/chat-basic/page.tsx",
      "content": "\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\nimport { Fragment } from \"react/jsx-runtime\";\nimport {\n  Event,\n  EventFile,\n} from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport { mockAPI } from \"@/registry/new-york/blocks/chat-basic/data/mock-api\";\nimport {\n  CURRENT_USER,\n  OTHER_USER,\n} from \"@/registry/new-york/blocks/chat-basic/data/users\";\nimport { useMessages } from \"@/registry/new-york/blocks/chat-basic/hooks/use-messages\";\nimport { useMessageReactions } from \"@/registry/new-york/blocks/chat-basic/hooks/use-message-reactions\";\nimport { useMessageSearch } from \"@/registry/new-york/blocks/chat-basic/hooks/use-message-search\";\nimport { useMessageActions } from \"@/registry/new-york/blocks/chat-basic/hooks/use-message-actions\";\nimport { useHighlightedMessageId } from \"@/registry/new-york/blocks/chat-basic/hooks/use-highlighted-message-id\";\nimport { useProfile } from \"@/registry/new-york/blocks/chat-basic/hooks/use-profile\";\nimport { useChatSidebar } from \"@/registry/new-york/blocks/chat-basic/hooks/use-chat-sidebar\";\nimport { useIsWider } from \"@/registry/new-york/blocks/chat-basic/hooks/use-is-wider\";\nimport {\n  CheckIcon,\n  PhoneIcon,\n  PlusIcon,\n  SearchIcon,\n  SendIcon,\n  SmileIcon,\n  VideoIcon,\n  XIcon,\n} from \"lucide-react\";\nimport { ChatHeaderActions } from \"@/registry/new-york/blocks/chat-basic/components/chat-header-actions\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Chat } from \"@/registry/new-york/chat/chat\";\nimport {\n  ChatHeader,\n  ChatHeaderAddon,\n  ChatHeaderAvatar,\n  ChatHeaderButton,\n  ChatHeaderMain,\n} from \"@/registry/new-york/chat/chat-header\";\nimport {\n  ChatToolbar,\n  ChatToolbarAddon,\n  ChatToolbarAttachment,\n  ChatToolbarAttachmentButton,\n  ChatToolbarButton,\n  ChatToolbarTextarea,\n} from \"@/registry/new-york/chat/chat-toolbar\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport EmojiPicker, { EmojiClickData, Theme } from \"emoji-picker-react\";\nimport { ChatMessages } from \"@/registry/new-york/chat/chat-messages\";\nimport { PrimaryMessage } from \"@/registry/new-york/blocks/chat-basic/components/message-items/primary-message\";\nimport { DateItem } from \"@/registry/new-york/blocks/chat-basic/components/message-items/date-item\";\nimport { AdditionalMessage } from \"@/registry/new-york/blocks/chat-basic/components/message-items/additional-message\";\nimport { PrimaryMessageSkeleton } from \"@/registry/new-york/blocks/chat-basic/components/message-items/primary-message-skeleton\";\nimport { DateItemSkeleton } from \"@/registry/new-york/blocks/chat-basic/components/message-items/date-item-skeleton\";\nimport { SearchSidebarContent } from \"@/registry/new-york/blocks/chat-basic/components/message-search/search-sidebar-content\";\nimport { DeleteDialog } from \"@/registry/new-york/blocks/chat-basic/components/message-actions/delete-dialog\";\nimport { ProfileSidebarContent } from \"@/registry/new-york/blocks/chat-basic/components/profile/profile-sidebar-content\";\nimport { BlockDialog } from \"@/registry/new-york/blocks/chat-basic/components/profile/block-dialog\";\nimport { ChatSidebar } from \"@/registry/new-york/blocks/chat-basic/components/chat-sidebar/chat-sidebar\";\n\nexport default function ChatExampleComponent() {\n  const chatContainerRef = useRef<HTMLDivElement>(null);\n  const chatMessagesRef = useRef<HTMLDivElement>(null);\n  const isChatWide = useIsWider(chatContainerRef, 672);\n\n  const { loading, messages, setMessages } = useMessages({\n    onFetch: mockAPI.getEvents,\n  });\n\n  const { sidebarOpen, setSidebarOpen, sidebarView, setSidebarView } =\n    useChatSidebar();\n\n  const { handleReaction } = useMessageReactions({\n    setMessages,\n    onReact: mockAPI.reactToEvent,\n  });\n\n  const {\n    searchQuery,\n    setSearchQuery,\n    activeSearchQuery,\n    searchResults,\n    handleSearch,\n    handleClearSearch,\n    openSearch,\n  } = useMessageSearch({\n    setSidebarOpen,\n    setSidebarView,\n    onSearch: mockAPI.searchEvents,\n  });\n\n  const { highlightedMessageId, setHighlightedMessageId } =\n    useHighlightedMessageId();\n\n  const {\n    openBlockDialog,\n    setOpenBlockDialog,\n    isBlocked,\n    openProfile,\n    handleBlock,\n    handleUnblock,\n  } = useProfile({\n    setSidebarOpen,\n    setSidebarView,\n    onBlock: mockAPI.blockUser,\n    onUnblock: mockAPI.unblockUser,\n  });\n\n  const {\n    messageToDelete,\n    openDeleteDialog,\n    setOpenDeleteDialog,\n    messageToEdit,\n    handleOpenDeleteDialog,\n    handleDelete,\n    handleStartEdit,\n    handleSubmitEdit,\n    handleCancelEdit,\n  } = useMessageActions({\n    setMessages,\n    onDelete: mockAPI.deleteEvent,\n    onUpdate: mockAPI.updateEvent,\n  });\n\n  const handleSubmit = useCallback(\n    async (submitData: { text: string; files: File[] }) => {\n      // Optimistically add the new message to the UI with a temporary ID and \"sending\" status\n      const tempId = Date.now();\n      const newMessage: Event = {\n        id: tempId,\n        status: \"sending\",\n        tempId: tempId,\n        sender: CURRENT_USER,\n        timestamp: Date.now(),\n        content: {\n          type: \"message\",\n          ...(submitData.text && { text: submitData.text }),\n          ...(submitData.files.length > 0 && {\n            files: submitData.files.map((file) => ({\n              url: URL.createObjectURL(file),\n              fileName: file.name,\n              mimeType: file.type,\n            })),\n          }),\n        },\n      };\n      setMessages((prev) => [newMessage, ...prev]);\n\n      // Replace the temporary message with the posted message\n      const postedMessage = await mockAPI.postEvent({\n        text: submitData.text,\n        files: submitData.files,\n      });\n      setMessages((prev) =>\n        prev.map((msg) => (msg.tempId === tempId ? postedMessage : msg)),\n      );\n    },\n    [setMessages],\n  );\n\n  const scrollToBottom = useCallback(() => {\n    chatMessagesRef.current?.scrollTo({ top: 0, behavior: \"smooth\" });\n  }, []);\n\n  const scrollToMessage = useCallback(\n    (id: number) => {\n      const container = chatMessagesRef.current;\n      const element = document.getElementById(`message-${id}`);\n      if (!container || !element) return;\n\n      const containerRect = container.getBoundingClientRect();\n      const elementRect = element.getBoundingClientRect();\n      container.scrollTo({\n        top:\n          container.scrollTop +\n          elementRect.top -\n          containerRect.top -\n          containerRect.height / 2 +\n          elementRect.height / 2,\n        behavior: \"smooth\",\n      });\n\n      setHighlightedMessageId(id);\n    },\n    [setHighlightedMessageId],\n  );\n\n  const handleSidebarClose = useCallback(() => {\n    if (isChatWide && sidebarView === \"search\") {\n      handleClearSearch();\n    }\n    setSidebarOpen(false);\n  }, [isChatWide, sidebarView, handleClearSearch, setSidebarOpen]);\n\n  return (\n    <>\n      <Chat ref={chatContainerRef} className=\"h-svh\">\n        <ChatHeader className=\"border-b\">\n          <ChatHeaderAddon>\n            <ChatHeaderAvatar\n              src=\"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\"\n              alt=\"@annsmith\"\n              fallback=\"AS\"\n            />\n          </ChatHeaderAddon>\n          <ChatHeaderMain>\n            <span className=\"font-medium\">Ann Smith</span>\n            {isBlocked && <Badge variant=\"destructive\">Blocked</Badge>}\n            <span className=\"text-sm font-semibold\">AKA</span>\n            <span className=\"flex-1 grid\">\n              <span className=\"text-sm font-medium truncate\">\n                Front-end developer\n              </span>\n            </span>\n          </ChatHeaderMain>\n          <ChatHeaderAddon>\n            <InputGroup className=\"@2xl/chat:flex hidden\">\n              <InputGroupInput\n                placeholder=\"Search...\"\n                aria-label=\"Search messages\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") {\n                    e.preventDefault();\n                    handleSearch(searchQuery);\n                  }\n                }}\n              />\n              <InputGroupAddon>\n                <SearchIcon />\n              </InputGroupAddon>\n            </InputGroup>\n            <ChatHeaderButton\n              aria-label=\"Start call\"\n              className=\"@2xl/chat:inline-flex hidden\"\n            >\n              <PhoneIcon />\n            </ChatHeaderButton>\n            <ChatHeaderButton\n              aria-label=\"Start video call\"\n              className=\"@2xl/chat:inline-flex hidden\"\n            >\n              <VideoIcon />\n            </ChatHeaderButton>\n            <ChatHeaderActions\n              isChatWide={isChatWide}\n              openSearch={openSearch}\n              openProfile={openProfile}\n              isBlocked={isBlocked}\n              onUnblock={() => handleUnblock(OTHER_USER.id)}\n              onBlock={() => setOpenBlockDialog(true)}\n            />\n          </ChatHeaderAddon>\n        </ChatHeader>\n\n        <SidebarProvider\n          open={sidebarOpen}\n          onOpenChange={(open) => {\n            if (!open) handleSidebarClose();\n          }}\n          className=\"flex-1 min-h-0\"\n        >\n          <SidebarInset className=\"min-h-0 overflow-hidden\">\n            <ChatMessages\n              ref={chatMessagesRef}\n              className=\"scrollbar-hidden\"\n              aria-busy={loading}\n            >\n              {loading &&\n                Array.from({ length: 20 }).map((_, i) => {\n                  if (i % 6 === 0) {\n                    return (\n                      <Fragment key={i}>\n                        <PrimaryMessageSkeleton className=\"w-full\" />\n                        <DateItemSkeleton className=\"my-4\" />\n                      </Fragment>\n                    );\n                  }\n                  return (\n                    <PrimaryMessageSkeleton key={i} className=\"w-full mt-4\" />\n                  );\n                })}\n\n              {!loading &&\n                messages.map((msg, i, msgs) => {\n                  const isOwnMessage = msg.sender.id === CURRENT_USER.id;\n                  // If date changed, show date item\n                  if (\n                    new Date(msg.timestamp).toDateString() !==\n                    new Date(msgs[i + 1]?.timestamp).toDateString()\n                  ) {\n                    return (\n                      <Fragment key={msg.id}>\n                        <PrimaryMessage\n                          id={`message-${msg.id}`}\n                          highlighted={highlightedMessageId === msg.id}\n                          avatarSrc={msg.sender.avatarUrl}\n                          avatarAlt={msg.sender.username}\n                          avatarFallback={msg.sender.name.slice(0, 2)}\n                          senderName={msg.sender.name}\n                          content={msg.content}\n                          timestamp={msg.timestamp}\n                          status={msg.status}\n                          reactions={msg.reactions}\n                          isEdited={msg.isEdited}\n                          onReaction={(emoji) => handleReaction(msg.id, emoji)}\n                          onDelete={\n                            isOwnMessage\n                              ? () => handleOpenDeleteDialog(msg)\n                              : undefined\n                          }\n                          onEdit={\n                            isOwnMessage\n                              ? () => handleStartEdit(msg)\n                              : undefined\n                          }\n                        />\n                        <DateItem timestamp={msg.timestamp} className=\"my-4\" />\n                      </Fragment>\n                    );\n                  }\n\n                  // If next item is same user, show additional\n                  if (msg.sender.id === msgs[i + 1]?.sender.id) {\n                    return (\n                      <AdditionalMessage\n                        id={`message-${msg.id}`}\n                        className=\"pt-1\"\n                        highlighted={highlightedMessageId === msg.id}\n                        key={msg.id}\n                        content={msg.content}\n                        timestamp={msg.timestamp}\n                        status={msg.status}\n                        reactions={msg.reactions}\n                        isEdited={msg.isEdited}\n                        onReaction={(emoji) => handleReaction(msg.id, emoji)}\n                        onDelete={\n                          isOwnMessage\n                            ? () => handleOpenDeleteDialog(msg)\n                            : undefined\n                        }\n                        onEdit={\n                          isOwnMessage ? () => handleStartEdit(msg) : undefined\n                        }\n                      />\n                    );\n                  }\n                  // Else, show primary\n                  else {\n                    return (\n                      <PrimaryMessage\n                        id={`message-${msg.id}`}\n                        className=\"mt-4\"\n                        highlighted={highlightedMessageId === msg.id}\n                        key={msg.id}\n                        avatarSrc={msg.sender.avatarUrl}\n                        avatarAlt={msg.sender.username}\n                        avatarFallback={msg.sender.name.slice(0, 2)}\n                        senderName={msg.sender.name}\n                        content={msg.content}\n                        timestamp={msg.timestamp}\n                        status={msg.status}\n                        reactions={msg.reactions}\n                        isEdited={msg.isEdited}\n                        onReaction={(emoji) => handleReaction(msg.id, emoji)}\n                        onDelete={\n                          isOwnMessage\n                            ? () => handleOpenDeleteDialog(msg)\n                            : undefined\n                        }\n                        onEdit={\n                          isOwnMessage ? () => handleStartEdit(msg) : undefined\n                        }\n                      />\n                    );\n                  }\n                })}\n            </ChatMessages>\n\n            <Toolbar\n              key={messageToEdit?.id ?? \"new\"}\n              onSubmit={handleSubmit}\n              onScrollToBottom={scrollToBottom}\n              messageToEdit={messageToEdit}\n              onSubmitEdit={handleSubmitEdit}\n              onCancelEdit={handleCancelEdit}\n            />\n          </SidebarInset>\n\n          <ChatSidebar\n            open={sidebarOpen}\n            onClose={handleSidebarClose}\n            title={sidebarView === \"search\" ? \"Search\" : \"Profile\"}\n            isMobile={!isChatWide}\n          >\n            {sidebarView === \"search\" && (\n              <SearchSidebarContent\n                query={activeSearchQuery}\n                results={searchResults}\n                searchQuery={searchQuery}\n                onSearchQueryChange={setSearchQuery}\n                onSearch={handleSearch}\n                onResultClick={scrollToMessage}\n                onClose={handleSidebarClose}\n                isMobile={!isChatWide}\n              />\n            )}\n            {sidebarView === \"profile\" && <ProfileSidebarContent />}\n          </ChatSidebar>\n        </SidebarProvider>\n      </Chat>\n      <DeleteDialog\n        open={openDeleteDialog}\n        onOpenChange={setOpenDeleteDialog}\n        message={messageToDelete}\n        onConfirm={handleDelete}\n      />\n      <BlockDialog\n        open={openBlockDialog}\n        onOpenChange={setOpenBlockDialog}\n        onConfirm={() => handleBlock(OTHER_USER.id)}\n      />\n    </>\n  );\n}\n\ninterface ToolbarProps {\n  messageToEdit: Event | null;\n  onSubmit: (data: { text: string; files: File[] }) => Promise<void> | void;\n  onSubmitEdit: (data: {\n    text: string;\n    uploadFiles: File[];\n    editedFiles: EventFile[];\n  }) => Promise<void> | void;\n  onCancelEdit: () => void;\n  onScrollToBottom?: () => void;\n}\n\nfunction Toolbar({\n  messageToEdit,\n  onSubmit,\n  onSubmitEdit,\n  onCancelEdit,\n  onScrollToBottom,\n}: ToolbarProps) {\n  const [input, setInput] = useState(messageToEdit?.content.text ?? \"\");\n  const [files, setFiles] = useState<File[]>([]);\n\n  const [filesToEdit, setFilesToEdit] = useState<EventFile[]>(\n    messageToEdit?.content.files ?? [],\n  );\n\n  const [emojiOpen, setEmojiOpen] = useState(false);\n\n  const handleSubmit = useCallback(() => {\n    const trimmedContent = input.trim();\n    if (!trimmedContent && files.length === 0) return; // Don't submit empty messages\n\n    onSubmit?.({\n      text: trimmedContent,\n      files,\n    });\n\n    setInput(\"\");\n    setFiles([]);\n    // Scroll to top (newest message) when a new message is sent\n    setTimeout(() => {\n      onScrollToBottom?.();\n    });\n  }, [input, files, onSubmit, onScrollToBottom]);\n\n  const handleSubmitEdit = useCallback(() => {\n    const trimmedContent = input.trim();\n    if (!trimmedContent && files.length === 0 && filesToEdit.length === 0) {\n      return; // Don't submit empty messages\n    }\n\n    onSubmitEdit?.({\n      text: trimmedContent,\n      uploadFiles: files,\n      editedFiles: filesToEdit,\n    });\n\n    setInput(\"\");\n    setFiles([]);\n  }, [input, files, filesToEdit, onSubmitEdit]);\n\n  return (\n    <ChatToolbar>\n      {(files.length > 0 || filesToEdit.length > 0) && (\n        <ChatToolbarAddon\n          align=\"block-start\"\n          className=\"mb-2 overflow-x-auto gap-2\"\n        >\n          {files.map((file, i) => (\n            <ChatToolbarAttachment\n              key={file.name + i}\n              fileName={file.name}\n              onRemove={() =>\n                setFiles((prev) => prev.filter((_, idx) => idx !== i))\n              }\n            />\n          ))}\n          {filesToEdit.map((file, i) => (\n            <ChatToolbarAttachment\n              key={file.fileName + i}\n              fileName={file.fileName}\n              onRemove={() =>\n                setFilesToEdit((prev) => prev.filter((_, idx) => idx !== i))\n              }\n            />\n          ))}\n        </ChatToolbarAddon>\n      )}\n\n      <ChatToolbarAddon\n        align=\"inline-start\"\n        className=\"order-2 flex-1 @2xl/chat:order-1 @2xl/chat:flex-none\"\n      >\n        <ChatToolbarAttachmentButton\n          aria-label=\"Attach files\"\n          onFilesSelected={(files) => {\n            setFiles((prev) => [...prev, ...files]);\n          }}\n        >\n          <PlusIcon />\n        </ChatToolbarAttachmentButton>\n        <Popover open={emojiOpen} onOpenChange={setEmojiOpen}>\n          <PopoverTrigger asChild>\n            <ChatToolbarButton aria-label=\"Insert emoji\">\n              <SmileIcon />\n            </ChatToolbarButton>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\" side=\"top\">\n            <EmojiPicker\n              theme={Theme.AUTO}\n              onEmojiClick={(emojiData: EmojiClickData) => {\n                setInput((prev) => prev + emojiData.emoji);\n                setEmojiOpen(false);\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </ChatToolbarAddon>\n\n      <div className=\"w-full min-w-0 order-1 pb-1 @2xl/chat:pb-0 @2xl/chat:flex-1 @2xl/chat:w-auto @2xl/chat:order-2\">\n        <ChatToolbarTextarea\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onSubmit={() => (messageToEdit ? handleSubmitEdit() : handleSubmit())}\n        />\n      </div>\n\n      <ChatToolbarAddon align=\"inline-end\">\n        {messageToEdit && (\n          <>\n            <ChatToolbarButton aria-label=\"Cancel edit\" onClick={onCancelEdit}>\n              <XIcon />\n            </ChatToolbarButton>\n            <ChatToolbarButton\n              aria-label=\"Save edit\"\n              variant=\"default\"\n              disabled={\n                !input.trim() && files.length === 0 && filesToEdit.length === 0\n              }\n              onClick={() => handleSubmitEdit()}\n            >\n              <CheckIcon />\n            </ChatToolbarButton>\n          </>\n        )}\n        {!messageToEdit && (\n          <ChatToolbarButton\n            aria-label=\"Send message\"\n            variant=\"default\"\n            disabled={!input.trim() && files.length === 0}\n            onClick={() => handleSubmit()}\n            onMouseDown={(e) => {\n              e.preventDefault();\n            }}\n          >\n            <SendIcon />\n          </ChatToolbarButton>\n        )}\n      </ChatToolbarAddon>\n    </ChatToolbar>\n  );\n}\n",
      "type": "registry:page",
      "target": "app/page.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/data/messages.ts",
      "content": "import { User } from \"@/registry/new-york/blocks/chat-basic/data/users\";\n\nexport type EventType = \"message\" | \"system\";\n\nexport interface EventFile {\n  url: string;\n  fileName: string;\n  mimeType?: string;\n}\n\nexport interface EventContent {\n  type: EventType;\n  text?: string;\n  files?: EventFile[];\n}\n\nexport interface Event {\n  id: number;\n  tempId?: number; // Temporary ID for optimistic UI updates\n  status: \"sending\" | \"sent\" | \"failed\";\n  sender: User;\n  timestamp: number;\n  content: EventContent;\n  reactions?: string[];\n  isEdited?: boolean;\n}\n\nexport const EVENTS: Event[] = [\n  {\n    id: 17,\n    status: \"sent\",\n    sender: {\n      id: \"annsmith-user-id\",\n      name: \"Ann Smith\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\",\n      username: \"@annsmith\",\n    },\n    timestamp: 1234979120123,\n    content: {\n      type: \"message\",\n      text: \"Hey John, just wanted to say - the new dashboard design looks fantastic! The way you organized the metrics is super intuitive. I can already tell our users are going to love it. Great work on this! 🙌\",\n    },\n  },\n  {\n    id: 16,\n    status: \"sent\",\n    sender: {\n      id: \"johndoe-user-id\",\n      name: \"John Doe\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n      username: \"@johndoe\",\n    },\n    timestamp: 1234878110123,\n    content: {\n      type: \"message\",\n      text: \"Oh, and could you also share those user feedback notes? I want to make sure we're really nailing what they need before we ship this.\",\n    },\n  },\n  {\n    id: 15,\n    status: \"sent\",\n    sender: {\n      id: \"johndoe-user-id\",\n      name: \"John Doe\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n      username: \"@johndoe\",\n    },\n    timestamp: 1234878100123,\n    content: {\n      type: \"message\",\n      text: \"Just tested the new checkout flow - it's so smooth! The loading states you added make such a difference. Customers are gonna love this! 🚀\",\n    },\n  },\n  {\n    id: 14,\n    status: \"sent\",\n    sender: {\n      id: \"johndoe-user-id\",\n      name: \"John Doe\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n      username: \"@johndoe\",\n    },\n    timestamp: 1234678090123,\n    content: {\n      type: \"message\",\n      text: \"Sweet! I'll check it out on mobile too and let you know. Thanks for keeping accessibility in mind - that's real value right there!\",\n    },\n  },\n  {\n    id: 13,\n    status: \"sent\",\n    sender: {\n      id: \"annsmith-user-id\",\n      name: \"Ann Smith\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\",\n      username: \"@annsmith\",\n    },\n    timestamp: 1234678080123,\n    content: {\n      type: \"message\",\n      text: \"But first, could you give the responsive design a quick look? I want to make sure it feels great on all devices before we show it to users.\",\n    },\n  },\n  {\n    id: 12,\n    status: \"sent\",\n    sender: {\n      id: \"annsmith-user-id\",\n      name: \"Ann Smith\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\",\n      username: \"@annsmith\",\n    },\n    timestamp: 1234678070123,\n    content: {\n      type: \"message\",\n      text: \"Hey! Just wrapped up the dashboard redesign. Focused on making the key metrics super easy to find - think our users will really appreciate it!\",\n    },\n  },\n  {\n    id: 11,\n    status: \"sent\",\n    sender: {\n      id: \"johndoe-user-id\",\n      name: \"John Doe\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n      username: \"@johndoe\",\n    },\n    timestamp: 1234677970123,\n    content: {\n      type: \"message\",\n      text: \"Also, how's the performance optimization going? Any wins on those load times we discussed?\",\n    },\n  },\n  {\n    id: 10,\n    status: \"sent\",\n    sender: {\n      id: \"johndoe-user-id\",\n      name: \"John Doe\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n      username: \"@johndoe\",\n    },\n    timestamp: 1234677910123,\n    content: {\n      type: \"message\",\n      text: \"Hey! How's it going? Did you get a chance to look at those user journey mockups? Want to make sure we're solving the right problems for them.\",\n    },\n  },\n  {\n    id: 9,\n    status: \"sent\",\n    sender: {\n      id: \"annsmith-user-id\",\n      name: \"Ann Smith\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\",\n      username: \"@annsmith\",\n    },\n    timestamp: 1234567919123,\n    content: {\n      type: \"message\",\n      text: \"I'll ping you here once it's ready for a demo!\",\n    },\n  },\n  {\n    id: 8,\n    status: \"sent\",\n    sender: {\n      id: \"annsmith-user-id\",\n      name: \"Ann Smith\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\",\n      username: \"@annsmith\",\n    },\n    timestamp: 1234567917123,\n    content: {\n      type: \"message\",\n      text: \"Perfect! Time to build something awesome ✨\",\n    },\n  },\n  {\n    id: 7,\n    status: \"sent\",\n    sender: {\n      id: \"annsmith-user-id\",\n      name: \"Ann Smith\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\",\n      username: \"@annsmith\",\n    },\n    timestamp: 1234567913123,\n    content: {\n      type: \"message\",\n      text: \"Awesome, thanks! That totally makes sense now. I love how we're thinking about the end user experience here. Can't wait to see their reaction when this goes live!\",\n    },\n  },\n  {\n    id: 6,\n    status: \"sent\",\n    sender: {\n      id: \"johndoe-user-id\",\n      name: \"John Doe\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n      username: \"@johndoe\",\n    },\n    timestamp: 1234567910123,\n    content: {\n      type: \"message\",\n      text: \"So basically - keep the interactions snappy, add subtle animations for feedback, and make sure error states are super clear. When users feel confident using the interface, they stick around. That's the value we're delivering! 😊\",\n    },\n  },\n  {\n    id: 5,\n    status: \"sent\",\n    sender: {\n      id: \"johndoe-user-id\",\n      name: \"John Doe\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n      username: \"@johndoe\",\n    },\n    timestamp: 1234567910123,\n    content: { type: \"message\", text: \"Here's what I'm thinking:\" },\n  },\n  {\n    id: 4,\n    status: \"sent\",\n    sender: {\n      id: \"johndoe-user-id\",\n      name: \"John Doe\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n      username: \"@johndoe\",\n    },\n    timestamp: 1234567899123,\n    content: {\n      type: \"message\",\n      text: \"Absolutely! Let me pull up my notes from the customer interviews\",\n    },\n  },\n  {\n    id: 3,\n    status: \"sent\",\n    sender: {\n      id: \"johndoe-user-id\",\n      name: \"John Doe\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n      username: \"@johndoe\",\n    },\n    timestamp: 1234567895123,\n    content: { type: \"message\", text: \"Hey! Doing great, thanks for asking!\" },\n  },\n  {\n    id: 2,\n    status: \"sent\",\n    sender: {\n      id: \"annsmith-user-id\",\n      name: \"Ann Smith\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\",\n      username: \"@annsmith\",\n    },\n    timestamp: 1234567892123,\n    content: {\n      type: \"message\",\n      text: \"Could you share your thoughts on the UX flow? Want to make sure we're creating real value for our users.\",\n    },\n  },\n  {\n    id: 1,\n    status: \"sent\",\n    sender: {\n      id: \"annsmith-user-id\",\n      name: \"Ann Smith\",\n      avatarUrl:\n        \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\",\n      username: \"@annsmith\",\n    },\n    timestamp: 1234567890123,\n    content: { type: \"message\", text: \"Hey there! How's your day going?\" },\n  },\n];\n",
      "type": "registry:file",
      "target": "data/mock/messages.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/data/users.ts",
      "content": "export interface User {\n  id: string;\n  name: string;\n  avatarUrl: string;\n  username: string;\n}\n\nexport const CURRENT_USER: User = {\n  id: \"johndoe-user-id\",\n  name: \"John Doe\",\n  avatarUrl: \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_13.png\",\n  username: \"@johndoe\",\n};\n\nexport const OTHER_USER: User = {\n  id: \"annsmith-user-id\",\n  name: \"Ann Smith\",\n  avatarUrl: \"https://cdn.jsdelivr.net/gh/alohe/avatars/png/upstream_20.png\",\n  username: \"@annsmith\",\n};\n",
      "type": "registry:file",
      "target": "data/mock/users.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/data/mock-api.ts",
      "content": "import {\n  Event,\n  EventContent,\n  EventFile,\n  EVENTS,\n} from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport { CURRENT_USER } from \"@/registry/new-york/blocks/chat-basic/data/users\";\n\nexport const searchEvents = (query: string): Promise<Event[]> => {\n  const q = query.trim().toLowerCase();\n  if (!q) return Promise.resolve([]);\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(EVENTS.filter((e) => e.content.text?.toLowerCase().includes(q)));\n    }, 150);\n  });\n};\n\nexport const getEvents = () => {\n  // Simulate fetching events from an API with a delay\n  return new Promise<Event[]>((resolve) => {\n    resolve(EVENTS);\n  });\n};\n\nexport const postEvent = ({\n  text,\n  files,\n}: {\n  text?: string;\n  files?: File[];\n}): Promise<Event> => {\n  if (!text && (!files || files.length === 0)) {\n    return Promise.reject(new Error(\"Either text or files must be provided\"));\n  }\n\n  const content: EventContent = {\n    type: \"message\",\n    ...(text && { text }),\n    ...(files &&\n      files.length > 0 && {\n        files: files.map((file) => ({\n          url: URL.createObjectURL(file),\n          fileName: file.name,\n          mimeType: file.type || undefined,\n        })),\n      }),\n  };\n\n  const newEvent: Event = {\n    id: Date.now(),\n    status: \"sent\",\n    sender: CURRENT_USER,\n    timestamp: Date.now(),\n    content,\n  };\n  // Simulate posting an event to an API with a delay\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      EVENTS.unshift(newEvent); // Add to the beginning since events are in reverse order\n      resolve(newEvent);\n    }, 1000);\n  });\n};\n\nexport const deleteEvent = (id: number) => {\n  return new Promise<number>((resolve, reject) => {\n    setTimeout(() => {\n      const index = EVENTS.findIndex((e) => e.id === id);\n      if (index !== -1) {\n        EVENTS.splice(index, 1);\n        resolve(id);\n      } else {\n        reject(new Error(\"Event not found\"));\n      }\n    }, 500);\n  });\n};\n\nexport const updateEvent = (\n  id: number,\n  data: { text?: string; uploadFiles?: File[]; editedFiles?: EventFile[] },\n) => {\n  return new Promise<Event>((resolve, reject) => {\n    setTimeout(() => {\n      const event = EVENTS.find((e) => e.id === id);\n      if (!event) {\n        reject(new Error(\"Event not found\"));\n        return;\n      }\n      const newFiles: EventFile[] = (data.uploadFiles ?? []).map((file) => ({\n        url: URL.createObjectURL(file),\n        fileName: file.name,\n        mimeType: file.type || undefined,\n      }));\n      const allFiles = [...(data.editedFiles ?? []), ...newFiles];\n      event.content = {\n        ...event.content,\n        ...(data.text !== undefined && { text: data.text }),\n        ...(allFiles.length > 0 ? { files: allFiles } : { files: undefined }),\n      };\n      event.isEdited = true;\n      resolve(structuredClone(event));\n    }, 500);\n  });\n};\n\nconst blockUser = (userId: string): Promise<void> => {\n  console.log(`Blocking user with ID: ${userId}`);\n  return new Promise((resolve) => setTimeout(resolve, 200));\n};\n\nconst unblockUser = (userId: string): Promise<void> => {\n  console.log(`Unblocking user with ID: ${userId}`);\n  return new Promise((resolve) => setTimeout(resolve, 200));\n};\n\nexport const reactToEvent = (\n  eventId: number,\n  emoji: string,\n): Promise<Event> => {\n  const event = EVENTS.find((e) => e.id === eventId);\n  if (!event) return Promise.reject(new Error(\"Event not found\"));\n\n  if (event.reactions?.includes(emoji)) {\n    event.reactions = event.reactions.filter((r) => r !== emoji);\n  } else {\n    event.reactions = [emoji];\n  }\n\n  return new Promise((resolve) => {\n    setTimeout(() => resolve(event), 200);\n  });\n};\n\nexport const mockAPI = {\n  blockUser,\n  unblockUser,\n  reactToEvent,\n  searchEvents,\n  deleteEvent,\n  updateEvent,\n  getEvents,\n  postEvent,\n};\n",
      "type": "registry:file",
      "target": "data/mock/mock-api.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-messages.ts",
      "content": "import { Event } from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport { useEffect, useState } from \"react\";\n\nexport const useMessages = ({\n  onFetch,\n}: {\n  onFetch: () => Promise<Event[]>;\n}) => {\n  const [loading, setLoading] = useState(true);\n  const [messages, setMessages] = useState<Event[]>([]);\n\n  useEffect(() => {\n    const fetchMessages = async () => {\n      setLoading(true);\n      try {\n        const fetchedMessages = await onFetch();\n        setMessages(fetchedMessages);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchMessages();\n  }, [onFetch]);\n\n  return { loading, messages, setMessages };\n};\n",
      "type": "registry:hook",
      "target": "hooks/chat/use-messages.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-message-reactions.ts",
      "content": "import { Event } from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport { useCallback } from \"react\";\n\nexport const useMessageReactions = ({\n  setMessages,\n  onReact,\n}: {\n  setMessages: React.Dispatch<React.SetStateAction<Event[]>>;\n  onReact: (eventId: number, emoji: string) => Promise<Event>;\n}) => {\n  const handleReaction = useCallback(\n    async (eventId: number, emoji: string) => {\n      try {\n        const updated = await onReact(eventId, emoji);\n        setMessages((prev) =>\n          prev.map((msg) => (msg.id === eventId ? updated : msg)),\n        );\n      } catch (error) {\n        console.error(\"Failed to add reaction:\", error);\n        // Optionally show a toast or other user feedback\n      }\n    },\n    [setMessages, onReact],\n  );\n\n  return { handleReaction };\n};\n",
      "type": "registry:hook",
      "target": "hooks/chat/use-message-reactions.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-message-search.ts",
      "content": "import { Event } from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport { useCallback, useRef, useState } from \"react\";\n\nexport const useMessageSearch = ({\n  setSidebarOpen,\n  setSidebarView,\n  onSearch,\n}: {\n  setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  setSidebarView: React.Dispatch<React.SetStateAction<\"search\" | \"profile\">>;\n  onSearch: (query: string) => Promise<Event[]>;\n}) => {\n  const searchIdRef = useRef(0);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [activeSearchQuery, setActiveSearchQuery] = useState(\"\");\n  const [searchResults, setSearchResults] = useState<Event[]>([]);\n\n  const handleSearch = useCallback(\n    async (query: string) => {\n      const trimmed = query.trim();\n      if (!trimmed) return;\n      const currentSearchId = ++searchIdRef.current;\n      setActiveSearchQuery(trimmed);\n      setSidebarView(\"search\");\n      setSidebarOpen(true);\n      try {\n        const results = await onSearch(trimmed);\n        // Only update if this is still the most recent search\n        if (currentSearchId === searchIdRef.current) {\n          setSearchResults(results);\n        }\n      } catch (error) {\n        console.error(\"Search failed:\", error);\n        if (currentSearchId === searchIdRef.current) {\n          setSearchResults([]);\n        }\n      }\n    },\n    [setSidebarOpen, setSidebarView, onSearch],\n  );\n\n  const handleClearSearch = useCallback(() => {\n    setSearchQuery(\"\");\n    setActiveSearchQuery(\"\");\n    setSearchResults([]);\n  }, []);\n\n  const openSearch = useCallback(() => {\n    setSidebarView(\"search\");\n    setSidebarOpen(true);\n  }, [setSidebarView, setSidebarOpen]);\n\n  return {\n    searchQuery,\n    setSearchQuery,\n    activeSearchQuery,\n    searchResults,\n    handleSearch,\n    handleClearSearch,\n    openSearch,\n  };\n};\n",
      "type": "registry:hook",
      "target": "hooks/chat/use-message-search.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-message-actions.ts",
      "content": "import { useCallback, useState } from \"react\";\nimport {\n  Event,\n  EventContent,\n  EventFile,\n} from \"@/registry/new-york/blocks/chat-basic/data/messages\";\n\nexport const useMessageActions = ({\n  setMessages,\n  onDelete,\n  onUpdate,\n}: {\n  setMessages: React.Dispatch<React.SetStateAction<Event[]>>;\n  onDelete: (id: number) => Promise<number>;\n  onUpdate: (\n    id: number,\n    data: { text?: string; uploadFiles?: File[]; editedFiles?: EventFile[] },\n  ) => Promise<Event>;\n}) => {\n  const [messageToDelete, setMessageToDelete] = useState<Event | null>(null);\n  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);\n  const [messageToEdit, setMessageToEdit] = useState<Event | null>(null);\n\n  const handleOpenDeleteDialog = useCallback((event: Event) => {\n    setMessageToDelete(event);\n    setOpenDeleteDialog(true);\n  }, []);\n\n  const handleDelete = useCallback(async () => {\n    setOpenDeleteDialog(false);\n    if (!messageToDelete) return;\n\n    try {\n      const deletedMessageId = await onDelete(messageToDelete.id);\n      setMessages((prev) => prev.filter((msg) => msg.id !== deletedMessageId));\n      setMessageToDelete(null);\n    } catch (error) {\n      console.error(\"Failed to delete message:\", error);\n    }\n  }, [messageToDelete, onDelete, setMessages]);\n\n  const handleStartEdit = useCallback((msg: Event) => {\n    setMessageToEdit(msg);\n  }, []);\n\n  const handleSubmitEdit = useCallback(\n    async (data: {\n      text: string;\n      uploadFiles: File[];\n      editedFiles: EventFile[];\n    }) => {\n      if (!messageToEdit) return;\n\n      // Client-side mapping only for the optimistic update\n      const optimisticNewFiles: EventFile[] = data.uploadFiles.map((file) => ({\n        url: URL.createObjectURL(file),\n        fileName: file.name,\n        mimeType: file.type,\n      }));\n      const optimisticAllFiles = [...data.editedFiles, ...optimisticNewFiles];\n      const optimisticContent: EventContent = {\n        type: \"message\",\n        ...(data.text && { text: data.text }),\n        ...(optimisticAllFiles.length > 0 && { files: optimisticAllFiles }),\n      };\n\n      // Optimistic update\n      setMessages((prev) =>\n        prev.map((msg) =>\n          msg.id === messageToEdit.id\n            ? { ...msg, content: optimisticContent, isEdited: true }\n            : msg,\n        ),\n      );\n      setMessageToEdit(null);\n\n      try {\n        const updated = await onUpdate(messageToEdit.id, {\n          text: data.text,\n          uploadFiles: data.uploadFiles,\n          editedFiles: data.editedFiles,\n        });\n        setMessages((prev) =>\n          prev.map((msg) => (msg.id === updated.id ? updated : msg)),\n        );\n      } catch (error) {\n        console.error(\"Failed to update message:\", error);\n        setMessages((prev) =>\n          prev.map((msg) =>\n            msg.id === messageToEdit.id ? messageToEdit : msg,\n          ),\n        );\n      }\n    },\n    [messageToEdit, onUpdate, setMessages],\n  );\n\n  const handleCancelEdit = useCallback(() => {\n    setMessageToEdit(null);\n  }, []);\n\n  return {\n    messageToDelete,\n    openDeleteDialog,\n    setOpenDeleteDialog,\n    messageToEdit,\n    handleOpenDeleteDialog,\n    handleDelete,\n    handleStartEdit,\n    handleSubmitEdit,\n    handleCancelEdit,\n  };\n};\n",
      "type": "registry:hook",
      "target": "hooks/chat/use-message-actions.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-profile.ts",
      "content": "import { useCallback, useState } from \"react\";\n\nexport const useProfile = ({\n  setSidebarOpen,\n  setSidebarView,\n  onBlock,\n  onUnblock,\n}: {\n  setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  setSidebarView: React.Dispatch<React.SetStateAction<\"search\" | \"profile\">>;\n  onBlock: (userId: string) => Promise<void>;\n  onUnblock: (userId: string) => Promise<void>;\n}) => {\n  const [openBlockDialog, setOpenBlockDialog] = useState(false);\n  const [isBlocked, setIsBlocked] = useState(false);\n\n  const openProfile = useCallback(() => {\n    setSidebarView(\"profile\");\n    setSidebarOpen(true);\n  }, [setSidebarView, setSidebarOpen]);\n\n  const handleBlock = useCallback(\n    async (userId: string) => {\n      try {\n        await onBlock(userId);\n        setIsBlocked(true);\n        setOpenBlockDialog(false);\n      } catch (error) {\n        console.error(\"Failed to block user:\", error);\n      }\n    },\n    [onBlock],\n  );\n\n  const handleUnblock = useCallback(\n    async (userId: string) => {\n      try {\n        await onUnblock(userId);\n        setIsBlocked(false);\n      } catch (error) {\n        console.error(\"Failed to unblock user:\", error);\n      }\n    },\n    [onUnblock],\n  );\n\n  return {\n    openBlockDialog,\n    setOpenBlockDialog,\n    isBlocked,\n    openProfile,\n    handleBlock,\n    handleUnblock,\n  };\n};\n",
      "type": "registry:hook",
      "target": "hooks/chat/use-profile.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-chat-sidebar.ts",
      "content": "import { useState } from \"react\";\n\nexport const useChatSidebar = () => {\n  const [sidebarOpen, setSidebarOpen] = useState(false);\n  const [sidebarView, setSidebarView] = useState<\"search\" | \"profile\">(\n    \"search\",\n  );\n\n  return {\n    sidebarOpen,\n    setSidebarOpen,\n    sidebarView,\n    setSidebarView,\n  };\n};\n",
      "type": "registry:hook",
      "target": "hooks/chat/use-chat-sidebar.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-highlighted-message-id.ts",
      "content": "import { useEffect, useState } from \"react\";\n\nexport function useHighlightedMessageId() {\n  const [highlightedMessageId, setHighlightedMessageId] = useState<\n    number | null\n  >(null);\n\n  useEffect(() => {\n    if (highlightedMessageId === null) return;\n    const timer = setTimeout(() => setHighlightedMessageId(null), 3000);\n    return () => clearTimeout(timer);\n  }, [highlightedMessageId]);\n\n  return {\n    highlightedMessageId,\n    setHighlightedMessageId,\n  };\n}\n",
      "type": "registry:hook",
      "target": "hooks/chat/use-highlighted-message-id.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-is-wider.ts",
      "content": "import { useState, useEffect, RefObject } from \"react\";\n\nexport function useIsWider(ref: RefObject<HTMLElement | null>, pixels: number) {\n  const [isWider, setIsWider] = useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const ro = new ResizeObserver(([entry]) => {\n      setIsWider(entry.contentRect.width >= pixels);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [ref, pixels]);\n\n  return isWider;\n}\n",
      "type": "registry:hook",
      "target": "hooks/use-is-wider.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-is-viewport-wider.ts",
      "content": "import { useState, useEffect } from \"react\";\n\nexport function useIsViewportWider(pixels: number) {\n  const [isWider, setIsWider] = useState(false);\n\n  useEffect(() => {\n    const mql = window.matchMedia(`(min-width: ${pixels}px)`);\n    setIsWider(mql.matches);\n    const handler = (e: MediaQueryListEvent) => setIsWider(e.matches);\n    mql.addEventListener(\"change\", handler);\n    return () => mql.removeEventListener(\"change\", handler);\n  }, [pixels]);\n\n  return isWider;\n}\n",
      "type": "registry:hook",
      "target": "hooks/use-is-viewport-wider.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/hooks/use-long-press.ts",
      "content": "import { useCallback, useRef } from \"react\";\n\ninterface UseLongPressOptions {\n  delay?: number;\n}\n\nexport function useLongPress(\n  callback: () => void,\n  { delay = 500 }: UseLongPressOptions = {},\n) {\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const startPosRef = useRef<{ x: number; y: number } | null>(null);\n\n  const cancel = useCallback(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n    startPosRef.current = null;\n  }, []);\n\n  const onPointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      if (e.pointerType !== \"touch\") return;\n      startPosRef.current = { x: e.clientX, y: e.clientY };\n      timerRef.current = setTimeout(() => {\n        timerRef.current = null;\n        callback();\n      }, delay);\n    },\n    [callback, delay],\n  );\n\n  const onPointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (!startPosRef.current) return;\n      const dx = e.clientX - startPosRef.current.x;\n      const dy = e.clientY - startPosRef.current.y;\n      if (Math.sqrt(dx * dx + dy * dy) > 10) cancel();\n    },\n    [cancel],\n  );\n\n  const onContextMenu = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return {\n    onPointerDown,\n    onPointerUp: cancel,\n    onPointerLeave: cancel,\n    onPointerCancel: cancel,\n    onPointerMove,\n    onContextMenu,\n  };\n}\n",
      "type": "registry:hook",
      "target": "hooks/use-long-press.ts"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/chat-header-actions.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  BanIcon,\n  MoreHorizontalIcon,\n  PhoneIcon,\n  SearchIcon,\n  UserIcon,\n  VideoIcon,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChatHeaderButton } from \"@/registry/new-york/chat/chat-header\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { useIsViewportWider } from \"@/registry/new-york/blocks/chat-basic/hooks/use-is-viewport-wider\";\n\ninterface ChatHeaderActionsProps {\n  isChatWide: boolean;\n  openSearch: () => void;\n  openProfile: () => void;\n  isBlocked: boolean;\n  onUnblock: () => void;\n  onBlock: () => void;\n}\n\nexport function ChatHeaderActions({\n  isChatWide,\n  openSearch,\n  openProfile,\n  isBlocked,\n  onUnblock,\n  onBlock,\n}: ChatHeaderActionsProps) {\n  const isTabletOrWider = useIsViewportWider(768);\n  const [dialogOpen, setDialogOpen] = useState(false);\n\n  const trigger = (\n    <ChatHeaderButton aria-label=\"More options\">\n      <MoreHorizontalIcon />\n    </ChatHeaderButton>\n  );\n\n  if (isTabletOrWider) {\n    return (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          {!isChatWide && (\n            <>\n              <DropdownMenuItem onSelect={openSearch}>\n                <SearchIcon />\n                Search\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <PhoneIcon />\n                Start call\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <VideoIcon />\n                Start video\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n            </>\n          )}\n          <DropdownMenuItem onSelect={openProfile}>\n            <UserIcon />\n            Show profile\n          </DropdownMenuItem>\n          {isBlocked ? (\n            <DropdownMenuItem onSelect={onUnblock}>\n              <BanIcon />\n              Unblock\n            </DropdownMenuItem>\n          ) : (\n            <DropdownMenuItem variant=\"destructive\" onSelect={onBlock}>\n              <BanIcon />\n              Block\n            </DropdownMenuItem>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    );\n  }\n\n  return (\n    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>\n      <DialogTrigger asChild>{trigger}</DialogTrigger>\n      <DialogContent className=\"max-w-xs p-4 gap-0\">\n        <DialogHeader className=\"mb-2\">\n          <DialogTitle className=\"sr-only\">Options</DialogTitle>\n          <DialogDescription className=\"sr-only\">\n            Chat actions\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex flex-col\">\n          <ActionItem\n            icon={<SearchIcon />}\n            onClick={() => {\n              setDialogOpen(false);\n              openSearch();\n            }}\n          >\n            Search\n          </ActionItem>\n          <ActionItem icon={<PhoneIcon />}>Start call</ActionItem>\n          <ActionItem icon={<VideoIcon />}>Start video</ActionItem>\n          <hr className=\"my-1 border-border\" />\n          <ActionItem\n            icon={<UserIcon />}\n            onClick={() => {\n              setDialogOpen(false);\n              openProfile();\n            }}\n          >\n            Show profile\n          </ActionItem>\n          {isBlocked ? (\n            <ActionItem\n              icon={<BanIcon />}\n              onClick={() => {\n                setDialogOpen(false);\n                onUnblock();\n              }}\n            >\n              Unblock\n            </ActionItem>\n          ) : (\n            <ActionItem\n              icon={<BanIcon />}\n              destructive\n              onClick={() => {\n                setDialogOpen(false);\n                onBlock();\n              }}\n            >\n              Block\n            </ActionItem>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\ninterface ActionItemProps {\n  icon: React.ReactNode;\n  children: React.ReactNode;\n  onClick?: () => void;\n  destructive?: boolean;\n}\n\nfunction ActionItem({ icon, children, onClick, destructive }: ActionItemProps) {\n  return (\n    <button\n      className={cn(\n        \"flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm w-full text-left transition-colors\",\n        \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground outline-none\",\n        destructive &&\n          \"text-destructive hover:text-destructive focus:text-destructive\",\n      )}\n      onClick={onClick}\n    >\n      {icon}\n      {children}\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/chat-header-actions.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-items/primary-message.tsx",
      "content": "import { useState } from \"react\";\nimport { EventContent } from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  ChatEvent,\n  ChatEventAddon,\n  ChatEventAvatar,\n  ChatEventBody,\n  ChatEventContent,\n  ChatEventHoverActions,\n  ChatEventHoverActionsButton,\n  ChatEventTime,\n  ChatEventTitle,\n} from \"@/registry/new-york/chat/chat-event\";\nimport { MessageContent } from \"@/registry/new-york/blocks/chat-basic/components/message-items/message-content\";\nimport { MessageActionsDropdown } from \"@/registry/new-york/blocks/chat-basic/components/message-actions/message-actions-dropdown\";\nimport { MessageActionsDialog } from \"@/registry/new-york/blocks/chat-basic/components/message-actions/message-actions-dialog\";\nimport { ReactionsPopover } from \"@/registry/new-york/blocks/chat-basic/components/message-reactions/reactions-popover\";\nimport { useLongPress } from \"@/registry/new-york/blocks/chat-basic/hooks/use-long-press\";\nimport { MoreHorizontalIcon, SmilePlusIcon } from \"lucide-react\";\n\ninterface PrimaryMessageProps {\n  avatarSrc?: string;\n  avatarAlt?: string;\n  avatarFallback?: string;\n  senderName: string;\n  content: EventContent;\n  timestamp: number;\n  status?: \"sent\" | \"sending\" | \"failed\";\n  reactions?: string[];\n  isEdited?: boolean;\n  onReaction?: (emoji: string) => void;\n  onDelete?: () => void;\n  onEdit?: () => void;\n  className?: string;\n  id?: string;\n  highlighted?: boolean;\n}\n\nexport function PrimaryMessage({\n  avatarSrc,\n  avatarAlt,\n  avatarFallback,\n  senderName,\n  content,\n  timestamp,\n  status,\n  reactions,\n  isEdited,\n  onReaction,\n  onDelete,\n  onEdit,\n  className,\n  id,\n  highlighted,\n}: PrimaryMessageProps) {\n  const [actionsDialogOpen, setActionsDialogOpen] = useState(false);\n  const longPressHandlers = useLongPress(() => setActionsDialogOpen(true));\n\n  return (\n    <>\n      <ChatEvent\n        id={id}\n        className={cn(\n          \"hover:bg-accent\",\n          highlighted && \"animate-message-highlight\",\n          className,\n        )}\n        {...longPressHandlers}\n      >\n        <ChatEventAddon>\n          <ChatEventAvatar\n            src={avatarSrc}\n            alt={avatarAlt}\n            fallback={avatarFallback}\n          />\n        </ChatEventAddon>\n        <ChatEventBody>\n          <ChatEventTitle>\n            <span className=\"font-medium\">{senderName}</span>\n            <ChatEventTime timestamp={timestamp} />\n          </ChatEventTitle>\n          <ChatEventContent\n            className={cn({\n              \"opacity-70\": status === \"sending\",\n            })}\n          >\n            <MessageContent content={content} />\n          </ChatEventContent>\n          {isEdited && (\n            <span className=\"text-muted-foreground text-sm\">(edited)</span>\n          )}\n          {reactions && reactions.length > 0 && (\n            <div className=\"flex gap-1 flex-wrap mt-1\">\n              {reactions.map((emoji, i) => (\n                <button\n                  key={`${emoji}-${i}`}\n                  type=\"button\"\n                  onClick={() => onReaction?.(emoji)}\n                  className=\"text-sm bg-accent border rounded-full px-2 py-0.5 select-none hover:bg-destructive/10 hover:border-destructive/40 transition-colors\"\n                  aria-label={`Toggle ${emoji} reaction`}\n                >\n                  {emoji}\n                </button>\n              ))}\n            </div>\n          )}\n        </ChatEventBody>\n        <ChatEventHoverActions>\n          <ReactionsPopover onReaction={onReaction}>\n            <ChatEventHoverActionsButton aria-label=\"Add reaction\">\n              <SmilePlusIcon />\n            </ChatEventHoverActionsButton>\n          </ReactionsPopover>\n          <MessageActionsDropdown\n            onCopy={\n              content.text\n                ? () => navigator.clipboard.writeText(content.text!)\n                : undefined\n            }\n            onEdit={onEdit}\n            onDelete={onDelete}\n          >\n            <ChatEventHoverActionsButton aria-label=\"More options\">\n              <MoreHorizontalIcon />\n            </ChatEventHoverActionsButton>\n          </MessageActionsDropdown>\n        </ChatEventHoverActions>\n      </ChatEvent>\n      <MessageActionsDialog\n        open={actionsDialogOpen}\n        onOpenChange={setActionsDialogOpen}\n        onReaction={onReaction}\n        onCopy={\n          content.text\n            ? () => navigator.clipboard.writeText(content.text!)\n            : undefined\n        }\n        onEdit={onEdit}\n        onDelete={onDelete}\n      />\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-items/primary-message.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-items/additional-message.tsx",
      "content": "import { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { EventContent } from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport {\n  ChatEvent,\n  ChatEventAddon,\n  ChatEventBody,\n  ChatEventContent,\n  ChatEventHoverActions,\n  ChatEventHoverActionsButton,\n  ChatEventTime,\n} from \"@/registry/new-york/chat/chat-event\";\nimport { MessageContent } from \"@/registry/new-york/blocks/chat-basic/components/message-items/message-content\";\nimport { MessageActionsDropdown } from \"@/registry/new-york/blocks/chat-basic/components/message-actions/message-actions-dropdown\";\nimport { MessageActionsDialog } from \"@/registry/new-york/blocks/chat-basic/components/message-actions/message-actions-dialog\";\nimport { ReactionsPopover } from \"@/registry/new-york/blocks/chat-basic/components/message-reactions/reactions-popover\";\nimport { useLongPress } from \"@/registry/new-york/blocks/chat-basic/hooks/use-long-press\";\nimport { MoreHorizontalIcon, SmilePlusIcon } from \"lucide-react\";\n\ninterface AdditionalMessageProps {\n  className?: string;\n  content: EventContent;\n  timestamp: number;\n  status?: \"sent\" | \"sending\" | \"failed\";\n  reactions?: string[];\n  isEdited?: boolean;\n  onReaction?: (emoji: string) => void;\n  onDelete?: () => void;\n  onEdit?: () => void;\n  id?: string;\n  highlighted?: boolean;\n}\n\nexport function AdditionalMessage({\n  className,\n  content,\n  timestamp,\n  status,\n  reactions,\n  isEdited,\n  onReaction,\n  onDelete,\n  onEdit,\n  id,\n  highlighted,\n}: AdditionalMessageProps) {\n  const [actionsDialogOpen, setActionsDialogOpen] = useState(false);\n  const longPressHandlers = useLongPress(() => setActionsDialogOpen(true));\n\n  return (\n    <>\n      <ChatEvent\n        id={id}\n        className={cn(\n          \"hover:bg-accent\",\n          highlighted && \"animate-message-highlight\",\n          className,\n        )}\n        {...longPressHandlers}\n      >\n        <ChatEventAddon>\n          <ChatEventTime\n            timestamp={timestamp}\n            format=\"time\"\n            className=\"text-right text-[8px] @md/chat:text-[10px] group-hover/event:visible invisible\"\n          />\n        </ChatEventAddon>\n        <ChatEventBody>\n          <ChatEventContent\n            className={cn({\n              \"opacity-70\": status === \"sending\",\n            })}\n          >\n            <MessageContent content={content} />\n          </ChatEventContent>\n          {isEdited && (\n            <span className=\"text-muted-foreground text-sm\">(edited)</span>\n          )}\n          {reactions && reactions.length > 0 && (\n            <div className=\"flex gap-1 flex-wrap mt-1\">\n              {reactions.map((emoji, i) => (\n                <button\n                  key={`${emoji}-${i}`}\n                  type=\"button\"\n                  onClick={() => onReaction?.(emoji)}\n                  className=\"text-sm bg-accent border rounded-full px-2 py-0.5 select-none hover:bg-destructive/10 hover:border-destructive/40 transition-colors\"\n                  aria-label={`Toggle ${emoji} reaction`}\n                >\n                  {emoji}\n                </button>\n              ))}\n            </div>\n          )}\n        </ChatEventBody>\n        <ChatEventHoverActions>\n          <ReactionsPopover onReaction={onReaction}>\n            <ChatEventHoverActionsButton aria-label=\"Add reaction\">\n              <SmilePlusIcon />\n            </ChatEventHoverActionsButton>\n          </ReactionsPopover>\n          <MessageActionsDropdown\n            onCopy={\n              content.text\n                ? () => navigator.clipboard.writeText(content.text!)\n                : undefined\n            }\n            onEdit={onEdit}\n            onDelete={onDelete}\n          >\n            <ChatEventHoverActionsButton aria-label=\"More options\">\n              <MoreHorizontalIcon />\n            </ChatEventHoverActionsButton>\n          </MessageActionsDropdown>\n        </ChatEventHoverActions>\n      </ChatEvent>\n      <MessageActionsDialog\n        open={actionsDialogOpen}\n        onOpenChange={setActionsDialogOpen}\n        onReaction={onReaction}\n        onCopy={\n          content.text\n            ? () => navigator.clipboard.writeText(content.text!)\n            : undefined\n        }\n        onEdit={onEdit}\n        onDelete={onDelete}\n      />\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-items/additional-message.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-items/date-item.tsx",
      "content": "import { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\nimport { ChatEvent, ChatEventTime } from \"@/registry/new-york/chat/chat-event\";\n\nexport function DateItem({\n  timestamp,\n  className,\n}: {\n  timestamp: number;\n  className?: string;\n}) {\n  return (\n    <ChatEvent className={cn(\"items-center gap-1\", className)}>\n      <Separator className=\"flex-1\" />\n      <ChatEventTime\n        timestamp={timestamp}\n        format=\"longDate\"\n        className=\"font-semibold min-w-max\"\n      />\n      <Separator className=\"flex-1\" />\n    </ChatEvent>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-items/date-item.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-items/message-content.tsx",
      "content": "import {\n  EventContent,\n  EventFile,\n} from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport { FileTextIcon } from \"lucide-react\";\n\nexport function MessageContent({ content }: { content: EventContent }) {\n  const hasText = !!content.text;\n  const hasFiles = !!(content.files && content.files.length > 0);\n\n  return (\n    <>\n      {hasText && <span className=\"select-none\">{content.text}</span>}\n      {hasFiles && (\n        <div className=\"flex flex-col gap-2 mt-1\">\n          {content.files!.map((file, i) => (\n            <FileCard key={i} file={file} />\n          ))}\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction FileCard({ file }: { file: EventFile }) {\n  return (\n    <div className=\"h-16 max-w-80 rounded-md border bg-muted flex items-center gap-2 px-4 py-3\">\n      <FileTextIcon className=\"shrink-0 size-6 @md/chat:size-7 text-muted-foreground stroke-[1.5px]\" />\n      <div className=\"min-w-0\">\n        <a\n          href={file.url}\n          download={file.fileName}\n          className=\"block text-sm text-sky-500 dark:text-sky-600 leading-tight max-w-40 truncate hover:underline\"\n        >\n          {file.fileName}\n        </a>\n        {file.mimeType && (\n          <div className=\"text-xs text-muted-foreground/70 leading-tight truncate\">\n            {file.mimeType}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-items/message-content.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-items/primary-message-skeleton.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  ChatEvent,\n  ChatEventAddon,\n  ChatEventBody,\n  ChatEventContent,\n  ChatEventTitle,\n} from \"@/registry/new-york/chat/chat-event\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\n\nexport function PrimaryMessageSkeleton({ className }: { className?: string }) {\n  return (\n    <ChatEvent className={cn(className)}>\n      <ChatEventAddon>\n        <Skeleton className=\"size-8 @md/chat:size-10 rounded-full\" />\n      </ChatEventAddon>\n      <ChatEventBody>\n        <ChatEventTitle className=\"mb-1\">\n          <Skeleton className=\"h-4 w-24\" />\n        </ChatEventTitle>\n        <ChatEventContent>\n          <div className=\"flex flex-col gap-1.5 mt-1\">\n            <Skeleton className=\"h-4 w-full\" />\n            <Skeleton className=\"h-4 w-4/5\" />\n          </div>\n        </ChatEventContent>\n      </ChatEventBody>\n    </ChatEvent>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-items/primary-message-skeleton.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-items/date-item-skeleton.tsx",
      "content": "import { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\nimport { ChatEvent } from \"@/registry/new-york/chat/chat-event\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\n\nexport function DateItemSkeleton({ className }: { className?: string }) {\n  return (\n    <ChatEvent className={cn(\"items-center gap-1\", className)}>\n      <Separator className=\"flex-1\" />\n      <Skeleton className=\"h-4 w-28\" />\n      <Separator className=\"flex-1\" />\n    </ChatEvent>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-items/date-item-skeleton.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-items/message-preview.tsx",
      "content": "import {\n  ChatEvent,\n  ChatEventAddon,\n  ChatEventAvatar,\n  ChatEventBody,\n  ChatEventContent,\n  ChatEventTime,\n  ChatEventTitle,\n} from \"@/registry/new-york/chat/chat-event\";\nimport { EventContent } from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport { MessageContent } from \"@/registry/new-york/blocks/chat-basic/components/message-items/message-content\";\n\nexport function MessagePreview({\n  avatarSrc,\n  avatarAlt,\n  avatarFallback,\n  senderName,\n  content,\n  timestamp,\n  onClick,\n  className,\n}: {\n  avatarSrc?: string;\n  avatarAlt?: string;\n  avatarFallback?: string;\n  senderName: string;\n  content: EventContent;\n  timestamp: number;\n  onClick?: () => void;\n  className?: string;\n}) {\n  return (\n    <ChatEvent className={className} onClick={onClick}>\n      <ChatEventAddon>\n        <ChatEventAvatar\n          src={avatarSrc}\n          alt={avatarAlt}\n          fallback={avatarFallback}\n        />\n      </ChatEventAddon>\n      <ChatEventBody>\n        <ChatEventTitle>\n          <span className=\"font-medium truncate\">{senderName}</span>\n          <ChatEventTime timestamp={timestamp} />\n        </ChatEventTitle>\n        <ChatEventContent>\n          <MessageContent content={content} />\n        </ChatEventContent>\n      </ChatEventBody>\n    </ChatEvent>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-items/message-preview.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-reactions/reactions-popover.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { PlusIcon } from \"lucide-react\";\nimport EmojiPicker, { EmojiClickData, Theme } from \"emoji-picker-react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { Button } from \"@/components/ui/button\";\n\nexport const DEFAULT_REACTIONS = [\"👍\", \"❤️\", \"😂\", \"😮\", \"😢\", \"🙏\", \"🎉\"];\n\nexport function ReactionsPopover({\n  children,\n  onReaction,\n}: {\n  children: React.ReactNode;\n  onReaction?: (emoji: string) => void;\n}) {\n  const [open, setOpen] = useState(false);\n  const [fullPickerOpen, setFullPickerOpen] = useState(false);\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(o) => {\n        setOpen(o);\n        if (!o) setFullPickerOpen(false);\n      }}\n    >\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\">\n        <div className=\"flex gap-0.5 p-1.5\">\n          {DEFAULT_REACTIONS.map((emoji) => (\n            <Button\n              key={emoji}\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"size-8 text-base\"\n              onClick={() => {\n                onReaction?.(emoji);\n                setOpen(false);\n              }}\n            >\n              {emoji}\n            </Button>\n          ))}\n          <Popover open={fullPickerOpen} onOpenChange={setFullPickerOpen}>\n            <PopoverTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"size-8\"\n                aria-label=\"More emoji reactions\"\n              >\n                <PlusIcon aria-hidden=\"true\" />\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent\n              className=\"w-auto p-0\"\n              align=\"end\"\n              side=\"top\"\n              sideOffset={10}\n              alignOffset={-8}\n            >\n              <EmojiPicker\n                theme={Theme.AUTO}\n                onEmojiClick={(emojiData: EmojiClickData) => {\n                  onReaction?.(emojiData.emoji);\n                  setFullPickerOpen(false);\n                  setOpen(false);\n                }}\n              />\n            </PopoverContent>\n          </Popover>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-reactions/reactions-popover.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-actions/message-actions-dropdown.tsx",
      "content": "import {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { CopyIcon, PencilIcon, Trash2Icon } from \"lucide-react\";\n\ninterface MessageActionsDropdownProps {\n  children: React.ReactNode;\n  onCopy?: () => void;\n  onDelete?: () => void;\n  onEdit?: () => void;\n}\n\nexport function MessageActionsDropdown({\n  children,\n  onCopy,\n  onDelete,\n  onEdit,\n}: MessageActionsDropdownProps) {\n  const hasAdditionalActions = !!onCopy || !!onEdit || !!onDelete;\n\n  if (!hasAdditionalActions) return null;\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>\n      <DropdownMenuContent\n        align=\"end\"\n        onCloseAutoFocus={(e) => e.preventDefault()}\n      >\n        {onCopy && (\n          <DropdownMenuItem onSelect={onCopy}>\n            <CopyIcon />\n            Copy\n          </DropdownMenuItem>\n        )}\n        {onEdit && (\n          <DropdownMenuItem onSelect={onEdit}>\n            <PencilIcon />\n            Edit\n          </DropdownMenuItem>\n        )}\n        {onDelete && (\n          <DropdownMenuItem variant=\"destructive\" onSelect={onDelete}>\n            <Trash2Icon />\n            Delete\n          </DropdownMenuItem>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-actions/message-actions-dropdown.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-actions/message-actions-dialog.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { CopyIcon, PencilIcon, Trash2Icon } from \"lucide-react\";\nimport { DEFAULT_REACTIONS } from \"@/registry/new-york/blocks/chat-basic/components/message-reactions/reactions-popover\";\n\ninterface MessageActionsDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onReaction?: (emoji: string) => void;\n  onCopy?: () => void;\n  onEdit?: () => void;\n  onDelete?: () => void;\n}\n\nexport function MessageActionsDialog({\n  open,\n  onOpenChange,\n  onReaction,\n  onCopy,\n  onEdit,\n  onDelete,\n}: MessageActionsDialogProps) {\n  const hasActions = !!onCopy || !!onEdit || !!onDelete;\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-w-xs\">\n        <DialogHeader>\n          <DialogTitle className=\"sr-only\">Message actions</DialogTitle>\n          <DialogDescription className=\"sr-only\">\n            React to this message or choose an action\n          </DialogDescription>\n        </DialogHeader>\n        {onReaction && (\n          <div className=\"flex gap-0.5 flex-wrap\">\n            {DEFAULT_REACTIONS.map((emoji) => (\n              <Button\n                key={emoji}\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"size-10 text-xl\"\n                onClick={() => {\n                  onReaction(emoji);\n                  onOpenChange(false);\n                }}\n              >\n                {emoji}\n              </Button>\n            ))}\n          </div>\n        )}\n        {hasActions && (\n          <>\n            {onReaction && <div className=\"border-t\" />}\n            <div className=\"flex flex-col\">\n              {onCopy && (\n                <Button\n                  variant=\"ghost\"\n                  className=\"justify-start gap-2\"\n                  onClick={() => {\n                    onCopy();\n                    onOpenChange(false);\n                  }}\n                >\n                  <CopyIcon className=\"size-4\" />\n                  Copy\n                </Button>\n              )}\n              {onEdit && (\n                <Button\n                  variant=\"ghost\"\n                  className=\"justify-start gap-2\"\n                  onClick={() => {\n                    onOpenChange(false);\n                    onEdit();\n                  }}\n                >\n                  <PencilIcon className=\"size-4\" />\n                  Edit\n                </Button>\n              )}\n              {onDelete && (\n                <Button\n                  variant=\"ghost\"\n                  className=\"justify-start gap-2 text-destructive hover:text-destructive\"\n                  onClick={() => {\n                    onOpenChange(false);\n                    onDelete();\n                  }}\n                >\n                  <Trash2Icon className=\"size-4\" />\n                  Delete\n                </Button>\n              )}\n            </div>\n          </>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-actions/message-actions-dialog.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-actions/delete-dialog.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { MessagePreview } from \"@/registry/new-york/blocks/chat-basic/components/message-items/message-preview\";\nimport { Event } from \"@/registry/new-york/blocks/chat-basic/data/messages\";\n\nexport function DeleteDialog({\n  open,\n  onOpenChange,\n  message,\n  onConfirm,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  message: Event | null;\n  onConfirm: () => void;\n}) {\n  return (\n    <Dialog open={open && !!message} onOpenChange={onOpenChange}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Delete message</DialogTitle>\n          <DialogDescription>\n            Are you sure you want to delete this message?\n          </DialogDescription>\n        </DialogHeader>\n        {message && (\n          <MessagePreview\n            className=\"p-1 border rounded-md\"\n            key={message.id}\n            avatarSrc={message.sender.avatarUrl}\n            avatarAlt={message.sender.username}\n            avatarFallback={message.sender.name.slice(0, 2)}\n            senderName={message.sender.name}\n            content={message.content}\n            timestamp={message.timestamp}\n          />\n        )}\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button>Cancel</Button>\n          </DialogClose>\n          <Button variant=\"destructive\" onClick={onConfirm}>\n            Delete\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-actions/delete-dialog.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/message-search/search-sidebar-content.tsx",
      "content": "\"use client\";\n\nimport { MessagePreview } from \"@/registry/new-york/blocks/chat-basic/components/message-items/message-preview\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { Event } from \"@/registry/new-york/blocks/chat-basic/data/messages\";\nimport { SearchIcon } from \"lucide-react\";\n\nexport interface SearchSidebarContentProps {\n  query: string;\n  results: Event[];\n  searchQuery: string;\n  onSearchQueryChange: (value: string) => void;\n  onSearch: (query: string) => void;\n  onResultClick: (id: number) => void;\n  onClose: () => void;\n  isMobile: boolean;\n}\n\nexport function SearchSidebarContent({\n  query,\n  results,\n  searchQuery,\n  onSearchQueryChange,\n  onSearch,\n  onResultClick,\n  onClose,\n  isMobile,\n}: SearchSidebarContentProps) {\n  const label = `${results.length} result${results.length !== 1 ? \"s\" : \"\"} for \"${query}\"`;\n\n  const resultItems = results.map((msg) => (\n    <MessagePreview\n      className=\"p-1 hover:bg-accent cursor-pointer border rounded-md\"\n      key={msg.id}\n      avatarSrc={msg.sender.avatarUrl}\n      avatarAlt={msg.sender.username}\n      avatarFallback={msg.sender.name.slice(0, 2)}\n      senderName={msg.sender.name}\n      content={msg.content}\n      timestamp={msg.timestamp}\n      onClick={() => {\n        onResultClick(msg.id);\n        if (isMobile) onClose();\n      }}\n    />\n  ));\n\n  const emptyState = (\n    <p className=\"text-sm text-muted-foreground text-center py-8\">\n      No messages found.\n    </p>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        <div className=\"border-b p-3 pr-12\">\n          <InputGroup>\n            <InputGroupInput\n              placeholder=\"Search...\"\n              value={searchQuery}\n              onChange={(e) => onSearchQueryChange(e.target.value)}\n              onKeyDown={(e) => {\n                if (e.key === \"Enter\") {\n                  e.preventDefault();\n                  onSearch(searchQuery);\n                }\n              }}\n              autoFocus\n            />\n            <InputGroupAddon>\n              <SearchIcon />\n            </InputGroupAddon>\n          </InputGroup>\n        </div>\n        {query && (\n          <div className=\"border-b px-4 py-2 text-sm text-muted-foreground\">\n            {label}\n          </div>\n        )}\n        <div className=\"overflow-y-auto flex-1 space-y-2 p-2\">\n          {query && (results.length === 0 ? emptyState : resultItems)}\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <>\n      {query && (\n        <div className=\"border-b px-2 py-2 text-sm text-muted-foreground flex items-center justify-between gap-2\">\n          <span className=\"truncate\">{label}</span>\n        </div>\n      )}\n      <div className=\"overflow-y-auto flex-1 space-y-2 p-2\">\n        {query && (results.length === 0 ? emptyState : resultItems)}\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/message-search/search-sidebar-content.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/profile/profile-sidebar-content.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { OTHER_USER } from \"@/registry/new-york/blocks/chat-basic/data/users\";\n\nexport function ProfileSidebarContent() {\n  return (\n    <div className=\"flex flex-col items-center gap-4 p-6\">\n      <Avatar className=\"size-20\">\n        <AvatarImage src={OTHER_USER.avatarUrl} alt={OTHER_USER.username} />\n        <AvatarFallback>{OTHER_USER.name.slice(0, 2)}</AvatarFallback>\n      </Avatar>\n      <div className=\"text-center\">\n        <p className=\"font-medium\">{OTHER_USER.name}</p>\n        <p className=\"text-sm text-muted-foreground\">{OTHER_USER.username}</p>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/profile/profile-sidebar-content.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/profile/block-dialog.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\n\nexport function BlockDialog({\n  open,\n  onOpenChange,\n  onConfirm,\n}: {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onConfirm: () => void;\n}) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Block user</DialogTitle>\n          <DialogDescription>\n            Are you sure you want to block this user? They will no longer be\n            able to send you messages.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button>Cancel</Button>\n          </DialogClose>\n          <Button variant=\"destructive\" onClick={onConfirm}>\n            Block\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/profile/block-dialog.tsx"
    },
    {
      "path": "registry/new-york/blocks/chat-basic/components/chat-sidebar/chat-sidebar.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n} from \"@/components/ui/sheet\";\nimport { SidebarContent, SidebarHeader } from \"@/components/ui/sidebar\";\nimport { XIcon } from \"lucide-react\";\n\ninterface ChatSidebarProps {\n  open: boolean;\n  onClose: () => void;\n  title: string;\n  isMobile: boolean;\n  children: React.ReactNode;\n}\n\nexport function ChatSidebar({\n  open,\n  onClose,\n  title,\n  isMobile,\n  children,\n}: ChatSidebarProps) {\n  if (isMobile) {\n    return (\n      <Sheet\n        open={open}\n        onOpenChange={(o) => {\n          if (!o) onClose();\n        }}\n      >\n        <SheetContent side=\"right\" className=\"w-full flex flex-col gap-0 p-0\">\n          <SheetHeader className=\"border-b px-4 py-3 flex-row items-center space-y-0\">\n            <SheetTitle className=\"text-sm font-medium\">{title}</SheetTitle>\n          </SheetHeader>\n          {children}\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"sidebar\"\n      className={cn(\n        \"flex flex-col bg-sidebar text-sidebar-foreground overflow-hidden\",\n        open ? \"@3xl/chat:w-96 @2xl/chat:w-80 w-0 border-l\" : \"w-0\",\n      )}\n    >\n      <SidebarHeader className=\"border-b flex-row items-center justify-between\">\n        <span className=\"text-sm font-medium truncate\">{title}</span>\n        <Button\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label=\"Close\"\n          onClick={onClose}\n        >\n          <XIcon />\n        </Button>\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">{children}</SidebarContent>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chat/chat-sidebar/chat-sidebar.tsx"
    }
  ],
  "css": {
    "@keyframes message-highlight": {
      "0%, 60%": {
        "background-color": "var(--accent)"
      },
      "100%": {
        "background-color": "transparent"
      }
    },
    "@utility animate-message-highlight": {
      "animation": "message-highlight 3s ease-out forwards"
    },
    "@utility scrollbar-hidden": {
      "-ms-overflow-style": "none",
      "scrollbar-width": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    }
  },
  "type": "registry:block"
}