create-supyagent-app 0.1.24 → 0.1.25

package/package.json

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

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,
+          };
+        })
       );
     }