@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/lib/blocks/conversation/Conversation.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { ArrowDown } from "lucide-react";
+import { Button } from "../../primitives/Button";
+import { Empty } from "../../primitives/Empty";
+import { cn } from "../../utils/cn";
+export const NEAR_BOTTOM_PX = 80;
+export function ConversationShell({ className, ...props }) {
+    return (_jsx("div", { "data-cmp": "ai/conversation", className: cn("flex min-h-0 flex-col", className), ...props }));
+}
+export function ConversationContent({ className, ...props }) {
+    return (_jsx("div", { "data-cmp": "ai/conversation-content", className: cn("flex min-h-0 flex-1 flex-col overflow-y-auto px-4 py-4", className), ...props }));
+}
+export function ConversationScroller({ className, children, ...props }) {
+    const viewportRef = useRef(null);
+    const [nearBottom, setNearBottom] = useState(true);
+    const measure = useCallback(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        const near = el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_PX;
+        setNearBottom((prev) => (prev === near ? prev : near));
+    }, []);
+    useEffect(() => {
+        if (!nearBottom)
+            return;
+        const el = viewportRef.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    });
+    return (_jsxs("div", { "data-cmp": "ai/conversation-scroller", className: cn("relative flex min-h-0 flex-1 flex-col", className), ...props, children: [_jsx("div", { ref: viewportRef, onScroll: measure, className: "flex min-h-0 flex-1 flex-col overflow-y-auto px-4 py-4", children: children }), !nearBottom ? (_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "aria-label": "\u6EDA\u52A8\u5230\u6700\u65B0\u6D88\u606F", "data-state": "visible", className: "absolute bottom-3 left-1/2 z-panel -translate-x-1/2 rounded-full shadow-lg", onClick: () => {
+                    viewportRef.current?.scrollTo({
+                        top: viewportRef.current.scrollHeight,
+                        behavior: "smooth",
+                    });
+                    setNearBottom(true);
+                }, children: _jsx(ArrowDown, {}) })) : null] }));
+}
+export function ConversationEmpty({ title, hint, className, ...props }) {
+    return (_jsx("div", { "data-cmp": "ai/conversation-empty", "data-state": "empty", className: cn("contents", className), ...props, children: _jsx(Empty, { title: title, hint: hint }) }));
+}

package/lib/blocks/conversation/LineSidebar.d.ts

@@ -0,0 +1,14 @@
+export interface LineSidebarItem {
+    id: string;
+    label: string;
+    badge?: string | number;
+}
+export interface LineSidebarProps {
+    items: readonly LineSidebarItem[];
+    activeId?: string | null;
+    onItemClick?: (id: string, label: string) => void;
+    proximityRadius?: number;
+    maxShift?: number;
+    className?: string;
+}
+export declare function LineSidebar({ items, activeId, onItemClick, proximityRadius, maxShift, className, }: LineSidebarProps): import("react").JSX.Element;

package/lib/blocks/conversation/LineSidebar.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { cn } from "../../utils/cn";
+export function LineSidebar({ items, activeId = null, onItemClick, proximityRadius = 100, maxShift = 30, className, }) {
+    const [prox, setProx] = useState({});
+    const rootRef = useRef(null);
+    const onMove = useCallback((e) => {
+        const next = {};
+        for (const el of rootRef.current?.querySelectorAll("[data-line-item]") ?? []) {
+            const id = el.dataset.lineItem ?? "";
+            const rect = el.getBoundingClientRect();
+            const mid = rect.top + rect.height / 2;
+            const dist = Math.abs(e.clientY - mid);
+            const t = Math.max(0, 1 - dist / proximityRadius);
+            const eased = t * t * (3 - 2 * t);
+            next[id] = { shift: eased * maxShift, t: eased };
+        }
+        setProx(next);
+    }, [proximityRadius, maxShift]);
+    useEffect(() => {
+        const reset = () => setProx({});
+        window.addEventListener("blur", reset);
+        return () => window.removeEventListener("blur", reset);
+    }, []);
+    return (_jsx("div", { ref: rootRef, role: "navigation", "aria-label": "\u4F1A\u8BDD\u5217\u8868", "data-cmp": "ai/line-sidebar", "data-id": "line-sidebar", className: cn("ac-line-nav", className), onMouseMove: onMove, onMouseLeave: () => setProx({}), children: items.map((item, i) => {
+            const p = prox[item.id] ?? { shift: 0, t: 0 };
+            const active = item.id === activeId;
+            return (_jsxs("button", { type: "button", "data-line-item": item.id, "data-state": active ? "active" : "idle", className: "ac-line-nav__item", style: { transform: `translateX(${p.shift}px)` }, onClick: () => onItemClick?.(item.id, item.label), children: [_jsx("span", { className: "ac-line-nav__marker", style: {
+                            width: `${24 + p.t * 36}px`,
+                            opacity: 0.35 + p.t * 0.55,
+                            background: active
+                                ? "var(--accent-primary)"
+                                : `color-mix(in srgb, var(--accent-primary) ${Math.round(p.t * 70)}%, var(--border-500))`,
+                        } }), _jsx("span", { className: "ac-line-nav__index", children: String(i + 1).padStart(2, "0") }), _jsx("span", { className: "ac-line-nav__label", style: {
+                            color: active
+                                ? "var(--accent-primary)"
+                                : p.t > 0
+                                    ? `color-mix(in srgb, var(--accent-primary) ${Math.round(p.t * 60)}%, var(--text-300))`
+                                    : undefined,
+                        }, children: item.label }), item.badge != null ? (_jsx("span", { className: "ac-line-nav__badge", children: item.badge })) : null] }, item.id));
+        }) }));
+}

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

@@ -0,0 +1,5 @@
+export { ConversationShell, ConversationContent, ConversationScroller, ConversationEmpty, NEAR_BOTTOM_PX, } from "./Conversation";
+export { ChatEmptyScene, type ChatEmptySceneProps } from "./ChatEmptyScene";
+export { ChatHeader, type ChatHeaderProps } from "./ChatHeader";
+export { ChatPane, planSmartStop, type ChatPaneProps, type SmartStopPlan, } from "./ChatPane";
+export { LineSidebar, type LineSidebarProps, type LineSidebarItem, } from "./LineSidebar";

package/lib/blocks/conversation/index.js

@@ -0,0 +1,5 @@
+export { ConversationShell, ConversationContent, ConversationScroller, ConversationEmpty, NEAR_BOTTOM_PX, } from "./Conversation";
+export { ChatEmptyScene } from "./ChatEmptyScene";
+export { ChatHeader } from "./ChatHeader";
+export { ChatPane, planSmartStop, } from "./ChatPane";
+export { LineSidebar, } from "./LineSidebar";

package/lib/blocks/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./message";
+export * from "./reasoning";
+export * from "./tool";
+export * from "./cards";
+export * from "./composer";
+export * from "./selection";
+export * from "./conversation";
+export * from "./status";
+export * from "./settings";

package/lib/blocks/index.js

@@ -0,0 +1,9 @@
+export * from "./message";
+export * from "./reasoning";
+export * from "./tool";
+export * from "./cards";
+export * from "./composer";
+export * from "./selection";
+export * from "./conversation";
+export * from "./status";
+export * from "./settings";

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

@@ -0,0 +1,10 @@
+export type { ChatMessage } from "../../types/message";
+export declare function dayLabelOf(iso: string | undefined): string | null;
+export declare function dayDividerFor(prev: {
+    createdAt?: string;
+} | undefined, current: {
+    createdAt?: string;
+}): string | null;
+export declare function DayDivider({ label }: {
+    label: string;
+}): import("react").JSX.Element;

package/lib/blocks/message/DayDivider.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function dayLabelOf(iso) {
+    if (!iso)
+        return null;
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime()))
+        return iso;
+    const now = new Date();
+    const sameDay = (a, b) => a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate();
+    const yesterday = new Date(now);
+    yesterday.setDate(now.getDate() - 1);
+    if (sameDay(date, now))
+        return "今天";
+    if (sameDay(date, yesterday))
+        return "昨天";
+    return `${date.getMonth() + 1}月${date.getDate()}日`;
+}
+export function dayDividerFor(prev, current) {
+    if (!prev?.createdAt || !current.createdAt)
+        return null;
+    const a = prev.createdAt.slice(0, 10);
+    const b = current.createdAt.slice(0, 10);
+    return a === b ? null : dayLabelOf(current.createdAt);
+}
+export function DayDivider({ label }) {
+    return (_jsx("div", { className: "ac-stream__day", "data-cmp": "ac/day-divider", role: "separator", children: label }));
+}

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

@@ -0,0 +1,5 @@
+export declare function looksLikeDiff(code: string): boolean;
+export declare function DiffView({ code, className, }: {
+    code: string;
+    className?: string;
+}): import("react").JSX.Element;

package/lib/blocks/message/DiffView.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn";
+export function looksLikeDiff(code) {
+    const lines = code.split("\n").filter(Boolean);
+    if (lines.length === 0)
+        return false;
+    const marked = lines.filter((l) => (l.startsWith("+") && !l.startsWith("+++")) ||
+        (l.startsWith("-") && !l.startsWith("---"))).length;
+    return marked > 0 && marked / lines.length >= 0.3;
+}
+export function DiffView({ code, className, }) {
+    const lines = code.replace(/\n$/, "").split("\n");
+    return (_jsx("div", { className: cn("overflow-hidden rounded-md border border-border bg-background", className), "data-cmp": "ai/diff-view", children: lines.map((line, i) => {
+            const isAdd = line.startsWith("+") && !line.startsWith("+++");
+            const isDel = line.startsWith("-") && !line.startsWith("---");
+            return (_jsxs("div", { "data-tone": isAdd ? "add" : isDel ? "del" : "ctx", className: "flex text-xs leading-5", children: [_jsx("span", { className: "w-10 shrink-0 select-none border-r border-border px-2 text-right font-mono text-micro text-muted-foreground", children: i + 1 }), _jsx("pre", { className: cn("min-w-0 flex-1 overflow-x-auto px-2.5 font-mono whitespace-pre", isAdd && "bg-[var(--diff-add-bg)] text-[var(--diff-add-fg)]", isDel && "bg-[var(--diff-del-bg)] text-[var(--diff-del-fg)]", !isAdd && !isDel && "text-muted-foreground"), children: line || " " })] }, i));
+        }) }));
+}

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

@@ -0,0 +1,4 @@
+export interface MermaidDiagramProps {
+    code: string;
+}
+export declare function MermaidDiagram({ code }: MermaidDiagramProps): import("react").JSX.Element;

package/lib/blocks/message/MermaidDiagram.js

@@ -0,0 +1,43 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+let apiPromise = null;
+function loadMermaid() {
+    if (!apiPromise) {
+        apiPromise = import("mermaid").then((mod) => {
+            const api = (mod.default ?? mod);
+            api.initialize({
+                startOnLoad: false,
+                securityLevel: "strict",
+                theme: "dark",
+            });
+            return api;
+        });
+    }
+    return apiPromise;
+}
+export function MermaidDiagram({ code }) {
+    const [svg, setSvg] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        setSvg(null);
+        setError(null);
+        loadMermaid()
+            .then((api) => api.render(`mmd-${Math.random().toString(36).slice(2)}`, code))
+            .then((result) => {
+            if (!cancelled)
+                setSvg(result.svg);
+        })
+            .catch((err) => {
+            if (!cancelled)
+                setError(err instanceof Error ? err.message : String(err));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [code]);
+    if (error !== null) {
+        return (_jsxs("div", { "data-cmp": "ai/mermaid", "data-state": "error", className: "my-2 space-y-1 rounded border border-destructive/40 p-2", children: [_jsxs("p", { className: "text-xs text-destructive", children: ["Mermaid \u6E32\u67D3\u5931\u8D25\uFF1A", error] }), _jsx("pre", { className: "overflow-x-auto font-mono text-xs text-muted-foreground", children: code })] }));
+    }
+    return (_jsx("div", { "data-cmp": "ai/mermaid", "data-state": svg === null ? "loading" : "ready", "aria-label": "Mermaid \u56FE", className: "my-2 overflow-x-auto rounded border border-border bg-background/60 p-2 [&_svg]:mx-auto [&_svg]:max-w-full", children: svg === null ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "Mermaid \u6E32\u67D3\u4E2D\u2026" })) : (_jsx("div", { dangerouslySetInnerHTML: { __html: svg } })) }));
+}

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

@@ -0,0 +1,17 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+import { type Components, type Options } from "react-markdown";
+export type { MessageRole } from "../../types/message";
+import type { MessageRole } from "../../types/message";
+export interface MessageProps extends ComponentProps<"div"> {
+    from: MessageRole;
+}
+export declare function Message({ from, className, children, ...props }: MessageProps): import("react").JSX.Element;
+export declare function MessageContent({ from, className, children, ...props }: MessageProps): import("react").JSX.Element;
+export interface MessageResponseProps extends Omit<ComponentProps<"div">, "children"> {
+    children?: string;
+    remarkPlugins?: Options["remarkPlugins"];
+    rehypePlugins?: Options["rehypePlugins"];
+    markdownComponents?: Components;
+}
+export declare function MessageResponse({ children, remarkPlugins, rehypePlugins, markdownComponents, className, ...props }: MessageResponseProps): import("react").JSX.Element;
+export type { Components, ReactNode, ReactElement };

package/lib/blocks/message/Message.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, } from "react";
+import ReactMarkdown, {} from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Check, Copy } from "lucide-react";
+import { cn } from "../../utils/cn";
+import { writeClipboard } from "../../utils/clipboard";
+import { collectCodeText } from "./code-text";
+import { MermaidDiagram } from "./MermaidDiagram";
+import { DiffView, looksLikeDiff } from "./DiffView";
+const ROLE_BUBBLE = {
+    user: "ml-auto max-w-[85%] rounded-2xl bg-primary/15 px-4 py-2.5 text-foreground",
+    assistant: "w-full max-w-none rounded-none border-0 bg-transparent px-0 py-0 text-foreground",
+    system: "mx-auto max-w-[92%] rounded-lg bg-secondary/50 px-3 py-1.5 text-meta text-muted-foreground",
+    tool: "w-full rounded-lg border border-dashed border-border bg-secondary/40 px-3 py-2",
+};
+export function Message({ from, className, children, ...props }) {
+    return (_jsx("div", { "data-cmp": "ai/message", "data-msg-role": from, className: cn("flex w-full", className), ...props, children: children }));
+}
+export function MessageContent({ from, className, children, ...props }) {
+    return (_jsx("div", { "data-cmp": "ai/message-content", "data-msg-role": from, className: cn("text-body", ROLE_BUBBLE[from], className), ...props, children: children }));
+}
+function CodeBlock({ node, children, ...props }) {
+    const [copied, setCopied] = useState("idle");
+    const classNames = Array.isArray(node?.properties?.className)
+        ? node?.properties?.className
+        : [];
+    const isMermaid = classNames.some((c) => c === "language-mermaid");
+    const isDiff = classNames.some((c) => c === "language-diff") ||
+        (!isMermaid && looksLikeDiff(collectCodeText(node)));
+    if (isMermaid) {
+        return _jsx(MermaidDiagram, { code: collectCodeText(node) });
+    }
+    if (isDiff) {
+        return (_jsxs("div", { className: "relative", children: [_jsx(DiffView, { code: collectCodeText(node) }), _jsxs("button", { type: "button", "data-cmp": "ai/code-copy", "data-state": copied, "aria-label": "\u590D\u5236\u4EE3\u7801", className: "absolute top-1.5 right-1.5 inline-flex items-center gap-1 rounded border border-border bg-muted px-1.5 py-0.5 text-micro leading-none text-muted-foreground hover:text-foreground", onClick: () => {
+                        void writeClipboard(collectCodeText(node)).then((ok) => setCopied(ok ? "done" : "error"));
+                    }, children: [copied === "done" ? (_jsx(Check, { className: "size-3" })) : (_jsx(Copy, { className: "size-3" })), copied === "idle" ? null : copied === "done" ? "已复制" : "复制失败"] })] }));
+    }
+    return (_jsxs("div", { className: "relative my-2", children: [_jsx("pre", { ...props, children: children }), _jsxs("button", { type: "button", "data-cmp": "ai/code-copy", "data-state": copied, "aria-label": "\u590D\u5236\u4EE3\u7801", className: "absolute top-1.5 right-1.5 inline-flex items-center gap-1 rounded border border-border bg-muted px-1.5 py-0.5 text-micro leading-none text-muted-foreground hover:text-foreground", onClick: () => {
+                    void writeClipboard(collectCodeText(node)).then((ok) => setCopied(ok ? "done" : "error"));
+                }, children: [copied === "done" ? (_jsx(Check, { className: "size-3" })) : (_jsx(Copy, { className: "size-3" })), copied === "idle" ? null : copied === "done" ? "已复制" : "复制失败"] })] }));
+}
+export function MessageResponse({ children, remarkPlugins, rehypePlugins, markdownComponents, className, ...props }) {
+    return (_jsx("div", { "data-cmp": "ai/message-response", className: cn("[&_a]:text-primary [&_a]:underline", "[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground", "[&_code:not(pre code)]:rounded [&_code:not(pre code)]:bg-background [&_code:not(pre code)]:px-1 [&_code:not(pre code)]:py-0.5 [&_code:not(pre code)]:font-mono [&_code:not(pre code)]:text-[0.85em]", "[&_h1]:mt-3 [&_h1]:mb-2 [&_h1]:text-base [&_h1]:font-semibold [&_h1]:leading-snug", "[&_h2]:mt-3 [&_h2]:mb-1.5 [&_h2]:text-heading [&_h2]:font-semibold", "[&_h3]:mt-2.5 [&_h3]:mb-1.5 [&_h3]:text-sm [&_h3]:font-semibold", "[&_h4]:mt-2 [&_h4]:mb-1 [&_h4]:font-semibold", "[&_hr]:my-3 [&_hr]:border-border", "[&_li]:my-0.5", "[&_ol]:my-1.5 [&_ol]:list-decimal [&_ol]:pl-5", "[&_p]:my-1.5", "[&_pre]:my-0 [&_pre]:break-normal [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:border [&_pre]:border-border [&_pre]:bg-background [&_pre]:p-2.5 [&_pre]:pr-16 [&_pre]:font-mono [&_pre]:text-xs [&_pre]:whitespace-pre", "[&_strong]:font-semibold", "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse", "[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1", "[&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:font-semibold", "[&_ul]:my-1.5 [&_ul]:list-disc [&_ul]:pl-5", "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className), ...props, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, ...(remarkPlugins ?? [])], rehypePlugins: rehypePlugins, components: { pre: CodeBlock, ...markdownComponents }, children: children ?? "" }) }));
+}

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface MessageActionBarProps {
+    copyText: string;
+    onLike?: () => void;
+    onDislike?: () => void;
+    liked?: boolean;
+    disliked?: boolean;
+    onReadAloud?: () => void;
+    onRetry?: () => void;
+    onMore?: () => void;
+    cost?: string;
+    model?: string;
+    timeLabel?: string;
+    onNotice?: (message: string) => void;
+    className?: string;
+    trailing?: ReactNode;
+}
+export declare function MessageActionBar({ copyText, onLike, onDislike, liked, disliked, onReadAloud, onRetry, onMore, cost, model, timeLabel, onNotice, className, trailing, }: MessageActionBarProps): import("react").JSX.Element;

package/lib/blocks/message/MessageActionBar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Copy, MoreHorizontal, RefreshCw, ThumbsDown, ThumbsUp, Volume2, } from "lucide-react";
+import { writeClipboard } from "../../utils/clipboard";
+import { cn } from "../../utils/cn";
+function IconBtn({ label, active, onClick, children, }) {
+    return (_jsx("button", { type: "button", "data-cmp": "ac/msg-action", "data-action": label, "data-state": active ? "active" : "idle", "aria-label": label, title: label, className: cn("inline-grid size-6 place-items-center rounded text-muted-foreground hover:bg-secondary hover:text-foreground", active && "text-foreground"), onClick: onClick, children: children }));
+}
+export function MessageActionBar({ copyText, onLike, onDislike, liked = false, disliked = false, onReadAloud, onRetry, onMore, cost, model, timeLabel, onNotice, className, trailing, }) {
+    return (_jsxs("div", { className: cn("ac-msg-actions", className), "data-cmp": "ac/msg-actions", "data-id": "msg-actions", children: [_jsx(IconBtn, { label: "\u590D\u5236", onClick: () => {
+                    void writeClipboard(copyText).then((ok) => {
+                        if (!ok)
+                            onNotice?.("复制失败，请手动选择文本");
+                    });
+                }, children: _jsx(Copy, { className: "size-3.5" }) }), onLike ? (_jsx(IconBtn, { label: "\u70B9\u8D5E", active: liked, onClick: onLike, children: _jsx(ThumbsUp, { className: "size-3.5" }) })) : null, onDislike ? (_jsx(IconBtn, { label: "\u70B9\u8E29", active: disliked, onClick: onDislike, children: _jsx(ThumbsDown, { className: "size-3.5" }) })) : null, onReadAloud ? (_jsx(IconBtn, { label: "\u6717\u8BFB", onClick: onReadAloud, children: _jsx(Volume2, { className: "size-3.5" }) })) : null, onRetry ? (_jsx(IconBtn, { label: "\u91CD\u65B0\u751F\u6210", onClick: onRetry, children: _jsx(RefreshCw, { className: "size-3.5" }) })) : null, onMore ? (_jsx(IconBtn, { label: "\u66F4\u591A", onClick: onMore, children: _jsx(MoreHorizontal, { className: "size-3.5" }) })) : null, trailing, cost || model || timeLabel ? (_jsxs("span", { className: "ac-msg-actions__meta", children: [cost ? _jsx("span", { "data-cmp": "ac/msg-cost", children: cost }) : null, model ? _jsx("span", { "data-cmp": "ac/msg-model", children: model }) : null, timeLabel ? _jsx("span", { children: timeLabel }) : null] })) : null] }));
+}

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

@@ -0,0 +1,13 @@
+export interface MessageArtifact {
+    id: string;
+    name: string;
+    size?: string;
+}
+export interface MessageArtifactsProps {
+    items: readonly MessageArtifact[];
+    total?: number;
+    onOpen?: (artifact: MessageArtifact) => void;
+    onOpenAll?: () => void;
+    className?: string;
+}
+export declare function MessageArtifacts({ items, total, onOpen, onOpenAll, className, }: MessageArtifactsProps): import("react").JSX.Element | null;

package/lib/blocks/message/MessageArtifacts.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText } from "lucide-react";
+import { cn } from "../../utils/cn";
+export function MessageArtifacts({ items, total, onOpen, onOpenAll, className, }) {
+    if (items.length === 0)
+        return null;
+    const count = total ?? items.length;
+    return (_jsxs("div", { className: cn("ac-artifacts", className), "data-cmp": "ac/msg-artifacts", "data-id": "msg-artifacts", "data-count": count, children: [items.map((item) => (_jsxs("button", { type: "button", "data-cmp": "ac/artifact-chip", "data-artifact": item.id, className: "ac-artifacts__chip", disabled: onOpen === undefined, title: onOpen ? `打开 ${item.name}` : item.name, onClick: () => onOpen?.(item), children: [_jsx(FileText, { className: "ac-artifacts__icon" }), _jsx("span", { className: "ac-artifacts__name", children: item.name }), item.size ? (_jsx("span", { className: "ac-artifacts__size", children: item.size })) : null] }, item.id))), onOpenAll ? (_jsxs("button", { type: "button", "data-cmp": "ac/artifact-all", className: "ac-artifacts__all", onClick: onOpenAll, children: ["\u67E5\u770B\u6240\u6709\u4EA7\u7269 (", count, ")"] })) : null] }));
+}

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

@@ -0,0 +1,5 @@
+import type { Attachment } from "../../types/message";
+export interface MessageAttachmentsProps {
+    attachments: Attachment[];
+}
+export declare function MessageAttachments({ attachments }: MessageAttachmentsProps): import("react").JSX.Element;

package/lib/blocks/message/MessageAttachments.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Dialog } from "../../primitives/Dialog";
+import { attachmentColumns, attachmentSrc, } from "../../domain/attachments";
+function labelOf(attachment, index) {
+    const name = attachment.filename?.trim();
+    return name && name.length > 0 ? name : `图片 ${index + 1}`;
+}
+function AttachmentTile({ attachment, index, onOpen, }) {
+    const isVideo = attachment.media_type.startsWith("video/");
+    const label = labelOf(attachment, index);
+    const [state, setState] = useState("loading");
+    if (isVideo) {
+        return (_jsx("video", { className: "ac-attach__img", "data-cmp": "ac/attachment-video", src: attachmentSrc(attachment), controls: true, preload: "metadata", "aria-label": label }));
+    }
+    return (_jsxs("button", { type: "button", className: "ac-attach__tile", "data-cmp": "ac/attachment-tile", "data-state": state, "aria-label": `查看图片 ${index + 1}`, disabled: state === "error", onClick: () => onOpen(index), children: [state !== "ready" ? (_jsx("span", { className: "ac-attach__ph", children: state === "loading" ? "加载中…" : "图片加载失败" })) : null, _jsx("img", { className: "ac-attach__img", src: attachmentSrc(attachment), alt: label, onLoad: () => setState("ready"), onError: () => setState("error") })] }));
+}
+export function MessageAttachments({ attachments }) {
+    const [active, setActive] = useState(null);
+    const count = attachments.length;
+    const cols = attachmentColumns(count);
+    const current = active !== null ? attachments[active] : undefined;
+    const isVideo = current?.media_type.startsWith("video/") ?? false;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ac-attach__grid", "data-cmp": "ac/msg-attachments", "data-count": count, "data-cols": cols, "aria-label": "\u56FE\u7247\u9644\u4EF6", children: attachments.map((attachment, index) => (_jsx(AttachmentTile, { attachment: attachment, index: index, onOpen: setActive }, `${index}-${attachment.filename ?? attachment.media_type}`))) }), _jsx(Dialog, { open: active !== null && !isVideo, onOpenChange: (open) => {
+                    if (!open)
+                        setActive(null);
+                }, title: current ? labelOf(current, active ?? 0) : "图片预览", className: "ac-attach__preview", children: current ? (_jsx("img", { className: "ac-attach__preview-img", src: attachmentSrc(current), alt: labelOf(current, active ?? 0) })) : null })] }));
+}

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

@@ -0,0 +1,11 @@
+import { cn } from "../../utils/cn";
+import type { Agent } from "../../types/agent";
+import type { ChatMessage } from "../../types/message";
+export interface MessageBubbleProps {
+    message: ChatMessage;
+    agent?: Agent;
+    mentionedAgents?: Agent[];
+    onOpenAgent?: (id: string) => void;
+}
+export declare function MessageBubble({ message, agent, mentionedAgents, onOpenAgent, }: MessageBubbleProps): import("react").JSX.Element;
+export { cn };

package/lib/blocks/message/MessageBubble.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../../utils/cn";
+import { mentionTargetsFromAgents, remarkMentions, } from "../../domain/mention";
+import { MessageResponse } from "./Message";
+import { MessageAttachments } from "./MessageAttachments";
+function createMentionComponents(targetById, onOpenAgent) {
+    const Mention = ({ agent, name }) => {
+        const target = agent ? targetById.get(agent) : undefined;
+        const label = `@${name ?? ""}`;
+        if (target && onOpenAgent) {
+            return (_jsx("button", { type: "button", className: "ac-bubble__mention", "data-cmp": "ac/mention-chip", "aria-label": `查看 ${target.name} 资料`, onClick: () => onOpenAgent(target.id), children: label }));
+        }
+        return _jsx("span", { className: "ac-bubble__mention", children: label });
+    };
+    return { mention: Mention };
+}
+export function MessageBubble({ message, agent, mentionedAgents = [], onOpenAgent, }) {
+    const targets = useMemo(() => mentionTargetsFromAgents(mentionedAgents), [mentionedAgents]);
+    const targetById = useMemo(() => {
+        const map = new Map();
+        for (const t of targets)
+            map.set(t.id, t);
+        return map;
+    }, [targets]);
+    const components = useMemo(() => createMentionComponents(targetById, onOpenAgent), [targetById, onOpenAgent]);
+    const hit = (message.mentions?.length ?? 0) > 0;
+    const attachments = message.attachments ?? [];
+    return (_jsxs("div", { className: "ac-bubble", "data-cmp": "ac/bubble", "data-id": "msg-bubble", "data-ctx": "ac.message", "data-message": message.id, "data-source-id": message.sourceId, "data-msg-role": message.role, "data-agent": agent?.id ?? "none", "data-variant": hit ? "mention" : "plain", "data-state": message.state ?? "done", children: [attachments.length > 0 ? (_jsx(MessageAttachments, { attachments: attachments })) : null, _jsx(MessageResponse, { remarkPlugins: [remarkMentions(targets)], markdownComponents: components, children: message.text })] }));
+}
+export { cn };

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

@@ -0,0 +1,20 @@
+import type { Agent } from "../../types/agent";
+import type { ChatMessage } from "../../types/message";
+import { type MessageActionBarProps } from "./MessageActionBar";
+import { type MessageArtifact } from "./MessageArtifacts";
+export interface MessageRowProps {
+    message: ChatMessage;
+    agentById: Record<string, Agent>;
+    onOpenAgent?: (id: string) => void;
+    selectMode?: boolean;
+    selected?: boolean;
+    onToggleSelect?: (messageId: string) => void;
+    actions?: Omit<MessageActionBarProps, "copyText"> & {
+        copyText?: string;
+    };
+    artifacts?: readonly MessageArtifact[];
+    artifactTotal?: number;
+    onOpenArtifact?: (artifact: MessageArtifact) => void;
+    onOpenAllArtifacts?: () => void;
+}
+export declare function MessageRow({ message, agentById, onOpenAgent, selectMode, selected, onToggleSelect, actions, artifacts, artifactTotal, onOpenArtifact, onOpenAllArtifacts, }: MessageRowProps): import("react").JSX.Element;

package/lib/blocks/message/MessageRow.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { attributionOf } from "../../domain/attribution";
+import { orderMessageBlocks, promoteMemoryFirst, } from "../../domain/message-blocks";
+import { ToolGroup } from "../tool/ToolGroup";
+import { LatticeLoader } from "../status/LatticeLoader";
+import { MessageBubble } from "./MessageBubble";
+import { MessageActionBar } from "./MessageActionBar";
+import { MessageArtifacts } from "./MessageArtifacts";
+import { PartView } from "./PartView";
+function AgentAvatar({ agent, kind, badge, }) {
+    return (_jsx("span", { className: "ac-avatar", "data-cmp": "ac/avatar", "data-kind": kind, "data-size": "sm", "aria-hidden": "true", title: agent?.name, children: agent ? agent.badge || agent.name.slice(0, 1) : badge }));
+}
+export function MessageRow({ message, agentById, onOpenAgent, selectMode = false, selected = false, onToggleSelect, actions, artifacts, artifactTotal, onOpenArtifact, onOpenAllArtifacts, }) {
+    const parts = message.parts ?? [];
+    const self = message.role === "user";
+    const agent = message.agentId ? agentById[message.agentId] : undefined;
+    const attribution = attributionOf(message, agentById);
+    const mentioned = (message.mentions ?? [])
+        .map((id) => agentById[id])
+        .filter((a) => a !== undefined);
+    const hasText = message.text.trim() !== "";
+    const hasAttachments = (message.attachments?.length ?? 0) > 0;
+    const showBubble = (hasText || hasAttachments) &&
+        (!self ? message.role !== "tool" || parts.length === 0 : true);
+    const blocks = promoteMemoryFirst(orderMessageBlocks(message, showBubble));
+    const align = self ? "end" : "start";
+    const handleSlotClick = () => {
+        if (selectMode)
+            onToggleSelect?.(message.id);
+    };
+    const handleSlotKey = (e) => {
+        if (!selectMode)
+            return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggleSelect?.(message.id);
+        }
+    };
+    return (_jsxs("div", { className: "ac-msg-slot", "data-cmp": "ac/msg-slot", "data-id": "msg-row", "data-ctx": "ac.message", "data-message": message.id, "data-source-id": message.sourceId, "data-msg-role": message.role, "data-align": align, "data-state": message.state ?? "done", "data-select-mode": selectMode ? "true" : "false", "data-selected": selected ? "true" : "false", role: selectMode ? "checkbox" : undefined, "aria-checked": selectMode ? selected : undefined, "aria-label": selectMode ? `${selected ? "取消选择" : "选择"}这条消息` : undefined, tabIndex: selectMode ? 0 : undefined, onClick: handleSlotClick, onKeyDown: handleSlotKey, children: [selectMode ? (_jsx("span", { className: "ac-select-box", "data-cmp": "ac/select-box", "data-state": selected ? "checked" : "idle", "aria-hidden": "true", children: selected ? _jsx(Check, { className: "size-3" }) : null })) : null, _jsxs("div", { className: "ac-msg", "data-cmp": "ac/msg", "data-align": align, children: [self || attribution.agent ? (_jsx(AgentAvatar, { agent: self ? undefined : attribution.agent, kind: self ? "self" : "agent", badge: attribution.badge })) : (_jsx(AgentAvatar, { kind: "agent", badge: attribution.badge })), _jsxs("div", { className: "ac-msg__col", children: [_jsxs("div", { className: "ac-msg__meta", children: [!self ? (_jsx("span", { className: "ac-msg__who", children: attribution.name })) : null, self ? _jsx("span", { children: "\u6211" }) : _jsx("span", { children: agent?.role ?? "" }), _jsx("span", { children: message.timeLabel })] }), blocks.map((block) => {
+                                if (block.type === "text") {
+                                    return (_jsx(MessageBubble, { message: message, agent: agent, mentionedAgents: mentioned, onOpenAgent: onOpenAgent }, block.key));
+                                }
+                                if (block.type === "tool-group") {
+                                    return (_jsx(ToolGroup, { parts: block.parts, renderPart: (item) => _jsx(PartView, { part: item.part }, item.key) }, block.key));
+                                }
+                                return _jsx(PartView, { part: block.part }, block.key);
+                            }), message.state === "streaming" && !hasText ? (_jsx(LatticeLoader, { status: "working", label: `${agent?.name ?? "助手"}工作中`, "data-id": "lattice-loader" })) : null, artifacts && artifacts.length > 0 ? (_jsx(MessageArtifacts, { items: artifacts, total: artifactTotal, onOpen: onOpenArtifact, onOpenAll: onOpenAllArtifacts })) : null, actions ? (_jsx(MessageActionBar, { ...actions, copyText: actions.copyText ?? message.text })) : null] })] })] }));
+}

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

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import type { Agent } from "../../types/agent";
+import type { ChatMessage, ConversationStatus, PendingPermission } from "../../types/index";
+export interface MessageStreamProps {
+    messages: ChatMessage[];
+    members: Agent[];
+    status: ConversationStatus;
+    onOpenAgent?: (id: string) => void;
+    permissions?: PendingPermission[];
+    onRespondPermission?: (permissionId: string, approved: boolean, remembered: boolean) => void;
+    selectMode?: boolean;
+    selectedIds?: ReadonlySet<string>;
+    onToggleSelect?: (messageId: string) => void;
+    messageActions?: (message: ChatMessage) => import("./MessageRow").MessageRowProps["actions"];
+    messageArtifacts?: (message: ChatMessage) => {
+        items: readonly import("./MessageArtifacts").MessageArtifact[];
+        total?: number;
+        onOpen?: (a: import("./MessageArtifacts").MessageArtifact) => void;
+        onOpenAll?: () => void;
+    } | undefined;
+    renderNote?: (part: ReactNode) => ReactNode;
+}
+export declare function MessageStream({ messages, members, status, onOpenAgent, permissions, onRespondPermission, selectMode, selectedIds, onToggleSelect, messageActions, messageArtifacts, }: MessageStreamProps): import("react").JSX.Element;