@lobehub/chat 0.70.1 → 0.70.3

package/src/pages/chat/features/Sidebar/{SystemRole.tsx → SystemRole/index.tsx}

@@ -1,51 +1,17 @@
 import { ActionIcon, EditableMessage } from '@lobehub/ui';
 import { Skeleton } from 'antd';
-import { createStyles } from 'antd-style';
 import { Edit } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import Header from '@/pages/chat/features/Sidebar/Header';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 
-const useStyles = createStyles(({ css, token }) => ({
-  prompt: css`
-    overflow-x: hidden;
-    overflow-y: auto;
+import Header from './Header';
+import { useStyles } from './style';
 
-    padding: 0 16px 16px;
-
-    opacity: 0.75;
-
-    transition: opacity 200ms ${token.motionEaseOut};
-
-    &:hover {
-      opacity: 1;
-    }
-  `,
-  promptBox: css`
-    position: relative;
-    overflow: hidden;
-    border-bottom: 1px solid ${token.colorBorder};
-  `,
-  promptMask: css`
-    pointer-events: none;
-
-    position: absolute;
-    z-index: 10;
-    bottom: 0;
-    left: 0;
-
-    width: 100%;
-    height: 32px;
-
-    background: linear-gradient(to bottom, transparent, ${token.colorBgLayout});
-  `,
-}));
-
-const SystemRole = memo<{ mobile?: boolean }>(() => {
+const SystemRole = memo(() => {
   const [openModal, setOpenModal] = useState(false);
 
   const { styles } = useStyles();

package/src/pages/chat/features/Sidebar/SystemRole/style.ts

@@ -0,0 +1,36 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  prompt: css`
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    padding: 0 16px 16px;
+
+    opacity: 0.75;
+
+    transition: opacity 200ms ${token.motionEaseOut};
+
+    &:hover {
+      opacity: 1;
+    }
+  `,
+  promptBox: css`
+    position: relative;
+    overflow: hidden;
+    border-bottom: 1px solid ${token.colorBorder};
+  `,
+  promptMask: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 10;
+    bottom: 0;
+    left: 0;
+
+    width: 100%;
+    height: 32px;
+
+    background: linear-gradient(to bottom, transparent, ${token.colorBgLayout});
+  `,
+}));

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,34 +1,25 @@
-import { useResponsive } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
-import { usePluginStore } from '@/store/plugin';
 
 import { Sessions } from './features/SessionList';
 
 const ChatLayout = memo<PropsWithChildren>(({ children }) => {
-  const { mobile } = useResponsive();
-
   useSwitchSideBarOnInit('chat');
 
-  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
-  useFetchPluginList();
-
   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

@@ -10,7 +10,6 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Conversation from '../features/Conversation';
 import SideBar from '../features/Sidebar';
-import ChatLayout from '../layout';
 
 const Chat = memo(() => {
   const [avatar, title] = useSessionStore((s) => [
@@ -26,12 +25,10 @@ const Chat = memo(() => {
         <title>{pageTitle}</title>
       </Head>
       <AppMobileLayout navBar={<Header />}>
-        <ChatLayout>
-          <Flexbox height={'calc(100vh - 44px)'} horizontal>
-            <Conversation mobile />
-            <SideBar mobile />
-          </Flexbox>
-        </ChatLayout>
+        <Flexbox height={'calc(100vh - 44px)'} horizontal>
+          <Conversation 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;