Merge pull request #1235 from ovindu-a/issue-1230

Fix formatting of mobile retry button

frontend/src/components/RetryIcon.tsx

@@ -4,10 +4,11 @@ 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}
+    stroke={props.stroke ? props.stroke : 'none'}
+    strokeWidth={props.strokeWidth ? props.strokeWidth : 10}
     viewBox="0 0 383.748 383.748"
     {...props}
   >

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);
@@ -139,7 +140,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({
@@ -149,10 +150,12 @@ export default function Conversation() {
           }}
         >
           <RetryIcon
+            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}
           />
-          Retry
         </button>
       );
       responseView = (

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';
@@ -238,14 +237,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]}
@@ -339,12 +330,17 @@ 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>
+          {type === 'ERROR' && (
+            <div className="relative mr-5 block items-center justify-center">
+              <div>{retryBtn}</div>
+            </div>
+          )}
           {handleFeedback && (
             <>
               <div