@kognitivedev/ui 0.2.11

package/src/__tests__/tool-ui-registry.test.ts

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

package/src/__tests__/toolkit.test.ts

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

package/src/components/attachment-preview.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { cn } from "../utils/cn";
+
+export interface AttachmentPreviewProps {
+    url: string;
+    mediaType: string;
+    filename?: string;
+    className?: string;
+    onRemove?: () => void;
+}
+
+export function AttachmentPreview({ url, mediaType, filename, className, onRemove }: AttachmentPreviewProps) {
+    const isImage = mediaType.startsWith("image/");
+
+    return (
+        <div
+            className={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}
+        >
+            {isImage ? (
+                <img
+                    src={url}
+                    alt={filename ?? "Attachment"}
+                    className="h-16 w-16 rounded object-cover"
+                />
+            ) : (
+                <div className="flex h-16 w-16 items-center justify-center rounded bg-zinc-100 text-xs dark:bg-zinc-800">
+                    {filename ?? mediaType.split("/")[1]?.toUpperCase() ?? "FILE"}
+                </div>
+            )}
+            {onRemove && (
+                <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"
+                >
+                    x
+                </button>
+            )}
+        </div>
+    );
+}

package/src/components/composer.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { cn } from "../utils/cn";
+import { ComposerPrimitive } from "../primitives/composer";
+import { AttachmentPreview } from "./attachment-preview";
+
+export interface ComposerProps {
+    className?: string;
+    placeholder?: string;
+    allowAttachments?: boolean;
+}
+
+export function Composer({
+    className,
+    placeholder = "Send a message...",
+    allowAttachments = false,
+}: ComposerProps) {
+    return (
+        <ComposerPrimitive.Root
+            className={cn(
+                "border-t border-zinc-200 p-4 dark:border-zinc-700",
+                className,
+            )}
+        >
+            {/* Pending attachments */}
+            <ComposerPrimitive.Attachments className="mb-2 flex flex-wrap gap-2">
+                {(file, index, remove) => (
+                    <AttachmentPreview
+                        key={index}
+                        url={file.url}
+                        mediaType={file.mediaType}
+                        filename={file.filename}
+                        onRemove={remove}
+                    />
+                )}
+            </ComposerPrimitive.Attachments>
+
+            <div className="flex items-end gap-2">
+                {allowAttachments && (
+                    <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"
+                    >
+                        +
+                    </ComposerPrimitive.AttachmentTrigger>
+                )}
+
+                <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}
+                />
+
+                <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">
+                    Send
+                </ComposerPrimitive.Send>
+            </div>
+        </ComposerPrimitive.Root>
+    );
+}

package/src/components/error-banner.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { cn } from "../utils/cn";
+
+export interface ErrorBannerProps {
+    message: string;
+    className?: string;
+    onDismiss?: () => void;
+}
+
+export function ErrorBanner({ message, className, onDismiss }: ErrorBannerProps) {
+    return (
+        <div
+            className={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"
+        >
+            <span className="shrink-0">&#x26A0;</span>
+            <span className="flex-1">{message}</span>
+            {onDismiss && (
+                <button
+                    type="button"
+                    onClick={onDismiss}
+                    className="shrink-0 text-red-500 hover:text-red-700 dark:hover:text-red-300"
+                    aria-label="Dismiss error"
+                >
+                    x
+                </button>
+            )}
+        </div>
+    );
+}

package/src/components/markdown-content.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { cn } from "../utils/cn";
+
+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 function MarkdownContent({ text, className }: MarkdownContentProps) {
+    const paragraphs = text.split("\n\n").filter(Boolean);
+
+    return (
+        <div className={cn("space-y-2", className)}>
+            {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 (
+                        <pre
+                            key={i}
+                            className="overflow-x-auto rounded-lg bg-zinc-900 p-3 text-sm text-zinc-100"
+                            data-language={lang || undefined}
+                        >
+                            <code>{code}</code>
+                        </pre>
+                    );
+                }
+
+                // Inline code
+                const parts = paragraph.split(/(`[^`]+`)/g);
+                if (parts.length > 1) {
+                    return (
+                        <p key={i}>
+                            {parts.map((part, j) =>
+                                part.startsWith("`") && part.endsWith("`") ? (
+                                    <code
+                                        key={j}
+                                        className="rounded bg-zinc-100 px-1 py-0.5 text-sm dark:bg-zinc-800"
+                                    >
+                                        {part.slice(1, -1)}
+                                    </code>
+                                ) : (
+                                    <span key={j}>{part}</span>
+                                ),
+                            )}
+                        </p>
+                    );
+                }
+
+                return <p key={i}>{paragraph}</p>;
+            })}
+        </div>
+    );
+}

package/src/components/message.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import type { UIMessage } from "ai";
+import { cn } from "../utils/cn";
+import { MessagePrimitive } from "../primitives/message";
+import { ActionBarPrimitive } from "../primitives/action-bar";
+import { ComposerPrimitive } from "../primitives/composer";
+import { MarkdownContent } from "./markdown-content";
+import { ToolInvocation } from "./tool-invocation";
+import { useMessage } from "../primitives/message/use-message";
+
+export interface MessageProps {
+    message: UIMessage;
+    index?: number;
+    className?: string;
+}
+
+function MessageInner({ className }: { className?: string }) {
+    const { message, isEditing } = useMessage();
+    const isUser = message.role === "user";
+
+    return (
+        <div
+            className={cn(
+                "flex gap-3 py-4",
+                isUser ? "flex-row-reverse" : "flex-row",
+                className,
+            )}
+        >
+            {/* Avatar */}
+            <div
+                className={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",
+                )}
+            >
+                {isUser ? "U" : "A"}
+            </div>
+
+            {/* Content */}
+            <div className={cn("flex-1 space-y-1", isUser ? "text-right" : "text-left")}>
+                {/* Edit composer (replaces content when editing) */}
+                {isEditing ? (
+                    <ComposerPrimitive.EditRoot className="space-y-2">
+                        {({ value, setValue, submit, cancel }) => (
+                            <>
+                                <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}
+                                />
+                                <div className="flex gap-2">
+                                    <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"
+                                    >
+                                        Save & Send
+                                    </button>
+                                    <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"
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </>
+                        )}
+                    </ComposerPrimitive.EditRoot>
+                ) : (
+                    <MessagePrimitive.Content
+                        components={{
+                            Text: ({ text }) => <MarkdownContent text={text} />,
+                            ToolInvocation: (props) => <ToolInvocation {...props} />,
+                        }}
+                    />
+                )}
+
+                {/* Action bar */}
+                {!isEditing && (
+                    <>
+                        {/* User messages: edit button */}
+                        <MessagePrimitive.Role match="user">
+                            <ActionBarPrimitive.Root className="flex gap-1 pt-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" />
+                            </ActionBarPrimitive.Root>
+                        </MessagePrimitive.Role>
+
+                        {/* Assistant messages: copy + feedback */}
+                        <MessagePrimitive.Role match="assistant">
+                            <ActionBarPrimitive.Root className="flex gap-1 pt-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">
+                                    {(copied: boolean) => (copied ? "Copied!" : "Copy")}
+                                </ActionBarPrimitive.Copy>
+                                <ActionBarPrimitive.Feedback className="flex gap-1">
+                                    {({ selected, onPositive, onNegative }) => (
+                                        <>
+                                            <button
+                                                type="button"
+                                                onClick={onPositive}
+                                                className={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"
+                                            >
+                                                &#x1F44D;
+                                            </button>
+                                            <button
+                                                type="button"
+                                                onClick={onNegative}
+                                                className={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"
+                                            >
+                                                &#x1F44E;
+                                            </button>
+                                        </>
+                                    )}
+                                </ActionBarPrimitive.Feedback>
+                            </ActionBarPrimitive.Root>
+                        </MessagePrimitive.Role>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export function Message({ message, index, className }: MessageProps) {
+    return (
+        <MessagePrimitive.Root message={message} index={index}>
+            <MessageInner className={className} />
+        </MessagePrimitive.Root>
+    );
+}

package/src/components/status-indicator.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { cn } from "../utils/cn";
+import type { ChatStatus } from "ai";
+
+export interface StatusIndicatorProps {
+    status: ChatStatus;
+    className?: string;
+}
+
+const statusConfig: Record<ChatStatus, { color: string; label: string }> = {
+    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" },
+};
+
+export function StatusIndicator({ status, className }: StatusIndicatorProps) {
+    const config = statusConfig[status] ?? statusConfig.ready;
+
+    return (
+        <div className={cn("flex items-center gap-2 text-xs", className)} data-status={status}>
+            <div className={cn("h-2 w-2 rounded-full", config.color)} />
+            <span>{config.label}</span>
+        </div>
+    );
+}

package/src/components/suggestions.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { cn } from "../utils/cn";
+import { useKognitiveContext } from "../context/kognitive-context";
+
+export interface SuggestionsProps {
+    className?: string;
+}
+
+export function Suggestions({ className }: SuggestionsProps) {
+    const { suggestions, send, isStreaming } = useKognitiveContext();
+    if (suggestions.length === 0 || isStreaming) return null;
+
+    return (
+        <div className={cn("flex flex-wrap gap-2 py-3", className)} data-suggestions>
+            {suggestions.map((suggestion, i) => (
+                <button
+                    key={i}
+                    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"
+                >
+                    {suggestion}
+                </button>
+            ))}
+        </div>
+    );
+}

package/src/components/thread-list.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { cn } from "../utils/cn";
+import { ThreadListPrimitive } from "../primitives/thread-list";
+
+export interface ThreadListProps {
+    className?: string;
+}
+
+const statusColors: Record<string, string> = {
+    running: "bg-amber-500",
+    completed: "bg-emerald-500",
+    interrupted: "bg-orange-500",
+    error: "bg-red-500",
+};
+
+export function ThreadList({ className }: ThreadListProps) {
+    return (
+        <ThreadListPrimitive.Root
+            className={cn(
+                "flex h-full flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900",
+                className,
+            )}
+        >
+            {/* Header */}
+            <div className="flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-700">
+                <span className="text-sm font-medium">Conversations</span>
+                <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">
+                    New
+                </ThreadListPrimitive.New>
+            </div>
+
+            {/* Thread items */}
+            <div className="flex-1 overflow-y-auto">
+                <ThreadListPrimitive.Items>
+                    {(thread, isActive) => (
+                        <ThreadListPrimitive.Item
+                            key={thread.sessionId}
+                            thread={thread}
+                            isActive={isActive}
+                            className={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",
+                            )}
+                        >
+                            <div className="flex items-center gap-2">
+                                <div
+                                    className={cn(
+                                        "h-2 w-2 shrink-0 rounded-full",
+                                        statusColors[thread.status] ?? "bg-zinc-400",
+                                    )}
+                                />
+                                <span className="truncate font-medium">
+                                    {thread.title || thread.lastUserPreview || "New conversation"}
+                                </span>
+                            </div>
+                            {thread.lastAssistantPreview && (
+                                <p className="truncate text-xs text-zinc-500 dark:text-zinc-400">
+                                    {thread.lastAssistantPreview}
+                                </p>
+                            )}
+                        </ThreadListPrimitive.Item>
+                    )}
+                </ThreadListPrimitive.Items>
+            </div>
+        </ThreadListPrimitive.Root>
+    );
+}