@lobehub/chat 0.152.12 → 0.153.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 0.153.0](https://github.com/lobehub/lobe-chat/compare/v0.152.12...v0.153.0)
+
+<sup>Released on **2024-05-04**</sup>
+
+#### ✨ Features
+
+- **misc**: Add Settings Intercepting Routes.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add Settings Intercepting Routes, closes [#2346](https://github.com/lobehub/lobe-chat/issues/2346) ([29b6442](https://github.com/lobehub/lobe-chat/commit/29b6442))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.152.12](https://github.com/lobehub/lobe-chat/compare/v0.152.11...v0.152.12)
 
 <sup>Released on **2024-05-04**</sup>

package/README.md

@@ -222,14 +222,14 @@ In addition, these plugins are not limited to news aggregation, but can also ext
 
 <!-- PLUGIN LIST -->
 
-| Recent Submits                                                                                                            | Description                                                                                                                                 |
-| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Social Search](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>         | The Social Search provides access to tweets, users, followers, images, media and more.<br/>`social` `twitter` `x` `search`                  |
-| [Search Google via Serper](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | Google search engine via Serper.dev free API (2500x🆓/month)<br/>`web` `search`                                                             |
-| [Speak](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **speak** on **2024-04-30**</sup>                    | Learn how to say anything in another language with Speak, your AI-powered language tutor.<br/>`education` `language`                        |
-| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                  | Discover current prices of NFTs across major platforms and keep track of the rapidly changing marketplace with real-time<br/>`crypto` `nft` |
-
-> 📊 Total plugins: [<kbd>**57**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+| Recent Submits                                                                                                            | Description                                                                                                                                     |
+| ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Social Search](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>         | The Social Search provides access to tweets, users, followers, images, media and more.<br/>`social` `twitter` `x` `search`                      |
+| [Search Google via Serper](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | Google search engine via Serper.dev free API (2500x🆓/month)<br/>`web` `search`                                                                 |
+| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                  | Discover current prices of NFTs across major platforms and keep track of the rapidly changing marketplace with real-time<br/>`crypto` `nft`     |
+| [Calendar Assistant](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **cc** on **2024-03-13**</sup>          | A plugin to manage your calendar events # will auto generate i18n in workflow<br/>`calendar` `schedule` `will-auto-generate-i-18-n-in-workflow` |
+
+> 📊 Total plugins: [<kbd>**56**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
 
  <!-- PLUGIN LIST -->
 

package/README.zh-CN.md

@@ -214,14 +214,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- PLUGIN LIST -->
 
-| 最近新增                                                                                                                 | 插件描述                                                                                 |
-| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
-| [社交搜索](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>             | 社交搜索提供访问推文、用户、关注者、图片、媒体等功能。<br/>`社交` `推特` `x` `搜索`      |
-| [通过 Serper 搜索 Google](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | 通过 Serper.dev 免费 API 进行 Google 搜索引擎（每月 2500 次🆓）<br/>`网络` `搜索`        |
-| [Speak](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **speak** on **2024-04-30**</sup>                   | 使用 Speak，您的 AI 语言导师，学习如何用另一种语言说任何事情。<br/>`教育` `语言`         |
-| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                 | 发现主要平台上 NFT 的当前价格，并通过实时跟踪快速变化的市场了解情况<br/>`加密货币` `nft` |
-
-> 📊 Total plugins: [<kbd>**57**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
+| 最近新增                                                                                                                 | 插件描述                                                                                                       |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| [社交搜索](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **say-apps** on **2024-05-02**</sup>             | 社交搜索提供访问推文、用户、关注者、图片、媒体等功能。<br/>`社交` `推特` `x` `搜索`                            |
+| [通过 Serper 搜索 Google](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **Barry** on **2024-04-30**</sup> | 通过 Serper.dev 免费 API 进行 Google 搜索引擎（每月 2500 次🆓）<br/>`网络` `搜索`                              |
+| [NFT Guru](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **swap** on **2024-04-03**</sup>                 | 发现主要平台上 NFT 的当前价格，并通过实时跟踪快速变化的市场了解情况<br/>`加密货币` `nft`                       |
+| [日历助手](https://chat-preview.lobehub.com/settings/agent)<br/><sup>By **cc** on **2024-03-13**</sup>                   | 一个用于管理日历事件的插件 # 将自动生成工作流程中的 i18n<br/>`日历` `日程安排` `将自动生成工作流程中的-i-18-n` |
+
+> 📊 Total plugins: [<kbd>**56**</kbd>](https://github.com/lobehub/lobe-chat-plugins)
 
  <!-- PLUGIN LIST -->
 

package/locales/ar/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "تقديم ملاحظات",
   "follow": "تابعنا على {{name}}",
+  "fullscreen": "وضع كامل الشاشة",
   "historyRange": "نطاق التاريخ",
   "import": "استيراد الإعدادات",
   "importModal": {

package/locales/bg-BG/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Обратна връзка",
   "follow": "Следете ни на {{name}}",
+  "fullscreen": "Цял екран",
   "historyRange": "Диапазон на историята",
   "import": "Импортирай конфигурация",
   "importModal": {

package/locales/de-DE/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback und Vorschläge",
   "follow": "Folge uns auf {{name}}",
+  "fullscreen": "Vollbildmodus",
   "historyRange": "Verlaufsbereich",
   "import": "Importieren",
   "importModal": {

package/locales/en-US/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback",
   "follow": "Follow us on {{name}}",
+  "fullscreen": "Full Screen Mode",
   "historyRange": "History Range",
   "import": "Import Configuration",
   "importModal": {

package/locales/es-ES/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Comentarios y sugerencias",
   "follow": "Síguenos en {{name}}",
+  "fullscreen": "Pantalla completa",
   "historyRange": "Rango de historial",
   "import": "Importar configuración",
   "importModal": {

package/locales/fr-FR/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Retour d'information et suggestions",
   "follow": "Suivez-nous sur {{name}}",
+  "fullscreen": "Mode plein écran",
   "historyRange": "Plage d'historique",
   "import": "Importer",
   "importModal": {

package/locales/it-IT/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback e suggerimenti",
   "follow": "Seguici su {{name}}",
+  "fullscreen": "Modalità a schermo intero",
   "historyRange": "Intervallo cronologico",
   "import": "Importa configurazione",
   "importModal": {

package/locales/ja-JP/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "フィードバック",
   "follow": " {{name}} で私たちをフォローする",
+  "fullscreen": "フルスクリーンモード",
   "historyRange": "履歴範囲",
   "import": "インポート",
   "importModal": {

package/locales/ko-KR/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "피드백 및 제안",
   "follow": "{{name}}에서 우리를 팔로우하세요",
+  "fullscreen": "전체 화면",
   "historyRange": "기록 범위",
   "import": "가져오기",
   "importModal": {

package/locales/nl-NL/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback en suggesties",
   "follow": "Volg ons op {{name}}",
+  "fullscreen": "Volledig scherm",
   "historyRange": "Geschiedenisbereik",
   "import": "Importeren",
   "importModal": {

package/locales/pl-PL/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Opinie i sugestie",
   "follow": "Zaobserwuj nas na {{name}}",
+  "fullscreen": "Tryb pełnoekranowy",
   "historyRange": "Zakres historii",
   "import": "Importuj ustawienia",
   "importModal": {

package/locales/pt-BR/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback e sugestões",
   "follow": "Siga-nos no {{name}}",
+  "fullscreen": "Modo de Tela Cheia",
   "historyRange": "Intervalo de histórico",
   "import": "Importar configuração",
   "importModal": {

package/locales/ru-RU/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Обратная связь и предложения",
   "follow": "Подпишитесь на нас на {{name}}",
+  "fullscreen": "Полноэкранный режим",
   "historyRange": "История",
   "import": "Импорт настроек",
   "importModal": {

package/locales/tr-TR/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Feedback",
   "follow": "Bizi {{name}} üzerinde takip edin",
+  "fullscreen": "Tam Ekran Modu",
   "historyRange": "Geçmiş Aralığı",
   "import": "İçe Aktar",
   "importModal": {

package/locales/vi-VN/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "Phản hồi và đề xuất",
   "follow": "Theo dõi chúng tôi trên {{name}}",
+  "fullscreen": "Chế độ toàn màn hình",
   "historyRange": "Phạm vi lịch sử",
   "import": "Nhập cấu hình",
   "importModal": {

package/locales/zh-CN/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "反馈与建议",
   "follow": "在 {{name}} 上关注我们",
+  "fullscreen": "全屏模式",
   "historyRange": "历史范围",
   "import": "导入配置",
   "importModal": {

package/locales/zh-TW/common.json

@@ -28,6 +28,7 @@
   },
   "feedback": "回饋與建議",
   "follow": "在 {{name}} 上關注我們",
+  "fullscreen": "全螢幕模式",
   "historyRange": "歷史範圍",
   "import": "匯入設定",
   "importModal": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.152.12",
+  "version": "0.153.0",
   "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/app/(main)/chat/(desktop)/features/ChatHeader/Main.tsx

@@ -1,21 +1,18 @@
 import { Avatar, ChatHeaderTitle } from '@lobehub/ui';
 import { Skeleton } from 'antd';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
-import { pathString } from '@/utils/url';
 
 import Tags from './Tags';
 
 const Main = memo(() => {
   const { t } = useTranslation('chat');
 
-  const router = useRouter();
-
   const [init, isInbox, title, description, avatar, backgroundColor] = useSessionStore((s) => [
     sessionSelectors.isSomeSessionActive(s),
     sessionSelectors.isInboxSession(s),
@@ -25,6 +22,8 @@ const Main = memo(() => {
     sessionMetaSelectors.currentAgentBackgroundColor(s),
   ]);
 
+  const openChatSettings = useOpenChatSettings();
+
   const displayTitle = isInbox ? t('inbox.title') : title;
   const displayDesc = isInbox ? t('inbox.desc') : description;
 
@@ -42,11 +41,7 @@ const Main = memo(() => {
       <Avatar
         avatar={avatar}
         background={backgroundColor}
-        onClick={() =>
-          isInbox
-            ? router.push('/settings/agent')
-            : router.push(pathString('/chat/settings', { search: location.search }))
-        }
+        onClick={openChatSettings}
         size={40}
         title={title}
       />

package/src/app/(main)/chat/(desktop)/features/SideBar/SystemRole/index.tsx

@@ -1,28 +1,27 @@
 import { ActionIcon, EditableMessage } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { Edit } from 'lucide-react';
-import { useRouter } from 'next/navigation';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
 
+import SidebarHeader from '@/components/SidebarHeader';
 import AgentInfo from '@/features/AgentInfo';
+import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useGlobalStore } from '@/store/global';
+import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
-import { pathString } from '@/utils/url';
 
-import SidebarHeader from '../../../../components/SidebarHeader';
 import { useStyles } from './style';
 
 const SystemRole = memo(() => {
-  const router = useRouter();
   const [editing, setEditing] = useState(false);
   const { styles } = useStyles();
-
+  const openChatSettings = useOpenChatSettings(ChatSettingsTabs.Prompt);
   const [init, meta] = useSessionStore((s) => [
     sessionSelectors.isSomeSessionActive(s),
     sessionMetaSelectors.currentAgentMeta(s),
@@ -93,7 +92,7 @@ const SystemRole = memo(() => {
                     onAvatarClick={() => {
                       setOpen(false);
                       setEditing(false);
-                      router.push(pathString('/chat/settings', { search: location.search }));
+                      openChatSettings();
                     }}
                     style={{ marginBottom: 16 }}
                   />

package/src/app/(main)/chat/features/SettingButton.tsx

@@ -4,30 +4,16 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { useGlobalStore } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
+import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 
 const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const isInbox = useSessionStore(sessionSelectors.isInboxSession);
   const { t } = useTranslation('common');
-  const router = useQueryRoute();
+  const openChatSettings = useOpenChatSettings();
 
   return (
     <ActionIcon
       icon={AlignJustify}
-      onClick={() => {
-        if (isInbox) {
-          useGlobalStore.setState({
-            sidebarKey: SidebarTabKey.Setting,
-          });
-          router.push('/settings/agent');
-        } else {
-          router.push('/chat/settings');
-        }
-      }}
+      onClick={openChatSettings}
       size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
       title={t('header.session', { ns: 'setting' })}
     />

package/src/app/(main)/chat/features/TopicListContent/Header.tsx

@@ -5,10 +5,10 @@ import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import SidebarHeader from '@/components/SidebarHeader';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 
-import SidebarHeader from '../../components/SidebarHeader';
 import TopicSearchBar from './TopicSearchBar';
 
 const Header = memo(() => {

package/src/app/(main)/chat/settings/_layout/Desktop/Header.tsx

@@ -5,9 +5,10 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import HeaderContent from '@/app/(main)/chat/settings/features/HeaderContent';
 import { pathString } from '@/utils/url';
 
+import HeaderContent from '../../features/HeaderContent';
+
 const Header = memo(() => {
   const { t } = useTranslation('setting');
   const router = useRouter();

package/src/app/(main)/chat/settings/_layout/Mobile/Header.tsx

@@ -5,10 +5,11 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import HeaderContent from '@/app/(main)/chat/settings/features/HeaderContent';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 import { pathString } from '@/utils/url';
 
+import HeaderContent from '../../features/HeaderContent';
+
 const Header = memo(() => {
   const { t } = useTranslation('setting');
   const router = useRouter();

package/src/app/(main)/chat/settings/modal/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useLayoutEffect } from 'react';
+
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+
+/**
+ * @description: Chat Settings Modal (intercepting routes fallback when hard refresh)
+ * @example: /chat/settings/modal?tab=prompt => /chat/settings
+ * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
+ */
+
+const ChatSettingsModalFallback = () => {
+  const router = useQueryRoute();
+
+  useLayoutEffect(() => {
+    router.replace('/chat/settings', { query: { tab: '' } });
+  }, []);
+
+  return null;
+};
+
+export default ChatSettingsModalFallback;

package/src/app/(main)/settings/@category/features/CategoryContent.tsx

@@ -21,7 +21,11 @@ const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
     <Menu
       items={cateItems}
       onClick={({ key }) => {
-        router.push(urlJoin('/settings', key));
+        if (modal) {
+          router.replace('/settings/modal', { query: { tab: key } });
+        } else {
+          router.push(urlJoin('/settings', key));
+        }
       }}
       selectable
       selectedKeys={[modal ? tab : (activeTab as any)]}

package/src/app/(main)/settings/modal/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useLayoutEffect } from 'react';
+import urlJoin from 'url-join';
+
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { SettingsTabs } from '@/store/global/initialState';
+
+/**
+ * @description: Settings Modal (intercepting routes fallback when hard refresh)
+ * @example: /settings/modal?tab=common => /settings/common
+ * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
+ */
+
+const SettingsModalFallback = () => {
+  const { tab = SettingsTabs.Common } = useQuery();
+  const router = useQueryRoute();
+
+  useLayoutEffect(() => {
+    router.replace(urlJoin('/settings', tab as SettingsTabs), { query: { tab: '' } });
+  }, []);
+
+  return null;
+};
+
+export default SettingsModalFallback;

package/src/app/@modal/(.)settings/modal/index.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+
+import { useQuery } from '@/hooks/useQuery';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Skeleton from './loading';
+
+const loading = () => <Skeleton />;
+
+const Common = dynamic(() => import('@/app/(main)/settings/common'), { loading, ssr: false });
+const About = dynamic(() => import('@/app/(main)/settings/about'), { loading, ssr: false });
+const LLM = dynamic(() => import('@/app/(main)/settings/llm'), { loading, ssr: false });
+const TTS = dynamic(() => import('@/app/(main)/settings/tts'), { loading, ssr: false });
+const Agent = dynamic(() => import('@/app/(main)/settings/agent'), { loading, ssr: false });
+const Sync = dynamic(() => import('@/app/(main)/settings/sync'), { loading, ssr: false });
+
+interface SettingsModalProps {
+  browser?: string;
+  mobile?: boolean;
+  os?: string;
+}
+
+const SettingsModal = memo<SettingsModalProps>(({ browser, os, mobile }) => {
+  const { tab = SettingsTabs.Common } = useQuery();
+  return (
+    <>
+      {tab === SettingsTabs.Common && <Common />}
+      {tab === SettingsTabs.Sync && <Sync browser={browser} mobile={mobile} os={os} />}
+      {tab === SettingsTabs.LLM && <LLM />}
+      {tab === SettingsTabs.TTS && <TTS />}
+      {tab === SettingsTabs.Agent && <Agent />}
+      {tab === SettingsTabs.About && <About mobile={mobile} />}
+    </>
+  );
+});
+
+export default SettingsModal;

package/src/app/@modal/(.)settings/modal/layout.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { PropsWithChildren, memo } from 'react';
+
+import SettingModalLayout from '../../_layout/SettingModalLayout';
+
+const CategoryContent = dynamic(
+  () => import('@/app/(main)/settings/@category/features/CategoryContent'),
+  { loading: () => <Skeleton paragraph={{ rows: 6 }} title={false} />, ssr: false },
+);
+const UpgradeAlert = dynamic(() => import('@/app/(main)/settings/features/UpgradeAlert'), {
+  ssr: false,
+});
+
+const Layout = memo<PropsWithChildren>(({ children }) => {
+  return (
+    <SettingModalLayout
+      category={
+        <>
+          <CategoryContent modal />
+          <UpgradeAlert />
+        </>
+      }
+    >
+      {children}
+    </SettingModalLayout>
+  );
+});
+
+export default Layout;

package/src/app/@modal/(.)settings/modal/loading.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from 'antd';
+
+export default () => {
+  return <Skeleton paragraph={{ rows: 6 }} style={{ paddingBlock: 16 }} />;
+};

package/src/app/@modal/(.)settings/modal/page.tsx

@@ -0,0 +1,19 @@
+import { gerServerDeviceInfo, isMobileDevice } from '@/utils/responsive';
+
+import SettingsModal from './index';
+
+/**
+ * @description: Settings Modal (intercepting route: /settings/modal )
+ * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
+ */
+
+const Page = () => {
+  const isMobile = isMobileDevice();
+  const { os, browser } = gerServerDeviceInfo();
+
+  return <SettingsModal browser={browser} mobile={isMobile} os={os} />;
+};
+
+Page.displayName = 'SettingModal';
+
+export default Page;

package/src/app/@modal/_layout/SettingModalLayout.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useResponsive, useTheme, useThemeMode } from 'antd-style';
+import { ReactNode, memo, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Header from '@/app/(main)/settings/_layout/Desktop/Header';
+import SideBar from '@/app/(main)/settings/_layout/Desktop/SideBar';
+
+interface SettingLayoutProps {
+  category: ReactNode;
+  children: ReactNode;
+  desc?: string;
+  title?: string;
+}
+
+const SettingModalLayout = memo<SettingLayoutProps>(({ children, category, desc, title }) => {
+  const ref = useRef<any>(null);
+  const theme = useTheme();
+  const { isDarkMode } = useThemeMode();
+  const { md = true } = useResponsive();
+
+  return (
+    <>
+      {md ? (
+        <SideBar
+          desc={desc}
+          style={{
+            background: isDarkMode ? theme.colorBgContainer : theme.colorFillTertiary,
+            borderColor: theme.colorFillTertiary,
+          }}
+          title={title}
+        >
+          {category}
+        </SideBar>
+      ) : (
+        <Header getContainer={() => ref.current}>{category}</Header>
+      )}
+      <Flexbox
+        align={'center'}
+        gap={64}
+        style={{
+          background: isDarkMode ? theme.colorFillQuaternary : theme.colorBgElevated,
+          overflowX: 'hidden',
+          overflowY: 'auto',
+          paddingBlock: 40,
+          paddingInline: 56,
+        }}
+        width={'100%'}
+      >
+        {children}
+      </Flexbox>
+    </>
+  );
+});
+
+SettingModalLayout.displayName = 'SettingModalLayout';
+
+export default SettingModalLayout;