🖌️feat: ScrolltoBottom & Mobile Improvements; Translation Update (#1651)

* 🖌️feat: Scrolltobottom Style

* 🖌️feat: ScrolltoBottom Style

* 📱Settings tab now centered on mobile / selection bug fixed 🐞, 🌍 Updated Translation

* 🛠️fix: Adjust the width of the settings dialog and address the issue of not seeing selection on the desktop.

* 🎨 Update settings tabs background color for dark mode.
Adjusts background color dynamically based on screen size.

* 🛠️fix: Reverted changes in ScrolltoBottom file

client/src/components/Messages/ScrollToBottom.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 type Props = {
   scrollHandler: React.MouseEventHandler<HTMLButtonElement>;
 };
@@ -6,22 +8,22 @@ export default function ScrollToBottom({ scrollHandler }: Props) {
   return (
     <button
       onClick={scrollHandler}
-      className="absolute bottom-2 right-6 z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200"
+      className="cursor-pointer absolute rounded-full border border-white bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10  bottom-5 right-1/2 dark:text-gray-200"
     >
       <svg
-        stroke="currentColor"
-        fill="none"
-        strokeWidth="2"
+        width="24"
+        height="24"
         viewBox="0 0 24 24"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="m-1 h-4 w-4"
-        height="1em"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        className="m-1 text-black dark:text-white"
       >
-        <line x1="12" y1="5" x2="12" y2="19" />
-        <polyline points="19 12 12 19 5 12" />
+        <path
+          d="M17 13L12 18L7 13M12 6L12 17"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        ></path>
       </svg>
     </button>
   );

client/src/components/Nav/Settings.tsx

@@ -15,7 +15,14 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         className={cn('shadow-2xl dark:bg-gray-900 dark:text-white md:min-h-[373px] md:w-[680px]')}
-        style={{ borderRadius: '12px' }}
+        style={{
+          borderRadius: '12px',
+          position: 'fixed',
+          margin: 'auto',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
       >
         <DialogHeader>
           <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
@@ -40,10 +47,13 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
             >
               <Tabs.Trigger
                 className={cn(
-                  'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
+                  'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
                   isSmallScreen
                     ? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
-                    : '',
+                    : 'bg-white radix-state-active:bg-gray-100',
+                  isSmallScreen
+                    ? ''
+                    : 'dark:bg-gray-900',
                 )}
                 value={SettingsTabValues.GENERAL}
               >
@@ -52,10 +62,13 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
+                  'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
                   isSmallScreen
                     ? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
-                    : '',
+                    : 'bg-white radix-state-active:bg-gray-100',
+                  isSmallScreen
+                    ? ''
+                    : 'dark:bg-gray-900',
                 )}
                 value={SettingsTabValues.BETA}
               >
@@ -64,10 +77,13 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
+                  'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
                   isSmallScreen
                     ? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
-                    : '',
+                    : 'bg-white radix-state-active:bg-gray-100',
+                  isSmallScreen
+                    ? ''
+                    : 'dark:bg-gray-900',
                 )}
                 value={SettingsTabValues.DATA}
               >
@@ -76,10 +92,13 @@ export default function Settings({ open, onOpenChange }: TDialogProps) {
               </Tabs.Trigger>
               <Tabs.Trigger
                 className={cn(
-                  'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-gray-100 radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
+                  'group my-1 flex items-center justify-start gap-2 rounded-md px-2 py-1.5 text-sm text-black radix-state-active:bg-white radix-state-active:text-black dark:text-white dark:radix-state-active:bg-gray-800',
                   isSmallScreen
                     ? 'flex-1 items-center justify-center text-sm dark:text-gray-500 dark:radix-state-active:text-white'
-                    : '',
+                    : 'bg-white radix-state-active:bg-gray-100',
+                  isSmallScreen
+                    ? ''
+                    : 'dark:bg-gray-900',
                 )}
                 value={SettingsTabValues.ACCOUNT}
               >

client/src/localization/languages/Br.tsx

@@ -50,7 +50,7 @@ export default {
   com_ui_edit: 'Editar',
   com_ui_success: 'Sucesso',
   com_ui_all: 'todos',
-  com_ui_clear: 'Limpar',
+  com_ui_clear: 'Excluir tudo',
   com_ui_revoke: 'Revogar',
   com_ui_revoke_info: 'Revogar todas as credenciais fornecidas pelo usuário',
   com_ui_confirm_action: 'Confirmar Ação',
@@ -166,6 +166,10 @@ export default {
     'Número entre -2.0 e 2.0. Valores positivos penalizam novos tokens com base em sua frequência existente no texto até agora, diminuindo a probabilidade do modelo de repetir a mesma linha literalmente.',
   com_endpoint_openai_pres:
     'Número entre -2.0 e 2.0. Valores positivos penalizam novos tokens com base em se eles aparecem no texto até agora, aumentando a probabilidade do modelo de falar sobre novos tópicos.',
+  com_endpoint_openai_resend:
+    'Reenviar todas as imagens anteriormente anexadas. Observação: isso pode aumentar significativamente o custo em tokens e você pode enfrentar erros com muitos anexos de imagem.',
+  com_endpoint_openai_detail:
+    'A resolução para solicitações do Vision. "Low" é mais barata e rápida, "High" é mais detalhada e cara, e "Auto" escolherá automaticamente entre as duas com base na resolução da imagem.',
   com_endpoint_openai_custom_name_placeholder: 'Defina um nome personalizado para ChatGPT',
   com_endpoint_openai_prompt_prefix_placeholder:
     'Defina instruções personalizadas para incluir na Mensagem do Sistema. Padrão: nenhum',
@@ -181,6 +185,8 @@ export default {
   com_endpoint_frequency_penalty: 'Penalidade de Frequência',
   com_endpoint_presence_penalty: 'Penalidade de Presença',
   com_endpoint_plug_use_functions: 'Use Funções',
+  com_endpoint_plug_resend_images: 'Reenviar Imagens',
+  com_endpoint_plug_image_detail: 'Detalhes da Imagem',
   com_endpoint_plug_skip_completion: 'Pular Conclusão',
   com_endpoint_disabled_with_tools: 'desativado com ferramentas',
   com_endpoint_disabled_with_tools_placeholder: 'Desativado com Ferramentas Selecionadas',
@@ -298,16 +304,15 @@ export default {
   com_nav_theme_dark: 'Escuro',
   com_nav_theme_light: 'Claro',
   com_nav_user_name_display: 'Mostrar nome de usuário nas mensagens',
-  com_nav_clear_all_chats: 'Limpar todos os chats',
-  com_nav_confirm_clear: 'Confirmar Limpeza',
+  com_nav_clear_all_chats: 'Excluir todas as conversas?',
+  com_nav_confirm_clear: 'Confirmar Exclusão',
   com_nav_close_sidebar: 'Fechar barra lateral',
   com_nav_open_sidebar: 'Abrir barra lateral',
   com_nav_send_message: 'Enviar mensagem',
   com_nav_log_out: 'Sair',
   com_nav_user: 'USUÁRIO',
   com_nav_clear_conversation: 'Limpar conversas',
-  com_nav_clear_conversation_confirm_message:
-    'Tem certeza de que deseja limpar todas as conversas? Isso é irreversível.',
+  com_nav_clear_conversation_confirm_message: 'Limpar seu histórico de conversas- tem certeza?',
   com_nav_help_faq: 'Ajuda & FAQ',
   com_nav_settings: 'Configurações',
   com_nav_search_placeholder: 'Pesquisar mensagens',