create-supyagent-app 0.1.30 → 0.1.31

package/package.json

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

package/templates/api-route/route.skills.ts.tmpl

@@ -21,6 +21,31 @@ export async function POST(req: Request) {
     messages: await convertToModelMessages(messages),
     tools,
     stopWhen: stepCountIs(5),
+    prepareStep: async ({ steps, messages: stepMessages }) => {
+      const imageUrls: string[] = [];
+      for (const step of steps) {
+        for (const call of step.toolCalls) {
+          if (call.toolName === 'viewImage' && call.input?.url) {
+            imageUrls.push(call.input.url as string);
+          }
+        }
+      }
+      if (imageUrls.length === 0) return undefined;
+
+      return {
+        messages: [
+          ...stepMessages,
+          {
+            role: 'user' as const,
+            content: imageUrls.map(url => ({
+              type: 'file' as const,
+              data: new URL(url),
+              mediaType: 'image/jpeg',
+            })),
+          },
+        ],
+      };
+    },
   });
 
   return result.toUIMessageStreamResponse({

package/templates/api-route/route.tools.ts.tmpl

@@ -21,6 +21,31 @@ export async function POST(req: Request) {
     messages: await convertToModelMessages(messages),
     tools,
     stopWhen: stepCountIs(5),
+    prepareStep: async ({ steps, messages: stepMessages }) => {
+      const imageUrls: string[] = [];
+      for (const step of steps) {
+        for (const call of step.toolCalls) {
+          if (call.toolName === 'viewImage' && call.input?.url) {
+            imageUrls.push(call.input.url as string);
+          }
+        }
+      }
+      if (imageUrls.length === 0) return undefined;
+
+      return {
+        messages: [
+          ...stepMessages,
+          {
+            role: 'user' as const,
+            content: imageUrls.map(url => ({
+              type: 'file' as const,
+              data: new URL(url),
+              mediaType: 'image/jpeg',
+            })),
+          },
+        ],
+      };
+    },
   });
 
   return result.toUIMessageStreamResponse({

package/templates/base/src/components/chat-message.tsx

@@ -101,10 +101,6 @@ export function ChatMessage({ message, addToolApprovalResponse }: ChatMessagePro
           }
 
           if (isToolUIPart(part)) {
-            const inv = (part as any).toolInvocation;
-            if (inv?.toolName === "viewImage") {
-              return null;
-            }
             return <ToolMessage key={i} part={part} addToolApprovalResponse={addToolApprovalResponse} />;
           }
 

package/templates/base/src/components/chat.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useChat } from "@ai-sdk/react";
-import { DefaultChatTransport, isToolUIPart, lastAssistantMessageIsCompleteWithApprovalResponses, type UIMessage } from "ai";
+import { DefaultChatTransport, lastAssistantMessageIsCompleteWithApprovalResponses, type UIMessage } from "ai";
 import { ChatMessage } from "./chat-message";
 import { ChatInput } from "./chat-input";
 import { ChatSidebar } from "./chat-sidebar";
@@ -23,7 +23,7 @@ export function Chat({ chatId, initialMessages }: ChatProps) {
     [chatId]
   );
 
-  const { messages, sendMessage, status, stop, addToolApprovalResponse, setMessages } = useChat({
+  const { messages, sendMessage, status, stop, addToolApprovalResponse } = useChat({
     id: chatId,
     transport,
     messages: initialMessages,
@@ -32,38 +32,6 @@ export function Chat({ chatId, initialMessages }: ChatProps) {
 
   const isLoading = status === "submitted" || status === "streaming";
 
-  // viewImage: inject images as FileUIPart messages so the model can see them
-  const processedImageCallsRef = useRef<Set<string>>(new Set());
-
-  useEffect(() => {
-    if (status !== "ready") return;
-
-    const newImageMessages: UIMessage[] = [];
-
-    for (const msg of messages) {
-      for (const part of msg.parts) {
-        if (!isToolUIPart(part)) continue;
-        const inv = (part as any).toolInvocation;
-        if (!inv || inv.toolName !== "viewImage") continue;
-        if (inv.state !== "result" && inv.state !== "output-available") continue;
-        if (processedImageCallsRef.current.has(inv.toolCallId)) continue;
-
-        const url = inv.args?.url ?? inv.input?.url;
-        if (!url) continue;
-
-        processedImageCallsRef.current.add(inv.toolCallId);
-        newImageMessages.push({
-          id: `image-${inv.toolCallId}`,
-          role: "assistant",
-          parts: [{ type: "file" as const, mediaType: "image/jpeg", url }],
-        } as UIMessage);
-      }
-    }
-
-    if (newImageMessages.length > 0) {
-      setMessages((prev) => [...prev, ...newImageMessages]);
-    }
-  }, [messages, status, setMessages]);
   const scrollRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);