@kognitivedev/ui 0.2.11

package/src/primitives/composer/composer-root.tsx

@@ -0,0 +1,130 @@
+import React, { useState, useCallback, type ReactNode, type FormEvent, type DragEvent, type ClipboardEvent } from "react";
+import type { FileUIPart } from "ai";
+import { useKognitiveContext } from "../../context/kognitive-context";
+import { ComposerContextProvider } from "./use-composer";
+
+async function fileToFileUIPart(file: File): Promise<FileUIPart> {
+    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,
+    };
+}
+
+export interface ComposerRootProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export function ComposerRoot({ className, children }: ComposerRootProps) {
+    const { send, isStreaming } = useKognitiveContext();
+    const [input, setInput] = useState("");
+    const [files, setFiles] = useState<FileUIPart[]>([]);
+    const [isDragOver, setIsDragOver] = useState(false);
+
+    const addFile = useCallback((file: FileUIPart) => {
+        setFiles((prev) => [...prev, file]);
+    }, []);
+
+    const removeFile = useCallback((index: number) => {
+        setFiles((prev) => prev.filter((_, i) => i !== index));
+    }, []);
+
+    const clearFiles = useCallback(() => {
+        setFiles([]);
+    }, []);
+
+    const submit = 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 = useCallback(
+        (e: FormEvent) => {
+            e.preventDefault();
+            submit();
+        },
+        [submit],
+    );
+
+    // ── Drag-and-drop ──
+    const handleDragOver = useCallback((e: DragEvent) => {
+        e.preventDefault();
+        setIsDragOver(true);
+    }, []);
+
+    const handleDragLeave = useCallback((e: DragEvent) => {
+        e.preventDefault();
+        setIsDragOver(false);
+    }, []);
+
+    const handleDrop = useCallback(
+        async (e: DragEvent) => {
+            e.preventDefault();
+            setIsDragOver(false);
+            const droppedFiles = e.dataTransfer?.files;
+            if (!droppedFiles) return;
+            for (const file of Array.from(droppedFiles)) {
+                const part = await fileToFileUIPart(file);
+                addFile(part);
+            }
+        },
+        [addFile],
+    );
+
+    // ── Paste upload ──
+    const handlePaste = useCallback(
+        async (e: ClipboardEvent) => {
+            const items = e.clipboardData?.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 (
+        <ComposerContextProvider
+            value={{
+                input,
+                setInput,
+                files,
+                addFile,
+                removeFile,
+                clearFiles,
+                submit,
+                isDisabled: isStreaming,
+            }}
+        >
+            <form
+                className={className}
+                onSubmit={handleSubmit}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+                onPaste={handlePaste}
+                data-drag-over={isDragOver || undefined}
+            >
+                {children}
+            </form>
+        </ComposerContextProvider>
+    );
+}

package/src/primitives/composer/composer-send.tsx

@@ -0,0 +1,23 @@
+import React, { type ReactNode } from "react";
+import { useComposer } from "./use-composer";
+
+export interface ComposerSendProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+export function ComposerSend({ className, children }: ComposerSendProps) {
+    const { input, files, isDisabled } = useComposer();
+    const isEmpty = !input.trim() && files.length === 0;
+
+    return (
+        <button
+            type="submit"
+            className={className}
+            disabled={isEmpty || isDisabled}
+            aria-label="Send message"
+        >
+            {children ?? "Send"}
+        </button>
+    );
+}

package/src/primitives/composer/edit-composer-root.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useCallback, type ReactNode, type FormEvent } from "react";
+import { useMessage } from "../message/use-message";
+import { getMessageText } from "../../utils/message-helpers";
+
+export interface EditComposerRootProps {
+    className?: string;
+    children?: ReactNode | ((props: {
+        value: string;
+        setValue: (v: string) => void;
+        submit: () => void;
+        cancel: () => void;
+    }) => ReactNode);
+}
+
+export function EditComposerRoot({ className, children }: EditComposerRootProps) {
+    const { message, isEditing, submitEdit, cancelEdit } = useMessage();
+    const [value, setValue] = useState(() => getMessageText(message));
+
+    const handleSubmit = useCallback(
+        (e: FormEvent) => {
+            e.preventDefault();
+            const text = value.trim();
+            if (text) submitEdit(text);
+        },
+        [value, submitEdit],
+    );
+
+    if (!isEditing) return null;
+
+    if (typeof children === "function") {
+        return (
+            <form className={className} onSubmit={handleSubmit}>
+                {children({ value, setValue, submit: () => { const t = value.trim(); if (t) submitEdit(t); }, cancel: cancelEdit })}
+            </form>
+        );
+    }
+
+    return (
+        <form className={className} onSubmit={handleSubmit}>
+            <textarea
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                rows={3}
+                aria-label="Edit message"
+            />
+            <div>
+                <button type="submit">Save & Send</button>
+                <button type="button" onClick={cancelEdit}>Cancel</button>
+            </div>
+        </form>
+    );
+}

package/src/primitives/composer/index.ts

@@ -0,0 +1,17 @@
+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 const ComposerPrimitive = {
+    Root: ComposerRoot,
+    Input: ComposerInput,
+    Send: ComposerSend,
+    Attachments: ComposerAttachments,
+    AttachmentTrigger: ComposerAttachmentTrigger,
+    EditRoot: EditComposerRoot,
+};
+
+export { useComposer } from "./use-composer";

package/src/primitives/composer/use-composer.ts

@@ -0,0 +1,19 @@
+import { createContext } from "../../utils/create-context";
+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 const [
+    ComposerContextProvider,
+    useComposer,
+    ComposerContext,
+] = createContext<ComposerContextValue>("Composer");

package/src/primitives/message/index.ts

@@ -0,0 +1,11 @@
+import { MessageRoot } from "./message-root";
+import { MessageContent } from "./message-content";
+import { MessageRole } from "./message-role";
+
+export const MessagePrimitive = {
+    Root: MessageRoot,
+    Content: MessageContent,
+    Role: MessageRole,
+};
+
+export { useMessage } from "./use-message";

package/src/primitives/message/message-content.tsx

@@ -0,0 +1,117 @@
+import React, { type ComponentType } from "react";
+import type { FileUIPart } from "ai";
+import { useMessage } from "./use-message";
+import { useToolUIRegistry } from "../../tool-ui/tool-ui-context";
+import type { ToolUIRenderProps, ToolInvocationState } from "../../tool-ui/types";
+
+export interface TextComponentProps {
+    text: string;
+}
+
+export interface ToolInvocationComponentProps {
+    toolCallId: string;
+    toolName: string;
+    input: any;
+    output: any;
+    state: ToolInvocationState;
+}
+
+export interface FileComponentProps {
+    file: FileUIPart;
+}
+
+export interface MessageContentComponents {
+    Text?: ComponentType<TextComponentProps>;
+    ToolInvocation?: ComponentType<ToolInvocationComponentProps>;
+    File?: ComponentType<FileComponentProps>;
+}
+
+export interface MessageContentProps {
+    components?: MessageContentComponents;
+}
+
+function DefaultText({ text }: TextComponentProps) {
+    return <p>{text}</p>;
+}
+
+function DefaultFile({ file }: FileComponentProps) {
+    if (file.mediaType.startsWith("image/")) {
+        return <img src={file.url} alt={file.filename ?? "attachment"} />;
+    }
+    return <div data-file-type={file.mediaType}>File: {file.filename ?? file.mediaType}</div>;
+}
+
+function isToolPart(part: { type: string }): boolean {
+    return part.type.startsWith("tool-") || part.type === "dynamic-tool";
+}
+
+function getToolName(part: any): string {
+    if (part.type === "dynamic-tool") return part.toolName;
+    // For typed tool parts, type is "tool-{name}"
+    return part.type.replace(/^tool-/, "");
+}
+
+export function MessageContent({ components }: MessageContentProps) {
+    const { message } = useMessage();
+    let registry: ReturnType<typeof useToolUIRegistry> | undefined;
+
+    try {
+        registry = useToolUIRegistry();
+    } catch {
+        // ToolUIRegistry is optional
+    }
+
+    const TextComponent = components?.Text ?? DefaultText;
+    const ToolInvocationComponent = components?.ToolInvocation;
+    const FileComponent = components?.File ?? DefaultFile;
+
+    return (
+        <>
+            {message.parts.map((part, i) => {
+                if (part.type === "text") {
+                    return <TextComponent key={i} text={part.text} />;
+                }
+
+                if (isToolPart(part)) {
+                    const toolPart = part as any;
+                    const toolName = getToolName(toolPart);
+                    const renderProps: ToolUIRenderProps = {
+                        toolCallId: toolPart.toolCallId,
+                        toolName,
+                        input: toolPart.input,
+                        output: toolPart.output,
+                        state: toolPart.state,
+                    };
+
+                    // Check registry first
+                    const RegisteredUI = registry?.get(toolName);
+                    if (RegisteredUI) {
+                        return <RegisteredUI key={i} {...renderProps} />;
+                    }
+
+                    // Then check component override
+                    if (ToolInvocationComponent) {
+                        return <ToolInvocationComponent key={i} {...renderProps} />;
+                    }
+
+                    // Default: simple JSON display
+                    return (
+                        <div key={i} data-tool={toolName} data-tool-state={toolPart.state}>
+                            <strong>{toolName}</strong>
+                            <pre>{JSON.stringify(toolPart.input, null, 2)}</pre>
+                            {toolPart.output !== undefined && (
+                                <pre>{JSON.stringify(toolPart.output, null, 2)}</pre>
+                            )}
+                        </div>
+                    );
+                }
+
+                if (part.type === "file") {
+                    return <FileComponent key={i} file={part} />;
+                }
+
+                return null;
+            })}
+        </>
+    );
+}

package/src/primitives/message/message-role.tsx

@@ -0,0 +1,13 @@
+import React, { type ReactNode } from "react";
+import { useMessage } from "./use-message";
+
+export interface MessageRoleProps {
+    match: "user" | "assistant" | "system";
+    children: ReactNode;
+}
+
+export function MessageRole({ match, children }: MessageRoleProps) {
+    const { message } = useMessage();
+    if (message.role !== match) return null;
+    return <>{children}</>;
+}

package/src/primitives/message/message-root.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useCallback, type ReactNode } from "react";
+import type { UIMessage } from "ai";
+import { MessageContextProvider } from "./use-message";
+import { useKognitiveContext } from "../../context/kognitive-context";
+import { getMessageText } from "../../utils/message-helpers";
+
+export interface MessageRootProps {
+    message?: UIMessage;
+    index?: number;
+    className?: string;
+    children: ReactNode;
+}
+
+export function MessageRoot({ message, index, className, children }: MessageRootProps) {
+    if (!message) {
+        throw new Error("MessagePrimitive.Root requires a `message` prop or must be used inside ThreadPrimitive.Messages");
+    }
+
+    const { messages, setMessages, send } = useKognitiveContext();
+    const [isEditing, setIsEditing] = useState(false);
+
+    const startEdit = useCallback(() => {
+        if (message.role === "user") setIsEditing(true);
+    }, [message.role]);
+
+    const cancelEdit = useCallback(() => {
+        setIsEditing(false);
+    }, []);
+
+    const submitEdit = useCallback(
+        (newText: string) => {
+            setIsEditing(false);
+            // Trim conversation to before this message and re-send
+            const msgIndex = messages.findIndex((m) => m.id === message.id);
+            if (msgIndex >= 0) {
+                setMessages(messages.slice(0, msgIndex));
+                send(newText);
+            }
+        },
+        [messages, message.id, setMessages, send],
+    );
+
+    return (
+        <MessageContextProvider
+            value={{
+                message,
+                index: index ?? 0,
+                isEditing,
+                startEdit,
+                cancelEdit,
+                submitEdit,
+            }}
+        >
+            <div
+                className={className}
+                data-role={message.role}
+                data-message-id={message.id}
+                data-editing={isEditing || undefined}
+            >
+                {children}
+            </div>
+        </MessageContextProvider>
+    );
+}

package/src/primitives/message/use-message.ts

@@ -0,0 +1,17 @@
+import { createContext } from "../../utils/create-context";
+import type { UIMessage } from "ai";
+
+export interface MessageContextValue {
+    message: UIMessage;
+    index: number;
+    isEditing: boolean;
+    startEdit: () => void;
+    cancelEdit: () => void;
+    submitEdit: (newText: string) => void;
+}
+
+export const [
+    MessageContextProvider,
+    useMessage,
+    MessageContext,
+] = createContext<MessageContextValue>("Message");

package/src/primitives/thread/index.ts

@@ -0,0 +1,19 @@
+import { ThreadRoot } from "./thread-root";
+import { ThreadMessages } from "./thread-messages";
+import { ThreadEmpty } from "./thread-empty";
+import { ThreadLoading } from "./thread-loading";
+import { ThreadScrollToBottom } from "./thread-scroll-to-bottom";
+import { ThreadError } from "./thread-error";
+import { ThreadSuggestions } from "./thread-suggestions";
+
+export const ThreadPrimitive = {
+    Root: ThreadRoot,
+    Messages: ThreadMessages,
+    Empty: ThreadEmpty,
+    Loading: ThreadLoading,
+    ScrollToBottom: ThreadScrollToBottom,
+    Error: ThreadError,
+    Suggestions: ThreadSuggestions,
+};
+
+export { useThread } from "./use-thread";

package/src/primitives/thread/thread-empty.tsx

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from "react";
+import { useThread } from "./use-thread";
+
+export interface ThreadEmptyProps {
+    children: ReactNode;
+}
+
+export function ThreadEmpty({ children }: ThreadEmptyProps) {
+    const { messages } = useThread();
+    if (messages.length > 0) return null;
+    return <>{children}</>;
+}

package/src/primitives/thread/thread-error.tsx

@@ -0,0 +1,18 @@
+import React, { type ReactNode } from "react";
+import { useKognitiveContext } from "../../context/kognitive-context";
+
+export interface ThreadErrorProps {
+    children?: ReactNode | ((error: Error) => ReactNode);
+    className?: string;
+}
+
+export function ThreadError({ children, className }: ThreadErrorProps) {
+    const { error } = useKognitiveContext();
+    if (!error) return null;
+
+    return (
+        <div className={className} role="alert" data-error>
+            {typeof children === "function" ? children(error) : children ?? error.message}
+        </div>
+    );
+}

package/src/primitives/thread/thread-loading.tsx

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from "react";
+import { useThread } from "./use-thread";
+
+export interface ThreadLoadingProps {
+    children: ReactNode;
+}
+
+export function ThreadLoading({ children }: ThreadLoadingProps) {
+    const { isStreaming } = useThread();
+    if (!isStreaming) return null;
+    return <>{children}</>;
+}

package/src/primitives/thread/thread-messages.tsx

@@ -0,0 +1,12 @@
+import React, { type ReactNode } from "react";
+import type { UIMessage } from "ai";
+import { useThread } from "./use-thread";
+
+export interface ThreadMessagesProps {
+    children: (message: UIMessage, index: number) => ReactNode;
+}
+
+export function ThreadMessages({ children }: ThreadMessagesProps) {
+    const { messages } = useThread();
+    return <>{messages.map((message, index) => children(message, index))}</>;
+}

package/src/primitives/thread/thread-root.tsx

@@ -0,0 +1,28 @@
+import React, { useRef, type ReactNode } from "react";
+import { useKognitiveContext } from "../../context/kognitive-context";
+import { ThreadContextProvider } from "./use-thread";
+
+export interface ThreadRootProps {
+    className?: string;
+    children: ReactNode;
+}
+
+export function ThreadRoot({ className, children }: ThreadRootProps) {
+    const { messages, status, isStreaming, send, stop } = useKognitiveContext();
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    return (
+        <ThreadContextProvider
+            value={{ messages, status, isStreaming, send, stop }}
+        >
+            <div
+                ref={containerRef}
+                className={className}
+                data-status={status}
+                data-streaming={isStreaming || undefined}
+            >
+                {children}
+            </div>
+        </ThreadContextProvider>
+    );
+}

package/src/primitives/thread/thread-scroll-to-bottom.tsx

@@ -0,0 +1,26 @@
+import React, { useCallback, type ReactNode } from "react";
+
+export interface ThreadScrollToBottomProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+export function ThreadScrollToBottom({ className, children }: ThreadScrollToBottomProps) {
+    const scrollToBottom = useCallback(() => {
+        const container = document.querySelector("[data-kognitive-thread-root]");
+        if (container) {
+            container.scrollTop = container.scrollHeight;
+        }
+    }, []);
+
+    return (
+        <button
+            type="button"
+            className={className}
+            onClick={scrollToBottom}
+            aria-label="Scroll to bottom"
+        >
+            {children ?? "↓"}
+        </button>
+    );
+}

package/src/primitives/thread/thread-suggestions.tsx

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from "react";
+import { useKognitiveContext } from "../../context/kognitive-context";
+
+export interface ThreadSuggestionsProps {
+    className?: string;
+    children?: (suggestions: string[], send: (text: string) => void) => ReactNode;
+}
+
+export function ThreadSuggestions({ className, children }: ThreadSuggestionsProps) {
+    const { suggestions, send, isStreaming } = useKognitiveContext();
+    if (suggestions.length === 0 || isStreaming) return null;
+
+    if (children) {
+        return <>{children(suggestions, send)}</>;
+    }
+
+    return (
+        <div className={className} data-suggestions>
+            {suggestions.map((suggestion, i) => (
+                <button
+                    key={i}
+                    type="button"
+                    onClick={() => send(suggestion)}
+                    data-suggestion
+                >
+                    {suggestion}
+                </button>
+            ))}
+        </div>
+    );
+}

package/src/primitives/thread/use-thread.ts

@@ -0,0 +1,16 @@
+import { createContext } from "../../utils/create-context";
+import type { UIMessage, ChatStatus } from "ai";
+
+export interface ThreadContextValue {
+    messages: UIMessage[];
+    status: ChatStatus;
+    isStreaming: boolean;
+    send: (text: string) => void;
+    stop: () => void;
+}
+
+export const [
+    ThreadContextProvider,
+    useThread,
+    ThreadContext,
+] = createContext<ThreadContextValue>("Thread");

package/src/primitives/thread-list/index.ts

@@ -0,0 +1,13 @@
+import { ThreadListRoot } from "./thread-list-root";
+import { ThreadListItems } from "./thread-list-items";
+import { ThreadListItem } from "./thread-list-item";
+import { ThreadListNew } from "./thread-list-new";
+
+export const ThreadListPrimitive = {
+    Root: ThreadListRoot,
+    Items: ThreadListItems,
+    Item: ThreadListItem,
+    New: ThreadListNew,
+};
+
+export { useThreadList } from "./use-thread-list";