@kognitivedev/ui 0.2.11

package/dist/kognitive-ui.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KognitiveUI = KognitiveUI;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@ai-sdk/react");
+const kognitive_transport_1 = require("./runtime/kognitive-transport");
+const thread_manager_1 = require("./runtime/thread-manager");
+const registry_1 = require("./tool-ui/registry");
+const kognitive_context_1 = require("./context/kognitive-context");
+const tool_ui_context_1 = require("./tool-ui/tool-ui-context");
+const thread_1 = require("./components/thread");
+const thread_list_1 = require("./components/thread-list");
+const composer_1 = require("./components/composer");
+function KognitiveUIInner(props) {
+    const { api, agentName, baseUrl, headers, resourceId, sessionId: controlledSessionId, threads: threadsEnabled, threadApiBase, toolUIs, toolkit: toolkitRegistrations, body: extraBody, onFeedback, onToolApproval, suggestions = [], children, } = props;
+    // ── Tool UI Registry ──
+    const toolUIRegistry = (0, react_1.useMemo)(() => {
+        const registry = new registry_1.ToolUIRegistry();
+        if (toolUIs)
+            registry.registerAll(toolUIs);
+        if (toolkitRegistrations)
+            registry.registerAll(toolkitRegistrations);
+        return registry;
+    }, [toolUIs, toolkitRegistrations]);
+    // ── Thread Management ──
+    const [threadsList, setThreadsList] = (0, react_1.useState)([]);
+    const [activeSessionId, setActiveSessionId] = (0, react_1.useState)(controlledSessionId !== null && controlledSessionId !== void 0 ? controlledSessionId : null);
+    const threadManager = (0, react_1.useMemo)(() => {
+        if (!threadsEnabled || !baseUrl)
+            return null;
+        const base = threadApiBase !== null && threadApiBase !== void 0 ? threadApiBase : `${baseUrl.replace(/\/$/, "")}/api/agents/${encodeURIComponent(agentName)}/threads`;
+        return new thread_manager_1.ThreadManager({ baseUrl: base, headers });
+    }, [threadsEnabled, threadApiBase, baseUrl, agentName, headers]);
+    const refreshThreads = (0, react_1.useCallback)(async (preferredSessionId) => {
+        if (!threadManager)
+            return;
+        const threads = await threadManager.list();
+        setThreadsList(threads);
+        if (preferredSessionId) {
+            setActiveSessionId(preferredSessionId);
+        }
+        else if (!activeSessionId && threads.length > 0) {
+            setActiveSessionId(threads[0].sessionId);
+        }
+        else if (threads.length === 0) {
+            const thread = await threadManager.create();
+            setThreadsList([thread]);
+            setActiveSessionId(thread.sessionId);
+        }
+    }, [threadManager, activeSessionId]);
+    const createThread = (0, react_1.useCallback)(async () => {
+        if (!threadManager)
+            return;
+        const thread = await threadManager.create();
+        await refreshThreads(thread.sessionId);
+    }, [threadManager, refreshThreads]);
+    (0, react_1.useEffect)(() => {
+        if (threadManager) {
+            void refreshThreads();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [threadManager]);
+    (0, react_1.useEffect)(() => {
+        if (controlledSessionId !== undefined) {
+            setActiveSessionId(controlledSessionId);
+        }
+    }, [controlledSessionId]);
+    // ── Transport + Chat ──
+    const transport = (0, react_1.useMemo)(() => (0, kognitive_transport_1.createKognitiveTransport)({
+        api,
+        baseUrl,
+        agentName,
+        sessionId: activeSessionId !== null && activeSessionId !== void 0 ? activeSessionId : undefined,
+        resourceId,
+        headers,
+        body: extraBody,
+    }), [api, baseUrl, agentName, activeSessionId, resourceId, headers, extraBody]);
+    const { messages, sendMessage, status, stop, setMessages, error } = (0, react_2.useChat)({
+        transport,
+    });
+    (0, react_1.useEffect)(() => {
+        setMessages([]);
+    }, [activeSessionId, setMessages]);
+    // ── Send helper ──
+    const send = (0, react_1.useCallback)((text, options) => {
+        const parts = [{ type: "text", text }];
+        if (options === null || options === void 0 ? void 0 : options.files) {
+            parts.push(...options.files);
+        }
+        sendMessage({ role: "user", parts });
+    }, [sendMessage]);
+    // Refresh threads after a stream completes
+    const prevStatusRef = (0, react_1.useRef)(status);
+    (0, react_1.useEffect)(() => {
+        if (prevStatusRef.current === "streaming" &&
+            status === "ready" &&
+            threadManager) {
+            void refreshThreads(activeSessionId !== null && activeSessionId !== void 0 ? activeSessionId : undefined);
+        }
+        prevStatusRef.current = status;
+    }, [status, threadManager, refreshThreads, activeSessionId]);
+    const isStreaming = status === "streaming";
+    return ((0, jsx_runtime_1.jsx)(tool_ui_context_1.ToolUIRegistryProvider, { value: toolUIRegistry, children: (0, jsx_runtime_1.jsx)(kognitive_context_1.KognitiveContextProvider, { value: {
+                messages,
+                send,
+                status,
+                isStreaming,
+                stop,
+                setMessages,
+                threadManager,
+                toolUIRegistry,
+                activeSessionId,
+                setActiveSessionId,
+                threads: threadsList,
+                refreshThreads: () => refreshThreads(),
+                createThread,
+                agentName,
+                error,
+                onFeedback,
+                onToolApproval,
+                suggestions,
+            }, children: children }) }));
+}
+function KognitiveUI(props) {
+    return (0, jsx_runtime_1.jsx)(KognitiveUIInner, Object.assign({}, props));
+}
+KognitiveUI.Thread = thread_1.Thread;
+KognitiveUI.ThreadList = thread_list_1.ThreadList;
+KognitiveUI.Composer = composer_1.Composer;

package/dist/primitives/action-bar/action-bar-copy.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export interface ActionBarCopyProps {
+    className?: string;
+    children?: ReactNode | ((copied: boolean) => ReactNode);
+}
+export declare function ActionBarCopy({ className, children }: ActionBarCopyProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/action-bar/action-bar-copy.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionBarCopy = ActionBarCopy;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_message_1 = require("../message/use-message");
+const use_copy_to_clipboard_1 = require("../../hooks/use-copy-to-clipboard");
+const message_helpers_1 = require("../../utils/message-helpers");
+function ActionBarCopy({ className, children }) {
+    const { message } = (0, use_message_1.useMessage)();
+    const { copied, copy } = (0, use_copy_to_clipboard_1.useCopyToClipboard)();
+    const handleCopy = (0, react_1.useCallback)(() => {
+        void copy((0, message_helpers_1.getMessageText)(message));
+    }, [copy, message]);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: className, onClick: handleCopy, "aria-label": copied ? "Copied" : "Copy message", "data-copied": copied || undefined, children: typeof children === "function" ? children(copied) : children !== null && children !== void 0 ? children : (copied ? "Copied" : "Copy") }));
+}

package/dist/primitives/action-bar/action-bar-edit.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export interface ActionBarEditProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function ActionBarEdit({ className, children }: ActionBarEditProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/primitives/action-bar/action-bar-edit.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionBarEdit = ActionBarEdit;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_message_1 = require("../message/use-message");
+function ActionBarEdit({ className, children }) {
+    const { message, startEdit, isEditing } = (0, use_message_1.useMessage)();
+    if (message.role !== "user" || isEditing)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: className, onClick: startEdit, "aria-label": "Edit message", children: children !== null && children !== void 0 ? children : "Edit" }));
+}

package/dist/primitives/action-bar/action-bar-feedback.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export interface ActionBarFeedbackProps {
+    className?: string;
+    children?: (props: {
+        selected: "positive" | "negative" | null;
+        onPositive: () => void;
+        onNegative: () => void;
+    }) => ReactNode;
+}
+export declare function ActionBarFeedback({ className, children }: ActionBarFeedbackProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/primitives/action-bar/action-bar-feedback.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionBarFeedback = ActionBarFeedback;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_message_1 = require("../message/use-message");
+const kognitive_context_1 = require("../../context/kognitive-context");
+function ActionBarFeedback({ className, children }) {
+    const { message } = (0, use_message_1.useMessage)();
+    const { onFeedback } = (0, kognitive_context_1.useKognitiveContext)();
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    const handlePositive = (0, react_1.useCallback)(() => {
+        const next = selected === "positive" ? null : "positive";
+        setSelected(next);
+        if (next && onFeedback)
+            onFeedback(message.id, "positive");
+    }, [selected, onFeedback, message.id]);
+    const handleNegative = (0, react_1.useCallback)(() => {
+        const next = selected === "negative" ? null : "negative";
+        setSelected(next);
+        if (next && onFeedback)
+            onFeedback(message.id, "negative");
+    }, [selected, onFeedback, message.id]);
+    if (!onFeedback)
+        return null;
+    if (children) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({ selected, onPositive: handlePositive, onNegative: handleNegative }) });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, role: "group", "aria-label": "Message feedback", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handlePositive, "aria-label": "Good response", "aria-pressed": selected === "positive", "data-selected": selected === "positive" || undefined, children: selected === "positive" ? "\u{1F44D}" : "\u{1F44D}\u{200D}" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleNegative, "aria-label": "Bad response", "aria-pressed": selected === "negative", "data-selected": selected === "negative" || undefined, children: selected === "negative" ? "\u{1F44E}" : "\u{1F44E}\u{200D}" })] }));
+}

package/dist/primitives/action-bar/action-bar-retry.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export interface ActionBarRetryProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function ActionBarRetry({ className, children }: ActionBarRetryProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/action-bar/action-bar-retry.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionBarRetry = ActionBarRetry;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const kognitive_context_1 = require("../../context/kognitive-context");
+function ActionBarRetry({ className, children }) {
+    const { messages, send } = (0, kognitive_context_1.useKognitiveContext)();
+    const handleRetry = (0, react_1.useCallback)(() => {
+        // Find the last user message and re-send it
+        for (let i = messages.length - 1; i >= 0; i--) {
+            if (messages[i].role === "user") {
+                const text = messages[i].parts
+                    .filter((p) => p.type === "text")
+                    .map((p) => p.text)
+                    .join("\n");
+                if (text) {
+                    send(text);
+                    return;
+                }
+            }
+        }
+    }, [messages, send]);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: className, onClick: handleRetry, "aria-label": "Retry", children: children !== null && children !== void 0 ? children : "Retry" }));
+}

package/dist/primitives/action-bar/action-bar-root.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export interface ActionBarRootProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare function ActionBarRoot({ className, children }: ActionBarRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/action-bar/action-bar-root.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionBarRoot = ActionBarRoot;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function ActionBarRoot({ className, children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, role: "toolbar", "aria-label": "Message actions", children: children }));
+}

package/dist/primitives/action-bar/action-bar-stop.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export interface ActionBarStopProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function ActionBarStop({ className, children }: ActionBarStopProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/primitives/action-bar/action-bar-stop.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionBarStop = ActionBarStop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const kognitive_context_1 = require("../../context/kognitive-context");
+function ActionBarStop({ className, children }) {
+    const { stop, isStreaming } = (0, kognitive_context_1.useKognitiveContext)();
+    if (!isStreaming)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: className, onClick: stop, "aria-label": "Stop", children: children !== null && children !== void 0 ? children : "Stop" }));
+}

package/dist/primitives/action-bar/index.d.ts

@@ -0,0 +1,14 @@
+import { ActionBarRoot } from "./action-bar-root";
+import { ActionBarCopy } from "./action-bar-copy";
+import { ActionBarRetry } from "./action-bar-retry";
+import { ActionBarStop } from "./action-bar-stop";
+import { ActionBarFeedback } from "./action-bar-feedback";
+import { ActionBarEdit } from "./action-bar-edit";
+export declare const ActionBarPrimitive: {
+    Root: typeof ActionBarRoot;
+    Copy: typeof ActionBarCopy;
+    Retry: typeof ActionBarRetry;
+    Stop: typeof ActionBarStop;
+    Feedback: typeof ActionBarFeedback;
+    Edit: typeof ActionBarEdit;
+};

package/dist/primitives/action-bar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionBarPrimitive = void 0;
+const action_bar_root_1 = require("./action-bar-root");
+const action_bar_copy_1 = require("./action-bar-copy");
+const action_bar_retry_1 = require("./action-bar-retry");
+const action_bar_stop_1 = require("./action-bar-stop");
+const action_bar_feedback_1 = require("./action-bar-feedback");
+const action_bar_edit_1 = require("./action-bar-edit");
+exports.ActionBarPrimitive = {
+    Root: action_bar_root_1.ActionBarRoot,
+    Copy: action_bar_copy_1.ActionBarCopy,
+    Retry: action_bar_retry_1.ActionBarRetry,
+    Stop: action_bar_stop_1.ActionBarStop,
+    Feedback: action_bar_feedback_1.ActionBarFeedback,
+    Edit: action_bar_edit_1.ActionBarEdit,
+};

package/dist/primitives/composer/composer-attachment-trigger.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export interface ComposerAttachmentTriggerProps {
+    accept?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function ComposerAttachmentTrigger({ accept, className, children, }: ComposerAttachmentTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/composer/composer-attachment-trigger.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposerAttachmentTrigger = ComposerAttachmentTrigger;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_composer_1 = require("./use-composer");
+function ComposerAttachmentTrigger({ accept = "image/*", className, children, }) {
+    const { addFile } = (0, use_composer_1.useComposer)();
+    const inputRef = (0, react_1.useRef)(null);
+    const handleClick = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    }, []);
+    const handleChange = (0, react_1.useCallback)(async (e) => {
+        const fileList = e.target.files;
+        if (!fileList)
+            return;
+        for (const file of Array.from(fileList)) {
+            const buffer = await file.arrayBuffer();
+            const base64 = btoa(new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), ""));
+            addFile({
+                type: "file",
+                mediaType: file.type,
+                url: `data:${file.type};base64,${base64}`,
+                filename: file.name,
+            });
+        }
+        // Reset input so the same file can be selected again
+        if (inputRef.current)
+            inputRef.current.value = "";
+    }, [addFile]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", accept: accept, multiple: true, onChange: handleChange, style: { display: "none" }, "aria-hidden": true }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: className, onClick: handleClick, "aria-label": "Attach file", children: children !== null && children !== void 0 ? children : "+" })] }));
+}

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import type { FileUIPart } from "ai";
+export interface ComposerAttachmentsProps {
+    className?: string;
+    children?: (file: FileUIPart, index: number, remove: () => void) => ReactNode;
+}
+export declare function ComposerAttachments({ className, children }: ComposerAttachmentsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposerAttachments = ComposerAttachments;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_composer_1 = require("./use-composer");
+function ComposerAttachments({ className, children }) {
+    const { files, removeFile } = (0, use_composer_1.useComposer)();
+    if (files.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, "data-attachment-count": files.length, children: files.map((file, index) => {
+            if (children) {
+                return children(file, index, () => removeFile(index));
+            }
+            return ((0, jsx_runtime_1.jsxs)("div", { "data-attachment": true, children: [(0, jsx_runtime_1.jsx)("span", { children: file.mediaType }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => removeFile(index), "aria-label": "Remove attachment", children: "x" })] }, index));
+        }) }));
+}

package/dist/primitives/composer/composer-input.d.ts

@@ -0,0 +1,6 @@
+export interface ComposerInputProps {
+    placeholder?: string;
+    className?: string;
+    rows?: number;
+}
+export declare function ComposerInput({ placeholder, className, rows, }: ComposerInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/composer/composer-input.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposerInput = ComposerInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_composer_1 = require("./use-composer");
+function ComposerInput({ placeholder = "Send a message...", className, rows = 1, }) {
+    const { input, setInput, submit, isDisabled } = (0, use_composer_1.useComposer)();
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            submit();
+        }
+    }, [submit]);
+    const handleChange = (0, react_1.useCallback)((e) => {
+        setInput(e.target.value);
+    }, [setInput]);
+    return ((0, jsx_runtime_1.jsx)("textarea", { className: className, value: input, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, rows: rows, "aria-label": "Message input" }));
+}

package/dist/primitives/composer/composer-root.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export interface ComposerRootProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare function ComposerRoot({ className, children }: ComposerRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/composer/composer-root.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposerRoot = ComposerRoot;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const kognitive_context_1 = require("../../context/kognitive-context");
+const use_composer_1 = require("./use-composer");
+async function fileToFileUIPart(file) {
+    const buffer = await file.arrayBuffer();
+    const base64 = btoa(new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), ""));
+    return {
+        type: "file",
+        mediaType: file.type || "application/octet-stream",
+        url: `data:${file.type || "application/octet-stream"};base64,${base64}`,
+        filename: file.name,
+    };
+}
+function ComposerRoot({ className, children }) {
+    const { send, isStreaming } = (0, kognitive_context_1.useKognitiveContext)();
+    const [input, setInput] = (0, react_1.useState)("");
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [isDragOver, setIsDragOver] = (0, react_1.useState)(false);
+    const addFile = (0, react_1.useCallback)((file) => {
+        setFiles((prev) => [...prev, file]);
+    }, []);
+    const removeFile = (0, react_1.useCallback)((index) => {
+        setFiles((prev) => prev.filter((_, i) => i !== index));
+    }, []);
+    const clearFiles = (0, react_1.useCallback)(() => {
+        setFiles([]);
+    }, []);
+    const submit = (0, react_1.useCallback)(() => {
+        const text = input.trim();
+        if (!text && files.length === 0)
+            return;
+        send(text, files.length > 0 ? { files } : undefined);
+        setInput("");
+        setFiles([]);
+    }, [input, files, send]);
+    const handleSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        submit();
+    }, [submit]);
+    // ── Drag-and-drop ──
+    const handleDragOver = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+    }, []);
+    const handleDrop = (0, react_1.useCallback)(async (e) => {
+        var _a;
+        e.preventDefault();
+        setIsDragOver(false);
+        const droppedFiles = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+        if (!droppedFiles)
+            return;
+        for (const file of Array.from(droppedFiles)) {
+            const part = await fileToFileUIPart(file);
+            addFile(part);
+        }
+    }, [addFile]);
+    // ── Paste upload ──
+    const handlePaste = (0, react_1.useCallback)(async (e) => {
+        var _a;
+        const items = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.items;
+        if (!items)
+            return;
+        for (const item of Array.from(items)) {
+            if (item.kind === "file") {
+                const file = item.getAsFile();
+                if (file) {
+                    const part = await fileToFileUIPart(file);
+                    addFile(part);
+                }
+            }
+        }
+    }, [addFile]);
+    return ((0, jsx_runtime_1.jsx)(use_composer_1.ComposerContextProvider, { value: {
+            input,
+            setInput,
+            files,
+            addFile,
+            removeFile,
+            clearFiles,
+            submit,
+            isDisabled: isStreaming,
+        }, children: (0, jsx_runtime_1.jsx)("form", { className: className, onSubmit: handleSubmit, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onPaste: handlePaste, "data-drag-over": isDragOver || undefined, children: children }) }));
+}

package/dist/primitives/composer/composer-send.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+export interface ComposerSendProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function ComposerSend({ className, children }: ComposerSendProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/composer/composer-send.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposerSend = ComposerSend;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_composer_1 = require("./use-composer");
+function ComposerSend({ className, children }) {
+    const { input, files, isDisabled } = (0, use_composer_1.useComposer)();
+    const isEmpty = !input.trim() && files.length === 0;
+    return ((0, jsx_runtime_1.jsx)("button", { type: "submit", className: className, disabled: isEmpty || isDisabled, "aria-label": "Send message", children: children !== null && children !== void 0 ? children : "Send" }));
+}

package/dist/primitives/composer/edit-composer-root.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export interface EditComposerRootProps {
+    className?: string;
+    children?: ReactNode | ((props: {
+        value: string;
+        setValue: (v: string) => void;
+        submit: () => void;
+        cancel: () => void;
+    }) => ReactNode);
+}
+export declare function EditComposerRoot({ className, children }: EditComposerRootProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/primitives/composer/edit-composer-root.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditComposerRoot = EditComposerRoot;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_message_1 = require("../message/use-message");
+const message_helpers_1 = require("../../utils/message-helpers");
+function EditComposerRoot({ className, children }) {
+    const { message, isEditing, submitEdit, cancelEdit } = (0, use_message_1.useMessage)();
+    const [value, setValue] = (0, react_1.useState)(() => (0, message_helpers_1.getMessageText)(message));
+    const handleSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        const text = value.trim();
+        if (text)
+            submitEdit(text);
+    }, [value, submitEdit]);
+    if (!isEditing)
+        return null;
+    if (typeof children === "function") {
+        return ((0, jsx_runtime_1.jsx)("form", { className: className, onSubmit: handleSubmit, children: children({ value, setValue, submit: () => { const t = value.trim(); if (t)
+                    submitEdit(t); }, cancel: cancelEdit }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("form", { className: className, onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)("textarea", { value: value, onChange: (e) => setValue(e.target.value), rows: 3, "aria-label": "Edit message" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { type: "submit", children: "Save & Send" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: cancelEdit, children: "Cancel" })] })] }));
+}

package/dist/primitives/composer/index.d.ts

@@ -0,0 +1,15 @@
+import { ComposerRoot } from "./composer-root";
+import { ComposerInput } from "./composer-input";
+import { ComposerSend } from "./composer-send";
+import { ComposerAttachments } from "./composer-attachments";
+import { ComposerAttachmentTrigger } from "./composer-attachment-trigger";
+import { EditComposerRoot } from "./edit-composer-root";
+export declare const ComposerPrimitive: {
+    Root: typeof ComposerRoot;
+    Input: typeof ComposerInput;
+    Send: typeof ComposerSend;
+    Attachments: typeof ComposerAttachments;
+    AttachmentTrigger: typeof ComposerAttachmentTrigger;
+    EditRoot: typeof EditComposerRoot;
+};
+export { useComposer } from "./use-composer";

package/dist/primitives/composer/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComposer = exports.ComposerPrimitive = void 0;
+const composer_root_1 = require("./composer-root");
+const composer_input_1 = require("./composer-input");
+const composer_send_1 = require("./composer-send");
+const composer_attachments_1 = require("./composer-attachments");
+const composer_attachment_trigger_1 = require("./composer-attachment-trigger");
+const edit_composer_root_1 = require("./edit-composer-root");
+exports.ComposerPrimitive = {
+    Root: composer_root_1.ComposerRoot,
+    Input: composer_input_1.ComposerInput,
+    Send: composer_send_1.ComposerSend,
+    Attachments: composer_attachments_1.ComposerAttachments,
+    AttachmentTrigger: composer_attachment_trigger_1.ComposerAttachmentTrigger,
+    EditRoot: edit_composer_root_1.EditComposerRoot,
+};
+var use_composer_1 = require("./use-composer");
+Object.defineProperty(exports, "useComposer", { enumerable: true, get: function () { return use_composer_1.useComposer; } });

package/dist/primitives/composer/use-composer.d.ts

@@ -0,0 +1,12 @@
+import type { FileUIPart } from "ai";
+export interface ComposerContextValue {
+    input: string;
+    setInput: (value: string) => void;
+    files: FileUIPart[];
+    addFile: (file: FileUIPart) => void;
+    removeFile: (index: number) => void;
+    clearFiles: () => void;
+    submit: () => void;
+    isDisabled: boolean;
+}
+export declare const ComposerContextProvider: import("react").Provider<ComposerContextValue | null>, useComposer: () => ComposerContextValue, ComposerContext: import("react").Context<ComposerContextValue | null>;

package/dist/primitives/composer/use-composer.js

@@ -0,0 +1,6 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposerContext = exports.useComposer = exports.ComposerContextProvider = void 0;
+const create_context_1 = require("../../utils/create-context");
+_a = (0, create_context_1.createContext)("Composer"), exports.ComposerContextProvider = _a[0], exports.useComposer = _a[1], exports.ComposerContext = _a[2];