Replace copy icon with retry icon

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}
   >

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 = (

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