From 180c4e855ea35aecff006321e226eacf469adcb6 Mon Sep 17 00:00:00 2001
From: siiddhantt <siddhant.rai.5686@gmail.com>
Date: Mon, 2 Oct 2023 22:37:12 +0530
Subject: [PATCH 1/4] feat: updated sources section design

---
 .../src/conversation/ConversationBubble.tsx   | 50 ++++++++++++-------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 92411a3e..adf18885 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -60,7 +60,7 @@ const ConversationBubble = forwardRef<
         <div className="flex self-start">
           <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
           <div
-            className={`ml-2 mr-5 flex items-center rounded-3xl bg-gray-1000 p-3.5 ${
+            className={`ml-2 mr-5 flex flex-col items-center rounded-3xl bg-gray-1000 p-3.5 ${
               type === 'ERROR'
                 ? ' rounded-lg border border-red-2000 bg-red-1000 p-2 text-red-3000'
                 : ''
@@ -100,6 +100,37 @@ const ConversationBubble = forwardRef<
             >
               {message}
             </ReactMarkdown>
+            <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
+            <div className="mt-3 flex w-full flex-row items-center justify-center gap-2">
+              <div className="py-1 px-2 text-base font-semibold">Sources:</div>
+              <div className="flex grid w-1/2 grid-cols-3 flex-row flex-col items-center justify-start gap-2">
+                {DisableSourceFE
+                  ? null
+                  : sources?.map((source, index) => (
+                      <div
+                        key={index}
+                        className={`w-26 cursor-pointer rounded-xl py-1 px-2 ${
+                          openSource === index
+                            ? 'bg-[#007DFF]'
+                            : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
+                        }`}
+                        onClick={() =>
+                          setOpenSource(openSource === index ? null : index)
+                        }
+                      >
+                        <p
+                          className={`truncate text-base font-medium ${
+                            openSource === index
+                              ? 'text-white'
+                              : 'text-[#007DFF]'
+                          }`}
+                        >
+                          {index + 1}. {source.title}
+                        </p>
+                      </div>
+                    ))}
+              </div>
+            </div>
           </div>
           <div
             className={`mr-2 flex items-center justify-center ${
@@ -134,23 +165,6 @@ const ConversationBubble = forwardRef<
             ></Dislike>
           </div>
         </div>
-        <div className="ml-8 mt-2 grid w-1/2 grid-cols-3 gap-2">
-          {DisableSourceFE
-            ? null
-            : sources?.map((source, index) => (
-                <div
-                  key={index}
-                  className="w-26 cursor-pointer rounded-xl border border-gray-200 py-1 px-2 hover:bg-gray-100"
-                  onClick={() =>
-                    setOpenSource(openSource === index ? null : index)
-                  }
-                >
-                  <p className="truncate text-xs text-gray-500">
-                    {index + 1}. {source.title}
-                  </p>
-                </div>
-              ))}
-        </div>
 
         {sources && openSource !== null && sources[openSource] && (
           <div className="ml-8 mt-2 w-3/4 rounded-xl bg-blue-200 p-2">

From 1765a8a7f93378d761303dbba55b7c03843e78b9 Mon Sep 17 00:00:00 2001
From: siiddhantt <siddhant.rai.5686@gmail.com>
Date: Mon, 2 Oct 2023 23:22:04 +0530
Subject: [PATCH 2/4] fix: fixes according to figma design

---
 frontend/src/conversation/ConversationBubble.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index adf18885..56ca97d1 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -103,13 +103,13 @@ const ConversationBubble = forwardRef<
             <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
             <div className="mt-3 flex w-full flex-row items-center justify-center gap-2">
               <div className="py-1 px-2 text-base font-semibold">Sources:</div>
-              <div className="flex grid w-1/2 grid-cols-3 flex-row flex-col items-center justify-start gap-2">
+              <div className="flex flex-row items-center justify-start gap-2">
                 {DisableSourceFE
                   ? null
                   : sources?.map((source, index) => (
                       <div
                         key={index}
-                        className={`w-26 cursor-pointer rounded-xl py-1 px-2 ${
+                        className={`w-40 max-w-fit cursor-pointer rounded-[28px] py-1 px-2 ${
                           openSource === index
                             ? 'bg-[#007DFF]'
                             : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
@@ -119,7 +119,7 @@ const ConversationBubble = forwardRef<
                         }
                       >
                         <p
-                          className={`truncate text-base font-medium ${
+                          className={`truncate text-center text-base font-medium ${
                             openSource === index
                               ? 'text-white'
                               : 'text-[#007DFF]'

From afff55045f3f9e54d745ff3a01481688fe7f1dfe Mon Sep 17 00:00:00 2001
From: siiddhantt <siddhant.rai.5686@gmail.com>
Date: Tue, 3 Oct 2023 10:47:15 +0530
Subject: [PATCH 3/4] fix: css changes

---
 frontend/src/conversation/ConversationBubble.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 56ca97d1..70320bc3 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -101,15 +101,15 @@ const ConversationBubble = forwardRef<
               {message}
             </ReactMarkdown>
             <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
-            <div className="mt-3 flex w-full flex-row items-center justify-center gap-2">
+            <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
               <div className="py-1 px-2 text-base font-semibold">Sources:</div>
-              <div className="flex flex-row items-center justify-start gap-2">
+              <div className="flex flex-row flex-wrap items-center justify-start gap-2">
                 {DisableSourceFE
                   ? null
                   : sources?.map((source, index) => (
                       <div
                         key={index}
-                        className={`w-40 max-w-fit cursor-pointer rounded-[28px] py-1 px-2 ${
+                        className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
                           openSource === index
                             ? 'bg-[#007DFF]'
                             : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'

From 1f356a67b2b67ded28cffcb23291c248ba32cd34 Mon Sep 17 00:00:00 2001
From: siiddhantt <siddhant.rai.5686@gmail.com>
Date: Tue, 3 Oct 2023 23:32:08 +0530
Subject: [PATCH 4/4] fix: added conditions for error state

---
 frontend/src/conversation/ConversationBubble.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 70320bc3..65b5fbef 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -100,9 +100,15 @@ const ConversationBubble = forwardRef<
             >
               {message}
             </ReactMarkdown>
-            <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
+            {DisableSourceFE || type === 'ERROR' ? null : (
+              <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
+            )}
             <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
-              <div className="py-1 px-2 text-base font-semibold">Sources:</div>
+              {DisableSourceFE || type === 'ERROR' ? null : (
+                <div className="py-1 px-2 text-base font-semibold">
+                  Sources:
+                </div>
+              )}
               <div className="flex flex-row flex-wrap items-center justify-start gap-2">
                 {DisableSourceFE
                   ? null