@pikku/assistant-ui 0.12.0

package/dist/cjs/index.d.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';

package/dist/cjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PikkuAgentChat = exports.usePikkuAgentRuntime = void 0;
+var use_pikku_agent_runtime_js_1 = require("./use-pikku-agent-runtime.js");
+Object.defineProperty(exports, "usePikkuAgentRuntime", { enumerable: true, get: function () { return use_pikku_agent_runtime_js_1.usePikkuAgentRuntime; } });
+var pikku_agent_chat_js_1 = require("./pikku-agent-chat.js");
+Object.defineProperty(exports, "PikkuAgentChat", { enumerable: true, get: function () { return pikku_agent_chat_js_1.PikkuAgentChat; } });

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

package/dist/cjs/pikku-agent-chat.d.ts

@@ -0,0 +1,5 @@
+import { type PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js';
+export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
+    emptyMessage?: string;
+}
+export declare function PikkuAgentChat(props: PikkuAgentChatProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,232 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PikkuAgentChat = PikkuAgentChat;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@assistant-ui/react");
+const use_pikku_agent_runtime_js_1 = require("./use-pikku-agent-runtime.js");
+const ToolCallDisplay = ({ toolName, args, result, status, addResult }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const isApproval = status.type === 'requires-action';
+    const approvalReason = args === null || args === void 0 ? void 0 : args.__approvalReason;
+    const displayArgs = Object.assign({}, args);
+    delete displayArgs.__approvalReason;
+    const [responded, setResponded] = (0, react_1.useState)(null);
+    if (isApproval && !responded) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                border: '1px solid #e9a211',
+                borderRadius: 6,
+                padding: 12,
+                margin: '4px 0',
+                backgroundColor: '#fef9e7',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 6,
+                        marginBottom: 8,
+                        fontWeight: 600,
+                        fontSize: 13,
+                    }, children: "Approval required" }), approvalReason && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: 13, marginBottom: 4 }, children: approvalReason })), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: 12, color: '#666', marginBottom: 4 }, children: ["The agent wants to call ", (0, jsx_runtime_1.jsx)("code", { children: toolName })] }), (0, jsx_runtime_1.jsx)("pre", { style: {
+                        fontSize: 11,
+                        background: '#f5f5f5',
+                        padding: 8,
+                        borderRadius: 4,
+                        overflow: 'auto',
+                        marginBottom: 8,
+                    }, children: JSON.stringify(displayArgs, null, 2) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 8 }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                setResponded('approved');
+                                addResult === null || addResult === void 0 ? void 0 : addResult({ approved: true });
+                            }, style: {
+                                padding: '4px 12px',
+                                fontSize: 12,
+                                border: '1px solid #2e7d32',
+                                borderRadius: 4,
+                                background: '#e8f5e9',
+                                color: '#2e7d32',
+                                cursor: 'pointer',
+                            }, children: "Approve" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                setResponded('denied');
+                                addResult === null || addResult === void 0 ? void 0 : 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 ((0, jsx_runtime_1.jsxs)("div", { style: {
+                border: '1px solid #ddd',
+                borderRadius: 6,
+                padding: 8,
+                margin: '4px 0',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                fontSize: 13,
+            }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 500 }, children: toolName }), (0, jsx_runtime_1.jsx)("span", { style: {
+                        fontSize: 11,
+                        padding: '2px 6px',
+                        borderRadius: 3,
+                        background: responded === 'approved' ? '#e8f5e9' : '#ffebee',
+                        color: responded === 'approved' ? '#2e7d32' : '#c62828',
+                    }, children: responded })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            border: '1px solid #ddd',
+            borderRadius: 6,
+            padding: 8,
+            margin: '4px 0',
+        }, children: [(0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { children: expanded ? '\u25BC' : '\u25B6' }), (0, jsx_runtime_1.jsx)("span", { style: { fontFamily: 'monospace', fontWeight: 500 }, children: toolName }), status.type === 'running' && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 11, color: '#888' }, children: "running..." })), status.type === 'complete' && ((0, jsx_runtime_1.jsx)("span", { style: {
+                            fontSize: 11,
+                            padding: '1px 5px',
+                            borderRadius: 3,
+                            background: '#e8f5e9',
+                            color: '#2e7d32',
+                        }, children: "done" }))] }), expanded && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: 8 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: 12, color: '#888', marginBottom: 2 }, children: "Arguments:" }), (0, jsx_runtime_1.jsx)("pre", { style: {
+                            fontSize: 11,
+                            background: '#f5f5f5',
+                            padding: 8,
+                            borderRadius: 4,
+                            overflow: 'auto',
+                        }, children: JSON.stringify(displayArgs, null, 2) }), result !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: 12, color: '#888', marginTop: 8, marginBottom: 2 }, children: "Result:" }), (0, jsx_runtime_1.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 = () => ((0, jsx_runtime_1.jsx)("div", { style: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        width: '100%',
+    }, children: (0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: '80%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    fontSize: 12,
+                    color: '#888',
+                    marginBottom: 4,
+                    textAlign: 'right',
+                }, children: "You" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    padding: 12,
+                    borderRadius: 12,
+                    backgroundColor: '#e3f2fd',
+                }, children: (0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.Content, { components: {
+                        Text: ({ text }) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 14, whiteSpace: 'pre-wrap' }, children: text })),
+                    } }) })] }) }));
+const AssistantMessage = () => ((0, jsx_runtime_1.jsx)("div", { style: {
+        display: 'flex',
+        justifyContent: 'flex-start',
+        width: '100%',
+    }, children: (0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: '80%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: 12, color: '#888', marginBottom: 4 }, children: "Assistant" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: 12,
+                    borderRadius: 12,
+                    backgroundColor: '#f5f5f5',
+                }, children: [(0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.Content, { components: {
+                            Text: ({ text }) => ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: 14, whiteSpace: 'pre-wrap' }, children: text })),
+                            tools: {
+                                Fallback: (props) => ((0, jsx_runtime_1.jsx)(ToolCallDisplay, { toolName: props.toolName, args: props.args, result: props.result, status: props.status, addResult: props.addResult })),
+                            },
+                        } }), (0, jsx_runtime_1.jsx)(react_2.MessagePrimitive.If, { last: true, children: (0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.If, { running: true, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 6,
+                                    marginTop: 8,
+                                    fontSize: 13,
+                                    color: '#888',
+                                }, children: "Thinking..." }) }) })] })] }) }));
+const PikkuComposer = () => ((0, jsx_runtime_1.jsx)("div", { style: { padding: '8px 0 16px' }, children: (0, jsx_runtime_1.jsx)(react_2.ComposerPrimitive.Root, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                border: '1px solid #ddd',
+                borderRadius: 12,
+                overflow: 'hidden',
+                display: 'flex',
+                alignItems: 'flex-end',
+                padding: '6px 12px',
+                gap: 8,
+            }, children: [(0, jsx_runtime_1.jsx)(react_2.ComposerPrimitive.Input, { placeholder: "Message...", rows: 2, style: {
+                        flex: 1,
+                        border: 'none',
+                        outline: 'none',
+                        resize: 'none',
+                        fontSize: 14,
+                        fontFamily: 'inherit',
+                        padding: '4px 0',
+                        background: 'transparent',
+                    } }), (0, jsx_runtime_1.jsx)(react_2.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" })] }) }) }));
+function PikkuAgentChat(props) {
+    const { emptyMessage } = props, runtimeOptions = __rest(props, ["emptyMessage"]);
+    const runtime = (0, use_pikku_agent_runtime_js_1.usePikkuAgentRuntime)(runtimeOptions);
+    return ((0, jsx_runtime_1.jsx)(react_2.AssistantRuntimeProvider, { runtime: runtime, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: (0, jsx_runtime_1.jsxs)(react_2.ThreadPrimitive.Root, { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    minHeight: 0,
+                }, children: [(0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Viewport, { style: {
+                            flex: 1,
+                            minHeight: 0,
+                            overflowY: 'auto',
+                        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                                maxWidth: 768,
+                                margin: '0 auto',
+                                padding: 16,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 16,
+                            }, children: [(0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Empty, { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            minHeight: 300,
+                                            color: '#888',
+                                            textAlign: 'center',
+                                            fontSize: 14,
+                                        }, children: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : (props.threadId
+                                            ? 'Send a message to start the conversation.'
+                                            : 'Start a new conversation.') }) }), (0, jsx_runtime_1.jsx)(react_2.ThreadPrimitive.Messages, { components: {
+                                        UserMessage,
+                                        AssistantMessage,
+                                    } })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: 768, margin: '0 auto', width: '100%', padding: '0 16px' }, children: (0, jsx_runtime_1.jsx)(PikkuComposer, {}) })] }) }) }));
+}

package/dist/cjs/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/cjs/use-pikku-agent-runtime.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePikkuAgentRuntime = usePikkuAgentRuntime;
+const react_1 = require("react");
+const react_data_stream_1 = require("@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] = Object.assign(Object.assign({}, 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;
+};
+function usePikkuAgentRuntime(options) {
+    const { api, threadId = null, initialMessages: rawInitialMessages, onThreadCreated, onFinish, onApprovalRequest, credentials, headers, } = options;
+    const threadIdRef = (0, react_1.useRef)(threadId);
+    threadIdRef.current = threadId;
+    const justCreatedThreadRef = (0, react_1.useRef)(false);
+    const bodyFn = (0, react_1.useCallback)(() => {
+        let currentThreadId = threadIdRef.current;
+        if (!currentThreadId) {
+            currentThreadId = crypto.randomUUID();
+            justCreatedThreadRef.current = true;
+            onThreadCreated === null || onThreadCreated === void 0 ? void 0 : onThreadCreated(currentThreadId);
+        }
+        return { threadId: currentThreadId };
+    }, [onThreadCreated]);
+    const onData = (0, react_1.useCallback)((event) => {
+        if (event.name === 'approval-request') {
+            const approval = event.data;
+            onApprovalRequest === null || onApprovalRequest === void 0 ? void 0 : onApprovalRequest({
+                toolCallId: approval.toolCallId,
+            });
+        }
+    }, [onApprovalRequest]);
+    const onFinishCb = (0, react_1.useCallback)(() => {
+        onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+    }, [onFinish]);
+    const initialMessages = (0, react_1.useMemo)(() => (rawInitialMessages ? convertDbMessages(rawInitialMessages) : []), [rawInitialMessages]);
+    const runtime = (0, react_data_stream_1.useDataStreamRuntime)({
+        api,
+        protocol: 'ui-message-stream',
+        body: bodyFn,
+        onData,
+        onFinish: onFinishCb,
+        initialMessages,
+        credentials,
+        headers,
+    });
+    const prevThreadIdRef = (0, react_1.useRef)(threadId);
+    const hasResetRef = (0, react_1.useRef)(false);
+    (0, react_1.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/esm/index.d.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';

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { usePikkuAgentRuntime } from './use-pikku-agent-runtime.js';
+export { PikkuAgentChat } from './pikku-agent-chat.js';

package/dist/esm/package.json

@@ -0,0 +1 @@
+{"type": "module"}

package/dist/esm/pikku-agent-chat.d.ts

@@ -0,0 +1,5 @@
+import { type PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js';
+export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
+    emptyMessage?: string;
+}
+export declare function PikkuAgentChat(props: PikkuAgentChatProps): import("react/jsx-runtime").JSX.Element;