Update response handling in Obsidian to work with new format

src/interface/obsidian/src/chat_view.ts

@@ -485,12 +485,18 @@ export class KhojChatView extends KhojPaneView {
         intentType?: string,
         inferredQueries?: string[],
         conversationId?: string,
+        images?: string[],
+        excalidrawDiagram?: string
     ) {
         if (!message) return;
 
         let chatMessageEl;
-        if (intentType?.includes("text-to-image") || intentType === "excalidraw") {
+        if (
-            let imageMarkdown = this.generateImageMarkdown(message, intentType, inferredQueries, conversationId);
+            intentType?.includes("text-to-image") ||
+            intentType === "excalidraw" ||
+            (images && images.length > 0) ||
+            excalidrawDiagram) {
+            let imageMarkdown = this.generateImageMarkdown(message, intentType ?? "", inferredQueries, conversationId, images, excalidrawDiagram);
             chatMessageEl = this.renderMessage(chatEl, imageMarkdown, sender, dt);
         } else {
             chatMessageEl = this.renderMessage(chatEl, message, sender, dt);
@@ -510,7 +516,7 @@ export class KhojChatView extends KhojPaneView {
         chatMessageBodyEl.appendChild(this.createReferenceSection(references));
     }
 
-    generateImageMarkdown(message: string, intentType: string, inferredQueries?: string[], conversationId?: string): string {
+    generateImageMarkdown(message: string, intentType: string, inferredQueries?: string[], conversationId?: string, images?: string[], excalidrawDiagram?: string): string {
         let imageMarkdown = "";
         if (intentType === "text-to-image") {
             imageMarkdown = `![](data:image/png;base64,${message})`;
@@ -518,11 +524,20 @@ export class KhojChatView extends KhojPaneView {
             imageMarkdown = `![](${message})`;
         } else if (intentType === "text-to-image-v3") {
             imageMarkdown = `![](data:image/webp;base64,${message})`;
-        } else if (intentType === "excalidraw") {
+        } 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`;
                 }
+            }
+        }
+
         if (inferredQueries) {
             imageMarkdown += "\n\n**Inferred Query**:";
             for (let inferredQuery of inferredQueries) {
@@ -890,6 +905,8 @@ export class KhojChatView extends KhojPaneView {
                         chatLog.intent?.type,
                         chatLog.intent?.["inferred-queries"],
                         chatBodyEl.dataset.conversationId ?? "",
+                        chatLog.images,
+                        chatLog.excalidrawDiagram,
                     );
                     // push the user messages to the chat history
                     if (chatLog.by === "you") {
@@ -988,7 +1005,7 @@ export class KhojChatView extends KhojPaneView {
     }
 
     handleJsonResponse(jsonData: any): void {
-        if (jsonData.image || jsonData.detail) {
+        if (jsonData.image || jsonData.detail || jsonData.images || jsonData.excalidrawDiagram) {
             this.chatMessageState.rawResponse = this.handleImageResponse(jsonData, this.chatMessageState.rawResponse);
         } else if (jsonData.response) {
             this.chatMessageState.rawResponse = jsonData.response;
@@ -1368,7 +1385,22 @@ export class KhojChatView extends KhojPaneView {
             if (inferredQuery) {
                 rawResponse += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
             }
+        } 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`;
                 }
+            });
+        } else if (imageJson.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}`;
+            rawResponse += redirectMessage;
+        }
+
         // If response has detail field, response is an error message.
         if (imageJson.detail) rawResponse += imageJson.detail;
 

src/interface/obsidian/styles.css

@@ -82,7 +82,8 @@ If your plugin does not need CSS, delete this file.
 }
 /* color chat bubble by khoj blue */
 .khoj-chat-message-text.khoj {
-    border: 1px solid var(--khoj-sun);
+    border-top: 1px solid var(--khoj-sun);
+    border-radius: 0px;
     margin-left: auto;
     white-space: pre-line;
 }
@@ -104,8 +105,9 @@ If your plugin does not need CSS, delete this file.
 }
 /* color chat bubble by you dark grey */
 .khoj-chat-message-text.you {
-    border: 1px solid var(--color-accent);
+    color: var(--text-normal);
     margin-right: auto;
+    background-color: var(--background-modifier-cover);
 }
 /* add right protrusion to you chat bubble */
 .khoj-chat-message-text.you:after {