@lobehub/chat 0.152.11 → 0.153.0

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;

package/src/app/@modal/chat/(.)settings/modal/features/CategoryContent.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import HeaderContent from '@/app/(main)/chat/settings/features/HeaderContent';
+import Menu from '@/components/Menu';
+import { useQuery } from '@/hooks/useQuery';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { ChatSettingsTabs } from '@/store/global/initialState';
+
+import { useCategory } from './useCategory';
+
+const CategoryContent = memo(() => {
+  const cateItems = useCategory();
+  const router = useQueryRoute();
+  const { tab = ChatSettingsTabs.Meta } = useQuery();
+
+  return (
+    <>
+      <Menu
+        items={cateItems}
+        onClick={({ key }) => {
+          router.replace('/chat/settings/modal', { query: { tab: key } });
+        }}
+        selectable
+        selectedKeys={[tab as any]}
+        variant={'compact'}
+      />
+      <Flexbox align={'center'} gap={8} paddingInline={8} width={'100%'}>
+        <HeaderContent modal />
+      </Flexbox>
+    </>
+  );
+});
+
+export default CategoryContent;

package/src/app/@modal/chat/(.)settings/modal/features/useCategory.tsx

@@ -0,0 +1,54 @@
+import { Icon } from '@lobehub/ui';
+import { Blocks, Bot, BrainCog, MessagesSquare, Mic2, UserCircle } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { MenuProps } from '@/components/Menu';
+import { ChatSettingsTabs } from '@/store/global/initialState';
+
+interface UseCategoryOptions {
+  mobile?: boolean;
+}
+
+export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
+  const { t } = useTranslation('setting');
+  const iconSize = mobile ? { fontSize: 20 } : undefined;
+
+  const cateItems: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={UserCircle} size={iconSize} />,
+        key: ChatSettingsTabs.Meta,
+        label: t('settingAgent.title'),
+      },
+      {
+        icon: <Icon icon={Bot} size={iconSize} />,
+        key: ChatSettingsTabs.Prompt,
+        label: t('settingAgent.prompt.title'),
+      },
+      {
+        icon: <Icon icon={MessagesSquare} size={iconSize} />,
+        key: ChatSettingsTabs.Chat,
+        label: t('settingChat.title'),
+      },
+      {
+        icon: <Icon icon={BrainCog} size={iconSize} />,
+        key: ChatSettingsTabs.Modal,
+        label: t('settingModel.title'),
+      },
+      {
+        icon: <Icon icon={Mic2} size={iconSize} />,
+        key: ChatSettingsTabs.TTS,
+        label: t('settingTTS.title'),
+      },
+      {
+        icon: <Icon icon={Blocks} size={iconSize} />,
+        key: ChatSettingsTabs.Plugin,
+        label: t('settingPlugin.title'),
+      },
+    ],
+    [t],
+  );
+
+  return cateItems;
+};

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

@@ -0,0 +1,55 @@
+'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 StoreUpdater from '@/features/AgentSetting/StoreUpdater';
+import { Provider, createStore } from '@/features/AgentSetting/store';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/slices/chat';
+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 { 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 (
+    <SettingModalLayout
+      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>
+  );
+});
+
+export default Layout;

package/src/app/@modal/chat/(.)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/chat/(.)settings/modal/page.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import { useQuery } from '@/hooks/useQuery';
+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 = ChatSettingsTabs.Meta } = useQuery();
+  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/app/@modal/default.tsx

@@ -0,0 +1,3 @@
+// This ensures that the modal is not rendered when it's not active.
+
+export default () => null;

package/src/app/@modal/error.tsx

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

package/src/app/@modal/layout.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Modal } from '@lobehub/ui';
+import { useRouter } from 'next/navigation';
+import { PropsWithChildren, memo, useState } from 'react';
+
+const SessionSettingsModal = memo<PropsWithChildren>(({ children }) => {
+  const [open, setOpen] = useState(true);
+  const router = useRouter();
+
+  return (
+    <Modal
+      afterClose={() => {
+        router.back();
+      }}
+      footer={null}
+      onCancel={() => setOpen(false)}
+      open={open}
+      styles={{
+        body: { display: 'flex', minHeight: 'min(75vh, 750px)', overflow: 'hidden', padding: 0 },
+      }}
+      title={false}
+      width={1024}
+    >
+      {children}
+    </Modal>
+  );
+});
+
+export default SessionSettingsModal;

package/src/app/@modal/loading.tsx

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

package/src/app/layout.tsx

@@ -12,9 +12,10 @@ import { isMobileDevice } from '@/utils/responsive';
 
 type RootLayoutProps = {
   children: ReactNode;
+  modal: ReactNode;
 };
 
-const RootLayout = async ({ children }: RootLayoutProps) => {
+const RootLayout = async ({ children, modal }: RootLayoutProps) => {
   const cookieStore = cookies();
 
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
@@ -24,7 +25,10 @@ const RootLayout = async ({ children }: RootLayoutProps) => {
     <html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
       <body>
         <GlobalProvider>
-          <AuthProvider>{children}</AuthProvider>
+          <AuthProvider>
+            {children}
+            {modal}
+          </AuthProvider>
         </GlobalProvider>
         <Analytics />
         <SpeedInsights />

package/src/features/AgentSetting/AgentMeta/AutoGenerateInput.tsx

@@ -5,37 +5,42 @@ import { Wand2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+
 export interface AutoGenerateInputProps extends InputProps {
+  canAutoGenerate?: boolean;
   loading?: boolean;
   onGenerate?: () => void;
 }
 
-const AutoGenerateInput = memo<AutoGenerateInputProps>(({ loading, onGenerate, ...props }) => {
-  const { t } = useTranslation('common');
-  const theme = useTheme();
+const AutoGenerateInput = memo<AutoGenerateInputProps>(
+  ({ loading, onGenerate, canAutoGenerate, ...props }) => {
+    const { t } = useTranslation('common');
+    const theme = useTheme();
 
-  return (
-    <Input
-      suffix={
-        onGenerate && (
-          <ActionIcon
-            active
-            icon={Wand2}
-            loading={loading}
-            onClick={onGenerate}
-            size={'small'}
-            style={{
-              color: theme.colorInfo,
-              marginRight: -4,
-            }}
-            title={t('autoGenerate')}
-          />
-        )
-      }
-      type={'block'}
-      {...props}
-    />
-  );
-});
+    return (
+      <Input
+        suffix={
+          onGenerate && (
+            <ActionIcon
+              active
+              disable={!canAutoGenerate}
+              icon={Wand2}
+              loading={loading}
+              onClick={onGenerate}
+              size="small"
+              style={{
+                color: theme.colorInfo,
+                marginRight: -4,
+              }}
+              title={t('autoGenerate')}
+            />
+          )
+        }
+        type="block"
+        {...props}
+      />
+    );
+  },
+);
 
 export default AutoGenerateInput;

package/src/features/AgentSetting/AgentMeta/AutoGenerateSelect.tsx

@@ -7,12 +7,13 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export interface AutoGenerateInputProps extends SelectProps {
+  canAutoGenerate?: boolean;
   loading?: boolean;
   onGenerate?: () => void;
 }
 
 const AutoGenerateSelect = memo<AutoGenerateInputProps>(
-  ({ loading, onGenerate, value, ...props }) => {
+  ({ loading, onGenerate, value, canAutoGenerate, ...props }) => {
     const { t } = useTranslation('common');
     const theme = useTheme();
 
@@ -25,6 +26,7 @@ const AutoGenerateSelect = memo<AutoGenerateInputProps>(
           onGenerate && (
             <ActionIcon
               active
+              disable={!canAutoGenerate}
               icon={Wand2}
               loading={loading}
               onClick={onGenerate}

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -63,6 +63,8 @@ const AgentMeta = memo(() => {
     return {
       children: (
         <AutoGenerate
+          canAutoGenerate={hasSystemRole}
+          disabled={!hasSystemRole}
           loading={loading[item.key as keyof SessionLoadingState]}
           onChange={item.onChange}
           onGenerate={() => {

package/src/features/Conversation/Messages/index.ts

@@ -1,10 +1,7 @@
-import { useResponsive } from 'antd-style';
-import { useRouter } from 'next/navigation';
-
+import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
-import { pathString } from '@/utils/url';
 
 import { OnAvatarsClick, RenderMessage } from '../types';
 import { AssistantMessage } from './Assistant';
@@ -22,18 +19,18 @@ export const renderMessages: Record<string, RenderMessage> = {
 export const useAvatarsClick = (): OnAvatarsClick => {
   const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
   const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
-  const { mobile } = useResponsive();
-  const router = useRouter();
+  const openChatSettings = useOpenChatSettings();
 
   return (role) => {
     switch (role) {
       case 'assistant': {
-        return () =>
-          isInbox
-            ? router.push('/settings/agent')
-            : mobile
-              ? router.push(pathString('/chat/settings', { search: location.search }))
-              : toggleSystemRole(true);
+        return () => {
+          if (!isInbox) {
+            toggleSystemRole(true);
+          } else {
+            openChatSettings();
+          }
+        };
       }
     }
   };

package/src/features/MobileTabBar/index.tsx

@@ -6,6 +6,7 @@ import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useOpenSettings } from '@/hooks/useInterceptingRoutes';
 import { SidebarTabKey } from '@/store/global/initialState';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -24,6 +25,7 @@ interface Props {
 export default memo<Props>(({ className, tabBarKey }) => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
+  const openSettings = useOpenSettings();
   const router = useRouter();
   const items: MobileTabBarProps['items'] = useMemo(
     () => [
@@ -48,9 +50,7 @@ export default memo<Props>(({ className, tabBarKey }) => {
       {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
         key: SidebarTabKey.Setting,
-        onClick: () => {
-          router.push('/settings');
-        },
+        onClick: openSettings,
         title: t('tab.setting'),
       },
     ],

package/src/features/User/UserPanel/useMenu.tsx

@@ -1,4 +1,4 @@
-import { DiscordIcon, Icon } from '@lobehub/ui';
+import { ActionIcon, DiscordIcon, Icon } from '@lobehub/ui';
 import { Badge } from 'antd';
 import {
   Book,
@@ -7,22 +7,29 @@ import {
   HardDriveUpload,
   LifeBuoy,
   Mail,
+  Maximize,
   Settings2,
 } from 'lucide-react';
 import Link from 'next/link';
 import { PropsWithChildren, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import urlJoin from 'url-join';
 
 import { type MenuProps } from '@/components/Menu';
 import { DISCORD, DOCUMENTS, EMAIL_SUPPORT, GITHUB_ISSUES } from '@/const/url';
 import DataImporter from '@/features/DataImporter';
+import { useOpenSettings } from '@/hooks/useInterceptingRoutes';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { configService } from '@/services/config';
+import { SettingsTabs } from '@/store/global/initialState';
 
 import { useNewVersion } from './useNewVersion';
 
 export const useMenu = () => {
+  const router = useQueryRoute();
   const hasNewVersion = useNewVersion();
+  const openSettings = useOpenSettings();
   const { t } = useTranslation(['common', 'setting']);
 
   const NewVersionBadge = useCallback(
@@ -38,6 +45,29 @@ export const useMenu = () => {
     [t],
   );
 
+  const settings: MenuProps['items'] = [
+    {
+      icon: <Icon icon={Settings2} />,
+      key: 'setting',
+      label: (
+        <Flexbox align={'center'} horizontal>
+          <Flexbox flex={1} horizontal onClick={openSettings}>
+            <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>
+          </Flexbox>
+          <ActionIcon
+            icon={Maximize}
+            onClick={() => router.push(urlJoin('/settings', SettingsTabs.Common))}
+            size={'small'}
+            title={t('fullscreen')}
+          />
+        </Flexbox>
+      ),
+    },
+    {
+      type: 'divider',
+    },
+  ];
+
   const exports: MenuProps['items'] = [
     {
       icon: <Icon icon={HardDriveUpload} />,
@@ -79,21 +109,6 @@ export const useMenu = () => {
     },
   ];
 
-  const settings: MenuProps['items'] = [
-    {
-      icon: <Icon icon={Settings2} />,
-      key: 'setting',
-      label: (
-        <Link href={'/settings'}>
-          <NewVersionBadge showBadge={hasNewVersion}>{t('userPanel.setting')}</NewVersionBadge>
-        </Link>
-      ),
-    },
-    {
-      type: 'divider',
-    },
-  ];
-
   const helps: MenuProps['items'] = [
     {
       icon: <Icon icon={DiscordIcon} />,

package/src/hooks/useInterceptingRoutes.test.ts

@@ -0,0 +1,70 @@
+import { renderHook } from '@testing-library/react';
+import urlJoin from 'url-join';
+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 { useSessionStore } from '@/store/session';
+
+import { useOpenChatSettings, useOpenSettings } from './useInterceptingRoutes';
+
+// Mocks
+vi.mock('next/navigation', () => ({
+  useRouter: vi.fn(() => ({
+    push: vi.fn((href) => href),
+    replace: vi.fn((href) => href),
+  })),
+}));
+vi.mock('@/hooks/useQuery', () => ({
+  useQuery: vi.fn(() => ({})),
+}));
+vi.mock('@/hooks/useIsMobile', () => ({
+  useIsMobile: vi.fn(),
+}));
+vi.mock('@/store/session', () => ({
+  useSessionStore: vi.fn(),
+}));
+vi.mock('@/store/global', () => ({
+  useGlobalStore: {
+    setState: vi.fn(),
+  },
+}));
+
+describe('useOpenSettings', () => {
+  it('should handle mobile route correctly', () => {
+    vi.mocked(useIsMobile).mockReturnValue(true);
+    const { result } = renderHook(() => useOpenSettings(SettingsTabs.Common));
+    expect(result.current()).toBe('/settings/common');
+  });
+
+  it('should handle desktop route correctly', () => {
+    vi.mocked(useIsMobile).mockReturnValue(false);
+    const { result } = renderHook(() => useOpenSettings(SettingsTabs.Agent));
+    expect(result.current()).toBe('/settings/modal?tab=agent');
+  });
+});
+
+describe('useOpenChatSettings', () => {
+  it('should handle inbox session id correctly', () => {
+    vi.mocked(useSessionStore).mockReturnValue(INBOX_SESSION_ID);
+    const { result } = renderHook(() => useOpenChatSettings());
+
+    expect(result.current()).toBe('/settings/modal?session=inbox&tab=agent'); // Assuming openSettings returns a function
+  });
+
+  it('should handle mobile route for chat settings', () => {
+    vi.mocked(useSessionStore).mockReturnValue('123');
+    vi.mocked(useIsMobile).mockReturnValue(true);
+    const { result } = renderHook(() => useOpenChatSettings(ChatSettingsTabs.Meta));
+    expect(result.current()).toBe('/chat/settings');
+  });
+
+  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');
+  });
+});