llm-fe/src/llm-fe/pages/AsyncDashboard2/AsyncDashboard2.tsx

@@ -335,15 +335,15 @@ const AlwaysScrollToBottom = ({ trigger }: { trigger: string | number }): JSX.El
   return <div ref={elementRef} />;
 };
 
-const AttachmentPreview = ({ file }: { file: File | null }): JSX.Element | null => {
+const AttachmentPreview = ({ file }: { file: Blob | null }): JSX.Element | null => {
   const theme = useContext(ThemeContext);
   const [url, setUrl] = useState<string | null>(null);
   useEffect(() => {
-    if (!isImageFile(file)) {
+    if (!file || !isImageFile(file)) {
       setUrl(null);
       return;
     }
-    const next = URL.createObjectURL(file as File);
+    const next = URL.createObjectURL(file);
     setUrl(next);
     return () => URL.revokeObjectURL(next);
   }, [file]);
@@ -370,7 +370,7 @@ const AttachmentPreview = ({ file }: { file: File | null }): JSX.Element | null
       color: theme?.darkMode ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.6)",
       textAlign: "center",
     }}>
-      Attached: {file.name}
+      Attached: {file instanceof File ? file.name : "attachment"}
     </div>
   );
 };
@@ -473,7 +473,7 @@ const AsyncDashboardInner = (): JSX.Element => {
     }
     try {
       clearActivity();
-      const attachedImage = isImageFile(file) ? URL.createObjectURL(file as File) : null;
+      const attachedImage = file && isImageFile(file) ? URL.createObjectURL(file) : null;
       const tempConversations: ConversationPrompt[] = [
         ...conversationDetails,
         new ConversationPrompt({
@@ -753,7 +753,7 @@ const AsyncDashboardInner = (): JSX.Element => {
                     </span>
                   </Tooltip>
                 </StyledInputContainer>
-                <AttachmentPreview file={formik.values.file as File | null} />
+                <AttachmentPreview file={formik.values.file} />
               </Form>
             )}
           </Formik>

llm-fe/src/llm-fe/utils/visionAttachment.test.ts

@@ -16,6 +16,7 @@ describe('visionAttachment', () => {
   it('detects image files', () => {
     expect(isImageFile(new File(['x'], 'a.png', { type: 'image/png' }))).toBe(true);
     expect(isImageFile(new File(['x'], 'a.pdf', { type: 'application/pdf' }))).toBe(false);
+    expect(isImageFile(new Blob(['x'], { type: 'image/png' }))).toBe(true);
     expect(isImageFile(null)).toBe(false);
   });
 });

llm-fe/src/llm-fe/utils/visionAttachment.ts

@@ -1,7 +1,7 @@
 export const CHAT_FILE_ACCEPT =
   '.csv,.xlsx,.txt,.pdf,.PDF,image/png,image/jpeg,image/webp,image/gif';
 
-export function isImageFile(file: File | null | undefined): boolean {
+export function isImageFile(file: Blob | null | undefined): boolean {
   return Boolean(file && file.type.startsWith('image/'));
 }