110 lines
5.0 KiB
TypeScript
110 lines
5.0 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import type { Message } from "@/lib/api";
|
|
import { MarkdownContent } from "@/components/markdown/markdown-content";
|
|
import { Globe2, Link2, Wrench } from "lucide-preact";
|
|
|
|
type Props = {
|
|
messages: Message[];
|
|
isLoading: boolean;
|
|
isSending: boolean;
|
|
};
|
|
|
|
type ToolLogMetadata = {
|
|
kind: "tool_call";
|
|
toolName?: string;
|
|
status?: "completed" | "failed";
|
|
summary?: string;
|
|
};
|
|
|
|
function asToolLogMetadata(value: unknown): ToolLogMetadata | null {
|
|
if (!value || typeof value !== "object" || Array.isArray(value)) return null;
|
|
const record = value as Record<string, unknown>;
|
|
if (record.kind !== "tool_call") return null;
|
|
return record as ToolLogMetadata;
|
|
}
|
|
|
|
function getToolSummary(message: Message, metadata: ToolLogMetadata) {
|
|
if (typeof metadata.summary === "string" && metadata.summary.trim()) return metadata.summary.trim();
|
|
const toolName = metadata.toolName?.trim() || message.name?.trim() || "unknown_tool";
|
|
return `Ran tool '${toolName}'.`;
|
|
}
|
|
|
|
function getToolIconName(toolName: string | null | undefined) {
|
|
const lowered = toolName?.toLowerCase() ?? "";
|
|
if (lowered.includes("search")) return "search";
|
|
if (lowered.includes("url") || lowered.includes("fetch") || lowered.includes("http")) return "fetch";
|
|
return "generic";
|
|
}
|
|
|
|
export function ChatMessagesPanel({ messages, isLoading, isSending }: Props) {
|
|
const hasPendingAssistant = messages.some((message) => message.id.startsWith("temp-assistant-") && message.content.trim().length === 0);
|
|
|
|
return (
|
|
<>
|
|
{isLoading && messages.length === 0 ? <p className="text-sm text-muted-foreground">Loading messages...</p> : null}
|
|
<div className="mx-auto max-w-3xl space-y-6">
|
|
{messages.map((message) => {
|
|
const toolLogMetadata = asToolLogMetadata(message.metadata);
|
|
if (message.role === "tool" && toolLogMetadata) {
|
|
const iconKind = getToolIconName(toolLogMetadata.toolName ?? message.name);
|
|
const Icon = iconKind === "search" ? Globe2 : iconKind === "fetch" ? Link2 : Wrench;
|
|
const isFailed = toolLogMetadata.status === "failed";
|
|
return (
|
|
<div key={message.id} className="flex justify-start">
|
|
<div
|
|
className={cn(
|
|
"inline-flex max-w-[85%] items-center gap-2 rounded-md border px-3 py-2 text-xs leading-5",
|
|
isFailed
|
|
? "border-rose-500/40 bg-rose-950/20 text-rose-200"
|
|
: "border-cyan-500/35 bg-cyan-950/20 text-cyan-100"
|
|
)}
|
|
>
|
|
<Icon className="h-3.5 w-3.5 shrink-0" />
|
|
<span>{getToolSummary(message, toolLogMetadata)}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isUser = message.role === "user";
|
|
const isPendingAssistant = message.id.startsWith("temp-assistant-") && isSending && message.content.trim().length === 0;
|
|
return (
|
|
<div key={message.id} className={cn("flex", isUser ? "justify-end" : "justify-start")}>
|
|
<div
|
|
className={cn(
|
|
"max-w-[85%]",
|
|
isUser ? "rounded-2xl bg-violet-900/80 px-4 py-3 text-sm leading-6 text-fuchsia-50" : "text-base leading-7 text-fuchsia-100"
|
|
)}
|
|
>
|
|
{isPendingAssistant ? (
|
|
<span className="inline-flex items-center gap-1" aria-label="Assistant is typing" role="status">
|
|
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" />
|
|
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:140ms]" />
|
|
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:280ms]" />
|
|
</span>
|
|
) : (
|
|
<MarkdownContent
|
|
markdown={message.content}
|
|
className={cn("[&_a]:text-inherit [&_a]:underline", isUser ? "leading-[1.78] text-fuchsia-50" : "leading-[1.82] text-fuchsia-100")}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
{isSending && !hasPendingAssistant ? (
|
|
<div className="flex justify-start">
|
|
<div className="max-w-[85%] text-base leading-7 text-fuchsia-100">
|
|
<span className="inline-flex items-center gap-1" aria-label="Assistant is typing" role="status">
|
|
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms]" />
|
|
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:140ms]" />
|
|
<span className="inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-muted-foreground [animation-delay:280ms]" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|