@lobehub/chat 0.152.12 → 0.153.1

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)/market/@detail/features/{AgentDetailContent/index.tsx → AgentDetailContent.tsx}

@@ -5,21 +5,20 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import AgentCardBanner from '@/app/(main)/market/features/AgentCard/AgentCardBanner';
+import Banner from '@/app/(main)/market/@detail/features/Banner';
 import { useMarketStore } from '@/store/market';
 
 import Comment from './Comment';
 import Header from './Header';
 import Loading from './Loading';
 import TokenTag from './TokenTag';
-import { useStyles } from './style';
 
 enum InfoTabs {
   comment = 'comment',
   prompt = 'prompt',
 }
 
-const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
+const AgentDetailContent = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [useFetchAgent, currentIdentifier] = useMarketStore((s) => [
     s.useFetchAgent,
     s.currentIdentifier,
@@ -27,7 +26,6 @@ const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('market');
   const [tab, setTab] = useState<string>(InfoTabs.prompt);
   const { data, isLoading } = useFetchAgent(currentIdentifier);
-  const { styles } = useStyles();
 
   if (isLoading || !data?.meta) return <Loading />;
 
@@ -36,16 +34,11 @@ const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   return (
     <>
-      <AgentCardBanner
-        avatar={meta?.avatar}
-        size={800}
-        style={{ height: 120, marginBottom: -60 }}
-      />
-      <Header mobile={mobile} />
+      <Banner avatar={meta.avatar} backgroundColor={meta.backgroundColor} mobile={mobile} />
+      <Header />
       <Flexbox align={'center'}>
         <TabsNav
           activeKey={tab}
-          className={styles.nav}
           items={[
             {
               key: InfoTabs.prompt,
@@ -61,6 +54,7 @@ const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
             },
           ]}
           onChange={setTab}
+          style={{ paddingTop: 8 }}
           variant={'compact'}
         />
       </Flexbox>
@@ -76,4 +70,4 @@ const AgentModalInner = memo<{ mobile?: boolean }>(({ mobile }) => {
   );
 });
 
-export default AgentModalInner;
+export default AgentDetailContent;

package/src/app/(main)/market/@detail/features/Banner.tsx

@@ -0,0 +1,46 @@
+import { Avatar } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import AgentCardBanner from '../../features/AgentCard/AgentCardBanner';
+
+const Banner = memo<{
+  avatar?: string;
+  backgroundColor?: string;
+  loading?: boolean;
+  mobile?: boolean;
+}>(({ avatar, backgroundColor, mobile, loading }) => {
+  const theme = useTheme();
+
+  return (
+    <Flexbox align={'center'}>
+      <AgentCardBanner
+        avatar={loading ? undefined : avatar}
+        size={800}
+        style={{ height: 120, marginBottom: -60 }}
+      />
+      <Center
+        flex={'none'}
+        height={120}
+        style={{
+          backgroundColor:
+            backgroundColor || mobile ? theme.colorBgElevated : theme.colorBgContainer,
+          borderRadius: '50%',
+          overflow: 'hidden',
+          zIndex: 2,
+        }}
+        width={120}
+      >
+        {loading ? (
+          <Skeleton.Avatar active size={100} />
+        ) : (
+          <Avatar animation avatar={avatar} shape={'circle'} size={100} />
+        )}
+      </Center>
+    </Flexbox>
+  );
+});
+
+export default Banner;

package/src/app/(main)/market/@detail/features/{AgentDetailContent/Header.tsx → Header.tsx}

@@ -1,4 +1,4 @@
-import { Avatar, Tag } from '@lobehub/ui';
+import { Tag } from '@lobehub/ui';
 import { App, Button, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { startCase } from 'lodash-es';
@@ -16,18 +16,18 @@ import { useStyles } from './style';
 
 const { Link } = Typography;
 
-const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
+const Header = memo(() => {
   const setSearchKeywords = useMarketStore((s) => s.setSearchKeywords);
   const router = useRouter();
   const { t } = useTranslation('market');
-  const { styles, theme } = useStyles();
+  const { styles } = useStyles();
   const createSession = useSessionStore((s) => s.createSession);
   const agentItem = useMarketStore(agentMarketSelectors.currentAgentItem, isEqual);
 
   const { message } = App.useApp();
 
   const { meta, createAt, author, homepage, config } = agentItem;
-  const { avatar, title, description, tags, backgroundColor } = meta;
+  const { title, description, tags } = meta;
 
   const isMobile = useIsMobile();
 
@@ -47,20 +47,6 @@ const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
 
   return (
     <Center className={styles.container} gap={16}>
-      <Center
-        flex={'none'}
-        height={120}
-        style={{
-          backgroundColor:
-            backgroundColor || mobile ? theme.colorBgElevated : theme.colorBgContainer,
-          borderRadius: '50%',
-          overflow: 'hidden',
-          zIndex: 2,
-        }}
-        width={120}
-      >
-        <Avatar animation avatar={avatar} size={100} />
-      </Center>
       <h2 className={styles.title}>{title}</h2>
       <Center gap={6} horizontal style={{ flexWrap: 'wrap' }}>
         {(tags as string[]).map((tag: string, index) => (

package/src/app/(main)/market/@detail/features/{AgentDetailContent/Loading.tsx → Loading.tsx}

@@ -2,25 +2,26 @@ import { Skeleton } from 'antd';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import Banner from './Banner';
 import { useStyles } from './style';
 
 const Loading = memo(() => {
   const { styles } = useStyles();
   return (
     <>
-      <Center className={styles.container} gap={16} style={{ paddingTop: 80 }}>
-        <Skeleton.Avatar active shape={'circle'} size={100} />
+      <Banner loading />
+      <Center className={styles.container} gap={16}>
         <Skeleton
           active
           className={styles.loading}
           paragraph={{
-            rows: 3,
+            rows: 2,
             style: {
               alignItems: 'center',
               display: 'flex',
               flexDirection: 'column',
             },
-            width: ['60%', '80%', '20%'],
+            width: ['60%', '80%'],
           }}
           title={{
             style: {

package/src/app/(main)/market/@detail/features/{AgentDetailContent/style.ts → style.ts}

@@ -19,9 +19,6 @@ export const useStyles = createStyles(({ css, token, prefixCls }) => ({
       flex-direction: column;
     }
   `,
-  nav: css`
-    padding-top: 8px;
-  `,
   time: css`
     font-size: 12px;
     color: ${token.colorTextDescription};

package/src/app/(main)/market/features/AgentCard/AgentCardBanner.tsx

@@ -22,6 +22,7 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 interface AgentCardBannerProps extends DivProps {
   avatar?: string;
+  loading?: boolean;
   mask?: boolean;
   maskColor?: string;
   size?: number;
@@ -29,22 +30,26 @@ interface AgentCardBannerProps extends DivProps {
 
 const AgentCardBanner = memo<AgentCardBannerProps>(
   ({ avatar, className, size = 600, children, ...props }) => {
-    const { styles, cx } = useStyles();
+    const { styles, theme, cx } = useStyles();
 
     return (
       <Flexbox
         align={'center'}
         className={cx(styles.banner, className)}
         justify={'center'}
+        style={avatar ? {} : { backgroundColor: theme.colorFillTertiary }}
+        width={'100%'}
         {...props}
       >
-        <Avatar
-          alt={'banner'}
-          avatar={avatar}
-          className={styles.bannerImg}
-          shape={'square'}
-          size={size}
-        />
+        {avatar && (
+          <Avatar
+            alt={'banner'}
+            avatar={avatar}
+            className={styles.bannerImg}
+            shape={'square'}
+            size={size}
+          />
+        )}
         {children}
       </Flexbox>
     );

package/src/app/(main)/market/loading.tsx

@@ -1,3 +1,15 @@
+'use client';
+
 import { Skeleton } from 'antd';
+import { Flexbox } from 'react-layout-kit';
 
-export default () => <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />;
+export default () => (
+  <Flexbox gap={16}>
+    <Skeleton.Input active block />
+    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
+    <Skeleton.Button active />
+    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
+    <Skeleton.Button active />
+    <Skeleton paragraph={{ rows: 8 }} style={{ marginBlock: 24 }} title={false} />
+  </Flexbox>
+);

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;