@lobehub/chat 0.70.2 → 0.70.3

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.70.3](https://github.com/lobehub/lobe-chat/compare/v0.70.2...v0.70.3)
+
+<sup>Released on **2023-09-09**</sup>
+
+#### 💄 Styles
+
+- **misc**: Better mobile style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Better mobile style ([776c407](https://github.com/lobehub/lobe-chat/commit/776c407))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.70.2](https://github.com/lobehub/lobe-chat/compare/v0.70.1...v0.70.2)
 
 <sup>Released on **2023-09-08**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.70.2",
+  "version": "0.70.3",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/const/url.ts

@@ -10,5 +10,7 @@ export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 export const PLUGINS_INDEX_URL =
   process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
 
+export const AGENTS_INDEX_URL = process.env.AGENTS_INDEX_URL ?? 'https://chat-agents.lobehub.com';
+
 export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean) =>
   mobile ? `/chat/mobile#session=${id}` : `/chat#session=${id}`;

package/src/features/MobileTabBar/index.tsx

@@ -1,13 +1,12 @@
 import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { MessageSquare, Settings2, Sticker } from 'lucide-react';
+import { MessageSquare, Sticker } from 'lucide-react';
 import Router from 'next/router';
 import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
-import { useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, token }) => ({
   active: css`
@@ -21,7 +20,6 @@ export default memo<{ className?: string }>(({ className }) => {
   const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
   const { t } = useTranslation('common');
   const { styles } = useStyles();
-  const switchSession = useSessionStore((s) => s.switchSession);
   const items: MobileTabBarProps['items'] = useMemo(
     () => [
       {
@@ -30,23 +28,17 @@ export default memo<{ className?: string }>(({ className }) => {
         ),
         key: 'chat',
         onClick: () => {
-          switchSession();
+          Router.push('/chat');
         },
         title: t('tab.chat'),
       },
       {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={Sticker} />,
         key: 'market',
-
-        title: t('tab.market'),
-      },
-      {
-        icon: (active) => <Icon className={active ? styles.active : undefined} icon={Settings2} />,
-        key: 'settings',
         onClick: () => {
-          Router.push('/settings');
+          Router.push('/market');
         },
-        title: t('tab.setting'),
+        title: t('tab.market'),
       },
     ],
     [t],

package/src/features/SideBar/BottomActions.tsx

@@ -110,8 +110,18 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
 
   return (
     <>
-      <ActionIcon icon={DiscordIcon} onClick={() => window.open(DISCORD, '__blank')} />
-      <ActionIcon icon={Github} onClick={() => window.open(GITHUB, '__blank')} />
+      <ActionIcon
+        icon={DiscordIcon}
+        onClick={() => window.open(DISCORD, '__blank')}
+        placement={'right'}
+        title={'Discord'}
+      />
+      <ActionIcon
+        icon={Github}
+        onClick={() => window.open(GITHUB, '__blank')}
+        placement={'right'}
+        title={'Github'}
+      />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
         <ActionIcon active={tab === 'settings'} icon={Settings2} />
       </Dropdown>

package/src/features/SideBar/TopActions.tsx

@@ -26,13 +26,19 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
           switchBackToChat();
           setTab('chat');
         }}
+        placement={'right'}
         size="large"
         title={t('tab.chat')}
       />
       <ActionIcon
         active={tab === 'market'}
         icon={Sticker}
-        // onClick={() => setTab('market')}
+        onClick={() => {
+          if (Router.asPath.startsWith('/market')) return;
+          Router.push('/market');
+          setTab('market');
+        }}
+        placement={'right'}
         size="large"
         title={t('tab.market')}
       />

package/src/layout/AppMobileLayout.tsx

@@ -8,16 +8,19 @@ import SafeSpacing from '@/components/SafeSpacing';
 import MobileTabBar from '@/features/MobileTabBar';
 import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 
-const useStyles = createStyles(({ css }) => ({
-  container: css`
-    position: relative;
+const useStyles = createStyles(({ css, cx, stylish }) => ({
+  container: cx(
+    stylish.noScrollbar,
+    css`
+      position: relative;
 
-    overflow-x: hidden;
-    overflow-y: auto;
+      overflow-x: hidden;
+      overflow-y: auto;
 
-    width: 100vw;
-    height: 100vh;
-  `,
+      width: 100vw;
+      height: 100vh;
+    `,
+  ),
   mobileNavBar: css`
     position: fixed;
     z-index: 100;

package/src/pages/chat/features/Conversation/Input/index.tsx

@@ -14,7 +14,7 @@ import Token from './Token';
 const ChatInput = () => {
   const { t } = useTranslation('common');
   const [expand, setExpand] = useState<boolean>(false);
-  const [text, setText] = useState('');
+  const [message, setMessage] = useState('');
 
   const [inputHeight, updatePreference] = useGlobalStore((s) => [
     s.preference.inputHeight,
@@ -51,7 +51,7 @@ const ChatInput = () => {
         actions={
           <>
             <InputActions />
-            <Token input={text} />
+            <Token input={message} />
           </>
         }
         actionsRight={<ActionsRight />}
@@ -60,7 +60,7 @@ const ChatInput = () => {
         loading={isLoading}
         minHeight={CHAT_TEXTAREA_HEIGHT}
         onExpandChange={setExpand}
-        onInputChange={setText}
+        onInputChange={setMessage}
         onSend={sendMessage}
         onStop={stopGenerateMessage}
         placeholder={t('sendPlaceholder')}
@@ -68,6 +68,7 @@ const ChatInput = () => {
           send: t('send'),
           stop: t('stop'),
         }}
+        value={message}
       />
     </DraggablePanel>
   );

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

@@ -24,7 +24,7 @@ const MobileHeader = memo(() => {
   return (
     <MobileNavBar
       center={<MobileNavBarTitle desc={model} title={displayTitle} />}
-      onBackClick={() => Router.back()}
+      onBackClick={() => Router.push('/chat')}
       right={
         <>
           <ActionIcon icon={LayoutList} onClick={() => toggleConfig()} />

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

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

package/src/pages/chat/features/SessionList/Desktop.tsx

@@ -0,0 +1,24 @@
+import { DraggablePanelBody } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+
+import FolderPanel from '@/features/FolderPanel';
+
+import Header from './Header';
+
+const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
+
+const Sessions = memo<{ children: ReactNode }>(({ children }) => {
+  const { styles } = useStyles();
+
+  return (
+    <FolderPanel>
+      <Header />
+      <DraggablePanelBody className={styles} style={{ padding: 0 }}>
+        {children}
+      </DraggablePanelBody>
+    </FolderPanel>
+  );
+});
+
+export default Sessions;

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

@@ -1,4 +1,4 @@
-import { ActionIcon, Logo, MobileNavBar, SearchBar } from '@lobehub/ui';
+import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
 import Link from 'next/link';
@@ -6,7 +6,6 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useSessionStore } from '@/store/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -19,34 +18,11 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Header = memo<{ mobile?: 'navbar' | 'search' }>(({ mobile }) => {
+const Header = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('common');
   const [keywords, createSession] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
 
-  if (mobile === 'navbar') {
-    return (
-      <MobileNavBar
-        center={<Logo type={'text'} />}
-        left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
-        right={<ActionIcon icon={MessageSquarePlus} onClick={createSession} />}
-      />
-    );
-  }
-
-  if (mobile === 'search')
-    return (
-      <Flexbox className={styles.top} padding={16}>
-        <SearchBar
-          allowClear
-          onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
-          placeholder={t('searchAgentPlaceholder')}
-          type={'block'}
-          value={keywords}
-        />
-      </Flexbox>
-    );
-
   return (
     <Flexbox className={styles.top} gap={16} padding={16}>
       <Flexbox distribution={'space-between'} horizontal>

package/src/pages/chat/features/SessionList/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/chat/features/SessionList/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/chat/features/SessionList/Mobile.tsx

@@ -0,0 +1,26 @@
+import { SearchBar } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSessionStore } from '@/store/session';
+
+const Sessions = memo<{ children: ReactNode }>(({ children }) => {
+  const { t } = useTranslation('common');
+  const [keywords] = useSessionStore((s) => [s.searchKeywords, s.createSession]);
+  return (
+    <>
+      <div style={{ padding: '8px 16px' }}>
+        <SearchBar
+          allowClear
+          onChange={(e) => useSessionStore.setState({ searchKeywords: e.target.value })}
+          placeholder={t('searchAgentPlaceholder')}
+          type={'block'}
+          value={keywords}
+        />
+      </div>
+      {children}
+    </>
+  );
+});
+
+export default Sessions;

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

@@ -1,21 +1,19 @@
-import { DraggablePanelBody } from '@lobehub/ui';
 import { CollapseProps } from 'antd';
-import { createStyles } from 'antd-style';
+import { useResponsive } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import FolderPanel from '@/features/FolderPanel';
-
 import CollapseGroup from './CollapseGroup';
-import Header from './Header';
+import Desktop from './Desktop';
 import Inbox from './Inbox';
 import SessionList from './List';
+import Mobile from './Mobile';
 
-const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
-
-export const Sessions = memo<{ mobile?: boolean }>(({ mobile }) => {
+export const Sessions = memo(() => {
+  const { mobile } = useResponsive();
   const { t } = useTranslation('common');
-  const { styles } = useStyles();
+
+  const Render = mobile ? Mobile : Desktop;
 
   const items: CollapseProps['items'] = useMemo(
     () => [
@@ -28,22 +26,10 @@ export const Sessions = memo<{ mobile?: boolean }>(({ mobile }) => {
     [],
   );
 
-  if (mobile)
-    return (
-      <>
-        <Header mobile={'search'} />
-        <Inbox />
-        <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
-      </>
-    );
-
   return (
-    <FolderPanel>
-      <Header />
-      <DraggablePanelBody className={styles} style={{ padding: 0 }}>
-        <Inbox />
-        <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
-      </DraggablePanelBody>
-    </FolderPanel>
+    <Render>
+      <Inbox />
+      <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
+    </Render>
   );
 });

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

@@ -0,0 +1,58 @@
+import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+
+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 SystemRole from './SystemRole';
+
+const useStyles = createStyles(({ css, token }) => ({
+  content: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  drawer: css`
+    background: ${token.colorBgLayout};
+  `,
+  header: css`
+    border-bottom: 1px solid ${token.colorBorder};
+  `,
+}));
+
+const SideBar = memo<{ children: ReactNode }>(({ children }) => {
+  const { styles } = useStyles();
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+    s.preference.showChatSideBar,
+    s.toggleChatSideBar,
+  ]);
+
+  const isInbox = useSessionStore(sessionSelectors.isInboxSession);
+
+  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 />}
+        {children}
+      </DraggablePanelContainer>
+    </DraggablePanel>
+  );
+});
+
+export default SideBar;

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});
+  `,
+}));