@kognitivedev/ui 0.2.11

package/dist/__tests__/message-helpers.test.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const message_helpers_1 = require("../utils/message-helpers");
+function makeMessage(parts, role = "assistant") {
+    return {
+        id: "msg-1",
+        role,
+        parts,
+        createdAt: new Date(),
+    };
+}
+(0, vitest_1.describe)("extractTextContent", () => {
+    (0, vitest_1.it)("returns string content as-is", () => {
+        (0, vitest_1.expect)((0, message_helpers_1.extractTextContent)("hello")).toBe("hello");
+    });
+    (0, vitest_1.it)("extracts text from an array of parts", () => {
+        (0, vitest_1.expect)((0, message_helpers_1.extractTextContent)([
+            { text: "hello" },
+            { text: "world" },
+        ])).toBe("hello\nworld");
+    });
+    (0, vitest_1.it)("returns empty string for non-string non-array input", () => {
+        (0, vitest_1.expect)((0, message_helpers_1.extractTextContent)(42)).toBe("");
+        (0, vitest_1.expect)((0, message_helpers_1.extractTextContent)(null)).toBe("");
+        (0, vitest_1.expect)((0, message_helpers_1.extractTextContent)(undefined)).toBe("");
+    });
+    (0, vitest_1.it)("skips non-text parts", () => {
+        (0, vitest_1.expect)((0, message_helpers_1.extractTextContent)([
+            { text: "keep" },
+            { type: "image" },
+            { text: "this" },
+        ])).toBe("keep\nthis");
+    });
+});
+(0, vitest_1.describe)("getMessageText", () => {
+    (0, vitest_1.it)("extracts text from message parts", () => {
+        const msg = makeMessage([
+            { type: "text", text: "Hello " },
+            { type: "text", text: "world" },
+        ]);
+        (0, vitest_1.expect)((0, message_helpers_1.getMessageText)(msg)).toBe("Hello \nworld");
+    });
+    (0, vitest_1.it)("skips non-text parts", () => {
+        const msg = makeMessage([
+            { type: "text", text: "before" },
+            { type: "text", text: "after" },
+        ]);
+        (0, vitest_1.expect)((0, message_helpers_1.getMessageText)(msg)).toBe("before\nafter");
+    });
+    (0, vitest_1.it)("returns empty string for message with no text parts", () => {
+        const msg = makeMessage([]);
+        (0, vitest_1.expect)((0, message_helpers_1.getMessageText)(msg)).toBe("");
+    });
+});
+(0, vitest_1.describe)("getMessagePreview", () => {
+    (0, vitest_1.it)("returns full text when under maxLength", () => {
+        const msg = makeMessage([{ type: "text", text: "Short" }]);
+        (0, vitest_1.expect)((0, message_helpers_1.getMessagePreview)(msg)).toBe("Short");
+    });
+    (0, vitest_1.it)("truncates and adds ellipsis when over maxLength", () => {
+        const longText = "A".repeat(100);
+        const msg = makeMessage([{ type: "text", text: longText }]);
+        const preview = (0, message_helpers_1.getMessagePreview)(msg, 50);
+        (0, vitest_1.expect)(preview.length).toBeLessThanOrEqual(53); // 50 + "..."
+        (0, vitest_1.expect)(preview.endsWith("...")).toBe(true);
+    });
+});
+(0, vitest_1.describe)("getToolInvocations", () => {
+    (0, vitest_1.it)("returns empty array when no tool invocations", () => {
+        const msg = makeMessage([{ type: "text", text: "hello" }]);
+        (0, vitest_1.expect)((0, message_helpers_1.getToolInvocations)(msg)).toHaveLength(0);
+    });
+});
+(0, vitest_1.describe)("hasToolInvocations", () => {
+    (0, vitest_1.it)("returns false when message has no tool invocations", () => {
+        const msg = makeMessage([{ type: "text", text: "hello" }]);
+        (0, vitest_1.expect)((0, message_helpers_1.hasToolInvocations)(msg)).toBe(false);
+    });
+});

package/dist/__tests__/thread-manager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/thread-manager.test.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const thread_manager_1 = require("../runtime/thread-manager");
+(0, vitest_1.describe)("ThreadManager", () => {
+    const mockFetch = vitest_1.vi.fn();
+    (0, vitest_1.beforeEach)(() => {
+        vitest_1.vi.stubGlobal("fetch", mockFetch);
+        mockFetch.mockReset();
+    });
+    const manager = new thread_manager_1.ThreadManager({
+        baseUrl: "http://localhost:3001/api/agents/my-agent/threads",
+    });
+    (0, vitest_1.it)("list() fetches threads", async () => {
+        mockFetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ threads: [{ sessionId: "s1", title: "Hello" }] }),
+        });
+        const threads = await manager.list();
+        (0, vitest_1.expect)(threads).toHaveLength(1);
+        (0, vitest_1.expect)(threads[0].sessionId).toBe("s1");
+        (0, vitest_1.expect)(mockFetch).toHaveBeenCalledWith("http://localhost:3001/api/agents/my-agent/threads", vitest_1.expect.objectContaining({ headers: vitest_1.expect.any(Object) }));
+    });
+    (0, vitest_1.it)("get() fetches a single thread", async () => {
+        mockFetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({
+                session: { id: "1", sessionId: "s1", messageCount: 5 },
+                events: [],
+                traces: [],
+                runs: [],
+            }),
+        });
+        const detail = await manager.get("s1");
+        (0, vitest_1.expect)(detail.session.sessionId).toBe("s1");
+        (0, vitest_1.expect)(mockFetch).toHaveBeenCalledWith("http://localhost:3001/api/agents/my-agent/threads/s1", vitest_1.expect.objectContaining({ headers: vitest_1.expect.any(Object) }));
+    });
+    (0, vitest_1.it)("create() POSTs to create a thread", async () => {
+        mockFetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ thread: { sessionId: "new-s", title: "" } }),
+        });
+        const thread = await manager.create();
+        (0, vitest_1.expect)(thread.sessionId).toBe("new-s");
+        (0, vitest_1.expect)(mockFetch).toHaveBeenCalledWith("http://localhost:3001/api/agents/my-agent/threads", vitest_1.expect.objectContaining({ method: "POST" }));
+    });
+    (0, vitest_1.it)("fork() POSTs to fork a thread", async () => {
+        mockFetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ thread: { sessionId: "forked-s", title: "" } }),
+        });
+        const thread = await manager.fork("s1");
+        (0, vitest_1.expect)(thread.sessionId).toBe("forked-s");
+        (0, vitest_1.expect)(mockFetch).toHaveBeenCalledWith("http://localhost:3001/api/agents/my-agent/threads/s1/fork", vitest_1.expect.objectContaining({ method: "POST" }));
+    });
+    (0, vitest_1.it)("interrupt() POSTs to interrupt a thread", async () => {
+        mockFetch.mockResolvedValueOnce({ ok: true, json: async () => ({}) });
+        await manager.interrupt("s1");
+        (0, vitest_1.expect)(mockFetch).toHaveBeenCalledWith("http://localhost:3001/api/agents/my-agent/threads/s1/interrupt", vitest_1.expect.objectContaining({ method: "POST" }));
+    });
+    (0, vitest_1.it)("throws on HTTP error", async () => {
+        mockFetch.mockResolvedValueOnce({
+            ok: false,
+            json: async () => ({ error: "Not found" }),
+        });
+        await (0, vitest_1.expect)(manager.get("bad-id")).rejects.toThrow("Not found");
+    });
+    (0, vitest_1.it)("includes custom headers", async () => {
+        const authManager = new thread_manager_1.ThreadManager({
+            baseUrl: "http://localhost:3001/api/threads",
+            headers: { Authorization: "Bearer secret" },
+        });
+        mockFetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ threads: [] }),
+        });
+        await authManager.list();
+        (0, vitest_1.expect)(mockFetch).toHaveBeenCalledWith(vitest_1.expect.any(String), vitest_1.expect.objectContaining({
+            headers: vitest_1.expect.objectContaining({
+                Authorization: "Bearer secret",
+            }),
+        }));
+    });
+});

package/dist/__tests__/tool-ui-registry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/tool-ui-registry.test.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const registry_1 = require("../tool-ui/registry");
+const make_tool_ui_1 = require("../tool-ui/make-tool-ui");
+(0, vitest_1.describe)("ToolUIRegistry", () => {
+    (0, vitest_1.it)("registers and retrieves a tool UI component", () => {
+        const registry = new registry_1.ToolUIRegistry();
+        const render = () => null;
+        registry.register({ toolName: "test_tool", component: render });
+        (0, vitest_1.expect)(registry.has("test_tool")).toBe(true);
+        (0, vitest_1.expect)(registry.get("test_tool")).toBe(render);
+    });
+    (0, vitest_1.it)("returns undefined for unregistered tools", () => {
+        const registry = new registry_1.ToolUIRegistry();
+        (0, vitest_1.expect)(registry.has("nonexistent")).toBe(false);
+        (0, vitest_1.expect)(registry.get("nonexistent")).toBeUndefined();
+    });
+    (0, vitest_1.it)("registers multiple tools via registerAll", () => {
+        const registry = new registry_1.ToolUIRegistry();
+        const renderA = () => null;
+        const renderB = () => null;
+        registry.registerAll([
+            { toolName: "tool_a", component: renderA },
+            { toolName: "tool_b", component: renderB },
+        ]);
+        (0, vitest_1.expect)(registry.has("tool_a")).toBe(true);
+        (0, vitest_1.expect)(registry.has("tool_b")).toBe(true);
+        (0, vitest_1.expect)(registry.get("tool_a")).toBe(renderA);
+        (0, vitest_1.expect)(registry.get("tool_b")).toBe(renderB);
+    });
+    (0, vitest_1.it)("lists registered tool names", () => {
+        const registry = new registry_1.ToolUIRegistry();
+        registry.register({ toolName: "alpha", component: () => null });
+        registry.register({ toolName: "beta", component: () => null });
+        const names = registry.names();
+        (0, vitest_1.expect)(names).toContain("alpha");
+        (0, vitest_1.expect)(names).toContain("beta");
+        (0, vitest_1.expect)(names).toHaveLength(2);
+    });
+    (0, vitest_1.it)("overwrites a registration for the same tool name", () => {
+        const registry = new registry_1.ToolUIRegistry();
+        const first = () => null;
+        const second = () => null;
+        registry.register({ toolName: "tool", component: first });
+        (0, vitest_1.expect)(registry.get("tool")).toBe(first);
+        registry.register({ toolName: "tool", component: second });
+        (0, vitest_1.expect)(registry.get("tool")).toBe(second);
+    });
+});
+(0, vitest_1.describe)("makeToolUI", () => {
+    (0, vitest_1.it)("creates a registration from a tool object", () => {
+        const registration = (0, make_tool_ui_1.makeToolUI)({
+            tool: { id: "get_weather" },
+            render: () => null,
+        });
+        (0, vitest_1.expect)(registration.toolName).toBe("get_weather");
+        (0, vitest_1.expect)(typeof registration.component).toBe("function");
+    });
+    (0, vitest_1.it)("creates a registration from a tool name string", () => {
+        const registration = (0, make_tool_ui_1.makeToolUI)({
+            toolName: "search_db",
+            render: () => null,
+        });
+        (0, vitest_1.expect)(registration.toolName).toBe("search_db");
+        (0, vitest_1.expect)(typeof registration.component).toBe("function");
+    });
+});

package/dist/__tests__/toolkit.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/toolkit.test.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const toolkit_1 = require("../tool-ui/toolkit");
+const registry_1 = require("../tool-ui/registry");
+(0, vitest_1.describe)("toolkit", () => {
+    (0, vitest_1.it)("creates registrations from a map of tool names to render functions", () => {
+        const registrations = (0, toolkit_1.toolkit)({
+            weather: { render: () => null },
+            search: { render: () => null },
+        });
+        (0, vitest_1.expect)(registrations).toHaveLength(2);
+        (0, vitest_1.expect)(registrations[0].toolName).toBe("weather");
+        (0, vitest_1.expect)(registrations[1].toolName).toBe("search");
+    });
+    (0, vitest_1.it)("creates an empty array from an empty map", () => {
+        const registrations = (0, toolkit_1.toolkit)({});
+        (0, vitest_1.expect)(registrations).toHaveLength(0);
+    });
+    (0, vitest_1.it)("integrates with ToolUIRegistry.registerAll", () => {
+        const registrations = (0, toolkit_1.toolkit)({
+            tool_a: { render: () => null },
+            tool_b: { render: () => null },
+            tool_c: { render: () => null },
+        });
+        const registry = new registry_1.ToolUIRegistry();
+        registry.registerAll(registrations);
+        (0, vitest_1.expect)(registry.has("tool_a")).toBe(true);
+        (0, vitest_1.expect)(registry.has("tool_b")).toBe(true);
+        (0, vitest_1.expect)(registry.has("tool_c")).toBe(true);
+        (0, vitest_1.expect)(registry.names()).toHaveLength(3);
+    });
+});

package/dist/components/attachment-preview.d.ts

@@ -0,0 +1,8 @@
+export interface AttachmentPreviewProps {
+    url: string;
+    mediaType: string;
+    filename?: string;
+    className?: string;
+    onRemove?: () => void;
+}
+export declare function AttachmentPreview({ url, mediaType, filename, className, onRemove }: AttachmentPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/attachment-preview.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachmentPreview = AttachmentPreview;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+function AttachmentPreview({ url, mediaType, filename, className, onRemove }) {
+    var _a, _b;
+    const isImage = mediaType.startsWith("image/");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative inline-flex items-center gap-2 rounded-lg border border-zinc-200 p-2 dark:border-zinc-700", className), "data-mime-type": mediaType, children: [isImage ? ((0, jsx_runtime_1.jsx)("img", { src: url, alt: filename !== null && filename !== void 0 ? filename : "Attachment", className: "h-16 w-16 rounded object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-16 w-16 items-center justify-center rounded bg-zinc-100 text-xs dark:bg-zinc-800", children: (_b = filename !== null && filename !== void 0 ? filename : (_a = mediaType.split("/")[1]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : "FILE" })), onRemove && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onRemove, className: "absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-zinc-500 text-xs text-white hover:bg-zinc-600", "aria-label": "Remove attachment", children: "x" }))] }));
+}

package/dist/components/composer.d.ts

@@ -0,0 +1,6 @@
+export interface ComposerProps {
+    className?: string;
+    placeholder?: string;
+    allowAttachments?: boolean;
+}
+export declare function Composer({ className, placeholder, allowAttachments, }: ComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/composer.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Composer = Composer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+const composer_1 = require("../primitives/composer");
+const attachment_preview_1 = require("./attachment-preview");
+function Composer({ className, placeholder = "Send a message...", allowAttachments = false, }) {
+    return ((0, jsx_runtime_1.jsxs)(composer_1.ComposerPrimitive.Root, { className: (0, cn_1.cn)("border-t border-zinc-200 p-4 dark:border-zinc-700", className), children: [(0, jsx_runtime_1.jsx)(composer_1.ComposerPrimitive.Attachments, { className: "mb-2 flex flex-wrap gap-2", children: (file, index, remove) => ((0, jsx_runtime_1.jsx)(attachment_preview_1.AttachmentPreview, { url: file.url, mediaType: file.mediaType, filename: file.filename, onRemove: remove }, index)) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-end gap-2", children: [allowAttachments && ((0, jsx_runtime_1.jsx)(composer_1.ComposerPrimitive.AttachmentTrigger, { className: "flex h-10 w-10 items-center justify-center rounded-lg text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300", accept: "image/*,.pdf,.txt,.md,.json,.csv", children: "+" })), (0, jsx_runtime_1.jsx)(composer_1.ComposerPrimitive.Input, { placeholder: placeholder, className: "flex-1 resize-none rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm outline-none placeholder:text-zinc-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-900 dark:placeholder:text-zinc-500 dark:focus:border-blue-400", rows: 1 }), (0, jsx_runtime_1.jsx)(composer_1.ComposerPrimitive.Send, { className: "flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600", children: "Send" })] })] }));
+}

package/dist/components/error-banner.d.ts

@@ -0,0 +1,6 @@
+export interface ErrorBannerProps {
+    message: string;
+    className?: string;
+    onDismiss?: () => void;
+}
+export declare function ErrorBanner({ message, className, onDismiss }: ErrorBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/error-banner.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBanner = ErrorBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+function ErrorBanner({ message, className, onDismiss }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-400", className), role: "alert", children: [(0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: "\u26A0" }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1", children: message }), onDismiss && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onDismiss, className: "shrink-0 text-red-500 hover:text-red-700 dark:hover:text-red-300", "aria-label": "Dismiss error", children: "x" }))] }));
+}

package/dist/components/markdown-content.d.ts

@@ -0,0 +1,13 @@
+export interface MarkdownContentProps {
+    text: string;
+    className?: string;
+}
+/**
+ * Simple markdown-like text renderer.
+ *
+ * For full markdown support, override the Text component in MessagePrimitive.Content
+ * with your preferred markdown library (e.g., react-markdown).
+ *
+ * This component provides basic paragraph splitting and code block detection.
+ */
+export declare function MarkdownContent({ text, className }: MarkdownContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/markdown-content.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownContent = MarkdownContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+/**
+ * Simple markdown-like text renderer.
+ *
+ * For full markdown support, override the Text component in MessagePrimitive.Content
+ * with your preferred markdown library (e.g., react-markdown).
+ *
+ * This component provides basic paragraph splitting and code block detection.
+ */
+function MarkdownContent({ text, className }) {
+    const paragraphs = text.split("\n\n").filter(Boolean);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("space-y-2", className), children: paragraphs.map((paragraph, i) => {
+            // Code block
+            if (paragraph.startsWith("```")) {
+                const lines = paragraph.split("\n");
+                const lang = lines[0].replace("```", "").trim();
+                const code = lines.slice(1, lines[lines.length - 1] === "```" ? -1 : undefined).join("\n");
+                return ((0, jsx_runtime_1.jsx)("pre", { className: "overflow-x-auto rounded-lg bg-zinc-900 p-3 text-sm text-zinc-100", "data-language": lang || undefined, children: (0, jsx_runtime_1.jsx)("code", { children: code }) }, i));
+            }
+            // Inline code
+            const parts = paragraph.split(/(`[^`]+`)/g);
+            if (parts.length > 1) {
+                return ((0, jsx_runtime_1.jsx)("p", { children: parts.map((part, j) => part.startsWith("`") && part.endsWith("`") ? ((0, jsx_runtime_1.jsx)("code", { className: "rounded bg-zinc-100 px-1 py-0.5 text-sm dark:bg-zinc-800", children: part.slice(1, -1) }, j)) : ((0, jsx_runtime_1.jsx)("span", { children: part }, j))) }, i));
+            }
+            return (0, jsx_runtime_1.jsx)("p", { children: paragraph }, i);
+        }) }));
+}

package/dist/components/message.d.ts

@@ -0,0 +1,7 @@
+import type { UIMessage } from "ai";
+export interface MessageProps {
+    message: UIMessage;
+    index?: number;
+    className?: string;
+}
+export declare function Message({ message, index, className }: MessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/message.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = Message;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+const message_1 = require("../primitives/message");
+const action_bar_1 = require("../primitives/action-bar");
+const composer_1 = require("../primitives/composer");
+const markdown_content_1 = require("./markdown-content");
+const tool_invocation_1 = require("./tool-invocation");
+const use_message_1 = require("../primitives/message/use-message");
+function MessageInner({ className }) {
+    const { message, isEditing } = (0, use_message_1.useMessage)();
+    const isUser = message.role === "user";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex gap-3 py-4", isUser ? "flex-row-reverse" : "flex-row", className), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm", isUser
+                    ? "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
+                    : "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400"), children: isUser ? "U" : "A" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex-1 space-y-1", isUser ? "text-right" : "text-left"), children: [isEditing ? ((0, jsx_runtime_1.jsx)(composer_1.ComposerPrimitive.EditRoot, { className: "space-y-2", children: ({ value, setValue, submit, cancel }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("textarea", { value: value, onChange: (e) => setValue(e.target.value), className: "w-full resize-none rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-900", rows: 3 }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: submit, className: "rounded-lg bg-blue-600 px-3 py-1 text-xs font-medium text-white hover:bg-blue-700", children: "Save & Send" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: cancel, className: "rounded-lg border border-zinc-300 px-3 py-1 text-xs text-zinc-600 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800", children: "Cancel" })] })] })) })) : ((0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Content, { components: {
+                            Text: ({ text }) => (0, jsx_runtime_1.jsx)(markdown_content_1.MarkdownContent, { text: text }),
+                            ToolInvocation: (props) => (0, jsx_runtime_1.jsx)(tool_invocation_1.ToolInvocation, Object.assign({}, props)),
+                        } })), !isEditing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Role, { match: "user", children: (0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Root, { className: "flex gap-1 pt-1", children: (0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Edit, { className: "rounded px-2 py-1 text-xs text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300" }) }) }), (0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Role, { match: "assistant", children: (0, jsx_runtime_1.jsxs)(action_bar_1.ActionBarPrimitive.Root, { className: "flex gap-1 pt-1", children: [(0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Copy, { className: "rounded px-2 py-1 text-xs text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300", children: (copied) => (copied ? "Copied!" : "Copy") }), (0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Feedback, { className: "flex gap-1", children: ({ selected, onPositive, onNegative }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onPositive, className: (0, cn_1.cn)("rounded px-1.5 py-1 text-xs transition-colors", selected === "positive"
+                                                            ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+                                                            : "text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"), "aria-label": "Good response", children: "\uD83D\uDC4D" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onNegative, className: (0, cn_1.cn)("rounded px-1.5 py-1 text-xs transition-colors", selected === "negative"
+                                                            ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
+                                                            : "text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"), "aria-label": "Bad response", children: "\uD83D\uDC4E" })] })) })] }) })] }))] })] }));
+}
+function Message({ message, index, className }) {
+    return ((0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Root, { message: message, index: index, children: (0, jsx_runtime_1.jsx)(MessageInner, { className: className }) }));
+}

package/dist/components/status-indicator.d.ts

@@ -0,0 +1,6 @@
+import type { ChatStatus } from "ai";
+export interface StatusIndicatorProps {
+    status: ChatStatus;
+    className?: string;
+}
+export declare function StatusIndicator({ status, className }: StatusIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/status-indicator.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIndicator = StatusIndicator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+const statusConfig = {
+    ready: { color: "bg-emerald-500", label: "Ready" },
+    submitted: { color: "bg-amber-500", label: "Sending..." },
+    streaming: { color: "bg-amber-500 animate-pulse", label: "Responding..." },
+    error: { color: "bg-red-500", label: "Error" },
+};
+function StatusIndicator({ status, className }) {
+    var _a;
+    const config = (_a = statusConfig[status]) !== null && _a !== void 0 ? _a : statusConfig.ready;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center gap-2 text-xs", className), "data-status": status, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("h-2 w-2 rounded-full", config.color) }), (0, jsx_runtime_1.jsx)("span", { children: config.label })] }));
+}

package/dist/components/suggestions.d.ts

@@ -0,0 +1,4 @@
+export interface SuggestionsProps {
+    className?: string;
+}
+export declare function Suggestions({ className }: SuggestionsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/suggestions.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Suggestions = Suggestions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+const kognitive_context_1 = require("../context/kognitive-context");
+function Suggestions({ className }) {
+    const { suggestions, send, isStreaming } = (0, kognitive_context_1.useKognitiveContext)();
+    if (suggestions.length === 0 || isStreaming)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex flex-wrap gap-2 py-3", className), "data-suggestions": true, children: suggestions.map((suggestion, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => send(suggestion), className: "rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800", children: suggestion }, i))) }));
+}

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

@@ -0,0 +1,4 @@
+export interface ThreadListProps {
+    className?: string;
+}
+export declare function ThreadList({ className }: ThreadListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/thread-list.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThreadList = ThreadList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+const thread_list_1 = require("../primitives/thread-list");
+const statusColors = {
+    running: "bg-amber-500",
+    completed: "bg-emerald-500",
+    interrupted: "bg-orange-500",
+    error: "bg-red-500",
+};
+function ThreadList({ className }) {
+    return ((0, jsx_runtime_1.jsxs)(thread_list_1.ThreadListPrimitive.Root, { className: (0, cn_1.cn)("flex h-full flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-700", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: "Conversations" }), (0, jsx_runtime_1.jsx)(thread_list_1.ThreadListPrimitive.New, { className: "rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600", children: "New" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto", children: (0, jsx_runtime_1.jsx)(thread_list_1.ThreadListPrimitive.Items, { children: (thread, isActive) => {
+                        var _a;
+                        return ((0, jsx_runtime_1.jsxs)(thread_list_1.ThreadListPrimitive.Item, { thread: thread, isActive: isActive, className: (0, cn_1.cn)("flex w-full flex-col gap-1 border-b border-zinc-100 px-4 py-3 text-left text-sm transition-colors dark:border-zinc-800", isActive
+                                ? "bg-white dark:bg-zinc-800"
+                                : "hover:bg-zinc-100 dark:hover:bg-zinc-800/50"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("h-2 w-2 shrink-0 rounded-full", (_a = statusColors[thread.status]) !== null && _a !== void 0 ? _a : "bg-zinc-400") }), (0, jsx_runtime_1.jsx)("span", { className: "truncate font-medium", children: thread.title || thread.lastUserPreview || "New conversation" })] }), thread.lastAssistantPreview && ((0, jsx_runtime_1.jsx)("p", { className: "truncate text-xs text-zinc-500 dark:text-zinc-400", children: thread.lastAssistantPreview }))] }, thread.sessionId));
+                    } }) })] }));
+}

package/dist/components/thread.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type { ComponentType } from "react";
+export interface ThreadProps {
+    className?: string;
+    emptyState?: React.ReactNode;
+    allowAttachments?: boolean;
+    components?: {
+        Message?: ComponentType<{
+            message: any;
+            index: number;
+        }>;
+        Composer?: ComponentType;
+    };
+}
+export declare function Thread({ className, emptyState, allowAttachments, components, }: ThreadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/thread.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thread = Thread;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+const thread_1 = require("../primitives/thread");
+const message_1 = require("./message");
+const composer_1 = require("./composer");
+const status_indicator_1 = require("./status-indicator");
+const error_banner_1 = require("./error-banner");
+const suggestions_1 = require("./suggestions");
+const kognitive_context_1 = require("../context/kognitive-context");
+function Thread({ className, emptyState, allowAttachments = false, components, }) {
+    var _a, _b;
+    const { status } = (0, kognitive_context_1.useKognitiveContext)();
+    const MessageComponent = (_a = components === null || components === void 0 ? void 0 : components.Message) !== null && _a !== void 0 ? _a : message_1.Message;
+    const ComposerComponent = (_b = components === null || components === void 0 ? void 0 : components.Composer) !== null && _b !== void 0 ? _b : composer_1.Composer;
+    return ((0, jsx_runtime_1.jsxs)(thread_1.ThreadPrimitive.Root, { className: (0, cn_1.cn)("flex h-full flex-col", className), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between border-b border-zinc-200 px-4 py-2 dark:border-zinc-700", children: (0, jsx_runtime_1.jsx)(status_indicator_1.StatusIndicator, { status: status }) }), (0, jsx_runtime_1.jsx)(thread_1.ThreadPrimitive.Error, { className: "px-4 pt-3", children: (error) => (0, jsx_runtime_1.jsx)(error_banner_1.ErrorBanner, { message: error.message }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto px-4", "data-kognitive-thread-root": true, children: [(0, jsx_runtime_1.jsx)(thread_1.ThreadPrimitive.Empty, { children: emptyState !== null && emptyState !== void 0 ? emptyState : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full items-center justify-center text-zinc-400", children: (0, jsx_runtime_1.jsx)("p", { children: "Start a conversation" }) })) }), (0, jsx_runtime_1.jsx)(thread_1.ThreadPrimitive.Messages, { children: (message, index) => ((0, jsx_runtime_1.jsx)(MessageComponent, { message: message, index: index }, message.id)) }), (0, jsx_runtime_1.jsx)(thread_1.ThreadPrimitive.Loading, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 py-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-zinc-100 text-sm text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400", children: "A" }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-zinc-400", style: { animationDelay: "0ms" } }), (0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-zinc-400", style: { animationDelay: "150ms" } }), (0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 animate-bounce rounded-full bg-zinc-400", style: { animationDelay: "300ms" } })] }) })] }) }), (0, jsx_runtime_1.jsx)(suggestions_1.Suggestions, {})] }), (components === null || components === void 0 ? void 0 : components.Composer) ? ((0, jsx_runtime_1.jsx)(ComposerComponent, {})) : ((0, jsx_runtime_1.jsx)(composer_1.Composer, { allowAttachments: allowAttachments }))] }));
+}

package/dist/components/tool-approval.d.ts

@@ -0,0 +1,7 @@
+export interface ToolApprovalProps {
+    toolCallId: string;
+    toolName: string;
+    input: unknown;
+    className?: string;
+}
+export declare function ToolApproval({ toolCallId, toolName, input, className }: ToolApprovalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/tool-approval.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolApproval = ToolApproval;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn");
+const kognitive_context_1 = require("../context/kognitive-context");
+function ToolApproval({ toolCallId, toolName, input, className }) {
+    const { onToolApproval } = (0, kognitive_context_1.useKognitiveContext)();
+    if (!onToolApproval)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("my-2 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-950/30", className), "data-tool-approval": toolCallId, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-amber-600", children: "\u26A0" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-medium", children: [(0, jsx_runtime_1.jsx)("strong", { children: toolName }), " requires approval"] })] }), input !== undefined && input !== null && ((0, jsx_runtime_1.jsx)("pre", { className: "mb-3 overflow-auto rounded bg-amber-100/50 p-2 text-xs dark:bg-amber-900/20", children: JSON.stringify(input, null, 2) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onToolApproval(toolCallId, true), className: "rounded-lg bg-emerald-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-emerald-700", children: "Approve" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onToolApproval(toolCallId, false), className: "rounded-lg border border-zinc-300 px-4 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800", children: "Reject" })] })] }));
+}

package/dist/components/tool-invocation.d.ts

@@ -0,0 +1,5 @@
+import type { ToolUIRenderProps } from "../tool-ui/types";
+export interface ToolInvocationProps extends ToolUIRenderProps {
+    className?: string;
+}
+export declare function ToolInvocation({ toolName, toolCallId, input, output, state, className, }: ToolInvocationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tool-invocation.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolInvocation = ToolInvocation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn");
+const tool_approval_1 = require("./tool-approval");
+function isComplete(state) {
+    return state === "output-available";
+}
+function stateLabel(state) {
+    switch (state) {
+        case "input-streaming": return "streaming...";
+        case "input-available": return "calling...";
+        case "approval-requested": return "awaiting approval";
+        case "approval-responded": return "approved";
+        case "output-available": return "completed";
+        case "error": return "error";
+        default: return state;
+    }
+}
+function ToolInvocation({ toolName, toolCallId, input, output, state, className, }) {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const done = isComplete(state);
+    if (state === "approval-requested") {
+        return (0, jsx_runtime_1.jsx)(tool_approval_1.ToolApproval, { toolCallId: toolCallId, toolName: toolName, input: input, className: className });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("my-2 rounded-lg border border-zinc-200 dark:border-zinc-700", className), "data-tool": toolName, "data-tool-state": state, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setExpanded(!expanded), className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-zinc-50 dark:hover:bg-zinc-800/50", "aria-expanded": expanded, children: [(0, jsx_runtime_1.jsx)("span", { className: "text-amber-500", children: "\uD83D\uDD27" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: toolName }), (0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("ml-auto rounded-full px-2 py-0.5 text-xs", done
+                            ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+                            : state === "error"
+                                ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+                                : "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"), children: stateLabel(state) }), (0, jsx_runtime_1.jsx)("span", { className: "text-zinc-400", children: expanded ? "\u25BC" : "\u25B6" })] }), expanded && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-zinc-200 px-3 py-2 dark:border-zinc-700", children: [input !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-1 text-xs font-medium text-zinc-500", children: "Arguments" }), (0, jsx_runtime_1.jsx)("pre", { className: "overflow-auto rounded bg-zinc-50 p-2 text-xs dark:bg-zinc-800/50", children: JSON.stringify(input, null, 2) })] })), output !== undefined && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-1 text-xs font-medium text-zinc-500", children: "Result" }), (0, jsx_runtime_1.jsx)("pre", { className: "overflow-auto rounded bg-zinc-50 p-2 text-xs dark:bg-zinc-800/50", children: JSON.stringify(output, null, 2) })] }))] }))] }));
+}

package/dist/context/kognitive-context.d.ts

@@ -0,0 +1,2 @@
+import type { KognitiveContextValue } from "./types";
+export declare const KognitiveContextProvider: import("react").Provider<KognitiveContextValue | null>, useKognitiveContext: () => KognitiveContextValue, KognitiveContext: import("react").Context<KognitiveContextValue | null>;