@axhub/acp 0.1.0

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

@@ -0,0 +1,208 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@assistant-ui/react-markdown/styles/dot.css";
+import { MarkdownTextPrimitive, unstable_memoizeMarkdownComponents as memoizeMarkdownComponents, useIsMarkdownCodeBlock, } from "@assistant-ui/react-markdown";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { memo, useState } from "react";
+import remarkGfm from "remark-gfm";
+import { File } from "./file.mjs";
+import { Image } from "./image.mjs";
+import { TooltipIconButton } from "./tooltip-icon-button.mjs";
+import { getLocalFileName, getLocalImageFileName, getLocalImagePreviewUrl, isLocalFilePath, isLocalImagePath, isRenderableImageUrl, markdownEscapeLinkDestination, } from "../../lib/local-image-paths.mjs";
+import { cn } from "../../lib/utils.mjs";
+const LOCAL_FILE_TEXT_RE = /(file:\/\/[^\s<>"']+\.[A-Za-z0-9][A-Za-z0-9_-]{0,15}(?:[?#][^\s<>"']*)?|https?:\/\/(?:localhost|127\.0\.0\.1|\[::1\])(?::\d+)?\/[^\s<>"']+\.[A-Za-z0-9][A-Za-z0-9_-]{0,15}(?:[?#][^\s<>"']*)?|\/(?:Users|home|tmp|var|private|Volumes|mnt|media|opt)\/[^\s<>"']+\.[A-Za-z0-9][A-Za-z0-9_-]{0,15}(?:[?#][^\s<>"']*)?|(?:[A-Za-z]:[\\/]|\\\\)[^\s<>"']+\.[A-Za-z0-9][A-Za-z0-9_-]{0,15}(?:[?#][^\s<>"']*)?)/gi;
+function isInsideMarkdownDestination(text, offset) {
+    const before = text.slice(Math.max(0, offset - 3), offset);
+    return before.endsWith("](") || before.endsWith("](<") || before === "<";
+}
+function preprocessLocalFilePaths(text) {
+    return text.replace(LOCAL_FILE_TEXT_RE, (match, _value, offset, fullText) => {
+        if (!isLocalFilePath(match))
+            return match;
+        if (isInsideMarkdownDestination(fullText, offset))
+            return match;
+        const fileName = isLocalImagePath(match)
+            ? getLocalImageFileName(match)
+            : getLocalFileName(match);
+        const destination = markdownEscapeLinkDestination(match);
+        return `[${fileName}](<${destination}>)`;
+    });
+}
+function getRenderableImageUrl(value) {
+    if (isRenderableImageUrl(value))
+        return value;
+    return null;
+}
+const MarkdownTextImpl = () => {
+    return (_jsx(MarkdownTextPrimitive, { remarkPlugins: [remarkGfm], smooth: false, className: "aui-md", components: defaultComponents, preprocess: preprocessLocalFilePaths }));
+};
+export const MarkdownText = memo(MarkdownTextImpl);
+const CodeHeader = ({ language, code }) => {
+    const { isCopied, copyToClipboard } = useCopyToClipboard();
+    const onCopy = () => {
+        if (!code || isCopied)
+            return;
+        copyToClipboard(code);
+    };
+    return (_jsxs("div", { className: "aui-code-header-root mt-2.5 flex items-center justify-between rounded-t-lg border border-border/50 border-b-0 bg-muted/50 px-3 py-1.5 text-xs", children: [_jsx("span", { className: "aui-code-header-language font-medium text-muted-foreground lowercase", children: language }), _jsxs(TooltipIconButton, { tooltip: "\u590D\u5236", onClick: onCopy, children: [!isCopied && _jsx(CopyIcon, {}), isCopied && _jsx(CheckIcon, {})] })] }));
+};
+const useCopyToClipboard = ({ copiedDuration = 3000, } = {}) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const copyToClipboard = (value) => {
+        if (!value || typeof navigator === "undefined" || !navigator.clipboard) {
+            return;
+        }
+        navigator.clipboard.writeText(value).then(() => {
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), copiedDuration);
+        }, () => { });
+    };
+    return { isCopied, copyToClipboard };
+};
+const defaultComponents = memoizeMarkdownComponents({
+    h1: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h1", Object.assign({ className: cn("aui-md-h1 mb-2 scroll-m-20 font-semibold text-base first:mt-0 last:mb-0", className) }, props)));
+    },
+    h2: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h2", Object.assign({ className: cn("aui-md-h2 mt-3 mb-1.5 scroll-m-20 font-semibold text-sm first:mt-0 last:mb-0", className) }, props)));
+    },
+    h3: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h3", Object.assign({ className: cn("aui-md-h3 mt-2.5 mb-1 scroll-m-20 font-semibold text-sm first:mt-0 last:mb-0", className) }, props)));
+    },
+    h4: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h4", Object.assign({ className: cn("aui-md-h4 mt-2 mb-1 scroll-m-20 font-medium text-sm first:mt-0 last:mb-0", className) }, props)));
+    },
+    h5: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h5", Object.assign({ className: cn("aui-md-h5 mt-2 mb-1 font-medium text-sm first:mt-0 last:mb-0", className) }, props)));
+    },
+    h6: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("h6", Object.assign({ className: cn("aui-md-h6 mt-2 mb-1 font-medium text-sm first:mt-0 last:mb-0", className) }, props)));
+    },
+    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)));
+    },
+    a: (_a) => {
+        var { className, href, children } = _a, props = __rest(_a, ["className", "href", "children"]);
+        const linkHref = typeof href === "string" ? href : "";
+        if (isLocalImagePath(linkHref)) {
+            return _jsx(LocalImage, { path: linkHref, className: className });
+        }
+        if (isLocalFilePath(linkHref)) {
+            return _jsx(LocalFile, { path: linkHref, className: className });
+        }
+        const renderableImageUrl = getRenderableImageUrl(linkHref);
+        if (renderableImageUrl) {
+            return (_jsx(RemoteImageLink, { href: renderableImageUrl, className: className }));
+        }
+        return (_jsx("a", Object.assign({ href: href, className: cn("aui-md-a text-primary underline underline-offset-2 hover:text-primary/80", className) }, props, { children: children })));
+    },
+    img: (_a) => {
+        var { className, src, alt } = _a, props = __rest(_a, ["className", "src", "alt"]);
+        const imageSrc = typeof src === "string" ? src : "";
+        if (isLocalImagePath(imageSrc)) {
+            return _jsx(LocalImage, { path: imageSrc, className: className });
+        }
+        const renderableImageUrl = getRenderableImageUrl(imageSrc);
+        if (!renderableImageUrl)
+            return null;
+        return (_jsx(MarkdownImage, Object.assign({ src: renderableImageUrl, alt: alt, className: className }, props)));
+    },
+    blockquote: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("blockquote", Object.assign({ className: cn("aui-md-blockquote my-2.5 border-muted-foreground/30 border-s-2 ps-3 text-muted-foreground italic", className) }, props)));
+    },
+    ul: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("ul", Object.assign({ className: cn("aui-md-ul my-2 ms-4 list-disc marker:text-muted-foreground [&>li]:mt-1", className) }, props)));
+    },
+    ol: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("ol", Object.assign({ className: cn("aui-md-ol my-2 ms-4 list-decimal marker:text-muted-foreground [&>li]:mt-1", className) }, props)));
+    },
+    hr: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("hr", Object.assign({ className: cn("aui-md-hr my-2 border-muted-foreground/20", className) }, props)));
+    },
+    table: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("table", Object.assign({ className: cn("aui-md-table my-2 w-full border-separate border-spacing-0 overflow-y-auto", className) }, props)));
+    },
+    th: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("th", Object.assign({ className: cn("aui-md-th bg-muted px-2 py-1 text-start font-medium first:rounded-ss-lg last:rounded-se-lg [[align=center]]:text-center [[align=right]]:text-right", className) }, props)));
+    },
+    td: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("td", Object.assign({ className: cn("aui-md-td border-muted-foreground/20 border-s border-b px-2 py-1 text-start last:border-e [[align=center]]:text-center [[align=right]]:text-right", className) }, props)));
+    },
+    tr: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("tr", Object.assign({ className: cn("aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-es-lg [&:last-child>td:last-child]:rounded-ee-lg", className) }, props)));
+    },
+    li: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("li", Object.assign({ className: cn("aui-md-li leading-[1.7]", className) }, props)));
+    },
+    sup: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("sup", Object.assign({ className: cn("aui-md-sup [&>a]:text-xs [&>a]:no-underline", className) }, props)));
+    },
+    pre: (_a) => {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        return (_jsx("pre", Object.assign({ className: cn("aui-md-pre overflow-x-auto rounded-t-none rounded-b-lg border border-border/50 border-t-0 bg-muted/30 p-3 text-xs leading-relaxed", className) }, props)));
+    },
+    code: function Code(_a) {
+        var { className } = _a, props = __rest(_a, ["className"]);
+        const isCodeBlock = useIsMarkdownCodeBlock();
+        return (_jsx("code", Object.assign({ className: cn(!isCodeBlock &&
+                "aui-md-inline-code rounded-md border border-border/50 bg-muted/50 px-1.5 py-0.5 font-mono text-[0.85em]", className) }, props)));
+    },
+    CodeHeader,
+});
+function RemoteImageLink({ href, className, }) {
+    return _jsx(MarkdownImage, { src: href, alt: "\u56FE\u7247", className: className });
+}
+function MarkdownImage({ src, alt, className, }) {
+    if (typeof src !== "string")
+        return null;
+    return (_jsx(Image.Root, { className: cn("my-2", className), children: _jsx(Image.Zoom, { src: src, alt: alt || "Image content", children: _jsx(Image.Preview, { src: src, alt: alt || "Image content" }) }) }));
+}
+function LocalImage({ path, className }) {
+    const fileName = getLocalImageFileName(path);
+    const previewUrl = getLocalImagePreviewUrl(path);
+    return (_jsxs(Image.Root, { className: cn("my-2", className), children: [_jsx(Image.Zoom, { src: previewUrl, alt: fileName, children: _jsx(Image.Preview, { src: previewUrl, alt: fileName }) }), _jsx(Image.Filename, { children: fileName })] }));
+}
+function LocalFile({ path, className }) {
+    const fileName = getLocalFileName(path);
+    const openFile = () => {
+        fetch("/api/local-files/open", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ path }),
+        }).catch(() => { });
+    };
+    return (_jsxs(File.Root, { role: "button", tabIndex: 0, className: cn("my-2 cursor-pointer", className), onClick: openFile, onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                openFile();
+            }
+        }, children: [_jsx(File.Icon, {}), _jsx(File.Name, { children: fileName })] }));
+}

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

@@ -0,0 +1,27 @@
+import { ComposerPrimitive } from "@assistant-ui/react";
+import type { ComponentPropsWithoutRef, FC, ReactNode } from "react";
+type ComposerInputProps = ComponentPropsWithoutRef<typeof ComposerPrimitive.Input>;
+export type ComposerProps = {
+    placeholder?: string;
+    ariaLabel?: string;
+    addAttachmentLabel?: string;
+    sendLabel?: string;
+    showAttachments?: boolean;
+    showCommandMenu?: boolean;
+    showSelectors?: boolean;
+    leadingActions?: ReactNode;
+    trailingActions?: ReactNode;
+    triggerPopovers?: ReactNode;
+    onPaste?: ComposerInputProps["onPaste"];
+};
+export type ComposerActionProps = {
+    addAttachmentLabel?: string;
+    sendLabel?: string;
+    showAddAttachment?: boolean;
+    showSelectors?: boolean;
+    leadingActions?: ReactNode;
+    trailingActions?: ReactNode;
+};
+export declare const Composer: FC<ComposerProps>;
+export declare const ComposerAction: FC<ComposerActionProps>;
+export {};

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AuiIf, ComposerPrimitive } from "@assistant-ui/react";
+import { ArrowUpIcon, SquareIcon } from "lucide-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";
+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 })] }) }) }));
+};
+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" }) }) }) })] })] }));
+};

package/dist/components/assistant-ui/thread/context-chips.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from "react";
+export declare const ContextChips: FC;

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

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileTextIcon, StickyNoteIcon, XIcon } from "lucide-react";
+import { Button } from "../../ui/button.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "../../ui/tooltip.mjs";
+import { useAcpUiRuntimeContext } from "../../../lib/acp2aisdk/client-context.mjs";
+const PATH_TOOLTIP_MAX_LINE_CHARS = 42;
+function isAbsoluteFilePath(path) {
+    return (path.startsWith("/") ||
+        path.startsWith("\\\\") ||
+        /^[A-Za-z]:[\\/]/.test(path));
+}
+function getFullFilePath(item, workspacePath) {
+    const filePath = item.path.trim();
+    if (!filePath || isAbsoluteFilePath(filePath) || !workspacePath) {
+        return filePath || item.path;
+    }
+    const normalizedWorkspacePath = workspacePath.replace(/[\\/]+$/g, "");
+    const normalizedFilePath = filePath.replace(/^[\\/]+/g, "");
+    const separator = normalizedWorkspacePath.includes("\\") &&
+        !normalizedWorkspacePath.includes("/")
+        ? "\\"
+        : "/";
+    return `${normalizedWorkspacePath}${separator}${normalizedFilePath}`;
+}
+function splitPathTooltipLines(path) {
+    const parts = [];
+    let start = 0;
+    for (let index = 0; index < path.length; index += 1) {
+        const char = path[index];
+        if (char !== "/" && char !== "\\")
+            continue;
+        parts.push(path.slice(start, index + 1));
+        start = index + 1;
+    }
+    if (start < path.length)
+        parts.push(path.slice(start));
+    if (parts.length === 0)
+        return [path];
+    const lines = [];
+    let currentLine = "";
+    for (const part of parts) {
+        if (currentLine &&
+            currentLine.length + part.length > PATH_TOOLTIP_MAX_LINE_CHARS) {
+            lines.push(currentLine);
+            currentLine = "";
+        }
+        if (part.length <= PATH_TOOLTIP_MAX_LINE_CHARS) {
+            currentLine += part;
+            continue;
+        }
+        for (let index = 0; index < part.length; index += PATH_TOOLTIP_MAX_LINE_CHARS) {
+            const chunk = part.slice(index, index + PATH_TOOLTIP_MAX_LINE_CHARS);
+            if (currentLine) {
+                lines.push(currentLine);
+                currentLine = "";
+            }
+            if (chunk.length === PATH_TOOLTIP_MAX_LINE_CHARS) {
+                lines.push(chunk);
+            }
+            else {
+                currentLine = chunk;
+            }
+        }
+    }
+    if (currentLine)
+        lines.push(currentLine);
+    return lines;
+}
+function formatFilePathTooltip(path) {
+    return splitPathTooltipLines(path).join("\n");
+}
+function getFileChipLabel(item) {
+    return (item.name || item.path.split(/[\\/]/).filter(Boolean).at(-1) || item.path);
+}
+function getAnnotationTargetLabel(item) {
+    if (item.target.label)
+        return item.target.label;
+    if (item.target.type === "web-element") {
+        return (item.target.elementId || item.target.selector || item.target.url || "网页");
+    }
+    if (item.target.type === "canvas-element") {
+        return (item.target.elementId ||
+            item.target.elementType ||
+            item.target.canvasId ||
+            item.target.filePath ||
+            "画布");
+    }
+    return item.target.filePath || item.target.quote || "文本";
+}
+function getAnnotationChipLabel(item) {
+    return item.title || getAnnotationTargetLabel(item) || item.body;
+}
+function getContextChipLabel(item) {
+    if (item.kind === "file")
+        return getFileChipLabel(item);
+    return getAnnotationChipLabel(item);
+}
+function getContextChipTooltip(item, workspacePath) {
+    if (item.kind === "file")
+        return getFullFilePath(item, workspacePath);
+    return getAnnotationChipLabel(item);
+}
+export const ContextChips = () => {
+    const { contextBundle, removeContextItems, workspacePath } = useAcpUiRuntimeContext();
+    if (contextBundle.items.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) => {
+                const id = item.id;
+                if (!id)
+                    return null;
+                const label = getContextChipLabel(item);
+                const tooltip = getContextChipTooltip(item, workspacePath);
+                const Icon = item.kind === "file" ? FileTextIcon : StickyNoteIcon;
+                return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "inline-flex max-w-full items-center gap-1.5 rounded-md border bg-muted/50 px-2 py-1 text-muted-foreground text-xs", children: [_jsx(Icon, { className: "size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 max-w-48 truncate", children: label }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", className: "-me-1 size-5 rounded-sm text-muted-foreground hover:text-foreground", "aria-label": "\u79FB\u9664\u4E0A\u4E0B\u6587", onClick: () => removeContextItems([id]), children: _jsx(XIcon, { className: "size-3" }) })] }) }), _jsx(TooltipContent, { side: "top", className: "whitespace-pre-wrap break-normal text-left [overflow-wrap:anywhere]", style: {
+                                width: "max-content",
+                                maxWidth: "min(28rem, calc(100vw - 2rem))",
+                                textWrap: "wrap",
+                            }, children: item.kind === "file"
+                                ? formatFilePathTooltip(tooltip)
+                                : tooltip })] }, id));
+            }) }) }));
+};

package/dist/components/assistant-ui/thread/empty-state.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+export declare const ThreadEmptyState: FC<{
+    isHistoryRoute: boolean;
+}>;
+export declare const ThreadWelcome: FC;
+export declare const ThreadHistoryEmpty: FC;
+export declare const ThreadHistoryLoading: FC;
+export declare const ThreadSuggestions: FC;
+export declare const ThreadSuggestionItem: FC;

package/dist/components/assistant-ui/thread/empty-state.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SuggestionPrimitive, ThreadPrimitive } from "@assistant-ui/react";
+import { Button } from "../../ui/button.mjs";
+export const ThreadEmptyState = ({ isHistoryRoute, }) => {
+    if (isHistoryRoute)
+        return _jsx(ThreadHistoryEmpty, {});
+    return _jsx(ThreadWelcome, {});
+};
+export const ThreadWelcome = () => {
+    return (_jsxs("div", { className: "aui-thread-welcome-root my-auto flex grow flex-col", children: [_jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: _jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [_jsx("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: "\u51C6\u5907\u597D\u4E86" }), _jsx("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-xl delay-75 duration-200", children: "\u53D1\u6765\u4F60\u7684\u60F3\u6CD5\uFF0C\u6211\u4EEC\u4E00\u8D77\u5F00\u59CB\u3002" })] }) }), _jsx(ThreadSuggestions, {})] }));
+};
+export const ThreadHistoryEmpty = () => {
+    return (_jsx("div", { className: "aui-thread-welcome-root my-auto flex grow flex-col", children: _jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: _jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [_jsx("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: "\u8FD8\u6CA1\u6709\u53EF\u663E\u793A\u7684\u56DE\u590D" }), _jsx("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-xl delay-75 duration-200", children: "\u4F60\u53EF\u4EE5\u7EE7\u7EED\u53D1\u9001\u6D88\u606F\uFF0C\u6211\u4F1A\u63A5\u7740\u5E2E\u4F60\u5904\u7406\u3002" })] }) }) }));
+};
+export const ThreadHistoryLoading = () => {
+    return (_jsx("div", { className: "aui-thread-welcome-root my-auto flex grow flex-col", children: _jsx("div", { className: "aui-thread-welcome-center flex w-full grow flex-col items-center justify-center", children: _jsxs("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-4", children: [_jsx("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200", children: "\u6B63\u5728\u6253\u5F00\u5BF9\u8BDD" }), _jsx("p", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-xl delay-75 duration-200", children: "\u7A0D\u7B49\u4E00\u4E0B\uFF0C\u6B63\u5728\u6574\u7406\u8BB0\u5F55\u3002" })] }) }) }));
+};
+export const ThreadSuggestions = () => {
+    return (_jsx("div", { className: "aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4", children: _jsx(ThreadPrimitive.Suggestions, { children: () => _jsx(ThreadSuggestionItem, {}) }) }));
+};
+export const ThreadSuggestionItem = () => {
+    return (_jsx("div", { className: "aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 @md:nth-[n+3]:block nth-[n+3]:hidden animate-in fill-mode-both duration-200", children: _jsx(SuggestionPrimitive.Trigger, { send: true, asChild: true, children: _jsxs(Button, { variant: "ghost", className: "aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-3xl border bg-background px-4 py-3 text-start text-sm transition-colors hover:bg-muted", children: [_jsx(SuggestionPrimitive.Title, { className: "aui-thread-welcome-suggestion-text-1 font-medium" }), _jsx(SuggestionPrimitive.Description, { className: "aui-thread-welcome-suggestion-text-2 text-muted-foreground empty:hidden" })] }) }) }));
+};

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

@@ -0,0 +1,11 @@
+import { type FC } from "react";
+export type ThreadProps = {
+    isHistoryRoute?: boolean;
+};
+export declare const Thread: FC<ThreadProps>;
+export { Composer, ComposerAction, type ComposerActionProps, type ComposerProps, } from "./composer";
+export { ContextChips } from "./context-chips";
+export { ThreadEmptyState, ThreadHistoryEmpty, ThreadHistoryLoading, ThreadSuggestionItem, ThreadSuggestions, ThreadWelcome, } from "./empty-state";
+export { MessageList, ThreadMessage } from "./message-list";
+export { AssistantActionBar, AssistantMessage, BranchPicker, EditComposer, MessageError, UserActionBar, UserMessage, } from "./messages";
+export { ThreadScrollToBottom } from "./scroll-to-bottom";

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AuiIf, ThreadPrimitive, useAuiState } from "@assistant-ui/react";
+import { useEffect, useState } from "react";
+import { Composer } from "./composer.mjs";
+import { ContextChips } from "./context-chips.mjs";
+import { ThreadEmptyState, ThreadHistoryLoading } from "./empty-state.mjs";
+import { MessageList } from "./message-list.mjs";
+import { ThreadScrollToBottom } from "./scroll-to-bottom.mjs";
+const HISTORY_EMPTY_STATE_DELAY_MS = 450;
+export const Thread = ({ isHistoryRoute = false }) => {
+    const messageCount = useAuiState((s) => s.thread.messages.length);
+    const isLoading = useAuiState((s) => s.thread.isLoading);
+    const showHistoryEmpty = useDebouncedHistoryEmptyState({
+        isHistoryRoute,
+        isLoading,
+        messageCount,
+    });
+    const showLoadingState = isHistoryRoute && messageCount === 0 && (isLoading || !showHistoryEmpty);
+    return (_jsx(ThreadPrimitive.Root, { className: "aui-root aui-thread-root @container flex h-full flex-col bg-background", style: {
+            ["--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, {})] })] }) }) }));
+};
+function useDebouncedHistoryEmptyState({ isHistoryRoute, isLoading, messageCount, }) {
+    const [showEmpty, setShowEmpty] = useState(false);
+    useEffect(() => {
+        if (!isHistoryRoute || isLoading || messageCount > 0) {
+            setShowEmpty(false);
+            return;
+        }
+        const timeout = window.setTimeout(() => setShowEmpty(true), HISTORY_EMPTY_STATE_DELAY_MS);
+        return () => window.clearTimeout(timeout);
+    }, [isHistoryRoute, isLoading, messageCount]);
+    return showEmpty;
+}
+export { Composer, ComposerAction, } from "./composer.mjs";
+export { ContextChips } from "./context-chips.mjs";
+export { ThreadEmptyState, ThreadHistoryEmpty, ThreadHistoryLoading, ThreadSuggestionItem, ThreadSuggestions, ThreadWelcome, } from "./empty-state.mjs";
+export { MessageList, ThreadMessage } from "./message-list.mjs";
+export { AssistantActionBar, AssistantMessage, BranchPicker, EditComposer, MessageError, UserActionBar, UserMessage, } from "./messages.mjs";
+export { ThreadScrollToBottom } from "./scroll-to-bottom.mjs";

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

@@ -0,0 +1,3 @@
+import type { FC } from "react";
+export declare const MessageList: FC;
+export declare const ThreadMessage: FC;

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

@@ -0,0 +1,16 @@
+"use client";
+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, {}) }) }));
+};
+export const ThreadMessage = () => {
+    const role = useAuiState((s) => s.message.role);
+    const isEditing = useAuiState((s) => s.message.composer.isEditing);
+    if (isEditing)
+        return _jsx(EditComposer, {});
+    if (role === "user")
+        return _jsx(UserMessage, {});
+    return _jsx(AssistantMessage, {});
+};

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

@@ -0,0 +1,9 @@
+import { BranchPickerPrimitive } from "@assistant-ui/react";
+import type { FC } from "react";
+export declare const MessageError: FC;
+export declare const AssistantMessage: FC;
+export declare const AssistantActionBar: FC;
+export declare const UserMessage: FC;
+export declare const UserActionBar: FC;
+export declare const EditComposer: FC;
+export declare const BranchPicker: FC<BranchPickerPrimitive.Root.Props>;

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

@@ -0,0 +1,71 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionBarMorePrimitive, ActionBarPrimitive, AuiIf, BranchPickerPrimitive, ComposerPrimitive, ErrorPrimitive, MessagePrimitive, useAuiState, } from "@assistant-ui/react";
+import { CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DownloadIcon, MoreHorizontalIcon, PencilIcon, RefreshCwIcon, } from "lucide-react";
+import { AcpElicitationOptionListCard, isAcpElicitationOptionListPart, } from "../acp-elicitation-option-list.mjs";
+import { UserMessageAttachments } from "../attachment.mjs";
+import { File } from "../file.mjs";
+import { ImageMessage } from "../image.mjs";
+import { MarkdownText } from "../markdown-text.mjs";
+import { ToolFallback } from "../tool-fallback.mjs";
+import { TooltipIconButton } from "../tooltip-icon-button.mjs";
+import { Button } from "../../ui/button.mjs";
+import { cn } from "../../../lib/utils.mjs";
+import { renderRegisteredToolCallPart } from "../../../tools/ui-registry.mjs";
+import { isUserChoiceResultMessageText } from "../../../tools/user-choice/shared.mjs";
+export const MessageError = () => {
+    return (_jsx(MessagePrimitive.Error, { children: _jsx(ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200", children: _jsx(ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" }) }) }));
+};
+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 }) => {
+                            var _a;
+                            if (part.type === "text")
+                                return _jsx(MarkdownText, {});
+                            if (part.type === "image")
+                                return _jsx(ImageMessage, Object.assign({}, part));
+                            if (part.type === "file")
+                                return _jsx(File, Object.assign({}, part));
+                            if (part.type === "tool-call") {
+                                if (isAcpElicitationOptionListPart(part)) {
+                                    return _jsx(AcpElicitationOptionListCard, Object.assign({}, part));
+                                }
+                                const registeredTool = renderRegisteredToolCallPart(part);
+                                if (registeredTool)
+                                    return registeredTool;
+                                return (_a = part.toolUI) !== null && _a !== void 0 ? _a : _jsx(ToolFallback, Object.assign({}, part));
+                            }
+                            return null;
+                        } }), _jsx(MessageError, {})] }), _jsxs("div", { "data-slot": "aui_assistant-message-footer", className: cn("ms-2 flex items-center", ACTION_BAR_HEIGHT), children: [_jsx(BranchPicker, {}), _jsx(AssistantActionBar, {})] })] }));
+};
+export const AssistantActionBar = () => {
+    return (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "not-last", className: "aui-assistant-action-bar-root col-start-3 row-start-2 -ms-1 flex gap-1 text-muted-foreground", children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "\u590D\u5236", children: [_jsx(AuiIf, { condition: (s) => s.message.isCopied, children: _jsx(CheckIcon, {}) }), _jsx(AuiIf, { condition: (s) => !s.message.isCopied, children: _jsx(CopyIcon, {}) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "\u91CD\u65B0\u751F\u6210", children: _jsx(RefreshCwIcon, {}) }) }), _jsxs(ActionBarMorePrimitive.Root, { children: [_jsx(ActionBarMorePrimitive.Trigger, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "\u66F4\u591A", className: "data-[state=open]:bg-accent", children: _jsx(MoreHorizontalIcon, {}) }) }), _jsx(ActionBarMorePrimitive.Content, { side: "bottom", align: "start", className: "aui-action-bar-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", children: _jsx(ActionBarPrimitive.ExportMarkdown, { asChild: true, children: _jsxs(ActionBarMorePrimitive.Item, { className: "aui-action-bar-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(DownloadIcon, { className: "size-4" }), "\u5BFC\u51FA\u4E3A Markdown"] }) }) })] })] }));
+};
+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" })] }));
+};
+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, {}) }) }) }));
+};
+export const EditComposer = () => {
+    return (_jsx(MessagePrimitive.Root, { "data-slot": "aui_edit-composer-wrapper", className: "flex flex-col px-2", children: _jsxs(ComposerPrimitive.Root, { className: "aui-edit-composer-root ms-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted", children: [_jsx(ComposerPrimitive.Input, { className: "aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none", autoFocus: true }), _jsxs("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end", children: [_jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", children: "\u53D6\u6D88" }) }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "sm", children: "\u66F4\u65B0" }) })] })] }) }));
+};
+export const BranchPicker = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (_jsxs(BranchPickerPrimitive.Root, Object.assign({ hideWhenSingleBranch: true, className: cn("aui-branch-picker-root -ms-2 me-2 inline-flex items-center text-muted-foreground text-xs", className) }, rest, { children: [_jsx(BranchPickerPrimitive.Previous, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "\u4E0A\u4E00\u4E2A\u7248\u672C", children: _jsx(ChevronLeftIcon, {}) }) }), _jsxs("span", { className: "aui-branch-picker-state font-medium", children: [_jsx(BranchPickerPrimitive.Number, {}), " / ", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "\u4E0B\u4E00\u4E2A\u7248\u672C", children: _jsx(ChevronRightIcon, {}) }) })] })));
+};

package/dist/components/assistant-ui/thread/scroll-to-bottom.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from "react";
+export declare const ThreadScrollToBottom: FC;

package/dist/components/assistant-ui/thread/scroll-to-bottom.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThreadPrimitive } from "@assistant-ui/react";
+import { ArrowDownIcon } from "lucide-react";
+import { TooltipIconButton } from "../tooltip-icon-button.mjs";
+export const ThreadScrollToBottom = () => {
+    return (_jsx(ThreadPrimitive.ScrollToBottom, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "\u6EDA\u52A8\u5230\u5E95\u90E8", variant: "outline", className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:border-border dark:bg-background dark:hover:bg-accent", children: _jsx(ArrowDownIcon, {}) }) }));
+};

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

@@ -0,0 +1,2 @@
+import type { FC } from "react";
+export declare const ThreadList: FC;