(sync:locales) with static content

frontend/src/conversation/Conversation.tsx

@@ -386,13 +386,19 @@ export default function Conversation() {
           {...getRootProps()}
           className="flex w-full items-center rounded-[40px] border border-silver bg-white dark:bg-raisin-black"
         >
-          <input {...getInputProps()}></input>
+          <label htmlFor="file-upload" className="sr-only">
+            {t('modals.uploadDoc.label')}
+          </label>
+          <input {...getInputProps()} id="file-upload" />
+          <label htmlFor="message-input" className="sr-only">
+            {t('inputPlaceholder')}
+          </label>
           <textarea
-            id="inputbox"
+            id="message-input"
             ref={inputRef}
             tabIndex={1}
             placeholder={t('inputPlaceholder')}
-            className={`inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-transparent py-5 text-base leading-tight opacity-100 focus:outline-none dark:bg-transparent dark:text-bright-gray`}
+            className={`inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-transparent py-5 text-base leading-tight opacity-100 focus:outline-none dark:bg-transparent dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50`}
             onInput={handleInput}
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
@@ -400,19 +406,27 @@ export default function Conversation() {
                 handleQuestionSubmission();
               }
             }}
+            aria-label={t('inputPlaceholder')}
           ></textarea>
           {status === 'loading' ? (
             <img
               src={isDarkTheme ? SpinnerDark : Spinner}
               className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
-            ></img>
+              alt={t('loading')}
+            />
           ) : (
             <div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
-              <img
-                className="ml-[4px] h-6 w-6 text-white "
+              <button
                 onClick={() => handleQuestionSubmission()}
-                src={isDarkTheme ? SendDark : Send}
-              ></img>
+                aria-label={t('send')}
+                className="flex items-center justify-center"
+              >
+                <img
+                  className="ml-[4px] h-6 w-6 text-white"
+                  src={isDarkTheme ? SendDark : Send}
+                  alt={t('send')}
+                />
+              </button>
             </div>
           )}
         </div>

frontend/src/conversation/ConversationBubble.tsx

@@ -8,6 +8,7 @@ import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
+import { useTranslation } from 'react-i18next';
 
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import Dislike from '../assets/dislike.svg?react';
@@ -62,6 +63,7 @@ const ConversationBubble = forwardRef<
   },
   ref,
 ) {
+  const { t } = useTranslation();
   // const bubbleRef = useRef<HTMLDivElement | null>(null);
   const chunks = useSelector(selectChunks);
   const selectedDocs = useSelector(selectSelectedDocs);
@@ -113,13 +115,13 @@ const ConversationBubble = forwardRef<
           {isEditClicked && (
             <div ref={editableQueryRef} className="w-[75%] flex flex-col">
               <textarea
-                placeholder="Type the updated query..."
+                placeholder={t('conversation.edit.placeholder')}
                 onChange={(e) => {
                   setEditInputBox(e.target.value);
                 }}
                 rows={1}
                 value={editInputBox}
-                className="ml-2 mr-12 text-[15px] resize-y h-12 min-h-max rounded-3xl p-3  no-scrollbar leading-relaxed dark:border-[0.5px] dark:border-white dark:bg-raisin-black dark:text-white px-[18px] border-[1.5px] border-black"
+                className="ml-2 mr-12 text-[15px] resize-y h-12 min-h-max rounded-3xl p-3 no-scrollbar leading-relaxed dark:border-[0.5px] dark:border-white dark:bg-raisin-black dark:text-white px-[18px] border-[1.5px] border-black"
               />
               <div
                 className={`flex flex-row-reverse justify-end gap-1 mt-3 text-sm font-medium`}
@@ -128,13 +130,13 @@ const ConversationBubble = forwardRef<
                   className="rounded-full bg-[#CDB5FF] hover:bg-[#E1D3FF] py-[10px] px-[15px] text-purple-30 max-w-full whitespace-pre-wrap leading-none"
                   onClick={() => handleEditClick()}
                 >
-                  Update
+                  {t('conversation.edit.update')}
                 </button>
                 <button
                   className="py-[10px] px-[15px]  no-underline hover:underline  text-purple-30 max-w-full whitespace-pre-wrap leading-normal"
                   onClick={() => setIsEditClicked(false)}
                 >
-                  Cancel
+                  {t('conversation.edit.cancel')}
                 </button>
               </div>
             </div>
@@ -185,12 +187,14 @@ const ConversationBubble = forwardRef<
                 avatar={
                   <img
                     src={Sources}
-                    alt="Sources"
+                    alt={t('conversation.sources.title')}
                     className="h-full w-full object-fill"
                   />
                 }
               />
-              <p className="text-base font-semibold">Sources</p>
+              <p className="text-base font-semibold">
+                {t('conversation.sources.title')}
+              </p>
             </div>
             <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
               {Array.from({ length: 4 }).map((_, index) => (
@@ -217,12 +221,14 @@ const ConversationBubble = forwardRef<
                   avatar={
                     <img
                       src={Sources}
-                      alt="Sources"
+                      alt={t('conversation.sources.title')}
                       className="h-full w-full object-fill"
                     />
                   }
                 />
-                <p className="text-base font-semibold">Sources</p>
+                <p className="text-base font-semibold">
+                  {t('conversation.sources.title')}
+                </p>
               </div>
               <div className="fade-in ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
                 <div className="grid grid-cols-2 gap-2 lg:grid-cols-4">
@@ -289,9 +295,11 @@ const ConversationBubble = forwardRef<
                       className="flex h-28 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
                       onClick={() => setIsSidebarOpen(true)}
                     >
-                      <p className="ellipsis-text h-22 text-xs">{`View ${
-                        sources?.length ? sources.length - 3 : 0
-                      } more`}</p>
+                      <p className="ellipsis-text h-22 text-xs">
+                        {t('conversation.sources.view_more', {
+                          count: sources?.length ? sources.length - 3 : 0,
+                        })}
+                      </p>
                     </div>
                   )}
                 </div>
@@ -306,12 +314,14 @@ const ConversationBubble = forwardRef<
               avatar={
                 <img
                   src={DocsGPT3}
-                  alt="DocsGPT"
+                  alt={t('conversation.answer')}
                   className="h-full w-full object-cover"
                 />
               }
             />
-            <p className="text-base font-semibold">Answer</p>
+            <p className="text-base font-semibold">
+              {t('conversation.answer')}
+            </p>
           </div>
           <div
             className={`fade-in-bubble ml-2 mr-5 flex max-w-[90vw] rounded-[28px] bg-gray-1000 py-[14px] px-7 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
@@ -419,7 +429,7 @@ const ConversationBubble = forwardRef<
             ${type !== 'ERROR' ? 'group-hover:lg:visible' : 'hidden'}`}
           >
             <div>
-              <SpeakButton text={message} /> {/* Add SpeakButton here */}
+              <SpeakButton text={message} />
             </div>
           </div>
           {type === 'ERROR' && (
@@ -557,7 +567,7 @@ function AllSources(sources: AllSourcesProps) {
               {source.source && source.source !== 'local' ? (
                 <img
                   src={Link}
-                  alt="Link"
+                  alt={'Link'}
                   className="h-3 w-3 cursor-pointer object-fill"
                   onClick={() =>
                     window.open(source.source, '_blank', 'noopener, noreferrer')

frontend/src/conversation/ConversationTile.tsx

@@ -115,6 +115,19 @@ export default function ConversationTile({
     setConversationsName(conversation.name);
     setIsEdit(false);
   }
+
+  const handleRenameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    if (e.key === 'Enter') {
+      handleSaveConversation({
+        id: conversation.id,
+        name: conversationName,
+      });
+    } else if (e.key === 'Escape') {
+      onClear();
+    }
+  };
+
   return (
     <>
       <div
@@ -144,6 +157,7 @@ export default function ConversationTile({
               className="h-6 w-full bg-transparent px-1 text-sm font-normal leading-6 focus:outline-[#0075FF]"
               value={conversationName}
               onChange={(e) => setConversationsName(e.target.value)}
+              onKeyDown={handleRenameKeyDown}
             />
           ) : (
             <p className="my-auto overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-normal leading-6 text-eerie-black dark:text-white">
@@ -239,7 +253,7 @@ export default function ConversationTile({
                 >
                   <img
                     src={Trash}
-                    alt="Edit"
+                    alt="Delete"
                     width={24}
                     height={24}
                     className="cursor-pointer hover:opacity-50"

frontend/src/conversation/SharedConversation.tsx

@@ -236,7 +236,7 @@ export const SharedConversation = () => {
           </div>
         </div>
 
-        <div className=" flex w-11/12 flex-col items-center gap-4 pb-2 md:w-10/12 lg:w-6/12">
+        <div className="flex w-11/12 flex-col items-center gap-4 pb-2 md:w-10/12 lg:w-6/12">
           {apiKey ? (
             <div className="flex h-full w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
               <div
@@ -272,7 +272,7 @@ export const SharedConversation = () => {
           ) : (
             <button
               onClick={() => navigate('/')}
-              className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe"
+              className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe mb-14 sm:mb-0"
             >
               {t('sharedConv.button')}
             </button>