@springbrand/message-panel 0.1.0 → 0.1.2

package/dist/src/camel/camel-turn.d.ts

@@ -0,0 +1,57 @@
+import type { UIMessage } from "ai";
+type UnknownRecord = Record<string, unknown>;
+export type CamelPart = UIMessage["parts"][number];
+export interface CamelMessageMetadata extends UnknownRecord {
+    authorDisplayName?: string;
+    completedAt?: number;
+    createdAt?: number;
+    error?: string;
+    interruptedByUser?: boolean;
+    messageSource?: string;
+    turnDurationMs?: number;
+    turnStartedAt?: number;
+    turnStatus?: string;
+}
+export interface CamelPartRef {
+    messageId: string;
+    partIndex: number;
+    part: CamelPart;
+}
+export interface CamelAssistantTurn {
+    kind: "assistant";
+    key: string;
+    message: UIMessage;
+    messages: readonly [UIMessage];
+    actionMessageId: string;
+    parts: readonly CamelPartRef[];
+    traceParts: readonly CamelPartRef[];
+    finalParts: readonly CamelPartRef[];
+    terminalState?: {
+        kind: "interrupted" | "error";
+        title: string;
+        body?: string;
+    };
+    stepCount: number;
+    copyText: string;
+    replyText?: string;
+    durationMs?: number;
+    completedAt?: number;
+}
+export type CamelStandaloneKind = "user" | "notice" | "slash-command" | "local-command-output" | "compact-summary";
+export interface CamelStandaloneMessage {
+    kind: "message";
+    key: string;
+    message: UIMessage;
+    displayKind: CamelStandaloneKind;
+}
+export type CamelMessageItem = CamelAssistantTurn | CamelStandaloneMessage;
+export declare function camelMetadata(message: UIMessage): CamelMessageMetadata;
+export declare const camelMessageMetadata: typeof camelMetadata;
+export declare function camelMessageText(message: UIMessage): string;
+export declare function camelCreatedAt(message: UIMessage): number | undefined;
+export declare function camelCompletedAt(message: UIMessage): number | undefined;
+export declare function formatCamelMessageTime(timestamp: number): string;
+export declare function formatCamelTurnDuration(milliseconds: number): string;
+export declare function projectCamelAssistantTurn(message: UIMessage, finalToolNames?: readonly string[], replyText?: string): CamelAssistantTurn;
+export declare function projectCamelMessages(messages: readonly UIMessage[], finalToolNames?: readonly string[]): CamelMessageItem[];
+export {};

package/dist/src/camel/camel-turn.js

@@ -0,0 +1,203 @@
+import { resolvePartKind, toolNameOfPart } from "../parts/kind";
+const USER_STOP_REASON = "Stopped by user";
+const TRACE_PART_KINDS = new Set(["tool", "parallel", "subagents"]);
+function recordOf(value) {
+    return value != null && typeof value === "object"
+        ? value
+        : {};
+}
+function nonNegativeNumber(value) {
+    return typeof value === "number" && Number.isFinite(value) && value >= 0
+        ? value
+        : undefined;
+}
+export function camelMetadata(message) {
+    return recordOf(message.metadata);
+}
+export const camelMessageMetadata = camelMetadata;
+function isVisibleText(part) {
+    return part.type === "text" && part.text.trim().length > 0;
+}
+function isVisibleReasoning(part) {
+    return part.type === "reasoning" && part.text.trim().length > 0;
+}
+function standalonePartKind(part) {
+    switch (part.type) {
+        case "data-notice":
+            return "notice";
+        case "data-slash-command":
+            return "slash-command";
+        case "data-local-command-output":
+            return "local-command-output";
+        case "data-compact-summary":
+            return "compact-summary";
+        default:
+            return null;
+    }
+}
+function standaloneKind(message) {
+    for (const part of message.parts) {
+        const kind = standalonePartKind(part);
+        if (kind !== null)
+            return kind;
+    }
+    return message.role === "user" ? "user" : null;
+}
+function isDirectUserMessage(message) {
+    return message.role === "user" && standaloneKind(message) === "user";
+}
+export function camelMessageText(message) {
+    return message.parts
+        .filter(isVisibleText)
+        .map((part) => part.text)
+        .join("\n");
+}
+export function camelCreatedAt(message) {
+    return nonNegativeNumber(camelMetadata(message).createdAt);
+}
+export function camelCompletedAt(message) {
+    return (nonNegativeNumber(camelMetadata(message).completedAt) ??
+        camelCreatedAt(message));
+}
+export function formatCamelMessageTime(timestamp) {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const isToday = date.getFullYear() === now.getFullYear() &&
+        date.getMonth() === now.getMonth() &&
+        date.getDate() === now.getDate();
+    return date.toLocaleString([], {
+        ...(isToday ? {} : { month: "short", day: "numeric" }),
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+    });
+}
+export function formatCamelTurnDuration(milliseconds) {
+    const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    return hours > 0
+        ? `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
+        : `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function isTraceWork(part, finalToolNames) {
+    if (isVisibleReasoning(part))
+        return true;
+    const kind = resolvePartKind(part);
+    if (kind === "plan")
+        return false;
+    const toolName = toolNameOfPart(part);
+    if (toolName !== null && finalToolNames.includes(toolName))
+        return false;
+    return TRACE_PART_KINDS.has(kind ?? "");
+}
+function isTraceBoundary(part, finalToolNames) {
+    return part.type === "step-start" || isTraceWork(part, finalToolNames);
+}
+function terminalState(message) {
+    const metadata = camelMetadata(message);
+    if (metadata.interruptedByUser === true) {
+        return {
+            kind: "interrupted",
+            title: USER_STOP_REASON,
+        };
+    }
+    if (metadata.turnStatus === "aborted" &&
+        metadata.error === USER_STOP_REASON)
+        return undefined;
+    if (metadata.turnStatus === "error" || metadata.error) {
+        return {
+            kind: "error",
+            title: "Error",
+            body: metadata.error ?? "The response failed.",
+        };
+    }
+    return undefined;
+}
+function turnDuration(message) {
+    const metadata = camelMetadata(message);
+    const explicit = nonNegativeNumber(metadata.turnDurationMs);
+    if (explicit !== undefined)
+        return explicit;
+    const startedAt = nonNegativeNumber(metadata.turnStartedAt);
+    const completedAt = nonNegativeNumber(metadata.completedAt);
+    return startedAt !== undefined && completedAt !== undefined
+        ? Math.max(0, completedAt - startedAt)
+        : undefined;
+}
+export function projectCamelAssistantTurn(message, finalToolNames = [], replyText) {
+    const parts = message.parts.map((part, partIndex) => ({
+        messageId: message.id,
+        partIndex,
+        part,
+    }));
+    let lastTraceBoundary = -1;
+    for (let index = parts.length - 1; index >= 0; index -= 1) {
+        if (isTraceBoundary(parts[index].part, finalToolNames)) {
+            lastTraceBoundary = index;
+            break;
+        }
+    }
+    const traceParts = [];
+    const finalParts = [];
+    for (const partRef of parts) {
+        const { part, partIndex } = partRef;
+        if (part.type === "step-start" || resolvePartKind(part) === "plan") {
+            continue;
+        }
+        if (isTraceWork(part, finalToolNames) ||
+            (isVisibleText(part) && partIndex < lastTraceBoundary)) {
+            traceParts.push(partRef);
+            continue;
+        }
+        const kind = resolvePartKind(part);
+        if (isVisibleText(part) || (kind !== null && kind !== "reasoning")) {
+            finalParts.push(partRef);
+        }
+    }
+    const hasFinalNarrative = finalParts.some(({ part }) => isVisibleText(part) || resolvePartKind(part) === "error");
+    const terminal = terminalState(message);
+    return {
+        kind: "assistant",
+        key: `assistant-${message.id}`,
+        message,
+        messages: [message],
+        actionMessageId: message.id,
+        parts,
+        traceParts,
+        finalParts,
+        terminalState: terminal?.kind === "interrupted" || !hasFinalNarrative
+            ? terminal
+            : undefined,
+        stepCount: Math.max(1, parts.filter(({ part }) => part.type === "step-start").length),
+        copyText: camelMessageText(message),
+        replyText,
+        durationMs: turnDuration(message),
+        completedAt: camelCompletedAt(message),
+    };
+}
+export function projectCamelMessages(messages, finalToolNames = []) {
+    const items = [];
+    messages.forEach((message, index) => {
+        if (message.role === "system")
+            return;
+        const displayKind = standaloneKind(message);
+        if (message.role === "assistant" && displayKind === null) {
+            const reply = messages
+                .slice(index + 1)
+                .find(isDirectUserMessage);
+            items.push(projectCamelAssistantTurn(message, finalToolNames, reply ? camelMessageText(reply).trim() || undefined : undefined));
+            return;
+        }
+        if (displayKind !== null) {
+            items.push({
+                kind: "message",
+                key: `message-${message.id}`,
+                message,
+                displayKind,
+            });
+        }
+    });
+    return items;
+}

package/dist/src/camel/index.js

@@ -0,0 +1,7 @@
+export * from "./camel-chat-messages";
+export * from "./camel-model-select";
+export * from "./camel-plan-bar";
+export * from "./camel-turn";
+export * from "./turn-summary-bar";
+export * from "./camel-prompt-input";
+export * from "./camel-tool-presentation";

package/dist/src/camel/turn-summary-bar.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+export interface TurnSummaryBarProps {
+    durationMs?: number;
+    stepCount: number;
+    children: ReactNode;
+    showSeparator?: boolean;
+}
+export declare function TurnSummaryBar({ durationMs, stepCount, children, showSeparator, }: TurnSummaryBarProps): import("react").JSX.Element;

package/dist/src/camel/turn-summary-bar.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../internal/cn";
+import { formatCamelTurnDuration } from "./camel-turn";
+export function TurnSummaryBar({ durationMs, stepCount, children, showSeparator = true, }) {
+    const [expanded, setExpanded] = useState(false);
+    const stepLabel = `${stepCount} step${stepCount === 1 ? "" : "s"}`;
+    const showDuration = durationMs !== undefined && durationMs >= 1000;
+    const toggleLabel = expanded ? "hide work" : "show work";
+    return (_jsxs("div", { "data-camel-turn-summary": "", "data-state": expanded ? "open" : "closed", children: [_jsxs("button", { type: "button", "aria-expanded": expanded, "aria-label": `${expanded ? "Hide" : "Show"} work, ${stepLabel}${showDuration ? `, ${formatCamelTurnDuration(durationMs)}` : ""}`, className: cn("group/turn-summary flex w-full cursor-pointer items-center gap-1.5 rounded py-1 text-left", "font-mono text-xs text-muted-foreground/60 transition-colors duration-150", "hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring/50"), onClick: () => setExpanded((current) => !current), children: [showDuration && (_jsxs(_Fragment, { children: [_jsx("span", { children: "worked for" }), _jsx("span", { className: "text-muted-foreground/80", children: formatCamelTurnDuration(durationMs) }), _jsx("span", { className: "text-muted-foreground/30", children: "\u00B7" })] })), _jsx("span", { className: "text-muted-foreground/80", children: stepLabel }), _jsx("span", { className: "text-muted-foreground/30", children: "\u00B7" }), _jsx("span", { children: toggleLabel }), _jsx(ChevronRightIcon, { className: cn("size-3.5 text-muted-foreground/40 transition-transform duration-250", expanded && "rotate-90"), "aria-hidden": "true" })] }), _jsx("div", { "data-camel-turn-summary-content": "", "data-camel-collapsible-content": "", "data-state": expanded ? "open" : "closed", "aria-hidden": !expanded, inert: !expanded ? true : undefined, children: expanded && (_jsx("div", { "data-camel-collapsible-inner": "", children: _jsx("div", { className: "space-y-1 py-2", "data-camel-turn-trace": "", "data-state": "open", children: children }) })) }), showSeparator && _jsx("hr", { className: "my-2 border-t border-border/40" })] }));
+}

package/dist/src/chat-summary-panel.d.ts

@@ -0,0 +1,22 @@
+export interface ChatSummarySource {
+    kind: "file" | "link";
+    label: string;
+    href?: string;
+}
+export interface ChatSummaryPanelProps {
+    sessionTitle: string;
+    messageCount: number;
+    currentGoal?: string;
+    agentTitle: string;
+    agentValue?: string;
+    stateLabel: string;
+    stateTone: "danger" | "active" | "success";
+    activityCount: number;
+    taskCount: number;
+    runningTaskCount: number;
+    completedTaskCount: number;
+    sources: readonly ChatSummarySource[];
+    defaultExpanded?: boolean;
+    className?: string;
+}
+export declare function ChatSummaryPanel({ sessionTitle, messageCount, currentGoal, agentTitle, agentValue, stateLabel, stateTone, activityCount, taskCount, runningTaskCount, completedTaskCount, sources, defaultExpanded, className, }: ChatSummaryPanelProps): import("react").JSX.Element;

package/dist/src/chat-summary-panel.js

@@ -0,0 +1,26 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ActivityIcon, BotIcon, ChevronUpIcon, FileIcon, LinkIcon, ListIcon, MessageSquareIcon, WrenchIcon, } from "lucide-react";
+import { cn } from "./internal/cn";
+function SummaryRow({ icon: Icon, label, value, }) {
+    return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-2 rounded-md py-1.5 text-left text-sm text-foreground", children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), value && (_jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: value }))] }));
+}
+export function ChatSummaryPanel({ sessionTitle, messageCount, currentGoal, agentTitle, agentValue, stateLabel, stateTone, activityCount, taskCount, runningTaskCount, completedTaskCount, sources, defaultExpanded = false, className, }) {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    const stateColor = {
+        danger: "bg-destructive",
+        active: "bg-primary",
+        success: "bg-success",
+    }[stateTone];
+    if (!expanded) {
+        return (_jsxs("button", { type: "button", className: cn("inline-flex h-8 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-border bg-background/90 px-2.5 text-xs font-medium text-muted-foreground shadow-sm backdrop-blur transition-all outline-none", "hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50", "animate-in fade-in-0 zoom-in-95 slide-in-from-top-1 duration-150 motion-reduce:animate-none", className), onClick: () => setExpanded(true), "aria-expanded": false, "aria-label": "\u5C55\u5F00\u6458\u8981", title: "\u5C55\u5F00\u6458\u8981", "data-message-panel-summary": "", "data-state": "collapsed", children: [_jsx(ListIcon, { className: "size-3.5" }), "\u6458\u8981"] }));
+    }
+    return (_jsxs("aside", { className: cn("w-[19rem] min-w-0 max-w-full overflow-hidden rounded-2xl border border-border bg-popover shadow-card", "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200 motion-reduce:animate-none", className), "data-message-panel-summary": "", "data-state": "expanded", children: [_jsxs("header", { className: "flex h-10 items-center border-b border-border px-4", children: [_jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "\u6458\u8981" }), _jsx("button", { type: "button", className: "group/collapse ml-auto inline-flex size-8 shrink-0 items-center justify-center rounded-md outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4", onClick: () => setExpanded(false), "aria-expanded": true, "aria-label": "\u6536\u8D77\u6458\u8981", title: "\u6536\u8D77\u6458\u8981", children: _jsx(ChevronUpIcon, { className: "transition-transform duration-200 group-hover/collapse:-translate-y-0.5 motion-reduce:transition-none" }) })] }), _jsx("div", { className: "max-h-[min(31rem,calc(100dvh-8rem))] overflow-y-auto", children: _jsxs("div", { className: "px-4 py-3", children: [_jsxs("section", { children: [_jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "\u4F1A\u8BDD" }), _jsx(SummaryRow, { icon: MessageSquareIcon, label: sessionTitle, value: `${messageCount} 条消息` }), currentGoal && (_jsx("p", { className: "mb-1 ml-6 line-clamp-2 text-xs leading-5 text-muted-foreground", children: currentGoal })), _jsx(SummaryRow, { icon: BotIcon, label: agentTitle, value: agentValue }), _jsxs("div", { className: "flex items-center gap-2 py-1.5 text-sm", children: [_jsx(ActivityIcon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1", children: "\u72B6\u6001" }), _jsx("span", { className: cn("size-1.5 rounded-full transition-colors duration-200", stateTone === "active" &&
+                                                "animate-pulse motion-reduce:animate-none", stateColor) }), _jsx("span", { className: "text-xs text-muted-foreground", children: stateLabel })] }), _jsx(SummaryRow, { icon: WrenchIcon, label: `${activityCount} 次工具活动` })] }), _jsxs("section", { className: "mt-3 border-t border-border pt-3", children: [_jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "\u5B50\u4EFB\u52A1" }), _jsx(SummaryRow, { icon: BotIcon, label: taskCount === 0 ? "暂无子任务" : `${runningTaskCount} 个运行中`, value: completedTaskCount > 0
+                                        ? `${completedTaskCount} 已完成`
+                                        : undefined })] }), _jsxs("section", { className: "mt-3 border-t border-border pt-3", children: [_jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "\u6765\u6E90" }), sources.length === 0 ? (_jsx("p", { className: "py-1.5 text-xs text-muted-foreground", children: "\u5F53\u524D\u4F1A\u8BDD\u8FD8\u6CA1\u6709\u9644\u4EF6\u6216\u5F15\u7528\u6765\u6E90" })) : (_jsx("div", { className: "space-y-0.5", children: sources.map((source) => {
+                                        const Icon = source.kind === "file" ? FileIcon : LinkIcon;
+                                        const content = (_jsxs(_Fragment, { children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: source.label })] }));
+                                        return source.href ? (_jsx("a", { href: source.href, target: "_blank", rel: "noreferrer", className: "flex items-center gap-2 rounded-md py-1.5 text-sm text-foreground hover:bg-accent", children: content }, `${source.kind}:${source.href}`)) : (_jsx("div", { className: "flex items-center gap-2 py-1.5 text-sm text-foreground", children: content }, `${source.kind}:${source.label}`));
+                                    }) }))] })] }) })] }));
+}

package/dist/src/composer/chat-composer.d.ts

@@ -0,0 +1,4 @@
+import type { ChatComposerProps } from "./types";
+export declare const ChatComposer: <TAttachment>(props: ChatComposerProps<TAttachment> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;

package/dist/src/composer/chat-composer.js

@@ -0,0 +1,90 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlusIcon, SparklesIcon, } from "lucide-react";
+import { forwardRef, useEffect, useMemo, useState, } from "react";
+import { cn } from "../internal/cn";
+import { Composer } from "./composer";
+const toolbarIcons = {
+    plus: PlusIcon,
+    sparkles: SparklesIcon,
+};
+function ToolbarAction({ action }) {
+    const Icon = action.icon ? toolbarIcons[action.icon] : undefined;
+    return (_jsxs("button", { type: "button", className: "sb-chat-composer__action", disabled: action.disabled, onClick: action.onSelect, children: [Icon && _jsx(Icon, { size: 16 }), _jsx("span", { children: action.label })] }));
+}
+function CommandMenu({ commands, active, label, onActiveChange, onPick, }) {
+    return (_jsxs("div", { className: "sb-command-menu", role: "listbox", "aria-label": label, onMouseDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "sb-command-menu__label", children: label }), _jsx("div", { className: "sb-command-menu__list", children: commands.map((command, index) => (_jsxs("button", { type: "button", role: "option", "aria-selected": index === active, onMouseEnter: () => onActiveChange(index), onClick: () => onPick(command), children: [_jsxs("code", { children: ["/", command.name] }), _jsx("span", { children: command.description })] }, command.name))) })] }));
+}
+function ChatComposerInner({ value, defaultValue = "", onValueChange, commands = [], toolbarActions = [], variant = "docked", commandMenuLabel = "命令（↑↓ 选择，回车填入）", onCommandPick, onSubmit, tools, textareaProps, className, ...props }, ref) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const resolvedValue = value ?? internalValue;
+    const [dismissed, setDismissed] = useState(false);
+    const [active, setActive] = useState(0);
+    const query = resolvedValue.startsWith("/") && !resolvedValue.includes("\n")
+        ? resolvedValue.slice(1).trim().toLowerCase()
+        : null;
+    const filtered = useMemo(() => {
+        if (query === null)
+            return [];
+        if (!query)
+            return [...commands];
+        return commands.filter((command) => command.name.toLowerCase().includes(query) ||
+            command.description.toLowerCase().includes(query));
+    }, [commands, query]);
+    const menuOpen = !dismissed && query !== null && filtered.length > 0;
+    useEffect(() => {
+        setDismissed(false);
+    }, [resolvedValue]);
+    useEffect(() => {
+        if (active >= filtered.length)
+            setActive(0);
+    }, [active, filtered.length]);
+    const changeValue = (next) => {
+        if (value === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    };
+    const pick = (command) => {
+        changeValue(command.prompt);
+        setDismissed(true);
+        onCommandPick?.(command);
+    };
+    const handleKeyDown = (event) => {
+        textareaProps?.onKeyDown?.(event);
+        if (event.defaultPrevented || !menuOpen)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setDismissed(true);
+            return;
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            const delta = event.key === "ArrowDown" ? 1 : -1;
+            setActive((current) => (current + delta + filtered.length) % filtered.length);
+            return;
+        }
+        if ((event.key === "Enter" &&
+            !event.shiftKey &&
+            !event.nativeEvent.isComposing) ||
+            event.key === "Tab") {
+            const command = filtered[active] ?? filtered[0];
+            if (command) {
+                event.preventDefault();
+                pick(command);
+            }
+        }
+    };
+    return (_jsx("div", { ref: ref, className: cn("sb-chat-composer", className), "data-variant": variant, children: _jsxs("div", { className: "sb-chat-composer__inner", children: [menuOpen && (_jsx(CommandMenu, { commands: filtered, active: active, label: commandMenuLabel, onActiveChange: setActive, onPick: pick })), _jsx(Composer, { ...props, value: resolvedValue, onValueChange: changeValue, onSubmit: async (message) => {
+                        await onSubmit(message);
+                        if (value === undefined)
+                            setInternalValue("");
+                    }, tools: _jsxs(_Fragment, { children: [tools, toolbarActions.map((action) => (_jsx(ToolbarAction, { action: action }, action.id)))] }), textareaProps: {
+                        ...textareaProps,
+                        onKeyDown: handleKeyDown,
+                        onBlur: (event) => {
+                            textareaProps?.onBlur?.(event);
+                            setDismissed(true);
+                        },
+                    } })] }) }));
+}
+export const ChatComposer = forwardRef(ChatComposerInner);

package/dist/src/composer/composer-attachments.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
+import type { ComposerAttachmentView } from "./types";
+export declare const Attachments: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export interface AttachmentPreviewProps extends HTMLAttributes<HTMLDivElement> {
+    attachment: ComposerAttachmentView;
+    actions?: ReactNode;
+}
+export declare const AttachmentPreview: import("react").ForwardRefExoticComponent<AttachmentPreviewProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AttachmentRemove: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function AttachmentRetry(props: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export declare function AttachmentReorder({ direction, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    direction: "left" | "right";
+}): import("react").JSX.Element;

package/dist/src/composer/composer-attachments.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon, ArrowRightIcon, FileAudioIcon, FileCodeIcon, FileImageIcon, FileSpreadsheetIcon, FileTextIcon, Loader2Icon, RotateCcwIcon, XIcon, } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../internal/cn";
+function formatSize(bytes) {
+    if (!bytes)
+        return "";
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+function attachmentIcon(attachment) {
+    const value = `${attachment.mediaType ?? ""} ${attachment.name}`;
+    if (/image/i.test(value))
+        return FileImageIcon;
+    if (/audio/i.test(value))
+        return FileAudioIcon;
+    if (/csv|sheet|excel/i.test(value))
+        return FileSpreadsheetIcon;
+    if (/code|javascript|typescript|json|html|xml/i.test(value))
+        return FileCodeIcon;
+    return FileTextIcon;
+}
+export const Attachments = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("sb-attachments", className), ...props })));
+Attachments.displayName = "Attachments";
+export const AttachmentPreview = forwardRef(({ attachment, actions, className, ...props }, ref) => {
+    const Icon = attachmentIcon(attachment);
+    const isImage = attachment.mediaType?.startsWith("image/") && Boolean(attachment.url);
+    const subtitle = attachment.status === "uploading"
+        ? "上传中…"
+        : attachment.status === "error"
+            ? "上传失败"
+            : [attachment.note, formatSize(attachment.size)].filter(Boolean).join(" · ");
+    return (_jsxs("div", { ref: ref, className: cn("sb-attachment", className), "data-status": attachment.status, ...props, children: [_jsx("span", { className: "sb-attachment__preview", children: attachment.status === "uploading" ? (_jsx(Loader2Icon, { size: 18, className: "sb-spin" })) : isImage ? (_jsx("img", { src: attachment.url, alt: "" })) : (_jsx(Icon, { size: 20 })) }), _jsxs("span", { className: "sb-attachment__text", children: [_jsx("strong", { title: attachment.name, children: attachment.name }), _jsx("small", { children: subtitle })] }), actions && _jsx("span", { className: "sb-attachment__actions", children: actions })] }));
+});
+AttachmentPreview.displayName = "AttachmentPreview";
+export const AttachmentRemove = forwardRef(({ className, children, ...props }, ref) => (_jsx("button", { ref: ref, type: "button", className: cn("sb-attachment__button", className), "aria-label": "\u79FB\u9664\u9644\u4EF6", ...props, children: children ?? _jsx(XIcon, { size: 13 }) })));
+AttachmentRemove.displayName = "AttachmentRemove";
+export function AttachmentRetry(props) {
+    return (_jsx("button", { type: "button", className: cn("sb-attachment__button", props.className), "aria-label": "\u91CD\u8BD5\u4E0A\u4F20", ...props, children: _jsx(RotateCcwIcon, { size: 13 }) }));
+}
+export function AttachmentReorder({ direction, ...props }) {
+    const Icon = direction === "left" ? ArrowLeftIcon : ArrowRightIcon;
+    return (_jsx("button", { type: "button", className: cn("sb-attachment__button", props.className), "aria-label": direction === "left" ? "附件左移" : "附件右移", ...props, children: _jsx(Icon, { size: 13 }) }));
+}

package/dist/src/composer/composer-trigger-popover.d.ts

@@ -0,0 +1,31 @@
+import { ComposerPrimitive, type Unstable_DirectiveFormatter, type Unstable_TriggerItem } from "@assistant-ui/react";
+import { type ComponentPropsWithoutRef, type FC } from "react";
+type IconComponent = FC<{
+    className?: string;
+}>;
+type DirectiveBehaviorProps = {
+    formatter?: Unstable_DirectiveFormatter;
+    onInserted?: (item: Unstable_TriggerItem) => void;
+};
+type ActionBehaviorProps = {
+    formatter?: Unstable_DirectiveFormatter;
+    onExecute: (item: Unstable_TriggerItem) => void;
+    removeOnExecute?: boolean;
+};
+type ComposerTriggerPopoverBaseProps = Omit<ComponentPropsWithoutRef<typeof ComposerPrimitive.Unstable_TriggerPopover>, "children"> & {
+    iconMap?: Record<string, IconComponent>;
+    fallbackIcon?: IconComponent;
+    backLabel?: string;
+    emptyCategoriesLabel?: string;
+    emptyItemsLabel?: string;
+    loadingLabel?: string;
+};
+export type ComposerTriggerPopoverProps = ComposerTriggerPopoverBaseProps & ({
+    directive: DirectiveBehaviorProps;
+    action?: never;
+} | {
+    action: ActionBehaviorProps;
+    directive?: never;
+});
+export declare const ComposerTriggerPopover: FC<ComposerTriggerPopoverProps>;
+export {};

package/dist/src/composer/composer-trigger-popover.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComposerPrimitive, unstable_defaultDirectiveFormatter, unstable_useTriggerPopoverScopeContext, } from "@assistant-ui/react";
+import { ChevronLeftIcon, ChevronRightIcon, TerminalIcon, } from "lucide-react";
+import { memo, } from "react";
+import { cn } from "../internal/cn";
+function resolveIcon(iconKey, iconMap, fallback) {
+    return (iconKey && iconMap?.[iconKey]) || fallback;
+}
+function Categories({ iconMap, fallbackIcon, emptyLabel, }) {
+    return (_jsx(ComposerPrimitive.Unstable_TriggerPopoverCategories, { children: (categories) => (_jsxs("div", { className: "flex flex-col py-1", children: [categories.map((category) => {
+                    const Icon = resolveIcon(category.id, iconMap, fallbackIcon);
+                    return (_jsxs(ComposerPrimitive.Unstable_TriggerPopoverCategoryItem, { categoryId: category.id, className: "flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Icon, { className: "size-4 text-muted-foreground" }), category.label] }), _jsx(ChevronRightIcon, { className: "size-4 text-muted-foreground" })] }, category.id));
+                }), categories.length === 0 && (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: emptyLabel }))] })) }));
+}
+function Items({ iconMap, fallbackIcon, backLabel, emptyLabel, loadingLabel, }) {
+    const { isLoading } = unstable_useTriggerPopoverScopeContext();
+    return (_jsx(ComposerPrimitive.Unstable_TriggerPopoverItems, { children: (items) => (_jsxs("div", { className: "flex flex-col", children: [_jsxs(ComposerPrimitive.Unstable_TriggerPopoverBack, { className: "flex cursor-pointer items-center gap-1.5 border-b px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground transition-colors hover:bg-accent", children: [_jsx(ChevronLeftIcon, { className: "size-3.5" }), backLabel] }), _jsxs("div", { className: "py-1", children: [items.map((item, index) => {
+                            const iconKey = typeof item.metadata?.icon === "string"
+                                ? item.metadata.icon
+                                : undefined;
+                            const Icon = resolveIcon(iconKey, iconMap, fallbackIcon);
+                            return (_jsxs(ComposerPrimitive.Unstable_TriggerPopoverItem, { item: item, index: index, className: "flex w-full cursor-pointer flex-col items-start gap-0.5 px-3 py-2 text-start outline-none transition-colors hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(Icon, { className: "size-3.5 text-primary" }), item.label] }), item.description && (_jsx("span", { className: "ms-5.5 text-xs leading-tight text-muted-foreground", children: item.description }))] }, item.id));
+                        }), items.length === 0 && (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: isLoading ? loadingLabel : emptyLabel }))] })] })) }));
+}
+const ComposerTriggerPopoverImpl = ({ iconMap, fallbackIcon = TerminalIcon, backLabel = "Back", emptyCategoriesLabel = "No items available", emptyItemsLabel = "No matching items", loadingLabel = "Loading…", className, directive, action, ...props }) => (_jsxs(ComposerPrimitive.Unstable_TriggerPopover, { className: cn("absolute bottom-full start-0 z-50 mb-2 w-64 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg", className), ...props, children: [directive ? (_jsx(ComposerPrimitive.Unstable_TriggerPopover.Directive, { formatter: directive.formatter ??
+                unstable_defaultDirectiveFormatter, onInserted: directive.onInserted })) : (_jsx(ComposerPrimitive.Unstable_TriggerPopover.Action, { formatter: action.formatter ?? unstable_defaultDirectiveFormatter, onExecute: action.onExecute, removeOnExecute: action.removeOnExecute })), _jsx(Categories, { iconMap: iconMap, fallbackIcon: fallbackIcon, emptyLabel: emptyCategoriesLabel }), _jsx(Items, { iconMap: iconMap, fallbackIcon: fallbackIcon, backLabel: backLabel, emptyLabel: emptyItemsLabel, loadingLabel: loadingLabel })] }));
+ComposerTriggerPopoverImpl.displayName =
+    "ComposerTriggerPopover";
+export const ComposerTriggerPopover = memo(ComposerTriggerPopoverImpl);

package/dist/src/composer/composer.d.ts

@@ -0,0 +1,15 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes } from "react";
+import type { ComposerProps } from "./types";
+export declare const ComposerHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComposerBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComposerFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComposerTools: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComposerSubmit: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    status?: "idle" | "submitted" | "streaming";
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function DropOverlay({ label, }: {
+    label?: string;
+}): import("react").JSX.Element;
+export declare const Composer: <TAttachment>(props: ComposerProps<TAttachment> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;