@fromsko/chat-ui 0.0.0-stage → 0.1.6

package/lib/blocks/composer/ComposerToolbar.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import type { ContextUsageSegment, ContextWindowPreset } from "../../types/message";
+import { type ComposerModelSwitch, type PermissionModeSwitch } from "./ComposerMenus";
+export interface ComposerToolbarProps {
+    picker: ReactNode;
+    permissionMode?: PermissionModeSwitch;
+    modelSwitch?: ComposerModelSwitch;
+    onManageModel?: () => void;
+    streaming: boolean;
+    canStop: boolean;
+    empty: boolean;
+    onStop?: () => void;
+    onSubmit: () => void;
+    contextUsage?: {
+        input: number;
+        output?: number;
+        window: number;
+        breakdown?: readonly ContextUsageSegment[];
+        windowPresets?: readonly ContextWindowPreset[];
+        onWindowChange?: (window: number) => void;
+    };
+    visionTag: ReactNode;
+    onMic?: () => void;
+    micState?: "idle" | "listening";
+    trailing?: ReactNode;
+}
+export declare function ComposerToolbar({ picker, permissionMode, modelSwitch, onManageModel, streaming, canStop, empty, onStop, onSubmit, contextUsage, visionTag, onMic, micState, trailing, }: ComposerToolbarProps): import("react").JSX.Element;

package/lib/blocks/composer/ComposerToolbar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, Square } from "lucide-react";
+import { ContextUsage } from "../cards/ContextUsage";
+import { SlingButton } from "./SlingButton";
+import { ComposerModelChip, ComposerPermChip, } from "./ComposerMenus";
+export function ComposerToolbar({ picker, permissionMode, modelSwitch, onManageModel, streaming, canStop, empty, onStop, onSubmit, contextUsage, visionTag, onMic, micState = "idle", trailing, }) {
+    return (_jsxs("div", { className: "ac-composer__bar", children: [_jsxs("div", { className: "ac-composer__left", children: [picker, permissionMode ? (_jsx(ComposerPermChip, { permissionMode: permissionMode })) : null] }), _jsx("span", { className: "ac-composer__count", children: streaming
+                    ? "Enter 进入待发队列 · Shift+Enter 换行"
+                    : empty
+                        ? ""
+                        : "Enter 发送 · Shift+Enter 换行" }), _jsxs("div", { className: "ac-composer__right", children: [canStop ? (_jsx("button", { type: "button", className: "ac-composer__stop-ring", "aria-label": "\u505C\u6B62\u751F\u6210", title: "\u505C\u6B62\u751F\u6210", onClick: onStop, children: _jsx(Square, { className: "size-3" }) })) : null, modelSwitch ? (_jsx(ComposerModelChip, { modelSwitch: modelSwitch, onManage: onManageModel })) : null, contextUsage ? _jsx(ContextUsage, { ...contextUsage }) : null, visionTag, trailing, onMic ? (_jsx("button", { type: "button", className: "ac-composer__mic", "data-state": micState, "aria-label": micState === "listening" ? "停止录音" : "语音输入", title: micState === "listening" ? "停止录音" : "语音输入", onClick: onMic, children: _jsx(Mic, { className: "size-4" }) })) : null, _jsx(SlingButton, { onSend: canStop ? () => onStop?.() : onSubmit, disabled: !canStop && empty, ariaLabel: canStop
+                            ? "停止生成"
+                            : empty
+                                ? "输入消息后发送（Enter）"
+                                : "发送消息（Enter · Shift+Enter 换行）", children: canStop ? _jsx(Square, { className: "size-4" }) : undefined })] })] }));
+}

package/lib/blocks/composer/MentionPicker.d.ts

@@ -0,0 +1,13 @@
+import type { ComposerTrigger, PaletteItem } from "../../types/composer";
+export interface MentionPickerProps {
+    open: boolean;
+    trigger: ComposerTrigger | null;
+    selectedAgent?: {
+        name: string;
+    } | null;
+    items: PaletteItem[];
+    index: number;
+    onMove: (delta: number) => void;
+    onPick: (item: PaletteItem) => void;
+}
+export declare function MentionPicker({ open, trigger, selectedAgent, items, index, onMove, onPick, }: MentionPickerProps): import("react").JSX.Element;

package/lib/blocks/composer/MentionPicker.js

@@ -0,0 +1,71 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { File, Folder, Users } from "lucide-react";
+const SOURCE_LABEL = {
+    builtin: "内置",
+    skill: "技能",
+    custom: "自定义",
+};
+export function MentionPicker({ open, trigger, selectedAgent, items, index, onMove, onPick, }) {
+    const uid = useId();
+    const rootRef = useRef(null);
+    const shownRef = useRef(false);
+    const skillMode = Boolean(selectedAgent);
+    const mentionMode = trigger === "@";
+    useEffect(() => {
+        if (open && !shownRef.current) {
+            shownRef.current = true;
+        }
+        if (!open)
+            shownRef.current = false;
+        if (!open)
+            return;
+        const el = rootRef.current?.querySelector(`[data-opt="${index}"]`);
+        el?.scrollIntoView({ block: "nearest" });
+    }, [open, index]);
+    const optId = (i) => `${uid}-opt-${i}`;
+    const optionProps = (i) => ({
+        id: optId(i),
+        role: "option",
+        "data-opt": i,
+        "data-state": i === index ? "active" : "idle",
+        "aria-selected": i === index,
+        "aria-current": i === index,
+        onMouseEnter: () => onMove(i - index),
+        onClick: () => onPick(items[i]),
+    });
+    const mention = items.filter((i) => i.kind === "all" || i.kind === "agent");
+    const commands = items.filter((i) => i.kind === "command");
+    const files = items.filter((i) => i.kind === "file");
+    const gi = (item) => items.indexOf(item);
+    return (_jsx("div", { ref: rootRef, className: "ac-mention shadow-lg", "data-cmp": "ac/mention-menu", "data-trigger": trigger ?? undefined, "data-state": open ? "open" : "closed", hidden: !open, onMouseDown: (e) => e.preventDefault(), children: open ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ac-mention__list", role: "listbox", "aria-label": skillMode
+                        ? `@${selectedAgent?.name ?? ""} 的技能`
+                        : mentionMode
+                            ? "提及成员与文件"
+                            : "斜杠命令", "aria-activedescendant": optId(index), children: [skillMode ? (_jsxs("div", { role: "group", "aria-labelledby": `${uid}-g-skill`, children: [_jsxs("div", { className: "ac-mention__label", id: `${uid}-g-skill`, children: ["@", selectedAgent?.name, " \u7684\u6280\u80FD \u00B7 Esc \u8FD4\u56DE"] }), commands.map((item) => {
+                                    if (item.kind !== "command")
+                                        return null;
+                                    const Icon = item.command.icon;
+                                    return (_jsxs("button", { type: "button", className: "ac-mention__cmd", "data-cmp": "ac/mention-skill-row", title: item.command.description, ...optionProps(gi(item)), children: [_jsx(Icon, { className: "ac-mention__cmd-icon", size: 16 }), _jsxs("span", { className: "ac-mention__cmd-body", children: [_jsx("span", { className: "ac-mention__cmd-label", children: item.command.label }), _jsx("span", { className: "ac-mention__cmd-desc", children: item.command.description })] }), _jsx("span", { className: "ac-mention__cmd-trigger", children: item.command.trigger }), _jsx("span", { className: "ac-mention__src", "data-src": "skill", children: "\u6280\u80FD" })] }, item.command.id));
+                                })] })) : null, !skillMode && mention.length > 0 ? (_jsxs("div", { role: "group", children: [_jsx("div", { className: "ac-mention__label", children: "\u63D0\u53CA" }), mention.map((item) => {
+                                    if (item.kind === "all") {
+                                        return (_jsxs("button", { type: "button", className: "ac-mention__all", ...optionProps(gi(item)), children: [_jsx(Users, { size: 14 }), "\u6240\u6709\u4EBA"] }, "all"));
+                                    }
+                                    if (item.kind === "agent") {
+                                        return (_jsxs("button", { type: "button", className: "ac-mention__item", ...optionProps(gi(item)), children: [_jsx("span", { className: "ac-avatar", "data-size": "sm", "aria-hidden": "true", children: item.agent.badge || item.agent.name.slice(0, 1) }), item.agent.name] }, item.agent.id));
+                                    }
+                                    return null;
+                                })] })) : null, !skillMode && commands.length > 0 ? (_jsxs("div", { role: "group", children: [_jsx("div", { className: "ac-mention__label", children: "\u547D\u4EE4" }), commands.map((item) => {
+                                    if (item.kind !== "command")
+                                        return null;
+                                    const Icon = item.command.icon;
+                                    return (_jsxs("button", { type: "button", className: "ac-mention__cmd", title: item.command.description, ...optionProps(gi(item)), children: [_jsx(Icon, { className: "ac-mention__cmd-icon", size: 16 }), _jsxs("span", { className: "ac-mention__cmd-body", children: [_jsx("span", { className: "ac-mention__cmd-label", children: item.command.label }), _jsx("span", { className: "ac-mention__cmd-desc", children: item.command.description })] }), _jsx("span", { className: "ac-mention__cmd-trigger", children: item.command.trigger }), _jsx("span", { className: "ac-mention__src", "data-src": item.command.source ?? "builtin", children: SOURCE_LABEL[item.command.source ?? "builtin"] })] }, item.command.id));
+                                })] })) : null, !skillMode && files.length > 0 ? (_jsxs("div", { role: "group", children: [_jsx("div", { className: "ac-mention__label", children: "\u6587\u4EF6" }), files.map((item) => {
+                                    if (item.kind !== "file")
+                                        return null;
+                                    const Icon = item.entryKind === "dir" ? Folder : File;
+                                    return (_jsxs("button", { type: "button", className: "ac-mention__file", title: item.path, ...optionProps(gi(item)), children: [_jsx(Icon, { size: 14 }), _jsx("span", { className: "ac-mention__file-path", children: item.path })] }, item.path));
+                                })] })) : null] }), _jsx("div", { className: "ac-mention__hint", children: skillMode
+                        ? "↑↓ 选择 · Tab/Enter 确认 · Esc 返回"
+                        : "↑↓ 选择 · Tab/Enter 确认 · Esc 关闭" })] })) : null }));
+}

package/lib/blocks/composer/PromptPop.d.ts

@@ -0,0 +1,7 @@
+export interface PromptPopProps {
+    items: readonly string[];
+    onPick: (text: string) => void;
+    maxMarks?: number;
+    className?: string;
+}
+export declare function PromptPop({ items, onPick, maxMarks, className, }: PromptPopProps): import("react").JSX.Element | null;

package/lib/blocks/composer/PromptPop.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../utils/cn";
+export function PromptPop({ items, onPick, maxMarks = 8, className, }) {
+    const [open, setOpen] = useState(false);
+    const [hovered, setHovered] = useState(null);
+    const rootRef = useRef(null);
+    const closeTimer = useRef(0);
+    const marks = items.slice(0, maxMarks);
+    useEffect(() => {
+        return () => window.clearTimeout(closeTimer.current);
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [open]);
+    if (items.length === 0)
+        return null;
+    const hold = () => {
+        window.clearTimeout(closeTimer.current);
+        setOpen(true);
+    };
+    const release = () => {
+        window.clearTimeout(closeTimer.current);
+        closeTimer.current = window.setTimeout(() => {
+            setOpen(false);
+            setHovered(null);
+        }, 120);
+    };
+    return (_jsxs("div", { ref: rootRef, className: cn("ac-prompt-pop", className), "data-cmp": "ai/prompt-pop", "data-id": "prompt-pop", "data-state": open ? "open" : "idle", onMouseEnter: hold, onMouseLeave: release, onFocus: hold, onBlur: release, children: [_jsx("button", { type: "button", className: "ac-prompt-pop__rail", "data-cmp": "ai/prompt-pop-rail", "aria-label": `历史提示词（${items.length} 条）`, "aria-expanded": open, onClick: () => setOpen((v) => !v), children: marks.map((_, i) => (_jsx("span", { className: "ac-prompt-pop__dash", "data-active": hovered === i ? "true" : "false", "data-latest": i === 0 ? "true" : "false", onMouseEnter: () => setHovered(i) }, i))) }), open ? (_jsxs("div", { className: "ac-prompt-pop__panel", "data-cmp": "ai/prompt-pop-panel", "data-id": "prompt-pop-panel", role: "listbox", "aria-label": "\u5386\u53F2\u63D0\u793A\u8BCD", children: [_jsx("div", { className: "ac-prompt-pop__head", children: "\u5386\u53F2\u63D0\u793A\u8BCD" }), items.map((text, i) => (_jsxs("button", { type: "button", role: "option", "aria-selected": false, "data-cmp": "ai/prompt-pop-item", className: "ac-prompt-pop__row", title: text, onMouseEnter: () => setHovered(i), onClick: () => {
+                            onPick(text);
+                            setOpen(false);
+                        }, children: [_jsx("span", { className: "ac-prompt-pop__text", children: text }), _jsx("span", { className: "ac-prompt-pop__marker", "aria-hidden": "true" })] }, `${i}-${text.slice(0, 12)}`)))] })) : null] }));
+}

package/lib/blocks/composer/QueuedPrompts.d.ts

@@ -0,0 +1,14 @@
+import type { QueuedPrompt } from "../../types/conversation";
+export declare const MAX_QUEUED_PROMPTS = 8;
+export declare const QUEUED_FULL_NOTICE = "\u5F85\u53D1\u961F\u5217\u5DF2\u6EE1\uFF088 \u6761\uFF09\uFF0C\u8BF7\u5148\u5904\u7406";
+export interface QueuedPromptsProps {
+    items: readonly QueuedPrompt[];
+    canSendNow: boolean;
+    onMoveUp: (id: string) => void;
+    onMoveDown: (id: string) => void;
+    onSendNow: (id: string) => void;
+    onEdit: (id: string) => void;
+    onRemove: (id: string) => void;
+    onClear?: () => void;
+}
+export declare function QueuedPrompts({ items, canSendNow, onMoveUp, onMoveDown, onSendNow, onEdit, onRemove, onClear, }: QueuedPromptsProps): import("react").JSX.Element | null;

package/lib/blocks/composer/QueuedPrompts.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ArrowDown, ArrowUp, ChevronDown, GripVertical, ListOrdered, Paperclip, Pencil, Send, Trash2, X, } from "lucide-react";
+export const MAX_QUEUED_PROMPTS = 8;
+export const QUEUED_FULL_NOTICE = `待发队列已满（${MAX_QUEUED_PROMPTS} 条），请先处理`;
+function ActBtn({ label, disabled, onClick, accent, children, }) {
+    return (_jsx("button", { type: "button", "data-cmp": "ac/queued-action", "data-action": label, "data-state": disabled ? "disabled" : "idle", title: label, "aria-label": label, disabled: disabled, className: accent
+            ? "ac-queued-row__act ac-queued-row__act--accent"
+            : "ac-queued-row__act", onClick: onClick, children: children }));
+}
+export function QueuedPrompts({ items, canSendNow, onMoveUp, onMoveDown, onSendNow, onEdit, onRemove, onClear, }) {
+    const [open, setOpen] = useState(true);
+    if (items.length === 0)
+        return null;
+    const full = items.length >= MAX_QUEUED_PROMPTS;
+    return (_jsxs("div", { className: "ac-queued", "data-cmp": "ac/queued-list", "data-count": items.length, "data-state": open ? "open" : full ? "full" : "idle", role: "list", "aria-label": "\u5F85\u53D1\u961F\u5217", children: [items.length > 1 ? (_jsxs("div", { className: "ac-queued__head", children: [_jsxs("button", { type: "button", "data-cmp": "ac/queued-toggle", className: "ac-queued__pill", "aria-expanded": open, onClick: () => setOpen((v) => !v), title: open ? "收起待发队列" : "展开待发队列", children: [_jsx(ListOrdered, { className: "ac-queued__head-icon" }), _jsx("span", { className: "ac-queued__head-title", children: "\u5F85\u53D1" }), _jsx("span", { className: "ac-queued__badge", "data-state": full ? "full" : "idle", title: `${items.length}/${MAX_QUEUED_PROMPTS}`, children: items.length }), !open ? (_jsx("span", { className: "ac-queued__preview", children: items[0]?.text })) : null, _jsx(ChevronDown, { className: "ac-queued__chev", "data-open": open ? "true" : "false" })] }), onClear ? (_jsx("button", { type: "button", "data-cmp": "ac/queued-clear", className: "ac-queued__clear", onClick: onClear, title: "\u6E05\u7A7A\u5F85\u53D1\u961F\u5217", children: _jsx(Trash2, { size: 11 }) })) : null] })) : null, open ? (_jsx("div", { className: "ac-queued__body", children: items.map((item, i) => {
+                    const first = i === 0;
+                    const last = i === items.length - 1;
+                    return (_jsxs("div", { className: "ac-queued-row", "data-cmp": "ac/queued-row", "data-state": first ? "head" : "waiting", role: "listitem", children: [_jsx(GripVertical, { className: "ac-queued-row__grip", "aria-hidden": "true", size: 12 }), _jsxs("div", { className: "ac-queued-row__text", children: [_jsx("span", { className: "ac-queued-row__content", title: item.text, children: item.text }), (item.attachments?.length ?? 0) > 0 ? (_jsxs("span", { className: "ac-queued-row__att", title: `含 ${item.attachments?.length} 个附件`, children: [_jsx(Paperclip, { size: 10 }), item.attachments?.length] })) : null] }), _jsxs("div", { className: "ac-queued-row__acts", children: [canSendNow ? (_jsx(ActBtn, { label: "\u7ACB\u5373\u53D1\u9001", accent: true, onClick: () => onSendNow(item.id), children: _jsx(Send, { size: 11 }) })) : null, _jsx(ActBtn, { label: "\u4E0A\u79FB", disabled: first, onClick: () => onMoveUp(item.id), children: _jsx(ArrowUp, { size: 11 }) }), _jsx(ActBtn, { label: "\u4E0B\u79FB", disabled: last, onClick: () => onMoveDown(item.id), children: _jsx(ArrowDown, { size: 11 }) }), _jsx(ActBtn, { label: "\u53D6\u56DE\u7F16\u8F91", onClick: () => onEdit(item.id), children: _jsx(Pencil, { size: 11 }) }), _jsx(ActBtn, { label: "\u79FB\u51FA\u961F\u5217", onClick: () => onRemove(item.id), children: _jsx(X, { size: 11 }) })] })] }, item.id));
+                }) })) : null] }));
+}

package/lib/blocks/composer/SlingButton.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export interface SlingButtonProps {
+    onSend: () => void;
+    disabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+    size?: number;
+    ariaLabel?: string;
+}
+export declare function SlingButton({ onSend, disabled, children, className, size, ariaLabel, }: SlingButtonProps): import("react").JSX.Element;

package/lib/blocks/composer/SlingButton.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { ArrowUp } from "lucide-react";
+import { cn } from "../../utils/cn";
+const ARM_AT = 36;
+const MAX_PULL = 96;
+export function SlingButton({ onSend, disabled = false, children, className, size = 44, ariaLabel = "发送", }) {
+    const wellRef = useRef(null);
+    const canvasRef = useRef(null);
+    const [pull, setPull] = useState(0);
+    const [angle, setAngle] = useState(-Math.PI / 2);
+    const pulling = useRef(false);
+    const origin = useRef({ x: 0, y: 0 });
+    const particles = useRef([]);
+    const raf = useRef(0);
+    const fire = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+            const ctx = canvas.getContext("2d");
+            if (ctx) {
+                const cx = size / 2;
+                const cy = size / 2;
+                for (let i = 0; i < 14; i++) {
+                    const a = -Math.PI / 2 + (Math.random() - 0.5) * (Math.PI / 1.5);
+                    const sp = 1.6 + Math.random() * 3;
+                    particles.current.push({
+                        x: cx,
+                        y: cy,
+                        vx: Math.cos(a) * sp,
+                        vy: Math.sin(a) * sp,
+                        r: 1 + Math.random() * 2,
+                        life: 1,
+                    });
+                }
+            }
+        }
+        onSend();
+        setPull(0);
+        const el = wellRef.current;
+        if (el) {
+            el.animate([
+                { transform: "scale(0.82)" },
+                { transform: "scale(1.08)" },
+                { transform: "scale(1)" },
+            ], { duration: 340, easing: "cubic-bezier(0.22, 1, 0.36, 1)" });
+        }
+    }, [onSend, size]);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const tick = () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            particles.current = particles.current.filter((p) => p.life > 0);
+            for (const p of particles.current) {
+                p.x += p.vx;
+                p.y += p.vy;
+                p.vy += 0.05;
+                p.life -= 0.035;
+                ctx.globalAlpha = Math.max(0, p.life);
+                ctx.fillStyle = "var(--accent-primary)";
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            ctx.globalAlpha = 1;
+            raf.current = requestAnimationFrame(tick);
+        };
+        raf.current = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf.current);
+    }, []);
+    const onPointerDown = (e) => {
+        if (disabled)
+            return;
+        pulling.current = true;
+        origin.current = { x: e.clientX, y: e.clientY };
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+        if (!pulling.current)
+            return;
+        const dx = e.clientX - origin.current.x;
+        const dy = e.clientY - origin.current.y;
+        const dist = Math.min(Math.hypot(dx, dy), MAX_PULL);
+        setPull(dist);
+        setAngle(Math.atan2(dy, dx));
+    };
+    const onPointerUp = () => {
+        if (!pulling.current)
+            return;
+        pulling.current = false;
+        if (pull >= ARM_AT)
+            fire();
+        else {
+            setPull(0);
+            if (pull > 0)
+                onSend();
+            else
+                onSend();
+        }
+    };
+    const pct = Math.min(1, pull / MAX_PULL);
+    const arcR = size / 2 - 2;
+    return (_jsxs("button", { ref: wellRef, type: "button", "data-cmp": "ai/sling-button", "data-id": "send-btn", "data-state": disabled ? "disabled" : pull > 0 ? "pulling" : "idle", "aria-label": ariaLabel, title: ariaLabel, disabled: disabled, className: cn("relative touch-none select-none rounded-full", disabled && "opacity-40", className), style: { width: size, height: size }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, children: [_jsx("canvas", { ref: canvasRef, width: size * 2, height: size * 2, className: "pointer-events-none absolute inset-0", style: { width: size, height: size } }), _jsxs("svg", { className: "pointer-events-none absolute inset-0", width: size, height: size, "aria-hidden": "true", children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: arcR, fill: "none", stroke: "var(--border-600)", strokeWidth: 2 }), pct > 0 ? (_jsx("circle", { cx: size / 2, cy: size / 2, r: arcR, fill: "none", stroke: "var(--accent-primary)", strokeWidth: 2.5, strokeLinecap: "round", strokeDasharray: 2 * Math.PI * arcR, strokeDashoffset: 2 * Math.PI * arcR * (1 - pct), transform: `rotate(-90 ${size / 2} ${size / 2})` })) : null] }), _jsx("span", { className: "absolute inset-[5px] grid place-items-center rounded-full transition-transform", style: {
+                    background: "var(--primary)",
+                    color: "var(--primary-foreground)",
+                    transform: `translate(${Math.cos(angle) * pull * 0.28}px, ${Math.sin(angle) * pull * 0.28}px) scale(${1 - pct * 0.12})`,
+                }, children: children ?? _jsx(ArrowUp, { className: "size-[42%]" }) })] }));
+}

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

@@ -0,0 +1,7 @@
+export { Composer, ComposerAttachmentsStrip, ComposerGrip, ComposerInput, ComposerModelChip, ComposerPermChip, ComposerToolbar, MentionPicker, QueuedPrompts, VisionTag, focusFieldAt, } from "./Composer";
+export type { ComposerProps, ComposerPaletteLike, ComposerSubmitApi, QueuedPromptsApi, StagedAttachment, ComposerModelSwitch, PermissionModeSwitch, } from "./Composer";
+export type { ComposerInputProps } from "./ComposerInput";
+export type { ComposerToolbarProps } from "./ComposerToolbar";
+export type { MentionPickerProps } from "./MentionPicker";
+export type { ComposerAttachmentsStripProps } from "./ComposerAttachments";
+export type { QueuedPromptsProps } from "./QueuedPrompts";

package/lib/blocks/composer/index.js

@@ -0,0 +1 @@
+export { Composer, ComposerAttachmentsStrip, ComposerGrip, ComposerInput, ComposerModelChip, ComposerPermChip, ComposerToolbar, MentionPicker, QueuedPrompts, VisionTag, focusFieldAt, } from "./Composer";

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

@@ -0,0 +1,4 @@
+export interface ChatEmptySceneProps {
+    onStart?: () => void;
+}
+export declare function ChatEmptyScene({ onStart }: ChatEmptySceneProps): import("react").JSX.Element;

package/lib/blocks/conversation/ChatEmptyScene.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageSquarePlus, Sparkles, Users } from "lucide-react";
+import { Button } from "../../primitives/Button";
+const START_POINTS = [
+    {
+        icon: Sparkles,
+        title: "让 Agent 干活",
+        hint: "描述目标，Agent 自己拆步骤、动手、汇报结果",
+    },
+    {
+        icon: Users,
+        title: "多 Agent 协作",
+        hint: "@ 提及不同角色，让专家们一起把事办成",
+    },
+];
+export function ChatEmptyScene({ onStart }) {
+    return (_jsxs("div", { className: "ac-empty-scene", "data-cmp": "ac/chat-empty-scene", "data-state": "empty", children: [_jsx("span", { className: "ac-empty-scene__mark", children: _jsx(MessageSquarePlus, { size: 22 }) }), _jsx("p", { className: "ac-empty-scene__title", children: "\u5F00\u59CB\u4E00\u6BB5\u5BF9\u8BDD" }), _jsx("p", { className: "ac-empty-scene__hint", children: "\u4ECE\u5DE6\u4FA7\u9009\u4E00\u4E2A\u4F1A\u8BDD\u7EE7\u7EED\uFF0C\u6216\u65B0\u5EFA\u4E00\u4E2A\u2014\u2014\u4F60\u7684 Agent \u4F19\u4F34\u5728\u8FD9\u91CC\u7B49\u4F60\u3002" }), onStart ? (_jsx(Button, { className: "ac-empty-scene__cta", "data-cmp": "ac/chat-empty-start", onClick: onStart, children: "\u65B0\u5EFA\u4F1A\u8BDD" })) : null, _jsx("ul", { className: "ac-empty-scene__points", children: START_POINTS.map((point) => {
+                    const Icon = point.icon;
+                    return (_jsxs("li", { className: "ac-empty-scene__point", children: [_jsx("span", { className: "ac-empty-scene__point-icon", children: _jsx(Icon, { size: 14 }) }), _jsxs("span", { className: "ac-empty-scene__point-body", children: [_jsx("span", { className: "ac-empty-scene__point-title", children: point.title }), _jsx("span", { className: "ac-empty-scene__point-hint", children: point.hint })] })] }, point.title));
+                }) })] }));
+}

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

@@ -0,0 +1,13 @@
+import type { Agent } from "../../types/agent";
+export interface ChatHeaderProps {
+    title: string;
+    subtitle: string;
+    members?: readonly Agent[];
+    timeLabel?: string;
+    detailOpen: boolean;
+    showBack: boolean;
+    onBack: () => void;
+    onOpenDetail: () => void;
+    onSearch?: () => void;
+}
+export declare function ChatHeader({ title, subtitle, members, timeLabel, detailOpen, showBack, onBack, onOpenDetail, onSearch, }: ChatHeaderProps): import("react").JSX.Element;

package/lib/blocks/conversation/ChatHeader.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLeft, Info, Search } from "lucide-react";
+import { Button } from "../../primitives/Button";
+import { Tooltip } from "../../primitives/Tooltip";
+const AVATAR_STACK_MAX = 4;
+function AvatarStack({ members }) {
+    const shown = members.slice(0, AVATAR_STACK_MAX);
+    const overflow = members.length - shown.length;
+    return (_jsxs("div", { className: "ac-id-avatars", "data-cmp": "ac/chat-header-avatars", "aria-label": `成员 ${members.length} 位`, children: [overflow > 0 ? (_jsxs("span", { className: "ac-id-avatars__more", title: `还有 ${overflow} 位成员`, children: ["+", overflow] })) : null, shown.map((member, index) => (_jsx("span", { className: "ac-id-avatars__item", title: member.name, children: _jsx("span", { className: "ac-avatar", "data-kind": "agent", "data-size": "sm", "data-show-status": index === 0 ? "true" : undefined, "aria-hidden": "true", children: member.badge || member.name.slice(0, 1) }) }, member.id)))] }));
+}
+function IdentityMeta({ models, timeLabel, }) {
+    if (models.length === 0 && !timeLabel)
+        return null;
+    return (_jsxs("div", { className: "ac-id-meta", "data-cmp": "ac/chat-header-meta", children: [models.slice(0, 3).map((model) => (_jsx("span", { className: "ac-id-meta__chip", children: model }, model))), models.length > 3 ? (_jsxs("span", { className: "ac-id-meta__chip", children: ["+", models.length - 3, " \u6A21\u578B"] })) : null, timeLabel ? (_jsx("span", { className: "ac-id-meta__time", children: timeLabel })) : null] }));
+}
+export function ChatHeader({ title, subtitle, members, timeLabel, detailOpen, showBack, onBack, onOpenDetail, onSearch, }) {
+    const isGroup = (members?.length ?? 0) > 1;
+    const models = Array.from(new Set((members ?? []).map((m) => m.model).filter(Boolean)));
+    return (_jsxs("header", { className: "ac-chat__head", "data-cmp": "ac/chat-header", "data-state": detailOpen ? "open" : "closed", children: [showBack ? (_jsx(Button, { variant: "ghost", size: "icon-sm", className: "ac-icon-btn ac-chat__back", "aria-label": "\u8FD4\u56DE\u4F1A\u8BDD\u5217\u8868", onClick: onBack, children: _jsx(ArrowLeft, { size: 15 }) })) : null, _jsxs("div", { className: "ac-chat__titles", children: [isGroup && members ? _jsx(AvatarStack, { members: members }) : null, _jsxs("div", { className: "ac-chat__headings", children: [_jsx("div", { className: "ac-chat__title", children: title }), _jsxs("div", { className: "ac-chat__subline", children: [_jsx("span", { className: "ac-chat__sub", children: subtitle }), _jsx(IdentityMeta, { models: models, timeLabel: timeLabel })] })] })] }), _jsx("span", { className: "ac-chat__grow" }), _jsxs("div", { className: "ac-chat__actions", children: [onSearch ? (_jsx(Tooltip, { content: "\u641C\u7D22\u804A\u5929\uFF08\u2318K\uFF09", children: _jsx(Button, { variant: "ghost", size: "icon-sm", className: "ac-icon-btn", "aria-label": "\u641C\u7D22\u804A\u5929\u8BB0\u5F55", onClick: onSearch, children: _jsx(Search, { size: 15 }) }) })) : null, _jsx(Button, { variant: "ghost", size: "icon-sm", className: "ac-icon-btn", "aria-label": "\u4F1A\u8BDD\u4FE1\u606F", "data-state": detailOpen ? "active" : "idle", onClick: onOpenDetail, children: _jsx(Info, { size: 15 }) })] })] }));
+}

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

@@ -0,0 +1,90 @@
+import { type ReactNode } from "react";
+import type { Agent } from "../../types/agent";
+import type { Attachment, ChatMessage } from "../../types/message";
+import type { Conversation, ConversationStatus, PendingAsk, PendingPermission } from "../../types/conversation";
+import type { ComposerModelSwitch, ComposerPaletteLike, ComposerSubmitApi, PermissionModeSwitch, QueuedPromptsApi, SlashCommand } from "../../types/composer";
+import type { SelectionTarget } from "../../types/callbacks";
+import { type MessageStreamProps } from "../message/MessageStream";
+import { type TodoState } from "../cards/TodoCard";
+export type SmartStopPlan = {
+    kind: "restore";
+    draft: string;
+} | {
+    kind: "settle";
+};
+export declare function planSmartStop(messages: readonly ChatMessage[]): SmartStopPlan;
+export interface ChatPaneProps {
+    conversation: Conversation | null;
+    members: Agent[];
+    messages: ChatMessage[];
+    status: ConversationStatus;
+    draft: string;
+    onDraftChange: (v: string) => void;
+    onSend: (text: string, attachments?: Attachment[]) => void;
+    onOpenDetail: () => void;
+    onOpenAgent?: (id: string) => void;
+    onBack: () => void;
+    onStop?: () => void;
+    detailOpen?: boolean;
+    onSearch?: () => void;
+    permissions?: PendingPermission[];
+    onRespondPermission?: (permissionId: string, approved: boolean, remembered: boolean) => void;
+    pendingAsk?: PendingAsk | null;
+    askQueued?: number;
+    onAnswerAsk?: (callId: string, answer: string) => void;
+    onSkipAsk?: (callId: string) => void;
+    onNotice?: (message: string) => void;
+    onNewConversation?: () => void;
+    onOpenProfile?: () => void;
+    modelSwitch?: ComposerModelSwitch;
+    permissionMode?: PermissionModeSwitch;
+    onMic?: () => void;
+    micState?: "idle" | "listening";
+    toolbarTrailing?: ReactNode;
+    onContextWindowChange?: (window: number) => void;
+    slashExtra?: readonly SlashCommand[];
+    slashExpand?: (draft: string) => string | null;
+    onFavoriteSelection?: (target: SelectionTarget) => void;
+    selectionActive?: boolean;
+    selectedIds?: string[];
+    onToggleSelect?: (messageId: string) => void;
+    onBatchCopy?: () => void;
+    onBatchRemove?: () => void;
+    batchBusy?: boolean;
+    onExitSelection?: () => void;
+    messageActions?: MessageStreamProps["messageActions"];
+    messageArtifacts?: MessageStreamProps["messageArtifacts"];
+    selectionPop?: {
+        left: number;
+        top: number;
+        target: SelectionTarget;
+    } | null;
+    onDismissSelectionPop?: () => void;
+    onInsertSelectionText?: (text: string) => void;
+    composer?: {
+        palette: ComposerPaletteLike;
+        submission: ComposerSubmitApi;
+        queued?: QueuedPromptsApi;
+        onArrowUp?: () => boolean;
+        onArrowDown?: () => boolean;
+        attachmentPicker?: ReactNode;
+        attachmentHeader?: ReactNode;
+        stagedAttachments?: import("../composer/Composer").StagedAttachment[];
+        onRemoveAttachment?: (id: string) => void;
+        dragHandlers?: {
+            onPaste?: (e: React.ClipboardEvent) => void;
+            onDragOver?: (e: React.DragEvent) => void;
+            onDrop?: (e: React.DragEvent) => void;
+        };
+        visionTag?: ReactNode;
+        slashExtra?: readonly SlashCommand[];
+    };
+    todoState?: TodoState | null;
+    promptPop?: {
+        items: readonly string[];
+        onPick: (text: string) => void;
+    };
+    subtitle?: string;
+    children?: ReactNode;
+}
+export declare function ChatPane(props: ChatPaneProps): import("react").JSX.Element;

package/lib/blocks/conversation/ChatPane.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { capabilitiesOf } from "../../domain/selection-gates";
+import { Composer } from "../composer/Composer";
+import { PromptPop } from "../composer/PromptPop";
+import { MessageStream, } from "../message/MessageStream";
+import { SelectionActions } from "../selection/SelectionActions";
+import { SelectionBar } from "../selection/SelectionBar";
+import { TodoCard } from "../cards/TodoCard";
+import { ChatEmptyScene } from "./ChatEmptyScene";
+import { ChatHeader } from "./ChatHeader";
+export function planSmartStop(messages) {
+    for (let i = messages.length - 1; i >= 0; i--) {
+        const m = messages[i];
+        if (m.role === "user") {
+            return { kind: "restore", draft: m.text };
+        }
+        if ((m.role === "assistant" && m.text.trim().length > 0) ||
+            (m.parts && m.parts.length > 0)) {
+            return { kind: "settle" };
+        }
+    }
+    return { kind: "settle" };
+}
+export function ChatPane(props) {
+    const { conversation, members, messages, status, draft, onDraftChange, onSend, onOpenDetail, onOpenAgent, onBack, onStop, detailOpen = false, onSearch, permissions, onRespondPermission, pendingAsk, askQueued, onAnswerAsk, onSkipAsk, onNotice, onNewConversation, onOpenProfile, modelSwitch, permissionMode, onMic, micState, toolbarTrailing, onContextWindowChange, slashExtra, slashExpand, onFavoriteSelection, selectionActive = false, selectedIds = [], onToggleSelect, onBatchCopy, onBatchRemove, batchBusy = false, onExitSelection, messageActions, messageArtifacts, selectionPop, onDismissSelectionPop, onInsertSelectionText, composer, todoState, promptPop, subtitle, children, } = props;
+    const lastContextUsage = useMemo(() => {
+        for (let i = messages.length - 1; i >= 0; i--) {
+            const u = messages[i].contextUsage;
+            if (u && u.window > 0)
+                return u;
+        }
+        return undefined;
+    }, [messages]);
+    if (!conversation) {
+        return (_jsx("section", { className: "ac-chat", "data-cmp": "ac/chat", "data-state": "idle", children: _jsx(ChatEmptyScene, { onStart: onNewConversation }) }));
+    }
+    const capabilities = capabilitiesOf(messages, selectedIds);
+    const handleSmartStop = () => {
+        if (!onStop)
+            return;
+        const plan = planSmartStop(messages);
+        if (plan.kind === "restore" && draft.trim().length === 0) {
+            onDraftChange(plan.draft);
+            onNotice?.("已停止：输入框已还原上一条消息，可修改后重发");
+        }
+        onStop();
+    };
+    return (_jsxs("section", { className: "ac-chat", "data-cmp": "ac/chat", "data-state": status, children: [_jsx(ChatHeader, { title: conversation.title, subtitle: subtitle ?? `${members.length} 位成员`, members: members, timeLabel: conversation.timeLabel, detailOpen: detailOpen, showBack: false, onBack: onBack, onOpenDetail: onOpenDetail, onSearch: onSearch }), _jsx(TodoCard, { state: todoState ?? null }), _jsxs("div", { className: "ac-chat__main", children: [_jsx(MessageStream, { messages: messages, members: members, status: status, onOpenAgent: onOpenAgent, permissions: permissions, onRespondPermission: onRespondPermission, messageActions: messageActions, messageArtifacts: messageArtifacts, selectMode: selectionActive, selectedIds: new Set(selectedIds), onToggleSelect: onToggleSelect }), promptPop ? (_jsx(PromptPop, { items: promptPop.items, onPick: promptPop.onPick, className: "ac-chat__prompt-pop" })) : null] }), selectionActive ? (_jsx(SelectionBar, { count: selectedIds.length, capabilities: {
+                    copy: capabilities.copy && Boolean(onBatchCopy),
+                    remove: capabilities.remove && Boolean(onBatchRemove),
+                    reason: {
+                        ...capabilities.reason,
+                        ...(onBatchCopy ? {} : { copy: "未接线：批量复制不可用" }),
+                        ...(onBatchRemove ? {} : { remove: "未接线：批量删除不可用" }),
+                    },
+                }, busy: batchBusy, onCopy: () => onBatchCopy?.(), onRemove: () => onBatchRemove?.(), onExit: () => onExitSelection?.() })) : composer ? (_jsx(Composer, { value: draft, onChange: onDraftChange, members: members, status: status, conversationId: conversation.id, onSend: onSend, onStop: onStop ? handleSmartStop : undefined, onNotice: onNotice, onNewConversation: onNewConversation, onOpenProfile: onOpenProfile, modelSwitch: modelSwitch, permissionMode: permissionMode, slashExtra: slashExtra ?? composer.slashExtra, slashExpand: slashExpand, contextUsage: lastContextUsage
+                    ? { ...lastContextUsage, onWindowChange: onContextWindowChange }
+                    : undefined, pendingAsk: pendingAsk, askQueued: askQueued, onAnswerAsk: onAnswerAsk, onSkipAsk: onSkipAsk, palette: composer.palette, submission: composer.submission, queued: composer.queued, onArrowUp: composer.onArrowUp, onArrowDown: composer.onArrowDown, attachmentPicker: composer.attachmentPicker, attachmentHeader: composer.attachmentHeader, stagedAttachments: composer.stagedAttachments, onRemoveAttachment: composer.onRemoveAttachment, dragHandlers: composer.dragHandlers, visionTag: composer.visionTag, onMic: onMic, micState: micState, toolbarTrailing: toolbarTrailing })) : null, !selectionActive ? (_jsx(SelectionActions, { pop: selectionPop ?? null, onDismiss: () => onDismissSelectionPop?.(), onInsert: (text) => onInsertSelectionText?.(text), onFavorite: onFavoriteSelection })) : null, children] }));
+}

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

@@ -0,0 +1,11 @@
+import { type ComponentProps, type ReactNode } from "react";
+export declare const NEAR_BOTTOM_PX = 80;
+export declare function ConversationShell({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ConversationContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ConversationScroller({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export interface ConversationEmptyProps extends ComponentProps<"div"> {
+    title: string;
+    hint?: string;
+    children?: ReactNode;
+}
+export declare function ConversationEmpty({ title, hint, className, ...props }: ConversationEmptyProps): import("react").JSX.Element;