@pikku/assistant-ui 0.12.4 → 0.12.6

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

@@ -73,7 +73,7 @@ function parseSSEStream(reader) {
  * Shared helper: consume an SSE stream and populate text/toolCalls.
  * Returns an array of PendingApprovals when the stream requests them, or empty when done.
  */
-function processStream(reader, text, toolCalls, yieldContent, onFinish) {
+function processStream(reader, text, toolCalls, structuredParts, yieldContent, onFinish) {
     return __awaiter(this, void 0, void 0, function* () {
         var _a, e_1, _b, _c;
         const pendingApprovals = [];
@@ -122,6 +122,31 @@ function processStream(reader, text, toolCalls, yieldContent, onFinish) {
                         }
                         break;
                     }
+                    case 'generative-ui': {
+                        const nextPart = {
+                            type: 'generative-ui',
+                            spec: event.spec,
+                        };
+                        const existingIndex = structuredParts.findIndex((part) => part.type === 'generative-ui');
+                        if (existingIndex === -1)
+                            structuredParts.push(nextPart);
+                        else
+                            structuredParts[existingIndex] = nextPart;
+                        break;
+                    }
+                    case 'data': {
+                        const nextPart = {
+                            type: 'data',
+                            name: event.name,
+                            data: event.data,
+                        };
+                        const existingIndex = structuredParts.findIndex((part) => part.type === 'data' && part.name === event.name);
+                        if (existingIndex === -1)
+                            structuredParts.push(nextPart);
+                        else
+                            structuredParts[existingIndex] = nextPart;
+                        break;
+                    }
                     case 'approval-request':
                         pendingApprovals.push({
                             toolCallId: event.toolCallId,
@@ -205,13 +230,32 @@ function resolvePikkuToolStatus(status, result) {
         return { type: 'error' };
     return { type: 'completed' };
 }
-function buildContent(text, toolCalls) {
+function buildRichContent(text, structuredParts, toolCalls) {
     const content = [];
     if (text.value)
         content.push({ type: 'text', text: text.value });
+    content.push(...structuredParts);
     content.push(...toolCalls);
     return content;
 }
+function buildContentFromAgentResult(result) {
+    const content = [];
+    if (typeof result === 'string') {
+        if (result)
+            content.push({ type: 'text', text: result });
+        return content;
+    }
+    if (!result || typeof result !== 'object')
+        return content;
+    const record = result;
+    if (typeof record.text === 'string' && record.text) {
+        content.push({ type: 'text', text: record.text });
+    }
+    if (record.ui != null) {
+        content.push({ type: 'generative-ui', spec: record.ui });
+    }
+    return content;
+}
 function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDecisionsRef, setPendingApprovalsRef, onFinishRef) {
     return {
         run(_a) {
@@ -237,6 +281,7 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                     // The last resume triggers continuation (next LLM step).
                     let lastText = { value: '' };
                     let lastToolCalls = [];
+                    let lastStructuredParts = [];
                     let nextApprovals = [];
                     for (let i = 0; i < decisions.length; i++) {
                         const decision = decisions[i];
@@ -262,8 +307,9 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                         }
                         const text = { value: '' };
                         const toolCalls = [];
+                        const structuredParts = [];
                         const reader = resumeResponse.body.getReader();
-                        const streamApprovals = yield __await(processStream(reader, text, toolCalls, () => { }, i === decisions.length - 1
+                        const streamApprovals = yield __await(processStream(reader, text, toolCalls, structuredParts, () => { }, i === decisions.length - 1
                             ? ((_d = onFinishRef.current) !== null && _d !== void 0 ? _d : undefined)
                             : undefined)
                         // Keep the last resume's output (it has continuation content)
@@ -271,12 +317,13 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                         // Keep the last resume's output (it has continuation content)
                         lastText = text;
                         lastToolCalls = toolCalls;
+                        lastStructuredParts = structuredParts;
                         if (streamApprovals.length > 0) {
                             nextApprovals = streamApprovals;
                         }
                     }
                     // Build content from the last resume's output
-                    const content = buildContent(lastText, lastToolCalls);
+                    const content = buildRichContent(lastText, lastStructuredParts, lastToolCalls);
                     if (nextApprovals.length > 0) {
                         // More approvals from continuation — show them
                         pendingApprovalsRef.current = nextApprovals;
@@ -301,7 +348,7 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                                 lastToolCalls.push(approvalToolCall);
                             }
                         }
-                        const updatedContent = buildContent(lastText, lastToolCalls);
+                        const updatedContent = buildRichContent(lastText, lastStructuredParts, lastToolCalls);
                         yield yield __await({
                             content: updatedContent,
                             status: {
@@ -332,14 +379,7 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                     response = yield __await(fetch(`${opts.api}/${opts.agentName}/stream`, {
                         method: 'POST',
                         headers: Object.assign({ 'Content-Type': 'application/json' }, opts.headers),
-                        body: JSON.stringify({
-                            agentName: opts.agentName,
-                            message: messageText,
-                            threadId: opts.threadId,
-                            resourceId: opts.resourceId,
-                            model: opts.model,
-                            temperature: opts.temperature,
-                        }),
+                        body: JSON.stringify(Object.assign({ agentName: opts.agentName, message: messageText, threadId: opts.threadId, resourceId: opts.resourceId, model: opts.model, temperature: opts.temperature }, (opts.context ? { context: opts.context } : {}))),
                         signal: abortSignal,
                         credentials: opts.credentials,
                     }));
@@ -380,14 +420,15 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                 }
                 const text = { value: '' };
                 const toolCalls = [];
+                const structuredParts = [];
                 let pendingContent = null;
                 const yieldContent = () => {
-                    const content = buildContent(text, toolCalls);
+                    const content = buildRichContent(text, structuredParts, toolCalls);
                     if (content.length > 0)
                         pendingContent = content;
                 };
                 const reader = response.body.getReader();
-                const approvals = yield __await(processStream(reader, text, toolCalls, yieldContent, (_e = onFinishRef.current) !== null && _e !== void 0 ? _e : undefined));
+                const approvals = yield __await(processStream(reader, text, toolCalls, structuredParts, yieldContent, (_e = onFinishRef.current) !== null && _e !== void 0 ? _e : undefined));
                 if (approvals.length === 0) {
                     // No approval needed — yield final content and done
                     if (pendingContent) {
@@ -427,7 +468,7 @@ function createPikkuStreamingAdapter(optionsRef, pendingApprovalsRef, approvalDe
                         toolCalls.splice(i, 1);
                     }
                 }
-                const content = buildContent(text, toolCalls);
+                const content = buildRichContent(text, structuredParts, toolCalls);
                 yield yield __await({
                     content,
                     status: {
@@ -497,7 +538,12 @@ const convertDbMessages = (dbMessages) => {
             continue;
         const parts = [];
         if (msg.content) {
-            parts.push({ type: 'text', text: msg.content });
+            if (Array.isArray(msg.content)) {
+                parts.push(...msg.content);
+            }
+            else {
+                parts.push({ type: 'text', text: msg.content });
+            }
         }
         if (Array.isArray(msg.toolCalls)) {
             for (const tc of msg.toolCalls) {
@@ -587,6 +633,7 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                     // Resume uses SSE (same as streaming mode)
                     let lastText = { value: '' };
                     let lastToolCalls = [];
+                    let lastStructuredParts = [];
                     let nextApprovals = [];
                     for (let i = 0; i < decisions.length; i++) {
                         const decision = decisions[i];
@@ -611,17 +658,19 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                         }
                         const text = { value: '' };
                         const toolCalls = [];
+                        const structuredParts = [];
                         const reader = resumeResponse.body.getReader();
-                        const streamApprovals = yield __await(processStream(reader, text, toolCalls, () => { }, i === decisions.length - 1
+                        const streamApprovals = yield __await(processStream(reader, text, toolCalls, structuredParts, () => { }, i === decisions.length - 1
                             ? ((_d = onFinishRef.current) !== null && _d !== void 0 ? _d : undefined)
                             : undefined));
                         lastText = text;
                         lastToolCalls = toolCalls;
+                        lastStructuredParts = structuredParts;
                         if (streamApprovals.length > 0) {
                             nextApprovals = streamApprovals;
                         }
                     }
-                    const content = buildContent(lastText, lastToolCalls);
+                    const content = buildRichContent(lastText, lastStructuredParts, lastToolCalls);
                     if (nextApprovals.length > 0) {
                         pendingApprovalsRef.current = nextApprovals;
                         setPendingApprovalsRef.current(nextApprovals);
@@ -644,7 +693,7 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                                 lastToolCalls.push(approvalToolCall);
                             }
                         }
-                        const updatedContent = buildContent(lastText, lastToolCalls);
+                        const updatedContent = buildRichContent(lastText, lastStructuredParts, lastToolCalls);
                         yield yield __await({
                             content: updatedContent,
                             status: {
@@ -673,14 +722,7 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                 const response = yield __await(fetch(`${opts.api}/${opts.agentName}`, {
                     method: 'POST',
                     headers: Object.assign({ 'Content-Type': 'application/json' }, opts.headers),
-                    body: JSON.stringify({
-                        agentName: opts.agentName,
-                        message: messageText,
-                        threadId: opts.threadId,
-                        resourceId: opts.resourceId,
-                        model: opts.model,
-                        temperature: opts.temperature,
-                    }),
+                    body: JSON.stringify(Object.assign({ agentName: opts.agentName, message: messageText, threadId: opts.threadId, resourceId: opts.resourceId, model: opts.model, temperature: opts.temperature }, (opts.context ? { context: opts.context } : {}))),
                     signal: abortSignal,
                     credentials: opts.credentials,
                 }));
@@ -701,9 +743,7 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                             : {})), (approval.reason ? { __approvalReason: approval.reason } : {})),
                     }));
                     const content = [];
-                    if (json.result) {
-                        content.push({ type: 'text', text: json.result });
-                    }
+                    content.push(...buildContentFromAgentResult(json.result));
                     content.push(...toolCalls);
                     yield yield __await({
                         content,
@@ -716,10 +756,7 @@ function createPikkuNonStreamingAdapter(optionsRef, pendingApprovalsRef, approva
                 }
                 // No approvals — yield complete content
                 (_f = onFinishRef.current) === null || _f === void 0 ? void 0 : _f.call(onFinishRef);
-                const content = [];
-                if (json.result) {
-                    content.push({ type: 'text', text: String(json.result) });
-                }
+                const content = buildContentFromAgentResult(json.result);
                 if (content.length > 0) {
                     yield yield __await({ content });
                 }

package/dist/esm/index.d.ts

@@ -2,3 +2,6 @@ export { usePikkuAgentRuntime, usePikkuAgentNonStreamingRuntime, PikkuApprovalCo
 export type { PikkuAgentRuntimeOptions, PendingApproval, PikkuApprovalContextValue, PikkuToolStatusType, PikkuToolStatus, MissingCredentialPayload, } from './use-pikku-agent-runtime.js';
 export { PikkuAgentChat } from './pikku-agent-chat.js';
 export type { PikkuAgentChatProps } from './pikku-agent-chat.js';
+export { useFileAttachment, INLINE_SIZE_LIMIT } from './use-file-attachment.js';
+export type { PendingFile, UploadAttachmentFn } from './use-file-attachment.js';
+export { modelSupportsVision } from './model-capabilities.js';

package/dist/esm/index.js

@@ -1,2 +1,4 @@
 export { usePikkuAgentRuntime, usePikkuAgentNonStreamingRuntime, PikkuApprovalContext, usePikkuApproval, convertDbMessages, isDeniedResult, resolvePikkuToolStatus, } from './use-pikku-agent-runtime.js';
 export { PikkuAgentChat } from './pikku-agent-chat.js';
+export { useFileAttachment, INLINE_SIZE_LIMIT } from './use-file-attachment.js';
+export { modelSupportsVision } from './model-capabilities.js';

package/dist/esm/model-capabilities.d.ts

@@ -0,0 +1 @@
+export declare function modelSupportsVision(modelID: string): boolean;

package/dist/esm/model-capabilities.js

@@ -0,0 +1,13 @@
+const MODEL_VISION_SUPPORT = new Set([
+    'claude-sonnet-4-5',
+    'claude-opus-4-1',
+    'gpt-4o-mini',
+    'gpt-5',
+    'gpt-5-mini',
+    'gpt-5-codex',
+    'gemini-2.5-pro',
+    'gemini-2.5-flash',
+]);
+export function modelSupportsVision(modelID) {
+    return MODEL_VISION_SUPPORT.has(modelID);
+}

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

@@ -1,6 +1,8 @@
+import { type ComponentType, type ReactNode } from 'react';
 import { type ToolCallMessagePartComponent } from '@assistant-ui/react';
 import { type PikkuAgentRuntimeOptions } from './use-pikku-agent-runtime.js';
 export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
+    initialPrompt?: string;
     emptyMessage?: string;
     /** Hide tool calls from the chat display.
      *  - `true`: hide all non-approval tool calls
@@ -21,5 +23,7 @@ export interface PikkuAgentChatProps extends PikkuAgentRuntimeOptions {
      * (which still respects `hideToolCalls` and the approval-request UI).
      */
     toolComponents?: Record<string, ToolCallMessagePartComponent>;
+    renderAssistantText?: (text: string) => ReactNode;
+    generativeUIComponents?: Record<string, ComponentType<any>>;
 }
 export declare function PikkuAgentChat(props: PikkuAgentChatProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useState, useMemo, } from 'react';
+import { createContext, useContext, useState, useMemo, useEffect, useRef, } from 'react';
 import Markdown from 'react-markdown';
-import { AssistantRuntimeProvider, ThreadPrimitive, MessagePrimitive, ComposerPrimitive, } from '@assistant-ui/react';
+import { AssistantRuntimeProvider, ThreadPrimitive, MessagePrimitive, ComposerPrimitive, useComposerRuntime, } from '@assistant-ui/react';
 import { usePikkuAgentRuntime, PikkuApprovalContext, usePikkuApproval, resolvePikkuToolStatus, } from './use-pikku-agent-runtime.js';
 const lightColors = {
     bg: '#ffffff',
@@ -46,6 +46,8 @@ const darkColors = {
 const ColorsContext = createContext(lightColors);
 const HideToolCallsContext = createContext(undefined);
 const ToolComponentsContext = createContext(undefined);
+const GenerativeUIComponentsContext = createContext(undefined);
+const RenderAssistantTextContext = createContext(undefined);
 function shouldHideToolCall(hideToolCalls, toolName) {
     if (!hideToolCalls)
         return false;
@@ -296,6 +298,8 @@ const UserMessage = () => {
 const AssistantMessage = () => {
     const colors = useContext(ColorsContext);
     const toolComponents = useContext(ToolComponentsContext);
+    const generativeUIComponents = useContext(GenerativeUIComponentsContext);
+    const renderAssistantText = useContext(RenderAssistantTextContext);
     return (_jsx("div", { style: {
             display: 'flex',
             justifyContent: 'flex-start',
@@ -305,11 +309,18 @@ const AssistantMessage = () => {
                         borderRadius: 12,
                         backgroundColor: colors.assistantBubble,
                     }, children: [_jsx(MessagePrimitive.Content, { components: {
-                                Text: ({ text }) => _jsx(MarkdownText, { text: text, colors: colors }),
+                                Text: ({ text }) => renderAssistantText ? (_jsx(_Fragment, { children: renderAssistantText(text) })) : (_jsx(MarkdownText, { text: text, colors: colors })),
                                 tools: {
                                     by_name: toolComponents,
                                     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 })),
                                 },
+                                ...(generativeUIComponents
+                                    ? {
+                                        generativeUI: {
+                                            components: generativeUIComponents,
+                                        },
+                                    }
+                                    : {}),
                             } }), _jsx(MessagePrimitive.If, { last: true, children: _jsx(ThreadPrimitive.If, { running: true, children: _jsx("div", { style: {
                                         display: 'flex',
                                         alignItems: 'center',
@@ -319,88 +330,112 @@ const AssistantMessage = () => {
                                         color: colors.textMuted,
                                     }, children: "Thinking..." }) }) })] })] }) }));
 };
+const ComposerPrefill = ({ text }) => {
+    const composer = useComposerRuntime();
+    const filled = useRef(false);
+    useEffect(() => {
+        if (filled.current || !text)
+            return;
+        filled.current = true;
+        if (composer.getState().text === '')
+            composer.setText(text);
+    }, [text, composer]);
+    return null;
+};
 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,
-                    overflow: 'hidden',
+                    position: 'relative',
+                    zIndex: 2,
                     display: 'flex',
-                    alignItems: 'flex-end',
-                    padding: '6px 12px',
-                    gap: 8,
+                    flexDirection: 'column',
+                    gap: 10,
+                    backgroundColor: colors.assistantBubble,
+                    border: `1px solid ${colors.border}`,
+                    borderRadius: 24,
+                    padding: '14px 12px 10px',
+                    boxShadow: darkColors.text === colors.text
+                        ? '0 14px 30px rgba(0,0,0,0.24)'
+                        : '0 14px 30px rgba(0,0,0,0.08)',
                     ...(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,
+                }, children: [_jsx(ComposerPrimitive.Input, { placeholder: disabled ? 'Respond to approval request above...' : 'Message...', rows: 1, disabled: disabled ?? false, style: {
+                            width: '100%',
+                            background: 'transparent',
                             border: 'none',
                             outline: 'none',
-                            resize: 'none',
+                            color: colors.text,
                             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',
+                            resize: 'none',
+                            lineHeight: 1.5,
+                            overflowY: 'auto',
+                        } }), _jsx("div", { style: {
+                            width: '100%',
                             display: 'flex',
                             alignItems: 'center',
-                            justifyContent: 'center',
-                            flexShrink: 0,
-                            marginBottom: 2,
-                            fontSize: 14,
-                        }, children: "\u25B6" })] }) }) }));
+                            gap: 6,
+                            minWidth: 0,
+                            justifyContent: 'flex-end',
+                        }, children: _jsx(ComposerPrimitive.Send, { disabled: disabled ?? false, style: {
+                                width: 30,
+                                height: 30,
+                                borderRadius: 999,
+                                border: `1px solid ${colors.border}`,
+                                background: '#e8e8e8',
+                                color: '#111111',
+                                cursor: disabled ? 'not-allowed' : 'pointer',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                flexShrink: 0,
+                                transition: 'background-color 150ms ease, color 150ms ease, border-color 150ms ease',
+                            }, children: "\u2191" }) })] }) }) }));
 };
 export function PikkuAgentChat(props) {
-    const { emptyMessage, hideToolCalls, dark, maxWidth = 768, toolComponents, ...runtimeOptions } = props;
+    const { emptyMessage, hideToolCalls, dark, maxWidth = 768, toolComponents, renderAssistantText, generativeUIComponents, initialPrompt, ...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(ToolComponentsContext.Provider, { value: toolComponents, 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',
-                                    flex: 1,
-                                    minHeight: 0,
-                                }, children: [_jsx(ThreadPrimitive.Viewport, { style: {
-                                            flex: 1,
-                                            minHeight: 0,
-                                            overflowY: 'auto',
-                                        }, children: _jsxs("div", { style: {
-                                                maxWidth: maxWidth === 'none' ? undefined : maxWidth,
-                                                margin: '0 auto',
-                                                padding: 16,
+    return (_jsx(ColorsContext.Provider, { value: colors, children: _jsx(PikkuApprovalContext.Provider, { value: { pendingApprovals, handleApproval }, children: _jsx(HideToolCallsContext.Provider, { value: hideToolCalls, children: _jsx(ToolComponentsContext.Provider, { value: toolComponents, children: _jsx(GenerativeUIComponentsContext.Provider, { value: generativeUIComponents, children: _jsx(RenderAssistantTextContext.Provider, { value: renderAssistantText, children: _jsxs(AssistantRuntimeProvider, { runtime: runtime, children: [_jsx(ComposerPrefill, { text: initialPrompt }), _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: maxWidth === 'none' ? undefined : maxWidth,
+                                                            margin: '0 auto',
+                                                            padding: 16,
                                                             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: maxWidth === 'none' ? undefined : maxWidth,
-                                            margin: '0 auto',
-                                            width: '100%',
-                                            padding: '0 16px',
-                                        }, children: _jsx(PikkuComposer, { disabled: isAwaitingApproval }) })] }) }) }) }) }) }) }));
+                                                            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: maxWidth === 'none' ? undefined : maxWidth,
+                                                        margin: '0 auto',
+                                                        width: '100%',
+                                                        padding: '0 16px',
+                                                    }, children: _jsx(PikkuComposer, { disabled: isAwaitingApproval }) })] }) })] }) }) }) }) }) }) }));
 }

package/dist/esm/use-file-attachment.d.ts

@@ -0,0 +1,26 @@
+export type PendingFile = {
+    id: string;
+    name: string;
+    mimeType: string;
+    previewUrl: string;
+    contentUrl: string;
+    isImage: boolean;
+};
+export type UploadAttachmentFn = (args: {
+    contentType: string;
+    sizeBytes: number;
+}) => Promise<{
+    uploadUrl: string;
+    signedReadUrl: string;
+    uploadMethod?: string;
+}>;
+export declare const INLINE_SIZE_LIMIT: number;
+export declare function useFileAttachment(upload: UploadAttachmentFn): {
+    pendingFiles: PendingFile[];
+    uploading: boolean;
+    uploadError: string | null;
+    fileInputRef: import("react").RefObject<HTMLInputElement | null>;
+    handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+    removeFile: (id: string) => void;
+    clearFiles: () => void;
+};

package/dist/esm/use-file-attachment.js

@@ -0,0 +1,85 @@
+import { useState, useCallback, useRef } from 'react';
+export const INLINE_SIZE_LIMIT = 1 * 1024 * 1024;
+export function useFileAttachment(upload) {
+    const [pendingFiles, setPendingFiles] = useState([]);
+    const [uploading, setUploading] = useState(false);
+    const [uploadError, setUploadError] = useState(null);
+    const fileInputRef = useRef(null);
+    const handleFileChange = useCallback(async (e) => {
+        const files = Array.from(e.target.files ?? []);
+        e.target.value = '';
+        if (!files.length)
+            return;
+        setUploading(true);
+        setUploadError(null);
+        try {
+            for (const file of files) {
+                const previewUrl = URL.createObjectURL(file);
+                let contentUrl;
+                if (file.type.startsWith('image/') &&
+                    file.size <= INLINE_SIZE_LIMIT) {
+                    contentUrl = await new Promise((resolve, reject) => {
+                        const reader = new FileReader();
+                        reader.onload = (ev) => resolve(ev.target.result);
+                        reader.onerror = reject;
+                        reader.readAsDataURL(file);
+                    });
+                }
+                else {
+                    const { uploadUrl, signedReadUrl, uploadMethod } = await upload({
+                        contentType: file.type,
+                        sizeBytes: file.size,
+                    });
+                    const resp = await fetch(uploadUrl, {
+                        method: uploadMethod ?? 'PUT',
+                        body: file,
+                        headers: { 'Content-Type': file.type },
+                    });
+                    if (!resp.ok)
+                        throw new Error(`Upload failed (${resp.status})`);
+                    contentUrl = signedReadUrl;
+                }
+                setPendingFiles((prev) => [
+                    ...prev,
+                    {
+                        id: `file_${Date.now().toString(36)}`,
+                        name: file.name,
+                        mimeType: file.type,
+                        previewUrl,
+                        contentUrl,
+                        isImage: file.type.startsWith('image/'),
+                    },
+                ]);
+            }
+        }
+        catch (err) {
+            setUploadError(err instanceof Error ? err.message : 'Upload failed');
+        }
+        finally {
+            setUploading(false);
+        }
+    }, [upload]);
+    const removeFile = useCallback((id) => {
+        setPendingFiles((prev) => {
+            const f = prev.find((x) => x.id === id);
+            if (f)
+                URL.revokeObjectURL(f.previewUrl);
+            return prev.filter((x) => x.id !== id);
+        });
+    }, []);
+    const clearFiles = useCallback(() => {
+        setPendingFiles((prev) => {
+            prev.forEach((f) => URL.revokeObjectURL(f.previewUrl));
+            return [];
+        });
+    }, []);
+    return {
+        pendingFiles,
+        uploading,
+        uploadError,
+        fileInputRef,
+        handleFileChange,
+        removeFile,
+        clearFiles,
+    };
+}

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

@@ -10,6 +10,10 @@ export interface PikkuAgentRuntimeOptions {
     headers?: Record<string, string>;
     model?: string;
     temperature?: number;
+    /** Structured context injected into the agent's system instructions.
+     *  Provide upfront state (e.g. current org/project/branch/deployment IDs)
+     *  so the agent can call tools without asking the user. */
+    context?: string;
 }
 export interface PendingApproval {
     toolCallId: string;