{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-block",
  "type": "registry:component",
  "title": "Command Block",
  "description": "Command block component for displaying commands",
  "registryDependencies": [
    "tooltip"
  ],
  "files": [
    {
      "path": "components/chatcn/ai/command-block.tsx",
      "content": "\"use client\";\nimport React, { createContext, useContext, useState, useEffect } from \"react\";\nimport {\n  Copy01Icon,\n  ComputerTerminal01Icon,\n  Tick01Icon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype CommandBlockContextType = {\n  activeCommand: string;\n  setActiveCommand: (cmd: string) => void;\n  copied: boolean;\n  setCopied: (copied: boolean) => void;\n};\n\nconst CommandBlockContext = createContext<CommandBlockContextType | null>(null);\n\nexport function useCommandBlockContext() {\n  const context = useContext(CommandBlockContext);\n  if (!context) {\n    throw new Error(\n      \"useCommandBlockContext must be used within a CommandBlockContext.Provider\"\n    );\n  }\n  return context;\n}\n\ntype CommandBlockProps = {\n  className?: string;\n  children: React.ReactNode;\n};\n\nexport function CommandBlock({ className, children }: CommandBlockProps) {\n  const [activeCommand, setActiveCommand] = useState(\"\");\n  const [copied, setCopied] = useState(false);\n\n  return (\n    <CommandBlockContext.Provider\n      value={{ activeCommand, setActiveCommand, copied, setCopied }}\n    >\n      <div className={cn(\"w-full mx-auto\", className)}>\n        <div className=\"bg-card rounded-md border\">{children}</div>\n      </div>\n    </CommandBlockContext.Provider>\n  );\n}\n\ntype CommandBlockHeaderProps = {\n  children?: React.ReactNode;\n};\n\nexport function CommandBlockHeader({ children }: CommandBlockHeaderProps) {\n  const { activeCommand, copied, setCopied } = useCommandBlockContext();\n\n  const copyToClipboard = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n    }\n  };\n\n  return (\n    <>\n      <div className=\"flex items-center justify-between px-3 sm:px-4 py-1.5 sm:py-2\">\n        <div className=\"flex items-center space-x-2\">{children}</div>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"h-7 w-7 sm:h-8 sm:w-8 p-0\"\n              onClick={() => copyToClipboard(activeCommand)}\n            >\n              {copied ? (\n                <HugeiconsIcon\n                  icon={Tick01Icon}\n                  className=\"size-3.5 sm:size-4.5\"\n                />\n              ) : (\n                <HugeiconsIcon icon={Copy01Icon} className=\"size-4 sm:size-5\" />\n              )}\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p className=\"text-xs sm:text-sm\">\n              {copied ? \"Copied!\" : \"Copy to Clipboard\"}\n            </p>\n          </TooltipContent>\n        </Tooltip>\n      </div>\n      <Separator />\n    </>\n  );\n}\n\ninterface CommandBlockTitleProps {\n  children: string;\n  showTerminalIcon?: boolean;\n}\n\nexport function CommandBlockTitle({\n  children,\n  showTerminalIcon = true,\n}: CommandBlockTitleProps) {\n  if (!children && !showTerminalIcon) return null;\n\n  return (\n    <div className=\"flex items-center space-x-2\">\n      {showTerminalIcon && (\n        <HugeiconsIcon\n          icon={ComputerTerminal01Icon}\n          className=\"text-muted-foreground size-4 sm:size-5\"\n        />\n      )}\n      {children && (\n        <span className=\"font-medium text-sm sm:text-base\">{children}</span>\n      )}\n    </div>\n  );\n}\n\ntype CommandBlockContentProps = {\n  className?: string;\n  command: string;\n};\n\nexport function CommandBlockContent({\n  className,\n  command,\n}: CommandBlockContentProps) {\n  const { setActiveCommand } = useCommandBlockContext();\n\n  useEffect(() => {\n    setActiveCommand(command);\n  }, [command, setActiveCommand]);\n\n  return (\n    <div\n      className={cn(\n        \"px-3 sm:px-4 py-3 sm:py-4 font-mono bg-card overflow-x-auto text-primary\",\n        className\n      )}\n    >\n      <p className=\"wrap-break-word whitespace-pre-wrap text-xs sm:text-sm md:text-base\">\n        {command}\n      </p>\n    </div>\n  );\n}\n\ntype CommandBlockTabHeaderProps = {\n  children: React.ReactNode;\n  showTerminalIcon?: boolean;\n};\n\nexport function CommandBlockTabHeader({\n  children,\n  showTerminalIcon = true,\n}: CommandBlockTabHeaderProps) {\n  const { activeCommand, copied, setCopied } = useCommandBlockContext();\n\n  const copyToClipboard = async (text: string) => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      console.error(\"Failed to copy text: \", err);\n    }\n  };\n\n  return (\n    <>\n      <TabsList className=\"flex w-full bg-card justify-between items-center px-1.5 sm:px-2 py-1 my-1 rounded-t-md\">\n        <div className=\"flex items-center\">\n          {showTerminalIcon && (\n            <HugeiconsIcon\n              icon={ComputerTerminal01Icon}\n              className=\"mx-1 sm:mx-2 text-muted-foreground size-4 sm:size-5\"\n            />\n          )}\n          <div className=\"flex\">{children}</div>\n        </div>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"h-7 w-7 sm:h-8 sm:w-8 p-0\"\n              onClick={() => copyToClipboard(activeCommand)}\n            >\n              {copied ? (\n                <HugeiconsIcon\n                  icon={Tick01Icon}\n                  className=\"size-3.5 sm:size-4.5\"\n                />\n              ) : (\n                <HugeiconsIcon icon={Copy01Icon} className=\"size-4 sm:size-5\" />\n              )}\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>\n            <p className=\"text-xs sm:text-sm\">\n              {copied ? \"Copied!\" : \"Copy to Clipboard\"}\n            </p>\n          </TooltipContent>\n        </Tooltip>\n      </TabsList>\n      <Separator />\n    </>\n  );\n}\n\ntype CommandBlockTabTriggerProps = {\n  value: string;\n  label: string;\n};\n\nexport function CommandBlockTabTrigger({\n  value,\n  label,\n}: CommandBlockTabTriggerProps) {\n  return (\n    <TabsTrigger\n      value={value}\n      className=\"text-xs sm:text-sm h-7 sm:h-8 px-2 sm:px-3 data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-none\"\n    >\n      {label}\n    </TabsTrigger>\n  );\n}\n\ntype CommandBlocksTabsProps = {\n  children: React.ReactNode;\n  defaultValue?: string;\n};\n\nexport function CommandBlocksTabs({\n  children,\n  defaultValue,\n}: CommandBlocksTabsProps) {\n  const [activeTab, setActiveTab] = useState(defaultValue || \"\");\n\n  return (\n    <Tabs\n      value={activeTab}\n      onValueChange={setActiveTab}\n      className=\"w-full bg-card rounded-md border gap-0\"\n    >\n      {children}\n    </Tabs>\n  );\n}\n\ntype CommandBlockTabContentProps = {\n  value: string;\n  command: string;\n};\n\nexport function CommandBlockTabContent({\n  value,\n  command,\n}: CommandBlockTabContentProps) {\n  const { setActiveCommand } = useCommandBlockContext();\n\n  useEffect(() => {\n    setActiveCommand(command);\n  }, [command, setActiveCommand]);\n\n  return (\n    <TabsContent\n      value={value}\n      className=\"mt-0 p-3 sm:p-4 font-mono bg-card rounded-b-md overflow-x-auto\"\n    >\n      <p className=\"wrap-break-word whitespace-pre-wrap text-xs sm:text-sm md:text-base text-primary\">\n        {command}\n      </p>\n    </TabsContent>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}