@lobehub/chat 0.70.2 → 0.70.3

package/src/pages/chat/features/Sidebar/index.tsx

@@ -1,93 +1,35 @@
-import { DraggablePanel, DraggablePanelContainer, SearchBar } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
+import { SearchBar } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import SafeSpacing from '@/components/SafeSpacing';
-import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
-import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
-import { sessionSelectors } from '@/store/session/slices/session/selectors';
-
+import Desktop from './Desktop';
 import Mobile from './Mobile';
-import SystemRole from './SystemRole';
 import { Topic } from './Topic';
 
-const useStyles = createStyles(({ cx, css, token, stylish }, mobile: boolean) => ({
-  content: css`
-    display: flex;
-    flex-direction: column;
-  `,
-  drawer: cx(
-    mobile
-      ? css`
-          background: ${token.colorBgLayout} !important;
-        `
-      : stylish.blurStrong,
-    css`
-      background: ${rgba(token.colorBgLayout, 0.4)};
-    `,
-  ),
-  header: css`
-    border-bottom: 1px solid ${token.colorBorder};
-  `,
-}));
-
-interface SideBarProps {
-  mobile?: boolean;
-  systemRole?: boolean;
-}
-const SideBar = memo<SideBarProps>(({ mobile }) => {
-  const { styles } = useStyles(mobile);
-  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
-    s.preference.showChatSideBar,
-    s.toggleChatSideBar,
-  ]);
+const SideBar = memo(() => {
+  const { mobile } = useResponsive();
 
-  const isInbox = useSessionStore(sessionSelectors.isInboxSession);
+  const Render = mobile ? Mobile : Desktop;
 
   const { t } = useTranslation('common');
 
-  const topic = (
-    <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
-      <Flexbox padding={16}>
-        <SearchBar
-          placeholder={t('topic.searchPlaceholder')}
-          spotlight={!mobile}
-          type={mobile ? 'block' : 'ghost'}
-        />
-      </Flexbox>
-      <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
-        <Topic />
-      </Flexbox>
-    </Flexbox>
-  );
-
-  if (mobile) return <Mobile>{topic}</Mobile>;
-
   return (
-    <DraggablePanel
-      className={styles.drawer}
-      classNames={{
-        content: styles.content,
-      }}
-      expand={showAgentSettings}
-      minWidth={CHAT_SIDEBAR_WIDTH}
-      mode={'fixed'}
-      onExpandChange={toggleConfig}
-      placement={'right'}
-    >
-      <DraggablePanelContainer
-        style={{ flex: 'none', height: '100%', minWidth: CHAT_SIDEBAR_WIDTH }}
-      >
-        <SafeSpacing />
-        {!isInbox && <SystemRole mobile={mobile} />}
-
-        {topic}
-      </DraggablePanelContainer>
-    </DraggablePanel>
+    <Render>
+      <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
+        <Flexbox padding={16}>
+          <SearchBar
+            placeholder={t('topic.searchPlaceholder')}
+            spotlight={!mobile}
+            type={mobile ? 'block' : 'ghost'}
+          />
+        </Flexbox>
+        <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
+          <Topic />
+        </Flexbox>
+      </Flexbox>
+    </Render>
   );
 });
 

package/src/pages/chat/index.page.tsx

@@ -10,8 +10,8 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 import Conversation from './features/Conversation';
 import Header from './features/Header';
 import SideBar from './features/Sidebar';
-import Layout from './layout';
-import Mobile from './mobile';
+import DesktopLayout from './layout';
+import MobileLayout from './layout.mobile';
 
 const Chat = memo(() => {
   const { mobile } = useResponsive();
@@ -20,23 +20,24 @@ const Chat = memo(() => {
     agentSelectors.currentAgentTitle(s),
   ]);
   const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
+  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
 
   return (
     <>
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      {mobile ? (
-        <Mobile />
-      ) : (
-        <Layout>
-          <Header />
-          <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-            <Conversation />
-            <SideBar />
-          </Flexbox>
-        </Layout>
-      )}
+      <RenderLayout>
+        {!mobile && (
+          <>
+            <Header />
+            <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+              <Conversation />
+              <SideBar />
+            </Flexbox>
+          </>
+        )}
+      </RenderLayout>
     </>
   );
 });

package/src/pages/chat/{mobile.tsx → layout.mobile.tsx}

@@ -1,4 +1,3 @@
-import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
@@ -9,15 +8,10 @@ import Header from './features/SessionList/Header';
 
 const ChatMobileLayout = memo(() => {
   useSwitchSideBarOnInit('chat');
-  const theme = useTheme();
 
   return (
-    <AppMobileLayout
-      navBar={<Header mobile={'navbar'} />}
-      showTabBar
-      style={{ background: theme.colorBgContainer }}
-    >
-      <Sessions mobile />
+    <AppMobileLayout navBar={<Header />} showTabBar>
+      <Sessions />
     </AppMobileLayout>
   );
 });

package/src/pages/chat/layout.tsx

@@ -1,4 +1,3 @@
-import { useResponsive } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -8,23 +7,19 @@ import { useSwitchSideBarOnInit } from '@/store/global';
 import { Sessions } from './features/SessionList';
 
 const ChatLayout = memo<PropsWithChildren>(({ children }) => {
-  const { mobile } = useResponsive();
-
   useSwitchSideBarOnInit('chat');
 
   return (
     <AppLayout>
       <Sessions />
-      {!mobile && (
-        <Flexbox
-          flex={1}
-          height={'100vh'}
-          id={'lobe-conversion-container'}
-          style={{ position: 'relative' }}
-        >
-          {children}
-        </Flexbox>
-      )}
+      <Flexbox
+        flex={1}
+        height={'100vh'}
+        id={'lobe-conversion-container'}
+        style={{ position: 'relative' }}
+      >
+        {children}
+      </Flexbox>
     </AppLayout>
   );
 });

package/src/pages/chat/mobile/index.page.tsx

@@ -27,7 +27,7 @@ const Chat = memo(() => {
       <AppMobileLayout navBar={<Header />}>
         <Flexbox height={'calc(100vh - 44px)'} horizontal>
           <Conversation mobile />
-          <SideBar mobile />
+          <SideBar />
         </Flexbox>
       </AppMobileLayout>
     </>

package/src/pages/chat/setting/features/Header/Desktop.tsx

@@ -0,0 +1,21 @@
+import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const Header = memo<{ children: ReactNode }>(({ children }) => {
+  const { t } = useTranslation('setting');
+  const onBack = useSessionStore((s) => s.switchBackToChat);
+
+  return (
+    <ChatHeader
+      left={<ChatHeaderTitle title={t('header.session')} />}
+      onBackClick={onBack}
+      right={children}
+      showBackButton
+    />
+  );
+});
+
+export default Header;

package/src/pages/chat/setting/features/Header/Mobile.tsx

@@ -0,0 +1,19 @@
+import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import Router from 'next/router';
+import { type ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Header = memo<{ children: ReactNode }>(({ children }) => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <MobileNavBar
+      center={<MobileNavBarTitle title={t('header.session')} />}
+      onBackClick={() => Router.back()}
+      right={children}
+      showBackButton
+    />
+  );
+});
+
+export default Header;

package/src/pages/chat/setting/features/Header/index.tsx

@@ -0,0 +1,57 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Dropdown, MenuProps } from 'antd';
+import { useResponsive } from 'antd-style';
+import { HardDriveDownload, Share2 } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
+import { useSessionStore } from '@/store/session';
+
+import Desktop from './Desktop';
+import Mobile from './Mobile';
+
+const Header = memo<{ mobile?: boolean }>(() => {
+  const { t } = useTranslation('setting');
+  const id = useSessionStore((s) => s.activeId);
+  const { mobile } = useResponsive();
+
+  const Render = mobile ? Mobile : Desktop;
+
+  const items = useMemo<MenuProps['items']>(
+    () => [
+      {
+        key: 'agent',
+        label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
+        onClick: () => {
+          if (!id) return;
+
+          exportSingleAgent(id);
+        },
+      },
+      {
+        key: 'agentWithMessage',
+        label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
+        onClick: () => {
+          if (!id) return;
+
+          exportSingleSession(id);
+        },
+      },
+    ],
+    [],
+  );
+
+  const size = mobile ? undefined : { fontSize: 24 };
+
+  return (
+    <Render>
+      <ActionIcon icon={Share2} size={size} title={t('share', { ns: 'common' })} />
+      <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+        <ActionIcon icon={HardDriveDownload} size={size} title={t('export', { ns: 'common' })} />
+      </Dropdown>
+    </Render>
+  );
+});
+
+export default Header;

package/src/pages/chat/setting/index.page.tsx

@@ -3,18 +3,14 @@ import isEqual from 'fast-deep-equal';
 import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import SafeSpacing from '@/components/SafeSpacing';
-import { HEADER_HEIGHT } from '@/const/layoutTokens';
 import AgentSetting from '@/features/AgentSetting';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import ChatLayout from '../layout';
-import Header from './Header';
-import Mobile from './mobile';
+import DesktopLayout from './layout';
+import MobileLayout from './layout.mobile';
 
 const EditPage = memo(() => {
   const { mobile } = useResponsive();
@@ -38,26 +34,14 @@ const EditPage = memo(() => {
     />
   );
 
+  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
+
   return (
     <>
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      {mobile ? (
-        <Mobile>
-          <Flexbox gap={16} padding={16}>
-            {settings}
-          </Flexbox>
-        </Mobile>
-      ) : (
-        <ChatLayout>
-          <Header />
-          <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
-            <SafeSpacing height={HEADER_HEIGHT - 16} />
-            {settings}
-          </Flexbox>
-        </ChatLayout>
-      )}
+      <RenderLayout>{settings}</RenderLayout>
     </>
   );
 });

package/src/pages/chat/setting/layout.mobile.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import Header from './features/Header';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  return (
+    <AppMobileLayout navBar={<Header />}>
+      <Flexbox gap={16} padding={16}>
+        {children}
+      </Flexbox>
+    </AppMobileLayout>
+  );
+});
+
+export default MobileLayout;

package/src/pages/chat/setting/layout.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import { HEADER_HEIGHT } from '@/const/layoutTokens';
+
+import ChatLayout from '../layout';
+import Header from './features/Header';
+
+const DesktopLayout = memo<PropsWithChildren>(({ children }) => {
+  return (
+    <ChatLayout>
+      <Header />
+      <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
+        <SafeSpacing height={HEADER_HEIGHT - 16} />
+        {children}
+      </Flexbox>
+    </ChatLayout>
+  );
+});
+
+export default DesktopLayout;

package/src/pages/market/features/Header/Desktop.tsx

@@ -0,0 +1,54 @@
+import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { MessageSquarePlus } from 'lucide-react';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  logo: css`
+    fill: ${token.colorText};
+  `,
+  top: css`
+    position: sticky;
+    top: 0;
+  `,
+}));
+
+const Header = memo(() => {
+  const { styles } = useStyles();
+  const { t } = useTranslation('common');
+  const [keywords, createSession] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
+
+  return (
+    <Flexbox className={styles.top} gap={16} padding={16}>
+      <Flexbox distribution={'space-between'} horizontal>
+        <Link href={'/'}>
+          <Logo className={styles.logo} size={36} type={'text'} />
+        </Link>
+        <ActionIcon
+          icon={MessageSquarePlus}
+          onClick={createSession}
+          size={{ fontSize: 24 }}
+          style={{ flex: 'none' }}
+          title={t('newAgent')}
+        />
+      </Flexbox>
+      <SearchBar
+        allowClear
+        enableShortKey
+        onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
+        placeholder={t('searchAgentPlaceholder')}
+        shortKey={'k'}
+        spotlight
+        type={'ghost'}
+        value={keywords}
+      />
+    </Flexbox>
+  );
+});
+
+export default Header;

package/src/pages/market/features/Header/Mobile.tsx

@@ -0,0 +1,42 @@
+import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { MessageSquarePlus, Settings2 } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { useSessionStore } from '@/store/session';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  logo: css`
+    fill: ${token.colorText};
+  `,
+  top: css`
+    position: sticky;
+    top: 0;
+  `,
+}));
+
+const Header = memo(() => {
+  const [createSession] = useSessionStore((s) => [s.createSession]);
+
+  return (
+    <MobileNavBar
+      center={<Logo type={'text'} />}
+      left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
+      right={
+        <>
+          <ActionIcon icon={MessageSquarePlus} onClick={createSession} />
+          <ActionIcon
+            icon={Settings2}
+            onClick={() => {
+              Router.push({ pathname: `/settings` });
+            }}
+          />
+        </>
+      }
+    />
+  );
+});
+
+export default Header;

package/src/pages/market/features/Header/index.tsx

@@ -0,0 +1,13 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import Desktop from './Desktop';
+import Mobile from './Mobile';
+
+const Header = memo(() => {
+  const { mobile } = useResponsive();
+  const Render = mobile ? Mobile : Desktop;
+  return <Render />;
+});
+
+export default Header;

package/src/pages/market/index.page.tsx

@@ -0,0 +1,30 @@
+import { useResponsive } from 'antd-style';
+import Head from 'next/head';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import DesktopLayout from './layout';
+import MobileLayout from './layout.mobile';
+
+const Market = memo(() => {
+  const { t } = useTranslation('common');
+  const pageTitle = genSiteHeadTitle(t('tab.market'));
+  const { mobile } = useResponsive();
+
+  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
+
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      <RenderLayout>
+        <h1>🤯 Coming Soon</h1>
+      </RenderLayout>
+    </>
+  );
+});
+
+export default Market;

package/src/pages/market/layout.mobile.tsx

@@ -0,0 +1,19 @@
+import { ReactNode, memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+import { useSwitchSideBarOnInit } from '@/store/global';
+
+import Header from './features/Header';
+
+const ChatMobileLayout = memo<{ children: ReactNode }>(({ children }) => {
+  useSwitchSideBarOnInit('chat');
+
+  return (
+    <AppMobileLayout navBar={<Header />} showTabBar>
+      <Center flex={1}>{children}</Center>
+    </AppMobileLayout>
+  );
+});
+
+export default ChatMobileLayout;

package/src/pages/market/layout.tsx

@@ -0,0 +1,23 @@
+import { PropsWithChildren, memo } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import AppLayout from '../../layout/AppLayout';
+import Header from './features/Header';
+
+const MarketLayout = memo<PropsWithChildren>(({ children }) => {
+  return (
+    <AppLayout>
+      <Flexbox
+        flex={1}
+        height={'100vh'}
+        id={'lobe-market-container'}
+        style={{ position: 'relative' }}
+      >
+        <Header />
+        <Center flex={1}>{children}</Center>
+      </Flexbox>
+    </AppLayout>
+  );
+});
+
+export default MarketLayout;

package/src/pages/settings/{Header.tsx → features/Header/Desktop.tsx}

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useSessionStore } from '@/store/session';
 
-const Header = memo(() => {
+const Index = memo(() => {
   const { t } = useTranslation('setting');
   const [switchBackToChat] = useSessionStore((s) => [s.switchBackToChat]);
 
@@ -17,4 +17,4 @@ const Header = memo(() => {
   );
 });
 
-export default Header;
+export default Index;

package/src/pages/settings/features/Header/Mobile.tsx

@@ -0,0 +1,18 @@
+import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Header = memo(() => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <MobileNavBar
+      center={<MobileNavBarTitle title={t('header.global')} />}
+      onBackClick={() => Router.push('/chat')}
+      showBackButton
+    />
+  );
+});
+
+export default Header;

package/src/pages/settings/features/Header/index.tsx

@@ -0,0 +1,14 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import Desktop from './Desktop';
+import Mobile from './Mobile';
+
+const Header = memo(() => {
+  const { mobile } = useResponsive();
+  const Render = mobile ? Mobile : Desktop;
+
+  return <Render />;
+});
+
+export default Header;

package/src/pages/settings/{Settings → features/Settings}/index.tsx

@@ -6,8 +6,7 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import pkg from '@/../package.json';
-
+import pkg from '../../../../../package.json';
 import Agent from './Agent';
 import Common from './Common';