@pikku/assistant-ui 0.12.4 → 0.12.6

package/src/use-file-attachment.ts

@@ -0,0 +1,110 @@
+import { useState, useCallback, useRef } from 'react'
+
+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 const INLINE_SIZE_LIMIT = 1 * 1024 * 1024
+
+export function useFileAttachment(upload: UploadAttachmentFn) {
+  const [pendingFiles, setPendingFiles] = useState<PendingFile[]>([])
+  const [uploading, setUploading] = useState(false)
+  const [uploadError, setUploadError] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleFileChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      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: string
+
+          if (
+            file.type.startsWith('image/') &&
+            file.size <= INLINE_SIZE_LIMIT
+          ) {
+            contentUrl = await new Promise<string>((resolve, reject) => {
+              const reader = new FileReader()
+              reader.onload = (ev) => resolve(ev.target!.result as string)
+              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: string) => {
+    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/src/use-pikku-agent-runtime.ts

@@ -23,6 +23,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 {
@@ -87,6 +91,17 @@ type ToolCall = {
   isError?: boolean
 }
 
+type StructuredPart =
+  | {
+      type: 'generative-ui'
+      spec: unknown
+    }
+  | {
+      type: 'data'
+      name: string
+      data: unknown
+    }
+
 /**
  * Shared helper: consume an SSE stream and populate text/toolCalls.
  * Returns an array of PendingApprovals when the stream requests them, or empty when done.
@@ -95,6 +110,7 @@ async function processStream(
   reader: ReadableStreamDefaultReader<Uint8Array>,
   text: { value: string },
   toolCalls: ToolCall[],
+  structuredParts: StructuredPart[],
   yieldContent: () => void,
   onFinish?: () => void
 ): Promise<PendingApproval[]> {
@@ -140,6 +156,31 @@ async function processStream(
         }
         break
       }
+      case 'generative-ui': {
+        const nextPart = {
+          type: 'generative-ui' as const,
+          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' as const,
+          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,
@@ -237,13 +278,39 @@ export function resolvePikkuToolStatus(
   return { type: 'completed' }
 }
 
-function buildContent(text: { value: string }, toolCalls: ToolCall[]): any[] {
+function buildRichContent(
+  text: { value: string },
+  structuredParts: StructuredPart[],
+  toolCalls: ToolCall[]
+): any[] {
   const content: any[] = []
   if (text.value) content.push({ type: 'text' as const, text: text.value })
+  content.push(...structuredParts)
   content.push(...toolCalls)
   return content
 }
 
+function buildContentFromAgentResult(result: unknown): any[] {
+  const content: any[] = []
+
+  if (typeof result === 'string') {
+    if (result) content.push({ type: 'text' as const, text: result })
+    return content
+  }
+
+  if (!result || typeof result !== 'object') return content
+
+  const record = result as Record<string, unknown>
+  if (typeof record.text === 'string' && record.text) {
+    content.push({ type: 'text' as const, text: record.text })
+  }
+  if (record.ui != null) {
+    content.push({ type: 'generative-ui' as const, spec: record.ui })
+  }
+
+  return content
+}
+
 function createPikkuStreamingAdapter(
   optionsRef: React.RefObject<PikkuAgentRuntimeOptions>,
   pendingApprovalsRef: React.RefObject<PendingApproval[]>,
@@ -281,6 +348,7 @@ function createPikkuStreamingAdapter(
         // The last resume triggers continuation (next LLM step).
         let lastText = { value: '' }
         let lastToolCalls: ToolCall[] = []
+        let lastStructuredParts: StructuredPart[] = []
         let nextApprovals: PendingApproval[] = []
 
         for (let i = 0; i < decisions.length; i++) {
@@ -320,11 +388,13 @@ function createPikkuStreamingAdapter(
 
           const text = { value: '' }
           const toolCalls: ToolCall[] = []
+          const structuredParts: StructuredPart[] = []
           const reader = resumeResponse.body.getReader()
           const streamApprovals = await processStream(
             reader,
             text,
             toolCalls,
+            structuredParts,
             () => {},
             i === decisions.length - 1
               ? (onFinishRef.current ?? undefined)
@@ -334,13 +404,18 @@ function createPikkuStreamingAdapter(
           // 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
@@ -372,7 +447,11 @@ function createPikkuStreamingAdapter(
             }
           }
 
-          const updatedContent = buildContent(lastText, lastToolCalls)
+          const updatedContent = buildRichContent(
+            lastText,
+            lastStructuredParts,
+            lastToolCalls
+          )
           yield {
             content: updatedContent,
             status: {
@@ -411,6 +490,7 @@ function createPikkuStreamingAdapter(
             resourceId: opts.resourceId,
             model: opts.model,
             temperature: opts.temperature,
+            ...(opts.context ? { context: opts.context } : {}),
           }),
           signal: abortSignal,
           credentials: opts.credentials,
@@ -451,9 +531,10 @@ function createPikkuStreamingAdapter(
 
       const text = { value: '' }
       const toolCalls: ToolCall[] = []
+      const structuredParts: StructuredPart[] = []
       let pendingContent: any[] | null = null
       const yieldContent = () => {
-        const content = buildContent(text, toolCalls)
+        const content = buildRichContent(text, structuredParts, toolCalls)
         if (content.length > 0) pendingContent = content
       }
 
@@ -462,6 +543,7 @@ function createPikkuStreamingAdapter(
         reader,
         text,
         toolCalls,
+        structuredParts,
         yieldContent,
         onFinishRef.current ?? undefined
       )
@@ -516,7 +598,7 @@ function createPikkuStreamingAdapter(
         }
       }
 
-      const content = buildContent(text, toolCalls)
+      const content = buildRichContent(text, structuredParts, toolCalls)
       yield {
         content,
         status: {
@@ -596,7 +678,11 @@ export const convertDbMessages = (dbMessages: any[]): ThreadMessageLike[] => {
     const parts: any[] = []
 
     if (msg.content) {
-      parts.push({ type: 'text' as const, text: msg.content })
+      if (Array.isArray(msg.content)) {
+        parts.push(...msg.content)
+      } else {
+        parts.push({ type: 'text' as const, text: msg.content })
+      }
     }
 
     if (Array.isArray(msg.toolCalls)) {
@@ -732,6 +818,7 @@ function createPikkuNonStreamingAdapter(
         // Resume uses SSE (same as streaming mode)
         let lastText = { value: '' }
         let lastToolCalls: ToolCall[] = []
+        let lastStructuredParts: StructuredPart[] = []
         let nextApprovals: PendingApproval[] = []
 
         for (let i = 0; i < decisions.length; i++) {
@@ -770,11 +857,13 @@ function createPikkuNonStreamingAdapter(
 
           const text = { value: '' }
           const toolCalls: ToolCall[] = []
+          const structuredParts: StructuredPart[] = []
           const reader = resumeResponse.body.getReader()
           const streamApprovals = await processStream(
             reader,
             text,
             toolCalls,
+            structuredParts,
             () => {},
             i === decisions.length - 1
               ? (onFinishRef.current ?? undefined)
@@ -783,12 +872,17 @@ function createPikkuNonStreamingAdapter(
 
           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
@@ -818,7 +912,11 @@ function createPikkuNonStreamingAdapter(
             }
           }
 
-          const updatedContent = buildContent(lastText, lastToolCalls)
+          const updatedContent = buildRichContent(
+            lastText,
+            lastStructuredParts,
+            lastToolCalls
+          )
           yield {
             content: updatedContent,
             status: {
@@ -855,6 +953,7 @@ function createPikkuNonStreamingAdapter(
           resourceId: opts.resourceId,
           model: opts.model,
           temperature: opts.temperature,
+          ...(opts.context ? { context: opts.context } : {}),
         }),
         signal: abortSignal,
         credentials: opts.credentials,
@@ -884,9 +983,7 @@ function createPikkuNonStreamingAdapter(
         }))
 
         const content: any[] = []
-        if (json.result) {
-          content.push({ type: 'text' as const, text: json.result })
-        }
+        content.push(...buildContentFromAgentResult(json.result))
         content.push(...toolCalls)
 
         yield {
@@ -901,10 +998,7 @@ function createPikkuNonStreamingAdapter(
 
       // No approvals — yield complete content
       onFinishRef.current?.()
-      const content: any[] = []
-      if (json.result) {
-        content.push({ type: 'text' as const, text: String(json.result) })
-      }
+      const content = buildContentFromAgentResult(json.result)
       if (content.length > 0) {
         yield { content }
       }