@springbrand/message-panel 0.1.0 → 0.1.2

package/dist/src/camel/camel-prompt-input.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AssistantRuntimeProvider, ComposerPrimitive, unstable_useSlashCommandAdapter, unstable_useTriggerPopoverAriaProps, unstable_useTriggerPopoverTriggers, useExternalStoreRuntime, } from "@assistant-ui/react";
+import { ArrowUpIcon, ClockIcon, FileIcon, FileTextIcon, GlobeIcon, ListChecksIcon, Loader2Icon, PlugIcon, PlusIcon, RotateCcwIcon, SquareIcon, TerminalIcon, WrenchIcon, XIcon, } from "lucide-react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { ComposerTriggerPopover } from "../composer/composer-trigger-popover";
+import { cn } from "../internal/cn";
+const COMMAND_ICON_MAP = {
+    plan: ListChecksIcon,
+    research: GlobeIcon,
+    file: FileTextIcon,
+    time: ClockIcon,
+    tool: WrenchIcon,
+    mcp: PlugIcon,
+};
+function Button({ className, size = "sm", variant = "default", type = "button", ...props }) {
+    return (_jsx("button", { type: type, className: cn("inline-flex shrink-0 items-center justify-center gap-1 rounded-md text-xs font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50", variant === "default" &&
+            "bg-primary text-primary-foreground hover:bg-primary/80", variant === "outline" &&
+            "border border-border bg-background hover:bg-muted", variant === "ghost" && "hover:bg-muted hover:text-foreground", variant === "destructive" &&
+            "bg-destructive/10 text-destructive hover:bg-destructive/20", size === "sm" && "h-7 px-2", size === "icon-xs" && "size-6 p-0", size === "icon-sm" && "size-8 p-0", className), ...props }));
+}
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { role: "group", className: cn("group/input-group relative flex w-full min-w-0 flex-col items-center rounded-md border border-input bg-input/20 outline-none transition-colors dark:bg-input/30", "has-[[data-camel-input=true]:focus-visible]:border-ring has-[[data-camel-input=true]:focus-visible]:ring-2 has-[[data-camel-input=true]:focus-visible]:ring-ring/30", className), ...props }));
+}
+function InputGroupAddon({ className, align, ...props }) {
+    return (_jsx("div", { role: "group", "data-align": align, className: cn("flex h-auto w-full cursor-text items-center gap-1 px-2 text-xs font-medium text-muted-foreground", align === "block-start"
+            ? "order-first justify-start pt-2"
+            : "order-last pb-2", className), ...props }));
+}
+function InputGroupButton(props) {
+    return _jsx(Button, { ...props });
+}
+const InputGroupTextarea = forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-camel-input": "true", className: cn("w-full flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none outline-none ring-0 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className), ...props })));
+InputGroupTextarea.displayName = "InputGroupTextarea";
+function formatBytes(size) {
+    if (!size)
+        return "";
+    if (size < 1024)
+        return `${size} B`;
+    if (size < 1024 * 1024)
+        return `${Math.round(size / 1024)} KB`;
+    return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+function AttachmentList({ attachments, onRemove, onRetry, }) {
+    return (_jsx("div", { className: "flex w-full flex-wrap gap-2", children: attachments.map((attachment) => (_jsxs("div", { className: "group/attachment flex max-w-64 items-center gap-2 rounded-lg border border-border bg-muted/30 p-2", "data-attachment-status": attachment.status, children: [attachment.mediaType?.startsWith("image/") ? (_jsx("img", { src: attachment.url, alt: "", className: "size-9 shrink-0 rounded-md object-cover" })) : (_jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted", children: _jsx(FileIcon, { className: "size-4 text-muted-foreground" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-xs text-foreground", children: attachment.filename ?? "Attachment" }), _jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-[10px] text-muted-foreground", children: [attachment.status === "uploading" && (_jsx(Loader2Icon, { className: "size-3 animate-spin" })), _jsx("span", { children: attachment.status === "uploading"
+                                        ? "Uploading"
+                                        : attachment.status === "error"
+                                            ? "Upload failed"
+                                            : formatBytes(attachment.size) })] })] }), attachment.status === "error" && (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: () => onRetry(attachment.id), "aria-label": "\u91CD\u8BD5\u4E0A\u4F20", children: _jsx(RotateCcwIcon, { className: "size-3" }) })), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: () => onRemove(attachment.id), "aria-label": "\u79FB\u9664\u9644\u4EF6", children: _jsx(XIcon, { className: "size-3" }) })] }, attachment.id))) }));
+}
+function CamelPromptInputContent({ value, onChange, onSubmit, onStop, status, attachments, commands, onFilesSelected, onAttachmentRemove, onAttachmentRetry, tools, submitControl, placeholder = "Type a message...", submissionBlocked = false, turnActive, runtime, }) {
+    const fileInputRef = useRef(null);
+    const textareaRef = useRef(null);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const isRunning = turnActive ??
+        (status === "submitted" || status === "streaming");
+    const hasUploading = attachments.some((attachment) => attachment.status === "uploading");
+    const hasReady = attachments.some((attachment) => attachment.status === "ready");
+    const slashCommands = useMemo(() => commands.map((command) => ({
+        id: command.name,
+        description: command.description,
+        icon: command.icon,
+        execute: () => {
+            runtime.thread.composer.setText(command.prompt);
+            onChange(command.prompt);
+            requestAnimationFrame(() => textareaRef.current?.focus());
+        },
+    })), [commands, onChange, runtime]);
+    const slash = unstable_useSlashCommandAdapter({
+        commands: slashCommands,
+        removeOnExecute: true,
+        iconMap: COMMAND_ICON_MAP,
+        fallbackIcon: TerminalIcon,
+    });
+    const triggers = unstable_useTriggerPopoverTriggers();
+    const triggerAria = unstable_useTriggerPopoverAriaProps();
+    const setTriggerCursor = useCallback((position) => {
+        for (const trigger of triggers.values()) {
+            trigger.resource.setCursorPosition(position);
+        }
+    }, [triggers]);
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        textarea.style.height = "auto";
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 384)}px`;
+    }, [value]);
+    const submit = useCallback(() => {
+        if (isRunning && !value.trim() && !hasReady) {
+            onStop();
+            return;
+        }
+        if (submissionBlocked)
+            return;
+        if (!hasUploading && (value.trim() || hasReady))
+            onSubmit();
+    }, [
+        hasReady,
+        hasUploading,
+        isRunning,
+        onStop,
+        onSubmit,
+        submissionBlocked,
+        value,
+    ]);
+    const handleKeyDown = (event) => {
+        for (const trigger of triggers.values()) {
+            if (trigger.resource.handleKeyDown(event))
+                return;
+        }
+        if (event.key === "Enter" &&
+            !event.shiftKey &&
+            !event.nativeEvent.isComposing) {
+            event.preventDefault();
+            submit();
+        }
+    };
+    const handlePaste = (event) => {
+        if (!onFilesSelected)
+            return;
+        const files = Array.from(event.clipboardData.files);
+        if (files.length > 0) {
+            event.preventDefault();
+            onFilesSelected(files);
+        }
+    };
+    const handleFiles = (event) => {
+        const files = Array.from(event.currentTarget.files ?? []);
+        if (files.length > 0)
+            onFilesSelected?.(files);
+        event.currentTarget.value = "";
+    };
+    const handleDragOver = (event) => {
+        if (!onFilesSelected)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragOver(true);
+    };
+    const handleDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const nextTarget = event.relatedTarget;
+        if (!(nextTarget instanceof Node) || !event.currentTarget.contains(nextTarget)) {
+            setIsDragOver(false);
+        }
+    };
+    const handleDrop = (event) => {
+        if (!onFilesSelected)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragOver(false);
+        const files = Array.from(event.dataTransfer.files);
+        if (files.length > 0)
+            onFilesSelected(files);
+    };
+    const handleFormSubmit = (event) => {
+        event.preventDefault();
+        submit();
+    };
+    const showStopButton = isRunning && !value.trim() && !hasReady;
+    const submitDisabled = hasUploading || (!showStopButton &&
+        (submissionBlocked || (!value.trim() && !hasReady)));
+    return (_jsxs("form", { onSubmit: handleFormSubmit, className: "relative shrink-0", "data-camel-prompt-input": "", "data-drop-scope": "document", children: [onFilesSelected && (_jsx("input", { ref: fileInputRef, type: "file", multiple: true, onChange: handleFiles, className: "hidden", "aria-hidden": "true" })), _jsx(ComposerTriggerPopover, { char: "/", ...slash, "aria-label": "Commands", backLabel: "Back", emptyItemsLabel: "No matching commands", className: "w-full" }), _jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, className: cn("relative rounded-2xl transition-all duration-200", isDragOver && "ring-2 ring-primary ring-offset-2"), children: [isDragOver && (_jsx("div", { className: "absolute inset-0 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary bg-primary/10", children: _jsx("span", { className: "text-sm font-medium text-primary", children: "Drop files here" }) })), _jsxs(InputGroup, { className: "cursor-text rounded-2xl border-border bg-background shadow-sm transition-all duration-200 hover:shadow-md focus-within:border-ring focus-within:shadow-md", children: [attachments.length > 0 && (_jsx(InputGroupAddon, { align: "block-start", className: "border-b border-border", children: _jsx(AttachmentList, { attachments: attachments, onRemove: onAttachmentRemove, onRetry: onAttachmentRetry }) })), _jsx(InputGroupTextarea, { ref: textareaRef, value: value, onChange: (event) => {
+                                    const next = event.currentTarget.value;
+                                    runtime.thread.composer.setText(next);
+                                    onChange(next);
+                                    setTriggerCursor(event.currentTarget.selectionStart ?? next.length);
+                                }, onKeyDown: handleKeyDown, onSelect: (event) => setTriggerCursor(event.currentTarget.selectionStart ?? value.length), onPaste: handlePaste, placeholder: placeholder, autoFocus: true, className: "relative z-10 max-h-96 min-h-11 overflow-y-auto bg-transparent p-3.5 text-sm selection:bg-primary/30", style: { caretColor: "var(--foreground)" }, ...triggerAria }), _jsxs(InputGroupAddon, { align: "block-end", className: "justify-between px-3 pb-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [onFilesSelected && (_jsx(InputGroupButton, { type: "button", size: "icon-sm", variant: "ghost", onClick: () => fileInputRef.current?.click(), className: "rounded-full text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": "Upload file", children: _jsx(PlusIcon, { className: "size-4" }) })), tools] }), _jsxs("div", { className: "flex items-center gap-1", children: [!showStopButton && submitControl, _jsx(InputGroupButton, { type: showStopButton ? "button" : "submit", size: "icon-sm", variant: "default", disabled: submitDisabled, onClick: showStopButton ? onStop : undefined, className: "rounded-full", "aria-label": showStopButton ? "停止" : "发送", children: showStopButton ? (_jsx(SquareIcon, { className: "size-3" })) : (_jsx(ArrowUpIcon, { className: "size-4" })) })] })] })] })] })] }));
+}
+const EMPTY_MESSAGES = [];
+export function CamelPromptInput(props) {
+    const runtime = useExternalStoreRuntime({
+        messages: EMPTY_MESSAGES,
+        onNew: async () => undefined,
+    });
+    useEffect(() => {
+        runtime.thread.composer.setText(props.value);
+    }, [props.value, runtime]);
+    return (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(ComposerPrimitive.Unstable_TriggerPopoverRoot, { children: _jsx(CamelPromptInputContent, { ...props, runtime: runtime }) }) }));
+}

package/dist/src/camel/camel-tool-presentation.d.ts

@@ -0,0 +1,21 @@
+type UnknownRecord = Record<string, unknown>;
+export type CamelToolKind = "read" | "write" | "edit" | "bash" | "glob" | "grep" | "list" | "find" | "web-search" | "web-fetch" | "javascript" | "tasks" | "agent" | "skill" | "skill-resource" | "ask-user" | "suggestions" | "notebook" | "mcp" | "generic";
+export interface CamelToolPresentation {
+    kind: CamelToolKind;
+    name: string;
+    summary: string;
+    input: UnknownRecord;
+    output: unknown;
+    outputText: string;
+    errorText: string;
+    running: boolean;
+    failed: boolean;
+    isSubAgent: boolean;
+    hasDetails: boolean;
+}
+interface CamelToolDetailsProps {
+    presentation: CamelToolPresentation;
+}
+export declare function getCamelToolPresentation(part: unknown, isActive?: boolean): CamelToolPresentation;
+export declare function CamelToolDetails({ presentation, }: CamelToolDetailsProps): import("react").JSX.Element;
+export {};