From b98a0cfe1bae6e97f7334dbd3b012e42becabfd0 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Fri, 12 Jul 2024 15:12:24 +0530
Subject: [PATCH] Render inline png, webp images generated by Khoj in chat view

Add spacing between chat message paragraphs
---
 .../components/chatMessage/chatMessage.module.css   |  3 +++
 .../web/app/components/chatMessage/chatMessage.tsx  | 13 +++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index 20871831..de52e4be 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -10,6 +10,9 @@ div.chatMessageContainer {
 div.chatMessageWrapper {
     padding-left: 24px;
 }
+div.chatMessageWrapper p:not(:last-child) {
+    margin-bottom: 16px;
+}
 
 div.khojfullHistory {
     border-width: 1px;
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index d63d5cbf..691d7bbf 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -216,8 +216,15 @@ export default function ChatMessage(props: ChatMessageProps) {
         message = message.replace(/\\\(/g, 'LEFTPAREN').replace(/\\\)/g, 'RIGHTPAREN')
             .replace(/\\\[/g, 'LEFTBRACKET').replace(/\\\]/g, 'RIGHTBRACKET');
 
-        if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image2") {
-            message = `![generated_image](${message})\n\n${props.chatMessage.intent["inferred-queries"][0]}`
+        if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image") {
+            message = `![generated image](data:image/png;base64,${message})`;
+        } else if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image2") {
+            message = `![generated image](${message})`;
+        } else if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image-v3") {
+            message = `![generated image](data:image/webp;base64,${message})`;
+        }
+        if (props.chatMessage.intent && props.chatMessage.intent.type.includes("text-to-image") && props.chatMessage.intent["inferred-queries"]?.length > 0) {
+            message += `\n\n**Inferred Query**\n\n${props.chatMessage.intent["inferred-queries"][0]}`;
         }
 
         let markdownRendered = md.render(message);
@@ -225,6 +232,8 @@ export default function ChatMessage(props: ChatMessageProps) {
         // Replace placeholders with LaTeX delimiters
         markdownRendered = markdownRendered.replace(/LEFTPAREN/g, '\\(').replace(/RIGHTPAREN/g, '\\)')
             .replace(/LEFTBRACKET/g, '\\[').replace(/RIGHTBRACKET/g, '\\]');
+
+        // Sanitize and set the rendered markdown
         setMarkdownRendered(DomPurify.sanitize(markdownRendered));
     }, [props.chatMessage.message]);