@pikku/assistant-ui 0.12.0

package/dist/esm/pikku-agent-chat.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AssistantRuntimeProvider, ThreadPrimitive, MessagePrimitive, ComposerPrimitive, } from '@assistant-ui/react';
+import { usePikkuAgentRuntime, } from './use-pikku-agent-runtime.js';
+const ToolCallDisplay = ({ toolName, args, result, status, addResult }) => {
+    const [expanded, setExpanded] = useState(false);
+    const isApproval = status.type === 'requires-action';
+    const approvalReason = args?.__approvalReason;
+    const displayArgs = { ...args };
+    delete displayArgs.__approvalReason;
+    const [responded, setResponded] = useState(null);
+    if (isApproval && !responded) {
+        return (_jsxs("div", { style: {
+                border: '1px solid #e9a211',
+                borderRadius: 6,
+                padding: 12,
+                margin: '4px 0',
+                backgroundColor: '#fef9e7',
+            }, children: [_jsx("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 6,
+                        marginBottom: 8,
+                        fontWeight: 600,
+                        fontSize: 13,
+                    }, children: "Approval required" }), approvalReason && (_jsx("div", { style: { fontSize: 13, marginBottom: 4 }, children: approvalReason })), _jsxs("div", { style: { fontSize: 12, color: '#666', marginBottom: 4 }, children: ["The agent wants to call ", _jsx("code", { children: toolName })] }), _jsx("pre", { style: {
+                        fontSize: 11,
+                        background: '#f5f5f5',
+                        padding: 8,
+                        borderRadius: 4,
+                        overflow: 'auto',
+                        marginBottom: 8,
+                    }, children: JSON.stringify(displayArgs, null, 2) }), _jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx("button", { onClick: () => {
+                                setResponded('approved');
+                                addResult?.({ approved: true });
+                            }, style: {
+                                padding: '4px 12px',
+                                fontSize: 12,
+                                border: '1px solid #2e7d32',
+                                borderRadius: 4,
+                                background: '#e8f5e9',
+                                color: '#2e7d32',
+                                cursor: 'pointer',
+                            }, children: "Approve" }), _jsx("button", { onClick: () => {
+                                setResponded('denied');
+                                addResult?.({ approved: false });
+                            }, style: {
+                                padding: '4px 12px',
+                                fontSize: 12,
+                                border: '1px solid #c62828',
+                                borderRadius: 4,
+                                background: '#ffebee',
+                                color: '#c62828',
+                                cursor: 'pointer',
+                            }, children: "Deny" })] })] }));
+    }
+    if (isApproval && responded) {
+        return (_jsxs("div", { style: {
+                border: '1px solid #ddd',
+                borderRadius: 6,
+                padding: 8,
+                margin: '4px 0',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                fontSize: 13,
+            }, children: [_jsx("span", { style: { fontWeight: 500 }, children: toolName }), _jsx("span", { style: {
+                        fontSize: 11,
+                        padding: '2px 6px',
+                        borderRadius: 3,
+                        background: responded === 'approved' ? '#e8f5e9' : '#ffebee',
+                        color: responded === 'approved' ? '#2e7d32' : '#c62828',
+                    }, children: responded })] }));
+    }
+    return (_jsxs("div", { style: {
+            border: '1px solid #ddd',
+            borderRadius: 6,
+            padding: 8,
+            margin: '4px 0',
+        }, children: [_jsxs("button", { onClick: () => setExpanded((e) => !e), style: {
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    width: '100%',
+                    padding: 0,
+                    fontSize: 13,
+                }, children: [_jsx("span", { children: expanded ? '\u25BC' : '\u25B6' }), _jsx("span", { style: { fontFamily: 'monospace', fontWeight: 500 }, children: toolName }), status.type === 'running' && (_jsx("span", { style: { fontSize: 11, color: '#888' }, children: "running..." })), status.type === 'complete' && (_jsx("span", { style: {
+                            fontSize: 11,
+                            padding: '1px 5px',
+                            borderRadius: 3,
+                            background: '#e8f5e9',
+                            color: '#2e7d32',
+                        }, children: "done" }))] }), expanded && (_jsxs("div", { style: { marginTop: 8 }, children: [_jsx("div", { style: { fontSize: 12, color: '#888', marginBottom: 2 }, children: "Arguments:" }), _jsx("pre", { style: {
+                            fontSize: 11,
+                            background: '#f5f5f5',
+                            padding: 8,
+                            borderRadius: 4,
+                            overflow: 'auto',
+                        }, children: JSON.stringify(displayArgs, null, 2) }), result !== undefined && (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontSize: 12, color: '#888', marginTop: 8, marginBottom: 2 }, children: "Result:" }), _jsx("pre", { style: {
+                                    fontSize: 11,
+                                    background: '#f5f5f5',
+                                    padding: 8,
+                                    borderRadius: 4,
+                                    overflow: 'auto',
+                                }, children: typeof result === 'string'
+                                    ? result
+                                    : JSON.stringify(result, null, 2) })] }))] }))] }));
+};
+const UserMessage = () => (_jsx("div", { style: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        width: '100%',
+    }, children: _jsxs("div", { style: { maxWidth: '80%' }, children: [_jsx("div", { style: {
+                    fontSize: 12,
+                    color: '#888',
+                    marginBottom: 4,
+                    textAlign: 'right',
+                }, children: "You" }), _jsx("div", { style: {
+                    padding: 12,
+                    borderRadius: 12,
+                    backgroundColor: '#e3f2fd',
+                }, children: _jsx(MessagePrimitive.Content, { components: {
+                        Text: ({ text }) => (_jsx("span", { style: { fontSize: 14, whiteSpace: 'pre-wrap' }, children: text })),
+                    } }) })] }) }));
+const AssistantMessage = () => (_jsx("div", { style: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        width: '100%',
+    }, children: _jsxs("div", { style: { maxWidth: '80%' }, children: [_jsx("div", { style: { fontSize: 12, color: '#888', marginBottom: 4 }, children: "Assistant" }), _jsxs("div", { style: {
+                    padding: 12,
+                    borderRadius: 12,
+                    backgroundColor: '#f5f5f5',
+                }, children: [_jsx(MessagePrimitive.Content, { components: {
+                            Text: ({ text }) => (_jsx("span", { style: { fontSize: 14, whiteSpace: 'pre-wrap' }, children: text })),
+                            tools: {
+                                Fallback: (props) => (_jsx(ToolCallDisplay, { toolName: props.toolName, args: props.args, result: props.result, status: props.status, addResult: props.addResult })),
+                            },
+                        } }), _jsx(MessagePrimitive.If, { last: true, children: _jsx(ThreadPrimitive.If, { running: true, children: _jsx("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 6,
+                                    marginTop: 8,
+                                    fontSize: 13,
+                                    color: '#888',
+                                }, children: "Thinking..." }) }) })] })] }) }));
+const PikkuComposer = () => (_jsx("div", { style: { padding: '8px 0 16px' }, children: _jsx(ComposerPrimitive.Root, { children: _jsxs("div", { style: {
+                border: '1px solid #ddd',
+                borderRadius: 12,
+                overflow: 'hidden',
+                display: 'flex',
+                alignItems: 'flex-end',
+                padding: '6px 12px',
+                gap: 8,
+            }, children: [_jsx(ComposerPrimitive.Input, { placeholder: "Message...", rows: 2, style: {
+                        flex: 1,
+                        border: 'none',
+                        outline: 'none',
+                        resize: 'none',
+                        fontSize: 14,
+                        fontFamily: 'inherit',
+                        padding: '4px 0',
+                        background: 'transparent',
+                    } }), _jsx(ComposerPrimitive.Send, { style: {
+                        width: 28,
+                        height: 28,
+                        borderRadius: '50%',
+                        border: 'none',
+                        background: '#1976d2',
+                        color: '#fff',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexShrink: 0,
+                        marginBottom: 2,
+                        fontSize: 14,
+                    }, children: "\u25B6" })] }) }) }));
+export function PikkuAgentChat(props) {
+    const { emptyMessage, ...runtimeOptions } = props;
+    const runtime = usePikkuAgentRuntime(runtimeOptions);
+    return (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx("div", { style: {
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: _jsxs(ThreadPrimitive.Root, { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    minHeight: 0,
+                }, children: [_jsx(ThreadPrimitive.Viewport, { style: {
+                            flex: 1,
+                            minHeight: 0,
+                            overflowY: 'auto',
+                        }, children: _jsxs("div", { style: {
+                                maxWidth: 768,
+                                margin: '0 auto',
+                                padding: 16,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 16,
+                            }, children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { style: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            minHeight: 300,
+                                            color: '#888',
+                                            textAlign: 'center',
+                                            fontSize: 14,
+                                        }, children: emptyMessage ??
+                                            (props.threadId
+                                                ? 'Send a message to start the conversation.'
+                                                : 'Start a new conversation.') }) }), _jsx(ThreadPrimitive.Messages, { components: {
+                                        UserMessage,
+                                        AssistantMessage,
+                                    } })] }) }), _jsx("div", { style: { maxWidth: 768, margin: '0 auto', width: '100%', padding: '0 16px' }, children: _jsx(PikkuComposer, {}) })] }) }) }));
+}

package/dist/esm/use-pikku-agent-runtime.d.ts

@@ -0,0 +1,13 @@
+export interface PikkuAgentRuntimeOptions {
+    api: string;
+    threadId?: string | null;
+    initialMessages?: any[];
+    onThreadCreated?: (id: string) => void;
+    onFinish?: () => void;
+    onApprovalRequest?: (data: {
+        toolCallId: string;
+    }) => void;
+    credentials?: RequestCredentials;
+    headers?: Record<string, string>;
+}
+export declare function usePikkuAgentRuntime(options: PikkuAgentRuntimeOptions): import("@assistant-ui/react").AssistantRuntime;

package/dist/esm/use-pikku-agent-runtime.js

@@ -0,0 +1,163 @@
+import { useMemo, useEffect, useRef, useCallback } from 'react';
+import { useDataStreamRuntime } from '@assistant-ui/react-data-stream';
+const convertDbMessages = (dbMessages) => {
+    const result = [];
+    let currentAssistant = null;
+    for (const msg of dbMessages) {
+        if (msg.role === 'user') {
+            if (currentAssistant) {
+                result.push(currentAssistant);
+                currentAssistant = null;
+            }
+            result.push({
+                role: 'user',
+                content: msg.content || '',
+                id: msg.id,
+                createdAt: new Date(msg.createdAt),
+            });
+            continue;
+        }
+        if (msg.role === 'tool' &&
+            currentAssistant &&
+            Array.isArray(msg.toolResults)) {
+            const parts = Array.isArray(currentAssistant.content)
+                ? [...currentAssistant.content]
+                : currentAssistant.content
+                    ? [
+                        {
+                            type: 'text',
+                            text: currentAssistant.content,
+                        },
+                    ]
+                    : [];
+            for (const tr of msg.toolResults) {
+                const tcIdx = parts.findIndex((p) => p.type === 'tool-call' && p.toolCallId === tr.id);
+                if (tcIdx !== -1) {
+                    parts[tcIdx] = {
+                        ...parts[tcIdx],
+                        result: typeof tr.result === 'string'
+                            ? tr.result
+                            : JSON.stringify(tr.result),
+                    };
+                }
+            }
+            currentAssistant = {
+                role: currentAssistant.role,
+                id: currentAssistant.id,
+                createdAt: currentAssistant.createdAt,
+                status: currentAssistant.status,
+                content: parts,
+            };
+            continue;
+        }
+        if (msg.role === 'tool')
+            continue;
+        const parts = [];
+        if (msg.content) {
+            parts.push({ type: 'text', text: msg.content });
+        }
+        if (Array.isArray(msg.toolCalls)) {
+            for (const tc of msg.toolCalls) {
+                parts.push({
+                    type: 'tool-call',
+                    toolCallId: tc.id,
+                    toolName: tc.name,
+                    args: tc.args || {},
+                });
+            }
+        }
+        if (currentAssistant) {
+            const prev = currentAssistant.content;
+            const existingParts = Array.isArray(prev)
+                ? [...prev]
+                : prev
+                    ? [{ type: 'text', text: prev }]
+                    : [];
+            currentAssistant = {
+                role: currentAssistant.role,
+                id: currentAssistant.id,
+                createdAt: currentAssistant.createdAt,
+                status: currentAssistant.status,
+                content: [...existingParts, ...parts],
+            };
+        }
+        else {
+            currentAssistant = {
+                role: 'assistant',
+                content: parts.length > 0 ? parts : '',
+                id: msg.id,
+                createdAt: new Date(msg.createdAt),
+                status: { type: 'complete', reason: 'stop' },
+            };
+        }
+    }
+    if (currentAssistant) {
+        result.push(currentAssistant);
+    }
+    return result;
+};
+export function usePikkuAgentRuntime(options) {
+    const { api, threadId = null, initialMessages: rawInitialMessages, onThreadCreated, onFinish, onApprovalRequest, credentials, headers, } = options;
+    const threadIdRef = useRef(threadId);
+    threadIdRef.current = threadId;
+    const justCreatedThreadRef = useRef(false);
+    const bodyFn = useCallback(() => {
+        let currentThreadId = threadIdRef.current;
+        if (!currentThreadId) {
+            currentThreadId = crypto.randomUUID();
+            justCreatedThreadRef.current = true;
+            onThreadCreated?.(currentThreadId);
+        }
+        return { threadId: currentThreadId };
+    }, [onThreadCreated]);
+    const onData = useCallback((event) => {
+        if (event.name === 'approval-request') {
+            const approval = event.data;
+            onApprovalRequest?.({
+                toolCallId: approval.toolCallId,
+            });
+        }
+    }, [onApprovalRequest]);
+    const onFinishCb = useCallback(() => {
+        onFinish?.();
+    }, [onFinish]);
+    const initialMessages = useMemo(() => (rawInitialMessages ? convertDbMessages(rawInitialMessages) : []), [rawInitialMessages]);
+    const runtime = useDataStreamRuntime({
+        api,
+        protocol: 'ui-message-stream',
+        body: bodyFn,
+        onData,
+        onFinish: onFinishCb,
+        initialMessages,
+        credentials,
+        headers,
+    });
+    const prevThreadIdRef = useRef(threadId);
+    const hasResetRef = useRef(false);
+    useEffect(() => {
+        if (prevThreadIdRef.current !== threadId) {
+            prevThreadIdRef.current = threadId;
+            if (justCreatedThreadRef.current) {
+                justCreatedThreadRef.current = false;
+                hasResetRef.current = true;
+                return;
+            }
+            hasResetRef.current = false;
+            if (rawInitialMessages) {
+                ;
+                runtime.thread.reset(convertDbMessages(rawInitialMessages));
+                hasResetRef.current = true;
+            }
+            else {
+                ;
+                runtime.thread.reset([]);
+            }
+        }
+        else if (!hasResetRef.current && rawInitialMessages) {
+            ;
+            runtime.thread.reset(convertDbMessages(rawInitialMessages));
+            hasResetRef.current = true;
+        }
+    }, [threadId, rawInitialMessages, runtime]);
+    return runtime;
+}

package/dist/tsconfig.cjs.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/use-pikku-agent-runtime.ts","../src/pikku-agent-chat.tsx"],"version":"5.9.3"}

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/use-pikku-agent-runtime.ts","../src/pikku-agent-chat.tsx"],"version":"5.9.3"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@pikku/assistant-ui",
+  "version": "0.12.0",
+  "author": "yasser.fadl@gmail.com",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "scripts": {
+    "tsc": "tsc",
+    "build:esm": "tsc -b && echo '{\"type\": \"module\"}' > dist/esm/package.json",
+    "build:cjs": "tsc -b tsconfig.cjs.json && echo '{\"type\": \"commonjs\"}' > dist/cjs/package.json",
+    "build": "yarn build:esm && yarn build:cjs"
+  },
+  "dependencies": {
+    "@assistant-ui/react": "^0.12.12",
+    "@assistant-ui/react-data-stream": "^0.12.5"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5.9"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { usePikkuAgentRuntime } from './use-pikku-agent-runtime.js'
+export type { PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js'
+export { PikkuAgentChat } from './pikku-agent-chat.js'
+export type { PikkuAgentChatProps } from './pikku-agent-chat.js'