From 5b6dbf9f6416b52f5a9be938a092135f069afca6 Mon Sep 17 00:00:00 2001
From: Pamela Fox <pamela.fox@gmail.com>
Date: Wed, 19 Mar 2025 17:28:04 -0700
Subject: [PATCH 1/2] Render images in chat

---
 app/frontend/src/pages/chat/Chat.tsx | 31 ++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/app/frontend/src/pages/chat/Chat.tsx b/app/frontend/src/pages/chat/Chat.tsx
index e3c0cfd77f..4340938fb9 100644
--- a/app/frontend/src/pages/chat/Chat.tsx
+++ b/app/frontend/src/pages/chat/Chat.tsx
@@ -385,6 +385,21 @@ const Chat = () => {
                                     <div key={index}>
                                         <UserChatMessage message={streamedAnswer[0]} />
                                         <div className={styles.chatMessageGpt}>
+                                            {/* Render images from data_points before text streams in */}
+                                            {!Array.isArray(streamedAnswer[1].context.data_points) &&
+                                                streamedAnswer[1].context.data_points.images &&
+                                                streamedAnswer[1].context.data_points.images.length > 0 && (
+                                                    <div className={styles.answerImages}>
+                                                        {streamedAnswer[1].context.data_points.images.map((img, i) => (
+                                                            <img
+                                                                key={`answer-image-${i}`}
+                                                                src={img}
+                                                                alt={`Answer image ${i + 1}`}
+                                                                className={styles.answerImage}
+                                                            />
+                                                        ))}
+                                                    </div>
+                                                )}
                                             <Answer
                                                 isStreaming={true}
                                                 key={index}
@@ -408,6 +423,22 @@ const Chat = () => {
                                     <div key={index}>
                                         <UserChatMessage message={answer[0]} />
                                         <div className={styles.chatMessageGpt}>
+                                            {/* Render images from data_points before text content */}
+                                            {!Array.isArray(answer[1].context.data_points) &&
+                                                answer[1].context.data_points.images &&
+                                                answer[1].context.data_points.images.length > 0 && (
+                                                    <div className={styles.answerImages}>
+                                                        {answer[1].context.data_points.images.map((img, i) => (
+                                                            <img
+                                                                key={`answer-image-${i}`}
+                                                                src={img}
+                                                                width="100"
+                                                                alt={`Answer image ${i + 1}`}
+                                                                className={styles.answerImage}
+                                                            />
+                                                        ))}
+                                                    </div>
+                                                )}
                                             <Answer
                                                 isStreaming={false}
                                                 key={index}

From 39f1d8e3b3bcf6d9e5c5bb5058e8943e5c60c83d Mon Sep 17 00:00:00 2001
From: Pamela Fox <pamela.fox@gmail.com>
Date: Wed, 19 Mar 2025 17:28:46 -0700
Subject: [PATCH 2/2] Render images in chat

---
 app/frontend/src/pages/chat/Chat.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/frontend/src/pages/chat/Chat.tsx b/app/frontend/src/pages/chat/Chat.tsx
index 4340938fb9..4ebaa721fc 100644
--- a/app/frontend/src/pages/chat/Chat.tsx
+++ b/app/frontend/src/pages/chat/Chat.tsx
@@ -394,6 +394,7 @@ const Chat = () => {
                                                             <img
                                                                 key={`answer-image-${i}`}
                                                                 src={img}
+                                                                width="100"
                                                                 alt={`Answer image ${i + 1}`}
                                                                 className={styles.answerImage}
                                                             />