New Feature: Vision Support for Khoj

src/interface/web/app/chat/page.tsx

@@ -163,6 +163,7 @@ export default function Chat() {
                 completed: false,
                 timestamp: new Date().toISOString(),
                 rawQuery: queryToProcess || "",
+                uploadedImageData: decodeURIComponent(image64),
             };
             setMessages((prevMessages) => [...prevMessages, newStreamMessage]);
             setProcessQuerySignal(true);
@@ -193,6 +194,7 @@ export default function Chat() {
             if (done) {
                 setQueryToProcess("");
                 setProcessQuerySignal(false);
+                setImage64("");
                 break;
             }
 

src/interface/web/app/components/chatHistory/chatHistory.tsx

@@ -267,6 +267,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
                                             created: message.timestamp,
                                             by: "you",
                                             automationId: "",
+                                            uploadedImageData: message.uploadedImageData,
                                         }}
                                         customClassName="fullHistory"
                                         borderLeftColor={`${data?.agent.color}-500`}
@@ -309,6 +310,7 @@ export default function ChatHistory(props: ChatHistoryProps) {
                                 created: new Date().getTime().toString(),
                                 by: "you",
                                 automationId: "",
+                                uploadedImageData: props.pendingMessage,
                             }}
                             customClassName="fullHistory"
                             borderLeftColor={`${data?.agent.color}-500`}

src/interface/web/app/components/chatInputArea/chatInputArea.tsx

@@ -114,7 +114,9 @@ export default function ChatInputArea(props: ChatInputProps) {
                 };
                 reader.readAsDataURL(blob);
             }
+            setUploading(false);
         }
+        setUploading(true);
         fetchImageData();
     }, [imagePath]);
 
@@ -154,7 +156,6 @@ export default function ChatInputArea(props: ChatInputProps) {
     }
 
     function handleDragAndDropFiles(event: React.DragEvent<HTMLDivElement>) {
-
         event.preventDefault();
         setIsDragAndDropping(false);
 
@@ -170,18 +171,17 @@ export default function ChatInputArea(props: ChatInputProps) {
             return;
         }
         // check for image file
-        const image_endings = ['jpg', 'jpeg', 'png']
+        const image_endings = ["jpg", "jpeg", "png"];
         for (let i = 0; i < files.length; i++) {
             const file = files[i];
-            const file_extension = file.name.split('.').pop();
+            const file_extension = file.name.split(".").pop();
             if (image_endings.includes(file_extension || "")) {
                 setImageUploaded(true);
                 setImagePath(URL.createObjectURL(file));
                 return;
             }
         }
 
-
         uploadDataForIndexing(
             files,
             setWarning,
@@ -446,16 +446,19 @@ export default function ChatInputArea(props: ChatInputProps) {
                 onDragLeave={handleDragLeave}
                 onDrop={handleDragAndDropFiles}
             >
-                {imageUploaded &&
-                <div className="absolute bottom-[80px] left-0 right-0 dark:bg-neutral-700 bg-white pt-5 pb-5 w-full rounded-lg border dark:border-none grid grid-cols-2">
-                    <div className="pl-4 pr-4">
-                        <img src={imagePath || ""} alt="img" className="w-auto max-h-[100px]"/>
-                    </div>
-                    <div className="pl-4 pr-4">
-                        <X className="w-6 h-6 float-right dark:hover:bg-[hsl(var(--background))] hover:bg-neutral-100 rounded-sm" onClick={removeImageUpload} />
+                {imageUploaded && (
+                    <div className="absolute bottom-[80px] left-0 right-0 dark:bg-neutral-700 bg-white pt-5 pb-5 w-full rounded-lg border dark:border-none grid grid-cols-2">
+                        <div className="pl-4 pr-4">
+                            <img src={imagePath || ""} alt="img" className="w-auto max-h-[100px]" />
+                        </div>
+                        <div className="pl-4 pr-4">
+                            <X
+                                className="w-6 h-6 float-right dark:hover:bg-[hsl(var(--background))] hover:bg-neutral-100 rounded-sm"
+                                onClick={removeImageUpload}
+                            />
+                        </div>
                     </div>
-                </div>
-                }
+                )}
                 <input
                     type="file"
                     multiple={true}

src/interface/web/app/components/chatMessage/chatMessage.tsx

@@ -111,6 +111,7 @@ export interface SingleChatMessage {
     rawQuery?: string;
     intent?: Intent;
     agent?: AgentData;
+    uploadedImageData?: string;
 }
 
 export interface StreamMessage {
@@ -122,6 +123,7 @@ export interface StreamMessage {
     rawQuery: string;
     timestamp: string;
     agent?: AgentData;
+    uploadedImageData?: string;
 }
 
 export interface ChatHistoryData {
@@ -203,6 +205,7 @@ interface ChatMessageProps {
     borderLeftColor?: string;
     isLastMessage?: boolean;
     agent?: AgentData;
+    uploadedImageData?: string;
 }
 
 interface TrainOfThoughtProps {
@@ -542,9 +545,15 @@ export default function ChatMessage(props: ChatMessageProps) {
             className={constructClasses(props.chatMessage)}
             onMouseLeave={(event) => setIsHovering(false)}
             onMouseEnter={(event) => setIsHovering(true)}
-            onClick={props.chatMessage.by === "khoj" ? (event) => undefined : undefined}
         >
             <div className={chatMessageWrapperClasses(props.chatMessage)}>
+                {props.chatMessage.uploadedImageData && (
+                    <img
+                        src={props.chatMessage.uploadedImageData}
+                        alt="Uploaded Image"
+                        className="h-64 !w-auto"
+                    />
+                )}
                 <div
                     ref={messageRef}
                     className={styles.chatMessage}