create-supyagent-app 0.1.24 → 0.1.26

package/package.json

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

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

@@ -25,6 +25,9 @@ export async function POST(req: Request) {
 
   return result.toUIMessageStreamResponse({
     originalMessages: messages,
+    onStepFinish: async ({ messages: updatedMessages }) => {
+      await adapter.saveChat(chatId, updatedMessages as any);
+    },
     onFinish: async ({ messages: updatedMessages }) => {
       await adapter.saveChat(chatId, updatedMessages as any);
     },

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

@@ -25,6 +25,9 @@ export async function POST(req: Request) {
 
   return result.toUIMessageStreamResponse({
     originalMessages: messages,
+    onStepFinish: async ({ messages: updatedMessages }) => {
+      await adapter.saveChat(chatId, updatedMessages as any);
+    },
     onFinish: async ({ messages: updatedMessages }) => {
       await adapter.saveChat(chatId, updatedMessages as any);
     },

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

@@ -13,12 +13,37 @@ interface ChatInputProps {
   stop: () => void;
 }
 
-function readFileAsDataURL(file: File): Promise<string> {
+const MAX_BASE64_BYTES = 4.5 * 1024 * 1024; // stay well under provider 5MB limit
+const MAX_DIMENSION = 2048;
+
+function compressImage(file: File): Promise<{ url: string; mediaType: string }> {
   return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result as string);
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
+    const img = new Image();
+    img.onload = () => {
+      let { width, height } = img;
+      // Scale down if too large
+      if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
+        const scale = MAX_DIMENSION / Math.max(width, height);
+        width = Math.round(width * scale);
+        height = Math.round(height * scale);
+      }
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d")!;
+      ctx.drawImage(img, 0, 0, width, height);
+
+      // Try JPEG at decreasing quality until under size limit
+      let quality = 0.85;
+      let dataUrl = canvas.toDataURL("image/jpeg", quality);
+      while (dataUrl.length * 0.75 > MAX_BASE64_BYTES && quality > 0.1) {
+        quality -= 0.15;
+        dataUrl = canvas.toDataURL("image/jpeg", quality);
+      }
+      resolve({ url: dataUrl, mediaType: "image/jpeg" });
+    };
+    img.onerror = reject;
+    img.src = URL.createObjectURL(file);
   });
 }
 
@@ -62,12 +87,15 @@ export function ChatInput({ sendMessage, isLoading, stop }: ChatInputProps) {
       | undefined;
     if (files.length > 0) {
       fileUIParts = await Promise.all(
-        files.map(async (f) => ({
-          type: "file" as const,
-          url: await readFileAsDataURL(f),
-          mediaType: f.type,
-          filename: f.name,
-        }))
+        files.map(async (f) => {
+          const { url, mediaType } = await compressImage(f);
+          return {
+            type: "file" as const,
+            url,
+            mediaType,
+            filename: f.name,
+          };
+        })
       );
     }