@lobehub/chat 0.57.0 → 0.58.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+## [Version 0.58.0](https://github.com/lobehub/lobe-chat/compare/v0.57.0...v0.58.0)
+
+<sup>Released on **2023-08-26**</sup>
+
+#### ✨ Features
+
+- **misc**: Implement responsive design for mobile devices.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Implement responsive design for mobile devices, closes [#95](https://github.com/lobehub/lobe-chat/issues/95) ([fdb3c93](https://github.com/lobehub/lobe-chat/commit/fdb3c93))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.57.0](https://github.com/lobehub/lobe-chat/compare/v0.56.0...v0.57.0)
 
 <sup>Released on **2023-08-26**</sup>

package/package.json

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

package/src/components/SafeSpacing/index.tsx

@@ -0,0 +1,27 @@
+import { MobileSafeArea, type MobileSafeAreaProps } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { HEADER_HEIGHT, MOBILE_NABBAR_HEIGHT, MOBILE_TABBAR_HEIGHT } from '@/const/layoutTokens';
+
+interface SafeSpacingProps {
+  height?: number;
+  mobile?: boolean;
+  position?: MobileSafeAreaProps['position'];
+}
+
+const SafeSpacing = memo<SafeSpacingProps>(({ height, position = 'top', mobile }) => {
+  let h;
+  if (mobile) {
+    h = position === 'top' ? MOBILE_NABBAR_HEIGHT : MOBILE_TABBAR_HEIGHT;
+  } else {
+    h = HEADER_HEIGHT;
+  }
+  return (
+    <>
+      <div style={{ flex: 'none', height: height || h }} />
+      {mobile && <MobileSafeArea position={position} />}
+    </>
+  );
+});
+
+export default SafeSpacing;

package/src/const/layoutTokens.ts

@@ -1,6 +1,8 @@
 import type { FormProps } from '@lobehub/ui';
 
 export const HEADER_HEIGHT = 64;
+export const MOBILE_NABBAR_HEIGHT = 44;
+export const MOBILE_TABBAR_HEIGHT = 48;
 export const CHAT_TEXTAREA_HEIGHT = 200;
 export const CHAT_SIDEBAR_WIDTH = 280;
 export const FOLDER_WIDTH = 256;

package/src/features/AvatarWithUpload/index.tsx

@@ -1,7 +1,7 @@
 import { Avatar, Logo } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { CSSProperties, memo } from 'react';
 
 import { useGlobalStore } from '@/store/global';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
@@ -25,9 +25,10 @@ const useStyle = createStyles(
 interface AvatarWithUploadProps {
   compressSize?: number;
   size?: number;
+  style?: CSSProperties;
 }
 
-const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40, compressSize = 128 }) => {
+const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40, compressSize = 128, style }) => {
   const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
   const { styles } = useStyle();
 
@@ -67,7 +68,7 @@ const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40, compressSize
   });
 
   return (
-    <div className={styles} style={{ maxHeight: size, maxWidth: size }}>
+    <div className={styles} style={{ maxHeight: size, maxWidth: size, ...style }}>
       <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
         {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
       </Upload>

package/src/features/MobileTabBar/index.tsx

@@ -0,0 +1,60 @@
+import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { MessageSquare, Settings2, 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';
+
+const useStyles = createStyles(({ css, token }) => ({
+  active: css`
+    svg {
+      fill: ${rgba(token.colorPrimary, 0.25)};
+    }
+  `,
+}));
+
+export default memo<{ className?: string }>(({ className }) => {
+  const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
+  const { t } = useTranslation('common');
+  const { styles } = useStyles();
+  const items: MobileTabBarProps['items'] = useMemo(
+    () => [
+      {
+        icon: (active) => (
+          <Icon className={active ? styles.active : undefined} icon={MessageSquare} />
+        ),
+        key: 'chat',
+        onClick: () => {
+          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');
+        },
+        title: t('tab.setting'),
+      },
+    ],
+    [t],
+  );
+  return (
+    <MobileTabBar
+      activeKey={tab}
+      className={className}
+      items={items}
+      onChange={(key) => setTab(key as any)}
+    />
+  );
+});

package/src/features/SideBar/TopActions.tsx

@@ -22,8 +22,8 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         onClick={() => {
           // 如果已经在 chat 路径下了，那么就不用再跳转了
           if (Router.asPath.startsWith('/chat')) return;
-
           Router.push('/chat');
+          setTab('chat');
         }}
         size="large"
         title={t('tab.chat')}

package/src/layout/AppMobileLayout.tsx

@@ -0,0 +1,76 @@
+import { type MobileNavBarTitleProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import Head from 'next/head';
+import { CSSProperties, PropsWithChildren, ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import MobileTabBar from '@/features/MobileTabBar';
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    position: relative;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    width: 100vw;
+    height: 100vh;
+  `,
+  mobileNavBar: css`
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    right: 0;
+    left: 0;
+  `,
+  mobileTabBar: css`
+    position: fixed;
+    z-index: 100;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  `,
+}));
+
+interface AppMobileLayoutProps extends PropsWithChildren {
+  className?: string;
+  navBar?: ReactNode;
+  showTabBar?: boolean;
+  style?: CSSProperties;
+  title?: MobileNavBarTitleProps;
+}
+
+const AppMobileLayout = memo<AppMobileLayoutProps>(
+  ({ children, showTabBar, navBar, style, className }) => {
+    const { styles, cx } = useStyles();
+
+    return (
+      <>
+        <Head>
+          <meta
+            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+            name="viewport"
+          />
+        </Head>
+        <Flexbox className={cx(styles.container, className)} style={style}>
+          {navBar && (
+            <>
+              <div className={styles.mobileNavBar}>{navBar}</div>
+              <SafeSpacing mobile position={'top'} />
+            </>
+          )}
+          {children}
+          {showTabBar && (
+            <>
+              <SafeSpacing mobile position={'bottom'} />
+              <MobileTabBar className={styles.mobileTabBar} />
+            </>
+          )}
+        </Flexbox>
+      </>
+    );
+  },
+);
+
+export default AppMobileLayout;

package/src/locales/default/common.ts

@@ -63,7 +63,8 @@ export default {
   stop: '停止',
   tab: {
     chat: '会话',
-    market: '助手市场',
+    market: '发现',
+    setting: '设置',
   },
   temp: '临时',
   tokenDetail: '角色设定: {{systemRoleToken}} · 历史消息: {{chatsToken}}',
@@ -77,6 +78,7 @@ export default {
     defaultTitle: '默认话题',
     saveCurrentMessages: '将当前会话保存为话题',
     searchPlaceholder: '搜索话题...',
+    title: '话题',
   },
   updateAgent: '更新助理信息',
   updatePrompt: '更新提示词',

package/src/pages/chat/SessionList/Header.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Logo, SearchBar } from '@lobehub/ui';
+import { ActionIcon, Logo, MobileNavBar, SearchBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
 import Link from 'next/link';
@@ -6,6 +6,7 @@ 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 }) => ({
@@ -18,11 +19,34 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Header = memo(() => {
+const Header = memo<{ mobile?: 'navbar' | 'search' }>(({ mobile }) => {
   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/SessionList/index.tsx

@@ -13,7 +13,7 @@ import SessionList from './List';
 
 const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
 
-export const Sessions = memo(() => {
+export const Sessions = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
 
@@ -28,6 +28,15 @@ export const Sessions = memo(() => {
     [],
   );
 
+  if (mobile)
+    return (
+      <>
+        <Header mobile={'search'} />
+        <Inbox />
+        <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
+      </>
+    );
+
   return (
     <FolderPanel>
       <Header />

package/src/pages/chat/[id]/index.page.tsx

@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -9,8 +10,10 @@ import Conversation from '../features/Conversation';
 import Header from '../features/Header';
 import SideBar from '../features/Sidebar';
 import Layout from './layout';
+import Mobile from './mobile';
 
 const Chat = memo(() => {
+  const { mobile } = useResponsive();
   const [avatar, title] = useSessionStore((s) => [
     agentSelectors.currentAgentAvatar(s),
     agentSelectors.currentAgentTitle(s),
@@ -23,13 +26,22 @@ const Chat = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Layout>
-        <Header />
-        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-          <Conversation />
-          <SideBar />
-        </Flexbox>
-      </Layout>
+      {mobile ? (
+        <Mobile>
+          <Flexbox height={'calc(100vh - 44px)'} horizontal>
+            <Conversation mobile />
+            <SideBar mobile />
+          </Flexbox>
+        </Mobile>
+      ) : (
+        <Layout>
+          <Header />
+          <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+            <Conversation />
+            <SideBar />
+          </Flexbox>
+        </Layout>
+      )}
     </>
   );
 });

package/src/pages/chat/[id]/mobile.tsx

@@ -0,0 +1,31 @@
+import { useRouter } from 'next/router';
+import { PropsWithChildren, memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+
+import Header from '../features/Header';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  const [activeSession, toggleTopic] = useSessionStore((s) => {
+    return [s.activeSession, s.toggleTopic];
+  }, shallow);
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  useOnFinishHydrationSession(() => {
+    // 1. 正常激活会话
+    if (typeof id === 'string') {
+      activeSession(id);
+    }
+
+    // 将话题重置为默认值
+    toggleTopic();
+  }, [id]);
+
+  return <AppMobileLayout navBar={<Header />}>{children}</AppMobileLayout>;
+});
+
+export default MobileLayout;

package/src/pages/chat/[id]/setting/Header.tsx

@@ -1,4 +1,10 @@
-import { ActionIcon, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
+import {
+  ActionIcon,
+  ChatHeader,
+  ChatHeaderTitle,
+  MobileNavBar,
+  MobileNavBarTitle,
+} from '@lobehub/ui';
 import { Dropdown, MenuProps } from 'antd';
 import { HardDriveDownload, Share2 } from 'lucide-react';
 import Router from 'next/router';
@@ -8,7 +14,7 @@ import { useTranslation } from 'react-i18next';
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { useSessionStore } from '@/store/session';
 
-const Header = memo(() => {
+const Header = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('setting');
   const id = useSessionStore((s) => s.activeId);
 
@@ -36,6 +42,23 @@ const Header = memo(() => {
     [],
   );
 
+  if (mobile)
+    return (
+      <MobileNavBar
+        center={<MobileNavBarTitle title={t('header.session')} />}
+        onBackClick={() => Router.back()}
+        right={
+          <>
+            <ActionIcon icon={Share2} title={t('share', { ns: 'common' })} />
+            <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+              <ActionIcon icon={HardDriveDownload} title={t('export', { ns: 'common' })} />
+            </Dropdown>
+          </>
+        }
+        showBackButton
+      />
+    );
+
   return (
     <ChatHeader
       left={<ChatHeaderTitle title={t('header.session')} />}

package/src/pages/chat/[id]/setting/index.page.tsx

@@ -1,10 +1,11 @@
+import { useResponsive } from 'antd-style';
 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 HeaderSpacing from '@/components/HeaderSpacing';
+import SafeSpacing from '@/components/SafeSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
 import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
 import { agentSelectors, useSessionStore } from '@/store/session';
@@ -12,8 +13,10 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import ChatLayout from '../layout';
 import Header from './Header';
+import Mobile from './mobile';
 
 const EditPage = memo(() => {
+  const { mobile } = useResponsive();
   const { t } = useTranslation('setting');
   const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
   const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
@@ -27,26 +30,40 @@ const EditPage = memo(() => {
 
   const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
 
+  const settings = (
+    <>
+      <AgentPrompt config={config} updateConfig={updateAgentConfig} />
+      <AgentMeta
+        autocomplete={autocomplete}
+        config={config}
+        meta={meta}
+        updateMeta={updateAgentMeta}
+      />
+      <AgentConfig config={config} updateConfig={updateAgentConfig} />
+      <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
+    </>
+  );
+
   return (
     <>
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <ChatLayout>
-        <Header />
-        <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
-          <HeaderSpacing height={HEADER_HEIGHT - 16} />
-          <AgentPrompt config={config} updateConfig={updateAgentConfig} />
-          <AgentMeta
-            autocomplete={autocomplete}
-            config={config}
-            meta={meta}
-            updateMeta={updateAgentMeta}
-          />
-          <AgentConfig config={config} updateConfig={updateAgentConfig} />
-          <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
-        </Flexbox>
-      </ChatLayout>
+      {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>
+      )}
     </>
   );
 });

package/src/pages/chat/[id]/setting/mobile.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren, memo } from 'react';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import Header from './Header';
+
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
+  return <AppMobileLayout navBar={<Header mobile />}>{children}</AppMobileLayout>;
+});
+
+export default MobileLayout;

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

@@ -3,19 +3,19 @@ import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/components/HeaderSpacing';
+import SafeSpacing from '@/components/SafeSpacing';
 
 import ChatList from './ChatList';
 import ChatInput from './Input';
 
-const Conversation = () => {
+const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   const ref = useRef(null);
   const { t } = useTranslation('common');
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
         <div ref={ref} style={{ height: '100%', overflowY: 'scroll' }}>
-          <HeaderSpacing />
+          {!mobile && <SafeSpacing />}
           <ChatList />
         </div>
         <BackBottom target={ref} text={t('backToBottom')} />
@@ -23,6 +23,6 @@ const Conversation = () => {
       <ChatInput />
     </Flexbox>
   );
-};
+});
 
-export default memo(Conversation);
+export default Conversation;

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

@@ -0,0 +1,47 @@
+import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { LayoutList, Settings } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import { useGlobalStore } from '@/store/global';
+import { agentSelectors, useSessionStore } from '@/store/session';
+
+const MobileHeader = memo<{ settings?: boolean }>(({ settings = true }) => {
+  const { t } = useTranslation('common');
+
+  const [id, title, model] = useSessionStore((s) => [
+    s.activeId,
+    agentSelectors.currentAgentTitle(s),
+    agentSelectors.currentAgentModel(s),
+  ]);
+
+  const isInbox = id === INBOX_SESSION_ID;
+  const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
+
+  const displayTitle = isInbox ? t('inbox.title') : title;
+
+  return (
+    <MobileNavBar
+      center={<MobileNavBarTitle desc={model} title={displayTitle} />}
+      onBackClick={() => Router.back()}
+      right={
+        <>
+          <ActionIcon icon={LayoutList} onClick={() => toggleConfig()} />
+          {settings && (
+            <ActionIcon
+              icon={Settings}
+              onClick={() => {
+                Router.push(`/chat/${id}/setting`);
+              }}
+            />
+          )}
+        </>
+      }
+      showBackButton
+    />
+  );
+});
+
+export default MobileHeader;