{
  "name": "tool-calling",
  "type": "registry:item",
  "title": "Tool calling",
  "description": "A chatbot with tool calling feature. It uses prompt-kit, shadcn/ui, and AI SDK V5.",
  "dependencies": [
    "ai",
    "@ai-sdk/openai",
    "zod",
    "@ai-sdk/react",
    "use-stick-to-bottom",
    "react-markdown",
    "remark-gfm",
    "shiki",
    "marked",
    "remark-breaks"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "avatar",
    "tooltip",
    "textarea",
    "collapsible",
    "button"
  ],
  "files": [
    {
      "path": "components/primitives/tool-calling.tsx",
      "content": "\"use client\"\n\nimport {\n  ChatContainerContent,\n  ChatContainerRoot,\n} from \"@/components/prompt-kit/chat-container\"\nimport { DotsLoader } from \"@/components/prompt-kit/loader\"\nimport {\n  Message,\n  MessageAction,\n  MessageActions,\n  MessageContent,\n} from \"@/components/prompt-kit/message\"\nimport {\n  PromptInput,\n  PromptInputActions,\n  PromptInputTextarea,\n} from \"@/components/prompt-kit/prompt-input\"\nimport { Tool } from \"@/components/prompt-kit/tool\"\nimport type { ToolPart } from \"@/components/prompt-kit/tool\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport { useChat } from \"@ai-sdk/react\"\nimport { DefaultChatTransport } from \"ai\"\nimport type { UIMessage, UIMessagePart } from \"ai\"\nimport {\n  AlertTriangle,\n  ArrowUp,\n  Copy,\n  ThumbsDown,\n  ThumbsUp,\n} from \"lucide-react\"\nimport { memo, useState } from \"react\"\n\ntype MessageComponentProps = {\n  message: UIMessage\n  isLastMessage: boolean\n}\n\nconst renderToolPart = (\n  part: UIMessagePart<any, any>,\n  index: number\n): React.ReactNode => {\n  if (!part.type?.startsWith(\"tool-\")) return null\n\n  return <Tool key={`${part.type}-${index}`} toolPart={part as ToolPart} />\n}\n\nexport const MessageComponent = memo(\n  ({ message, isLastMessage }: MessageComponentProps) => {\n    const isAssistant = message?.role === \"assistant\"\n\n    return (\n      <Message\n        className={cn(\n          \"mx-auto flex w-full max-w-3xl flex-col gap-2 px-2 md:px-10\",\n          isAssistant ? \"items-start\" : \"items-end\"\n        )}\n      >\n        {isAssistant ? (\n          <div className=\"group flex w-full flex-col gap-0 space-y-2\">\n            <div className=\"w-full\">\n              {message?.parts\n                .filter(\n                  (part: any) => part.type && part.type.startsWith(\"tool-\")\n                )\n                .map((part: any, index: number) => renderToolPart(part, index))}\n            </div>\n            <MessageContent\n              className=\"text-foreground prose w-full min-w-0 flex-1 rounded-lg bg-transparent p-0\"\n              markdown\n            >\n              {message?.parts\n                .filter((part: any) => part.type === \"text\")\n                .map((part: any) => part.text)\n                .join(\"\")}\n            </MessageContent>\n\n            <MessageActions\n              className={cn(\n                \"-ml-2.5 flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100\",\n                isLastMessage && \"opacity-100\"\n              )}\n            >\n              <MessageAction tooltip=\"Copy\" delayDuration={100}>\n                <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                  <Copy />\n                </Button>\n              </MessageAction>\n              <MessageAction tooltip=\"Upvote\" delayDuration={100}>\n                <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                  <ThumbsUp />\n                </Button>\n              </MessageAction>\n              <MessageAction tooltip=\"Downvote\" delayDuration={100}>\n                <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                  <ThumbsDown />\n                </Button>\n              </MessageAction>\n            </MessageActions>\n          </div>\n        ) : (\n          <div className=\"group flex w-full flex-col items-end gap-1\">\n            <MessageContent className=\"bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5 whitespace-pre-wrap sm:max-w-[75%]\">\n              {message?.parts\n                .map((part: any) => (part.type === \"text\" ? part.text : null))\n                .join(\"\")}\n            </MessageContent>\n            <MessageActions\n              className={cn(\n                \"flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100\"\n              )}\n            >\n              <MessageAction tooltip=\"Copy\" delayDuration={100}>\n                <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                  <Copy />\n                </Button>\n              </MessageAction>\n            </MessageActions>\n          </div>\n        )}\n      </Message>\n    )\n  }\n)\n\nMessageComponent.displayName = \"MessageComponent\"\n\nconst LoadingMessage = memo(() => (\n  <Message className=\"mx-auto flex w-full max-w-3xl flex-col items-start gap-2 px-2 md:px-10\">\n    <div className=\"group flex w-full flex-col gap-0\">\n      <div className=\"text-foreground prose w-full min-w-0 flex-1 rounded-lg bg-transparent p-0\">\n        <DotsLoader />\n      </div>\n    </div>\n  </Message>\n))\n\nLoadingMessage.displayName = \"LoadingMessage\"\n\nconst ErrorMessage = memo(({ error }: { error: Error }) => (\n  <Message className=\"not-prose mx-auto flex w-full max-w-3xl flex-col items-start gap-2 px-0 md:px-10\">\n    <div className=\"group flex w-full flex-col items-start gap-0\">\n      <div className=\"text-primary flex min-w-0 flex-1 flex-row items-center gap-2 rounded-lg border-2 border-red-300 bg-red-300/20 px-2 py-1\">\n        <AlertTriangle size={16} className=\"text-red-500\" />\n        <p className=\"text-red-500\">{error.message}</p>\n      </div>\n    </div>\n  </Message>\n))\n\nErrorMessage.displayName = \"ErrorMessage\"\n\nfunction ToolCallingChatbot() {\n  const [input, setInput] = useState(\"\")\n\n  const { messages, sendMessage, status, error } = useChat({\n    transport: new DefaultChatTransport({\n      api: \"/api/primitives/tool-calling\",\n    }),\n  })\n\n  const handleSubmit = () => {\n    if (!input.trim()) return\n\n    sendMessage({ text: input })\n    setInput(\"\")\n  }\n\n  return (\n    <div className=\"flex h-screen flex-col overflow-hidden\">\n      <ChatContainerRoot className=\"relative flex-1 space-y-0 overflow-y-auto\">\n        <ChatContainerContent className=\"space-y-12 px-4 py-12\">\n          {messages.length === 0 && (\n            <div className=\"mx-auto w-full max-w-3xl shrink-0 px-3 pb-3 md:px-5 md:pb-5\">\n              <div className=\"text-foreground mb-2 font-medium\">\n                Try asking:\n              </div>\n              <ul className=\"list-inside list-disc space-y-1\">\n                <li>what's the current date?</li>\n                <li>what time is it in Tokyo?</li>\n                <li>give me the current time in Europe/Paris</li>\n              </ul>\n            </div>\n          )}\n\n          {messages?.map((message, index) => {\n            const isLastMessage = index === messages.length - 1\n\n            return (\n              <MessageComponent\n                key={message.id}\n                message={message}\n                isLastMessage={isLastMessage}\n              />\n            )\n          })}\n\n          {status === \"submitted\" && <LoadingMessage />}\n          {status === \"error\" && error && <ErrorMessage error={error} />}\n        </ChatContainerContent>\n      </ChatContainerRoot>\n\n      <div className=\"inset-x-0 bottom-0 mx-auto w-full max-w-3xl shrink-0 px-3 pb-3 md:px-5 md:pb-5\">\n        <PromptInput\n          isLoading={status !== \"ready\"}\n          value={input}\n          onValueChange={setInput}\n          onSubmit={handleSubmit}\n          className=\"border-input bg-popover relative z-10 w-full rounded-3xl border p-0 pt-1 shadow-xs\"\n        >\n          <div className=\"flex flex-col\">\n            <PromptInputTextarea\n              placeholder=\"Ask anything\"\n              className=\"min-h-[44px] pt-3 pl-4 text-base leading-[1.3] sm:text-base md:text-base\"\n            />\n\n            <PromptInputActions className=\"mt-3 flex w-full items-center justify-between gap-2 p-2\">\n              <div />\n              <div className=\"flex items-center gap-2\">\n                <Button\n                  size=\"icon\"\n                  disabled={\n                    !input.trim() || (status !== \"ready\" && status !== \"error\")\n                  }\n                  onClick={handleSubmit}\n                  className=\"size-9 rounded-full\"\n                >\n                  {status === \"ready\" || status === \"error\" ? (\n                    <ArrowUp size={18} />\n                  ) : (\n                    <span className=\"size-3 rounded-xs bg-white\" />\n                  )}\n                </Button>\n              </div>\n            </PromptInputActions>\n          </div>\n        </PromptInput>\n      </div>\n    </div>\n  )\n}\n\nexport default ToolCallingChatbot\n",
      "type": "registry:component"
    },
    {
      "path": "app/api/primitives/tool-calling/route.ts",
      "content": "import { openai } from \"@ai-sdk/openai\"\nimport {\n  convertToModelMessages,\n  stepCountIs,\n  streamText,\n  tool,\n  UIMessage,\n} from \"ai\"\nimport { z } from \"zod\"\n\nexport const maxDuration = 30\n\nexport async function POST(req: Request) {\n  const { messages }: { messages: UIMessage[] } = await req.json()\n\n  const result = streamText({\n    model: openai(\"gpt-4.1-nano\"),\n    system:\n      \"You are a helpful assistant with access to tools. Use the getCurrentDate tool when users ask about dates, time, or current information. You are also able to use the getTime tool to get the current time in a specific timezone.\",\n    messages: convertToModelMessages(messages),\n    stopWhen: stepCountIs(5),\n    tools: {\n      getTime: tool({\n        description: \"Get the current time in a specific timezone\",\n        inputSchema: z.object({\n          timezone: z\n            .string()\n            .describe(\"A valid IANA timezone, e.g. 'Europe/Paris'\"),\n        }),\n        execute: async ({ timezone }) => {\n          try {\n            const now = new Date()\n            const time = now.toLocaleString(\"en-US\", {\n              timeZone: timezone,\n              hour: \"2-digit\",\n              minute: \"2-digit\",\n              second: \"2-digit\",\n              hour12: false,\n            })\n\n            return { time, timezone }\n          } catch {\n            return { error: \"Invalid timezone format.\" }\n          }\n        },\n      }),\n      getCurrentDate: tool({\n        description: \"Get the current date and time with timezone information\",\n        inputSchema: z.object({}),\n        execute: async () => {\n          const now = new Date()\n          return {\n            timestamp: now.getTime(),\n            iso: now.toISOString(),\n            local: now.toLocaleString(\"en-US\", {\n              weekday: \"long\",\n              year: \"numeric\",\n              month: \"long\",\n              day: \"numeric\",\n              hour: \"2-digit\",\n              minute: \"2-digit\",\n              second: \"2-digit\",\n              timeZoneName: \"short\",\n            }),\n            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,\n            utc: now.toUTCString(),\n          }\n        },\n      }),\n    },\n  })\n\n  return result.toUIMessageStreamResponse()\n}\n",
      "type": "registry:file",
      "target": "app/api/primitives/tool-calling/route.ts"
    },
    {
      "path": "components/prompt-kit/chat-container.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { StickToBottom } from \"use-stick-to-bottom\"\n\nexport type ChatContainerRootProps = {\n  children: React.ReactNode\n  className?: string\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport type ChatContainerContentProps = {\n  children: React.ReactNode\n  className?: string\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport type ChatContainerScrollAnchorProps = {\n  className?: string\n  ref?: React.RefObject<HTMLDivElement>\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction ChatContainerRoot({\n  children,\n  className,\n  ...props\n}: ChatContainerRootProps) {\n  return (\n    <StickToBottom\n      className={cn(\"flex overflow-y-auto\", className)}\n      resize=\"smooth\"\n      initial=\"instant\"\n      role=\"log\"\n      {...props}\n    >\n      {children}\n    </StickToBottom>\n  )\n}\n\nfunction ChatContainerContent({\n  children,\n  className,\n  ...props\n}: ChatContainerContentProps) {\n  return (\n    <StickToBottom.Content\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    >\n      {children}\n    </StickToBottom.Content>\n  )\n}\n\nfunction ChatContainerScrollAnchor({\n  className,\n  ...props\n}: ChatContainerScrollAnchorProps) {\n  return (\n    <div\n      className={cn(\"h-px w-full shrink-0 scroll-mt-4\", className)}\n      aria-hidden=\"true\"\n      {...props}\n    />\n  )\n}\n\nexport { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor }\n",
      "type": "registry:component"
    },
    {
      "path": "components/prompt-kit/loader.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\n\nexport interface LoaderProps {\n  variant?:\n    | \"circular\"\n    | \"classic\"\n    | \"pulse\"\n    | \"pulse-dot\"\n    | \"dots\"\n    | \"typing\"\n    | \"wave\"\n    | \"bars\"\n    | \"terminal\"\n    | \"text-blink\"\n    | \"text-shimmer\"\n    | \"loading-dots\"\n  size?: \"sm\" | \"md\" | \"lg\"\n  text?: string\n  className?: string\n}\n\nexport function CircularLoader({\n  className,\n  size = \"md\",\n}: {\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const sizeClasses = {\n    sm: \"size-4\",\n    md: \"size-5\",\n    lg: \"size-6\",\n  }\n\n  return (\n    <div\n      className={cn(\n        \"border-primary animate-spin rounded-full border-2 border-t-transparent\",\n        sizeClasses[size],\n        className\n      )}\n    >\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  )\n}\n\nexport function ClassicLoader({\n  className,\n  size = \"md\",\n}: {\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const sizeClasses = {\n    sm: \"size-4\",\n    md: \"size-5\",\n    lg: \"size-6\",\n  }\n\n  const barSizes = {\n    sm: { height: \"6px\", width: \"1.5px\" },\n    md: { height: \"8px\", width: \"2px\" },\n    lg: { height: \"10px\", width: \"2.5px\" },\n  }\n\n  return (\n    <div className={cn(\"relative\", sizeClasses[size], className)}>\n      <div className=\"absolute h-full w-full\">\n        {[...Array(12)].map((_, i) => (\n          <div\n            key={i}\n            className=\"bg-primary absolute animate-[spinner-fade_1.2s_linear_infinite] rounded-full\"\n            style={{\n              top: \"0\",\n              left: \"50%\",\n              marginLeft:\n                size === \"sm\" ? \"-0.75px\" : size === \"lg\" ? \"-1.25px\" : \"-1px\",\n              transformOrigin: `${size === \"sm\" ? \"0.75px\" : size === \"lg\" ? \"1.25px\" : \"1px\"} ${size === \"sm\" ? \"10px\" : size === \"lg\" ? \"14px\" : \"12px\"}`,\n              transform: `rotate(${i * 30}deg)`,\n              opacity: 0,\n              animationDelay: `${i * 0.1}s`,\n              height: barSizes[size].height,\n              width: barSizes[size].width,\n            }}\n          />\n        ))}\n      </div>\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  )\n}\n\nexport function PulseLoader({\n  className,\n  size = \"md\",\n}: {\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const sizeClasses = {\n    sm: \"size-4\",\n    md: \"size-5\",\n    lg: \"size-6\",\n  }\n\n  return (\n    <div className={cn(\"relative\", sizeClasses[size], className)}>\n      <div className=\"border-primary absolute inset-0 animate-[thin-pulse_1.5s_ease-in-out_infinite] rounded-full border-2\" />\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  )\n}\n\nexport function PulseDotLoader({\n  className,\n  size = \"md\",\n}: {\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const sizeClasses = {\n    sm: \"size-1\",\n    md: \"size-2\",\n    lg: \"size-3\",\n  }\n\n  return (\n    <div\n      className={cn(\n        \"bg-primary animate-[pulse-dot_1.2s_ease-in-out_infinite] rounded-full\",\n        sizeClasses[size],\n        className\n      )}\n    >\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  )\n}\n\nexport function DotsLoader({\n  className,\n  size = \"md\",\n}: {\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const dotSizes = {\n    sm: \"h-1.5 w-1.5\",\n    md: \"h-2 w-2\",\n    lg: \"h-2.5 w-2.5\",\n  }\n\n  const containerSizes = {\n    sm: \"h-4\",\n    md: \"h-5\",\n    lg: \"h-6\",\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center space-x-1\",\n        containerSizes[size],\n        className\n      )}\n    >\n      {[...Array(3)].map((_, i) => (\n        <div\n          key={i}\n          className={cn(\n            \"bg-primary animate-[bounce-dots_1.4s_ease-in-out_infinite] rounded-full\",\n            dotSizes[size]\n          )}\n          style={{\n            animationDelay: `${i * 160}ms`,\n          }}\n        />\n      ))}\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  )\n}\n\nexport function TypingLoader({\n  className,\n  size = \"md\",\n}: {\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const dotSizes = {\n    sm: \"h-1 w-1\",\n    md: \"h-1.5 w-1.5\",\n    lg: \"h-2 w-2\",\n  }\n\n  const containerSizes = {\n    sm: \"h-4\",\n    md: \"h-5\",\n    lg: \"h-6\",\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center space-x-1\",\n        containerSizes[size],\n        className\n      )}\n    >\n      {[...Array(3)].map((_, i) => (\n        <div\n          key={i}\n          className={cn(\n            \"bg-primary animate-[typing_1s_infinite] rounded-full\",\n            dotSizes[size]\n          )}\n          style={{\n            animationDelay: `${i * 250}ms`,\n          }}\n        />\n      ))}\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  )\n}\n\nexport function WaveLoader({\n  className,\n  size = \"md\",\n}: {\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const barWidths = {\n    sm: \"w-0.5\",\n    md: \"w-0.5\",\n    lg: \"w-1\",\n  }\n\n  const containerSizes = {\n    sm: \"h-4\",\n    md: \"h-5\",\n    lg: \"h-6\",\n  }\n\n  const heights = {\n    sm: [\"6px\", \"9px\", \"12px\", \"9px\", \"6px\"],\n    md: [\"8px\", \"12px\", \"16px\", \"12px\", \"8px\"],\n    lg: [\"10px\", \"15px\", \"20px\", \"15px\", \"10px\"],\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-0.5\",\n        containerSizes[size],\n        className\n      )}\n    >\n      {[...Array(5)].map((_, i) => (\n        <div\n          key={i}\n          className={cn(\n            \"bg-primary animate-[wave_1s_ease-in-out_infinite] rounded-full\",\n            barWidths[size]\n          )}\n          style={{\n            animationDelay: `${i * 100}ms`,\n            height: heights[size][i],\n          }}\n        />\n      ))}\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  )\n}\n\nexport function BarsLoader({\n  className,\n  size = \"md\",\n}: {\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const barWidths = {\n    sm: \"w-1\",\n    md: \"w-1.5\",\n    lg: \"w-2\",\n  }\n\n  const containerSizes = {\n    sm: \"h-4 gap-1\",\n    md: \"h-5 gap-1.5\",\n    lg: \"h-6 gap-2\",\n  }\n\n  return (\n    <div className={cn(\"flex\", containerSizes[size], className)}>\n      {[...Array(3)].map((_, i) => (\n        <div\n          key={i}\n          className={cn(\n            \"bg-primary h-full animate-[wave-bars_1.2s_ease-in-out_infinite]\",\n            barWidths[size]\n          )}\n          style={{\n            animationDelay: `${i * 0.2}s`,\n          }}\n        />\n      ))}\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  )\n}\n\nexport function TerminalLoader({\n  className,\n  size = \"md\",\n}: {\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const cursorSizes = {\n    sm: \"h-3 w-1.5\",\n    md: \"h-4 w-2\",\n    lg: \"h-5 w-2.5\",\n  }\n\n  const textSizes = {\n    sm: \"text-xs\",\n    md: \"text-sm\",\n    lg: \"text-base\",\n  }\n\n  const containerSizes = {\n    sm: \"h-4\",\n    md: \"h-5\",\n    lg: \"h-6\",\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center space-x-1\",\n        containerSizes[size],\n        className\n      )}\n    >\n      <span className={cn(\"text-primary font-mono\", textSizes[size])}>\n        {\">\"}\n      </span>\n      <div\n        className={cn(\n          \"bg-primary animate-[blink_1s_step-end_infinite]\",\n          cursorSizes[size]\n        )}\n      />\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  )\n}\n\nexport function TextBlinkLoader({\n  text = \"Thinking\",\n  className,\n  size = \"md\",\n}: {\n  text?: string\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const textSizes = {\n    sm: \"text-xs\",\n    md: \"text-sm\",\n    lg: \"text-base\",\n  }\n\n  return (\n    <div\n      className={cn(\n        \"animate-[text-blink_2s_ease-in-out_infinite] font-medium\",\n        textSizes[size],\n        className\n      )}\n    >\n      {text}\n    </div>\n  )\n}\n\nexport function TextShimmerLoader({\n  text = \"Thinking\",\n  className,\n  size = \"md\",\n}: {\n  text?: string\n  className?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const textSizes = {\n    sm: \"text-xs\",\n    md: \"text-sm\",\n    lg: \"text-base\",\n  }\n\n  return (\n    <div\n      className={cn(\n        \"bg-[linear-gradient(to_right,var(--muted-foreground)_40%,var(--foreground)_60%,var(--muted-foreground)_80%)]\",\n        \"bg-size-[200%_auto] bg-clip-text font-medium text-transparent\",\n        \"animate-[shimmer_4s_infinite_linear]\",\n        textSizes[size],\n        className\n      )}\n    >\n      {text}\n    </div>\n  )\n}\n\nexport function TextDotsLoader({\n  className,\n  text = \"Thinking\",\n  size = \"md\",\n}: {\n  className?: string\n  text?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n}) {\n  const textSizes = {\n    sm: \"text-xs\",\n    md: \"text-sm\",\n    lg: \"text-base\",\n  }\n\n  return (\n    <div\n      className={cn(\"inline-flex items-center\", className)}\n    >\n      <span className={cn(\"text-primary font-medium\", textSizes[size])}>\n        {text}\n      </span>\n      <span className=\"inline-flex\">\n        <span className=\"text-primary animate-[loading-dots_1.4s_infinite_0.2s]\">\n          .\n        </span>\n        <span className=\"text-primary animate-[loading-dots_1.4s_infinite_0.4s]\">\n          .\n        </span>\n        <span className=\"text-primary animate-[loading-dots_1.4s_infinite_0.6s]\">\n          .\n        </span>\n      </span>\n    </div>\n  )\n}\n\nfunction Loader({\n  variant = \"circular\",\n  size = \"md\",\n  text,\n  className,\n}: LoaderProps) {\n  switch (variant) {\n    case \"circular\":\n      return <CircularLoader size={size} className={className} />\n    case \"classic\":\n      return <ClassicLoader size={size} className={className} />\n    case \"pulse\":\n      return <PulseLoader size={size} className={className} />\n    case \"pulse-dot\":\n      return <PulseDotLoader size={size} className={className} />\n    case \"dots\":\n      return <DotsLoader size={size} className={className} />\n    case \"typing\":\n      return <TypingLoader size={size} className={className} />\n    case \"wave\":\n      return <WaveLoader size={size} className={className} />\n    case \"bars\":\n      return <BarsLoader size={size} className={className} />\n    case \"terminal\":\n      return <TerminalLoader size={size} className={className} />\n    case \"text-blink\":\n      return <TextBlinkLoader text={text} size={size} className={className} />\n    case \"text-shimmer\":\n      return <TextShimmerLoader text={text} size={size} className={className} />\n    case \"loading-dots\":\n      return <TextDotsLoader text={text} size={size} className={className} />\n    default:\n      return <CircularLoader size={size} className={className} />\n  }\n}\n\nexport { Loader }\n",
      "type": "registry:component"
    },
    {
      "path": "components/prompt-kit/message.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\nimport { Markdown } from \"./markdown\"\n\nexport type MessageProps = {\n  children: React.ReactNode\n  className?: string\n} & React.HTMLProps<HTMLDivElement>\n\nconst Message = ({ children, className, ...props }: MessageProps) => (\n  <div className={cn(\"flex gap-3\", className)} {...props}>\n    {children}\n  </div>\n)\n\nexport type MessageAvatarProps = {\n  src: string\n  alt: string\n  fallback?: string\n  delayMs?: number\n  className?: string\n}\n\nconst MessageAvatar = ({\n  src,\n  alt,\n  fallback,\n  delayMs,\n  className,\n}: MessageAvatarProps) => {\n  return (\n    <Avatar className={cn(\"h-8 w-8 shrink-0\", className)}>\n      <AvatarImage src={src} alt={alt} />\n      {fallback && (\n        <AvatarFallback delayMs={delayMs}>{fallback}</AvatarFallback>\n      )}\n    </Avatar>\n  )\n}\n\nexport type MessageContentProps = {\n  children: React.ReactNode\n  markdown?: boolean\n  className?: string\n} & React.ComponentProps<typeof Markdown> &\n  React.HTMLProps<HTMLDivElement>\n\nconst MessageContent = ({\n  children,\n  markdown = false,\n  className,\n  ...props\n}: MessageContentProps) => {\n  const classNames = cn(\n    \"rounded-lg p-2 text-foreground bg-secondary prose break-words whitespace-normal\",\n    className\n  )\n\n  return markdown ? (\n    <Markdown className={classNames} {...props}>\n      {children as string}\n    </Markdown>\n  ) : (\n    <div className={classNames} {...props}>\n      {children}\n    </div>\n  )\n}\n\nexport type MessageActionsProps = {\n  children: React.ReactNode\n  className?: string\n} & React.HTMLProps<HTMLDivElement>\n\nconst MessageActions = ({\n  children,\n  className,\n  ...props\n}: MessageActionsProps) => (\n  <div\n    className={cn(\"text-muted-foreground flex items-center gap-2\", className)}\n    {...props}\n  >\n    {children}\n  </div>\n)\n\nexport type MessageActionProps = {\n  className?: string\n  tooltip: React.ReactNode\n  children: React.ReactNode\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\"\n} & React.ComponentProps<typeof Tooltip>\n\nconst MessageAction = ({\n  tooltip,\n  children,\n  className,\n  side = \"top\",\n  ...props\n}: MessageActionProps) => {\n  return (\n    <TooltipProvider>\n      <Tooltip {...props}>\n        <TooltipTrigger asChild>{children}</TooltipTrigger>\n        <TooltipContent side={side} className={className}>\n          {tooltip}\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n\nexport { Message, MessageAvatar, MessageContent, MessageActions, MessageAction }\n",
      "type": "registry:component"
    },
    {
      "path": "components/prompt-kit/prompt-input.tsx",
      "content": "\"use client\"\n\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\nimport React, {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\"\n\ntype PromptInputContextType = {\n  isLoading: boolean\n  value: string\n  setValue: (value: string) => void\n  maxHeight: number | string\n  onSubmit?: () => void\n  disabled?: boolean\n  textareaRef: React.RefObject<HTMLTextAreaElement | null>\n}\n\nconst PromptInputContext = createContext<PromptInputContextType>({\n  isLoading: false,\n  value: \"\",\n  setValue: () => {},\n  maxHeight: 240,\n  onSubmit: undefined,\n  disabled: false,\n  textareaRef: React.createRef<HTMLTextAreaElement>(),\n})\n\nfunction usePromptInput() {\n  return useContext(PromptInputContext)\n}\n\nexport type PromptInputProps = {\n  isLoading?: boolean\n  value?: string\n  onValueChange?: (value: string) => void\n  maxHeight?: number | string\n  onSubmit?: () => void\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n} & React.ComponentProps<\"div\">\n\nfunction PromptInput({\n  className,\n  isLoading = false,\n  maxHeight = 240,\n  value,\n  onValueChange,\n  onSubmit,\n  children,\n  disabled = false,\n  onClick,\n  ...props\n}: PromptInputProps) {\n  const [internalValue, setInternalValue] = useState(value || \"\")\n  const textareaRef = useRef<HTMLTextAreaElement>(null)\n\n  const handleChange = (newValue: string) => {\n    setInternalValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {\n    if (!disabled) textareaRef.current?.focus()\n    onClick?.(e)\n  }\n\n  return (\n    <TooltipProvider>\n      <PromptInputContext.Provider\n        value={{\n          isLoading,\n          value: value ?? internalValue,\n          setValue: onValueChange ?? handleChange,\n          maxHeight,\n          onSubmit,\n          disabled,\n          textareaRef,\n        }}\n      >\n        <div\n          onClick={handleClick}\n          className={cn(\n            \"border-input bg-background cursor-text rounded-3xl border p-2 shadow-xs\",\n            disabled && \"cursor-not-allowed opacity-60\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </PromptInputContext.Provider>\n    </TooltipProvider>\n  )\n}\n\nexport type PromptInputTextareaProps = {\n  disableAutosize?: boolean\n} & React.ComponentProps<typeof Textarea>\n\nfunction PromptInputTextarea({\n  className,\n  onKeyDown,\n  disableAutosize = false,\n  ...props\n}: PromptInputTextareaProps) {\n  const { value, setValue, maxHeight, onSubmit, disabled, textareaRef } =\n    usePromptInput()\n\n  const adjustHeight = (el: HTMLTextAreaElement | null) => {\n    if (!el || disableAutosize) return\n\n    el.style.height = \"auto\"\n\n    if (typeof maxHeight === \"number\") {\n      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`\n    } else {\n      el.style.height = `min(${el.scrollHeight}px, ${maxHeight})`\n    }\n  }\n\n  const handleRef = (el: HTMLTextAreaElement | null) => {\n    textareaRef.current = el\n    adjustHeight(el)\n  }\n\n  useLayoutEffect(() => {\n    if (!textareaRef.current || disableAutosize) return\n\n    const el = textareaRef.current\n    el.style.height = \"auto\"\n\n    if (typeof maxHeight === \"number\") {\n      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`\n    } else {\n      el.style.height = `min(${el.scrollHeight}px, ${maxHeight})`\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value, maxHeight, disableAutosize])\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    adjustHeight(e.target)\n    setValue(e.target.value)\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault()\n      onSubmit?.()\n    }\n    onKeyDown?.(e)\n  }\n\n  return (\n    <Textarea\n      ref={handleRef}\n      value={value}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        \"text-primary min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0\",\n        className\n      )}\n      rows={1}\n      disabled={disabled}\n      {...props}\n    />\n  )\n}\n\nexport type PromptInputActionsProps = React.HTMLAttributes<HTMLDivElement>\n\nfunction PromptInputActions({\n  children,\n  className,\n  ...props\n}: PromptInputActionsProps) {\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\nexport type PromptInputActionProps = {\n  className?: string\n  tooltip: React.ReactNode\n  children: React.ReactNode\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\"\n} & React.ComponentProps<typeof Tooltip>\n\nfunction PromptInputAction({\n  tooltip,\n  children,\n  className,\n  side = \"top\",\n  ...props\n}: PromptInputActionProps) {\n  const { disabled } = usePromptInput()\n\n  return (\n    <Tooltip {...props}>\n      <TooltipTrigger\n        asChild\n        disabled={disabled}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {children}\n      </TooltipTrigger>\n      <TooltipContent side={side} className={className}>\n        {tooltip}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  PromptInput,\n  PromptInputTextarea,\n  PromptInputActions,\n  PromptInputAction,\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/prompt-kit/markdown.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { marked } from \"marked\"\nimport { memo, useId, useMemo } from \"react\"\nimport ReactMarkdown, { Components } from \"react-markdown\"\nimport remarkBreaks from \"remark-breaks\"\nimport remarkGfm from \"remark-gfm\"\nimport { CodeBlock, CodeBlockCode } from \"./code-block\"\n\nexport type MarkdownProps = {\n  children: string\n  id?: string\n  className?: string\n  components?: Partial<Components>\n}\n\nfunction parseMarkdownIntoBlocks(markdown: string): string[] {\n  const tokens = marked.lexer(markdown)\n  return tokens.map((token) => token.raw)\n}\n\nfunction extractLanguage(className?: string): string {\n  if (!className) return \"plaintext\"\n  const match = className.match(/language-(\\w+)/)\n  return match ? match[1] : \"plaintext\"\n}\n\nconst INITIAL_COMPONENTS: Partial<Components> = {\n  code: function CodeComponent({ className, children, ...props }) {\n    const isInline =\n      !props.node?.position?.start.line ||\n      props.node?.position?.start.line === props.node?.position?.end.line\n\n    if (isInline) {\n      return (\n        <span\n          className={cn(\n            \"bg-primary-foreground rounded-sm px-1 font-mono text-sm\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </span>\n      )\n    }\n\n    const language = extractLanguage(className)\n\n    return (\n      <CodeBlock className={className}>\n        <CodeBlockCode code={children as string} language={language} />\n      </CodeBlock>\n    )\n  },\n  pre: function PreComponent({ children }) {\n    return <>{children}</>\n  },\n}\n\nconst MemoizedMarkdownBlock = memo(\n  function MarkdownBlock({\n    content,\n    components = INITIAL_COMPONENTS,\n  }: {\n    content: string\n    components?: Partial<Components>\n  }) {\n    return (\n      <ReactMarkdown\n        remarkPlugins={[remarkGfm, remarkBreaks]}\n        components={components}\n      >\n        {content}\n      </ReactMarkdown>\n    )\n  },\n  function propsAreEqual(prevProps, nextProps) {\n    return prevProps.content === nextProps.content\n  }\n)\n\nMemoizedMarkdownBlock.displayName = \"MemoizedMarkdownBlock\"\n\nfunction MarkdownComponent({\n  children,\n  id,\n  className,\n  components = INITIAL_COMPONENTS,\n}: MarkdownProps) {\n  const generatedId = useId()\n  const blockId = id ?? generatedId\n  const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children])\n\n  return (\n    <div className={className}>\n      {blocks.map((block, index) => (\n        <MemoizedMarkdownBlock\n          key={`${blockId}-block-${index}`}\n          content={block}\n          components={components}\n        />\n      ))}\n    </div>\n  )\n}\n\nconst Markdown = memo(MarkdownComponent)\nMarkdown.displayName = \"Markdown\"\n\nexport { Markdown }\n",
      "type": "registry:component"
    },
    {
      "path": "components/prompt-kit/code-block.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React, { useEffect, useState } from \"react\"\nimport { codeToHtml } from \"shiki\"\n\nexport type CodeBlockProps = {\n  children?: React.ReactNode\n  className?: string\n} & React.HTMLProps<HTMLDivElement>\n\nfunction CodeBlock({ children, className, ...props }: CodeBlockProps) {\n  return (\n    <div\n      className={cn(\n        \"not-prose flex w-full flex-col overflow-clip border\",\n        \"border-border bg-card text-card-foreground rounded-xl\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport type CodeBlockCodeProps = {\n  code: string\n  language?: string\n  theme?: string\n  className?: string\n} & React.HTMLProps<HTMLDivElement>\n\nfunction CodeBlockCode({\n  code,\n  language = \"tsx\",\n  theme = \"github-light\",\n  className,\n  ...props\n}: CodeBlockCodeProps) {\n  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)\n\n  useEffect(() => {\n    async function highlight() {\n      if (!code) {\n        setHighlightedHtml(\"<pre><code></code></pre>\")\n        return\n      }\n\n      const html = await codeToHtml(code, { lang: language, theme })\n      setHighlightedHtml(html)\n    }\n    highlight()\n  }, [code, language, theme])\n\n  const classNames = cn(\n    \"w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4\",\n    className\n  )\n\n  // SSR fallback: render plain code if not hydrated yet\n  return highlightedHtml ? (\n    <div\n      className={classNames}\n      dangerouslySetInnerHTML={{ __html: highlightedHtml }}\n      {...props}\n    />\n  ) : (\n    <div className={classNames} {...props}>\n      <pre>\n        <code>{code}</code>\n      </pre>\n    </div>\n  )\n}\n\nexport type CodeBlockGroupProps = React.HTMLAttributes<HTMLDivElement>\n\nfunction CodeBlockGroup({\n  children,\n  className,\n  ...props\n}: CodeBlockGroupProps) {\n  return (\n    <div\n      className={cn(\"flex items-center justify-between\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport { CodeBlockGroup, CodeBlockCode, CodeBlock }\n",
      "type": "registry:component"
    },
    {
      "path": "components/prompt-kit/tool.tsx",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  CheckCircle,\n  ChevronDown,\n  Loader2,\n  Settings,\n  XCircle,\n} from \"lucide-react\"\nimport { useState } from \"react\"\n\nexport type ToolPart = {\n  type: string\n  state:\n    | \"input-streaming\"\n    | \"input-available\"\n    | \"output-available\"\n    | \"output-error\"\n  input?: Record<string, unknown>\n  output?: Record<string, unknown>\n  toolCallId?: string\n  errorText?: string\n}\n\nexport type ToolProps = {\n  toolPart: ToolPart\n  defaultOpen?: boolean\n  className?: string\n}\n\nconst Tool = ({ toolPart, defaultOpen = false, className }: ToolProps) => {\n  const [isOpen, setIsOpen] = useState(defaultOpen)\n\n  const { state, input, output, toolCallId } = toolPart\n\n  const getStateIcon = () => {\n    switch (state) {\n      case \"input-streaming\":\n        return <Loader2 className=\"h-4 w-4 animate-spin text-blue-500\" />\n      case \"input-available\":\n        return <Settings className=\"h-4 w-4 text-orange-500\" />\n      case \"output-available\":\n        return <CheckCircle className=\"h-4 w-4 text-green-500\" />\n      case \"output-error\":\n        return <XCircle className=\"h-4 w-4 text-red-500\" />\n      default:\n        return <Settings className=\"text-muted-foreground h-4 w-4\" />\n    }\n  }\n\n  const getStateBadge = () => {\n    const baseClasses = \"px-2 py-1 rounded-full text-xs font-medium\"\n    switch (state) {\n      case \"input-streaming\":\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400\"\n            )}\n          >\n            Processing\n          </span>\n        )\n      case \"input-available\":\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400\"\n            )}\n          >\n            Ready\n          </span>\n        )\n      case \"output-available\":\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400\"\n            )}\n          >\n            Completed\n          </span>\n        )\n      case \"output-error\":\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400\"\n            )}\n          >\n            Error\n          </span>\n        )\n      default:\n        return (\n          <span\n            className={cn(\n              baseClasses,\n              \"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400\"\n            )}\n          >\n            Pending\n          </span>\n        )\n    }\n  }\n\n  const formatValue = (value: unknown): string => {\n    if (value === null) return \"null\"\n    if (value === undefined) return \"undefined\"\n    if (typeof value === \"string\") return value\n    if (typeof value === \"object\") {\n      return JSON.stringify(value, null, 2)\n    }\n    return String(value)\n  }\n\n  return (\n    <div\n      className={cn(\n        \"border-border mt-3 overflow-hidden rounded-lg border\",\n        className\n      )}\n    >\n      <Collapsible open={isOpen} onOpenChange={setIsOpen}>\n        <CollapsibleTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"bg-background h-auto w-full justify-between rounded-b-none px-3 py-2 font-normal\"\n          >\n            <div className=\"flex items-center gap-2\">\n              {getStateIcon()}\n              <span className=\"font-mono text-sm font-medium\">\n                {toolPart.type}\n              </span>\n              {getStateBadge()}\n            </div>\n            <ChevronDown className={cn(\"h-4 w-4\", isOpen && \"rotate-180\")} />\n          </Button>\n        </CollapsibleTrigger>\n        <CollapsibleContent\n          className={cn(\n            \"border-border border-t\",\n            \"data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden\"\n          )}\n        >\n          <div className=\"bg-background space-y-3 p-3\">\n            {input && Object.keys(input).length > 0 && (\n              <div>\n                <h4 className=\"text-muted-foreground mb-2 text-sm font-medium\">\n                  Input\n                </h4>\n                <div className=\"bg-background rounded border p-2 font-mono text-sm\">\n                  {Object.entries(input).map(([key, value]) => (\n                    <div key={key} className=\"mb-1\">\n                      <span className=\"text-muted-foreground\">{key}:</span>{\" \"}\n                      <span>{formatValue(value)}</span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n\n            {output && (\n              <div>\n                <h4 className=\"text-muted-foreground mb-2 text-sm font-medium\">\n                  Output\n                </h4>\n                <div className=\"bg-background max-h-60 overflow-auto rounded border p-2 font-mono text-sm\">\n                  <pre className=\"whitespace-pre-wrap\">\n                    {formatValue(output)}\n                  </pre>\n                </div>\n              </div>\n            )}\n\n            {state === \"output-error\" && toolPart.errorText && (\n              <div>\n                <h4 className=\"mb-2 text-sm font-medium text-red-500\">Error</h4>\n                <div className=\"bg-background rounded border border-red-200 p-2 text-sm dark:border-red-950 dark:bg-red-900/20\">\n                  {toolPart.errorText}\n                </div>\n              </div>\n            )}\n\n            {state === \"input-streaming\" && (\n              <div className=\"text-muted-foreground text-sm\">\n                Processing tool call...\n              </div>\n            )}\n\n            {toolCallId && (\n              <div className=\"text-muted-foreground border-t border-blue-200 pt-2 text-xs\">\n                <span className=\"font-mono\">Call ID: {toolCallId}</span>\n              </div>\n            )}\n          </div>\n        </CollapsibleContent>\n      </Collapsible>\n    </div>\n  )\n}\n\nexport { Tool }\n",
      "type": "registry:component"
    }
  ],
  "envVars": {
    "OPENAI_API_KEY": ""
  }
}