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 ? (

) : (
{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 };