From e2b2b3415e00f42462b99c37912c9bd2570b30ea Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Wed, 15 Jan 2025 20:52:26 +0700
Subject: [PATCH] Fix handling of inline base64 images by Obsidian, Desktop
 clients

Fix for #1082 pushed down adding the `data:image/webp;base64' prefix
of the base64 images to the server image gen API. But the code on the
Obsidian and Desktop client still add these prefixes.

This change stops the Desktop, Obsidian clients from adding the prefix
as it is being handled by the API now. It should resolve showing
images inline in those clients as well
---
 src/interface/desktop/chatutils.js      |  4 ++--
 src/interface/obsidian/src/chat_view.ts | 22 +++++-----------------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/interface/desktop/chatutils.js b/src/interface/desktop/chatutils.js
index 48fb72c3..7fb05e1a 100644
--- a/src/interface/desktop/chatutils.js
+++ b/src/interface/desktop/chatutils.js
@@ -229,7 +229,7 @@ function generateImageMarkdown(message, intentType, inferredQueries=null) { //sa
     } else if (intentType === "text-to-image2") {
         imageMarkdown = `![](${message})`;
     } else if (intentType === "text-to-image-v3") {
-        imageMarkdown = `![](data:image/webp;base64,${message})`;
+        imageMarkdown = `![](${message})`;
     }
     const inferredQuery = inferredQueries?.[0];
     if (inferredQuery) {
@@ -423,7 +423,7 @@ function handleImageResponse(imageJson, rawResponse) {
         } else if (imageJson.intentType === "text-to-image2") {
             rawResponse += `![generated_image](${imageJson.image})`;
         } else if (imageJson.intentType === "text-to-image-v3") {
-            rawResponse = `![](data:image/webp;base64,${imageJson.image})`;
+            rawResponse = `![](${imageJson.image})`;
         } else if (imageJson.intentType === "excalidraw") {
             const redirectMessage = `Hey, I'm not ready to show you diagrams yet here. But you can view it in the web app`;
             rawResponse += redirectMessage;
diff --git a/src/interface/obsidian/src/chat_view.ts b/src/interface/obsidian/src/chat_view.ts
index 86d5e1f9..e25a673b 100644
--- a/src/interface/obsidian/src/chat_view.ts
+++ b/src/interface/obsidian/src/chat_view.ts
@@ -524,21 +524,14 @@ export class KhojChatView extends KhojPaneView {
         } else if (intentType === "text-to-image2") {
             imageMarkdown = `![](${message})`;
         } else if (intentType === "text-to-image-v3") {
-            imageMarkdown = `![](data:image/webp;base64,${message})`;
+            imageMarkdown = `![](${message})`;
         } else if (intentType === "excalidraw" || excalidrawDiagram) {
             const domain = this.setting.khojUrl.endsWith("/") ? this.setting.khojUrl : `${this.setting.khojUrl}/`;
             const redirectMessage = `Hey, I'm not ready to show you diagrams yet here. But you can view it in ${domain}chat?conversationId=${conversationId}`;
             imageMarkdown = redirectMessage;
         } else if (images && images.length > 0) {
-            for (let image of images) {
-                if (image.startsWith("https://")) {
-                    imageMarkdown += `![](${image})\n\n`;
-                } else {
-                    imageMarkdown += `![](data:image/png;base64,${image})\n\n`;
-                }
-            }
-
-            imageMarkdown += `${message}`;
+            imageMarkdown += images.map(image => `![](${image})`).join('\n\n');
+            imageMarkdown += message;
         }
 
         if (images?.length === 0 && inferredQueries) {
@@ -1384,7 +1377,7 @@ export class KhojChatView extends KhojPaneView {
             } else if (imageJson.intentType === "text-to-image2") {
                 rawResponse += `![generated_image](${imageJson.image})`;
             } else if (imageJson.intentType === "text-to-image-v3") {
-                rawResponse = `![](data:image/webp;base64,${imageJson.image})`;
+                rawResponse = `![generated_image](${imageJson.image})`;
             } else if (imageJson.intentType === "excalidraw") {
                 const domain = this.setting.khojUrl.endsWith("/") ? this.setting.khojUrl : `${this.setting.khojUrl}/`;
                 const redirectMessage = `Hey, I'm not ready to show you diagrams yet here. But you can view it in ${domain}`;
@@ -1396,12 +1389,7 @@ export class KhojChatView extends KhojPaneView {
         } else if (imageJson.images) {
             // If response has images field, response is a list of generated images.
             imageJson.images.forEach((image: any) => {
-
-                if (image.startsWith("http")) {
-                    rawResponse += `![generated_image](${image})\n\n`;
-                } else {
-                    rawResponse += `![generated_image](data:image/png;base64,${image})\n\n`;
-                }
+                rawResponse += `![generated_image](${image})\n\n`;
             });
         } else if (imageJson.excalidrawDiagram) {
             const domain = this.setting.khojUrl.endsWith("/") ? this.setting.khojUrl : `${this.setting.khojUrl}/`;