From 3cc1426edf7ea60e814d2f1704d5c4ebce51a26f Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sat, 19 Oct 2024 16:47:27 -0700
Subject: [PATCH] Style user attached images with fixed height, in a single row
 on web app

---
 .../chatMessage/chatMessage.module.css        | 21 ++++++++++++++++++-
 .../components/chatMessage/chatMessage.tsx    |  8 +++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index 65048310..ba9372b8 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -57,7 +57,26 @@ div.emptyChatMessage {
     display: none;
 }
 
-div.chatMessageContainer img {
+div.imagesContainer {
+    display: flex;
+    overflow-x: auto;
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+}
+
+div.imageWrapper {
+    flex: 0 0 auto;
+    margin-right: 8px;
+}
+
+div.imageWrapper img {
+    width: auto;
+    height: 128px;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+div.chatMessageContainer > img {
     width: auto;
     height: auto;
     max-width: 100%;
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index e0d0f09c..205acc49 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -330,11 +330,11 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
         if (props.chatMessage.images && props.chatMessage.images.length > 0) {
             const imagesInMd = props.chatMessage.images
                 .map(
-                    (image) =>
-                        `![uploaded image](${image.startsWith("data%3Aimage") ? decodeURIComponent(image) : image})`,
+                    (image, index) =>
+                        `<div class="${styles.imageWrapper}"><img src="${image.startsWith("data%3Aimage") ? decodeURIComponent(image) : image}" alt="uploaded image ${index + 1}" /></div>`,
                 )
-                .join("\n\n");
-            message = `${imagesInMd}\n\n${message}`;
+                .join("");
+            message = `<div class="${styles.imagesContainer}">${imagesInMd}</div>${message}`;
         }
 
         if (props.chatMessage.intent && props.chatMessage.intent.type == "text-to-image") {