@lobehub/chat 1.83.7 → 1.84.0

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

@@ -1,22 +1,17 @@
 'use client';
 
-import { Drawer } from 'antd';
-import { useResponsive, useTheme } from 'antd-style';
+import { Drawer } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
-import { memo, useRef, useState } from 'react';
+import { memo, 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 HeaderContent from '@/app/[variants]/(main)/chat/settings/features/HeaderContent';
+import BrandWatermark from '@/components/BrandWatermark';
+import PanelTitle from '@/components/PanelTitle';
 import { INBOX_SESSION_ID } from '@/const/session';
-import AgentChat from '@/features/AgentSetting/AgentChat';
-import AgentMeta from '@/features/AgentSetting/AgentMeta';
-import AgentModal from '@/features/AgentSetting/AgentModal';
-import AgentOpening from '@/features/AgentSetting/AgentOpening';
-import AgentPlugin from '@/features/AgentSetting/AgentPlugin';
-import AgentPrompt from '@/features/AgentSetting/AgentPrompt';
+import { AgentCategory, AgentSettings as Settings } from '@/features/AgentSetting';
 import { AgentSettingsProvider } from '@/features/AgentSetting/AgentSettingsProvider';
-import AgentTTS from '@/features/AgentSetting/AgentTTS';
 import Footer from '@/features/Setting/Footer';
 import { useInitAgentConfig } from '@/hooks/useInitAgentConfig';
 import { useAgentStore } from '@/store/agent';
@@ -25,14 +20,11 @@ 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 { isLoading } = useInitAgentConfig();
   const [showAgentSetting, updateAgentConfig] = useAgentStore((s) => [
     s.showAgentSetting,
@@ -46,11 +38,6 @@ const AgentSettings = memo(() => {
 
   const [tab, setTab] = useState(isInbox ? ChatSettingsTabs.Prompt : ChatSettingsTabs.Meta);
 
-  const ref = useRef<any>(null);
-  const theme = useTheme();
-  const { md = true, mobile = false } = useResponsive();
-
-  const category = <CategoryContent setTab={setTab} tab={tab} />;
   return (
     <AgentSettingsProvider
       config={config}
@@ -61,57 +48,48 @@ const AgentSettings = memo(() => {
       onMetaChange={updateAgentMeta}
     >
       <Drawer
+        containerMaxWidth={1280}
         height={'100vh'}
-        onClose={() => {
-          useAgentStore.setState({ showAgentSetting: false });
-        }}
+        noHeader
+        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>
-          )}
+        sidebar={
           <Flexbox
-            align={'center'}
-            gap={mobile ? 0 : 64}
-            paddingInline={mobile ? 0 : 56}
+            gap={20}
             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 />}
-            {tab === ChatSettingsTabs.Opening && <AgentOpening />}
-            {tab === ChatSettingsTabs.Chat && <AgentChat />}
-            {tab === ChatSettingsTabs.Modal && <AgentModal />}
-            {tab === ChatSettingsTabs.TTS && <AgentTTS />}
-            {tab === ChatSettingsTabs.Plugin && <AgentPlugin />} <Footer />
+            <PanelTitle desc={t('header.sessionDesc')} title={t('header.session')} />
+            <AgentCategory setTab={setTab} tab={tab} />
+            <Flexbox align={'center'} gap={8} paddingInline={8} width={'100%'}>
+              <HeaderContent modal />
+            </Flexbox>
+            <BrandWatermark paddingInline={12} />
           </Flexbox>
-        </Flexbox>
+        }
+        sidebarWidth={280}
+        styles={{
+          sidebarContent: {
+            gap: 48,
+            justifyContent: 'space-between',
+            minHeight: '100%',
+            paddingBlock: 24,
+            paddingInline: 48,
+          },
+        }}
+      >
+        <Settings
+          config={config}
+          id={id}
+          loading={isLoading}
+          meta={meta}
+          onConfigChange={updateAgentConfig}
+          onMetaChange={updateAgentMeta}
+          tab={tab}
+        />
+        <Footer />
       </Drawer>
     </AgentSettingsProvider>
   );

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { Avatar, Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Avatar, Button, Icon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { LucideArrowUpRightFromSquare, TelescopeIcon } from 'lucide-react';
 import Link from 'next/link';

package/src/app/[variants]/(main)/chat/@session/_layout/Desktop/PanelBody.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { DraggablePanelBody } from '@lobehub/ui';
+import { ScrollShadow } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 
@@ -18,7 +18,11 @@ const useStyles = createStyles(
 const PanelBody = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
 
-  return <DraggablePanelBody className={styles}>{children}</DraggablePanelBody>;
+  return (
+    <ScrollShadow className={styles} size={8}>
+      {children}
+    </ScrollShadow>
+  );
 });
 
 export default PanelBody;

package/src/app/[variants]/(main)/chat/@session/_layout/Desktop/SessionHeader.tsx

@@ -14,6 +14,7 @@ import { useActionSWR } from '@/libs/swr';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
+import TogglePanelButton from '../../../features/TogglePanelButton';
 import SessionSearchBar from '../../features/SessionSearchBar';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -24,6 +25,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   top: css`
     position: sticky;
     inset-block-start: 0;
+    padding-block-start: 10px;
   `,
 }));
 
@@ -36,22 +38,33 @@ const Header = memo(() => {
   const { mutate, isValidating } = useActionSWR('session.createSession', () => createSession());
 
   return (
-    <Flexbox className={styles.top} gap={16} padding={16}>
-      <Flexbox distribution={'space-between'} horizontal>
-        <Flexbox align={'center'} gap={4} horizontal>
+    <Flexbox className={styles.top} gap={16} paddingInline={8}>
+      <Flexbox align={'flex-start'} horizontal justify={'space-between'}>
+        <Flexbox
+          align={'center'}
+          gap={4}
+          horizontal
+          style={{
+            paddingInlineStart: 4,
+            paddingTop: 2,
+          }}
+        >
           <ProductLogo className={styles.logo} size={36} type={'text'} />
           {enableWebrtc && <SyncStatusTag />}
         </Flexbox>
-        {showCreateSession && (
-          <ActionIcon
-            icon={MessageSquarePlus}
-            loading={isValidating}
-            onClick={() => mutate()}
-            size={DESKTOP_HEADER_ICON_SIZE}
-            style={{ flex: 'none' }}
-            title={t('newAgent')}
-          />
-        )}
+        <Flexbox align={'center'} gap={4} horizontal>
+          <TogglePanelButton />
+          {showCreateSession && (
+            <ActionIcon
+              icon={MessageSquarePlus}
+              loading={isValidating}
+              onClick={() => mutate()}
+              size={DESKTOP_HEADER_ICON_SIZE}
+              style={{ flex: 'none' }}
+              title={t('newAgent')}
+            />
+          )}
+        </Flexbox>
       </Flexbox>
       <SessionSearchBar />
     </Flexbox>

package/src/app/[variants]/(main)/chat/@session/_layout/Mobile/SessionHeader.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ActionIcon } from '@lobehub/ui';
-import { MobileNavBar } from '@lobehub/ui/mobile';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { MessageSquarePlus } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
@@ -21,7 +21,7 @@ const Header = memo(() => {
   const { enableWebrtc, showCreateSession } = useServerConfigStore(featureFlagsSelectors);
 
   return (
-    <MobileNavBar
+    <ChatHeader
       left={
         <Flexbox align={'center'} gap={8} horizontal style={{ marginLeft: 8 }}>
           <UserAvatar onClick={() => router.push('/me')} size={32} />

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/CollapseGroup/Actions.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Dropdown, DropdownProps, MenuProps } from 'antd';
+import { ActionIcon, Dropdown, type DropdownProps, Icon, type MenuProps } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { MoreVertical, PencilLine, Plus, Settings2, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -131,7 +131,7 @@ const Actions = memo<ActionsProps>(
           onClick={(e) => {
             e.stopPropagation();
           }}
-          size={{ blockSize: 22, fontSize: 16 }}
+          size={{ blockSize: 22, size: 16 }}
           style={{ background: isMobile ? 'transparent' : '', marginRight: -8 }}
         />
       </Dropdown>

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/CollapseGroup/index.tsx

@@ -48,7 +48,7 @@ const CollapseGroup = memo<CollapseProps>((props) => {
         <Icon
           className={styles.icon}
           icon={ChevronDown}
-          size={{ fontSize: 16 }}
+          size={16}
           style={isActive ? {} : { rotate: '-90deg' }}
         />
       )}

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/Inbox/index.tsx

@@ -29,6 +29,16 @@ const Inbox = memo(() => {
       <ListItem
         active={activeId === INBOX_SESSION_ID}
         avatar={DEFAULT_INBOX_AVATAR}
+        key={INBOX_SESSION_ID}
+        styles={{
+          container: {
+            gap: 12,
+          },
+          content: {
+            gap: 6,
+            maskImage: `linear-gradient(90deg, #000 90%, transparent)`,
+          },
+        }}
         title={t('inbox.title')}
       />
     </Link>

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/List/AddButton.tsx

@@ -1,24 +1,33 @@
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { Plus } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useActionSWR } from '@/libs/swr';
+import { useServerConfigStore } from '@/store/serverConfig';
 import { useSessionStore } from '@/store/session';
 
 const AddButton = memo<{ groupId?: string }>(({ groupId }) => {
   const { t } = useTranslation('chat');
   const createSession = useSessionStore((s) => s.createSession);
-
+  const mobile = useServerConfigStore((s) => s.isMobile);
   const { mutate, isValidating } = useActionSWR(['session.createSession', groupId], () => {
     return createSession({ group: groupId });
   });
 
   return (
-    <Flexbox style={{ margin: '12px 16px' }}>
-      <Button block icon={<Icon icon={Plus} />} loading={isValidating} onClick={() => mutate()}>
+    <Flexbox flex={1} padding={mobile ? 16 : 0}>
+      <Button
+        block
+        icon={Plus}
+        loading={isValidating}
+        onClick={() => mutate()}
+        style={{
+          marginTop: 8,
+        }}
+        variant={'filled'}
+      >
         {t('newAgent')}
       </Button>
     </Flexbox>

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/List/Item/Actions.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Dropdown } from 'antd';
+import { ActionIcon, Dropdown, Icon } from '@lobehub/ui';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { ItemType } from 'antd/es/menu/interface';
 import isEqual from 'fast-deep-equal';
@@ -186,7 +186,7 @@ const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, setOpen })
         icon={MoreVertical}
         size={{
           blockSize: 28,
-          fontSize: 16,
+          size: 16,
         }}
       />
     </Dropdown>

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/List/Item/index.tsx

@@ -78,9 +78,19 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
         avatarBackground={avatarBackground}
         date={updateAt?.valueOf()}
         description={description}
+        key={id}
         loading={loading}
         pin={pin}
         showAction={open}
+        styles={{
+          container: {
+            gap: 12,
+          },
+          content: {
+            gap: 6,
+            maskImage: `linear-gradient(90deg, #000 90%, transparent)`,
+          },
+        }}
         title={title}
       />
       <CreateGroupModal

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/ListItem/index.tsx

@@ -1,4 +1,4 @@
-import { Avatar, List, ListItemProps } from '@lobehub/ui';
+import { Avatar, List, type ListItemProps } from '@lobehub/ui';
 import { useHover } from 'ahooks';
 import { createStyles } from 'antd-style';
 import { memo, useMemo, useRef } from 'react';
@@ -40,7 +40,7 @@ const ListItem = memo<ListItemProps & { avatar: string; avatarBackground?: strin
           avatar={avatar}
           background={avatarBackground}
           shape="circle"
-          size={46}
+          size={40}
         />
       ),
       [isHovering, avatar, avatarBackground],

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/Modals/ConfigGroupModal/GroupItem.tsx

@@ -74,11 +74,7 @@ const GroupItem = memo<SessionGroupItem>(({ id, name }) => {
           }}
           onEditingChange={(e) => setEditing(e)}
           showEditIcon={false}
-          size={'small'}
-          style={{
-            height: 28,
-          }}
-          type={'pure'}
+          style={{ height: 28 }}
           value={name}
         />
       )}

package/src/app/[variants]/(main)/chat/@session/features/SessionListContent/Modals/ConfigGroupModal/index.tsx

@@ -1,5 +1,4 @@
-import { Icon, Modal, type ModalProps, SortableList } from '@lobehub/ui';
-import { Button } from 'antd';
+import { Button, Modal, type ModalProps, SortableList } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { Plus } from 'lucide-react';
@@ -66,7 +65,7 @@ const ConfigGroupModal = memo<ModalProps>(({ open, onCancel }) => {
         />
         <Button
           block
-          icon={<Icon icon={Plus} />}
+          icon={Plus}
           loading={loading}
           onClick={async () => {
             setLoading(true);

package/src/app/[variants]/(main)/chat/@session/features/SessionSearchBar.tsx

@@ -32,8 +32,8 @@ const SessionSearchBar = memo<{ mobile?: boolean }>(({ mobile }) => {
       placeholder={t('searchAgentPlaceholder')}
       shortKey={hotkey}
       spotlight={!mobile}
-      type={mobile ? 'block' : 'ghost'}
       value={keywords}
+      variant={'filled'}
     />
   );
 });

package/src/app/[variants]/(main)/chat/_layout/Desktop/SessionPanel.tsx

@@ -11,11 +11,24 @@ import { FOLDER_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 
+import { TOOGLE_PANEL_BUTTON_ID } from '../../features/TogglePanelButton';
+
 export const useStyles = createStyles(({ css, token }) => ({
   panel: css`
     height: 100%;
     color: ${token.colorTextSecondary};
-    background: ${token.colorBgContainer};
+    background: ${token.colorBgLayout};
+
+    #${TOOGLE_PANEL_BUTTON_ID} {
+      opacity: 0;
+      transition: opacity 0.15s ${token.motionEaseInOut};
+    }
+
+    &:hover {
+      #${TOOGLE_PANEL_BUTTON_ID} {
+        opacity: 1;
+      }
+    }
   `,
 }));
 

package/src/app/[variants]/(main)/chat/_layout/Desktop/Workspace.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const Workspace = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+  return (
+    <Flexbox
+      flex={1}
+      style={{
+        background: theme.colorBgContainerSecondary,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      {children}
+    </Flexbox>
+  );
+});
+
+export default Workspace;

package/src/app/[variants]/(main)/chat/_layout/Desktop/index.tsx

@@ -6,6 +6,7 @@ import InitClientDB from '@/features/InitClientDB';
 import { LayoutProps } from '../type';
 import RegisterHotkeys from './RegisterHotkeys';
 import SessionPanel from './SessionPanel';
+import Workspace from './Workspace';
 
 const Layout = ({ children, session }: LayoutProps) => {
   return (
@@ -17,9 +18,7 @@ const Layout = ({ children, session }: LayoutProps) => {
         width={'100%'}
       >
         <SessionPanel>{session}</SessionPanel>
-        <Flexbox flex={1} style={{ overflow: 'hidden', position: 'relative' }}>
-          {children}
-        </Flexbox>
+        <Workspace>{children}</Workspace>
       </Flexbox>
       <InitClientDB bottom={60} />
       {/* ↓ cloud slot ↓ */}

package/src/app/[variants]/(main)/chat/features/Migration/ExportConfigButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/chat/features/Migration/Failed.tsx

@@ -1,5 +1,5 @@
-import { Alert, Highlighter, Icon } from '@lobehub/ui';
-import { Button, Popconfirm, Result } from 'antd';
+import { Alert, Button, Highlighter, Icon } from '@lobehub/ui';
+import { Popconfirm, Result } from 'antd';
 import { useTheme } from 'antd-style';
 import { createStore, del, get, set } from 'idb-keyval';
 import { ShieldAlert } from 'lucide-react';
@@ -44,7 +44,7 @@ const Failed = memo<FailedProps>(({ error, state, setUpgradeStatus, setError, up
           {!!error && (
             <Alert
               extra={
-                <Highlighter copyButtonSize={'small'} language={'json'}>
+                <Highlighter actionIconSize={'small'} language={'json'}>
                   {JSON.stringify(error)}
                 </Highlighter>
               }

package/src/app/[variants]/(main)/chat/features/Migration/Modal.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@lobehub/ui';
-import { Button, Result } from 'antd';
+import { Button, Icon } from '@lobehub/ui';
+import { Result } from 'antd';
 import { CheckCircle, CpuIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/(main)/chat/features/Migration/Start.tsx

@@ -82,7 +82,7 @@ const MigrationStart = memo<UpgradeButtonProps>((props) => {
           return (
             <Flexbox align={'flex-start'} gap={24} horizontal key={item.title}>
               <Center className={styles.iconCtn}>
-                <Icon className={styles.icon} icon={item.avatar} size={{ fontSize: 36 }} />
+                <Icon className={styles.icon} icon={item.avatar} size={36} />
               </Center>
               <Flexbox gap={8}>
                 <p className={styles.title}>{item.title}</p>

package/src/app/[variants]/(main)/chat/features/Migration/UpgradeButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button } from '@lobehub/ui';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -57,10 +57,10 @@ const UpgradeButton = memo<UpgradeButtonProps>(
 
     return (
       <Button
+        color={primary ? undefined : 'default'}
         loading={upgradeStatus === UpgradeStatus.UPGRADING}
         onClick={upgrade}
         size={'large'}
-        type={primary ? 'primary' : undefined}
       >
         {children ?? t('dbV1.action.upgrade')}
       </Button>

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

@@ -0,0 +1,42 @@
+'use client';
+
+import { ActionIcon, Tooltip } from '@lobehub/ui';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+import { HotkeyEnum } from '@/types/hotkey';
+
+export const TOOGLE_PANEL_BUTTON_ID = 'toggle-panel-button';
+
+const TogglePanelButton = memo(() => {
+  const hotkey = useUserStore(settingsSelectors.getHotkeyById(HotkeyEnum.ToggleLeftPanel));
+
+  const { t } = useTranslation(['chat', 'hotkey']);
+
+  const showSessionPanel = useGlobalStore(systemStatusSelectors.showSessionPanel);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  return (
+    <Tooltip hotkey={hotkey} title={t('toggleLeftPanel.title', { ns: 'hotkey' })}>
+      <ActionIcon
+        icon={showSessionPanel ? PanelLeftClose : PanelLeftOpen}
+        id={TOOGLE_PANEL_BUTTON_ID}
+        onClick={() => {
+          updateSystemStatus({
+            sessionsWidth: showSessionPanel ? 0 : 320,
+            showSessionPanel: !showSessionPanel,
+          });
+        }}
+        size={DESKTOP_HEADER_ICON_SIZE}
+      />
+    </Tooltip>
+  );
+});
+
+export default TogglePanelButton;

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui/mobile';
+import { ChatHeader } from '@lobehub/ui/mobile';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -14,8 +14,8 @@ const Header = memo(() => {
   const router = useQueryRoute();
 
   return (
-    <MobileNavBar
-      center={<MobileNavBarTitle title={t('header.session')} />}
+    <ChatHeader
+      center={<ChatHeader.Title title={t('header.session')} />}
       onBackClick={() => router.push('/chat')}
       right={<HeaderContent />}
       showBackButton

package/src/app/[variants]/(main)/chat/settings/features/HeaderContent.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Button, Dropdown, MenuProps } from 'antd';
+import { ActionIcon, Button, Dropdown, type MenuProps } from '@lobehub/ui';
 import { HardDriveDownload } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -51,7 +50,7 @@ export const HeaderContent = memo<{ mobile?: boolean; modal?: boolean }>(({ moda
       {!isServerMode && (
         <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
           {modal ? (
-            <Button block icon={<Icon icon={HardDriveDownload} />}>
+            <Button block icon={HardDriveDownload} variant={'filled'}>
               {t('export', { ns: 'common' })}
             </Button>
           ) : (