feat: open sidebar popup for new users (danny-avila#1308)

Author: berry-13

client/src/components/Nav/Nav.tsx

@@ -6,7 +6,13 @@ import {
 } from 'librechat-data-provider';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useAuthContext, useMediaQuery, useConversation, useConversations } from '~/hooks';
+import {
+  useAuthContext,
+  useMediaQuery,
+  useConversation,
+  useConversations,
+  useLocalStorage,
+} from '~/hooks';
 import { TooltipProvider, Tooltip } from '~/components/ui';
 import { Conversations, Pages } from '../Conversations';
 import { Spinner } from '~/components';
@@ -25,6 +31,7 @@ export default function Nav({ navVisible, setNavVisible }) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const scrollPositionRef = useRef<number | null>(null);
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const [newUser, setNewUser] = useLocalStorage('newUser', true);
 
   useEffect(() => {
     if (isSmallScreen) {
@@ -142,6 +149,9 @@ export default function Nav({ navVisible, setNavVisible }) {
 
   const toggleNavVisible = () => {
     setNavVisible((prev: boolean) => !prev);
+    if (newUser) {
+      setNewUser(false);
+    }
   };
 
   const itemToggleNav = () => {

client/src/components/Nav/NavToggle.tsx

@@ -1,12 +1,14 @@
 import { TooltipTrigger, TooltipContent } from '~/components/ui';
-import { useLocalize } from '~/hooks';
+import { useLocalize, useLocalStorage } from '~/hooks';
 import { cn } from '~/utils';
 
 export default function NavToggle({ onToggle, navVisible, isHovering, setIsHovering }) {
   const localize = useLocalize();
   const transition = {
     transition: 'transform 0.3s ease, opacity 0.2s ease',
   };
+  const [newUser, setNewUser] = useLocalStorage('newUser', true);
+
   return (
     <div
       className={cn(
@@ -44,8 +46,8 @@ export default function NavToggle({ onToggle, navVisible, isHovering, setIsHover
                 />
               </div>
             </div>
-            <TooltipContent side="right" sideOffset={4}>
-              {navVisible ? localize('com_nav_close_menu') : localize('com_nav_open_menu')}
+            <TooltipContent forceMount={newUser ? true : undefined} side="right" sideOffset={4}>
+              {navVisible ? localize('com_nav_close_sidebar') : localize('com_nav_open_sidebar')}
             </TooltipContent>
           </span>
         </button>

client/src/localization/languages/Ar.tsx

@@ -234,8 +234,6 @@ export default {
   com_nav_plugin_search: 'ابحث عن الإضافات',
   com_nav_plugin_auth_error:
     'حدث خطأ أثناء محاولة المصادقة على هذا البرنامج المساعد. يرجى المحاولة مرة أخرى.',
-  com_nav_close_menu: 'إغلاق القائمة الجانبية',
-  com_nav_open_menu: 'افتح القائمة الجانبية',
   com_nav_export_filename: 'اسم الملف',
   com_nav_export_filename_placeholder: 'قم بتعيين اسم الملف',
   com_nav_export_type: 'النوع',

client/src/localization/languages/Br.tsx

@@ -4,7 +4,8 @@ export default {
   com_ui_examples: 'Exemplos',
   com_ui_new_chat: 'Novo Chat',
   com_ui_example_quantum_computing: 'Explique a computação quântica em termos simples',
-  com_ui_example_10_year_old_b_day: 'Tem alguma ideia criativa para o aniversário de uma criança de 10 anos?',
+  com_ui_example_10_year_old_b_day:
+    'Tem alguma ideia criativa para o aniversário de uma criança de 10 anos?',
   com_ui_example_http_in_js: 'Como fazer uma requisição HTTP em Javascript?',
   com_ui_capabilities: 'Capacidades',
   com_ui_capability_remember: 'Lembra do que o usuário disse anteriormente na conversa',
@@ -54,8 +55,7 @@ export default {
     'Não foi possível fazer login com as informações fornecidas. Por favor, verifique suas credenciais e tente novamente.',
   com_auth_error_login_rl:
     'Muitas tentativas de login em um curto espaço de tempo. Por favor, tente novamente mais tarde.',
-  com_auth_error_login_ban:
-    'Sua conta foi temporariamente banida por violações do nosso serviço.',
+  com_auth_error_login_ban: 'Sua conta foi temporariamente banida por violações do nosso serviço.',
   com_auth_error_login_server:
     'Houve um erro interno do servidor. Por favor, espere alguns momentos e tente novamente.',
   com_auth_no_account: 'Não tem uma conta?',
@@ -80,8 +80,7 @@ export default {
   com_auth_password_not_match: 'Senhas não coincidem',
   com_auth_continue: 'Continuar',
   com_auth_create_account: 'Crie sua conta',
-  com_auth_error_create:
-    'Houve um erro ao tentar registrar sua conta. Por favor, tente novamente.',
+  com_auth_error_create: 'Houve um erro ao tentar registrar sua conta. Por favor, tente novamente.',
   com_auth_full_name: 'Nome completo',
   com_auth_name_required: 'Nome é obrigatório',
   com_auth_name_min_length: 'Nome deve ter pelo menos 3 caracteres',
@@ -135,7 +134,8 @@ export default {
   com_endpoint_google_maxoutputtokens:
     'Número máximo de tokens que podem ser gerados na resposta. Especifique um valor menor para respostas mais curtas e um valor maior para respostas mais longas.',
   com_endpoint_google_custom_name_placeholder: 'Defina um nome personalizado para o PaLM2',
-  com_endpoint_prompt_prefix_placeholder: 'Defina instruções ou contexto personalizados. Ignorado se vazio.',
+  com_endpoint_prompt_prefix_placeholder:
+    'Defina instruções ou contexto personalizados. Ignorado se vazio.',
   com_endpoint_custom_name: 'Nome Personalizado',
   com_endpoint_prompt_prefix: 'Prefixo do Prompt',
   com_endpoint_temperature: 'Temperatura',
@@ -174,7 +174,8 @@ export default {
   com_endpoint_plug_set_custom_instructions_for_gpt_placeholder:
     'Defina instruções personalizadas para incluir na Mensagem do Sistema. Padrão: nenhum',
   com_endpoint_import: 'Importar',
-  com_endpoint_set_custom_name: 'Defina um nome personalizado, caso você possa encontrar este preset',
+  com_endpoint_set_custom_name:
+    'Defina um nome personalizado, caso você possa encontrar este preset',
   com_endpoint_preset: 'preset',
   com_endpoint_presets: 'presets',
   com_endpoint_preset_name: 'Nome do Preset',
@@ -210,15 +211,17 @@ export default {
   com_endpoint_config_key_encryption: 'Sua chave será criptografada e excluída em',
   com_endpoint_config_key_expiry: 'o tempo de expiração',
   com_endpoint_config_key_import_json_key: 'Importar Chave JSON da Conta de Serviço.',
-  com_endpoint_config_key_import_json_key_success: 'Chave JSON da Conta de Serviço Importada com Sucesso',
+  com_endpoint_config_key_import_json_key_success:
+    'Chave JSON da Conta de Serviço Importada com Sucesso',
   com_endpoint_config_key_import_json_key_invalid:
     'Chave JSON da Conta de Serviço Inválida, Você importou o arquivo correto?',
   com_endpoint_config_key_get_edge_key: 'Para obter seu token de acesso para o Bing, faça login em',
   com_endpoint_config_key_get_edge_key_dev_tool:
     'Use as ferramentas de desenvolvimento ou uma extensão enquanto estiver logado no site para copiar o conteúdo do cookie _U. Se isso falhar, siga estas',
   com_endpoint_config_key_edge_instructions: 'instruções',
   com_endpoint_config_key_edge_full_key_string: 'para fornecer as strings completas dos cookies.',
-  com_endpoint_config_key_chatgpt: 'Para obter seu token de acesso para o ChatGPT "Versão Gratuita", faça login em',
+  com_endpoint_config_key_chatgpt:
+    'Para obter seu token de acesso para o ChatGPT "Versão Gratuita", faça login em',
   com_endpoint_config_key_chatgpt_then_visit: 'depois visite',
   com_endpoint_config_key_chatgpt_copy_token: 'Copie o token de acesso.',
   com_endpoint_config_key_google_need_to: 'Você precisa',
@@ -232,8 +235,6 @@ export default {
   com_nav_plugin_search: 'Pesquisar plugins',
   com_nav_plugin_auth_error:
     'Houve um erro ao tentar autenticar este plugin. Por favor, tente novamente.',
-  com_nav_close_menu: 'Fechar barra lateral',
-  com_nav_open_menu: 'Abrir barra lateral',
   com_nav_export_filename: 'Nome do arquivo',
   com_nav_export_filename_placeholder: 'Defina o nome do arquivo',
   com_nav_export_type: 'Tipo',

client/src/localization/languages/Eng.tsx

@@ -251,8 +251,6 @@ export default {
   com_nav_plugin_search: 'Search plugins',
   com_nav_plugin_auth_error:
     'There was an error attempting to authenticate this plugin. Please try again.',
-  com_nav_close_menu: 'Close sidebar',
-  com_nav_open_menu: 'Open sidebar',
   com_nav_export_filename: 'Filename',
   com_nav_export_filename_placeholder: 'Set the filename',
   com_nav_export_type: 'Type',

client/src/localization/languages/Es.tsx

@@ -243,8 +243,6 @@ export default {
   com_nav_plugin_search: 'Buscar plugins',
   com_nav_plugin_auth_error:
     'Hubo un error al intentar autenticar este plugin. Por favor, inténtalo de nuevo.',
-  com_nav_close_menu: 'Cerrar barra lateral',
-  com_nav_open_menu: 'Abrir barra lateral',
   com_nav_export_filename: 'Nombre de archivo',
   com_nav_export_filename_placeholder: 'Establece el nombre de archivo',
   com_nav_export_type: 'Tipo',

client/src/localization/languages/Fr.tsx

@@ -243,8 +243,6 @@ export default {
   com_nav_plugin_search: 'Rechercher des plugins',
   com_nav_plugin_auth_error:
     'Une erreur s\'est produite lors de la tentative d\'authentification de ce plugin. Veuillez réessayer.',
-  com_nav_close_menu: 'Fermer la barre latérale',
-  com_nav_open_menu: 'Ouvrir la barre latérale',
   com_nav_export_filename: 'Nom du fichier',
   com_nav_export_filename_placeholder: 'Définir le nom du fichier',
   com_nav_export_type: 'Type',

client/src/localization/languages/It.tsx

@@ -240,8 +240,6 @@ export default {
   com_nav_plugin_search: 'Cerca plugin',
   com_nav_plugin_auth_error:
     'Si è verificato un errore durante il tentativo di autenticare questo plugin. Per favore, riprova.',
-  com_nav_close_menu: 'Apri la barra laterale',
-  com_nav_open_menu: 'Chiudi la barra laterale',
   com_nav_export_filename: 'Nome del file',
   com_nav_export_filename_placeholder: 'Imposta il nome del file',
   com_nav_export_type: 'Tipo',

client/src/localization/languages/Jp.tsx

@@ -54,10 +54,9 @@ export default {
     '入力された情報ではログインできませんでした。認証情報を確認した上で再度お試しください。',
   com_auth_error_login_rl:
     'お使いのIPアドレスから短時間に多数のログイン試行がありました。しばらくしてから再度お試しください。',
-  com_auth_error_login_ban:
-      '本サービスの利用規約違反のため、一時的にアカウントを停止しました。',
+  com_auth_error_login_ban: '本サービスの利用規約違反のため、一時的にアカウントを停止しました。',
   com_auth_error_login_server:
-      'サーバーエラーが発生しています。。しばらくしてから再度お試しください。',
+    'サーバーエラーが発生しています。。しばらくしてから再度お試しください。',
   com_auth_no_account: 'アカウントをお持ちでない場合はこちら',
   com_auth_sign_up: '新規登録',
   com_auth_sign_in: 'ログイン',
@@ -135,7 +134,8 @@ export default {
   com_endpoint_google_maxoutputtokens:
     ' 	生成されるレスポンスの最大トークン数。短いレスポンスには低い値を、長いレスポンスには高い値を指定します。',
   com_endpoint_google_custom_name_placeholder: 'PaLM2のカスタム名を設定する',
-  com_endpoint_prompt_prefix_placeholder: 'custom instructions か context を設定する。空の場合は無視されます。',
+  com_endpoint_prompt_prefix_placeholder:
+    'custom instructions か context を設定する。空の場合は無視されます。',
   com_endpoint_custom_name: 'プリセット名',
   com_endpoint_prompt_prefix: 'プロンプトの先頭',
   com_endpoint_temperature: 'Temperature',
@@ -144,7 +144,7 @@ export default {
   com_endpoint_top_k: 'Top K',
   com_endpoint_max_output_tokens: '最大出力トークン数',
   com_endpoint_openai_temp:
-      '大きい値 = ランダム性が増します。低い値 = より決定論的になります。この値を変更するか、Top P の変更をおすすめしますが、両方を変更はおすすめしません。',
+    '大きい値 = ランダム性が増します。低い値 = より決定論的になります。この値を変更するか、Top P の変更をおすすめしますが、両方を変更はおすすめしません。',
   com_endpoint_openai_max:
     '生成されるトークンの最大値。入力トークンと出力トークンの長さの合計は、モデルのコンテキスト長によって制限されます。',
   com_endpoint_openai_topp:
@@ -225,15 +225,18 @@ export default {
   com_endpoint_config_key_encryption: '鍵は暗号化されます。削除予定日:',
   com_endpoint_config_key_expiry: 'すでに有効期限切れです',
   com_endpoint_config_key_import_json_key: 'Service Account JSON Key をインポートする。',
-  com_endpoint_config_key_import_json_key_success: 'Service Account JSON Keyのインポートに成功しました。',
+  com_endpoint_config_key_import_json_key_success:
+    'Service Account JSON Keyのインポートに成功しました。',
   com_endpoint_config_key_import_json_key_invalid:
     '無効なService Account JSON Keyです。正しいファイルかどうか確認してください。',
-  com_endpoint_config_key_get_edge_key: 'Bing用のアクセストークンを取得するためにログインをしてください: ',
+  com_endpoint_config_key_get_edge_key:
+    'Bing用のアクセストークンを取得するためにログインをしてください: ',
   com_endpoint_config_key_get_edge_key_dev_tool:
     'サイトにログインした状態で、開発ツールまたは拡張機能を使用して、_U クッキーの内容をコピーします。もし失敗する場合は次の手順に従ってください。',
   com_endpoint_config_key_edge_instructions: '手順',
   com_endpoint_config_key_edge_full_key_string: 'to provide the full cookie strings.',
-  com_endpoint_config_key_chatgpt: 'ChatGPTの「無料版」のアクセストークンを入手するためにへログインをしてください:',
+  com_endpoint_config_key_chatgpt:
+    'ChatGPTの「無料版」のアクセストークンを入手するためにへログインをしてください:',
   com_endpoint_config_key_chatgpt_then_visit: 'つぎに、ここへアクセスしてください:',
   com_endpoint_config_key_chatgpt_copy_token: 'トークンをコピーしてください。',
   com_endpoint_config_key_google_need_to: 'こちらを有効化する必要があります:',
@@ -248,8 +251,6 @@ export default {
   com_nav_plugin_search: 'プラグイン検索',
   com_nav_plugin_auth_error:
     'このプラグインの認証中にエラーが発生しました。もう一度お試しください。',
-  com_nav_close_menu: 'サイドバーを閉じる',
-  com_nav_open_menu: 'サイドバーを開く',
   com_nav_export_filename: 'ファイル名',
   com_nav_export_filename_placeholder: 'ファイル名を入力してください',
   com_nav_export_type: '形式',

client/src/localization/languages/Nl.tsx

@@ -239,8 +239,6 @@ export default {
   com_nav_plugin_search: 'Plugins zoeken',
   com_nav_plugin_auth_error:
     'Er trad een fout op bij het authenticeren van deze plugin. Probeer het opnieuw.',
-  com_nav_close_menu: 'Zijbalk sluiten',
-  com_nav_open_menu: 'Zijbalk openen',
   com_nav_export_filename: 'Bestandsnaam',
   com_nav_export_filename_placeholder: 'Stel de bestandsnaam in',
   com_nav_export_type: 'Type',