import { cn } from "@/lib/utils"; import { MarkdownContent } from "@/components/ui/markdown-content"; import { cva } from "class-variance-authority"; import { SparklesIcon, UserIcon, WrenchIcon } from "lucide-react"; import React from "react"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { Button } from "@/components/ui/button"; const chatMessageVariants = cva("flex gap-4 w-full", { variants: { variant: { default: "", bubble: "", full: "p-5", }, type: { incoming: "justify-start mr-auto", outgoing: "justify-end ml-auto", tool: "justify-end ml-auto", }, }, compoundVariants: [ { variant: "full", type: "outgoing", className: "bg-muted", }, { variant: "full", type: "incoming", className: "bg-background", }, { variant: "full", type: "tool", className: "bg-accent", }, ], defaultVariants: { variant: "default", type: "incoming", }, }); const ChatMessageContext = React.createContext(null); const useChatMessage = () => { const context = React.useContext(ChatMessageContext); return context; }; const ChatMessage = React.forwardRef(( { className, variant = "default", type = "incoming", id, children, ...props }, ref, ) => { return (
{children}
); }); ChatMessage.displayName = "ChatMessage"; // Avatar component const chatMessageAvatarVariants = cva( "w-8 h-8 flex items-center rounded-full justify-center ring-1 shrink-0 bg-transparent overflow-hidden", { variants: { type: { incoming: "ring-border", outgoing: "ring-muted-foreground/30", tool: "ring-accent-foreground/30", }, }, defaultVariants: { type: "incoming", }, } ); const ChatMessageAvatar = React.forwardRef(({ className, icon: iconProps, imageSrc, ...props }, ref) => { const context = useChatMessage(); const type = context?.type ?? "incoming"; const icon = iconProps ?? (type === "incoming" ? : type === "tool" ? : ); return (
{imageSrc ? ( Avatar ) : (
{icon}
)}
); }); ChatMessageAvatar.displayName = "ChatMessageAvatar"; // Content component const chatMessageContentVariants = cva("flex flex-col gap-2", { variants: { variant: { default: "", bubble: "rounded-xl px-3 py-2", full: "", }, type: { incoming: "", outgoing: "", tool: "", }, }, compoundVariants: [ { variant: "bubble", type: "incoming", className: "bg-secondary text-secondary-foreground", }, { variant: "bubble", type: "outgoing", className: "bg-primary text-primary-foreground", }, { variant: "bubble", type: "tool", className: "bg-accent text-accent-foreground", }, ], defaultVariants: { variant: "default", type: "incoming", }, }); const InterrupterCard = ({ invocationId, args, onDecision }) => { const [decisions, setDecisions] = React.useState( args.toolCalls.reduce((acc, tool) => ({ ...acc, [tool.id]: null }), {}) ); console.log("decisions",decisions); const handleDecision = (key, decision) => { const newDecisions = { ...decisions, [key]: decision }; setDecisions(newDecisions); if (Object.values(newDecisions).every(value => value !== null)) { onDecision(newDecisions); } }; console.log("args",args); return ( Interrupter Invocation ID: {invocationId} {args['toolCalls'].map((tool) => (

Function: {tool.name}

    {Object.entries(tool.args).map(([key, value]) => (
  • {key}: {value}
  • ))}
))}
); }; const ChatMessageContent = React.forwardRef(({ className, content, toolInvocations, id: idProp,interruptSubmitter, children, ...props }, ref) => { const context = useChatMessage(); const variant = context?.variant ?? "default"; const type = context?.type ?? "incoming"; const id = idProp ?? context?.id ?? ""; return (
{content.length > 0 && } {toolInvocations && toolInvocations.length > 0 && (
{toolInvocations.map((toolInvocation) => ( toolInvocation.toolName === "interrupter" ? ( { console.log(decisions); interruptSubmitter(null,{ data: decisions, allowEmptySubmit: true, }); } } /> ) : ( {toolInvocation.toolName} Invocation ID: {toolInvocation.toolCallId}

Function: {toolInvocation.toolName}

Parameters: {JSON.stringify(toolInvocation.args)}

Status: {toolInvocation.state}

) ))}
)} {children}
); }); ChatMessageContent.displayName = "ChatMessageContent"; export { ChatMessage, ChatMessageAvatar, ChatMessageContent };