Fix rendering image on chat response in web, desktop client

src/interface/desktop/chat.html

@@ -345,13 +345,41 @@
             let chatInput = document.getElementById("chat-input");
             chatInput.classList.remove("option-enabled");
 
-            // Call specified Khoj API which returns a streamed response of type text/plain
+            // Call specified Khoj API
             let response = await fetch(url, { headers });
+            let rawResponse = "";
+            const contentType = response.headers.get("content-type");
+
+            if (contentType === "application/json") {
+                // Handle JSON response
+                try {
+                    const responseAsJson = await response.json();
+                    if (responseAsJson.image) {
+                        // If response has image field, response is a generated image.
+                        rawResponse += `![${query}](data:image/png;base64,${responseAsJson.image})`;
+                    }
+                    if (responseAsJson.detail) {
+                        // If response has detail field, response is an error message.
+                        rawResponse += responseAsJson.detail;
+                    }
+                } catch (error) {
+                    // If the chunk is not a JSON object, just display it as is
+                    rawResponse += chunk;
+                } finally {
+                    newResponseText.innerHTML = "";
+                    newResponseText.appendChild(formatHTMLMessage(rawResponse));
+
+                    document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
+                    document.getElementById("chat-input").removeAttribute("disabled");
+                }
+            } else {
+                // Handle streamed response of type text/event-stream or text/plain
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder();
-            let rawResponse = "";
                 let references = null;
 
+                readStream();
+
                 function readStream() {
                     reader.read().then(({ done, value }) => {
                         if (done) {
@@ -452,7 +480,7 @@
                         document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
                     });
                 }
-            readStream();
+            }
         }
 
         function incrementalChat(event) {

src/khoj/interface/web/chat.html

@@ -350,13 +350,41 @@ To get started, just start typing below. You can also type / to see a list of co
             let chatInput = document.getElementById("chat-input");
             chatInput.classList.remove("option-enabled");
 
-            // Call specified Khoj API which returns a streamed response of type text/plain
+            // Call specified Khoj API
             let response = await fetch(url);
+            let rawResponse = "";
+            const contentType = response.headers.get("content-type");
+
+            if (contentType === "application/json") {
+                // Handle JSON response
+                try {
+                    const responseAsJson = await response.json();
+                    if (responseAsJson.image) {
+                        // If response has image field, response is a generated image.
+                        rawResponse += `![${query}](data:image/png;base64,${responseAsJson.image})`;
+                    }
+                    if (responseAsJson.detail) {
+                        // If response has detail field, response is an error message.
+                        rawResponse += responseAsJson.detail;
+                    }
+                } catch (error) {
+                    // If the chunk is not a JSON object, just display it as is
+                    rawResponse += chunk;
+                } finally {
+                    newResponseText.innerHTML = "";
+                    newResponseText.appendChild(formatHTMLMessage(rawResponse));
+
+                    document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
+                    document.getElementById("chat-input").removeAttribute("disabled");
+                }
+            } else {
+                // Handle streamed response of type text/event-stream or text/plain
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder();
-            let rawResponse = "";
                 let references = null;
 
+                readStream();
+
                 function readStream() {
                     reader.read().then(({ done, value }) => {
                         if (done) {
@@ -426,37 +454,18 @@ To get started, just start typing below. You can also type / to see a list of co
                                 newResponseText.removeChild(loadingSpinner);
                             }
 
-                        // Try to parse the chunk as a JSON object. It will be a JSON object if there is an error.
-                        if (chunk.startsWith("{") && chunk.endsWith("}")) {
-                            try {
-                                const responseAsJson = JSON.parse(chunk);
-                                if (responseAsJson.image) {
-                                    rawResponse += `![${query}](data:image/png;base64,${responseAsJson.image})`;
-                                }
-                                if (responseAsJson.detail) {
-                                    rawResponse += responseAsJson.detail;
-                                }
-                            } catch (error) {
-                                // If the chunk is not a JSON object, just display it as is
-                                rawResponse += chunk;
-                            } finally {
-                                newResponseText.innerHTML = "";
-                                newResponseText.appendChild(formatHTMLMessage(rawResponse));
-                            }
-                        } else {
                             // If the chunk is not a JSON object, just display it as is
                             rawResponse += chunk;
                             newResponseText.innerHTML = "";
                             newResponseText.appendChild(formatHTMLMessage(rawResponse));
                             readStream();
                         }
-                    }
+                    });
 
                     // Scroll to bottom of chat window as chat response is streamed
                     document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
-                });
+                };
             }
-            readStream();
         };
 
         function incrementalChat(event) {