@lobehub/chat 0.151.6 → 0.151.8

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.151.8](https://github.com/lobehub/lobe-chat/compare/v0.151.7...v0.151.8)
+
+<sup>Released on **2024-04-30**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Move NavBar to `[@nav](https://github.com/nav)` slot route.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Move NavBar to `[@nav](https://github.com/nav)` slot route, closes [#2306](https://github.com/lobehub/lobe-chat/issues/2306) ([aee7231](https://github.com/lobehub/lobe-chat/commit/aee7231))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.151.7](https://github.com/lobehub/lobe-chat/compare/v0.151.6...v0.151.7)
+
+<sup>Released on **2024-04-30**</sup>
+
+#### 💄 Styles
+
+- **misc**: Add 404 and Error page.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Add 404 and Error page, closes [#2299](https://github.com/lobehub/lobe-chat/issues/2299) ([938a3e9](https://github.com/lobehub/lobe-chat/commit/938a3e9))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.151.6](https://github.com/lobehub/lobe-chat/compare/v0.151.5...v0.151.6)
 
 <sup>Released on **2024-04-30**</sup>

package/locales/ar/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "العودة إلى الصفحة الرئيسية",
+    "desc": "حاول مرة أخرى في وقت لاحق، أو عد إلى العالم المألوف",
+    "retry": "إعادة التحميل",
+    "title": "واجهت الصفحة مشكلة ما.."
+  },
+  "notFound": {
+    "backHome": "العودة إلى الصفحة الرئيسية",
+    "desc": "لم نتمكن من العثور على الصفحة التي تبحث عنها، يرجى التحقق مما إذا كان الرابط صحيحًا",
+    "title": "هل دخلت إلى مجال غير معروف؟"
+  },
   "pluginSettings": {
     "desc": "أكمل الإعدادات التالية لبدء استخدام هذا المكون الإضافي",
     "title": "تكوين مكون الإضافة {{name}}"

package/locales/bg-BG/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Върни се в началото",
+    "desc": "Опитайте отново по-късно или се върнете в познатия свят",
+    "retry": "Опитай отново",
+    "title": "Страницата се е сблъскала с проблем.."
+  },
+  "notFound": {
+    "backHome": "Върни се в началото",
+    "desc": "Не можем да намерим страницата, която търсите. Моля, проверете дали връзката е правилна.",
+    "title": "Влезли сте в неизвестна територия?"
+  },
   "pluginSettings": {
     "desc": "Попълнете следната конфигурация, за да започнете да използвате този плъгин",
     "title": "Настройки на плъгина {{name}}"

package/locales/de-DE/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Zurück zur Startseite",
+    "desc": "Versuchen Sie es später erneut oder kehren Sie in die bekannte Welt zurück",
+    "retry": "Erneut laden",
+    "title": "Ein Problem ist aufgetreten auf der Seite.."
+  },
+  "notFound": {
+    "backHome": "Zurück zur Startseite",
+    "desc": "Die von Ihnen gesuchte Seite konnte nicht gefunden werden. Bitte überprüfen Sie, ob der Link korrekt ist.",
+    "title": "In unbekanntes Gebiet geraten?"
+  },
   "pluginSettings": {
     "desc": "Führen Sie die folgende Konfiguration durch, um das Plugin zu verwenden",
     "title": "{{name}} Plugin-Konfiguration"

package/locales/en-US/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Back to Home",
+    "desc": "Give it a try later, or go back to the known world.",
+    "retry": "Reload",
+    "title": "Oops, something went wrong.."
+  },
+  "notFound": {
+    "backHome": "Back to Home",
+    "desc": "We couldn't find the page you're looking for, please check if the link is correct",
+    "title": "Entered Unknown Territory?"
+  },
   "pluginSettings": {
     "desc": "Complete the following configuration to start using this plugin",
     "title": "{{name}} Plugin Settings"

package/locales/es-ES/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Volver a la página de inicio",
+    "desc": "Inténtalo de nuevo más tarde, o regresa al mundo conocido",
+    "retry": "Reintentar",
+    "title": "Se ha producido un problema en la página.."
+  },
+  "notFound": {
+    "backHome": "Volver a la página de inicio",
+    "desc": "No podemos encontrar la página que estás buscando, por favor verifica si el enlace es correcto",
+    "title": "¿Has entrado en un área desconocida?"
+  },
   "pluginSettings": {
     "desc": "Complete la siguiente configuración para comenzar a usar este complemento",
     "title": "Configuración del complemento {{name}}"

package/locales/fr-FR/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Retour à la page d'accueil",
+    "desc": "Réessayez plus tard, ou retournez au monde connu",
+    "retry": "Recharger",
+    "title": "Un problème est survenu sur la page.."
+  },
+  "notFound": {
+    "backHome": "Retour à la page d'accueil",
+    "desc": "La page que vous recherchez est introuvable. Veuillez vérifier si le lien est correct.",
+    "title": "Êtes-vous entré dans un domaine inconnu ?"
+  },
   "pluginSettings": {
     "desc": "Completez la configuration suivante pour commencer à utiliser ce plugin",
     "title": "Configuration du plugin {{name}}"

package/locales/it-IT/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Torna alla homepage",
+    "desc": "Prova di nuovo più tardi, o torna al mondo conosciuto",
+    "retry": "Ricarica",
+    "title": "La pagina ha riscontrato un problema.."
+  },
+  "notFound": {
+    "backHome": "Torna alla homepage",
+    "desc": "Non riusciamo a trovare la pagina che stai cercando, controlla che il link sia corretto",
+    "title": "Hai raggiunto un territorio sconosciuto?"
+  },
   "pluginSettings": {
     "desc": "Completa la seguente configurazione per iniziare a utilizzare il plugin",
     "title": "Configurazione del plugin {{name}}"

package/locales/ja-JP/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "ホームに戻る",
+    "desc": "後で試してみるか、既知の世界に戻る",
+    "retry": "再読み込み",
+    "title": "ページに問題が発生しました.."
+  },
+  "notFound": {
+    "backHome": "ホームに戻る",
+    "desc": "お探しのページが見つかりません。リンクが正しいかどうかをご確認ください",
+    "title": "未知の領域に入りましたか？"
+  },
   "pluginSettings": {
     "desc": "以下の設定を完了すると、プラグインを使用することができます",
     "title": "{{name}} プラグイン設定"

package/locales/ko-KR/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "홈페이지로 돌아가기",
+    "desc": "잠시 후 다시 시도하거나 익숙한 세계로 돌아가세요",
+    "retry": "다시 시도",
+    "title": "페이지에서 문제가 발생했습니다."
+  },
+  "notFound": {
+    "backHome": "홈페이지로 돌아가기",
+    "desc": "찾고 있는 페이지를 찾을 수 없습니다. 링크가 올바른지 확인해주세요.",
+    "title": "알 수 없는 영역에 들어갔나요?"
+  },
   "pluginSettings": {
     "desc": "다음 구성을 완료하면 플러그인을 사용할 수 있습니다.",
     "title": "{{name}} 플러그인 설정"

package/locales/nl-NL/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Terug naar startpagina",
+    "desc": "Probeer het later opnieuw of keer terug naar de bekende wereld",
+    "retry": "Opnieuw proberen",
+    "title": "Er is een probleem opgetreden op de pagina.."
+  },
+  "notFound": {
+    "backHome": "Terug naar startpagina",
+    "desc": "We kunnen de pagina die je zoekt niet vinden, controleer of de link juist is",
+    "title": "Betreden onbekend terrein?"
+  },
   "pluginSettings": {
     "desc": "Voltooi de volgende instellingen om de plugin te gebruiken",
     "title": "{{name}} Plugin Instellingen"

package/locales/pl-PL/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Powrót do strony głównej",
+    "desc": "Spróbuj ponownie później lub wróć do znanego świata",
+    "retry": "Ponów próbę",
+    "title": "Napotkano problem na stronie.."
+  },
+  "notFound": {
+    "backHome": "Powrót do strony głównej",
+    "desc": "Nie możemy odnaleźć strony, której szukasz. Sprawdź, czy link jest poprawny.",
+    "title": "Wkraczasz w nieznane terytorium?"
+  },
   "pluginSettings": {
     "desc": "Wykonaj poniższą konfigurację, aby rozpocząć korzystanie z tego wtyczki",
     "title": "Konfiguracja wtyczki {{name}}"

package/locales/pt-BR/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Voltar para a página inicial",
+    "desc": "Tente novamente mais tarde, ou retorne ao mundo conhecido",
+    "retry": "Tentar novamente",
+    "title": "Ocorreu um problema na página.."
+  },
+  "notFound": {
+    "backHome": "Voltar para a página inicial",
+    "desc": "Não conseguimos encontrar a página que você está procurando, por favor, verifique se o link está correto",
+    "title": "Entrou em um território desconhecido?"
+  },
   "pluginSettings": {
     "desc": "Complete a seguinte configuração para começar a usar este plugin",
     "title": "Configuração do plugin {{name}}"

package/locales/ru-RU/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Вернуться на главную",
+    "desc": "Попробуйте позже или вернитесь в знакомый мир",
+    "retry": "Повторить попытку",
+    "title": "Произошла проблема на странице.."
+  },
+  "notFound": {
+    "backHome": "Вернуться на главную",
+    "desc": "Мы не можем найти страницу, которую вы ищете. Пожалуйста, проверьте правильность ссылки",
+    "title": "Заблудились в неизведанных местах?"
+  },
   "pluginSettings": {
     "desc": "Чтобы начать использовать этот плагин, выполните следующую конфигурацию",
     "title": "{{name}} Настройки плагина"

package/locales/tr-TR/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Ana Sayfaya Dön",
+    "desc": "Biraz sonra tekrar deneyin veya bilinen dünyaya geri dönün",
+    "retry": "Yeniden Yükle",
+    "title": "Sayfa bir sorunla karşılaştı.."
+  },
+  "notFound": {
+    "backHome": "Ana Sayfaya Dön",
+    "desc": "Aradığınız sayfayı bulamadık, lütfen bağlantının doğru olduğundan emin olun",
+    "title": "Bilinmeyen bir alana mı girdiniz?"
+  },
   "pluginSettings": {
     "desc": "Bu eklentiyi kullanmaya başlamak için aşağıdaki yapılandırmayı tamamlayın",
     "title": "{{name}} Eklenti Ayarları"

package/locales/vi-VN/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Quay về Trang chủ",
+    "desc": "Hãy thử lại sau, hoặc quay về thế giới đã biết",
+    "retry": "Thử lại",
+    "title": "Trang gặp một chút vấn đề.."
+  },
+  "notFound": {
+    "backHome": "Quay về Trang chủ",
+    "desc": "Chúng tôi không thể tìm thấy trang bạn đang tìm, vui lòng kiểm tra xem liên kết có đúng không",
+    "title": "Bước vào vùng đất chưa biết?"
+  },
   "pluginSettings": {
     "desc": "Hoàn thành cấu hình sau để bắt đầu sử dụng plugin này",
     "title": "Cấu hình Plugin {{name}}"

package/locales/zh-CN/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "返回首页",
+    "desc": "待会来试试，或者回到已知的世界",
+    "retry": "重新加载",
+    "title": "页面遇到一点问题.."
+  },
+  "notFound": {
+    "backHome": "返回首页",
+    "desc": "我们找不到你正在寻找的页面，请检查链接是否正确",
+    "title": "进入了未知领域？"
+  },
   "pluginSettings": {
     "desc": "完成以下配置，即可开始使用该插件",
     "title": "{{name}} 插件配置"

package/locales/zh-TW/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "返回首頁",
+    "desc": "待會再試試，或者回到已知的世界",
+    "retry": "重新加載",
+    "title": "頁面遇到一點問題.."
+  },
+  "notFound": {
+    "backHome": "返回首頁",
+    "desc": "我們找不到您正在尋找的頁面，請檢查連結是否正確",
+    "title": "進入了未知領域？"
+  },
   "pluginSettings": {
     "desc": "完成以下設定後，即可開始使用此外掛",
     "title": "{{name}} 插件設定"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.151.6",
+  "version": "0.151.8",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/{layout/DefaultLayout/Desktop/SideBar → app/(main)/@nav/_layout/Desktop}/index.tsx

@@ -1,17 +1,16 @@
+'use client';
+
 import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
-import { SidebarTabKey } from '@/store/global/initialState';
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 
 import Avatar from './Avatar';
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
-interface Props {
-  sidebarKey?: SidebarTabKey;
-}
-
-export default memo<Props>(({ sidebarKey }) => {
+const Nav = memo(() => {
+  const sidebarKey = useActiveTabKey();
   return (
     <SideNav
       avatar={<Avatar />}
@@ -21,3 +20,7 @@ export default memo<Props>(({ sidebarKey }) => {
     />
   );
 });
+
+Nav.displayName = 'DesktopNav';
+
+export default Nav;

package/src/app/(main)/@nav/_layout/Mobile.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Bot, MessageSquare, User } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { rgba } from 'polished';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useActiveTabKey } from '@/hooks/useActiveTabKey';
+import { SidebarTabKey } from '@/store/global/initialState';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    svg {
+      fill: ${rgba(token.colorPrimary, 0.33)};
+    }
+  `,
+  container: css`
+    position: fixed;
+    z-index: 100;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  `,
+}));
+
+const Nav = memo(() => {
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+  const activeKey = useActiveTabKey();
+  const router = useRouter();
+  const items: MobileTabBarProps['items'] = useMemo(
+    () => [
+      {
+        icon: (active) => (
+          <Icon className={active ? styles.active : undefined} icon={MessageSquare} />
+        ),
+        key: SidebarTabKey.Chat,
+        onClick: () => {
+          router.push('/chat');
+        },
+        title: t('tab.chat'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
+        key: SidebarTabKey.Market,
+        onClick: () => {
+          router.push('/market');
+        },
+        title: t('tab.market'),
+      },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
+        key: SidebarTabKey.Setting,
+        onClick: () => {
+          router.push('/settings');
+        },
+        title: t('tab.setting'),
+      },
+    ],
+    [t],
+  );
+
+  return <MobileTabBar activeKey={activeKey} className={styles.container} items={items} safeArea />;
+});
+
+Nav.displayName = 'MobileNav';
+
+export default Nav;

package/src/app/(main)/@nav/default.tsx

@@ -0,0 +1,10 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+const Nav = ServerLayout({ Desktop, Mobile });
+
+Nav.displayName = 'Nav';
+
+export default Nav;

package/src/app/(main)/_layout/Desktop.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsPWA } from '@/hooks/useIsPWA';
+
+import { LayoutProps } from './type';
+
+const Layout = memo<LayoutProps>(({ children, nav }) => {
+  const isPWA = useIsPWA();
+  const theme = useTheme();
+
+  return (
+    <Flexbox
+      height={'100%'}
+      horizontal
+      style={{
+        borderTop: isPWA ? `1px solid ${theme.colorBorder}` : undefined,
+        position: 'relative',
+      }}
+      width={'100%'}
+    >
+      {nav}
+      {children}
+    </Flexbox>
+  );
+});
+
+Layout.displayName = 'DesktopMainLayout';
+
+export default Layout;

package/src/app/(main)/_layout/Mobile.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { memo } from 'react';
+
+import { LayoutProps } from './type';
+
+const MOBILE_IGNORE_NAV_ROUTES = ['/settings/', '/chat/'];
+
+const Layout = memo(({ children, nav }: LayoutProps) => {
+  const pathname = usePathname();
+  const hideNav = MOBILE_IGNORE_NAV_ROUTES.some((path) => pathname.startsWith(path));
+
+  return (
+    <>
+      {children}
+      {!hideNav && nav}
+    </>
+  );
+});
+
+Layout.displayName = 'MobileMainLayout';
+
+export default Layout;

package/src/app/(main)/_layout/type.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export interface LayoutProps {
+  children: ReactNode;
+  nav: ReactNode;
+}

package/src/app/(main)/chat/(mobile)/features/ChatInput/index.tsx

@@ -27,7 +27,7 @@ const ChatInputMobileLayout = memo(() => {
       setExpand={setExpand}
       style={{
         background: `linear-gradient(to bottom, ${theme.colorFillQuaternary}, transparent)`,
-        width: '100vw',
+        width: '100%',
       }}
       textAreaLeftAddons={<STT mobile />}
       textAreaRightAddons={

package/src/app/(main)/chat/(mobile)/index.tsx

@@ -3,6 +3,8 @@
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
 import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
 
@@ -15,10 +17,9 @@ const ChatMobilePage = memo(() => {
   }, []);
 
   return (
-    <>
-      <SessionHeader />
+    <MobileContentLayout header={<SessionHeader />} withNav>
       <SessionList />
-    </>
+    </MobileContentLayout>
   );
 });
 

package/src/app/(main)/chat/(mobile)/mobile/ChatHeader/index.tsx

@@ -48,6 +48,7 @@ const MobileHeader = memo(() => {
         </>
       }
       showBackButton
+      style={{ width: '100%' }}
     />
   );
 });

package/src/app/(main)/chat/(mobile)/mobile/page.tsx

@@ -2,8 +2,8 @@
 
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Conversation from '@/features/Conversation';
 
 import SessionHydration from '../../components/SessionHydration';
@@ -15,15 +15,12 @@ const TopicList = dynamic(() => import('../features/TopicList'));
 
 const Chat = memo(() => {
   return (
-    <>
-      <ChatHeader />
-      <Flexbox height={'calc(100% - 44px)'} horizontal>
-        <Conversation chatInput={<ChatInput />} mobile />
-        <TopicList />
-        <TelemetryNotification mobile />
-      </Flexbox>
+    <MobileContentLayout header={<ChatHeader />}>
+      <Conversation chatInput={<ChatInput />} mobile />
+      <TopicList />
+      <TelemetryNotification mobile />
       <SessionHydration />
-    </>
+    </MobileContentLayout>
   );
 });
 export default Chat;

package/src/app/(main)/chat/settings/(mobile)/index.tsx

@@ -2,14 +2,15 @@
 
 import { memo } from 'react';
 
+import MobileContentLayout from '@/components/server/MobileNavLayout';
+
 import EditPage from '../features/EditPage';
 import Header from './Header';
 
 const ChatSettings = memo(() => (
-  <>
-    <Header />
+  <MobileContentLayout header={<Header />} withNav={false}>
     <EditPage />
-  </>
+  </MobileContentLayout>
 ));
 
 export default ChatSettings;

package/src/app/(main)/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

package/src/app/(main)/layout.tsx

@@ -0,0 +1,11 @@
+import ServerLayout from '@/components/server/ServerLayout';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+import { LayoutProps } from './_layout/type';
+
+const MainLayout = ServerLayout<LayoutProps>({ Desktop, Mobile });
+
+MainLayout.displayName = 'MainLayout';
+
+export default MainLayout;