@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/lib/blocks/message/MessageStream.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useRef, useState, } from "react";
+import { ArrowDown } from "lucide-react";
+import { Button } from "../../primitives/Button";
+import { keyMessageParts } from "../../domain/message-blocks";
+import { PermissionCard } from "../cards/PermissionCard";
+import { DayDivider, dayDividerFor } from "./DayDivider";
+import { MessageRow } from "./MessageRow";
+import { PartView } from "./PartView";
+const NEAR_BOTTOM_PX = 80;
+function SystemRow({ message }) {
+    const keyed = keyMessageParts(message);
+    if (keyed.length === 0) {
+        return (_jsx("div", { className: "ac-stream__divider", "data-cmp": "ac/divider", children: message.text }));
+    }
+    return (_jsx("div", { className: "ac-notes", children: keyed.map(({ key, part }) => (_jsx(PartView, { part: part }, key))) }));
+}
+export function MessageStream({ messages, members, status, onOpenAgent, permissions = [], onRespondPermission, selectMode = false, selectedIds, onToggleSelect, messageActions, messageArtifacts, }) {
+    const viewportRef = useRef(null);
+    const countRef = useRef(messages.length);
+    const pinnedRef = useRef(true);
+    const [atBottom, setAtBottom] = useState(true);
+    const agentById = {};
+    for (const a of members)
+        agentById[a.id] = a;
+    const scrollToBottom = useCallback(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+        pinnedRef.current = true;
+        setAtBottom(true);
+    }, []);
+    useEffect(() => {
+        if (messages.length !== countRef.current) {
+            countRef.current = messages.length;
+            const el = viewportRef.current;
+            if (el)
+                el.scrollTop = el.scrollHeight;
+            pinnedRef.current = true;
+        }
+    });
+    useEffect(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const near = el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_PX;
+            pinnedRef.current = near;
+            setAtBottom((prev) => (prev === near ? prev : near));
+        };
+        measure();
+        el.addEventListener("scroll", measure, { passive: true });
+        return () => el.removeEventListener("scroll", measure);
+    }, []);
+    useEffect(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(() => {
+            if (pinnedRef.current)
+                el.scrollTop = el.scrollHeight;
+        });
+        for (const child of Array.from(el.children))
+            ro.observe(child);
+        return () => ro.disconnect();
+    });
+    return (_jsxs("div", { className: "ac-stream-wrap", children: [_jsxs("div", { className: "ac-stream-viewport", children: [_jsx("div", { ref: viewportRef, className: "ac-stream", "data-cmp": "ac/stream", "data-id": "message-stream", "data-state": status, "data-select-mode": selectMode ? "true" : "false", role: "log", "aria-label": "\u6D88\u606F\u6D41", "aria-live": "polite", children: messages.map((message, i) => {
+                            const label = dayDividerFor(messages[i - 1], message);
+                            return (_jsxs(Fragment, { children: [label ? _jsx(DayDivider, { label: label }) : null, message.role === "system" ? (_jsx(SystemRow, { message: message })) : (_jsx(MessageRow, { message: message, agentById: agentById, onOpenAgent: onOpenAgent, selectMode: selectMode, selected: selectedIds?.has(message.id) ?? false, onToggleSelect: onToggleSelect, actions: messageActions?.(message), artifacts: messageArtifacts?.(message)?.items, artifactTotal: messageArtifacts?.(message)?.total, onOpenArtifact: messageArtifacts?.(message)?.onOpen, onOpenAllArtifacts: messageArtifacts?.(message)?.onOpenAll }))] }, message.id));
+                        }) }), !atBottom ? (_jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "\u6EDA\u52A8\u5230\u6700\u65B0\u6D88\u606F", "data-cmp": "ac/scroll-bottom", "data-state": "visible", className: "ac-scroll-bottom", onClick: scrollToBottom, children: _jsx(ArrowDown, {}) })) : null] }), permissions.length > 0 ? (_jsx("div", { className: "ac-perm-dock", "data-cmp": "ac/permission-dock", "data-count": permissions.length, children: permissions.map((permission, index) => (_jsx(PermissionCard, { tool: permission.tool, reason: permission.reason, detail: permission.detail, risk: permission.risk, agent: permission.agentId
+                        ? (agentById[permission.agentId] ?? { id: permission.agentId })
+                        : undefined, queue: { index: index + 1, total: permissions.length }, onApproveRest: onRespondPermission
+                        ? () => {
+                            for (const rest of permissions.slice(1)) {
+                                onRespondPermission(rest.permissionId, true, false);
+                            }
+                        }
+                        : undefined, onRespond: (approved, remembered) => onRespondPermission?.(permission.permissionId, approved, remembered) }, permission.permissionId))) })) : null] }));
+}

package/lib/blocks/message/MessageTrace.d.ts

@@ -0,0 +1,16 @@
+import type { Agent } from "../../types/agent";
+import type { ChatMessage } from "../../types/message";
+export interface TraceToolCall {
+    id: string;
+    name: string;
+    args?: unknown;
+}
+export declare function traceToolCalls(message: ChatMessage): TraceToolCall[];
+export interface MessageTraceProps {
+    messageId: string | null;
+    onClose: () => void;
+    findMessage: (id: string) => ChatMessage | undefined;
+    findAgent?: (id: string) => Agent | undefined;
+    onNotice?: (message: string) => void;
+}
+export declare function MessageTrace({ messageId, onClose, findMessage, findAgent, onNotice, }: MessageTraceProps): import("react").JSX.Element;

package/lib/blocks/message/MessageTrace.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../primitives/Button";
+import { Dialog } from "../../primitives/Dialog";
+import { writeClipboard } from "../../utils/clipboard";
+const MISSING = "—";
+export function traceToolCalls(message) {
+    if (message.toolCalls && message.toolCalls.length > 0) {
+        return message.toolCalls.map((tc) => ({
+            id: tc.id,
+            name: tc.name,
+            args: tc.args,
+        }));
+    }
+    return (message.parts ?? [])
+        .filter((p) => p.kind === "tool" && typeof p.toolCallId === "string" && p.toolCallId.length > 0)
+        .map((p) => ({ id: p.toolCallId, name: p.tool, args: p.args }));
+}
+function Row({ label, children }) {
+    return (_jsxs("div", { className: "ac-trace__row flex items-start gap-3 py-1", "data-role": "row", children: [_jsx("span", { className: "ac-trace__label w-24 shrink-0 text-meta text-muted-foreground", children: label }), _jsx("div", { className: "ac-trace__value min-w-0 flex-1 text-meta text-foreground", children: children })] }));
+}
+export function MessageTrace({ messageId, onClose, findMessage, findAgent, onNotice, }) {
+    const message = messageId ? findMessage(messageId) : undefined;
+    const agent = message?.agentId ? findAgent?.(message.agentId) : undefined;
+    const toolCalls = message ? traceToolCalls(message) : [];
+    const traceId = message?.sourceId ?? message?.id ?? MISSING;
+    const isLocal = !message?.sourceId;
+    return (_jsx(Dialog, { open: messageId != null, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, title: "\u6D88\u606F\u6EAF\u6E90", description: "\u4EE5\u4E0B\u4FE1\u606F\u5168\u90E8\u53D6\u81EA\u6D88\u606F\u672C\u4F53\u4E0E\u4E8B\u4EF6\u65E5\u5FD7\uFF0C\u7F3A\u7701\u5B57\u6BB5\u5982\u5B9E\u5C55\u793A\u3002", className: "ac-dialog ac-dialog--trace ac-trace", children: message == null ? (_jsx("p", { className: "ac-trace__missing mt-3 text-meta text-muted-foreground", children: "\u6D88\u606F\u4E0D\u5B58\u5728\u6216\u5DF2\u88AB\u5220\u9664\u3002" })) : (_jsxs("div", { className: "ac-trace__rows mt-3", children: [_jsx(Row, { label: "\u89D2\u8272", children: message.role }), _jsx(Row, { label: "\u5F52\u5C5E Agent", children: message.agentId
+                        ? (agent?.name ?? message.agentId)
+                        : (agent?.name ?? MISSING) }), _jsx(Row, { label: "request_id", children: message.requestId ?? MISSING }), _jsx(Row, { label: "\u5DE5\u5177\u8C03\u7528", children: toolCalls.length === 0 ? (MISSING) : (_jsx("ul", { className: "ac-trace__tools space-y-1", children: toolCalls.map((call) => (_jsxs("li", { className: "ac-trace__tool", children: [_jsx("code", { className: "font-mono", children: call.name }), " ", _jsx("span", { className: "ac-trace__tool-id text-micro text-muted-foreground", children: call.id }), call.args !== undefined ? (_jsx("pre", { className: "ac-trace__args mt-0.5 overflow-x-auto font-mono text-micro text-muted-foreground", children: JSON.stringify(call.args) })) : null] }, call.id))) })) }), _jsx(Row, { label: "\u521B\u5EFA\u65F6\u95F4", children: message.createdAt ?? (message.timeLabel || MISSING) }), _jsx(Row, { label: "\u6D88\u606F id", children: _jsxs("span", { className: "ac-trace__id inline-flex items-center gap-2", children: [_jsx("code", { className: "font-mono", children: traceId }), isLocal ? _jsx("span", { className: "text-micro", children: "\uFF08\u672C\u5730\uFF09" }) : null, _jsx(Button, { variant: "outline", size: "sm", className: "ac-trace__copy", onClick: () => {
+                                    void writeClipboard(traceId).then((ok) => {
+                                        if (!ok) {
+                                            onNotice?.("复制失败：无法写入剪贴板，请手动选中复制");
+                                        }
+                                    });
+                                }, children: "\u590D\u5236" })] }) })] })) }));
+}

package/lib/blocks/message/PartView.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { MessagePart } from "../../types/message";
+export interface PartViewProps {
+    part: MessagePart;
+    labelOf?: (tool: string) => string;
+    renderDisplay?: (part: Extract<MessagePart, {
+        kind: "display";
+    }>) => ReactNode;
+}
+export declare function PartView({ part, labelOf, renderDisplay }: PartViewProps): import("react").JSX.Element;

package/lib/blocks/message/PartView.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toolLabel } from "../../adapters/labels";
+import { ToolCard } from "../tool/ToolCard";
+import { SandboxCard } from "../tool/SandboxCard";
+import { CompactionCard } from "../cards/CompactionCard";
+import { MemoryPill } from "../cards/MemoryPill";
+import { DisplayCard } from "../cards/DisplayCard";
+import { OutputCard } from "../cards/OutputCard";
+import { ReasoningBlock } from "../reasoning/ReasoningBlock";
+export function PartView({ part, labelOf, renderDisplay }) {
+    const label = labelOf ?? toolLabel;
+    switch (part.kind) {
+        case "tool":
+            return (_jsx(ToolCard, { name: label(part.tool), state: part.state, args: part.args, result: part.result }));
+        case "sandbox":
+            return _jsx(SandboxCard, { part: part });
+        case "compact":
+            return _jsx(CompactionCard, { part: part });
+        case "memory":
+            return _jsx(MemoryPill, { part: part });
+        case "display":
+            return _jsx(DisplayCard, { part: part, renderDisplay: renderDisplay });
+        case "output":
+            return _jsx(OutputCard, { part: part });
+        case "reasoning":
+        default:
+            return (_jsx(ReasoningBlock, { text: part.kind === "reasoning" ? part.text : "", streaming: part.kind === "reasoning" ? part.streaming : false, defaultOpen: part.kind === "reasoning" ? part.streaming : false }));
+    }
+}

package/lib/blocks/message/code-text.d.ts

@@ -0,0 +1,15 @@
+export interface HastElement {
+    type: "element";
+    tagName: string;
+    properties?: Record<string, unknown>;
+    children?: HastNode[];
+}
+export interface HastText {
+    type: "text";
+    value: string;
+}
+export type HastNode = HastElement | HastText | {
+    type: string;
+    children?: HastNode[];
+};
+export declare function collectCodeText(node: HastNode | undefined): string;

package/lib/blocks/message/code-text.js

@@ -0,0 +1,17 @@
+export function collectCodeText(node) {
+    if (!node)
+        return "";
+    if (node.type === "text")
+        return node.value;
+    const children = node.children;
+    if (!Array.isArray(children))
+        return "";
+    let out = "";
+    for (const child of children) {
+        if (child.type === "text")
+            out += child.value;
+        else if (child.type === "element")
+            out += collectCodeText(child);
+    }
+    return out;
+}

package/lib/blocks/message/index.d.ts

@@ -0,0 +1,12 @@
+export { Message, MessageContent, MessageResponse, type MessageProps, type MessageResponseProps, type MessageRole, } from "./Message";
+export { MessageBubble, type MessageBubbleProps } from "./MessageBubble";
+export { MessageRow, type MessageRowProps } from "./MessageRow";
+export { MessageStream, type MessageStreamProps } from "./MessageStream";
+export { MessageAttachments, type MessageAttachmentsProps, } from "./MessageAttachments";
+export { MessageTrace, traceToolCalls, type MessageTraceProps, type TraceToolCall, } from "./MessageTrace";
+export { PartView, type PartViewProps } from "./PartView";
+export { MessageActionBar, type MessageActionBarProps, } from "./MessageActionBar";
+export { MessageArtifacts, type MessageArtifactsProps, type MessageArtifact, } from "./MessageArtifacts";
+export { DayDivider, dayLabelOf, dayDividerFor, } from "./DayDivider";
+export { MermaidDiagram } from "./MermaidDiagram";
+export { collectCodeText } from "./code-text";

package/lib/blocks/message/index.js

@@ -0,0 +1,12 @@
+export { Message, MessageContent, MessageResponse, } from "./Message";
+export { MessageBubble } from "./MessageBubble";
+export { MessageRow } from "./MessageRow";
+export { MessageStream } from "./MessageStream";
+export { MessageAttachments, } from "./MessageAttachments";
+export { MessageTrace, traceToolCalls, } from "./MessageTrace";
+export { PartView } from "./PartView";
+export { MessageActionBar, } from "./MessageActionBar";
+export { MessageArtifacts, } from "./MessageArtifacts";
+export { DayDivider, dayLabelOf, dayDividerFor, } from "./DayDivider";
+export { MermaidDiagram } from "./MermaidDiagram";
+export { collectCodeText } from "./code-text";

package/lib/blocks/reasoning/Reasoning.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface ReasoningProps extends ComponentProps<"div"> {
+    streaming?: boolean;
+    defaultOpen?: boolean;
+    children?: ReactNode;
+}
+export declare function Reasoning({ streaming, defaultOpen, className, children, ...props }: ReasoningProps): import("react").JSX.Element;

package/lib/blocks/reasoning/Reasoning.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../utils/cn";
+export function Reasoning({ streaming = false, defaultOpen = false, className, children, ...props }) {
+    const [open, setOpen] = useState(defaultOpen);
+    const wasStreaming = useRef(streaming);
+    const bodyRef = useRef(null);
+    useEffect(() => {
+        if (streaming && !wasStreaming.current)
+            setOpen(true);
+        if (!streaming && wasStreaming.current)
+            setOpen(false);
+        wasStreaming.current = streaming;
+    }, [streaming]);
+    useEffect(() => {
+        if (!streaming)
+            return;
+        const el = bodyRef.current;
+        if (el)
+            el.scrollTo({ top: el.scrollHeight });
+    });
+    return (_jsxs("div", { "data-cmp": "ai/reasoning", "data-id": "reasoning", "data-state": streaming ? "streaming" : open ? "open" : "closed", className: cn("w-full overflow-hidden text-meta", className), ...props, children: [_jsxs("button", { type: "button", "aria-label": streaming ? "思考中，点击展开深度思考" : "查看深度思考", onClick: () => setOpen((v) => !v), className: "flex w-full items-center gap-1.5 py-1 text-left text-muted-foreground hover:text-foreground", children: [_jsx("span", { className: streaming
+                            ? "animate-shimmer bg-gradient-to-r from-muted-foreground/50 via-foreground to-muted-foreground/50 bg-[length:200%_100%] bg-clip-text font-medium text-transparent"
+                            : "font-medium", children: streaming ? "深度思考中…" : "深度思考" }), _jsx(ChevronDown, { "data-state": open ? "open" : "closed", className: cn("size-3.5 transition-transform duration-200", open && "rotate-180") })] }), open ? (_jsx("div", { ref: bodyRef, "data-cmp": "ai/reasoning-content", className: "max-h-72 overflow-y-auto overscroll-contain whitespace-pre-wrap break-words pl-1 text-muted-foreground", children: children })) : null] }));
+}

package/lib/blocks/reasoning/ReasoningBlock.d.ts

@@ -0,0 +1,6 @@
+export interface ReasoningBlockProps {
+    text: string;
+    streaming: boolean;
+    defaultOpen?: boolean;
+}
+export declare function ReasoningBlock({ text, streaming, defaultOpen, }: ReasoningBlockProps): import("react").JSX.Element;

package/lib/blocks/reasoning/ReasoningBlock.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Reasoning } from "./Reasoning";
+export function ReasoningBlock({ text, streaming, defaultOpen = false, }) {
+    return (_jsx("div", { "data-cmp": "ac/reasoning", "data-state": streaming ? "streaming" : "closed", children: _jsx(Reasoning, { streaming: streaming, defaultOpen: defaultOpen, children: text }) }));
+}

package/lib/blocks/reasoning/index.d.ts

@@ -0,0 +1,2 @@
+export { Reasoning, type ReasoningProps } from "./Reasoning";
+export { ReasoningBlock, type ReasoningBlockProps, } from "./ReasoningBlock";

package/lib/blocks/reasoning/index.js

@@ -0,0 +1,2 @@
+export { Reasoning } from "./Reasoning";
+export { ReasoningBlock, } from "./ReasoningBlock";

package/lib/blocks/selection/SelectionActions.d.ts

@@ -0,0 +1,12 @@
+import type { SelectionTarget } from "../../types/callbacks";
+export interface SelectionActionsProps {
+    pop: {
+        left: number;
+        top: number;
+        target: SelectionTarget;
+    } | null;
+    onDismiss: () => void;
+    onInsert: (text: string) => void;
+    onFavorite?: (target: SelectionTarget) => void;
+}
+export declare function SelectionActions({ pop, onDismiss, onInsert, onFavorite, }: SelectionActionsProps): import("react").ReactPortal | null;

package/lib/blocks/selection/SelectionActions.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Button } from "../../primitives/Button";
+import { writeClipboard } from "../../utils/clipboard";
+import { selectionActionPayload, selectionActionsFor, } from "../../domain/selection-actions";
+export function SelectionActions({ pop, onDismiss, onInsert, onFavorite, }) {
+    if (!pop || typeof document === "undefined")
+        return null;
+    const canFavorite = onFavorite !== undefined;
+    const actions = selectionActionsFor(pop.target, { canFavorite });
+    const run = (id) => {
+        onDismiss();
+        const payload = selectionActionPayload(id, pop.target);
+        if (!payload)
+            return;
+        if (payload.kind === "insert")
+            onInsert(payload.text);
+        else if (payload.kind === "copy")
+            void writeClipboard(payload.text);
+        else
+            onFavorite?.(pop.target);
+    };
+    return createPortal(_jsx("div", { className: "ac-selection", "data-cmp": "ac/selection-actions", "data-id": "selection-bar", role: "toolbar", "aria-label": "\u9009\u4E2D\u6587\u5B57\u7684\u64CD\u4F5C", style: { left: pop.left, top: pop.top }, onMouseDown: (e) => {
+            e.preventDefault();
+            const target = e.target;
+            if (!target.closest("[data-action]"))
+                onDismiss();
+        }, children: actions.map((action) => (_jsx(Button, { variant: "ghost", size: "xs", className: "ac-selection__btn", "data-action": action.id, onClick: () => run(action.id), children: action.label }, action.id))) }), document.body);
+}

package/lib/blocks/selection/SelectionBar.d.ts

@@ -0,0 +1,10 @@
+import type { SelectionCapabilities } from "../../types/selection";
+export interface SelectionBarProps {
+    count: number;
+    capabilities: SelectionCapabilities;
+    busy?: boolean;
+    onCopy: () => void;
+    onRemove: () => void;
+    onExit: () => void;
+}
+export declare function SelectionBar({ count, capabilities, busy, onCopy, onRemove, onExit, }: SelectionBarProps): import("react").JSX.Element;

package/lib/blocks/selection/SelectionBar.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Copy, Trash2, X } from "lucide-react";
+import { Button } from "../../primitives/Button";
+export function SelectionBar({ count, capabilities, busy = false, onCopy, onRemove, onExit, }) {
+    return (_jsxs("div", { className: "ac-select-bar", "data-cmp": "ac/select-bar", role: "toolbar", "aria-label": "\u591A\u9009\u64CD\u4F5C", children: [_jsxs("span", { className: "ac-select-bar__count", "data-cmp": "ac/select-count", children: ["\u5DF2\u9009 ", count, " \u6761"] }), _jsxs("div", { className: "ac-select-bar__actions", children: [_jsxs(Button, { variant: "ghost", size: "sm", className: "press-sm ac-select-bar__btn", disabled: !capabilities.copy || busy, title: capabilities.reason.copy ?? "复制选中消息的正文", onClick: onCopy, children: [_jsx(Copy, { size: 13 }), "\u590D\u5236"] }), _jsxs(Button, { variant: "ghost", size: "sm", className: "press-sm ac-select-bar__btn ac-select-bar__btn--danger", disabled: !capabilities.remove || busy, title: capabilities.reason.remove ?? "删除选中消息（可从后端回滚）", onClick: onRemove, children: [_jsx(Trash2, { size: 13 }), busy ? "删除中…" : "删除"] }), _jsx(Button, { variant: "ghost", size: "icon-sm", className: "press-sm", "aria-label": "\u9000\u51FA\u591A\u9009", onClick: onExit, children: _jsx(X, { size: 13 }) })] })] }));
+}

package/lib/blocks/selection/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectionBar, type SelectionBarProps } from "./SelectionBar";
+export { SelectionActions, type SelectionActionsProps, } from "./SelectionActions";

package/lib/blocks/selection/index.js

@@ -0,0 +1,2 @@
+export { SelectionBar } from "./SelectionBar";
+export { SelectionActions, } from "./SelectionActions";

package/lib/blocks/settings/DisplaySettingsPanel.d.ts

@@ -0,0 +1,5 @@
+export interface DisplaySettingsPanelProps {
+    className?: string;
+    side?: "top" | "bottom";
+}
+export declare function DisplaySettingsPanel({ className, side, }: DisplaySettingsPanelProps): import("react").JSX.Element;

package/lib/blocks/settings/DisplaySettingsPanel.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RotateCcw, SlidersHorizontal } from "lucide-react";
+import { Popover } from "../../primitives/Popover";
+import { cn } from "../../utils/cn";
+import { BLOCK_VISIBILITY_ORDER, } from "../../types/display";
+import { useDisplayStore } from "../../stores/display-store";
+import { SquishSwitch } from "./SquishSwitch";
+function Segment({ label, value, options, onChange, }) {
+    return (_jsxs("div", { className: "ac-display__row", children: [_jsx("span", { className: "ac-display__label", children: label }), _jsx("div", { role: "radiogroup", "aria-label": label, className: "ac-display__seg", children: options.map((opt) => (_jsx("button", { type: "button", role: "radio", "aria-checked": value === opt.value, "data-state": value === opt.value ? "selected" : "idle", className: "ac-display__seg-item", onClick: () => onChange(opt.value), children: opt.label }, opt.value))) })] }));
+}
+export function DisplaySettingsPanel({ className, side = "top", }) {
+    const { radius, density, messageStyle, streamWidth, composerWidth, hidden, setRadius, setDensity, setMessageStyle, setStreamWidth, setComposerWidth, setBlockHidden, resetDisplay, } = useDisplayStore();
+    return (_jsx(Popover, { side: side, align: "end", contentClassName: "ac-display-panel w-72 p-0", trigger: () => (_jsx("span", { role: "button", tabIndex: 0, "data-cmp": "ac/display-settings-trigger", "data-id": "display-settings", "aria-label": "\u663E\u793A\u8BBE\u7F6E", title: "\u663E\u793A\u8BBE\u7F6E\uFF08\u5706\u89D2/\u5E03\u5C40/\u663E\u9690\uFF09", className: cn("inline-grid size-7 cursor-pointer place-items-center rounded-full text-muted-foreground hover:bg-secondary hover:text-foreground", className), children: _jsx(SlidersHorizontal, { className: "size-4" }) })), children: _jsxs("div", { "data-cmp": "ac/display-panel", children: [_jsxs("div", { className: "flex items-center justify-between px-3.5 pt-3", children: [_jsx("span", { className: "text-body font-semibold", children: "\u663E\u793A\u8BBE\u7F6E" }), _jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-micro text-muted-foreground hover:bg-secondary hover:text-foreground", onClick: resetDisplay, children: [_jsx(RotateCcw, { className: "size-3" }), "\u91CD\u7F6E"] })] }), _jsxs("div", { className: "space-y-1 px-3.5 py-2.5", children: [_jsx(Segment, { label: "\u5706\u89D2", value: radius, options: [
+                                { value: "rounded", label: "圆角" },
+                                { value: "square", label: "方角" },
+                            ], onChange: setRadius }), _jsx(Segment, { label: "\u5BC6\u5EA6", value: density, options: [
+                                { value: "comfortable", label: "舒适" },
+                                { value: "compact", label: "紧凑" },
+                            ], onChange: setDensity }), _jsx(Segment, { label: "\u6D88\u606F\u6837\u5F0F", value: messageStyle, options: [
+                                { value: "seamless", label: "无感式" },
+                                { value: "bubble", label: "气泡" },
+                            ], onChange: setMessageStyle }), _jsx(Segment, { label: "\u6D88\u606F\u5BBD\u5EA6", value: streamWidth, options: [
+                                { value: "narrow", label: "窄" },
+                                { value: "standard", label: "标准" },
+                                { value: "wide", label: "宽" },
+                                { value: "full", label: "全宽" },
+                            ], onChange: setStreamWidth }), _jsx(Segment, { label: "\u8F93\u5165\u5BBD\u5EA6", value: composerWidth, options: [
+                                { value: "narrow", label: "窄" },
+                                { value: "standard", label: "标准" },
+                                { value: "wide", label: "宽" },
+                                { value: "full", label: "全宽" },
+                            ], onChange: setComposerWidth })] }), _jsxs("div", { className: "border-t border-border px-3.5 py-2.5", children: [_jsx("div", { className: "mb-1.5 text-micro font-medium tracking-wide text-muted-foreground", children: "\u663E\u793A\u5757\u5F00\u5173" }), _jsx("div", { className: "space-y-0.5", children: BLOCK_VISIBILITY_ORDER.map(({ key, label }) => (_jsxs("label", { className: "flex cursor-pointer items-center justify-between rounded px-1 py-1 hover:bg-secondary/60", children: [_jsx("span", { className: "text-body", children: label }), _jsx(SquishSwitch, { checked: !hidden[key], onChange: (next) => setBlockHidden(key, !next), ariaLabel: `显示${label}` })] }, key))) })] }), _jsx("p", { className: "border-t border-border px-3.5 py-2 text-micro text-muted-foreground", children: "\u914D\u7F6E\u5373\u65F6\u751F\u6548\u5E76\u6301\u4E45\u5316\uFF08localStorage\uFF09\u3002" })] }) }));
+}

package/lib/blocks/settings/SquishSwitch.d.ts

@@ -0,0 +1,8 @@
+export interface SquishSwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+    className?: string;
+}
+export declare function SquishSwitch({ checked, onChange, disabled, ariaLabel, className, }: SquishSwitchProps): import("react").JSX.Element;

package/lib/blocks/settings/SquishSwitch.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../utils/cn";
+export function SquishSwitch({ checked, onChange, disabled = false, ariaLabel, className, }) {
+    const [squish, setSquish] = useState("");
+    const first = useRef(true);
+    useEffect(() => {
+        if (first.current) {
+            first.current = false;
+            return;
+        }
+        setSquish("stretches");
+        const t1 = window.setTimeout(() => setSquish("squash"), 180);
+        const t2 = window.setTimeout(() => setSquish(""), 380);
+        return () => {
+            window.clearTimeout(t1);
+            window.clearTimeout(t2);
+        };
+    }, [checked]);
+    return (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-label": ariaLabel, disabled: disabled, "data-cmp": "ai/squish-switch", "data-state": checked ? "on" : "off", "data-squish": squish, className: cn("ac-squish", disabled && "pointer-events-none opacity-40", className), onClick: () => onChange(!checked), children: _jsx("span", { className: "ac-squish__track", children: _jsx("span", { className: "ac-squish__thumb" }) }) }));
+}

package/lib/blocks/settings/index.d.ts

@@ -0,0 +1,2 @@
+export { DisplaySettingsPanel, type DisplaySettingsPanelProps, } from "./DisplaySettingsPanel";
+export { SquishSwitch, type SquishSwitchProps, } from "./SquishSwitch";

package/lib/blocks/settings/index.js

@@ -0,0 +1,2 @@
+export { DisplaySettingsPanel, } from "./DisplaySettingsPanel";
+export { SquishSwitch, } from "./SquishSwitch";

package/lib/blocks/status/LatticeLoader.d.ts

@@ -0,0 +1,12 @@
+export type LatticeStatus = "working" | "done" | "error";
+export interface LatticeLoaderProps {
+    status: LatticeStatus;
+    label?: string;
+    doneLabel?: string;
+    errorLabel?: string;
+    elapsed?: number;
+    showTimer?: boolean;
+    step?: number;
+    className?: string;
+}
+export declare function LatticeLoader({ status, label, doneLabel, errorLabel, elapsed, showTimer, step, className, }: LatticeLoaderProps): import("react").JSX.Element;

package/lib/blocks/status/LatticeLoader.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../utils/cn";
+const ORBIT_DELAYS = [4, 3, 2, 5, 0, 1, 6, 7, 8];
+export function LatticeLoader({ status, label = "思考中", doneLabel = "完成，用时", errorLabel = "失败，用时", elapsed, showTimer = true, step = 90, className, }) {
+    const start = useRef(Date.now());
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        if (status !== "working" || elapsed !== undefined)
+            return;
+        const id = window.setInterval(() => setTick((t) => t + 1), 100);
+        return () => window.clearInterval(id);
+    }, [status, elapsed]);
+    const seconds = elapsed ?? (status === "working" ? (Date.now() - start.current) / 1000 : tick / 10);
+    const frozen = status !== "working";
+    return (_jsxs("div", { className: cn("ac-lattice", className), "data-cmp": "ai/lattice-loader", "data-status": status, children: [_jsx("div", { className: "ac-lattice__grid", "aria-hidden": "true", children: ORBIT_DELAYS.map((delay, i) => (_jsx("span", { className: cn("ac-lattice__cell", !frozen && "ac-lattice__cell--lit"), style: frozen
+                        ? { opacity: 0.15 }
+                        : {
+                            animationDelay: `${delay * step}ms`,
+                            animationDuration: `${step * 6}ms`,
+                        } }, i))) }), _jsx("span", { className: "ac-lattice__label", children: status === "done" ? doneLabel : status === "error" ? errorLabel : label }), showTimer ? (_jsxs("span", { className: "ac-lattice__timer", children: [status === "done" ? (_jsx("span", { className: "ac-lattice__mark", "data-mark": "done", children: "\u2713" })) : status === "error" ? (_jsx("span", { className: "ac-lattice__mark", "data-mark": "error", children: "\u2717" })) : null, seconds.toFixed(1), "s"] })) : null] }));
+}

package/lib/blocks/status/TypingIndicator.d.ts

@@ -0,0 +1,5 @@
+import type { Agent } from "../../types/agent";
+export interface TypingIndicatorProps {
+    agent?: Agent;
+}
+export declare function TypingIndicator({ agent }: TypingIndicatorProps): import("react").JSX.Element;

package/lib/blocks/status/TypingIndicator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function TypingIndicator({ agent }) {
+    const who = agent?.name ?? "Agent";
+    return (_jsxs("div", { className: "ac-typing", "data-cmp": "ac/typing", "data-state": "streaming", role: "status", "aria-label": `${who} 正在回复`, children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {}), _jsxs("span", { children: [who, " \u601D\u8003\u4E2D"] })] }));
+}

package/lib/blocks/status/index.d.ts

@@ -0,0 +1,2 @@
+export { TypingIndicator, type TypingIndicatorProps } from "./TypingIndicator";
+export { LatticeLoader, type LatticeLoaderProps, type LatticeStatus, } from "./LatticeLoader";

package/lib/blocks/status/index.js

@@ -0,0 +1,2 @@
+export { TypingIndicator } from "./TypingIndicator";
+export { LatticeLoader, } from "./LatticeLoader";

package/lib/blocks/tool/SandboxCard.d.ts

@@ -0,0 +1,5 @@
+import type { SandboxPart } from "../../types/message";
+export interface SandboxCardProps {
+    part: SandboxPart;
+}
+export declare function SandboxCard({ part }: SandboxCardProps): import("react").JSX.Element;

package/lib/blocks/tool/SandboxCard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Terminal } from "lucide-react";
+const STATE_LABEL = {
+    running: "运行中",
+    finished: "完成",
+    error: "失败",
+};
+export function SandboxCard({ part }) {
+    return (_jsxs("div", { className: "ac-card", "data-cmp": "ac/sandbox", "data-state": part.state, children: [_jsxs("div", { className: "ac-card__head", children: [_jsx("span", { className: "ac-card__dot", "data-state": part.state }), _jsx(Terminal, { "aria-hidden": "true", size: 12 }), _jsx("span", { className: "ac-card__title", children: part.title }), _jsx("span", { className: "ac-card__state", children: STATE_LABEL[part.state] })] }), part.output ? (_jsx("div", { className: "ac-card__body", "data-kind": "result", children: part.output })) : null] }));
+}

package/lib/blocks/tool/ToolCard.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentProps } from "react";
+import type { ToolCallState } from "../../types/message";
+export interface ToolCardProps extends ComponentProps<"div"> {
+    name: string;
+    state: ToolCallState;
+    args?: unknown;
+    result?: string;
+    detail?: string;
+}
+export declare function ToolCard({ name, state, args, result, detail, className, ...props }: ToolCardProps): import("react").JSX.Element;

package/lib/blocks/tool/ToolCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown, Wrench } from "lucide-react";
+import { cn } from "../../utils/cn";
+import { parseExecResult, prettyResult, diffStatOf } from "./exec-envelope";
+import { DiffView, looksLikeDiff } from "../message/DiffView";
+const STATE_TEXT = {
+    running: "执行中",
+    finished: "完成",
+    error: "失败",
+};
+export function ToolCard({ name, state, args, result, detail, className, ...props }) {
+    const [open, setOpen] = useState(false);
+    const stat = diffStatOf(result);
+    return (_jsxs("div", { "data-cmp": "ai/tool-card", "data-id": "tool-card", "data-state": state, className: cn("w-full overflow-hidden text-meta", className), ...props, children: [_jsxs("button", { type: "button", "aria-label": `工具调用 ${name}，${STATE_TEXT[state]}，点击展开详情`, "data-state": open ? "open" : "closed", onClick: () => setOpen((v) => !v), className: "flex w-full items-center gap-2 py-1 text-left text-muted-foreground hover:text-foreground", children: [_jsx(Wrench, { className: cn("size-3.5 shrink-0", state === "running" && "animate-pulse text-[var(--accent-warning)]", state === "error" && "text-[var(--accent-danger)]") }), _jsx("span", { className: "truncate font-medium text-foreground", children: name }), detail ? (_jsx("span", { className: "truncate text-muted-foreground", children: detail })) : null, stat ? (_jsxs("span", { className: "shrink-0 font-mono text-micro", children: [_jsxs("span", { className: "text-[var(--diff-add-fg)]", children: ["+", stat.add] }), " ", _jsxs("span", { className: "text-[var(--diff-del-fg)]", children: ["\u2212", stat.del] })] })) : null, state === "running" ? (_jsx("span", { className: "ml-auto shrink-0 text-micro text-muted-foreground", children: STATE_TEXT[state] })) : state === "error" ? (_jsx("span", { className: "ml-auto shrink-0 text-micro text-[var(--accent-danger)]", children: STATE_TEXT[state] })) : null, _jsx(ChevronDown, { className: cn("ml-auto size-3.5 shrink-0 transition-transform duration-200", (state !== "running" && state !== "error") || "ml-0", open && "rotate-180") })] }), open ? (_jsxs("div", { "data-cmp": "ai/tool-detail", className: "space-y-2 py-1.5 pl-1", children: [args !== undefined ? (_jsxs("div", { children: [_jsx("span", { className: "font-mono text-micro uppercase tracking-wide text-muted-foreground", children: "\u53C2\u6570" }), _jsx("pre", { className: "max-h-40 overflow-y-auto font-mono text-meta text-muted-foreground", children: JSON.stringify(args, null, 2) })] })) : null, result ? (_jsxs("div", { children: [_jsx("span", { className: "font-mono text-micro uppercase tracking-wide text-muted-foreground", children: "\u7ED3\u679C" }), _jsx(ResultBlocks, { result: result })] })) : null] })) : null] }));
+}
+function OutputBlock({ label, content, tone, }) {
+    const isDiff = tone !== "error" && looksLikeDiff(content);
+    return (_jsxs("div", { children: [label ? (_jsx("span", { className: cn("font-mono text-micro uppercase tracking-wide", tone === "error" ? "text-destructive" : "text-muted-foreground"), children: label })) : null, isDiff ? (_jsx(DiffView, { code: content, className: "mt-1" })) : (_jsx("pre", { className: cn("max-h-64 min-w-0 overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-all font-mono text-meta", tone === "error" ? "text-destructive" : "text-muted-foreground"), children: content }))] }));
+}
+function ResultBlocks({ result }) {
+    const envelope = parseExecResult(result);
+    if (envelope) {
+        const failed = envelope.exit_code !== 0 || envelope.timed_out === true;
+        return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { "data-tone": failed ? "error" : "ok", className: "flex flex-wrap items-center gap-2 text-meta", children: [_jsx("span", { className: failed ? "text-destructive" : "text-[var(--accent-success)]", children: envelope.timed_out === true
+                                ? "超时"
+                                : envelope.exit_code === 0
+                                    ? "成功"
+                                    : `退出码 ${envelope.exit_code}` }), envelope.duration_ms !== undefined ? (_jsxs("span", { className: "text-muted-foreground", children: ["\u8017\u65F6 ", envelope.duration_ms, " ms"] })) : null, envelope.truncated === true ? (_jsx("span", { className: "text-muted-foreground", children: "\u8F93\u51FA\u5DF2\u622A\u65AD" })) : null] }), envelope.stdout.length > 0 ? (_jsx(OutputBlock, { label: "stdout", content: envelope.stdout })) : null, envelope.stderr.length > 0 ? (_jsx(OutputBlock, { label: "stderr", content: envelope.stderr, tone: "error" })) : null, envelope.stdout.length === 0 && envelope.stderr.length === 0 ? (_jsx("p", { className: "text-meta text-muted-foreground", children: "\uFF08\u65E0\u8F93\u51FA\uFF09" })) : null] }));
+    }
+    return _jsx(OutputBlock, { content: prettyResult(result) });
+}

package/lib/blocks/tool/ToolGroup.d.ts

@@ -0,0 +1,6 @@
+import { type KeyedToolPart } from "../../domain/message-blocks";
+export interface ToolGroupProps {
+    parts: KeyedToolPart[];
+    renderPart?: (item: KeyedToolPart) => React.ReactNode;
+}
+export declare function ToolGroup({ parts, renderPart }: ToolGroupProps): import("react").JSX.Element;