@lobehub/chat 1.52.13 → 1.52.14

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.52.14](https://github.com/lobehub/lobe-chat/compare/v1.52.13...v1.52.14)
+
+<sup>Released on **2025-02-10**</sup>
+
+#### 💄 Styles
+
+- **misc**: Refactor agent settings modal.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Refactor agent settings modal, closes [#5987](https://github.com/lobehub/lobe-chat/issues/5987) ([6482f8a](https://github.com/lobehub/lobe-chat/commit/6482f8a))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.52.13](https://github.com/lobehub/lobe-chat/compare/v1.52.12...v1.52.13)
 
 <sup>Released on **2025-02-10**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Refactor agent settings modal."
+      ]
+    },
+    "date": "2025-02-10",
+    "version": "1.52.14"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.52.13",
+  "version": "1.52.14",
   "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/[variants]/{@modal/chat/(.)settings/modal/features/CategoryContent.tsx → (main)/chat/(workspace)/features/AgentSettings/CategoryContent/index.tsx}

@@ -5,22 +5,23 @@ import { Flexbox } from 'react-layout-kit';
 
 import HeaderContent from '@/app/[variants]/(main)/chat/settings/features/HeaderContent';
 import Menu from '@/components/Menu';
-import { useChatSettingsTab } from '@/hooks/useChatSettingsTab';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { ChatSettingsTabs } from '@/store/global/initialState';
 
 import { useCategory } from './useCategory';
 
-const CategoryContent = memo(() => {
+interface CategoryContentProps {
+  setTab: (tab: ChatSettingsTabs) => void;
+  tab: string;
+}
+const CategoryContent = memo<CategoryContentProps>(({ setTab, tab }) => {
   const cateItems = useCategory();
-  const tab = useChatSettingsTab();
-  const router = useQueryRoute();
 
   return (
     <>
       <Menu
         items={cateItems}
         onClick={({ key }) => {
-          router.replace('/chat/settings/modal', { query: { tab: key } });
+          setTab(key as ChatSettingsTabs);
         }}
         selectable
         selectedKeys={[tab as any]}

package/src/app/[variants]/(main)/chat/(workspace)/features/AgentSettings/index.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { Drawer } from 'antd';
+import { useResponsive, useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import Header from '@/app/[variants]/(main)/settings/_layout/Desktop/Header';
+import AgentChat from '@/features/AgentSetting/AgentChat';
+import AgentMeta from '@/features/AgentSetting/AgentMeta';
+import AgentModal from '@/features/AgentSetting/AgentModal';
+import AgentPlugin from '@/features/AgentSetting/AgentPlugin';
+import AgentPrompt from '@/features/AgentSetting/AgentPrompt';
+import AgentTTS from '@/features/AgentSetting/AgentTTS';
+import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
+import { Provider, createStore } from '@/features/AgentSetting/store';
+import Footer from '@/features/Setting/Footer';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+import { ChatSettingsTabs } from '@/store/global/initialState';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors } from '@/store/session/selectors';
+
+import CategoryContent from './CategoryContent';
+
+const AgentSettings = memo(() => {
+  const { t } = useTranslation('setting');
+  const id = useSessionStore((s) => s.activeId);
+  const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
+  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
+  const [showAgentSetting, updateAgentConfig] = useAgentStore((s) => [
+    s.showAgentSetting,
+    s.updateAgentConfig,
+  ]);
+  const [updateAgentMeta] = useSessionStore((s) => [
+    s.updateSessionMeta,
+    sessionMetaSelectors.currentAgentTitle(s),
+  ]);
+
+  const [tab, setTab] = useState(ChatSettingsTabs.Meta);
+
+  const ref = useRef<any>(null);
+  const theme = useTheme();
+  const { md = true, mobile = false } = useResponsive();
+
+  const category = <CategoryContent setTab={setTab} tab={tab} />;
+  return (
+    <Provider createStore={createStore}>
+      <StoreUpdater
+        config={config}
+        id={id}
+        meta={meta}
+        onConfigChange={updateAgentConfig}
+        onMetaChange={updateAgentMeta}
+      />
+      <Drawer
+        height={'100vh'}
+        onClose={() => {
+          useAgentStore.setState({ showAgentSetting: false });
+        }}
+        open={showAgentSetting}
+        placement={'bottom'}
+        styles={{
+          body: { padding: 0 },
+          content: {
+            background: theme.colorBgContainer,
+          },
+        }}
+        title={t('header.session')}
+      >
+        <Flexbox height={'100%'} horizontal={md} ref={ref} width={'100%'}>
+          {md ? (
+            <Flexbox padding={16}>{category}</Flexbox>
+          ) : (
+            <Header
+              getContainer={() => ref.current}
+              title={t(`agentTab.${tab as ChatSettingsTabs}`)}
+            >
+              {category}
+            </Header>
+          )}
+          <Flexbox
+            align={'center'}
+            gap={mobile ? 0 : 64}
+            paddingInline={mobile ? 0 : 56}
+            style={{
+              background: mobile
+                ? theme.colorBgContainer
+                : theme.isDarkMode
+                  ? theme.colorFillQuaternary
+                  : theme.colorBgElevated,
+              minHeight: '100%',
+              overflowX: 'hidden',
+              overflowY: 'auto',
+              paddingTop: mobile ? 0 : 16,
+            }}
+            width={'100%'}
+          >
+            {tab === ChatSettingsTabs.Meta && <AgentMeta />}
+            {tab === ChatSettingsTabs.Prompt && <AgentPrompt modal />}
+            {tab === ChatSettingsTabs.Chat && <AgentChat />}
+            {tab === ChatSettingsTabs.Modal && <AgentModal />}
+            {tab === ChatSettingsTabs.TTS && <AgentTTS />}
+            {tab === ChatSettingsTabs.Plugin && <AgentPlugin />} <Footer />
+          </Flexbox>
+        </Flexbox>
+      </Drawer>
+    </Provider>
+  );
+});
+
+export default AgentSettings;

package/src/app/[variants]/(main)/chat/(workspace)/features/SettingButton.tsx

@@ -2,23 +2,31 @@
 
 import { ActionIcon } from '@lobehub/ui';
 import { AlignJustify } from 'lucide-react';
+import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 
+const AgentSettings = dynamic(() => import('./AgentSettings'), {
+  ssr: false,
+});
+
 const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('common');
   const openChatSettings = useOpenChatSettings();
 
   return (
-    <ActionIcon
-      icon={AlignJustify}
-      onClick={() => openChatSettings()}
-      size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
-      title={t('header.session', { ns: 'setting' })}
-    />
+    <>
+      <ActionIcon
+        icon={AlignJustify}
+        onClick={() => openChatSettings()}
+        size={mobile ? MOBILE_HEADER_ICON_SIZE : DESKTOP_HEADER_ICON_SIZE}
+        title={t('header.session', { ns: 'setting' })}
+      />
+      <AgentSettings />
+    </>
   );
 });
 

package/src/hooks/useInterceptingRoutes.test.ts

@@ -1,11 +1,10 @@
-import { renderHook } from '@testing-library/react';
-import urlJoin from 'url-join';
+import { act, renderHook } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useIsMobile } from '@/hooks/useIsMobile';
-import { useGlobalStore } from '@/store/global';
-import { ChatSettingsTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
+import { useAgentStore } from '@/store/agent';
+import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 import { useOpenChatSettings } from './useInterceptingRoutes';
@@ -50,7 +49,13 @@ describe('useOpenChatSettings', () => {
   it('should handle desktop route for chat settings with session and tab', () => {
     vi.mocked(useSessionStore).mockReturnValue('456');
     vi.mocked(useIsMobile).mockReturnValue(false);
+
     const { result } = renderHook(() => useOpenChatSettings(ChatSettingsTabs.Meta));
-    expect(result.current()).toBe('/chat/settings/modal?session=456&tab=meta');
+
+    act(() => {
+      result.current();
+    });
+
+    expect(useAgentStore.getState().showAgentSetting).toBeTruthy();
   });
 });

package/src/hooks/useInterceptingRoutes.ts

@@ -4,23 +4,25 @@ import urlJoin from 'url-join';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { useIsMobile } from '@/hooks/useIsMobile';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useAgentStore } from '@/store/agent';
 import { ChatSettingsTabs, SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Meta) => {
   const activeId = useSessionStore((s) => s.activeId);
+
+  const isMobile = useIsMobile();
   const router = useQueryRoute();
-  const mobile = useIsMobile();
 
   return useMemo(() => {
     if (activeId === INBOX_SESSION_ID) {
       return () => router.push(urlJoin('/settings', SettingsTabs.Agent));
     }
-    if (mobile) {
-      return () => router.push('/chat/settings');
-    } else {
-      // use Intercepting Routes on Desktop
-      return () => router.push('/chat/settings/modal', { query: { session: activeId, tab } });
-    }
-  }, [mobile, activeId, router, tab]);
+
+    if (isMobile) return () => router.push('/chat/settings');
+
+    return () => {
+      useAgentStore.setState({ showAgentSetting: true });
+    };
+  }, [activeId, router, tab, isMobile]);
 };

package/src/store/agent/slices/chat/initialState.ts

@@ -11,6 +11,7 @@ export interface AgentState {
   agentSettingInstance?: AgentSettingsInstance | null;
   defaultAgentConfig: LobeAgentConfig;
   isInboxAgentConfigInit: boolean;
+  showAgentSetting: boolean;
   updateAgentChatConfigSignal?: AbortController;
   updateAgentConfigSignal?: AbortController;
 }
@@ -20,4 +21,5 @@ export const initialAgentChatState: AgentState = {
   agentMap: {},
   defaultAgentConfig: DEFAULT_AGENT_CONFIG,
   isInboxAgentConfigInit: false,
+  showAgentSetting: false,
 };

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

@@ -1,23 +0,0 @@
-'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/[variants]/@modal/chat/(.)settings/modal/layout.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-import { Skeleton } from 'antd';
-import isEqual from 'fast-deep-equal';
-import dynamic from 'next/dynamic';
-import { PropsWithChildren, memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import ModalLayout from '@/app/[variants]/@modal/_layout/ModalLayout';
-import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
-import { Provider, createStore } from '@/features/AgentSetting/store';
-import { useChatSettingsTab } from '@/hooks/useChatSettingsTab';
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/slices/chat';
-import { ChatSettingsTabs } from '@/store/global/initialState';
-import { useSessionStore } from '@/store/session';
-import { sessionMetaSelectors } from '@/store/session/selectors';
-
-import SettingModalLayout from '../../../_layout/SettingModalLayout';
-
-const CategoryContent = dynamic(() => import('./features/CategoryContent'), {
-  loading: () => <Skeleton paragraph={{ rows: 6 }} title={false} />,
-  ssr: false,
-});
-
-const Layout = memo<PropsWithChildren>(({ children }) => {
-  const tab = useChatSettingsTab();
-  const { t } = useTranslation('setting');
-  const id = useSessionStore((s) => s.activeId);
-  const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
-  const meta = useSessionStore(sessionMetaSelectors.currentAgentMeta, isEqual);
-  const [updateAgentConfig] = useAgentStore((s) => [s.updateAgentConfig]);
-  const [updateAgentMeta] = useSessionStore((s) => [
-    s.updateSessionMeta,
-    sessionMetaSelectors.currentAgentTitle(s),
-  ]);
-
-  return (
-    <ModalLayout>
-      <SettingModalLayout
-        activeTitle={t(`agentTab.${tab as ChatSettingsTabs}`)}
-        category={<CategoryContent />}
-        desc={t('header.sessionDesc')}
-        title={t('header.session')}
-      >
-        <Provider createStore={createStore}>
-          <StoreUpdater
-            config={config}
-            id={id}
-            meta={meta}
-            onConfigChange={updateAgentConfig}
-            onMetaChange={updateAgentMeta}
-          />
-          {children}
-        </Provider>
-      </SettingModalLayout>
-    </ModalLayout>
-  );
-});
-
-export default Layout;

package/src/app/[variants]/@modal/chat/(.)settings/modal/loading.tsx

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

package/src/app/[variants]/@modal/chat/(.)settings/modal/page.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-
-import { useChatSettingsTab } from '@/hooks/useChatSettingsTab';
-import { ChatSettingsTabs } from '@/store/global/initialState';
-
-import Skeleton from './loading';
-
-const loading = () => <Skeleton />;
-
-const AgentMeta = dynamic(() => import('@/features/AgentSetting/AgentMeta'), {
-  loading,
-  ssr: false,
-});
-const AgentChat = dynamic(() => import('@/features/AgentSetting/AgentChat'), {
-  loading,
-  ssr: false,
-});
-const AgentPrompt = dynamic(() => import('@/features/AgentSetting/AgentPrompt'), {
-  loading,
-  ssr: false,
-});
-const AgentPlugin = dynamic(() => import('@/features/AgentSetting/AgentPlugin'), {
-  loading,
-  ssr: false,
-});
-const AgentModal = dynamic(() => import('@/features/AgentSetting/AgentModal'), {
-  loading,
-  ssr: false,
-});
-const AgentTTS = dynamic(() => import('@/features/AgentSetting/AgentTTS'), { loading, ssr: false });
-
-/**
- * @description: Agent Settings Modal (intercepting route: /chat/settings/modal )
- * @refs: https://github.com/lobehub/lobe-chat/discussions/2295#discussioncomment-9290942
- */
-
-const Page = () => {
-  const tab = useChatSettingsTab();
-
-  return (
-    <>
-      {tab === ChatSettingsTabs.Meta && <AgentMeta />}
-      {tab === ChatSettingsTabs.Prompt && <AgentPrompt modal />}
-      {tab === ChatSettingsTabs.Chat && <AgentChat />}
-      {tab === ChatSettingsTabs.Modal && <AgentModal />}
-      {tab === ChatSettingsTabs.TTS && <AgentTTS />}
-      {tab === ChatSettingsTabs.Plugin && <AgentPlugin />}
-    </>
-  );
-};
-
-Page.displayName = 'AgentSettingModal';
-
-export default Page;

package/src/hooks/useChatSettingsTab.ts

@@ -1,12 +0,0 @@
-import { useQueryState } from 'nuqs';
-
-import { ChatSettingsTabs } from '@/store/global/initialState';
-
-export const useChatSettingsTab = () => {
-  const [type] = useQueryState('tab', {
-    clearOnDefault: true,
-    defaultValue: ChatSettingsTabs.Meta,
-  });
-
-  return type as ChatSettingsTabs;
-};