@pikku/assistant-ui 0.12.0 → 0.12.1

package/dist/esm/index.d.ts

@@ -1,4 +1,4 @@
-export { usePikkuAgentRuntime } from './use-pikku-agent-runtime.js';
-export type { PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js';
+export { usePikkuAgentRuntime, usePikkuAgentNonStreamingRuntime, PikkuApprovalContext, usePikkuApproval, convertDbMessages, isDeniedResult, resolvePikkuToolStatus, } from './use-pikku-agent-runtime.js';
+export type { PikkuAgentRuntimeOptions, PendingApproval, PikkuApprovalContextValue, PikkuToolStatusType, PikkuToolStatus, } 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

@@ -1,2 +1,2 @@
-export { usePikkuAgentRuntime } from './use-pikku-agent-runtime.js';
+export { usePikkuAgentRuntime, usePikkuAgentNonStreamingRuntime, PikkuApprovalContext, usePikkuApproval, convertDbMessages, isDeniedResult, resolvePikkuToolStatus, } from './use-pikku-agent-runtime.js';
 export { PikkuAgentChat } from './pikku-agent-chat.js';

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

@@ -1,5 +1,11 @@
 import { type PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js';
 export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
     emptyMessage?: string;
+    /** Hide tool calls from the chat display.
+     *  - `true`: hide all non-approval tool calls
+     *  - `string[]`: hide tool calls matching these names
+     */
+    hideToolCalls?: boolean | string[];
+    dark?: boolean;
 }
 export declare function PikkuAgentChat(props: PikkuAgentChatProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,78 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { createContext, useContext, useState, useMemo } from 'react';
+import Markdown from 'react-markdown';
 import { AssistantRuntimeProvider, ThreadPrimitive, MessagePrimitive, ComposerPrimitive, } from '@assistant-ui/react';
-import { usePikkuAgentRuntime, } from './use-pikku-agent-runtime.js';
-const ToolCallDisplay = ({ toolName, args, result, status, addResult }) => {
+import { usePikkuAgentRuntime, PikkuApprovalContext, usePikkuApproval, resolvePikkuToolStatus, } from './use-pikku-agent-runtime.js';
+const lightColors = {
+    bg: '#ffffff',
+    userBubble: '#e3f2fd',
+    assistantBubble: '#f5f5f5',
+    text: '#1a1a1a',
+    textMuted: '#888',
+    border: '#ddd',
+    codeBg: '#f5f5f5',
+    inputBg: 'transparent',
+    sendBg: '#1976d2',
+    sendColor: '#fff',
+    approvalBg: '#fef9e7',
+    approvalBorder: '#e9a211',
+    successBg: '#e8f5e9',
+    successColor: '#2e7d32',
+    errorBg: '#ffebee',
+    errorColor: '#c62828',
+};
+const darkColors = {
+    bg: 'transparent',
+    userBubble: 'rgba(0, 230, 138, 0.1)',
+    assistantBubble: '#1e1e2e',
+    text: '#e0e0e8',
+    textMuted: '#8888a0',
+    border: '#2a2a3e',
+    codeBg: '#0e0e16',
+    inputBg: 'transparent',
+    sendBg: '#00cc7a',
+    sendColor: '#0a0a0f',
+    approvalBg: 'rgba(233, 162, 17, 0.1)',
+    approvalBorder: '#e9a211',
+    successBg: 'rgba(0, 230, 138, 0.1)',
+    successColor: '#00e68a',
+    errorBg: 'rgba(220, 38, 38, 0.1)',
+    errorColor: '#f87171',
+};
+const ColorsContext = createContext(lightColors);
+const HideToolCallsContext = createContext(undefined);
+function shouldHideToolCall(hideToolCalls, toolName) {
+    if (!hideToolCalls)
+        return false;
+    if (hideToolCalls === true)
+        return true;
+    return hideToolCalls.includes(toolName);
+}
+const ToolCallDisplay = ({ toolCallId, toolName, args, result, status, addResult }) => {
+    const colors = useContext(ColorsContext);
+    const hideToolCalls = useContext(HideToolCallsContext);
+    const { handleApproval } = usePikkuApproval();
     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);
+    // Hide responded approval tool calls
+    if (isApproval && responded && shouldHideToolCall(hideToolCalls, toolName)) {
+        return null;
+    }
+    // Hide non-approval tool calls
+    if (!isApproval && shouldHideToolCall(hideToolCalls, toolName)) {
+        return null;
+    }
     if (isApproval && !responded) {
         return (_jsxs("div", { style: {
-                border: '1px solid #e9a211',
+                border: `1px solid ${colors.approvalBorder}`,
                 borderRadius: 6,
                 padding: 12,
                 margin: '4px 0',
-                backgroundColor: '#fef9e7',
+                backgroundColor: colors.approvalBg,
             }, children: [_jsx("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
@@ -23,40 +80,44 @@ const ToolCallDisplay = ({ toolName, args, result, status, addResult }) => {
                         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: {
+                        color: colors.text,
+                    }, children: "Approval required" }), approvalReason && (_jsx("div", { style: { fontSize: 13, marginBottom: 4, color: colors.text }, children: approvalReason })), _jsxs("div", { style: { fontSize: 12, color: colors.textMuted, marginBottom: 4 }, children: ["The agent wants to call ", _jsx("code", { children: toolName })] }), _jsx("pre", { style: {
                         fontSize: 11,
-                        background: '#f5f5f5',
+                        background: colors.codeBg,
                         padding: 8,
                         borderRadius: 4,
                         overflow: 'auto',
                         marginBottom: 8,
+                        color: colors.text,
                     }, children: JSON.stringify(displayArgs, null, 2) }), _jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsx("button", { onClick: () => {
                                 setResponded('approved');
+                                handleApproval(toolCallId, true);
                                 addResult?.({ approved: true });
                             }, style: {
                                 padding: '4px 12px',
                                 fontSize: 12,
-                                border: '1px solid #2e7d32',
+                                border: `1px solid ${colors.successColor}`,
                                 borderRadius: 4,
-                                background: '#e8f5e9',
-                                color: '#2e7d32',
+                                background: colors.successBg,
+                                color: colors.successColor,
                                 cursor: 'pointer',
                             }, children: "Approve" }), _jsx("button", { onClick: () => {
                                 setResponded('denied');
+                                handleApproval(toolCallId, false);
                                 addResult?.({ approved: false });
                             }, style: {
                                 padding: '4px 12px',
                                 fontSize: 12,
-                                border: '1px solid #c62828',
+                                border: `1px solid ${colors.errorColor}`,
                                 borderRadius: 4,
-                                background: '#ffebee',
-                                color: '#c62828',
+                                background: colors.errorBg,
+                                color: colors.errorColor,
                                 cursor: 'pointer',
                             }, children: "Deny" })] })] }));
     }
     if (isApproval && responded) {
         return (_jsxs("div", { style: {
-                border: '1px solid #ddd',
+                border: `1px solid ${colors.border}`,
                 borderRadius: 6,
                 padding: 8,
                 margin: '4px 0',
@@ -64,16 +125,17 @@ const ToolCallDisplay = ({ toolName, args, result, status, addResult }) => {
                 alignItems: 'center',
                 gap: 8,
                 fontSize: 13,
+                color: colors.text,
             }, 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',
+                        background: responded === 'approved' ? colors.successBg : colors.errorBg,
+                        color: responded === 'approved' ? colors.successColor : colors.errorColor,
                     }, children: responded })] }));
     }
     return (_jsxs("div", { style: {
-            border: '1px solid #ddd',
+            border: `1px solid ${colors.border}`,
             borderRadius: 6,
             padding: 8,
             margin: '4px 0',
@@ -87,133 +149,184 @@ const ToolCallDisplay = ({ toolName, args, result, status, addResult }) => {
                     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: {
+                    color: colors.text,
+                }, 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: colors.textMuted }, children: "running..." })), status.type === 'error' && (_jsx("span", { style: {
+                            fontSize: 11,
+                            padding: '1px 5px',
+                            borderRadius: 3,
+                            background: colors.errorBg,
+                            color: colors.errorColor,
+                        }, children: "error" })), status.type === 'denied' && (_jsx("span", { style: {
+                            fontSize: 11,
+                            padding: '1px 5px',
+                            borderRadius: 3,
+                            background: colors.errorBg,
+                            color: colors.errorColor,
+                        }, children: "denied" })), status.type === 'completed' && (_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: {
+                            background: colors.successBg,
+                            color: colors.successColor,
+                        }, children: "done" }))] }), expanded && (_jsxs("div", { style: { marginTop: 8 }, children: [_jsx("div", { style: { fontSize: 12, color: colors.textMuted, marginBottom: 2 }, children: "Arguments:" }), _jsx("pre", { style: {
                             fontSize: 11,
-                            background: '#f5f5f5',
+                            background: colors.codeBg,
                             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: {
+                            color: colors.text,
+                        }, children: JSON.stringify(displayArgs, null, 2) }), result !== undefined && (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontSize: 12, color: colors.textMuted, marginTop: 8, marginBottom: 2 }, children: "Result:" }), _jsx("pre", { style: {
                                     fontSize: 11,
-                                    background: '#f5f5f5',
+                                    background: colors.codeBg,
                                     padding: 8,
                                     borderRadius: 4,
                                     overflow: 'auto',
+                                    color: colors.text,
                                 }, 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,
+const MarkdownText = ({ text, colors }) => {
+    const components = useMemo(() => ({
+        p: ({ children }) => (_jsx("p", { style: { margin: '0 0 8px', fontSize: 14, lineHeight: 1.6, color: colors.text }, children: children })),
+        strong: ({ children }) => (_jsx("strong", { style: { fontWeight: 600, color: colors.text }, children: children })),
+        em: ({ children }) => (_jsx("em", { style: { color: colors.text }, children: children })),
+        ul: ({ children }) => (_jsx("ul", { style: { margin: '4px 0 8px', paddingLeft: 20, fontSize: 14, color: colors.text }, children: children })),
+        ol: ({ children }) => (_jsx("ol", { style: { margin: '4px 0 8px', paddingLeft: 20, fontSize: 14, color: colors.text }, children: children })),
+        li: ({ children }) => (_jsx("li", { style: { marginBottom: 2, lineHeight: 1.6 }, children: children })),
+        code: ({ children, className }) => {
+            const isBlock = className?.startsWith('language-');
+            if (isBlock) {
+                return (_jsx("pre", { style: { background: colors.codeBg, padding: 10, borderRadius: 4, overflow: 'auto', margin: '4px 0 8px', fontSize: 12 }, children: _jsx("code", { style: { color: colors.text }, children: children }) }));
+            }
+            return (_jsx("code", { style: { background: colors.codeBg, padding: '1px 4px', borderRadius: 3, fontSize: 13, color: colors.text }, children: children }));
+        },
+        pre: ({ children }) => _jsx(_Fragment, { children: children }),
+        h1: ({ children }) => _jsx("h3", { style: { margin: '8px 0 4px', fontSize: 16, fontWeight: 600, color: colors.text }, children: children }),
+        h2: ({ children }) => _jsx("h4", { style: { margin: '8px 0 4px', fontSize: 15, fontWeight: 600, color: colors.text }, children: children }),
+        h3: ({ children }) => _jsx("h5", { style: { margin: '8px 0 4px', fontSize: 14, fontWeight: 600, color: colors.text }, children: children }),
+        a: ({ href, children }) => (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", style: { color: colors.textMuted, textDecoration: 'underline' }, children: children })),
+    }), [colors]);
+    return _jsx(Markdown, { components: components, children: text });
+};
+const UserMessage = () => {
+    const colors = useContext(ColorsContext);
+    return (_jsx("div", { style: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            width: '100%',
+        }, children: _jsxs("div", { style: { maxWidth: '80%' }, children: [_jsx("div", { style: {
+                        fontSize: 12,
+                        color: colors.textMuted,
+                        marginBottom: 4,
+                        textAlign: 'right',
+                    }, children: "You" }), _jsx("div", { style: {
+                        padding: 12,
+                        borderRadius: 12,
+                        backgroundColor: colors.userBubble,
+                    }, children: _jsx(MessagePrimitive.Content, { components: {
+                            Text: ({ text }) => (_jsx("span", { style: { fontSize: 14, whiteSpace: 'pre-wrap', color: colors.text }, children: text })),
+                        } }) })] }) }));
+};
+const AssistantMessage = () => {
+    const colors = useContext(ColorsContext);
+    return (_jsx("div", { style: {
+            display: 'flex',
+            justifyContent: 'flex-start',
+            width: '100%',
+        }, children: _jsxs("div", { style: { maxWidth: '80%' }, children: [_jsx("div", { style: { fontSize: 12, color: colors.textMuted, marginBottom: 4 }, children: "Assistant" }), _jsxs("div", { style: {
+                        padding: 12,
+                        borderRadius: 12,
+                        backgroundColor: colors.assistantBubble,
+                    }, children: [_jsx(MessagePrimitive.Content, { components: {
+                                Text: ({ text }) => (_jsx(MarkdownText, { text: text, colors: colors })),
+                                tools: {
+                                    Fallback: (props) => (_jsx(ToolCallDisplay, { toolCallId: props.toolCallId, toolName: props.toolName, args: props.args, result: props.result, status: resolvePikkuToolStatus(props.status, props.result), 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: colors.textMuted,
+                                    }, children: "Thinking..." }) }) })] })] }) }));
+};
+const PikkuComposer = ({ disabled, }) => {
+    const colors = useContext(ColorsContext);
+    return (_jsx("div", { style: { padding: '8px 0 16px' }, children: _jsx(ComposerPrimitive.Root, { children: _jsxs("div", { style: {
+                    border: `1px solid ${colors.border}`,
                     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: {
+                    overflow: 'hidden',
                     display: 'flex',
-                    flexDirection: 'column',
-                    flex: 1,
-                    minHeight: 0,
-                }, children: [_jsx(ThreadPrimitive.Viewport, { style: {
+                    alignItems: 'flex-end',
+                    padding: '6px 12px',
+                    gap: 8,
+                    ...(disabled ? { opacity: 0.5, pointerEvents: 'none' } : {}),
+                }, children: [_jsx(ComposerPrimitive.Input, { placeholder: disabled ? 'Respond to approval request above...' : 'Message...', rows: 2, disabled: disabled, style: {
                             flex: 1,
-                            minHeight: 0,
-                            overflowY: 'auto',
-                        }, children: _jsxs("div", { style: {
-                                maxWidth: 768,
-                                margin: '0 auto',
-                                padding: 16,
+                            border: 'none',
+                            outline: 'none',
+                            resize: 'none',
+                            fontSize: 14,
+                            fontFamily: 'inherit',
+                            padding: '4px 0',
+                            background: colors.inputBg,
+                            color: colors.text,
+                        } }), _jsx(ComposerPrimitive.Send, { disabled: disabled, style: {
+                            width: 28,
+                            height: 28,
+                            borderRadius: '50%',
+                            border: 'none',
+                            background: disabled ? colors.textMuted : colors.sendBg,
+                            color: colors.sendColor,
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            flexShrink: 0,
+                            marginBottom: 2,
+                            fontSize: 14,
+                        }, children: "\u25B6" })] }) }) }));
+};
+export function PikkuAgentChat(props) {
+    const { emptyMessage, hideToolCalls, dark, ...runtimeOptions } = props;
+    const { runtime, isAwaitingApproval, pendingApprovals, handleApproval } = usePikkuAgentRuntime(runtimeOptions);
+    const colors = dark ? darkColors : lightColors;
+    return (_jsx(ColorsContext.Provider, { value: colors, children: _jsx(PikkuApprovalContext.Provider, { value: { pendingApprovals, handleApproval }, children: _jsx(HideToolCallsContext.Provider, { value: hideToolCalls, children: _jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx("div", { style: {
+                            height: '100%',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            background: colors.bg,
+                        }, children: _jsxs(ThreadPrimitive.Root, { style: {
                                 display: 'flex',
                                 flexDirection: 'column',
-                                gap: 16,
-                            }, children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { style: {
+                                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',
-                                            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, {}) })] }) }) }));
+                                            flexDirection: 'column',
+                                            gap: 16,
+                                        }, children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { style: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        minHeight: 300,
+                                                        color: colors.textMuted,
+                                                        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, { disabled: isAwaitingApproval }) })] }) }) }) }) }) }));
 }

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

@@ -1,13 +1,47 @@
+import { type ThreadMessageLike } from '@assistant-ui/react';
 export interface PikkuAgentRuntimeOptions {
     api: string;
-    threadId?: string | null;
+    agentName: string;
+    threadId: string;
+    resourceId: string;
     initialMessages?: any[];
-    onThreadCreated?: (id: string) => void;
     onFinish?: () => void;
-    onApprovalRequest?: (data: {
-        toolCallId: string;
-    }) => void;
     credentials?: RequestCredentials;
     headers?: Record<string, string>;
+    model?: string;
+    temperature?: number;
 }
-export declare function usePikkuAgentRuntime(options: PikkuAgentRuntimeOptions): import("@assistant-ui/react").AssistantRuntime;
+export interface PendingApproval {
+    toolCallId: string;
+    toolName: string;
+    args: unknown;
+    reason?: string;
+    runId: string;
+}
+export interface PikkuApprovalContextValue {
+    pendingApprovals: PendingApproval[];
+    handleApproval: (toolCallId: string, approved: boolean) => void;
+}
+export declare const PikkuApprovalContext: import("react").Context<PikkuApprovalContextValue>;
+export declare const usePikkuApproval: () => PikkuApprovalContextValue;
+export declare function isDeniedResult(result: unknown): boolean;
+export type PikkuToolStatusType = 'running' | 'requires-action' | 'completed' | 'denied' | 'error';
+export type PikkuToolStatus = {
+    type: PikkuToolStatusType;
+};
+export declare function resolvePikkuToolStatus(status: {
+    type: string;
+}, result?: unknown): PikkuToolStatus;
+export declare const convertDbMessages: (dbMessages: any[]) => ThreadMessageLike[];
+export declare function usePikkuAgentRuntime(options: PikkuAgentRuntimeOptions): {
+    runtime: import("@assistant-ui/react").AssistantRuntime;
+    pendingApprovals: PendingApproval[];
+    isAwaitingApproval: boolean;
+    handleApproval: (toolCallId: string, approved: boolean) => void;
+};
+export declare function usePikkuAgentNonStreamingRuntime(options: PikkuAgentRuntimeOptions): {
+    runtime: import("@assistant-ui/react").AssistantRuntime;
+    pendingApprovals: PendingApproval[];
+    isAwaitingApproval: boolean;
+    handleApproval: (toolCallId: string, approved: boolean) => void;
+};