From 16df8d803ca9150ee53a551cf7b2ac0be8dcb1aa Mon Sep 17 00:00:00 2001
From: staticGuru <vigneshguru274@gmail.com>
Date: Mon, 9 Oct 2023 19:48:35 +0530
Subject: [PATCH] Fix the error state issues

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

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 19019613..aa9514cc 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -74,10 +74,10 @@ const ConversationBubble = forwardRef<
         <div className="flex self-start">
           <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
           <div
-            className={`ml-2 mr-5 flex flex-col items-center rounded-3xl bg-gray-1000 p-3.5 ${
+            className={`ml-2 mr-5 flex items-center  bg-gray-1000 p-3.5 ${
               type === 'ERROR'
-                ? ' rounded-lg border border-red-2000 bg-red-1000 p-2 text-red-3000'
-                : ''
+                ? 'flex-row rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
+                : 'flex-col rounded-3xl'
             }`}
           >
             {type === 'ERROR' && (
@@ -115,18 +115,14 @@ const ConversationBubble = forwardRef<
               {message}
             </ReactMarkdown>
             {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">
-              {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
-                  : sources?.map((source, index) => (
+              <>
+                <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>
+                  <div className="flex flex-row flex-wrap items-center justify-start gap-2">
+                    {sources?.map((source, index) => (
                       <div
                         key={index}
                         className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
@@ -149,8 +145,10 @@ const ConversationBubble = forwardRef<
                         </p>
                       </div>
                     ))}
-              </div>
-            </div>
+                  </div>
+                </div>
+              </>
+            )}
           </div>
           <div
             className={`mr-2 flex items-center justify-center ${