Fix: Resize image before conversation and save history (#1116)

Co-authored-by: Ian Seabock (Centific Technologies Inc) <v-ianseabock@microsoft.com>

Author: iseabock

frontend/src/components/QuestionInput/QuestionInput.tsx

@@ -7,6 +7,7 @@ import Send from '../../assets/Send.svg'
 import styles from './QuestionInput.module.css'
 import { ChatMessage } from '../../api'
 import { AppStateContext } from '../../state/AppProvider'
+import { resizeImage } from '../../utils/resizeImage'
 
 interface Props {
   onSend: (question: ChatMessage['content'], id?: string) => void
@@ -32,17 +33,12 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, conv
   };
 
   const convertToBase64 = async (file: Blob) => {
-    const reader = new FileReader();
-
-    reader.readAsDataURL(file);
-
-    reader.onloadend = () => {
-      setBase64Image(reader.result as string);
-    };
-
-    reader.onerror = (error) => {
-      console.error('Error: ', error);
-    };
+    try {
+      const resizedBase64 = await resizeImage(file, 800, 800);
+      setBase64Image(resizedBase64);
+    } catch (error) {
+      console.error('Error:', error);
+    }
   };
 
   const sendQuestion = () => {

frontend/src/pages/chat/Chat.tsx

@@ -652,7 +652,7 @@ const Chat = () => {
         }
         const noContentError = appStateContext.state.currentChat.messages.find(m => m.role === ERROR)
 
-        if (typeof noContentError?.content === "string" && !noContentError?.content.includes(NO_CONTENT_ERROR)) {
+        if (!noContentError) {
           saveToDB(appStateContext.state.currentChat.messages, appStateContext.state.currentChat.id)
             .then(res => {
               if (!res.ok) {

frontend/src/utils/resizeImage.ts

@@ -1,37 +1,47 @@
-export const resizeImage = (file: Blob, maxWidth: number, maxHeight: number) => {
-  const img = new Image()
-  const reader = new FileReader()
-
-  reader.readAsDataURL(file)
-  reader.onloadend = () => {
-    img.src = reader.result as string
-    img.onload = () => {
-      const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')
-
-      let { width, height } = img
-
-      if (width > maxWidth || height > maxHeight) {
-        if (width > height) {
-          height *= maxWidth / width
-          width = maxWidth
-        } else {
-          width *= maxHeight / height
-          height = maxHeight
+export const resizeImage = (file: Blob, maxWidth: number, maxHeight: number): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    const reader = new FileReader()
+
+    reader.readAsDataURL(file)
+    reader.onloadend = () => {
+      img.src = reader.result as string
+      img.onload = () => {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        let { width, height } = img
+
+        // Calculate the new dimensions
+        if (width > maxWidth || height > maxHeight) {
+          if (width > height) {
+            height = (maxWidth / width) * height
+            width = maxWidth
+          } else {
+            width = (maxHeight / height) * width
+            height = maxHeight
+          }
+        }
+
+        canvas.width = width
+        canvas.height = height
+
+        if (ctx) {
+          ctx.drawImage(img, 0, 0, width, height)
         }
+
+        // Convert the canvas to a base64 string
+        const resizedBase64 = canvas.toDataURL('image/jpeg', 0.8)
+        resolve(resizedBase64)
       }
 
-      canvas.width = width
-      canvas.height = height
-      if (ctx) {
-        ctx.drawImage(img, 0, 0, width, height)
+      img.onerror = error => {
+        reject('Error loading image: ' + error)
       }
+    }
 
-      const resizedBase64 = canvas.toDataURL('image/jpeg', 0.8)
-      return resizedBase64
+    reader.onerror = error => {
+      reject('Error reading file: ' + error)
     }
-  }
-  reader.onerror = error => {
-    console.error('Error: ', error)
-  }
+  })
 }

static/assets/index-59f36d49.js renamed to static/assets/index-c5246876.js

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/x-icon" href="{{ favicon }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="/assets/index-59f36d49.js"></script>
+    <script type="module" crossorigin src="/assets/index-c5246876.js"></script>
     <link rel="stylesheet" href="/assets/index-65ec62ea.css">
   </head>
   <body>