import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/shared/ui/accordion"; import { Badge } from "@/shared/ui/badge"; import { cn } from "@/shared/lib/cn"; import type { Tool } from "ai"; import { BotIcon } from "lucide-react"; import type { ComponentProps } from "react"; import { memo } from "react"; import { CodeBlock } from "./code-block"; export type AgentProps = ComponentProps<"div">; export const Agent = memo(({ className, ...props }: AgentProps) => (

)); export type AgentHeaderProps = ComponentProps<"div"> & { name: string; model?: string; }; export const AgentHeader = memo( ({ className, name, model, ...props }: AgentHeaderProps) => (

{name} {model && ( {model} )}

), ); export type AgentContentProps = ComponentProps<"div">; export const AgentContent = memo( ({ className, ...props }: AgentContentProps) => (

), ); export type AgentInstructionsProps = ComponentProps<"div"> & { children: string; }; export const AgentInstructions = memo( ({ className, children, ...props }: AgentInstructionsProps) => (

Instructions

{children}

), ); export type AgentToolsProps = ComponentProps; export const AgentTools = memo(({ className, ...props }: AgentToolsProps) => (

Tools

)); export type AgentToolProps = ComponentProps & { tool: Tool; }; export const AgentTool = memo( ({ className, tool, value, ...props }: AgentToolProps) => { const schema = "jsonSchema" in tool && tool.jsonSchema ? tool.jsonSchema : tool.inputSchema; return ( {tool.description ?? "No description"}

); }, ); export type AgentOutputProps = ComponentProps<"div"> & { schema: string; }; export const AgentOutput = memo( ({ className, schema, ...props }: AgentOutputProps) => (

Output Schema

), ); Agent.displayName = "Agent"; AgentHeader.displayName = "AgentHeader"; AgentContent.displayName = "AgentContent"; AgentInstructions.displayName = "AgentInstructions"; AgentTools.displayName = "AgentTools"; AgentTool.displayName = "AgentTool"; AgentOutput.displayName = "AgentOutput";