From 936bc64b82efcbec598f5acb07ae086cb601d7a1 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sat, 28 Sep 2024 06:15:50 -0700
Subject: [PATCH] Render images to take full width of chat message div

Remove unnecessary "Inferred Query" heading prefix to image generation prompt
used by Khoj. The inferred query in chat message has a heading of it's
own, so avoid two headings for the image prompt
---
 src/interface/web/app/common/chatFunctions.ts      |  2 +-
 .../components/chatMessage/chatMessage.module.css  | 14 ++++++++------
 .../web/app/components/chatMessage/chatMessage.tsx |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/interface/web/app/common/chatFunctions.ts b/src/interface/web/app/common/chatFunctions.ts
index 14c6fb500..6d7c9bc1c 100644
--- a/src/interface/web/app/common/chatFunctions.ts
+++ b/src/interface/web/app/common/chatFunctions.ts
@@ -126,7 +126,7 @@ export function handleImageResponse(imageJson: any, liveStream: boolean): Respon
             rawResponse = `![](data:image/webp;base64,${imageJson.image})`;
         }
         if (inferredQuery && !liveStream) {
-            rawResponse += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
+            rawResponse += `\n\n${inferredQuery}`;
         }
     }
 
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index 2001317e2..650483104 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -58,18 +58,20 @@ div.emptyChatMessage {
 }
 
 div.chatMessageContainer img {
-    width: 50%;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 80vh;
+    object-fit: contain;
+    display: block;
+    margin-top: 0.25rem;
+    margin-right: auto;
 }
 
 div.chatMessageContainer h3 img {
     width: 24px;
 }
 
-div.you img {
-    height: 16rem;
-    width: auto;
-}
-
 div.you {
     color: hsla(var(--secondary-foreground));
 }
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index 1a3459121..e1beedffc 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -347,7 +347,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
             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]}`;
+            message += `\n\n${props.chatMessage.intent["inferred-queries"][0]}`;
         }
 
         setTextRendered(message);