From f84606325ce7294cd5489c17f4948b29b36dffd6 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sun, 25 Feb 2024 00:39:58 +0530
Subject: [PATCH] Improve render of inferred query in image chat messages in
 Web, Desktop apps

---
 src/interface/desktop/chat.html  | 17 +++++++----------
 src/khoj/interface/web/chat.html | 14 ++++++--------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index b3083168..3d281dfb 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -199,10 +199,9 @@
         function renderMessageWithReference(message, by, context=null, dt=null, onlineContext=null, intentType=null, inferredQueries=null) {
             if (intentType === "text-to-image") {
                 let imageMarkdown = `![](data:image/png;base64,${message})`;
-                imageMarkdown += "\n\n";
-                if (inferredQueries) {
-                    const inferredQuery = inferredQueries?.[0];
-                    imageMarkdown += `**Inferred Query**: ${inferredQuery}`;
+                const inferredQuery = inferredQueries?.[0];
+                if (inferredQuery) {
+                    imageMarkdown += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
                 }
                 renderMessage(imageMarkdown, by, dt);
                 return;
@@ -392,10 +391,9 @@
                     if (responseAsJson.image) {
                         // If response has image field, response is a generated image.
                         rawResponse += `![${query}](data:image/png;base64,${responseAsJson.image})`;
-                        rawResponse += "\n\n";
                         const inferredQueries = responseAsJson.inferredQueries?.[0];
                         if (inferredQueries) {
-                            rawResponse += `**Inferred Query**: ${inferredQueries}`;
+                            rawResponse += `\n\n**Inferred Query**:\n\n${inferredQueries}`;
                         }
                     }
                     if (responseAsJson.detail) {
@@ -496,10 +494,9 @@
                                     if (responseAsJson.image) {
                                         // If response has image field, response is a generated image.
                                         rawResponse += `![${query}](data:image/png;base64,${responseAsJson.image})`;
-                                        rawResponse += "\n\n";
-                                        const inferredQueries = responseAsJson.inferredQueries?.[0];
-                                        if (inferredQueries) {
-                                            rawResponse += `**Inferred Query**: ${inferredQueries}`;
+                                        const inferredQuery = responseAsJson.inferredQueries?.[0];
+                                        if (inferredQuery) {
+                                            rawResponse += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
                                         }
                                     }
                                     if (responseAsJson.detail) {
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index a2229376..af4f498e 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -211,10 +211,9 @@ To get started, just start typing below. You can also type / to see a list of co
         function renderMessageWithReference(message, by, context=null, dt=null, onlineContext=null, intentType=null, inferredQueries=null) {
             if (intentType === "text-to-image") {
                 let imageMarkdown = `![](data:image/png;base64,${message})`;
-                imageMarkdown += "\n\n";
-                if (inferredQueries) {
-                    const inferredQuery = inferredQueries?.[0];
-                    imageMarkdown += `**Inferred Query**: ${inferredQuery}`;
+                const inferredQuery = inferredQueries?.[0];
+                if (inferredQuery) {
+                    imageMarkdown += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
                 }
                 renderMessage(imageMarkdown, by, dt);
                 return;
@@ -400,10 +399,9 @@ To get started, just start typing below. You can also type / to see a list of co
                     if (responseAsJson.image) {
                         // If response has image field, response is a generated image.
                         rawResponse += `![${query}](data:image/png;base64,${responseAsJson.image})`;
-                        rawResponse += "\n\n";
-                        const inferredQueries = responseAsJson.inferredQueries?.[0];
-                        if (inferredQueries) {
-                            rawResponse += `**Inferred Query**: ${inferredQueries}`;
+                        const inferredQuery = responseAsJson.inferredQueries?.[0];
+                        if (inferredQuery) {
+                            rawResponse += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
                         }
                     }
                     if (responseAsJson.detail) {