create-supyagent-app 0.1.32 → 0.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-supyagent-app",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "Create a supyagent-powered chatbot app",
   "type": "module",
   "bin": {

package/templates/base/src/components/supyagent/tool-message.tsx

@@ -56,6 +56,7 @@ export function ToolMessage({ part, addToolApprovalResponse }: ToolMessageProps)
   const { data: polledData } = useJobPolling({
     initialData: rawData,
     enabled: !!formatterType && POLLABLE_TYPES.has(formatterType),
+    formatterType,
   });
 
   // Compute summary and rendered output from (possibly polled) data

package/templates/base/src/hooks/use-job-polling.ts

@@ -5,6 +5,8 @@ import { useState, useEffect, useRef } from "react";
 interface UseJobPollingOptions {
   initialData: Record<string, unknown> | undefined;
   enabled: boolean;
+  /** Formatter type (e.g. "image", "video", "audio") — used to produce the right field names */
+  formatterType?: string;
 }
 
 interface UseJobPollingResult {
@@ -19,6 +21,7 @@ interface UseJobPollingResult {
 export function useJobPolling({
   initialData,
   enabled,
+  formatterType,
 }: UseJobPollingOptions): UseJobPollingResult {
   const [polledData, setPolledData] = useState<
     Record<string, unknown> | undefined
@@ -63,25 +66,22 @@ export function useJobPolling({
         });
 
         if (!res.ok) {
-          // Retry on transient errors
           attempt++;
           timeoutRef.current = setTimeout(poll, getDelay(attempt));
           return;
         }
 
         const json = await res.json();
-        const normalized = normalizeJobData(json, initialData);
+        const normalized = normalizeJobData(json, initialData, formatterType);
 
         setPolledData(normalized);
 
         if (normalized.status !== "processing") {
-          // Terminal state — stop polling
           setIsPolling(false);
           return;
         }
       } catch (err: unknown) {
         if (err instanceof DOMException && err.name === "AbortError") return;
-        // Retry on network errors
       }
 
       attempt++;
@@ -105,15 +105,42 @@ export function useJobPolling({
 }
 
 /**
- * Normalizes job API responses so renderers can find fields at the top level.
+ * Extracts a URL from a job result object.
+ * Job results from providers like Replicate store the URL in `output`, `url`,
+ * or a media-specific key like `image_url` / `audio_url` / `video_url`.
+ */
+function extractUrlFromResult(
+  result: Record<string, unknown>
+): string | undefined {
+  for (const key of [
+    "output",
+    "url",
+    "image_url",
+    "audio_url",
+    "video_url",
+  ]) {
+    if (typeof result[key] === "string") return result[key] as string;
+  }
+  return undefined;
+}
+
+/**
+ * Normalizes job API responses so existing renderers can consume them directly.
  *
- * Job API may return `{ ok: true, data: { status, result: { image_url } } }`.
- * Renderers expect `d.image_url`, `d.audio_url`, `d.result.output`, etc.
- * We unwrap the envelope and spread `result` fields to the top level.
+ * The job polling API returns: `{ ok, data: { status, result: { output: "https://..." } } }`
+ *
+ * But renderers expect specific top-level keys:
+ * - image.tsx checks `d.image_url`
+ * - audio.tsx checks `d.audio_url`
+ * - video.tsx checks `d.result.output` (already works with raw shape)
+ *
+ * Without this normalization, `d.poll_url && !d.image_url` stays true and
+ * the image renderer shows the spinner forever.
  */
 function normalizeJobData(
   json: Record<string, unknown>,
-  initial: Record<string, unknown>
+  initial: Record<string, unknown>,
+  formatterType?: string
 ): Record<string, unknown> {
   // Unwrap { ok, data } envelope
   let payload =
@@ -124,10 +151,26 @@ function normalizeJobData(
   // Merge with initial data so fields like poll_url, job_id carry through
   payload = { ...initial, ...payload };
 
-  // Spread result fields to top level (image_url, audio_url, video_url, etc.)
-  if (payload.result && typeof payload.result === "object") {
+  // If completed and result has a URL, set the renderer-specific field
+  if (
+    payload.status !== "processing" &&
+    payload.result &&
+    typeof payload.result === "object"
+  ) {
     const result = payload.result as Record<string, unknown>;
-    payload = { ...result, ...payload };
+    const url = extractUrlFromResult(result);
+
+    if (url) {
+      switch (formatterType) {
+        case "image":
+          if (!payload.image_url) payload = { ...payload, image_url: url };
+          break;
+        case "audio":
+          if (!payload.audio_url) payload = { ...payload, audio_url: url };
+          break;
+        // video renderer already reads d.result.output — no top-level field needed
+      }
+    }
   }
 
   return payload;

package/templates/package-json/package.json.tmpl

@@ -17,7 +17,7 @@
     "{{aiProviderPackage}}": "{{aiProviderVersion}}",
     "@prisma/client": "^6.2.0",
     "@radix-ui/react-collapsible": "^1.1.0",
-    "@supyagent/sdk": "^0.1.19",
+    "@supyagent/sdk": "^0.1.25",
     "class-variance-authority": "^0.7.0",
     "ai": "^6.0.0",
     "clsx": "^2.1.0",