57:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 58:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"use-stick-to-bottom"}] 50:["$","li","react-markdown",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-markdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-markdown"}]]}]}] 51:["$","li","remark-gfm",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remark-gfm","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remark-gfm"}]]}]}] 52:["$","li","shiki",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/shiki","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"shiki"}]]}]}] 53:["$","li","marked",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/marked","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"marked"}]]}]}] 54:["$","li","remark-breaks",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remark-breaks","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remark-breaks"}]]}]}] 55:["$","$L57",null,{"namespace":"@prompt-kit","registryDependencies":["avatar","tooltip","textarea","collapsible","button"]}] 59:T2031,"use client" import { ChatContainerContent, ChatContainerRoot, } from "@/components/prompt-kit/chat-container" import { DotsLoader } from "@/components/prompt-kit/loader" import { Message, MessageAction, MessageActions, MessageContent, } from "@/components/prompt-kit/message" import { PromptInput, PromptInputActions, PromptInputTextarea, } from "@/components/prompt-kit/prompt-input" import { Tool } from "@/components/prompt-kit/tool" import type { ToolPart } from "@/components/prompt-kit/tool" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { useChat } from "@ai-sdk/react" import { DefaultChatTransport } from "ai" import type { UIMessage, UIMessagePart } from "ai" import { AlertTriangle, ArrowUp, Copy, ThumbsDown, ThumbsUp, } from "lucide-react" import { memo, useState } from "react" type MessageComponentProps = { message: UIMessage isLastMessage: boolean } const renderToolPart = ( part: UIMessagePart, index: number ): React.ReactNode => { if (!part.type?.startsWith("tool-")) return null return } export const MessageComponent = memo( ({ message, isLastMessage }: MessageComponentProps) => { const isAssistant = message?.role === "assistant" return ( {isAssistant ? (

{message?.parts .filter( (part: any) => part.type && part.type.startsWith("tool-") ) .map((part: any, index: number) => renderToolPart(part, index))}

{message?.parts .filter((part: any) => part.type === "text") .map((part: any) => part.text) .join("")}

) : (

{message?.parts .map((part: any) => (part.type === "text" ? part.text : null)) .join("")}

)} ) } ) MessageComponent.displayName = "MessageComponent" const LoadingMessage = memo(() => (

)) LoadingMessage.displayName = "LoadingMessage" const ErrorMessage = memo(({ error }: { error: Error }) => (

{error.message}

)) ErrorMessage.displayName = "ErrorMessage" function ToolCallingChatbot() { const [input, setInput] = useState("") const { messages, sendMessage, status, error } = useChat({ transport: new DefaultChatTransport({ api: "/api/primitives/tool-calling", }), }) const handleSubmit = () => { if (!input.trim()) return sendMessage({ text: input }) setInput("") } return (

{messages.length === 0 && (

Try asking:

what's the current date?
what time is it in Tokyo?
give me the current time in Europe/Paris

)} {messages?.map((message, index) => { const isLastMessage = index === messages.length - 1 return ( ) })} {status === "submitted" && } {status === "error" && error && }

) } export default ToolCallingChatbot 5a:T8c8,import { openai } from "@ai-sdk/openai" import { convertToModelMessages, stepCountIs, streamText, tool, UIMessage, } from "ai" import { z } from "zod" export const maxDuration = 30 export async function POST(req: Request) { const { messages }: { messages: UIMessage[] } = await req.json() const result = streamText({ model: openai("gpt-4.1-nano"), system: "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.", messages: convertToModelMessages(messages), stopWhen: stepCountIs(5), tools: { getTime: tool({ description: "Get the current time in a specific timezone", inputSchema: z.object({ timezone: z .string() .describe("A valid IANA timezone, e.g. 'Europe/Paris'"), }), execute: async ({ timezone }) => { try { const now = new Date() const time = now.toLocaleString("en-US", { timeZone: timezone, hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, }) return { time, timezone } } catch { return { error: "Invalid timezone format." } } }, }), getCurrentDate: tool({ description: "Get the current date and time with timezone information", inputSchema: z.object({}), execute: async () => { const now = new Date() return { timestamp: now.getTime(), iso: now.toISOString(), local: now.toLocaleString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZoneName: "short", }), timezone: Intl.DateTimeFormat().resolvedOptions().timeZone, utc: now.toUTCString(), } }, }), }, }) return result.toUIMessageStreamResponse() } 5b:T586,"use client" import { cn } from "@/lib/utils" import { StickToBottom } from "use-stick-to-bottom" export type ChatContainerRootProps = { children: React.ReactNode className?: string } & React.HTMLAttributes export type ChatContainerContentProps = { children: React.ReactNode className?: string } & React.HTMLAttributes export type ChatContainerScrollAnchorProps = { className?: string ref?: React.RefObject } & React.HTMLAttributes function ChatContainerRoot({ children, className, ...props }: ChatContainerRootProps) { return ( {children} ) } function ChatContainerContent({ children, className, ...props }: ChatContainerContentProps) { return ( {children} ) } function ChatContainerScrollAnchor({ className, ...props }: ChatContainerScrollAnchorProps) { return (

) } export { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor } 5c:T2895,"use client" import { cn } from "@/lib/utils" import React from "react" export interface LoaderProps { variant?: | "circular" | "classic" | "pulse" | "pulse-dot" | "dots" | "typing" | "wave" | "bars" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots" size?: "sm" | "md" | "lg" text?: string className?: string } export function CircularLoader({ className, size = "md", }: { className?: string size?: "sm" | "md" | "lg" }) { const sizeClasses = { sm: "size-4", md: "size-5", lg: "size-6", } return (

) } export function ClassicLoader({ className, size = "md", }: { className?: string size?: "sm" | "md" | "lg" }) { const sizeClasses = { sm: "size-4", md: "size-5", lg: "size-6", } const barSizes = { sm: { height: "6px", width: "1.5px" }, md: { height: "8px", width: "2px" }, lg: { height: "10px", width: "2.5px" }, } return (

{[...Array(12)].map((_, i) => (

))}

) } export function PulseLoader({ className, size = "md", }: { className?: string size?: "sm" | "md" | "lg" }) { const sizeClasses = { sm: "size-4", md: "size-5", lg: "size-6", } return (

) } export function PulseDotLoader({ className, size = "md", }: { className?: string size?: "sm" | "md" | "lg" }) { const sizeClasses = { sm: "size-1", md: "size-2", lg: "size-3", } return (

) } export function DotsLoader({ className, size = "md", }: { className?: string size?: "sm" | "md" | "lg" }) { const dotSizes = { sm: "h-1.5 w-1.5", md: "h-2 w-2", lg: "h-2.5 w-2.5", } const containerSizes = { sm: "h-4", md: "h-5", lg: "h-6", } return (

{[...Array(3)].map((_, i) => (

))} Loading

) } export function TypingLoader({ className, size = "md", }: { className?: string size?: "sm" | "md" | "lg" }) { const dotSizes = { sm: "h-1 w-1", md: "h-1.5 w-1.5", lg: "h-2 w-2", } const containerSizes = { sm: "h-4", md: "h-5", lg: "h-6", } return (

{[...Array(3)].map((_, i) => (

))} Loading

) } export function WaveLoader({ className, size = "md", }: { className?: string size?: "sm" | "md" | "lg" }) { const barWidths = { sm: "w-0.5", md: "w-0.5", lg: "w-1", } const containerSizes = { sm: "h-4", md: "h-5", lg: "h-6", } const heights = { sm: ["6px", "9px", "12px", "9px", "6px"], md: ["8px", "12px", "16px", "12px", "8px"], lg: ["10px", "15px", "20px", "15px", "10px"], } return (

{[...Array(5)].map((_, i) => (

))} Loading

) } export function BarsLoader({ className, size = "md", }: { className?: string size?: "sm" | "md" | "lg" }) { const barWidths = { sm: "w-1", md: "w-1.5", lg: "w-2", } const containerSizes = { sm: "h-4 gap-1", md: "h-5 gap-1.5", lg: "h-6 gap-2", } return (

{[...Array(3)].map((_, i) => (

))} Loading

) } export function TerminalLoader({ className, size = "md", }: { className?: string size?: "sm" | "md" | "lg" }) { const cursorSizes = { sm: "h-3 w-1.5", md: "h-4 w-2", lg: "h-5 w-2.5", } const textSizes = { sm: "text-xs", md: "text-sm", lg: "text-base", } const containerSizes = { sm: "h-4", md: "h-5", lg: "h-6", } return (

{">"}

) } export function TextBlinkLoader({ text = "Thinking", className, size = "md", }: { text?: string className?: string size?: "sm" | "md" | "lg" }) { const textSizes = { sm: "text-xs", md: "text-sm", lg: "text-base", } return (

{text}

) } export function TextShimmerLoader({ text = "Thinking", className, size = "md", }: { text?: string className?: string size?: "sm" | "md" | "lg" }) { const textSizes = { sm: "text-xs", md: "text-sm", lg: "text-base", } return (

{text}

) } export function TextDotsLoader({ className, text = "Thinking", size = "md", }: { className?: string text?: string size?: "sm" | "md" | "lg" }) { const textSizes = { sm: "text-xs", md: "text-sm", lg: "text-base", } return (

{text} . . .

) } function Loader({ variant = "circular", size = "md", text, className, }: LoaderProps) { switch (variant) { case "circular": return case "classic": return case "pulse": return case "pulse-dot": return case "dots": return case "typing": return case "wave": return case "bars": return case "terminal": return case "text-blink": return case "text-shimmer": return case "loading-dots": return default: return } } export { Loader } 5d:Ta47,import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { cn } from "@/lib/utils" import { Markdown } from "./markdown" export type MessageProps = { children: React.ReactNode className?: string } & React.HTMLProps const Message = ({ children, className, ...props }: MessageProps) => (

{children}

) export type MessageAvatarProps = { src: string alt: string fallback?: string delayMs?: number className?: string } const MessageAvatar = ({ src, alt, fallback, delayMs, className, }: MessageAvatarProps) => { return ( {fallback && ( {fallback} )} ) } export type MessageContentProps = { children: React.ReactNode markdown?: boolean className?: string } & React.ComponentProps & React.HTMLProps const MessageContent = ({ children, markdown = false, className, ...props }: MessageContentProps) => { const classNames = cn( "rounded-lg p-2 text-foreground bg-secondary prose break-words whitespace-normal", className ) return markdown ? ( {children as string} ) : (

{children}

) } export type MessageActionsProps = { children: React.ReactNode className?: string } & React.HTMLProps const MessageActions = ({ children, className, ...props }: MessageActionsProps) => (

{children}

) export type MessageActionProps = { className?: string tooltip: React.ReactNode children: React.ReactNode side?: "top" | "bottom" | "left" | "right" } & React.ComponentProps const MessageAction = ({ tooltip, children, className, side = "top", ...props }: MessageActionProps) => { return ( {children} {tooltip} ) } export { Message, MessageAvatar, MessageContent, MessageActions, MessageAction } 5e:T1529,"use client" import { Textarea } from "@/components/ui/textarea" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { cn } from "@/lib/utils" import React, { createContext, useContext, useLayoutEffect, useRef, useState, } from "react" type PromptInputContextType = { isLoading: boolean value: string setValue: (value: string) => void maxHeight: number | string onSubmit?: () => void disabled?: boolean textareaRef: React.RefObject } const PromptInputContext = createContext({ isLoading: false, value: "", setValue: () => {}, maxHeight: 240, onSubmit: undefined, disabled: false, textareaRef: React.createRef(), }) function usePromptInput() { return useContext(PromptInputContext) } export type PromptInputProps = { isLoading?: boolean value?: string onValueChange?: (value: string) => void maxHeight?: number | string onSubmit?: () => void children: React.ReactNode className?: string disabled?: boolean } & React.ComponentProps<"div"> function PromptInput({ className, isLoading = false, maxHeight = 240, value, onValueChange, onSubmit, children, disabled = false, onClick, ...props }: PromptInputProps) { const [internalValue, setInternalValue] = useState(value || "") const textareaRef = useRef(null) const handleChange = (newValue: string) => { setInternalValue(newValue) onValueChange?.(newValue) } const handleClick: React.MouseEventHandler = (e) => { if (!disabled) textareaRef.current?.focus() onClick?.(e) } return (

{children}

) } export type PromptInputTextareaProps = { disableAutosize?: boolean } & React.ComponentProps function PromptInputTextarea({ className, onKeyDown, disableAutosize = false, ...props }: PromptInputTextareaProps) { const { value, setValue, maxHeight, onSubmit, disabled, textareaRef } = usePromptInput() const adjustHeight = (el: HTMLTextAreaElement | null) => { if (!el || disableAutosize) return el.style.height = "auto" if (typeof maxHeight === "number") { el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px` } else { el.style.height = `min(${el.scrollHeight}px, ${maxHeight})` } } const handleRef = (el: HTMLTextAreaElement | null) => { textareaRef.current = el adjustHeight(el) } useLayoutEffect(() => { if (!textareaRef.current || disableAutosize) return const el = textareaRef.current el.style.height = "auto" if (typeof maxHeight === "number") { el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px` } else { el.style.height = `min(${el.scrollHeight}px, ${maxHeight})` } // eslint-disable-next-line react-hooks/exhaustive-deps }, [value, maxHeight, disableAutosize]) const handleChange = (e: React.ChangeEvent) => { adjustHeight(e.target) setValue(e.target.value) } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() onSubmit?.() } onKeyDown?.(e) } return (

)
}

export type PromptInputActionsProps = React.HTMLAttributes<HTMLDivElement>

function PromptInputActions({
  children,
  className,
  ...props
}: PromptInputActionsProps) {
  return (
    <div className={cn("flex items-center gap-2", className)} {...props}>
      {children}
    </div>
  )
}

export type PromptInputActionProps = {
  className?: string
  tooltip: React.ReactNode
  children: React.ReactNode
  side?: "top" | "bottom" | "left" | "right"
} & React.ComponentProps<typeof Tooltip>

function PromptInputAction({
  tooltip,
  children,
  className,
  side = "top",
  ...props
}: PromptInputActionProps) {
  const { disabled } = usePromptInput()

return (
    <Tooltip {...props}>
      <TooltipTrigger
        asChild
        disabled={disabled}
        onClick={(event) => event.stopPropagation()}
      >
        {children}
      </TooltipTrigger>
      <TooltipContent side={side} className={className}>
        {tooltip}
      </TooltipContent>
    </Tooltip>
  )
}

export {
  PromptInput,
  PromptInputTextarea,
  PromptInputActions,
  PromptInputAction,
}
5f:Ta8c,import { cn } from "@/lib/utils"
import { marked } from "marked"
import { memo, useId, useMemo } from "react"
import ReactMarkdown, { Components } from "react-markdown"
import remarkBreaks from "remark-breaks"
import remarkGfm from "remark-gfm"
import { CodeBlock, CodeBlockCode } from "./code-block"

export type MarkdownProps = {
  children: string
  id?: string
  className?: string
  components?: Partial<Components>
}

function parseMarkdownIntoBlocks(markdown: string): string[] {
  const tokens = marked.lexer(markdown)
  return tokens.map((token) => token.raw)
}

function extractLanguage(className?: string): string {
  if (!className) return "plaintext"
  const match = className.match(/language-(\w+)/)
  return match ? match[1] : "plaintext"
}

const INITIAL_COMPONENTS: Partial<Components> = {
  code: function CodeComponent({ className, children, ...props }) {
    const isInline =
      !props.node?.position?.start.line ||
      props.node?.position?.start.line === props.node?.position?.end.line

if (isInline) {
      return (
        <span
          className={cn(
            "bg-primary-foreground rounded-sm px-1 font-mono text-sm",
            className
          )}
          {...props}
        >
          {children}
        </span>
      )
    }

const language = extractLanguage(className)

return (
      <CodeBlock className={className}>
        <CodeBlockCode code={children as string} language={language} />
      </CodeBlock>
    )
  },
  pre: function PreComponent({ children }) {
    return <>{children}</>
  },
}

const MemoizedMarkdownBlock = memo(
  function MarkdownBlock({
    content,
    components = INITIAL_COMPONENTS,
  }: {
    content: string
    components?: Partial<Components>
  }) {
    return (
      <ReactMarkdown
        remarkPlugins={[remarkGfm, remarkBreaks]}
        components={components}
      >
        {content}
      </ReactMarkdown>
    )
  },
  function propsAreEqual(prevProps, nextProps) {
    return prevProps.content === nextProps.content
  }
)

MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock"

function MarkdownComponent({
  children,
  id,
  className,
  components = INITIAL_COMPONENTS,
}: MarkdownProps) {
  const generatedId = useId()
  const blockId = id ?? generatedId
  const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children])

return (
    <div className={className}>
      {blocks.map((block, index) => (
        <MemoizedMarkdownBlock
          key={`${blockId}-block-${index}`}
          content={block}
          components={components}
        />
      ))}
    </div>
  )
}

const Markdown = memo(MarkdownComponent)
Markdown.displayName = "Markdown"

export { Markdown }
60:T7f4,"use client"

import { cn } from "@/lib/utils"
import React, { useEffect, useState } from "react"
import { codeToHtml } from "shiki"

export type CodeBlockProps = {
  children?: React.ReactNode
  className?: string
} & React.HTMLProps<HTMLDivElement>

function CodeBlock({ children, className, ...props }: CodeBlockProps) {
  return (
    <div
      className={cn(
        "not-prose flex w-full flex-col overflow-clip border",
        "border-border bg-card text-card-foreground rounded-xl",
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}

export type CodeBlockCodeProps = {
  code: string
  language?: string
  theme?: string
  className?: string
} & React.HTMLProps<HTMLDivElement>

function CodeBlockCode({
  code,
  language = "tsx",
  theme = "github-light",
  className,
  ...props
}: CodeBlockCodeProps) {
  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)

useEffect(() => {
    async function highlight() {
      if (!code) {
        setHighlightedHtml("<pre><code></code></pre>")
        return
      }

const html = await codeToHtml(code, { lang: language, theme })
      setHighlightedHtml(html)
    }
    highlight()
  }, [code, language, theme])

const classNames = cn(
    "w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4",
    className
  )

// SSR fallback: render plain code if not hydrated yet
  return highlightedHtml ? (
    <div
      className={classNames}
      dangerouslySetInnerHTML={{ __html: highlightedHtml }}
      {...props}
    />
  ) : (
    <div className={classNames} {...props}>
      <pre>
        <code>{code}</code>
      </pre>
    </div>
  )
}

export type CodeBlockGroupProps = React.HTMLAttributes<HTMLDivElement>

function CodeBlockGroup({
  children,
  className,
  ...props
}: CodeBlockGroupProps) {
  return (
    <div
      className={cn("flex items-center justify-between", className)}
      {...props}
    >
      {children}
    </div>
  )
}

export { CodeBlockGroup, CodeBlockCode, CodeBlock }
61:T1889,"use client"

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { cn } from "@/lib/utils"
import {
  CheckCircle,
  ChevronDown,
  Loader2,
  Settings,
  XCircle,
} from "lucide-react"
import { useState } from "react"

export type ToolPart = {
  type: string
  state:
    | "input-streaming"
    | "input-available"
    | "output-available"
    | "output-error"
  input?: Record<string, unknown>
  output?: Record<string, unknown>
  toolCallId?: string
  errorText?: string
}

export type ToolProps = {
  toolPart: ToolPart
  defaultOpen?: boolean
  className?: string
}

const Tool = ({ toolPart, defaultOpen = false, className }: ToolProps) => {
  const [isOpen, setIsOpen] = useState(defaultOpen)

const { state, input, output, toolCallId } = toolPart

const getStateIcon = () => {
    switch (state) {
      case "input-streaming":
        return <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
      case "input-available":
        return <Settings className="h-4 w-4 text-orange-500" />
      case "output-available":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "output-error":
        return <XCircle className="h-4 w-4 text-red-500" />
      default:
        return <Settings className="text-muted-foreground h-4 w-4" />
    }
  }

const getStateBadge = () => {
    const baseClasses = "px-2 py-1 rounded-full text-xs font-medium"
    switch (state) {
      case "input-streaming":
        return (
          <span
            className={cn(
              baseClasses,
              "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
            )}
          >
            Processing
          </span>
        )
      case "input-available":
        return (
          <span
            className={cn(
              baseClasses,
              "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
            )}
          >
            Ready
          </span>
        )
      case "output-available":
        return (
          <span
            className={cn(
              baseClasses,
              "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
            )}
          >
            Completed
          </span>
        )
      case "output-error":
        return (
          <span
            className={cn(
              baseClasses,
              "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
            )}
          >
            Error
          </span>
        )
      default:
        return (
          <span
            className={cn(
              baseClasses,
              "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
            )}
          >
            Pending
          </span>
        )
    }
  }

const formatValue = (value: unknown): string => {
    if (value === null) return "null"
    if (value === undefined) return "undefined"
    if (typeof value === "string") return value
    if (typeof value === "object") {
      return JSON.stringify(value, null, 2)
    }
    return String(value)
  }

return (
    <div
      className={cn(
        "border-border mt-3 overflow-hidden rounded-lg border",
        className
      )}
    >
      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
        <CollapsibleTrigger asChild>
          <Button
            variant="ghost"
            className="bg-background h-auto w-full justify-between rounded-b-none px-3 py-2 font-normal"
          >
            <div className="flex items-center gap-2">
              {getStateIcon()}
              <span className="font-mono text-sm font-medium">
                {toolPart.type}
              </span>
              {getStateBadge()}
            </div>
            <ChevronDown className={cn("h-4 w-4", isOpen && "rotate-180")} />
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent
          className={cn(
            "border-border border-t",
            "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden"
          )}
        >
          <div className="bg-background space-y-3 p-3">
            {input && Object.keys(input).length > 0 && (
              <div>
                <h4 className="text-muted-foreground mb-2 text-sm font-medium">
                  Input
                </h4>
                <div className="bg-background rounded border p-2 font-mono text-sm">
                  {Object.entries(input).map(([key, value]) => (
                    <div key={key} className="mb-1">
                      <span className="text-muted-foreground">{key}:</span>{" "}
                      <span>{formatValue(value)}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

{output && (
              <div>
                <h4 className="text-muted-foreground mb-2 text-sm font-medium">
                  Output
                </h4>
                <div className="bg-background max-h-60 overflow-auto rounded border p-2 font-mono text-sm">
                  <pre className="whitespace-pre-wrap">
                    {formatValue(output)}
                  </pre>
                </div>
              </div>
            )}

{state === "output-error" && toolPart.errorText && (
              <div>
                <h4 className="mb-2 text-sm font-medium text-red-500">Error</h4>
                <div className="bg-background rounded border border-red-200 p-2 text-sm dark:border-red-950 dark:bg-red-900/20">
                  {toolPart.errorText}
                </div>
              </div>
            )}

{state === "input-streaming" && (
              <div className="text-muted-foreground text-sm">
                Processing tool call...
              </div>
            )}

{toolCallId && (
              <div className="text-muted-foreground border-t border-blue-200 pt-2 text-xs">
                <span className="font-mono">Call ID: {toolCallId}</span>
              </div>
            )}
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  )
}

export { Tool }
56:["$","$L58",null,{"files":[{"path":"components/primitives/tool-calling.tsx","content":"$59","type":"registry:component"},{"path":"app/api/primitives/tool-calling/route.ts","content":"$5a","type":"registry:file","target":"app/api/primitives/tool-calling/route.ts"},{"path":"components/prompt-kit/chat-container.tsx","content":"$5b","type":"registry:component"},{"path":"components/prompt-kit/loader.tsx","content":"$5c","type":"registry:component"},{"path":"components/prompt-kit/message.tsx","content":"$5d","type":"registry:component"},{"path":"components/prompt-kit/prompt-input.tsx","content":"$5e","type":"registry:component"},{"path":"components/prompt-kit/markdown.tsx","content":"$5f","type":"registry:component"},{"path":"components/prompt-kit/code-block.tsx","content":"$60","type":"registry:component"},{"path":"components/prompt-kit/tool.tsx","content":"$61","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]
</article></body></html>