From 8a084a05c9796d67205cfd783cc33a4d6ecb74bd Mon Sep 17 00:00:00 2001
From: Ovindu Atukorala <ovindu.atukorala@gmail.com>
Date: Fri, 4 Oct 2024 19:40:54 +0000
Subject: [PATCH 1/3] Fix formatting of mobile retry button

---
 frontend/src/components/RetryIcon.tsx      | 4 ++--
 frontend/src/conversation/Conversation.tsx | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/RetryIcon.tsx b/frontend/src/components/RetryIcon.tsx
index 27ed6028..19d76aec 100644
--- a/frontend/src/components/RetryIcon.tsx
+++ b/frontend/src/components/RetryIcon.tsx
@@ -4,8 +4,8 @@ const RetryIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlSpace="preserve"
-    width={16}
-    height={16}
+    width={props.width ? props.width : 16}
+    height={props.height ? props.height : 16}
     fill={props.fill}
     stroke={props.stroke}
     viewBox="0 0 383.748 383.748"
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index d5908ca3..de88b6d9 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -10,7 +10,7 @@ import SpinnerDark from '../assets/spinner-dark.svg';
 import Spinner from '../assets/spinner.svg';
 import RetryIcon from '../components/RetryIcon';
 import Hero from '../Hero';
-import { useDarkTheme } from '../hooks';
+import { useDarkTheme, useMediaQuery } from '../hooks';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
@@ -39,6 +39,7 @@ export default function Conversation() {
   const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
   const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
   const { t } = useTranslation();
+  const { isMobile } = useMediaQuery();
 
   const handleUserInterruption = () => {
     if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
@@ -153,10 +154,12 @@ export default function Conversation() {
           }}
         >
           <RetryIcon
+            width={isMobile ? 10 : 16}
+            height={isMobile ? 10 : 16}
             fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
             stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
           />
-          Retry
+          <p className="hidden lg:block">Retry</p>
         </button>
       );
       responseView = (

From 1e6cc95f09a34a66b7f7560d1a203947b6575c07 Mon Sep 17 00:00:00 2001
From: Ovindu Atukorala <ovindu.atukorala@gmail.com>
Date: Tue, 8 Oct 2024 12:17:21 +0000
Subject: [PATCH 2/3] Replace copy icon with retry icon

---
 frontend/src/components/RetryIcon.tsx           |  3 ++-
 frontend/src/conversation/Conversation.tsx      |  8 ++++----
 .../src/conversation/ConversationBubble.tsx     | 17 +++++++----------
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/RetryIcon.tsx b/frontend/src/components/RetryIcon.tsx
index 19d76aec..8cecbd2f 100644
--- a/frontend/src/components/RetryIcon.tsx
+++ b/frontend/src/components/RetryIcon.tsx
@@ -7,7 +7,8 @@ const RetryIcon = (props: SVGProps<SVGSVGElement>) => (
     width={props.width ? props.width : 16}
     height={props.height ? props.height : 16}
     fill={props.fill}
-    stroke={props.stroke}
+    stroke={props.stroke ? props.stroke : 'none'}
+    strokeWidth={props.strokeWidth ? props.strokeWidth : 10}
     viewBox="0 0 383.748 383.748"
     {...props}
   >
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index de88b6d9..16aa4cae 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -144,7 +144,7 @@ export default function Conversation() {
     } else if (query.error) {
       const retryBtn = (
         <button
-          className="flex items-center justify-center gap-3 self-center rounded-full border border-silver py-3 px-5  text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
+          className="flex items-center justify-center gap-3 self-center rounded-full py-3 px-5  text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
           disabled={status === 'loading'}
           onClick={() => {
             handleQuestion({
@@ -154,12 +154,12 @@ export default function Conversation() {
           }}
         >
           <RetryIcon
-            width={isMobile ? 10 : 16}
-            height={isMobile ? 10 : 16}
+            width={isMobile ? 12 : 12} // change the width and height according to device size if necessary
+            height={isMobile ? 12 : 12}
             fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
             stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
+            strokeWidth={10}
           />
-          <p className="hidden lg:block">Retry</p>
         </button>
       );
       responseView = (
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 543699ed..dd6874f6 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -8,7 +8,6 @@ import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';
 
-import Alert from '../assets/alert.svg';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import Dislike from '../assets/dislike.svg?react';
 import Document from '../assets/document.svg';
@@ -233,14 +232,6 @@ const ConversationBubble = forwardRef<
                 : 'flex-col rounded-3xl'
             }`}
           >
-            {type === 'ERROR' && (
-              <>
-                <img src={Alert} alt="alert" className="mr-2 inline" />
-                <div className="absolute right-0 lg:-right-32 top-1/2 translate-y-full lg:-translate-y-1/2">
-                  {retryBtn}
-                </div>
-              </>
-            )}
             <ReactMarkdown
               className="whitespace-pre-wrap break-normal leading-normal"
               remarkPlugins={[remarkGfm, remarkMath]}
@@ -334,12 +325,18 @@ const ConversationBubble = forwardRef<
         <div className="my-2 ml-2 flex justify-start">
           <div
             className={`relative mr-5  block items-center justify-center lg:invisible 
-            ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
+            ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
           >
             <div>
               <CopyButton text={message} />
             </div>
           </div>
+          <div
+            className={`relative mr-5  block items-center justify-center  
+            ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
+          >
+            <div>{retryBtn}</div>
+          </div>
           {handleFeedback && (
             <>
               <div

From b6710beadcdc6f47206dfc4739703064f99dd02d Mon Sep 17 00:00:00 2001
From: Ovindu Atukorala <ovindu.atukorala@gmail.com>
Date: Wed, 9 Oct 2024 10:26:17 +0000
Subject: [PATCH 3/3] Conditionally render retry button

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

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index dd6874f6..1f09696c 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -331,12 +331,11 @@ const ConversationBubble = forwardRef<
               <CopyButton text={message} />
             </div>
           </div>
-          <div
-            className={`relative mr-5  block items-center justify-center  
-            ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
-          >
-            <div>{retryBtn}</div>
-          </div>
+          {type === 'ERROR' && (
+            <div className="relative mr-5 block items-center justify-center">
+              <div>{retryBtn}</div>
+            </div>
+          )}
           {handleFeedback && (
             <>
               <div