Add assistant-ui data agent frontend
This commit is contained in:
武阳
@@ -0,0 +1,415 @@
|
||||
"use client";
|
||||
|
||||
import type {
|
||||
MessageState,
|
||||
ThreadAssistantMessagePart,
|
||||
ToolCallMessagePart,
|
||||
ToolCallMessagePartStatus,
|
||||
} from "@assistant-ui/react";
|
||||
import { useAuiState } from "@assistant-ui/react";
|
||||
import {
|
||||
BrainIcon,
|
||||
CheckCircle2Icon,
|
||||
ChevronDownIcon,
|
||||
ClockIcon,
|
||||
FileTextIcon,
|
||||
PanelRightCloseIcon,
|
||||
WrenchIcon,
|
||||
XCircleIcon,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
createContext,
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type ActivityContextValue = {
|
||||
open: boolean;
|
||||
selectedId: string | null;
|
||||
openItem: (id: string) => void;
|
||||
close: () => void;
|
||||
};
|
||||
|
||||
const ActivityContext = createContext<ActivityContextValue | null>(null);
|
||||
|
||||
export function ActivityProvider({ children }: { children: ReactNode }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const openItem = useCallback((id: string) => {
|
||||
setSelectedId(id);
|
||||
setOpen(true);
|
||||
}, []);
|
||||
const close = useCallback(() => setOpen(false), []);
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
open,
|
||||
selectedId,
|
||||
openItem,
|
||||
close,
|
||||
}),
|
||||
[open, selectedId, openItem, close],
|
||||
);
|
||||
|
||||
return (
|
||||
<ActivityContext.Provider value={value}>
|
||||
{children}
|
||||
</ActivityContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useActivityPanel() {
|
||||
const value = useContext(ActivityContext);
|
||||
if (!value) {
|
||||
throw new Error("useActivityPanel must be used within ActivityProvider");
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
type ActivityItem = {
|
||||
id: string;
|
||||
kind: "reasoning" | "tool";
|
||||
title: string;
|
||||
summary: string;
|
||||
status: ToolCallMessagePartStatus["type"];
|
||||
argsText?: string;
|
||||
result?: unknown;
|
||||
resultSummary?: string;
|
||||
rawResult?: string;
|
||||
fileLinks?: string[];
|
||||
};
|
||||
|
||||
export function ActivityPanel() {
|
||||
const { open, selectedId, openItem, close } = useActivityPanel();
|
||||
const messages = useAuiState((s) => s.thread.messages);
|
||||
const items = useMemo(() => collectActivityItems(messages), [messages]);
|
||||
const prevCountRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (items.length > prevCountRef.current) {
|
||||
openItem(items.at(-1)?.id ?? items[0]?.id ?? "");
|
||||
}
|
||||
prevCountRef.current = items.length;
|
||||
}, [items, openItem]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<aside className="fixed inset-y-0 right-0 z-30 flex w-[min(23rem,calc(100vw-1rem))] flex-col border-l bg-background shadow-xl lg:static lg:z-auto lg:h-full lg:w-92 lg:shrink-0 lg:shadow-none">
|
||||
<header className="flex h-16 shrink-0 items-center justify-between border-b px-4">
|
||||
<div className="min-w-0">
|
||||
<h2 className="font-semibold text-base">活动</h2>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
{items.length > 0 ? `${items.length} 个步骤` : "暂无链路"}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-8"
|
||||
onClick={close}
|
||||
aria-label="关闭活动面板"
|
||||
>
|
||||
<PanelRightCloseIcon className="size-4" />
|
||||
</Button>
|
||||
</header>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
|
||||
{items.length === 0 ? (
|
||||
<p className="text-muted-foreground text-sm">
|
||||
当前对话还没有工具链路。
|
||||
</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{items.map((item) => (
|
||||
<ActivityPanelItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
open={selectedId === item.id}
|
||||
onOpenChange={(nextOpen) => {
|
||||
if (nextOpen) openItem(item.id);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function ActivityPanelItem({
|
||||
item,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
item: ActivityItem;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}) {
|
||||
const Icon = item.kind === "tool" ? WrenchIcon : BrainIcon;
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
className="rounded-lg border bg-card text-card-foreground"
|
||||
>
|
||||
<CollapsibleTrigger className="flex w-full items-start gap-3 px-3 py-3 text-left">
|
||||
<ActivityStatusIcon status={item.status} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="truncate font-medium text-sm">{item.title}</span>
|
||||
</div>
|
||||
<p className="mt-1 line-clamp-2 text-muted-foreground text-xs">
|
||||
{item.summary}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={cn(
|
||||
"mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform",
|
||||
!open && "-rotate-90",
|
||||
)}
|
||||
/>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="flex flex-col gap-3 border-t px-3 py-3 text-xs">
|
||||
{item.argsText ? (
|
||||
<ActivityPre title="输入参数" value={item.argsText} />
|
||||
) : null}
|
||||
{item.resultSummary ? (
|
||||
<ActivityResultSummary value={item.resultSummary} />
|
||||
) : null}
|
||||
{item.fileLinks?.length ? (
|
||||
<ActivityFileLinks paths={item.fileLinks} />
|
||||
) : null}
|
||||
{item.rawResult ? (
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex items-center gap-1 font-medium text-muted-foreground transition-colors hover:text-foreground">
|
||||
<ChevronDownIcon className="size-3" />
|
||||
原始结果
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<ActivityPre title="" value={item.rawResult} className="mt-2" />
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : null}
|
||||
{item.kind === "reasoning" ? (
|
||||
<p className="text-muted-foreground">
|
||||
这里展示的是思考状态摘要，不展示模型完整隐藏思考过程。
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
function ActivityStatusIcon({ status }: { status: ActivityItem["status"] }) {
|
||||
if (status === "running") {
|
||||
return <ClockIcon className="mt-0.5 size-4 shrink-0 animate-pulse" />;
|
||||
}
|
||||
if (status === "incomplete") {
|
||||
return <XCircleIcon className="mt-0.5 size-4 shrink-0 text-destructive" />;
|
||||
}
|
||||
return (
|
||||
<CheckCircle2Icon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
|
||||
);
|
||||
}
|
||||
|
||||
function ActivityPre({
|
||||
title,
|
||||
value,
|
||||
className,
|
||||
}: {
|
||||
title: string;
|
||||
value: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={className}>
|
||||
{title ? (
|
||||
<p className="mb-1 font-medium text-muted-foreground">{title}</p>
|
||||
) : null}
|
||||
<pre className="max-h-80 overflow-auto rounded-md bg-muted px-3 py-2 whitespace-pre-wrap">
|
||||
{value}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ActivityResultSummary({ value }: { value: string }) {
|
||||
return (
|
||||
<div className="rounded-md border bg-muted/30 px-3 py-2">
|
||||
<div className="mb-1 flex items-center gap-1.5 font-medium text-muted-foreground">
|
||||
<FileTextIcon className="size-3.5" />
|
||||
结果摘要
|
||||
</div>
|
||||
<p className="whitespace-pre-wrap">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function collectActivityItems(messages: readonly MessageState[]) {
|
||||
const items: ActivityItem[] = [];
|
||||
|
||||
for (const message of messages) {
|
||||
if (message.role !== "assistant") continue;
|
||||
const parts = message.content as readonly ThreadAssistantMessagePart[];
|
||||
for (const [index, part] of parts.entries()) {
|
||||
const id = `${message.id}:${index}`;
|
||||
if (part.type === "reasoning") {
|
||||
const status = getPartStatus(message, part);
|
||||
items.push({
|
||||
id,
|
||||
kind: "reasoning",
|
||||
title: status === "running" ? "思考中" : "思考完成",
|
||||
summary:
|
||||
part.text.trim() ||
|
||||
(status === "running"
|
||||
? "模型正在整理下一步行动。"
|
||||
: "思考并执行完成。"),
|
||||
status,
|
||||
});
|
||||
}
|
||||
if (part.type === "tool-call") {
|
||||
items.push({
|
||||
id,
|
||||
kind: "tool",
|
||||
title: part.toolName,
|
||||
summary: summarizeTool(message, part),
|
||||
status: getPartStatus(message, part),
|
||||
argsText: part.argsText,
|
||||
result: decodeJsonString(part.result),
|
||||
resultSummary: summarizeToolResult(decodeJsonString(part.result)),
|
||||
rawResult:
|
||||
part.result === undefined
|
||||
? undefined
|
||||
: formatValue(decodeJsonString(part.result)),
|
||||
fileLinks: extractLocalPaths(
|
||||
[
|
||||
part.argsText,
|
||||
part.result === undefined
|
||||
? undefined
|
||||
: formatValue(decodeJsonString(part.result)),
|
||||
].filter(Boolean) as string[],
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
function ActivityFileLinks({ paths }: { paths: string[] }) {
|
||||
return (
|
||||
<div className="rounded-md border bg-muted/30 px-3 py-2">
|
||||
<div className="mb-1 flex items-center gap-1.5 font-medium text-muted-foreground">
|
||||
<FileTextIcon className="size-3.5" />
|
||||
相关文件
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
{paths.map((filePath) => (
|
||||
<a
|
||||
key={filePath}
|
||||
href={`/api/claw/files?path=${encodeURIComponent(filePath)}`}
|
||||
className="truncate text-primary hover:underline"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title={filePath}
|
||||
>
|
||||
{basename(filePath)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getPartStatus(
|
||||
message: Extract<MessageState, { role: "assistant" }>,
|
||||
part: ThreadAssistantMessagePart,
|
||||
): ToolCallMessagePartStatus["type"] {
|
||||
if (message.status.type === "incomplete") return "incomplete";
|
||||
if (part.type === "tool-call" && part.result === undefined) return "running";
|
||||
if (message.status.type === "running") return "running";
|
||||
return "complete";
|
||||
}
|
||||
|
||||
function summarizeTool(
|
||||
message: Extract<MessageState, { role: "assistant" }>,
|
||||
part: ToolCallMessagePart,
|
||||
) {
|
||||
const status = getPartStatus(message, part);
|
||||
if (status === "running") return "调用工具中";
|
||||
if (status === "incomplete") return "工具调用未完成";
|
||||
if (part.result === undefined) return "已提交工具参数";
|
||||
return "工具调用完成";
|
||||
}
|
||||
|
||||
function decodeJsonString(value: unknown): unknown {
|
||||
if (typeof value !== "string") return value;
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function formatValue(value: unknown) {
|
||||
const decoded = decodeJsonString(value);
|
||||
return typeof decoded === "string"
|
||||
? decoded
|
||||
: JSON.stringify(decoded, null, 2);
|
||||
}
|
||||
|
||||
function summarizeToolResult(value: unknown) {
|
||||
const decoded = decodeJsonString(value);
|
||||
if (decoded === undefined) return undefined;
|
||||
if (typeof decoded === "string") return trimText(decoded, 600);
|
||||
if (!decoded || typeof decoded !== "object") return String(decoded);
|
||||
|
||||
const record = decoded as Record<string, unknown>;
|
||||
const parts: string[] = [];
|
||||
if (typeof record.tool === "string") parts.push(`工具: ${record.tool}`);
|
||||
if (typeof record.ok === "boolean")
|
||||
parts.push(record.ok ? "状态: 成功" : "状态: 失败");
|
||||
if (typeof record.error === "string") parts.push(`错误: ${record.error}`);
|
||||
if (typeof record.content === "string")
|
||||
parts.push(trimText(record.content, 600));
|
||||
if (!parts.length) parts.push(trimText(JSON.stringify(record, null, 2), 600));
|
||||
return parts.join("\n");
|
||||
}
|
||||
|
||||
function trimText(text: string, maxLength: number) {
|
||||
const normalized = text.trim();
|
||||
if (normalized.length <= maxLength) return normalized;
|
||||
return `${normalized.slice(0, maxLength)}...`;
|
||||
}
|
||||
|
||||
function extractLocalPaths(values: string[]) {
|
||||
const paths = new Set<string>();
|
||||
for (const value of values) {
|
||||
for (const match of value.matchAll(/\/Users\/[^\s"',)]+/g)) {
|
||||
paths.add(match[0]);
|
||||
}
|
||||
}
|
||||
return [...paths];
|
||||
}
|
||||
|
||||
function basename(filePath: string) {
|
||||
return filePath.split("/").filter(Boolean).at(-1) ?? filePath;
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AttachmentPrimitive,
|
||||
ComposerPrimitive,
|
||||
MessagePrimitive,
|
||||
useAui,
|
||||
useAuiState,
|
||||
} from "@assistant-ui/react";
|
||||
import { FileText, PlusIcon, XIcon } from "lucide-react";
|
||||
import { type FC, type PropsWithChildren, useEffect, useState } from "react";
|
||||
import { useShallow } from "zustand/shallow";
|
||||
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const useFileSrc = (file: File | undefined) => {
|
||||
const [src, setSrc] = useState<string | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
if (!file) {
|
||||
setSrc(undefined);
|
||||
return;
|
||||
}
|
||||
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
setSrc(objectUrl);
|
||||
|
||||
return () => {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
};
|
||||
}, [file]);
|
||||
|
||||
return src;
|
||||
};
|
||||
|
||||
const useAttachmentSrc = () => {
|
||||
const { file, src } = useAuiState(
|
||||
useShallow((s): { file?: File; src?: string } => {
|
||||
if (s.attachment.type !== "image") return {};
|
||||
if (s.attachment.file) return { file: s.attachment.file };
|
||||
const src = s.attachment.content?.filter((c) => c.type === "image")[0]
|
||||
?.image;
|
||||
if (!src) return {};
|
||||
return { src };
|
||||
}),
|
||||
);
|
||||
|
||||
return useFileSrc(file) ?? src;
|
||||
};
|
||||
|
||||
type AttachmentPreviewProps = {
|
||||
src: string;
|
||||
};
|
||||
|
||||
const AttachmentPreview: FC<AttachmentPreviewProps> = ({ src }) => {
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
return (
|
||||
<img
|
||||
src={src}
|
||||
alt="Attachment preview"
|
||||
className={cn(
|
||||
"block h-auto max-h-[80vh] w-auto max-w-full object-contain",
|
||||
isLoaded
|
||||
? "aui-attachment-preview-image-loaded"
|
||||
: "aui-attachment-preview-image-loading invisible",
|
||||
)}
|
||||
onLoad={() => setIsLoaded(true)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const AttachmentPreviewDialog: FC<PropsWithChildren> = ({ children }) => {
|
||||
const src = useAttachmentSrc();
|
||||
|
||||
if (!src) return children;
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger
|
||||
className="aui-attachment-preview-trigger cursor-pointer transition-colors hover:bg-accent/50"
|
||||
asChild
|
||||
>
|
||||
{children}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="aui-attachment-preview-dialog-content p-2 sm:max-w-3xl [&>button]:rounded-full [&>button]:bg-foreground/60 [&>button]:p-1 [&>button]:opacity-100 [&>button]:ring-0! [&_svg]:text-background [&>button]:hover:[&_svg]:text-destructive">
|
||||
<DialogTitle className="aui-sr-only sr-only">
|
||||
Image Attachment Preview
|
||||
</DialogTitle>
|
||||
<div className="aui-attachment-preview relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden bg-background">
|
||||
<AttachmentPreview src={src} />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
const AttachmentThumb: FC = () => {
|
||||
const src = useAttachmentSrc();
|
||||
|
||||
return (
|
||||
<Avatar className="aui-attachment-tile-avatar h-full w-full rounded-none">
|
||||
<AvatarImage
|
||||
src={src}
|
||||
alt="Attachment preview"
|
||||
className="aui-attachment-tile-image object-cover"
|
||||
/>
|
||||
<AvatarFallback>
|
||||
<FileText className="aui-attachment-tile-fallback-icon size-8 text-muted-foreground" />
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
);
|
||||
};
|
||||
|
||||
const AttachmentUI: FC = () => {
|
||||
const aui = useAui();
|
||||
const isComposer = aui.attachment.source !== "message";
|
||||
|
||||
const isImage = useAuiState((s) => s.attachment.type === "image");
|
||||
const typeLabel = useAuiState((s) => {
|
||||
const type = s.attachment.type;
|
||||
switch (type) {
|
||||
case "image":
|
||||
return "Image";
|
||||
case "document":
|
||||
return "Document";
|
||||
case "file":
|
||||
return "File";
|
||||
default:
|
||||
return type;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<AttachmentPrimitive.Root
|
||||
className={cn(
|
||||
"aui-attachment-root relative",
|
||||
isImage && "aui-attachment-root-composer only:*:first:size-24",
|
||||
)}
|
||||
>
|
||||
<AttachmentPreviewDialog>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className="aui-attachment-tile size-14 cursor-pointer overflow-hidden rounded-[calc(var(--composer-radius)-var(--composer-padding))] border bg-muted transition-opacity hover:opacity-75"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`${typeLabel} attachment`}
|
||||
>
|
||||
<AttachmentThumb />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
</AttachmentPreviewDialog>
|
||||
{isComposer && <AttachmentRemove />}
|
||||
</AttachmentPrimitive.Root>
|
||||
<TooltipContent side="top">
|
||||
<AttachmentPrimitive.Name />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
const AttachmentRemove: FC = () => {
|
||||
return (
|
||||
<AttachmentPrimitive.Remove asChild>
|
||||
<TooltipIconButton
|
||||
tooltip="Remove file"
|
||||
className="aui-attachment-tile-remove absolute top-1.5 right-1.5 size-3.5 rounded-full bg-white text-muted-foreground opacity-100 shadow-sm hover:bg-white! [&_svg]:text-black hover:[&_svg]:text-destructive"
|
||||
side="top"
|
||||
>
|
||||
<XIcon className="aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" />
|
||||
</TooltipIconButton>
|
||||
</AttachmentPrimitive.Remove>
|
||||
);
|
||||
};
|
||||
|
||||
export const UserMessageAttachments: FC = () => {
|
||||
return (
|
||||
<div className="aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2">
|
||||
<MessagePrimitive.Attachments>
|
||||
{() => <AttachmentUI />}
|
||||
</MessagePrimitive.Attachments>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ComposerAttachments: FC = () => {
|
||||
return (
|
||||
<div className="aui-composer-attachments flex w-full flex-row items-center gap-2 overflow-x-auto empty:hidden">
|
||||
<ComposerPrimitive.Attachments>
|
||||
{() => <AttachmentUI />}
|
||||
</ComposerPrimitive.Attachments>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const ComposerAddAttachment: FC = () => {
|
||||
return (
|
||||
<ComposerPrimitive.AddAttachment asChild>
|
||||
<TooltipIconButton
|
||||
tooltip="Add Attachment"
|
||||
side="bottom"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="aui-composer-add-attachment size-8 rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
|
||||
aria-label="Add Attachment"
|
||||
>
|
||||
<PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
|
||||
</TooltipIconButton>
|
||||
</ComposerPrimitive.AddAttachment>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,243 @@
|
||||
"use client";
|
||||
|
||||
import "@assistant-ui/react-markdown/styles/dot.css";
|
||||
|
||||
import {
|
||||
type CodeHeaderProps,
|
||||
MarkdownTextPrimitive,
|
||||
unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
|
||||
useIsMarkdownCodeBlock,
|
||||
} from "@assistant-ui/react-markdown";
|
||||
import { CheckIcon, CopyIcon } from "lucide-react";
|
||||
import { type FC, memo, useState } from "react";
|
||||
import remarkGfm from "remark-gfm";
|
||||
|
||||
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const MarkdownTextImpl = () => {
|
||||
return (
|
||||
<MarkdownTextPrimitive
|
||||
remarkPlugins={[remarkGfm]}
|
||||
className="aui-md"
|
||||
components={defaultComponents}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const MarkdownText = memo(MarkdownTextImpl);
|
||||
|
||||
const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
|
||||
const { isCopied, copyToClipboard } = useCopyToClipboard();
|
||||
const onCopy = () => {
|
||||
if (!code || isCopied) return;
|
||||
copyToClipboard(code);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="aui-code-header-root mt-2.5 flex items-center justify-between rounded-t-lg border border-border/50 border-b-0 bg-muted/50 px-3 py-1.5 text-xs">
|
||||
<span className="aui-code-header-language font-medium text-muted-foreground lowercase">
|
||||
{language}
|
||||
</span>
|
||||
<TooltipIconButton tooltip="Copy" onClick={onCopy}>
|
||||
{!isCopied && <CopyIcon />}
|
||||
{isCopied && <CheckIcon />}
|
||||
</TooltipIconButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const useCopyToClipboard = ({
|
||||
copiedDuration = 3000,
|
||||
}: {
|
||||
copiedDuration?: number;
|
||||
} = {}) => {
|
||||
const [isCopied, setIsCopied] = useState<boolean>(false);
|
||||
|
||||
const copyToClipboard = (value: string) => {
|
||||
if (!value) return;
|
||||
|
||||
navigator.clipboard.writeText(value).then(() => {
|
||||
setIsCopied(true);
|
||||
setTimeout(() => setIsCopied(false), copiedDuration);
|
||||
});
|
||||
};
|
||||
|
||||
return { isCopied, copyToClipboard };
|
||||
};
|
||||
|
||||
const defaultComponents = memoizeMarkdownComponents({
|
||||
h1: ({ className, ...props }) => (
|
||||
<h1
|
||||
className={cn(
|
||||
"aui-md-h1 mb-2 scroll-m-20 font-semibold text-base first:mt-0 last:mb-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h2: ({ className, ...props }) => (
|
||||
<h2
|
||||
className={cn(
|
||||
"aui-md-h2 mt-3 mb-1.5 scroll-m-20 font-semibold text-sm first:mt-0 last:mb-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h3: ({ className, ...props }) => (
|
||||
<h3
|
||||
className={cn(
|
||||
"aui-md-h3 mt-2.5 mb-1 scroll-m-20 font-semibold text-sm first:mt-0 last:mb-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h4: ({ className, ...props }) => (
|
||||
<h4
|
||||
className={cn(
|
||||
"aui-md-h4 mt-2 mb-1 scroll-m-20 font-medium text-sm first:mt-0 last:mb-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h5: ({ className, ...props }) => (
|
||||
<h5
|
||||
className={cn(
|
||||
"aui-md-h5 mt-2 mb-1 font-medium text-sm first:mt-0 last:mb-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h6: ({ className, ...props }) => (
|
||||
<h6
|
||||
className={cn(
|
||||
"aui-md-h6 mt-2 mb-1 font-medium text-sm first:mt-0 last:mb-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
p: ({ className, ...props }) => (
|
||||
<p
|
||||
className={cn(
|
||||
"aui-md-p my-2.5 leading-normal first:mt-0 last:mb-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
a: ({ className, ...props }) => (
|
||||
<a
|
||||
className={cn(
|
||||
"aui-md-a text-primary underline underline-offset-2 hover:text-primary/80",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
blockquote: ({ className, ...props }) => (
|
||||
<blockquote
|
||||
className={cn(
|
||||
"aui-md-blockquote my-2.5 border-muted-foreground/30 border-l-2 pl-3 text-muted-foreground italic",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
ul: ({ className, ...props }) => (
|
||||
<ul
|
||||
className={cn(
|
||||
"aui-md-ul my-2 ml-4 list-disc marker:text-muted-foreground [&>li]:mt-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
ol: ({ className, ...props }) => (
|
||||
<ol
|
||||
className={cn(
|
||||
"aui-md-ol my-2 ml-4 list-decimal marker:text-muted-foreground [&>li]:mt-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
hr: ({ className, ...props }) => (
|
||||
<hr
|
||||
className={cn("aui-md-hr my-2 border-muted-foreground/20", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
table: ({ className, ...props }) => (
|
||||
<table
|
||||
className={cn(
|
||||
"aui-md-table my-2 w-full border-separate border-spacing-0 overflow-y-auto",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
th: ({ className, ...props }) => (
|
||||
<th
|
||||
className={cn(
|
||||
"aui-md-th bg-muted px-2 py-1 text-left font-medium first:rounded-tl-lg last:rounded-tr-lg [[align=center]]:text-center [[align=right]]:text-right",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
td: ({ className, ...props }) => (
|
||||
<td
|
||||
className={cn(
|
||||
"aui-md-td border-muted-foreground/20 border-b border-l px-2 py-1 text-left last:border-r [[align=center]]:text-center [[align=right]]:text-right",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
tr: ({ className, ...props }) => (
|
||||
<tr
|
||||
className={cn(
|
||||
"aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
li: ({ className, ...props }) => (
|
||||
<li className={cn("aui-md-li leading-normal", className)} {...props} />
|
||||
),
|
||||
sup: ({ className, ...props }) => (
|
||||
<sup
|
||||
className={cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
pre: ({ className, ...props }) => (
|
||||
<pre
|
||||
className={cn(
|
||||
"aui-md-pre overflow-x-auto rounded-t-none rounded-b-lg border border-border/50 border-t-0 bg-muted/30 p-3 text-xs leading-relaxed",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
code: function Code({ className, ...props }) {
|
||||
const isCodeBlock = useIsMarkdownCodeBlock();
|
||||
return (
|
||||
<code
|
||||
className={cn(
|
||||
!isCodeBlock &&
|
||||
"aui-md-inline-code rounded-md border border-border/50 bg-muted/50 px-1.5 py-0.5 font-mono text-[0.85em]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
CodeHeader,
|
||||
});
|
||||
@@ -0,0 +1,275 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
type ReasoningGroupComponent,
|
||||
type ReasoningMessagePartComponent,
|
||||
useAuiState,
|
||||
useScrollLock,
|
||||
} from "@assistant-ui/react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { BrainIcon, ChevronDownIcon } from "lucide-react";
|
||||
import { memo, useCallback, useRef, useState } from "react";
|
||||
import { MarkdownText } from "@/components/assistant-ui/markdown-text";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const ANIMATION_DURATION = 200;
|
||||
|
||||
const reasoningVariants = cva("aui-reasoning-root mb-4 w-full", {
|
||||
variants: {
|
||||
variant: {
|
||||
outline: "rounded-lg border px-3 py-2",
|
||||
ghost: "",
|
||||
muted: "rounded-lg bg-muted/50 px-3 py-2",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "outline",
|
||||
},
|
||||
});
|
||||
|
||||
export type ReasoningRootProps = Omit<
|
||||
React.ComponentProps<typeof Collapsible>,
|
||||
"open" | "onOpenChange"
|
||||
> &
|
||||
VariantProps<typeof reasoningVariants> & {
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
defaultOpen?: boolean;
|
||||
};
|
||||
|
||||
function ReasoningRoot({
|
||||
className,
|
||||
variant,
|
||||
open: controlledOpen,
|
||||
onOpenChange: controlledOnOpenChange,
|
||||
defaultOpen = false,
|
||||
children,
|
||||
...props
|
||||
}: ReasoningRootProps) {
|
||||
const collapsibleRef = useRef<HTMLDivElement>(null);
|
||||
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
|
||||
const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
|
||||
|
||||
const isControlled = controlledOpen !== undefined;
|
||||
const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
|
||||
|
||||
const handleOpenChange = useCallback(
|
||||
(open: boolean) => {
|
||||
if (!open) {
|
||||
lockScroll();
|
||||
}
|
||||
if (!isControlled) {
|
||||
setUncontrolledOpen(open);
|
||||
}
|
||||
controlledOnOpenChange?.(open);
|
||||
},
|
||||
[lockScroll, isControlled, controlledOnOpenChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
ref={collapsibleRef}
|
||||
data-slot="reasoning-root"
|
||||
data-variant={variant}
|
||||
open={isOpen}
|
||||
onOpenChange={handleOpenChange}
|
||||
className={cn(
|
||||
"group/reasoning-root",
|
||||
reasoningVariants({ variant, className }),
|
||||
)}
|
||||
style={
|
||||
{
|
||||
"--animation-duration": `${ANIMATION_DURATION}ms`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
function ReasoningFade({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="reasoning-fade"
|
||||
className={cn(
|
||||
"aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8",
|
||||
"bg-[linear-gradient(to_top,var(--color-background),transparent)]",
|
||||
"group-data-[variant=muted]/reasoning-root:bg-[linear-gradient(to_top,hsl(var(--muted)/0.5),transparent)]",
|
||||
"fade-in-0 animate-in",
|
||||
"group-data-[state=open]/collapsible-content:animate-out",
|
||||
"group-data-[state=open]/collapsible-content:fade-out-0",
|
||||
"group-data-[state=open]/collapsible-content:delay-[calc(var(--animation-duration)*0.75)]",
|
||||
"group-data-[state=open]/collapsible-content:fill-mode-forwards",
|
||||
"duration-(--animation-duration)",
|
||||
"group-data-[state=open]/collapsible-content:duration-(--animation-duration)",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ReasoningTrigger({
|
||||
active,
|
||||
duration,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsibleTrigger> & {
|
||||
active?: boolean;
|
||||
duration?: number;
|
||||
}) {
|
||||
const durationText = duration ? ` (${duration}s)` : "";
|
||||
|
||||
return (
|
||||
<CollapsibleTrigger
|
||||
data-slot="reasoning-trigger"
|
||||
className={cn(
|
||||
"aui-reasoning-trigger group/trigger flex max-w-[75%] items-center gap-2 py-1 text-muted-foreground text-sm transition-colors hover:text-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<BrainIcon
|
||||
data-slot="reasoning-trigger-icon"
|
||||
className="aui-reasoning-trigger-icon size-4 shrink-0"
|
||||
/>
|
||||
<span
|
||||
data-slot="reasoning-trigger-label"
|
||||
className="aui-reasoning-trigger-label-wrapper relative inline-block leading-none"
|
||||
>
|
||||
<span>Reasoning{durationText}</span>
|
||||
{active ? (
|
||||
<span
|
||||
aria-hidden
|
||||
data-slot="reasoning-trigger-shimmer"
|
||||
className="aui-reasoning-trigger-shimmer shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none"
|
||||
>
|
||||
Reasoning{durationText}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
data-slot="reasoning-trigger-chevron"
|
||||
className={cn(
|
||||
"aui-reasoning-trigger-chevron mt-0.5 size-4 shrink-0",
|
||||
"transition-transform duration-(--animation-duration) ease-out",
|
||||
"group-data-[state=closed]/trigger:-rotate-90",
|
||||
"group-data-[state=open]/trigger:rotate-0",
|
||||
)}
|
||||
/>
|
||||
</CollapsibleTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function ReasoningContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsibleContent>) {
|
||||
return (
|
||||
<CollapsibleContent
|
||||
data-slot="reasoning-content"
|
||||
className={cn(
|
||||
"aui-reasoning-content relative overflow-hidden text-muted-foreground text-sm outline-none",
|
||||
"group/collapsible-content ease-out",
|
||||
"data-[state=closed]:animate-collapsible-up",
|
||||
"data-[state=open]:animate-collapsible-down",
|
||||
"data-[state=closed]:fill-mode-forwards",
|
||||
"data-[state=closed]:pointer-events-none",
|
||||
"data-[state=open]:duration-(--animation-duration)",
|
||||
"data-[state=closed]:duration-(--animation-duration)",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ReasoningFade />
|
||||
</CollapsibleContent>
|
||||
);
|
||||
}
|
||||
|
||||
function ReasoningText({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="reasoning-text"
|
||||
className={cn(
|
||||
"aui-reasoning-text relative z-0 max-h-64 space-y-4 overflow-y-auto pt-2 pb-2 pl-6 leading-relaxed",
|
||||
"transform-gpu transition-[transform,opacity]",
|
||||
"group-data-[state=open]/collapsible-content:animate-in",
|
||||
"group-data-[state=closed]/collapsible-content:animate-out",
|
||||
"group-data-[state=open]/collapsible-content:fade-in-0",
|
||||
"group-data-[state=closed]/collapsible-content:fade-out-0",
|
||||
"group-data-[state=open]/collapsible-content:slide-in-from-top-4",
|
||||
"group-data-[state=closed]/collapsible-content:slide-out-to-top-4",
|
||||
"group-data-[state=open]/collapsible-content:duration-(--animation-duration)",
|
||||
"group-data-[state=closed]/collapsible-content:duration-(--animation-duration)",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />;
|
||||
|
||||
const ReasoningGroupImpl: ReasoningGroupComponent = ({
|
||||
children,
|
||||
startIndex,
|
||||
endIndex,
|
||||
}) => {
|
||||
const isReasoningStreaming = useAuiState((s) => {
|
||||
if (s.message.status?.type !== "running") return false;
|
||||
const lastIndex = s.message.parts.length - 1;
|
||||
if (lastIndex < 0) return false;
|
||||
const lastType = s.message.parts[lastIndex]?.type;
|
||||
if (lastType !== "reasoning") return false;
|
||||
return lastIndex >= startIndex && lastIndex <= endIndex;
|
||||
});
|
||||
|
||||
return (
|
||||
<ReasoningRoot defaultOpen={isReasoningStreaming}>
|
||||
<ReasoningTrigger active={isReasoningStreaming} />
|
||||
<ReasoningContent aria-busy={isReasoningStreaming}>
|
||||
<ReasoningText>{children}</ReasoningText>
|
||||
</ReasoningContent>
|
||||
</ReasoningRoot>
|
||||
);
|
||||
};
|
||||
|
||||
const Reasoning = memo(
|
||||
ReasoningImpl,
|
||||
) as unknown as ReasoningMessagePartComponent & {
|
||||
Root: typeof ReasoningRoot;
|
||||
Trigger: typeof ReasoningTrigger;
|
||||
Content: typeof ReasoningContent;
|
||||
Text: typeof ReasoningText;
|
||||
Fade: typeof ReasoningFade;
|
||||
};
|
||||
|
||||
Reasoning.displayName = "Reasoning";
|
||||
Reasoning.Root = ReasoningRoot;
|
||||
Reasoning.Trigger = ReasoningTrigger;
|
||||
Reasoning.Content = ReasoningContent;
|
||||
Reasoning.Text = ReasoningText;
|
||||
Reasoning.Fade = ReasoningFade;
|
||||
|
||||
const ReasoningGroup = memo(ReasoningGroupImpl);
|
||||
ReasoningGroup.displayName = "ReasoningGroup";
|
||||
|
||||
export {
|
||||
Reasoning,
|
||||
ReasoningContent,
|
||||
ReasoningFade,
|
||||
ReasoningGroup,
|
||||
ReasoningRoot,
|
||||
ReasoningText,
|
||||
ReasoningTrigger,
|
||||
reasoningVariants,
|
||||
};
|
||||
@@ -0,0 +1,420 @@
|
||||
import {
|
||||
bindExternalStoreMessage,
|
||||
type ExportedMessageRepository,
|
||||
type ThreadMessage,
|
||||
} from "@assistant-ui/core";
|
||||
import {
|
||||
AuiIf,
|
||||
ThreadListItemMorePrimitive,
|
||||
ThreadListItemPrimitive,
|
||||
ThreadListPrimitive,
|
||||
} from "@assistant-ui/react";
|
||||
import type { UIMessage } from "ai";
|
||||
import {
|
||||
ArchiveIcon,
|
||||
HistoryIcon,
|
||||
MoreHorizontalIcon,
|
||||
PlusIcon,
|
||||
} from "lucide-react";
|
||||
import { type FC, useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useClawSessionReplay } from "@/lib/claw-session-replay";
|
||||
|
||||
type ClawSession = {
|
||||
session_id: string;
|
||||
turns: number;
|
||||
tool_calls: number;
|
||||
preview: string;
|
||||
modified_at: number;
|
||||
};
|
||||
|
||||
type ClawStoredMessage = {
|
||||
role?: string;
|
||||
content?: string;
|
||||
name?: string;
|
||||
tool_call_id?: string;
|
||||
tool_calls?: ClawStoredToolCall[];
|
||||
metadata?: {
|
||||
elapsed_ms?: unknown;
|
||||
};
|
||||
};
|
||||
|
||||
type ClawStoredSession = {
|
||||
session_id: string;
|
||||
messages?: ClawStoredMessage[];
|
||||
};
|
||||
|
||||
type ClawStoredToolCall = {
|
||||
id?: string;
|
||||
name?: string;
|
||||
arguments?: unknown;
|
||||
function?: {
|
||||
name?: string;
|
||||
arguments?: unknown;
|
||||
};
|
||||
};
|
||||
|
||||
export const ThreadList: FC = () => {
|
||||
return (
|
||||
<ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex flex-col gap-1">
|
||||
<ThreadListNew />
|
||||
<AuiIf condition={({ threads }) => threads.isLoading}>
|
||||
<ThreadListSkeleton />
|
||||
</AuiIf>
|
||||
<AuiIf condition={({ threads }) => !threads.isLoading}>
|
||||
<ThreadListPrimitive.Items>
|
||||
{() => <ThreadListItem />}
|
||||
</ThreadListPrimitive.Items>
|
||||
</AuiIf>
|
||||
<ClawSessionList />
|
||||
</ThreadListPrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
const ThreadListNew: FC = () => {
|
||||
return (
|
||||
<div
|
||||
onClickCapture={() => {
|
||||
window.localStorage.removeItem("claw.activeSessionId");
|
||||
window.dispatchEvent(new Event("claw-active-session-cleared"));
|
||||
}}
|
||||
>
|
||||
<ThreadListPrimitive.New asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="aui-thread-list-new h-9 w-full justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted data-active:bg-muted"
|
||||
>
|
||||
<PlusIcon className="size-4" />
|
||||
New Thread
|
||||
</Button>
|
||||
</ThreadListPrimitive.New>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ThreadListSkeleton: FC = () => {
|
||||
const skeletonKeys = ["one", "two", "three", "four", "five"];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
{skeletonKeys.map((key) => (
|
||||
<div
|
||||
key={key}
|
||||
role="status"
|
||||
aria-label="Loading threads"
|
||||
className="aui-thread-list-skeleton-wrapper flex h-9 items-center px-3"
|
||||
>
|
||||
<Skeleton className="aui-thread-list-skeleton h-4 w-full" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ThreadListItem: FC = () => {
|
||||
return (
|
||||
<ThreadListItemPrimitive.Root className="aui-thread-list-item group flex h-9 items-center gap-2 rounded-lg transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none data-active:bg-muted">
|
||||
<ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger flex h-full min-w-0 flex-1 items-center truncate px-3 text-start text-sm">
|
||||
<ThreadListItemPrimitive.Title fallback="New Chat" />
|
||||
</ThreadListItemPrimitive.Trigger>
|
||||
<ThreadListItemMore />
|
||||
</ThreadListItemPrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
const ThreadListItemMore: FC = () => {
|
||||
return (
|
||||
<ThreadListItemMorePrimitive.Root>
|
||||
<ThreadListItemMorePrimitive.Trigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="aui-thread-list-item-more mr-2 size-7 p-0 opacity-0 transition-opacity group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100 group-data-active:opacity-100"
|
||||
>
|
||||
<MoreHorizontalIcon className="size-4" />
|
||||
<span className="sr-only">More options</span>
|
||||
</Button>
|
||||
</ThreadListItemMorePrimitive.Trigger>
|
||||
<ThreadListItemMorePrimitive.Content
|
||||
side="bottom"
|
||||
align="start"
|
||||
className="aui-thread-list-item-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
|
||||
>
|
||||
<ThreadListItemPrimitive.Archive asChild>
|
||||
<ThreadListItemMorePrimitive.Item className="aui-thread-list-item-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
|
||||
<ArchiveIcon className="size-4" />
|
||||
Archive
|
||||
</ThreadListItemMorePrimitive.Item>
|
||||
</ThreadListItemPrimitive.Archive>
|
||||
</ThreadListItemMorePrimitive.Content>
|
||||
</ThreadListItemMorePrimitive.Root>
|
||||
);
|
||||
};
|
||||
|
||||
const ClawSessionList: FC = () => {
|
||||
const { replaySession } = useClawSessionReplay();
|
||||
const [sessions, setSessions] = useState<ClawSession[]>([]);
|
||||
const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
|
||||
const [loadingSessionId, setLoadingSessionId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveSessionId(window.localStorage.getItem("claw.activeSessionId"));
|
||||
const clearActiveSession = () => setActiveSessionId(null);
|
||||
window.addEventListener("claw-active-session-cleared", clearActiveSession);
|
||||
fetch("/api/claw/sessions")
|
||||
.then((res) => (res.ok ? res.json() : []))
|
||||
.then((payload) => {
|
||||
if (Array.isArray(payload))
|
||||
setSessions(dedupeSessions(payload).slice(0, 8));
|
||||
})
|
||||
.catch(() => setSessions([]));
|
||||
return () => {
|
||||
window.removeEventListener(
|
||||
"claw-active-session-cleared",
|
||||
clearActiveSession,
|
||||
);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!sessions.length) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-4 border-t pt-3">
|
||||
<div className="mb-2 flex items-center justify-between gap-2 px-3">
|
||||
<div className="flex items-center gap-2 font-medium text-muted-foreground text-xs">
|
||||
<HistoryIcon className="size-3.5" />
|
||||
Claw 历史会话
|
||||
</div>
|
||||
{activeSessionId ? (
|
||||
<button
|
||||
type="button"
|
||||
className="text-muted-foreground text-xs hover:text-foreground"
|
||||
onClick={() => {
|
||||
window.localStorage.removeItem("claw.activeSessionId");
|
||||
setActiveSessionId(null);
|
||||
}}
|
||||
>
|
||||
取消续接
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
{sessions.map((session) => {
|
||||
const active = activeSessionId === session.session_id;
|
||||
return (
|
||||
<button
|
||||
key={`claw-session-${session.session_id}-${session.modified_at}`}
|
||||
type="button"
|
||||
className="rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-muted data-[active=true]:bg-muted"
|
||||
data-active={active}
|
||||
onClick={async () => {
|
||||
window.localStorage.setItem(
|
||||
"claw.activeSessionId",
|
||||
session.session_id,
|
||||
);
|
||||
setActiveSessionId(session.session_id);
|
||||
setLoadingSessionId(session.session_id);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/claw/sessions/${session.session_id}`,
|
||||
);
|
||||
if (!response.ok) return;
|
||||
const payload = (await response.json()) as ClawStoredSession;
|
||||
replaySession(
|
||||
session.session_id,
|
||||
toReplayRepository(payload, session.session_id),
|
||||
);
|
||||
} finally {
|
||||
setLoadingSessionId(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="block truncate">
|
||||
{session.preview || session.session_id}
|
||||
</span>
|
||||
<span className="mt-0.5 block truncate text-muted-foreground text-xs">
|
||||
{active ? "下一条消息将续接此会话 · " : ""}
|
||||
{loadingSessionId === session.session_id ? "回放中 · " : ""}
|
||||
{session.turns} 轮 · {session.tool_calls} 次工具
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function dedupeSessions(payload: unknown[]) {
|
||||
const byId = new Map<string, ClawSession>();
|
||||
for (const item of payload) {
|
||||
if (!isClawSession(item)) continue;
|
||||
const previous = byId.get(item.session_id);
|
||||
if (!previous || item.modified_at >= previous.modified_at) {
|
||||
byId.set(item.session_id, item);
|
||||
}
|
||||
}
|
||||
return [...byId.values()].sort((a, b) => b.modified_at - a.modified_at);
|
||||
}
|
||||
|
||||
function isClawSession(value: unknown): value is ClawSession {
|
||||
if (!value || typeof value !== "object") return false;
|
||||
const item = value as Partial<ClawSession>;
|
||||
return (
|
||||
typeof item.session_id === "string" && typeof item.modified_at === "number"
|
||||
);
|
||||
}
|
||||
|
||||
function toReplayRepository(
|
||||
session: ClawStoredSession,
|
||||
fallbackSessionId: string,
|
||||
): ExportedMessageRepository {
|
||||
const messages: ExportedMessageRepository["messages"] = [];
|
||||
const toolResults = collectToolResults(session.messages ?? []);
|
||||
let previousId: string | null = null;
|
||||
for (const [index, message] of (session.messages ?? []).entries()) {
|
||||
if (message.role === "tool") continue;
|
||||
if (message.role !== "user" && message.role !== "assistant") continue;
|
||||
const content = cleanStoredContent(message.content ?? "");
|
||||
if (!content) continue;
|
||||
if (content.trimStart().startsWith("<system-reminder>")) continue;
|
||||
const id = `${fallbackSessionId}-${index}`;
|
||||
const toolParts =
|
||||
message.role === "assistant"
|
||||
? toToolParts(message.tool_calls ?? [], toolResults)
|
||||
: [];
|
||||
const elapsedMs =
|
||||
typeof message.metadata?.elapsed_ms === "number"
|
||||
? message.metadata.elapsed_ms
|
||||
: undefined;
|
||||
const reasoningParts =
|
||||
message.role === "assistant" &&
|
||||
(toolParts.length > 0 || elapsedMs !== undefined)
|
||||
? [
|
||||
{
|
||||
type: "reasoning",
|
||||
text: formatHistoricalReasoning(toolParts.length, elapsedMs),
|
||||
},
|
||||
]
|
||||
: [];
|
||||
const parts = (
|
||||
message.role === "assistant" &&
|
||||
(reasoningParts.length || toolParts.length)
|
||||
? [...reasoningParts, ...toolParts, { type: "text", text: content }]
|
||||
: [{ type: "text", text: content }]
|
||||
) as UIMessage["parts"];
|
||||
const uiMessage: UIMessage = {
|
||||
id,
|
||||
role: message.role,
|
||||
parts,
|
||||
...(message.role === "assistant"
|
||||
? { metadata: { sessionId: session.session_id ?? fallbackSessionId } }
|
||||
: {}),
|
||||
} as UIMessage;
|
||||
const threadMessage = {
|
||||
id,
|
||||
role: message.role,
|
||||
createdAt: new Date(),
|
||||
content: toThreadMessageContent(parts),
|
||||
...(message.role === "assistant"
|
||||
? {
|
||||
status: { type: "complete", reason: "stop" },
|
||||
metadata: {
|
||||
unstable_state: null,
|
||||
unstable_annotations: [],
|
||||
unstable_data: [],
|
||||
steps: [],
|
||||
custom: { sessionId: session.session_id ?? fallbackSessionId },
|
||||
},
|
||||
}
|
||||
: { metadata: { custom: {} } }),
|
||||
} as ThreadMessage;
|
||||
bindExternalStoreMessage(threadMessage, uiMessage);
|
||||
messages.push({ message: threadMessage, parentId: previousId });
|
||||
previousId = id;
|
||||
}
|
||||
return {
|
||||
headId: previousId,
|
||||
messages,
|
||||
};
|
||||
}
|
||||
|
||||
function cleanStoredContent(content: string) {
|
||||
const markers = ["\n\n[当前会话目录]", "\n[当前会话目录]"];
|
||||
for (const marker of markers) {
|
||||
if (content.includes(marker)) return content.split(marker, 1)[0].trim();
|
||||
}
|
||||
return content.trim();
|
||||
}
|
||||
|
||||
function collectToolResults(messages: readonly ClawStoredMessage[]) {
|
||||
const results = new Map<string, string>();
|
||||
for (const message of messages) {
|
||||
if (message.role === "tool" && message.tool_call_id) {
|
||||
results.set(message.tool_call_id, message.content ?? "");
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
function toToolParts(
|
||||
toolCalls: readonly ClawStoredToolCall[],
|
||||
toolResults: Map<string, string>,
|
||||
) {
|
||||
return toolCalls.flatMap((call) => {
|
||||
const toolCallId = call.id;
|
||||
const toolName = call.function?.name ?? call.name;
|
||||
if (!toolCallId || !toolName) return [];
|
||||
const input = parseToolInput(call.function?.arguments ?? call.arguments);
|
||||
const output = toolResults.get(toolCallId);
|
||||
return [
|
||||
{
|
||||
type: "dynamic-tool",
|
||||
toolName,
|
||||
toolCallId,
|
||||
state: output === undefined ? "input-available" : "output-available",
|
||||
input,
|
||||
...(output === undefined ? {} : { output }),
|
||||
},
|
||||
];
|
||||
});
|
||||
}
|
||||
|
||||
function formatHistoricalReasoning(toolCount: number, elapsedMs?: number) {
|
||||
const duration =
|
||||
elapsedMs === undefined ? "" : `，用时 ${formatDuration(elapsedMs)}`;
|
||||
if (toolCount <= 0) return `历史记录：思考完成${duration}。`;
|
||||
return `历史记录：本轮调用了 ${toolCount} 个工具${duration}。`;
|
||||
}
|
||||
|
||||
function formatDuration(ms: number) {
|
||||
if (ms < 1000) return `${ms}ms`;
|
||||
return `${(ms / 1000).toFixed(1)}s`;
|
||||
}
|
||||
|
||||
function toThreadMessageContent(parts: UIMessage["parts"]) {
|
||||
return parts.map((part) => {
|
||||
if (part.type === "text" || part.type === "reasoning") return part;
|
||||
if (part.type === "dynamic-tool") {
|
||||
return {
|
||||
type: "tool-call",
|
||||
toolName: part.toolName,
|
||||
toolCallId: part.toolCallId,
|
||||
args: part.input ?? {},
|
||||
argsText: JSON.stringify(part.input ?? {}),
|
||||
...(part.state === "output-available" ? { result: part.output } : {}),
|
||||
};
|
||||
}
|
||||
return part;
|
||||
});
|
||||
}
|
||||
|
||||
function parseToolInput(value: unknown) {
|
||||
if (typeof value !== "string") return value ?? {};
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,341 @@
|
||||
import {
|
||||
BarChart3Icon,
|
||||
BotIcon,
|
||||
ChevronDownIcon,
|
||||
LogOutIcon,
|
||||
UserIcon,
|
||||
} from "lucide-react";
|
||||
import { Popover as PopoverPrimitive } from "radix-ui";
|
||||
import type * as React from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { ClawAccount } from "@/app/claw-account-gate";
|
||||
import { ThreadList } from "@/components/assistant-ui/thread-list";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarRail,
|
||||
} from "@/components/ui/sidebar";
|
||||
|
||||
type ThreadListSidebarProps = React.ComponentProps<typeof Sidebar> & {
|
||||
account: ClawAccount;
|
||||
onLogout: () => void;
|
||||
};
|
||||
|
||||
type ClawState = {
|
||||
model?: string;
|
||||
session_directory?: string;
|
||||
active_session_id?: string | null;
|
||||
};
|
||||
|
||||
type ClawSessionSummary = {
|
||||
session_id: string;
|
||||
turns: number;
|
||||
tool_calls: number;
|
||||
modified_at: number;
|
||||
model?: string;
|
||||
usage?: UsageSummary;
|
||||
};
|
||||
|
||||
type UsageSummary = {
|
||||
input_tokens?: number;
|
||||
output_tokens?: number;
|
||||
total_tokens?: number;
|
||||
};
|
||||
|
||||
type ClawStoredSession = {
|
||||
session_id: string;
|
||||
usage?: UsageSummary;
|
||||
tool_calls?: number;
|
||||
turns?: number;
|
||||
model?: string;
|
||||
};
|
||||
|
||||
export function ThreadListSidebar({
|
||||
account,
|
||||
onLogout,
|
||||
...props
|
||||
}: ThreadListSidebarProps) {
|
||||
return (
|
||||
<Sidebar {...props}>
|
||||
<SidebarHeader className="aui-sidebar-header mb-2 border-b">
|
||||
<div className="aui-sidebar-header-content flex items-center justify-between">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg">
|
||||
<div className="aui-sidebar-header-icon-wrapper flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
||||
<BotIcon className="aui-sidebar-header-icon size-4" />
|
||||
</div>
|
||||
<div className="aui-sidebar-header-heading mr-6 flex flex-col gap-0.5 leading-none">
|
||||
<span className="aui-sidebar-header-title font-semibold">
|
||||
Claw Data Agent
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
数据开发工作台
|
||||
</span>
|
||||
</div>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
<SidebarContent className="aui-sidebar-content px-2">
|
||||
<ThreadList />
|
||||
</SidebarContent>
|
||||
<SidebarRail />
|
||||
<SidebarFooter className="aui-sidebar-footer border-t">
|
||||
<AccountMenu account={account} onLogout={onLogout} />
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
function AccountMenu({
|
||||
account,
|
||||
onLogout,
|
||||
}: {
|
||||
account: ClawAccount;
|
||||
onLogout: () => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [state, setState] = useState<ClawState | null>(null);
|
||||
const [sessions, setSessions] = useState<ClawSessionSummary[]>([]);
|
||||
const [activeSession, setActiveSession] = useState<ClawStoredSession | null>(
|
||||
null,
|
||||
);
|
||||
const [modelUsageOpen, setModelUsageOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
Promise.all([
|
||||
fetch("/api/claw/state", { cache: "no-store" }).then((res) =>
|
||||
res.ok ? res.json() : null,
|
||||
),
|
||||
fetch("/api/claw/sessions", { cache: "no-store" }).then((res) =>
|
||||
res.ok ? res.json() : [],
|
||||
),
|
||||
])
|
||||
.then(async ([statePayload, sessionsPayload]) => {
|
||||
const nextState = statePayload as ClawState | null;
|
||||
const nextSessions = Array.isArray(sessionsPayload)
|
||||
? (sessionsPayload as ClawSessionSummary[])
|
||||
: [];
|
||||
setState(nextState);
|
||||
setSessions(nextSessions);
|
||||
const activeSessionId =
|
||||
window.localStorage.getItem("claw.activeSessionId") ??
|
||||
nextState?.active_session_id;
|
||||
if (!activeSessionId) {
|
||||
setActiveSession(null);
|
||||
return;
|
||||
}
|
||||
const response = await fetch(`/api/claw/sessions/${activeSessionId}`, {
|
||||
cache: "no-store",
|
||||
});
|
||||
setActiveSession(response.ok ? await response.json() : null);
|
||||
})
|
||||
.catch(() => {
|
||||
setState(null);
|
||||
setSessions([]);
|
||||
setActiveSession(null);
|
||||
});
|
||||
}, [open]);
|
||||
|
||||
async function logout() {
|
||||
await fetch("/api/claw/auth/logout", { method: "POST" });
|
||||
window.localStorage.removeItem("claw.activeSessionId");
|
||||
onLogout();
|
||||
}
|
||||
|
||||
const totalToolCalls = sessions.reduce(
|
||||
(sum, session) => sum + (session.tool_calls ?? 0),
|
||||
0,
|
||||
);
|
||||
const modelUsage = aggregateUsageByModel(sessions);
|
||||
const modelUsageTotalTokens = modelUsage.reduce(
|
||||
(sum, item) => sum + item.totalTokens,
|
||||
0,
|
||||
);
|
||||
|
||||
return (
|
||||
<PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
|
||||
<PopoverPrimitive.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left transition-colors hover:bg-sidebar-accent"
|
||||
>
|
||||
<div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
||||
<UserIcon className="size-4" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate font-medium text-sm">
|
||||
{account.username}
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">账号与统计</div>
|
||||
</div>
|
||||
</button>
|
||||
</PopoverPrimitive.Trigger>
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
side="top"
|
||||
align="start"
|
||||
sideOffset={8}
|
||||
className="z-50 w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none"
|
||||
>
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<div className="flex size-9 items-center justify-center rounded-lg bg-primary text-primary-foreground">
|
||||
<UserIcon className="size-4" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate font-medium">{account.username}</div>
|
||||
<div className="truncate text-muted-foreground text-xs">
|
||||
{state?.model ?? "模型配置读取中"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<AccountStat label="会话" value={sessions.length} />
|
||||
<AccountStat label="工具" value={totalToolCalls} />
|
||||
<AccountStat
|
||||
label="Token"
|
||||
value={activeSession?.usage?.total_tokens ?? "暂无"}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 rounded-md border bg-muted/30 p-2 text-xs">
|
||||
<div className="mb-1 flex items-center gap-1.5 font-medium">
|
||||
<BarChart3Icon className="size-3.5" />
|
||||
当前会话
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-3 gap-y-1 text-muted-foreground">
|
||||
<span>输入 token</span>
|
||||
<span className="text-right">
|
||||
{activeSession?.usage?.input_tokens ?? "暂无"}
|
||||
</span>
|
||||
<span>输出 token</span>
|
||||
<span className="text-right">
|
||||
{activeSession?.usage?.output_tokens ?? "暂无"}
|
||||
</span>
|
||||
<span>工具调用</span>
|
||||
<span className="text-right">
|
||||
{activeSession?.tool_calls ?? "暂无"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 rounded-md border bg-muted/30 p-2 text-xs">
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between gap-2 text-left"
|
||||
onClick={() => setModelUsageOpen((value) => !value)}
|
||||
>
|
||||
<span className="font-medium">按模型统计</span>
|
||||
<span className="flex items-center gap-1 text-muted-foreground">
|
||||
{modelUsage.length
|
||||
? `${modelUsage.length} 个模型 · ${formatCompactNumber(modelUsageTotalTokens)} tokens`
|
||||
: "暂无"}
|
||||
<ChevronDownIcon
|
||||
className={`size-3.5 transition-transform ${
|
||||
modelUsageOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
{modelUsageOpen && modelUsage.length ? (
|
||||
<div className="mt-2 flex max-h-48 flex-col gap-2 overflow-y-auto pr-1">
|
||||
{modelUsage.map((item) => (
|
||||
<div
|
||||
key={item.model}
|
||||
className="grid grid-cols-[1fr_auto] gap-2"
|
||||
>
|
||||
<span className="truncate text-muted-foreground">
|
||||
{item.model}
|
||||
</span>
|
||||
<span>{formatCompactNumber(item.totalTokens)} tokens</span>
|
||||
<span className="text-muted-foreground">
|
||||
{item.sessions} 会话 · {item.toolCalls} 工具
|
||||
</span>
|
||||
<span className="text-right text-muted-foreground">
|
||||
in {formatCompactNumber(item.inputTokens)} / out{" "}
|
||||
{formatCompactNumber(item.outputTokens)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{modelUsageOpen && !modelUsage.length ? (
|
||||
<div className="text-muted-foreground">暂无可统计会话</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="mt-3 w-full justify-start gap-2 text-muted-foreground"
|
||||
onClick={logout}
|
||||
>
|
||||
<LogOutIcon className="size-4" />
|
||||
退出登录
|
||||
</Button>
|
||||
</PopoverPrimitive.Content>
|
||||
</PopoverPrimitive.Portal>
|
||||
</PopoverPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
function aggregateUsageByModel(sessions: ClawSessionSummary[]) {
|
||||
const byModel = new Map<
|
||||
string,
|
||||
{
|
||||
model: string;
|
||||
sessions: number;
|
||||
toolCalls: number;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
totalTokens: number;
|
||||
}
|
||||
>();
|
||||
for (const session of sessions) {
|
||||
const model = session.model || "unknown";
|
||||
const current = byModel.get(model) ?? {
|
||||
model,
|
||||
sessions: 0,
|
||||
toolCalls: 0,
|
||||
inputTokens: 0,
|
||||
outputTokens: 0,
|
||||
totalTokens: 0,
|
||||
};
|
||||
current.sessions += 1;
|
||||
current.toolCalls += session.tool_calls ?? 0;
|
||||
current.inputTokens += session.usage?.input_tokens ?? 0;
|
||||
current.outputTokens += session.usage?.output_tokens ?? 0;
|
||||
current.totalTokens +=
|
||||
session.usage?.total_tokens ??
|
||||
(session.usage?.input_tokens ?? 0) + (session.usage?.output_tokens ?? 0);
|
||||
byModel.set(model, current);
|
||||
}
|
||||
return [...byModel.values()].sort((a, b) => b.totalTokens - a.totalTokens);
|
||||
}
|
||||
|
||||
function formatCompactNumber(value: number) {
|
||||
return new Intl.NumberFormat("en", {
|
||||
notation: "compact",
|
||||
maximumFractionDigits: 1,
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
function AccountStat({
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
label: string;
|
||||
value: string | number;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-md border bg-muted/30 px-2 py-1.5">
|
||||
<div className="font-medium text-sm">{value}</div>
|
||||
<div className="text-muted-foreground text-xs">{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
type ToolCallMessagePartComponent,
|
||||
type ToolCallMessagePartStatus,
|
||||
useScrollLock,
|
||||
} from "@assistant-ui/react";
|
||||
import {
|
||||
AlertCircleIcon,
|
||||
CheckIcon,
|
||||
ChevronDownIcon,
|
||||
LoaderIcon,
|
||||
XCircleIcon,
|
||||
} from "lucide-react";
|
||||
import { memo, useCallback, useRef, useState } from "react";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const ANIMATION_DURATION = 200;
|
||||
|
||||
export type ToolFallbackRootProps = Omit<
|
||||
React.ComponentProps<typeof Collapsible>,
|
||||
"open" | "onOpenChange"
|
||||
> & {
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
defaultOpen?: boolean;
|
||||
};
|
||||
|
||||
function ToolFallbackRoot({
|
||||
className,
|
||||
open: controlledOpen,
|
||||
onOpenChange: controlledOnOpenChange,
|
||||
defaultOpen = false,
|
||||
children,
|
||||
...props
|
||||
}: ToolFallbackRootProps) {
|
||||
const collapsibleRef = useRef<HTMLDivElement>(null);
|
||||
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
|
||||
const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);
|
||||
|
||||
const isControlled = controlledOpen !== undefined;
|
||||
const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
|
||||
|
||||
const handleOpenChange = useCallback(
|
||||
(open: boolean) => {
|
||||
if (!open) {
|
||||
lockScroll();
|
||||
}
|
||||
if (!isControlled) {
|
||||
setUncontrolledOpen(open);
|
||||
}
|
||||
controlledOnOpenChange?.(open);
|
||||
},
|
||||
[lockScroll, isControlled, controlledOnOpenChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
ref={collapsibleRef}
|
||||
data-slot="tool-fallback-root"
|
||||
open={isOpen}
|
||||
onOpenChange={handleOpenChange}
|
||||
className={cn(
|
||||
"aui-tool-fallback-root group/tool-fallback-root w-full rounded-lg border py-3",
|
||||
className,
|
||||
)}
|
||||
style={
|
||||
{
|
||||
"--animation-duration": `${ANIMATION_DURATION}ms`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
type ToolStatus = ToolCallMessagePartStatus["type"];
|
||||
|
||||
const statusIconMap: Record<ToolStatus, React.ElementType> = {
|
||||
running: LoaderIcon,
|
||||
complete: CheckIcon,
|
||||
incomplete: XCircleIcon,
|
||||
"requires-action": AlertCircleIcon,
|
||||
};
|
||||
|
||||
function ToolFallbackTrigger({
|
||||
toolName,
|
||||
status,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsibleTrigger> & {
|
||||
toolName: string;
|
||||
status?: ToolCallMessagePartStatus;
|
||||
}) {
|
||||
const statusType = status?.type ?? "complete";
|
||||
const isRunning = statusType === "running";
|
||||
const isCancelled =
|
||||
status?.type === "incomplete" && status.reason === "cancelled";
|
||||
|
||||
const Icon = statusIconMap[statusType];
|
||||
const label = isCancelled ? "Cancelled tool" : "Used tool";
|
||||
|
||||
return (
|
||||
<CollapsibleTrigger
|
||||
data-slot="tool-fallback-trigger"
|
||||
className={cn(
|
||||
"aui-tool-fallback-trigger group/trigger flex w-full items-center gap-2 px-4 text-sm transition-colors",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<Icon
|
||||
data-slot="tool-fallback-trigger-icon"
|
||||
className={cn(
|
||||
"aui-tool-fallback-trigger-icon size-4 shrink-0",
|
||||
isCancelled && "text-muted-foreground",
|
||||
isRunning && "animate-spin",
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
data-slot="tool-fallback-trigger-label"
|
||||
className={cn(
|
||||
"aui-tool-fallback-trigger-label-wrapper relative inline-block grow text-left leading-none",
|
||||
isCancelled && "text-muted-foreground line-through",
|
||||
)}
|
||||
>
|
||||
<span>
|
||||
{label}: <b>{toolName}</b>
|
||||
</span>
|
||||
{isRunning && (
|
||||
<span
|
||||
aria-hidden
|
||||
data-slot="tool-fallback-trigger-shimmer"
|
||||
className="aui-tool-fallback-trigger-shimmer shimmer pointer-events-none absolute inset-0 motion-reduce:animate-none"
|
||||
>
|
||||
{label}: <b>{toolName}</b>
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
data-slot="tool-fallback-trigger-chevron"
|
||||
className={cn(
|
||||
"aui-tool-fallback-trigger-chevron size-4 shrink-0",
|
||||
"transition-transform duration-(--animation-duration) ease-out",
|
||||
"group-data-[state=closed]/trigger:-rotate-90",
|
||||
"group-data-[state=open]/trigger:rotate-0",
|
||||
)}
|
||||
/>
|
||||
</CollapsibleTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolFallbackContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CollapsibleContent>) {
|
||||
return (
|
||||
<CollapsibleContent
|
||||
data-slot="tool-fallback-content"
|
||||
className={cn(
|
||||
"aui-tool-fallback-content relative overflow-hidden text-sm outline-none",
|
||||
"group/collapsible-content ease-out",
|
||||
"data-[state=closed]:animate-collapsible-up",
|
||||
"data-[state=open]:animate-collapsible-down",
|
||||
"data-[state=closed]:fill-mode-forwards",
|
||||
"data-[state=closed]:pointer-events-none",
|
||||
"data-[state=open]:duration-(--animation-duration)",
|
||||
"data-[state=closed]:duration-(--animation-duration)",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="mt-3 flex flex-col gap-2 border-t pt-2">{children}</div>
|
||||
</CollapsibleContent>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolFallbackArgs({
|
||||
argsText,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
argsText?: string;
|
||||
}) {
|
||||
if (!argsText) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="tool-fallback-args"
|
||||
className={cn("aui-tool-fallback-args px-4", className)}
|
||||
{...props}
|
||||
>
|
||||
<pre className="aui-tool-fallback-args-value whitespace-pre-wrap">
|
||||
{argsText}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolFallbackResult({
|
||||
result,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
result?: unknown;
|
||||
}) {
|
||||
if (result === undefined) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="tool-fallback-result"
|
||||
className={cn(
|
||||
"aui-tool-fallback-result border-t border-dashed px-4 pt-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<p className="aui-tool-fallback-result-header font-semibold">Result:</p>
|
||||
<pre className="aui-tool-fallback-result-content whitespace-pre-wrap">
|
||||
{typeof result === "string" ? result : JSON.stringify(result, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolFallbackError({
|
||||
status,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
status?: ToolCallMessagePartStatus;
|
||||
}) {
|
||||
if (status?.type !== "incomplete") return null;
|
||||
|
||||
const error = status.error;
|
||||
const errorText = error
|
||||
? typeof error === "string"
|
||||
? error
|
||||
: JSON.stringify(error)
|
||||
: null;
|
||||
|
||||
if (!errorText) return null;
|
||||
|
||||
const isCancelled = status.reason === "cancelled";
|
||||
const headerText = isCancelled ? "Cancelled reason:" : "Error:";
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="tool-fallback-error"
|
||||
className={cn("aui-tool-fallback-error px-4", className)}
|
||||
{...props}
|
||||
>
|
||||
<p className="aui-tool-fallback-error-header font-semibold text-muted-foreground">
|
||||
{headerText}
|
||||
</p>
|
||||
<p className="aui-tool-fallback-error-reason text-muted-foreground">
|
||||
{errorText}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ToolFallbackImpl: ToolCallMessagePartComponent = ({
|
||||
toolName,
|
||||
argsText,
|
||||
result,
|
||||
status,
|
||||
}) => {
|
||||
const isCancelled =
|
||||
status?.type === "incomplete" && status.reason === "cancelled";
|
||||
|
||||
return (
|
||||
<ToolFallbackRoot
|
||||
className={cn(isCancelled && "border-muted-foreground/30 bg-muted/30")}
|
||||
>
|
||||
<ToolFallbackTrigger toolName={toolName} status={status} />
|
||||
<ToolFallbackContent>
|
||||
<ToolFallbackError status={status} />
|
||||
<ToolFallbackArgs
|
||||
argsText={argsText}
|
||||
className={cn(isCancelled && "opacity-60")}
|
||||
/>
|
||||
{!isCancelled && <ToolFallbackResult result={result} />}
|
||||
</ToolFallbackContent>
|
||||
</ToolFallbackRoot>
|
||||
);
|
||||
};
|
||||
|
||||
const ToolFallback = memo(
|
||||
ToolFallbackImpl,
|
||||
) as unknown as ToolCallMessagePartComponent & {
|
||||
Root: typeof ToolFallbackRoot;
|
||||
Trigger: typeof ToolFallbackTrigger;
|
||||
Content: typeof ToolFallbackContent;
|
||||
Args: typeof ToolFallbackArgs;
|
||||
Result: typeof ToolFallbackResult;
|
||||
Error: typeof ToolFallbackError;
|
||||
};
|
||||
|
||||
ToolFallback.displayName = "ToolFallback";
|
||||
ToolFallback.Root = ToolFallbackRoot;
|
||||
ToolFallback.Trigger = ToolFallbackTrigger;
|
||||
ToolFallback.Content = ToolFallbackContent;
|
||||
ToolFallback.Args = ToolFallbackArgs;
|
||||
ToolFallback.Result = ToolFallbackResult;
|
||||
ToolFallback.Error = ToolFallbackError;
|
||||
|
||||
export {
|
||||
ToolFallback,
|
||||
ToolFallbackArgs,
|
||||
ToolFallbackContent,
|
||||
ToolFallbackError,
|
||||
ToolFallbackResult,
|
||||
ToolFallbackRoot,
|
||||
ToolFallbackTrigger,
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { Slot } from "radix-ui";
|
||||
import { type ComponentPropsWithRef, forwardRef } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
|
||||
tooltip: string;
|
||||
side?: "top" | "bottom" | "left" | "right";
|
||||
};
|
||||
|
||||
export const TooltipIconButton = forwardRef<
|
||||
HTMLButtonElement,
|
||||
TooltipIconButtonProps
|
||||
>(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
{...rest}
|
||||
className={cn("aui-button-icon size-6 p-1", className)}
|
||||
ref={ref}
|
||||
>
|
||||
<Slot.Slottable>{children}</Slot.Slottable>
|
||||
<span className="aui-sr-only sr-only">{tooltip}</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side={side}>{tooltip}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
|
||||
TooltipIconButton.displayName = "TooltipIconButton";
|
||||
Reference in New Issue
Block a user