Merge pull request #49 from Royal-lobster/fix-images-not-loading

Fix Images not loading
Royal-lobster · Nov 26, 2023 · e43e28c · e43e28c
2 parents c661cb4 + 9efbfd6
commit e43e28c
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/.changeset/little-pigs-train.md b/.changeset/little-pigs-train.md
@@ -0,0 +1,5 @@
+---
+"syncia": patch
+---
+
+Fixes screenshot tool images not loading up back to existing chat
diff --git a/artifacts/chrome.zip b/artifacts/chrome.zip
diff --git a/src/components/Sidebar/chat/FilePreviewBar.tsx b/src/components/Sidebar/chat/FilePreviewBar.tsx
@@ -12,7 +12,8 @@ const FilePreviewBar = ({ files, removeFile }: FilePreviewBarProps) => {
   return (
     <div className="cdx-flex cdx-gap-2 cdx-m-2">
       {files.map((file) => {
-        const imageUrl = URL.createObjectURL(file.blob)
+        const imageUrl = file.src
+
         return (
           <div key={file.id} className="cdx-flex cdx-relative">
             <a

diff --git a/src/hooks/useChatCompletion.ts b/src/hooks/useChatCompletion.ts
@@ -3,10 +3,9 @@ import { ChatOpenAI } from 'langchain/chat_models/openai'
 import { AIMessage, HumanMessage, SystemMessage } from 'langchain/schema'
 import { useMemo, useState } from 'react'
 import { AvailableModels, Mode } from '../config/settings'
-import { ChatRole, useCurrentChat } from './useCurrentChat'
 import { getMatchedContent } from '../lib/getMatchedContent'
+import { ChatRole, useCurrentChat } from './useCurrentChat'
 import { MessageDraft } from './useMessageDraft'
-import { convertBlobToBase64 } from '../lib/convertBlobToBase64'
 
 interface UseChatCompletionProps {
   model: AvailableModels
@@ -108,7 +107,7 @@ export const useChatCompletion = ({
                   message.files.map(async (file) => {
                     return {
                       type: 'image_url',
-                      image_url: await convertBlobToBase64(file.blob),
+                      image_url: file.src,
                     } as const
                   }),
                 )

diff --git a/src/hooks/useMessageDraft.ts b/src/hooks/useMessageDraft.ts
@@ -1,10 +1,11 @@
 import { useState } from 'react'
 import { getUUID } from '../lib/getUUID'
+import { convertBlobToBase64 } from '../lib/convertBlobToBase64'
 
 export interface MessageFile {
   id: string
   type: string
-  blob: Blob
+  src: string
 }
 
 export interface MessageDraft {
@@ -22,11 +23,11 @@ export const useMessageDraft = () => {
     setMessageDraft((p) => ({ ...p, text }))
   }
 
-  const addMessageDraftFile = (blob: Blob) => {
+  const addMessageDraftFile = async (blob: Blob) => {
     const file = {
       id: getUUID(),
       type: blob.type,
-      blob,
+      src: await convertBlobToBase64(blob),
     }
     setMessageDraft((p) => ({ ...p, files: [...p.files, file] }))
   }