@axhub/acp 0.1.0 → 0.1.2-beta.0

package/README.md

@@ -24,8 +24,8 @@ npx -y @axhub/acp --cors-origin https://client.example.com
 ### External Integration
 
 - [HTTP Chat API](docs/http-chat-api.md) documents `POST /api/chat`, including request parameters, stream chunks, response headers, a one-shot command example, and a live message listener example.
-- [Post Message API](docs/post-message-api.md) documents the browser `postMessage` bridge for iframe/opened-window context injection.
-- [Host Integration](docs/host-integration.md) documents generic iframe/child-window embedding, runtime API base configuration, context injection, HTTP chat execution, image generation, and React component reuse.
+- [Post Message API](docs/post-message-api.md) documents the browser `postMessage` bridge for iframe/opened-window context injection, host runtime configuration, UI-originated chat/attachments, thread snapshot queries, and lifecycle subscriptions.
+- [Host Integration](docs/host-integration.md) documents generic iframe/child-window embedding, runtime API base configuration, context injection, runtime config injection, postMessage thread queries, HTTP chat execution, image generation, and React component reuse.
 - [Component And Runtime API](docs/component-runtime-api.md) documents package-level `@axhub/acp/ui`, `@axhub/acp/runtime`, `@axhub/acp/server`, `@axhub/acp/react`, and `@axhub/acp/react/styles.css` entries for component/runtime reuse, including embedded runtime API base configuration and Composer host extension props.
 
 ### 1. Configure Codex

package/bin/acp.mjs

@@ -92,10 +92,6 @@ function parseArgs(args) {
 	return { help: false, options };
 }
 
-function quoteCommandArg(value) {
-	return /[\s"']/u.test(value) ? `"${value.replace(/"/gu, '\\"')}"` : value;
-}
-
 function runtimeHostForUrl(hostname) {
 	const normalized = String(hostname || "")
 		.trim()
@@ -124,47 +120,6 @@ function buildServerRuntimeEnv(options) {
 	};
 }
 
-function codexAcpCommandLine() {
-	const codexAcpBin = require.resolve(
-		"@zed-industries/codex-acp/bin/codex-acp.js",
-	);
-	return [process.execPath, codexAcpBin].map(quoteCommandArg).join(" ");
-}
-
-function isCodexProviderName(value) {
-	const normalized = String(value || "")
-		.trim()
-		.toLowerCase();
-	return normalized === "codex" || normalized === "openai";
-}
-
-function hasCodexCommandOverride(env) {
-	if (env.ACP_CODEX_COMMAND?.trim()) return true;
-
-	const rawJson =
-		env.ACP_PROVIDER_COMMAND_OVERRIDES || env.AXHUB_ACP_COMMAND_OVERRIDES;
-	if (!rawJson) return false;
-
-	try {
-		const parsed = JSON.parse(rawJson);
-		if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-			return false;
-		}
-		for (const [providerName, value] of Object.entries(parsed)) {
-			if (!isCodexProviderName(providerName)) continue;
-			if (typeof value === "string") return Boolean(value.trim());
-			if (!value || typeof value !== "object" || Array.isArray(value)) {
-				continue;
-			}
-			return typeof value.command === "string" && Boolean(value.command.trim());
-		}
-	} catch {
-		return false;
-	}
-
-	return false;
-}
-
 let parsed;
 try {
 	parsed = parseArgs(process.argv.slice(2));
@@ -208,9 +163,6 @@ const child = spawn(process.execPath, [nextBin, ...nextArgs], {
 		ACP_UI_DEFAULT_WORKSPACE_PATH:
 			process.env.ACP_UI_DEFAULT_WORKSPACE_PATH || launchCwd,
 		...buildServerRuntimeEnv(parsed.options),
-		...(hasCodexCommandOverride(process.env)
-			? {}
-			: { ACP_CODEX_COMMAND: codexAcpCommandLine() }),
 	},
 	stdio: "inherit",
 });

package/dist/components/assistant-ui/acp-command-menu.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ComposerPrimitive, useAui, useAuiState, } from "@assistant-ui/react";
+import { ComposerPrimitive, useAui, useAuiState, unstable_useTriggerPopoverScopeContext as useTriggerPopoverScopeContext, } from "@assistant-ui/react";
 import { SlashIcon, SparklesIcon } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { Button } from "../ui/button.mjs";
 import { useAcpUiRuntimeContext } from "../../lib/acp2aisdk/client-context.mjs";
 import { persistSkillCommandCache, readSkillCommandCache, shouldFetchSkillCommands, } from "../../lib/acp2aisdk/skill-command-cache.mjs";
@@ -107,7 +107,6 @@ export function AcpCommandTriggerButton() {
         }, children: _jsx(SlashIcon, { className: "size-4" }) }));
 }
 export function AcpCommandMenu() {
-    const aui = useAui();
     const { provider, workspacePath } = useAcpUiRuntimeContext();
     const threadId = useAuiState((state) => state.threads.mainThreadId);
     const messages = useAuiState((state) => state.thread.messages);
@@ -164,12 +163,46 @@ export function AcpCommandMenu() {
         setCommands(nextCommands);
     }, [provider, runtimeCommands, workspacePath]);
     const adapter = useMemo(() => createCommandAdapter(commands), [commands]);
-    return (_jsxs(ComposerPrimitive.Unstable_TriggerPopover, { char: "/", adapter: adapter, className: "absolute bottom-full left-0 z-50 mb-3 w-[min(26rem,calc(100vw-2rem))] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", children: [_jsx(ComposerPrimitive.Unstable_TriggerPopover.Action, { removeOnExecute: true, onExecute: (item) => {
-                    var _a;
-                    const command = commandsRef.current.find((candidate) => candidate.name === item.id);
-                    const nextText = (_a = command === null || command === void 0 ? void 0 : command.name) !== null && _a !== void 0 ? _a : item.label;
-                    aui.thread().composer().setText(`${nextText} `);
-                } }), _jsx("div", { className: "max-h-80 overflow-y-auto p-1.5", children: _jsx(ComposerPrimitive.Unstable_TriggerPopoverItems, { children: (items) => items.length ? (items.map((item, index) => (_jsxs(ComposerPrimitive.Unstable_TriggerPopoverItem, { item: item, index: index, className: cn("flex min-h-10 w-full items-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground data-[highlighted=true]:bg-accent"), children: [_jsx(SparklesIcon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-mono", children: item.label }), item.description ? (_jsx("span", { className: "block truncate text-muted-foreground text-xs", children: item.description })) : null] })] }, `${item.type}-${item.id}`)))) : (_jsx(EmptyCommandState, {})) }) })] }));
+    const popoverRef = useRef(null);
+    return (_jsxs(ComposerPrimitive.Unstable_TriggerPopover, { ref: popoverRef, char: "/", adapter: adapter, className: "absolute bottom-full left-0 z-50 mb-3 w-[min(26rem,calc(100vw-2rem))] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", children: [_jsx(AcpCommandPopoverDismiss, { popoverRef: popoverRef }), _jsx(AcpCommandAction, { commandsRef: commandsRef }), _jsx("div", { className: "max-h-80 overflow-y-auto p-1.5", children: _jsx(ComposerPrimitive.Unstable_TriggerPopoverItems, { children: (items) => items.length ? (items.map((item, index) => (_jsxs(ComposerPrimitive.Unstable_TriggerPopoverItem, { item: item, index: index, className: cn("flex min-h-10 w-full items-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground data-[highlighted=true]:bg-accent"), children: [_jsx(SparklesIcon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-mono", children: item.label }), item.description ? (_jsx("span", { className: "block truncate text-muted-foreground text-xs", children: item.description })) : null] })] }, `${item.type}-${item.id}`)))) : (_jsx(EmptyCommandState, {})) }) })] }));
+}
+function AcpCommandPopoverDismiss({ popoverRef, }) {
+    const { close, open } = useTriggerPopoverScopeContext();
+    useEffect(() => {
+        if (!open)
+            return;
+        function isInside(target) {
+            var _a;
+            return target instanceof Node && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(target));
+        }
+        function handlePointerDown(event) {
+            if (!isInside(event.target))
+                close();
+        }
+        function handleFocusIn(event) {
+            if (!isInside(event.target))
+                close();
+        }
+        document.addEventListener("pointerdown", handlePointerDown);
+        document.addEventListener("focusin", handleFocusIn);
+        return () => {
+            document.removeEventListener("pointerdown", handlePointerDown);
+            document.removeEventListener("focusin", handleFocusIn);
+        };
+    }, [close, open, popoverRef]);
+    return null;
+}
+function AcpCommandAction({ commandsRef, }) {
+    const aui = useAui();
+    const { close } = useTriggerPopoverScopeContext();
+    const handleExecute = useCallback((item) => {
+        var _a;
+        const command = commandsRef.current.find((candidate) => candidate.name === item.id);
+        const nextText = (_a = command === null || command === void 0 ? void 0 : command.name) !== null && _a !== void 0 ? _a : item.label;
+        aui.thread().composer().setText(`${nextText} `);
+        close();
+    }, [aui, close, commandsRef]);
+    return (_jsx(ComposerPrimitive.Unstable_TriggerPopover.Action, { removeOnExecute: true, onExecute: handleExecute }));
 }
 function EmptyCommandState() {
     return (_jsx("div", { className: "px-3 py-4 text-center text-muted-foreground text-sm", children: "\u6682\u65E0\u53EF\u7528\u547D\u4EE4" }));

package/dist/components/assistant-ui/acp-elicitation-option-list.mjs

@@ -131,8 +131,8 @@ export function AcpElicitationOptionListCard(part) {
                                 : "text-primary") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "break-words font-medium text-base leading-snug", children: payload.message }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-muted-foreground text-xs", children: [_jsx("span", { children: payload.fieldTitle }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: statusLabel })] }), payload.fieldDescription && (_jsx("div", { className: "mt-2 break-words text-muted-foreground text-sm leading-snug", children: payload.fieldDescription }))] })] }), isReceipt ? (_jsxs("div", { className: cn("flex items-center gap-2 rounded-md border px-3 py-2 text-sm", isAcceptedReceipt
                     ? "border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-200"
                     : "border-muted-foreground/20 bg-muted/40 text-muted-foreground"), children: [isAcceptedReceipt ? (_jsx(CheckIcon, { className: "size-4 shrink-0" })) : (_jsx(XCircleIcon, { className: "size-4 shrink-0" })), _jsx("span", { className: "min-w-0 break-words", children: getReceiptText(payload, receiptAction, displayedChoice) })] })) : (_jsx(OptionList, { id: payload.toolCallId || part.toolCallId, options: payload.options, selectionMode: payload.selectionMode, defaultValue: payload.defaultValue, minSelections: payload.minSelections, maxSelections: payload.maxSelections, className: "my-0 border-0 bg-transparent p-0 shadow-none", actions: [
-                    { id: "confirm", label: "确认" },
                     { id: "cancel", label: "取消", variant: "outline" },
+                    { id: "confirm", label: "确认" },
                 ], onAction: (actionId, selectedValue) => {
                     if (disabled)
                         return;

package/dist/components/assistant-ui/acp-selectors.mjs

@@ -32,9 +32,7 @@ function getOptionLabel(options, value) {
 const PROVIDER_OPTIONS = ACP_PROVIDER_KEYS.map((provider, index) => ({
     value: provider,
     label: ACP_PROVIDER_REGISTRY[provider].label,
-    description: ACP_PROVIDER_REGISTRY[provider].enabledInP0
-        ? "已验证"
-        : "需本地 CLI/登录",
+    description: "需先安装并登录",
     order: index,
 }));
 function capabilityOptions(snapshot, key) {

package/dist/components/assistant-ui/file.mjs

@@ -15,7 +15,7 @@ import { cva } from "class-variance-authority";
 import { BracesIcon, DownloadIcon, FileIcon, FileTextIcon, ImageIcon, MusicIcon, VideoIcon, } from "lucide-react";
 import { memo } from "react";
 import { cn } from "../../lib/utils.mjs";
-const fileVariants = cva("aui-file-root inline-flex items-center gap-3 rounded-lg transition-colors", {
+const fileVariants = cva("aui-file-root inline-flex max-w-full items-center gap-3 rounded-lg transition-colors", {
     variants: {
         variant: {
             outline: "border-border border hover:bg-muted/50",
@@ -95,7 +95,7 @@ function FileDownload(_a) {
 }
 const FileImpl = ({ filename, data, mimeType }) => {
     const bytes = getBase64Size(data);
-    return (_jsxs(FileRoot, { children: [_jsx(FileIconDisplay, { mimeType: mimeType }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(FileName, { children: filename }), _jsx(FileSize, { bytes: bytes, className: "text-xs" })] }), _jsx(FileDownload, Object.assign({ data: data, mimeType: mimeType }, (filename !== undefined && { filename })))] }));
+    return (_jsxs(FileRoot, { className: "flex w-fit", children: [_jsx(FileIconDisplay, { mimeType: mimeType }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(FileName, { children: filename }), _jsx(FileSize, { bytes: bytes, className: "text-xs" })] }), _jsx(FileDownload, Object.assign({ data: data, mimeType: mimeType }, (filename !== undefined && { filename })))] }));
 };
 const File = memo(FileImpl);
 File.displayName = "File";

package/dist/components/assistant-ui/image-generation-settings-dialog.mjs

@@ -6,22 +6,41 @@ import { Label } from "../ui/label.mjs";
 import { Switch } from "../ui/switch.mjs";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.mjs";
 import { useAcpUiRuntimeContext } from "../../lib/acp2aisdk/client-context.mjs";
-import { normalizeImageGenerationToolSettings } from "../../tools/image-generation/client.mjs";
-import { IMAGE_GENERATION_TOOL_ID } from "../../tools/image-generation/shared.mjs";
+import { normalizeImageGenerationToolSettings, } from "../../tools/image-generation/client.mjs";
+import { hasCompleteImageGenerationRuntimeSettings, IMAGE_GENERATION_TOOL_ID, normalizeImageGenerationRuntimeSettings, } from "../../tools/image-generation/shared.mjs";
 import { normalizeUserChoiceToolSettings } from "../../tools/user-choice/client.mjs";
 import { USER_CHOICE_TOOL_ID } from "../../tools/user-choice/shared.mjs";
 export function ImageGenerationSettingsDialog({ trigger, }) {
     var _a, _b, _c;
-    const { builtinToolSettings, setBuiltinToolSettings } = useAcpUiRuntimeContext();
-    const imageGenerationToolSettings = normalizeImageGenerationToolSettings(builtinToolSettings[IMAGE_GENERATION_TOOL_ID]);
+    const { builtinToolSettings, hostImageGenerationSettings, runtimeBuiltinToolSettings, setBuiltinToolSettings, setHostImageGenerationSettings, } = useAcpUiRuntimeContext();
+    const hasHostImageGenerationSettings = Boolean(hostImageGenerationSettings);
+    const imageGenerationToolSettings = normalizeImageGenerationToolSettings(runtimeBuiltinToolSettings[IMAGE_GENERATION_TOOL_ID]);
+    const imageGenerationSettingsComplete = hasCompleteImageGenerationRuntimeSettings(imageGenerationToolSettings);
     const userChoiceToolSettings = normalizeUserChoiceToolSettings(builtinToolSettings[USER_CHOICE_TOOL_ID]);
+    const updateImageGenerationSettings = (updater) => {
+        if (hasHostImageGenerationSettings) {
+            setHostImageGenerationSettings((current) => {
+                var _a;
+                return updater(normalizeImageGenerationToolSettings(Object.assign(Object.assign({}, imageGenerationToolSettings), ((_a = normalizeImageGenerationRuntimeSettings(current)) !== null && _a !== void 0 ? _a : {}))));
+            });
+            return;
+        }
+        setBuiltinToolSettings(IMAGE_GENERATION_TOOL_ID, (current) => updater(normalizeImageGenerationToolSettings(current)));
+    };
     const updateSetting = (key, value) => {
-        setBuiltinToolSettings(IMAGE_GENERATION_TOOL_ID, (current) => (Object.assign(Object.assign({}, normalizeImageGenerationToolSettings(current)), { [key]: value })));
+        updateImageGenerationSettings((current) => (Object.assign(Object.assign({}, current), { [key]: value })));
+    };
+    const updateConnectionSetting = (key, value) => {
+        updateImageGenerationSettings((current) => {
+            const next = Object.assign(Object.assign({}, current), { [key]: value });
+            return Object.assign(Object.assign({}, next), { enabled: next.enabled && hasCompleteImageGenerationRuntimeSettings(next) });
+        });
     };
     const updateUserChoiceSetting = (key, value) => {
         setBuiltinToolSettings(USER_CHOICE_TOOL_ID, (current) => (Object.assign(Object.assign({}, normalizeUserChoiceToolSettings(current)), { [key]: value })));
     };
-    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: "sm:max-w-xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "\u5DE5\u5177\u8BBE\u7F6E" }), _jsx(DialogDescription, { children: "\u914D\u7F6E\u5185\u7F6E\u5DE5\u5177\u7684\u8FDE\u63A5\u4FE1\u606F\u548C\u4EA4\u4E92\u884C\u4E3A\u3002" })] }), _jsxs(Tabs, { defaultValue: "image-generation", children: [_jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { value: "image-generation", children: "\u56FE\u7247\u751F\u6210" }), _jsx(TabsTrigger, { value: "user-choice", children: "\u7528\u6237\u9009\u62E9" })] }), _jsxs(TabsContent, { value: "image-generation", className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: "image-generation-enabled", children: "\u56FE\u7247\u751F\u6210\u5DE5\u5177" }), _jsx("p", { className: "mt-1 text-muted-foreground text-xs", children: "\u5141\u8BB8\u6A21\u578B\u901A\u8FC7 MCP \u8C03\u7528\u56FE\u7247\u751F\u6210\u3002" })] }), _jsx(Switch, { id: "image-generation-enabled", checked: imageGenerationToolSettings.enabled, onCheckedChange: (checked) => updateSetting("enabled", checked) })] }), _jsx(SettingsInput, { id: "image-generation-base-url", label: "API Base URL", placeholder: "https://api.openai.com/v1", value: (_a = imageGenerationToolSettings.baseUrl) !== null && _a !== void 0 ? _a : "", onValueChange: (value) => updateSetting("baseUrl", value) }), _jsx(SettingsInput, { id: "image-generation-api-key", label: "API Key", placeholder: "sk-...", type: "password", value: (_b = imageGenerationToolSettings.apiKey) !== null && _b !== void 0 ? _b : "", onValueChange: (value) => updateSetting("apiKey", value) }), _jsx(SettingsInput, { id: "image-generation-model", label: "\u6A21\u578B", placeholder: "gpt-image-1", value: (_c = imageGenerationToolSettings.model) !== null && _c !== void 0 ? _c : "", onValueChange: (value) => updateSetting("model", value) }), _jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: "image-generation-preserve-prompt", children: "\u4FDD\u7559\u539F\u59CB\u63D0\u793A\u8BCD" }), _jsx("p", { className: "mt-1 text-muted-foreground text-xs", children: "\u8BF7\u6C42\u56FE\u7247 API \u65F6\u5728 prompt \u524D\u52A0\u5165\u4E0D\u8981\u6539\u5199\u63D0\u793A\uFF0C\u8BB0\u5F55\u4ECD\u663E\u793A\u539F\u59CB\u63D0\u793A\u8BCD\u3002" })] }), _jsx(Switch, { id: "image-generation-preserve-prompt", checked: imageGenerationToolSettings.preservePrompt, onCheckedChange: (checked) => updateSetting("preservePrompt", checked) })] })] }), _jsxs(TabsContent, { value: "user-choice", className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: "user-choice-enabled", children: "\u7528\u6237\u9009\u62E9\u5DE5\u5177" }), _jsx("p", { className: "mt-1 text-muted-foreground text-xs", children: "\u5141\u8BB8\u6A21\u578B\u901A\u8FC7 MCP \u53D1\u8D77\u5355\u9009\u3001\u591A\u9009\u6216\u591A\u9898\u9009\u62E9\u3002" })] }), _jsx(Switch, { id: "user-choice-enabled", checked: userChoiceToolSettings.enabled, onCheckedChange: (checked) => updateUserChoiceSetting("enabled", checked) })] }), _jsx(SettingsInput, { id: "user-choice-timeout-ms", label: "\u7B49\u5F85\u8D85\u65F6\uFF08\u6BEB\u79D2\uFF09", type: "number", value: String(userChoiceToolSettings.waitTimeoutMs), onValueChange: (value) => updateUserChoiceSetting("waitTimeoutMs", Number.parseInt(value, 10)) }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "user-choice-custom-input", children: "\u5141\u8BB8\u81EA\u5B9A\u4E49\u8F93\u5165" }), _jsx(Switch, { id: "user-choice-custom-input", checked: userChoiceToolSettings.allowCustomInput, onCheckedChange: (checked) => updateUserChoiceSetting("allowCustomInput", checked) })] }), _jsx(SettingsInput, { id: "user-choice-custom-input-label", label: "\u81EA\u5B9A\u4E49\u9009\u9879\u6587\u6848", value: userChoiceToolSettings.customInputLabel, onValueChange: (value) => updateUserChoiceSetting("customInputLabel", value) })] })] }), _jsx(DialogFooter, { showCloseButton: true })] })] }));
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: trigger }), _jsxs(DialogContent, { className: "sm:max-w-xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "\u5DE5\u5177\u8BBE\u7F6E" }), _jsx(DialogDescription, { children: "\u914D\u7F6E\u5185\u7F6E\u5DE5\u5177\u7684\u8FDE\u63A5\u4FE1\u606F\u548C\u4EA4\u4E92\u884C\u4E3A\u3002" })] }), _jsxs(Tabs, { defaultValue: "image-generation", children: [_jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { value: "image-generation", children: "\u56FE\u7247\u751F\u6210" }), _jsx(TabsTrigger, { value: "user-choice", children: "\u7528\u6237\u9009\u62E9" })] }), _jsxs(TabsContent, { value: "image-generation", className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: "image-generation-enabled", children: "\u56FE\u7247\u751F\u6210\u5DE5\u5177" }), _jsx("p", { className: "mt-1 text-muted-foreground text-xs", children: "\u586B\u5199 API Base URL\u3001API Key \u548C\u6A21\u578B\u540E\u53EF\u5F00\u542F\u3002" })] }), _jsx(Switch, { id: "image-generation-enabled", checked: imageGenerationToolSettings.enabled &&
+                                                    imageGenerationSettingsComplete, disabled: !imageGenerationSettingsComplete, onCheckedChange: (checked) => updateSetting("enabled", checked) })] }), _jsx(SettingsInput, { id: "image-generation-base-url", label: "API Base URL", placeholder: "https://api.openai.com/v1", value: (_a = imageGenerationToolSettings.baseUrl) !== null && _a !== void 0 ? _a : "", onValueChange: (value) => updateConnectionSetting("baseUrl", value) }), _jsx(SettingsInput, { id: "image-generation-api-key", label: "API Key", placeholder: "sk-...", type: "password", value: (_b = imageGenerationToolSettings.apiKey) !== null && _b !== void 0 ? _b : "", onValueChange: (value) => updateConnectionSetting("apiKey", value) }), _jsx(SettingsInput, { id: "image-generation-model", label: "\u6A21\u578B", placeholder: "gpt-image-1", value: (_c = imageGenerationToolSettings.model) !== null && _c !== void 0 ? _c : "", onValueChange: (value) => updateConnectionSetting("model", value) }), _jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: "image-generation-preserve-prompt", children: "\u4FDD\u7559\u539F\u59CB\u63D0\u793A\u8BCD" }), _jsx("p", { className: "mt-1 text-muted-foreground text-xs", children: "\u8BF7\u6C42\u56FE\u7247 API \u65F6\u5728 prompt \u524D\u52A0\u5165\u4E0D\u8981\u6539\u5199\u63D0\u793A\uFF0C\u8BB0\u5F55\u4ECD\u663E\u793A\u539F\u59CB\u63D0\u793A\u8BCD\u3002" })] }), _jsx(Switch, { id: "image-generation-preserve-prompt", checked: imageGenerationToolSettings.preservePrompt, onCheckedChange: (checked) => updateSetting("preservePrompt", checked) })] })] }), _jsxs(TabsContent, { value: "user-choice", className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: "user-choice-enabled", children: "\u7528\u6237\u9009\u62E9\u5DE5\u5177" }), _jsx("p", { className: "mt-1 text-muted-foreground text-xs", children: "\u5141\u8BB8\u6A21\u578B\u901A\u8FC7 MCP \u53D1\u8D77\u5355\u9009\u3001\u591A\u9009\u6216\u591A\u9898\u9009\u62E9\u3002" })] }), _jsx(Switch, { id: "user-choice-enabled", checked: userChoiceToolSettings.enabled, onCheckedChange: (checked) => updateUserChoiceSetting("enabled", checked) })] }), _jsx(SettingsInput, { id: "user-choice-timeout-ms", label: "\u7B49\u5F85\u8D85\u65F6\uFF08\u6BEB\u79D2\uFF09", type: "number", value: String(userChoiceToolSettings.waitTimeoutMs), onValueChange: (value) => updateUserChoiceSetting("waitTimeoutMs", Number.parseInt(value, 10)) }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "user-choice-custom-input", children: "\u5141\u8BB8\u81EA\u5B9A\u4E49\u8F93\u5165" }), _jsx(Switch, { id: "user-choice-custom-input", checked: userChoiceToolSettings.allowCustomInput, onCheckedChange: (checked) => updateUserChoiceSetting("allowCustomInput", checked) })] }), _jsx(SettingsInput, { id: "user-choice-custom-input-label", label: "\u81EA\u5B9A\u4E49\u9009\u9879\u6587\u6848", value: userChoiceToolSettings.customInputLabel, onValueChange: (value) => updateUserChoiceSetting("customInputLabel", value) })] })] }), _jsx(DialogFooter, { showCloseButton: true })] })] }));
 }
 function SettingsInput({ id, label, value, onValueChange, placeholder, type = "text", }) {
     return (_jsxs("div", { className: "grid gap-2", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, type: type, value: value, placeholder: placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })] }));

package/dist/components/assistant-ui/image.mjs

@@ -81,7 +81,7 @@ const copyImagePart = async (part) => {
     const mime = (_b = (_a = mimeFromImage(part.image)) !== null && _a !== void 0 ? _a : blob.type) !== null && _b !== void 0 ? _b : "image/png";
     await navigator.clipboard.write([new ClipboardItem({ [mime]: blob })]);
 };
-const imageVariants = cva("aui-image-root relative overflow-hidden rounded-lg", {
+const imageVariants = cva("aui-image-root relative w-fit max-w-full overflow-hidden rounded-lg", {
     variants: {
         variant: {
             outline: "border-border border",
@@ -90,7 +90,7 @@ const imageVariants = cva("aui-image-root relative overflow-hidden rounded-lg",
         },
         size: {
             sm: "max-w-64",
-            default: "inline-block max-w-[30vw] max-md:max-w-full",
+            default: "max-w-[30vw] max-md:max-w-full",
             lg: "max-w-[512px]",
             full: "w-full",
         },

package/dist/components/assistant-ui/markdown-text.mjs

@@ -97,7 +97,7 @@ const defaultComponents = memoizeMarkdownComponents({
     },
     p: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
-        return (_jsx("div", Object.assign({ className: cn("aui-md-p my-2.5 leading-[1.7] first:mt-0 last:mb-0", className) }, props)));
+        return (_jsx("div", Object.assign({ className: cn("aui-md-p my-2 leading-[1.6] first:mt-0 last:mb-0 md:my-2.5 md:leading-[1.7]", className) }, props)));
     },
     a: (_a) => {
         var { className, href, children } = _a, props = __rest(_a, ["className", "href", "children"]);
@@ -159,7 +159,7 @@ const defaultComponents = memoizeMarkdownComponents({
     },
     li: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
-        return (_jsx("li", Object.assign({ className: cn("aui-md-li leading-[1.7]", className) }, props)));
+        return (_jsx("li", Object.assign({ className: cn("aui-md-li leading-[1.6] md:leading-[1.7]", className) }, props)));
     },
     sup: (_a) => {
         var { className } = _a, props = __rest(_a, ["className"]);
@@ -199,7 +199,7 @@ function LocalFile({ path, className }) {
             body: JSON.stringify({ path }),
         }).catch(() => { });
     };
-    return (_jsxs(File.Root, { role: "button", tabIndex: 0, className: cn("my-2 cursor-pointer", className), onClick: openFile, onKeyDown: (event) => {
+    return (_jsxs(File.Root, { role: "button", tabIndex: 0, className: cn("my-1.5 flex w-fit cursor-pointer", className), onClick: openFile, onKeyDown: (event) => {
             if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();
                 openFile();

package/dist/components/assistant-ui/thread/composer.d.ts

@@ -1,5 +1,5 @@
 import { ComposerPrimitive } from "@assistant-ui/react";
-import type { ComponentPropsWithoutRef, FC, ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type FC, type ReactNode } from "react";
 type ComposerInputProps = ComponentPropsWithoutRef<typeof ComposerPrimitive.Input>;
 export type ComposerProps = {
     placeholder?: string;

package/dist/components/assistant-ui/thread/composer.mjs

@@ -1,15 +1,49 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AuiIf, ComposerPrimitive } from "@assistant-ui/react";
+import { AuiIf, ComposerPrimitive, useAui, useAuiState, } from "@assistant-ui/react";
 import { ArrowUpIcon, SquareIcon } from "lucide-react";
+import { useCallback, } from "react";
 import { AcpCommandMenu } from "../acp-command-menu.mjs";
 import { AcpComposerSelectors } from "../acp-selectors.mjs";
 import { ComposerAddAttachment, ComposerAttachments, } from "../attachment.mjs";
 import { TooltipIconButton } from "../tooltip-icon-button.mjs";
 import { Button } from "../../ui/button.mjs";
+import { useAcpUiRuntimeContext } from "../../../lib/acp2aisdk/client-context.mjs";
+import { acpApiClient } from "../../../lib/api/client.mjs";
 export const Composer = ({ addAttachmentLabel, ariaLabel = "消息输入框", leadingActions, onPaste, placeholder = "输入 / 使用技能，或直接发送消息...", sendLabel, showAttachments = true, showCommandMenu = true, showSelectors = true, trailingActions, triggerPopovers, }) => {
-    return (_jsx(ComposerPrimitive.Root, { className: "aui-composer-root relative flex w-full flex-col", children: _jsx(ComposerPrimitive.AttachmentDropzone, { asChild: true, children: _jsxs("div", { "data-slot": "aui_composer-shell", className: "flex w-full flex-col gap-2 rounded-(--composer-radius) border bg-background p-(--composer-padding) transition-shadow focus-within:border-ring/75 focus-within:ring-2 focus-within:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50", children: [_jsxs(ComposerPrimitive.Unstable_TriggerPopoverRoot, { children: [showAttachments ? _jsx(ComposerAttachments, {}) : null, _jsx(ComposerPrimitive.Input, { placeholder: placeholder, className: "aui-composer-input max-h-32 min-h-10 w-full resize-none bg-transparent px-1.75 py-1 text-[13px] outline-none placeholder:text-muted-foreground/80 md:text-sm", rows: 1, autoFocus: true, "aria-label": ariaLabel, onPaste: onPaste }), showCommandMenu ? _jsx(AcpCommandMenu, {}) : null, triggerPopovers] }), _jsx(ComposerAction, { addAttachmentLabel: addAttachmentLabel, leadingActions: leadingActions, sendLabel: sendLabel, showAddAttachment: showAttachments, showSelectors: showSelectors, trailingActions: trailingActions })] }) }) }));
+    const aui = useAui();
+    const cancelActiveChatRun = useCancelActiveChatRun();
+    const handleInputKeyDown = useCallback((event) => {
+        if (event.key !== "Escape")
+            return;
+        const composer = aui.composer();
+        queueMicrotask(() => {
+            if (event.defaultPrevented)
+                return;
+            if (!composer.getState().canCancel)
+                return;
+            cancelActiveChatRun();
+            composer.cancel();
+        });
+    }, [aui, cancelActiveChatRun]);
+    return (_jsx(ComposerPrimitive.Root, { className: "aui-composer-root relative flex w-full flex-col", children: _jsx(ComposerPrimitive.AttachmentDropzone, { asChild: true, children: _jsxs("div", { "data-slot": "aui_composer-shell", className: "flex w-full flex-col gap-2 rounded-(--composer-radius) border bg-background p-(--composer-padding) transition-shadow focus-within:border-ring/75 focus-within:ring-2 focus-within:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50", children: [_jsxs(ComposerPrimitive.Unstable_TriggerPopoverRoot, { children: [showAttachments ? _jsx(ComposerAttachments, {}) : null, _jsx(ComposerPrimitive.Input, { placeholder: placeholder, className: "aui-composer-input max-h-32 min-h-10 w-full resize-none bg-transparent px-1.75 py-1 text-[13px] outline-none placeholder:text-muted-foreground/80 md:text-sm", rows: 1, autoFocus: true, "aria-label": ariaLabel, cancelOnEscape: false, onKeyDown: handleInputKeyDown, onPaste: onPaste }), showCommandMenu ? _jsx(AcpCommandMenu, {}) : null, triggerPopovers] }), _jsx(ComposerAction, { addAttachmentLabel: addAttachmentLabel, leadingActions: leadingActions, sendLabel: sendLabel, showAddAttachment: showAttachments, showSelectors: showSelectors, trailingActions: trailingActions })] }) }) }));
 };
 export const ComposerAction = ({ addAttachmentLabel, leadingActions, sendLabel = "发送消息", showAddAttachment = true, showSelectors = true, trailingActions, }) => {
-    return (_jsxs("div", { className: "aui-composer-action-wrapper relative flex items-center justify-between text-[13px] md:text-sm", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [showAddAttachment ? (_jsx(ComposerAddAttachment, { label: addAttachmentLabel })) : null, showSelectors ? _jsx(AcpComposerSelectors, {}) : null, leadingActions] }), _jsxs("div", { className: "flex items-center gap-1", children: [trailingActions, _jsx(AuiIf, { condition: (s) => !s.thread.isRunning, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: sendLabel, side: "bottom", type: "button", variant: "default", size: "icon", className: "aui-composer-send size-8 rounded-full", "aria-label": sendLabel, children: _jsx(ArrowUpIcon, { className: "aui-composer-send-icon size-4" }) }) }) }), _jsx(AuiIf, { condition: (s) => s.thread.isRunning, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { type: "button", variant: "default", size: "icon", className: "aui-composer-cancel size-8 rounded-full", "aria-label": "\u505C\u6B62\u751F\u6210", children: _jsx(SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" }) }) }) })] })] }));
+    const cancelActiveChatRun = useCancelActiveChatRun();
+    return (_jsxs("div", { className: "aui-composer-action-wrapper relative flex items-center justify-between text-[13px] md:text-sm", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [showAddAttachment ? (_jsx(ComposerAddAttachment, { label: addAttachmentLabel })) : null, showSelectors ? _jsx(AcpComposerSelectors, {}) : null, leadingActions] }), _jsxs("div", { className: "flex items-center gap-1", children: [trailingActions, _jsx(AuiIf, { condition: (s) => !s.thread.isRunning, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: sendLabel, side: "bottom", type: "button", variant: "default", size: "icon", className: "aui-composer-send size-8 rounded-full", "aria-label": sendLabel, children: _jsx(ArrowUpIcon, { className: "aui-composer-send-icon size-4" }) }) }) }), _jsx(AuiIf, { condition: (s) => s.thread.isRunning, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { type: "button", variant: "default", size: "icon", className: "aui-composer-cancel size-8 rounded-full", "aria-label": "\u505C\u6B62\u751F\u6210", onClick: () => {
+                                    cancelActiveChatRun();
+                                }, children: _jsx(SquareIcon, { className: "aui-composer-cancel-icon size-3 fill-current" }) }) }) })] })] }));
 };
+function useCancelActiveChatRun() {
+    const { provider, workspacePath } = useAcpUiRuntimeContext();
+    const remoteId = useAuiState((state) => state.threadListItem.remoteId);
+    const mainThreadId = useAuiState((state) => state.threads.mainThreadId);
+    const threadId = remoteId !== null && remoteId !== void 0 ? remoteId : mainThreadId;
+    return useCallback(() => {
+        void acpApiClient.cancelChat({
+            threadId,
+            provider,
+            workspacePath,
+        });
+    }, [provider, threadId, workspacePath]);
+}

package/dist/components/assistant-ui/thread/context-chips.mjs

@@ -103,9 +103,10 @@ function getContextChipTooltip(item, workspacePath) {
 }
 export const ContextChips = () => {
     const { contextBundle, removeContextItems, workspacePath } = useAcpUiRuntimeContext();
-    if (contextBundle.items.length === 0)
+    const visibleItems = contextBundle.items.filter((item) => item.hidden !== true);
+    if (visibleItems.length === 0)
         return null;
-    return (_jsx("div", { className: "flex min-h-11 w-full items-center", children: _jsx("div", { className: "flex w-full flex-wrap items-center gap-1.5 px-1", children: contextBundle.items.map((item) => {
+    return (_jsx("div", { className: "flex min-h-11 w-full items-center", children: _jsx("div", { className: "flex w-full flex-wrap items-center gap-1.5 px-1", children: visibleItems.map((item) => {
                 const id = item.id;
                 if (!id)
                     return null;

package/dist/components/assistant-ui/thread/index.mjs

@@ -21,7 +21,7 @@ export const Thread = ({ isHistoryRoute = false }) => {
             ["--thread-max-width"]: "44rem",
             ["--composer-radius"]: "24px",
             ["--composer-padding"]: "10px",
-        }, children: _jsx(ThreadPrimitive.Viewport, { turnAnchor: "top", "data-slot": "aui_thread-viewport", className: "relative flex flex-1 flex-col overflow-x-auto overflow-y-auto scroll-smooth", children: _jsxs("div", { className: "mx-auto flex w-full max-w-(--thread-max-width) flex-1 flex-col px-4 pt-4", children: [_jsx(AuiIf, { condition: () => showLoadingState, children: _jsx(ThreadHistoryLoading, {}) }), _jsx(AuiIf, { condition: () => messageCount === 0 && (!isHistoryRoute || showHistoryEmpty), children: _jsx(ThreadEmptyState, { isHistoryRoute: isHistoryRoute }) }), _jsx(MessageList, {}), _jsxs(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mt-auto flex flex-col gap-0 overflow-visible rounded-t-(--composer-radius) bg-background pb-4 md:pb-6", children: [_jsx(ThreadScrollToBottom, {}), _jsx(ContextChips, {}), _jsx(Composer, {})] })] }) }) }));
+        }, children: _jsx(ThreadPrimitive.Viewport, { turnAnchor: "top", "data-slot": "aui_thread-viewport", className: "relative flex flex-1 flex-col overflow-x-auto overflow-y-auto scroll-smooth", children: _jsxs("div", { className: "mx-auto flex w-full max-w-(--thread-max-width) flex-1 flex-col px-3 pt-14 sm:px-4 lg:pt-4", children: [_jsx(AuiIf, { condition: () => showLoadingState, children: _jsx(ThreadHistoryLoading, {}) }), _jsx(AuiIf, { condition: () => messageCount === 0 && (!isHistoryRoute || showHistoryEmpty), children: _jsx(ThreadEmptyState, { isHistoryRoute: isHistoryRoute }) }), _jsx(MessageList, {}), _jsxs(ThreadPrimitive.ViewportFooter, { className: "aui-thread-viewport-footer sticky bottom-0 mt-auto flex flex-col gap-0 overflow-visible rounded-t-(--composer-radius) bg-background pb-4 md:pb-6", children: [_jsx(ThreadScrollToBottom, {}), _jsx(ContextChips, {}), _jsx(Composer, {})] })] }) }) }));
 };
 function useDebouncedHistoryEmptyState({ isHistoryRoute, isLoading, messageCount, }) {
     const [showEmpty, setShowEmpty] = useState(false);

package/dist/components/assistant-ui/thread/message-list.mjs

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ThreadPrimitive, useAuiState } from "@assistant-ui/react";
 import { AssistantMessage, EditComposer, UserMessage } from "./messages.mjs";
 export const MessageList = () => {
-    return (_jsx("div", { "data-slot": "aui_message-group", className: "mb-10 flex flex-col gap-y-8 empty:hidden", children: _jsx(ThreadPrimitive.Messages, { children: () => _jsx(ThreadMessage, {}) }) }));
+    return (_jsx("div", { "data-slot": "aui_message-group", className: "mb-8 flex flex-col gap-y-6 empty:hidden md:mb-10 md:gap-y-8", children: _jsx(ThreadPrimitive.Messages, { children: () => _jsx(ThreadMessage, {}) }) }));
 };
 export const ThreadMessage = () => {
     const role = useAuiState((s) => s.message.role);

package/dist/components/assistant-ui/thread/messages.mjs

@@ -30,7 +30,7 @@ export const MessageError = () => {
 export const AssistantMessage = () => {
     const ACTION_BAR_PT = "pt-1.5";
     const ACTION_BAR_HEIGHT = `-mb-7.5 min-h-7.5 ${ACTION_BAR_PT}`;
-    return (_jsxs(MessagePrimitive.Root, { "data-slot": "aui_assistant-message-root", "data-role": "assistant", className: "fade-in slide-in-from-bottom-1 relative animate-in duration-150 [contain-intrinsic-size:auto_300px] [content-visibility:auto]", children: [_jsxs("div", { "data-slot": "aui_assistant-message-content", className: "wrap-break-word px-2 text-[15px] text-foreground leading-relaxed md:text-base", children: [_jsx(MessagePrimitive.Parts, { children: ({ part }) => {
+    return (_jsxs(MessagePrimitive.Root, { "data-slot": "aui_assistant-message-root", "data-role": "assistant", className: "fade-in slide-in-from-bottom-1 relative animate-in duration-150 [contain-intrinsic-size:auto_300px] [content-visibility:auto]", children: [_jsxs("div", { "data-slot": "aui_assistant-message-content", className: "wrap-break-word px-1.5 text-sm text-foreground leading-[1.6] md:px-2 md:text-base md:leading-relaxed [&>[data-slot=image-root]]:my-2", children: [_jsx(MessagePrimitive.Parts, { children: ({ part }) => {
                             var _a;
                             if (part.type === "text")
                                 return _jsx(MarkdownText, {});
@@ -57,7 +57,7 @@ export const UserMessage = () => {
     const isInternalUserChoiceResult = useAuiState((state) => state.message.content.some((part) => part.type === "text" && isUserChoiceResultMessageText(part.text)));
     if (isInternalUserChoiceResult)
         return null;
-    return (_jsxs(MessagePrimitive.Root, { "data-slot": "aui_user-message-root", className: "fade-in slide-in-from-bottom-1 grid animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 duration-150 [contain-intrinsic-size:auto_60px] [content-visibility:auto] [&:where(>*)]:col-start-2", "data-role": "user", children: [_jsx(UserMessageAttachments, {}), _jsxs("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [_jsx("div", { className: "aui-user-message-content wrap-break-word peer rounded-2xl bg-muted px-4 py-2.5 text-[15px] text-foreground md:text-base empty:hidden", children: _jsx(MessagePrimitive.Parts, { components: { Image: ImageMessage, File } }) }), _jsx("div", { className: "aui-user-action-bar-wrapper absolute start-0 top-1/2 -translate-x-full -translate-y-1/2 pe-2 peer-empty:hidden rtl:translate-x-full", children: _jsx(UserActionBar, {}) })] }), _jsx(BranchPicker, { "data-slot": "aui_user-branch-picker", className: "col-span-full col-start-1 row-start-3 -me-1 justify-end" })] }));
+    return (_jsxs(MessagePrimitive.Root, { "data-slot": "aui_user-message-root", className: "fade-in slide-in-from-bottom-1 grid animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 duration-150 [contain-intrinsic-size:auto_60px] [content-visibility:auto] [&:where(>*)]:col-start-2", "data-role": "user", children: [_jsx(UserMessageAttachments, {}), _jsxs("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: [_jsx("div", { className: "aui-user-message-content wrap-break-word peer rounded-2xl bg-muted px-3.5 py-2 text-sm text-foreground leading-[1.55] md:px-4 md:py-2.5 md:text-base md:leading-normal empty:hidden [&>[data-slot=image-root]]:my-2", children: _jsx(MessagePrimitive.Parts, { components: { Image: ImageMessage, File } }) }), _jsx("div", { className: "aui-user-action-bar-wrapper absolute start-0 top-1/2 -translate-x-full -translate-y-1/2 pe-2 peer-empty:hidden rtl:translate-x-full", children: _jsx(UserActionBar, {}) })] }), _jsx(BranchPicker, { "data-slot": "aui_user-branch-picker", className: "col-span-full col-start-1 row-start-3 -me-1 justify-end" })] }));
 };
 export const UserActionBar = () => {
     return (_jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "aui-user-action-bar-root flex flex-col items-end", children: _jsx(ActionBarPrimitive.Edit, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "\u7F16\u8F91", className: "aui-user-action-edit p-4", children: _jsx(PencilIcon, {}) }) }) }));

package/dist/components/assistant-ui/thread-list.d.ts

@@ -1,2 +1,8 @@
-import type { FC } from "react";
-export declare const ThreadList: FC;
+import { type FC, type MouseEventHandler } from "react";
+type ThreadListProps = {
+    openInNewWindowHref?: string | null;
+    localNewThreadHref?: string | null;
+    onNewThreadClick?: MouseEventHandler<HTMLButtonElement>;
+};
+export declare const ThreadList: FC<ThreadListProps>;
+export {};

package/dist/components/assistant-ui/thread-list.mjs

@@ -1,9 +1,12 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AuiIf, ThreadListItemMorePrimitive, ThreadListItemPrimitive, ThreadListPrimitive, } from "@assistant-ui/react";
-import { ArchiveIcon, MoreHorizontalIcon, PlusIcon, SettingsIcon, TrashIcon, } from "lucide-react";
+import { AuiIf, ThreadListItemMorePrimitive, ThreadListItemPrimitive, ThreadListPrimitive, useAui, useAuiState, } from "@assistant-ui/react";
+import { ArchiveIcon, ExternalLinkIcon, MoreHorizontalIcon, PlusIcon, SettingsIcon, TrashIcon, } from "lucide-react";
+import { useEffect, useMemo, useRef, useState, } from "react";
 import { ImageGenerationSettingsDialog } from "./image-generation-settings-dialog.mjs";
 import { Button } from "../ui/button.mjs";
 import { Skeleton } from "../ui/skeleton.mjs";
+import { acpApiClient } from "../../lib/api/client.mjs";
 const THREAD_LIST_SKELETON_ITEMS = [
     "thread-list-skeleton-1",
     "thread-list-skeleton-2",
@@ -11,11 +14,12 @@ const THREAD_LIST_SKELETON_ITEMS = [
     "thread-list-skeleton-4",
     "thread-list-skeleton-5",
 ];
-export const ThreadList = () => {
-    return (_jsxs(ThreadListPrimitive.Root, { className: "aui-root aui-thread-list-root flex w-full min-w-0 flex-col gap-1", children: [_jsx(ThreadListNew, {}), _jsx(AuiIf, { condition: (s) => s.threads.isLoading && s.threads.threadIds.length === 0, children: _jsx(ThreadListSkeleton, {}) }), _jsxs(AuiIf, { condition: (s) => !s.threads.isLoading || s.threads.threadIds.length > 0, children: [_jsx(ThreadListPrimitive.Items, { children: () => _jsx(ThreadListItem, {}) }), _jsx(AuiIf, { condition: (s) => s.threads.hasMore, children: _jsx(ThreadListLoadMore, {}) })] })] }));
+export const ThreadList = ({ openInNewWindowHref, localNewThreadHref, onNewThreadClick, }) => {
+    return (_jsxs(ThreadListPrimitive.Root, { className: "aui-root aui-thread-list-root flex w-full min-w-0 flex-col gap-1", children: [_jsx(ThreadListRuntimeRefresh, {}), _jsx(ThreadListNew, { openInNewWindowHref: openInNewWindowHref, localNewThreadHref: localNewThreadHref, onNewThreadClick: onNewThreadClick }), _jsx(AuiIf, { condition: (s) => s.threads.isLoading && s.threads.threadIds.length === 0, children: _jsx(ThreadListSkeleton, {}) }), _jsxs(AuiIf, { condition: (s) => !s.threads.isLoading || s.threads.threadIds.length > 0, children: [_jsx(ThreadListPrimitive.Items, { children: () => _jsx(ThreadListItem, {}) }), _jsx(AuiIf, { condition: (s) => s.threads.hasMore, children: _jsx(ThreadListLoadMore, {}) })] })] }));
 };
-const ThreadListNew = () => {
-    return (_jsxs("div", { className: "aui-thread-list-top-actions mb-2 flex flex-col gap-1", children: [_jsx(ImageGenerationSettingsDialog, { trigger: _jsxs(Button, { type: "button", variant: "ghost", className: "aui-thread-list-settings h-9 w-full min-w-0 justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted data-[state=open]:bg-muted", children: [_jsx(SettingsIcon, { className: "size-4" }), _jsx("span", { className: "truncate", children: "\u8BBE\u7F6E" })] }) }), _jsx(ThreadListPrimitive.New, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "aui-thread-list-new h-9 w-full min-w-0 justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted", children: [_jsx(PlusIcon, { className: "size-4" }), _jsx("span", { className: "truncate", children: "\u65B0\u5EFA\u5BF9\u8BDD" })] }) })] }));
+const ThreadListNew = ({ openInNewWindowHref, localNewThreadHref, onNewThreadClick, }) => {
+    const newThreadButton = (_jsxs(Button, { variant: "ghost", className: "aui-thread-list-new h-9 w-full min-w-0 justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted", onClick: onNewThreadClick, children: [_jsx(PlusIcon, { className: "size-4" }), _jsx("span", { className: "truncate", children: "\u65B0\u5EFA\u5BF9\u8BDD" })] }));
+    return (_jsxs("div", { className: "aui-thread-list-top-actions mb-2 flex flex-col gap-1", children: [_jsx(ImageGenerationSettingsDialog, { trigger: _jsxs(Button, { type: "button", variant: "ghost", className: "aui-thread-list-settings h-9 w-full min-w-0 justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted data-[state=open]:bg-muted", children: [_jsx(SettingsIcon, { className: "size-4" }), _jsx("span", { className: "truncate", children: "\u8BBE\u7F6E" })] }) }), localNewThreadHref ? (newThreadButton) : (_jsx(ThreadListPrimitive.New, { asChild: true, children: newThreadButton })), openInNewWindowHref ? (_jsx(Button, { asChild: true, variant: "ghost", className: "aui-thread-list-open-window h-9 w-full min-w-0 justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted", children: _jsxs("a", { href: openInNewWindowHref, target: "_blank", rel: "noopener noreferrer", children: [_jsx(ExternalLinkIcon, { className: "size-4" }), _jsx("span", { className: "truncate", children: "\u65B0\u7A97\u53E3\u6253\u5F00" })] }) })) : null] }));
 };
 const ThreadListSkeleton = () => {
     return (_jsx("div", { className: "flex flex-col gap-1", children: THREAD_LIST_SKELETON_ITEMS.map((item) => (_jsx("div", { role: "status", "aria-label": "\u6B63\u5728\u52A0\u8F7D\u5BF9\u8BDD", className: "aui-thread-list-skeleton-wrapper flex h-9 items-center px-3", children: _jsx(Skeleton, { className: "aui-thread-list-skeleton h-4 w-full" }) }, item))) }));
@@ -24,7 +28,76 @@ const ThreadListLoadMore = () => {
     return (_jsx(ThreadListPrimitive.LoadMore, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "aui-thread-list-load-more h-9 justify-center rounded-lg px-3 text-muted-foreground text-sm hover:bg-muted hover:text-foreground", children: [_jsx(AuiIf, { condition: (s) => !s.threads.isLoadingMore, children: "\u52A0\u8F7D\u66F4\u591A" }), _jsx(AuiIf, { condition: (s) => s.threads.isLoadingMore, children: "\u6B63\u5728\u52A0\u8F7D..." })] }) }));
 };
 const ThreadListItem = () => {
-    return (_jsxs(ThreadListItemPrimitive.Root, { className: "aui-thread-list-item group/thread-list-item flex h-9 w-full min-w-0 items-center rounded-lg transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none data-active:bg-muted", children: [_jsx(ThreadListItemPrimitive.Trigger, { className: "aui-thread-list-item-trigger flex h-full min-w-0 flex-1 items-center px-3 text-start text-sm", children: _jsx("span", { className: "aui-thread-list-item-title min-w-0 flex-1 truncate", children: _jsx(ThreadListItemPrimitive.Title, { fallback: "\u65B0\u5BF9\u8BDD" }) }) }), _jsx(ThreadListItemMore, {})] }));
+    return (_jsxs(ThreadListItemPrimitive.Root, { className: "aui-thread-list-item group/thread-list-item flex h-9 w-full min-w-0 items-center rounded-lg transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none data-active:bg-muted", children: [_jsxs(ThreadListItemPrimitive.Trigger, { className: "aui-thread-list-item-trigger flex h-full min-w-0 flex-1 items-center px-3 text-start text-sm", children: [_jsx("span", { className: "aui-thread-list-item-title min-w-0 flex-1 truncate", children: _jsx(ThreadListItemPrimitive.Title, { fallback: "\u65B0\u5BF9\u8BDD" }) }), _jsx(ThreadListItemRunStatus, {})] }), _jsx(ThreadListItemMore, {})] }));
+};
+function getCustomString(custom, key) {
+    const value = custom === null || custom === void 0 ? void 0 : custom[key];
+    return typeof value === "string" && value.trim() ? value.trim() : undefined;
+}
+function getRunDisplayState(runState) {
+    return runState === "queued" || runState === "running" ? "running" : null;
+}
+const ThreadListRuntimeRefresh = () => {
+    const aui = useAui();
+    const isRunning = useAuiState((state) => state.thread.isRunning);
+    const previousIsRunningRef = useRef(isRunning);
+    useEffect(() => {
+        const wasRunning = previousIsRunningRef.current;
+        previousIsRunningRef.current = isRunning;
+        if (!wasRunning || isRunning)
+            return;
+        void aui
+            .threads()
+            .reload()
+            .catch(() => { });
+    }, [aui, isRunning]);
+    return null;
+};
+const ThreadListItemRunStatus = () => {
+    const remoteId = useAuiState((state) => state.threadListItem.remoteId);
+    const custom = useAuiState((state) => state.threadListItem.custom);
+    const isCurrentThread = useAuiState((state) => state.threads.mainThreadId === state.threadListItem.id);
+    const currentThreadIsRunning = useAuiState((state) => state.thread.isRunning);
+    const workspacePath = getCustomString(custom, "workspacePath");
+    const currentRunSignal = isCurrentThread ? currentThreadIsRunning : null;
+    const [displayState, setDisplayState] = useState(null);
+    const [refreshToken, setRefreshToken] = useState(0);
+    const previousRuntimeRefreshRef = useRef(`${isCurrentThread}:${currentRunSignal}`);
+    const runtimeRequest = useMemo(() => ({ refreshToken, remoteId, workspacePath }), [refreshToken, remoteId, workspacePath]);
+    useEffect(() => {
+        const signature = `${isCurrentThread}:${currentRunSignal}`;
+        if (previousRuntimeRefreshRef.current === signature)
+            return;
+        previousRuntimeRefreshRef.current = signature;
+        if (isCurrentThread)
+            setRefreshToken((value) => value + 1);
+    }, [isCurrentThread, currentRunSignal]);
+    useEffect(() => {
+        let cancelled = false;
+        if (!runtimeRequest.remoteId) {
+            setDisplayState(null);
+            return;
+        }
+        void acpApiClient
+            .getConversationRuntime(runtimeRequest.remoteId, runtimeRequest.workspacePath)
+            .then((runtime) => {
+            var _a;
+            if (cancelled)
+                return;
+            setDisplayState(getRunDisplayState((_a = runtime.metadata) === null || _a === void 0 ? void 0 : _a.runState));
+        })
+            .catch(() => {
+            if (!cancelled)
+                setDisplayState(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [runtimeRequest]);
+    const isRunning = displayState === "running";
+    if (!isRunning)
+        return null;
+    return (_jsx("span", { className: "aui-thread-list-item-run-status ms-2 inline-flex size-3 shrink-0 items-center justify-center", role: "img", "aria-label": "\u5BF9\u8BDD\u8FD0\u884C\u4E2D", title: "\u5BF9\u8BDD\u8FD0\u884C\u4E2D", children: _jsx("span", { className: "block size-3 animate-spin rounded-full border border-foreground/70 border-t-transparent motion-reduce:animate-none" }) }));
 };
 const ThreadListItemMore = () => {
     return (_jsxs(ThreadListItemMorePrimitive.Root, { children: [_jsx(ThreadListItemMorePrimitive.Trigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", className: "aui-thread-list-item-more me-0 h-7 w-0 overflow-hidden p-0 opacity-0 transition-[width,margin,opacity,background-color,color] group-hover/thread-list-item:me-2 group-hover/thread-list-item:w-7 group-hover/thread-list-item:opacity-100 group-focus-within/thread-list-item:me-2 group-focus-within/thread-list-item:w-7 group-focus-within/thread-list-item:opacity-100 data-[state=open]:me-2 data-[state=open]:w-7 data-[state=open]:bg-accent data-[state=open]:opacity-100", children: [_jsx(MoreHorizontalIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "\u66F4\u591A\u9009\u9879" })] }) }), _jsxs(ThreadListItemMorePrimitive.Content, { side: "bottom", align: "start", className: "aui-thread-list-item-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", children: [_jsx(ThreadListItemPrimitive.Archive, { asChild: true, children: _jsxs(ThreadListItemMorePrimitive.Item, { className: "aui-thread-list-item-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", children: [_jsx(ArchiveIcon, { className: "size-4" }), "\u5F52\u6863"] }) }), _jsx(ThreadListItemPrimitive.Delete, { asChild: true, children: _jsxs(ThreadListItemMorePrimitive.Item, { className: "aui-thread-list-item-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-destructive text-sm outline-none hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive", children: [_jsx(TrashIcon, { className: "size-4" }), "\u5220\u9664"] }) })] })] }));

package/dist/components/assistant-ui/threadlist-sidebar.d.ts

@@ -1,6 +1,9 @@
 import type * as React from "react";
 import { Sidebar } from "../ui/sidebar";
-export declare function ThreadListSidebar({ workspacePath, workspaceTitle, ...props }: React.ComponentProps<typeof Sidebar> & {
+export declare function ThreadListSidebar({ workspacePath, workspaceTitle, openInNewWindowHref, localNewThreadHref, onNewThreadClick, ...props }: React.ComponentProps<typeof Sidebar> & {
     workspacePath?: string | null;
     workspaceTitle?: string | null;
+    openInNewWindowHref?: string | null;
+    localNewThreadHref?: string | null;
+    onNewThreadClick?: React.MouseEventHandler<HTMLButtonElement>;
 }): import("react/jsx-runtime").JSX.Element;