@lobehub/chat 0.152.12 → 0.153.1

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/components/Cell/Divider.tsx

@@ -5,6 +5,8 @@ import { memo } from 'react';
 
 const useStyles = createStyles(
   ({ css, token, isDarkMode }) => css`
+    flex: none;
+    width: 100%;
     height: 6px;
     background: ${isDarkMode ? token.colorBgContainer : token.colorBgLayout};
   `,

package/src/components/Cell/index.tsx

@@ -8,7 +8,11 @@ const { Item } = List;
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   container: css`
     position: relative;
-    padding-block: 16px !important;
+
+    gap: 12px;
+
+    padding: 16px !important;
+
     background: ${isDarkMode ? token.colorBgLayout : token.colorBgContainer};
     border-radius: 0;
   `,

package/src/components/server/MobileNavLayout.tsx

@@ -38,6 +38,7 @@ const MobileContentLayout = ({
       {header}
       <Flexbox
         height="100%"
+        id={'lobe-mobile-scroll-container'}
         style={{
           overflowX: 'hidden',
           overflowY: 'auto',

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/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -14,10 +14,12 @@ import { useMarketStore } from '@/store/market';
 
 const { Paragraph } = Typography;
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
     position: relative;
 
+    overflow: hidden;
+
     height: 100%;
     min-height: 110px;
     padding: 16px;
@@ -30,6 +32,10 @@ const useStyles = createStyles(({ css, token }) => ({
     &:hover {
       background: ${token.colorBgElevated};
     }
+
+    ${responsive.mobile} {
+      min-height: 72px;
+    }
   `,
   cardDesc: css`
     margin-block: 0 !important;
@@ -48,15 +54,18 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const AgentsSuggest = memo(() => {
+const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('welcome');
+
   const [sliceStart, setSliceStart] = useState(0);
   const useFetchAgentList = useMarketStore((s) => s.useFetchAgentList);
   const { isLoading } = useFetchAgentList();
   const agentList = useMarketStore((s) => s.agentList, isEqual);
   const { styles } = useStyles();
 
-  const loadingCards = Array.from({ length: 4 }).map((_, index) => (
+  const agentLength = mobile ? 3 : 4;
+
+  const loadingCards = Array.from({ length: agentLength }).map((_, index) => (
     <Flexbox className={styles.card} key={index}>
       <Skeleton active avatar paragraph={{ rows: 2 }} title={false} />
     </Flexbox>
@@ -64,15 +73,15 @@ const AgentsSuggest = memo(() => {
 
   const cards = useMemo(
     () =>
-      agentList.slice(sliceStart, sliceStart + 4).map((agent) => (
+      agentList.slice(sliceStart, sliceStart + agentLength).map((agent) => (
         <Link href={`/market?agent=${agent.identifier}`} key={agent.identifier}>
           <Flexbox className={styles.card} gap={8} horizontal>
             <Avatar avatar={agent.meta.avatar} style={{ flex: 'none' }} />
-            <Flexbox gap={8}>
+            <Flexbox gap={mobile ? 2 : 8} style={{ overflow: 'hidden', width: '100%' }}>
               <Paragraph className={styles.cardTitle} ellipsis={{ rows: 1 }}>
                 {agent.meta.title}
               </Paragraph>
-              <Paragraph className={styles.cardDesc} ellipsis={{ rows: 2 }}>
+              <Paragraph className={styles.cardDesc} ellipsis={{ rows: mobile ? 1 : 2 }}>
                 {agent.meta.description}
               </Paragraph>
             </Flexbox>

package/src/features/Conversation/components/InboxWelcome/QuestionSuggest.tsx

@@ -13,7 +13,7 @@ import { USAGE_DOCUMENTS } from '@/const/url';
 import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, responsive }) => ({
   card: css`
     cursor: pointer;
 
@@ -27,6 +27,10 @@ const useStyles = createStyles(({ css, token }) => ({
     &:hover {
       background: ${token.colorBgElevated};
     }
+
+    ${responsive.mobile} {
+      padding: 8px 16px;
+    }
   `,
   icon: css`
     color: ${token.colorTextSecondary};
@@ -52,10 +56,11 @@ const qa = shuffle([
   'q13',
   'q14',
   'q15',
-]).slice(0, 5);
+]);
 
-const QuestionSuggest = memo(() => {
+const QuestionSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [updateInputMessage] = useChatStore((s) => [s.updateInputMessage]);
+
   const { t } = useTranslation('welcome');
   const { styles } = useStyles();
   const sendMessage = useSendMessage();
@@ -73,7 +78,7 @@ const QuestionSuggest = memo(() => {
         </Link>
       </Flexbox>
       <Flexbox gap={8} horizontal wrap={'wrap'}>
-        {qa.map((item) => {
+        {qa.slice(0, mobile ? 2 : 5).map((item) => {
           const text = t(`guide.qa.${item}` as any);
           return (
             <Flexbox

package/src/features/Conversation/components/InboxWelcome/index.tsx

@@ -6,6 +6,8 @@ import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
+import { useIsMobile } from '@/hooks/useIsMobile';
+
 import AgentsSuggest from './AgentsSuggest';
 import QuestionSuggest from './QuestionSuggest';
 
@@ -40,7 +42,7 @@ const InboxWelcome = memo(() => {
   const { t } = useTranslation('welcome');
   const [greeting, setGreeting] = useState<'morning' | 'noon' | 'afternoon' | 'night'>();
   const { styles } = useStyles();
-
+  const mobile = useIsMobile();
   useEffect(() => {
     const now = new Date();
     const hours = now.getHours();
@@ -66,8 +68,8 @@ const InboxWelcome = memo(() => {
         <Markdown className={styles.desc} variant={'chat'}>
           {t('guide.defaultMessage')}
         </Markdown>
-        <AgentsSuggest />
-        <QuestionSuggest />
+        <AgentsSuggest mobile={mobile} />
+        <QuestionSuggest mobile={mobile} />
       </Flexbox>
     </Center>
   );

package/src/features/DataImporter/index.tsx

@@ -22,7 +22,6 @@ const useStyles = createStyles(({ css, token }) => {
         background-color: transparent;
       }
     `,
-
     loader: css`
       transform: translateX(-${size * 2}px);
 
@@ -125,6 +124,9 @@ const useStyles = createStyles(({ css, token }) => {
         }
       }
     `,
+    wrapper: css`
+      font-size: inherit;
+    `,
   };
 });
 
@@ -237,6 +239,7 @@ const DataImporter = memo<DataImporterProps>(({ children, onFinishImport }) => {
 
           return false;
         }}
+        className={styles.wrapper}
         maxCount={1}
         showUploadList={false}
       >

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/PlanTag.tsx

@@ -0,0 +1,45 @@
+import { Tooltip } from '@lobehub/ui';
+import { Tag } from 'antd';
+import { useTheme } from 'antd-style';
+import { CSSProperties, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export enum PlanType {
+  Preview = 'preview',
+}
+
+export interface PlanTagProps {
+  type?: PlanType;
+}
+
+const PlanTag = memo<PlanTagProps>(({ type = PlanType.Preview }) => {
+  const { t } = useTranslation('common');
+  const theme = useTheme();
+  const tag: {
+    desc: string;
+    style: CSSProperties;
+    title: string;
+  } = useMemo(() => {
+    switch (type) {
+      case PlanType.Preview: {
+        return {
+          desc: t('userPanel.preview'),
+          style: {
+            background: theme.colorFill,
+          },
+          title: 'Preview',
+        };
+      }
+    }
+  }, []);
+
+  return (
+    <Tooltip title={tag.desc}>
+      <Tag bordered={false} style={{ ...tag.style, borderRadius: 12, cursor: 'pointer' }}>
+        {tag.title}
+      </Tag>
+    </Tooltip>
+  );
+});
+
+export default PlanTag;

package/src/features/User/UserInfo.tsx

@@ -3,11 +3,13 @@
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
-import UserAvatar from './UserAvatar';
+import PlanTag from '@/features/User/PlanTag';
 
-const DEFAULT_USERNAME = 'LobeChat Community Edition';
+import UserAvatar, { type UserAvatarProps } from './UserAvatar';
+
+const DEFAULT_USERNAME = 'LobeChat';
 
 const useStyles = createStyles(({ css, token }) => ({
   nickname: css`
@@ -21,19 +23,34 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const UserInfo = memo<{ onClick?: () => void }>(({ onClick }) => {
+export interface UserInfoProps extends FlexboxProps {
+  avatarProps?: Partial<UserAvatarProps>;
+}
+
+const UserInfo = memo<UserInfoProps>(({ avatarProps, ...rest }) => {
   const { t } = useTranslation('common');
   const { styles, theme } = useStyles();
 
   const DEFAULT_NICKNAME = t('userPanel.defaultNickname');
 
   return (
-    <Flexbox align={'center'} gap={12} horizontal paddingBlock={12} paddingInline={16}>
-      <UserAvatar background={theme.colorFill} onClick={onClick} size={48} />
-      <Flexbox flex={1} gap={6}>
-        <div className={styles.nickname}>{DEFAULT_NICKNAME}</div>
-        <div className={styles.username}>{DEFAULT_USERNAME}</div>
+    <Flexbox
+      align={'center'}
+      gap={12}
+      horizontal
+      justify={'space-between'}
+      paddingBlock={12}
+      paddingInline={12}
+      {...rest}
+    >
+      <Flexbox align={'center'} gap={12} horizontal>
+        <UserAvatar background={theme.colorFill} size={48} {...avatarProps} />
+        <Flexbox flex={1} gap={6}>
+          <div className={styles.nickname}>{DEFAULT_NICKNAME}</div>
+          <div className={styles.username}>{DEFAULT_USERNAME}</div>
+        </Flexbox>
       </Flexbox>
+      <PlanTag />
     </Flexbox>
   );
 });