@lobehub/chat 0.83.9 → 0.83.10

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 # Changelog
 
+### [Version 0.83.10](https://github.com/lobehub/lobe-chat/compare/v0.83.9...v0.83.10)
+
+<sup>Released on **2023-10-09**</sup>
+
+#### ♻ Code Refactoring
+
+- **layout**: Refactor layout, Refactor settings layout, Refactor ssc layout.
+- **share**: Use modern-screenshot.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix rsc layout.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **layout**: Refactor layout ([ace21f4](https://github.com/lobehub/lobe-chat/commit/ace21f4))
+- **layout**: Refactor settings layout ([bd48121](https://github.com/lobehub/lobe-chat/commit/bd48121))
+- **layout**: Refactor ssc layout ([26e1c41](https://github.com/lobehub/lobe-chat/commit/26e1c41))
+- **share**: Use modern-screenshot, closes [#256](https://github.com/lobehub/lobe-chat/issues/256) ([b3d7108](https://github.com/lobehub/lobe-chat/commit/b3d7108))
+
+#### What's fixed
+
+- **misc**: Fix rsc layout ([d73f13f](https://github.com/lobehub/lobe-chat/commit/d73f13f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.83.9](https://github.com/lobehub/lobe-chat/compare/v0.83.8...v0.83.9)
 
 <sup>Released on **2023-10-08**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.83.9",
+  "version": "0.83.10",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -83,7 +83,6 @@
     "emoji-mart": "^5",
     "fast-deep-equal": "^3",
     "gpt-tokenizer": "^2",
-    "html-to-image": "^1",
     "i18next": "^23",
     "i18next-browser-languagedetector": "^7",
     "i18next-resources-for-ts": "^1",
@@ -93,6 +92,7 @@
     "lodash-es": "^4",
     "lucide-react": "latest",
     "mixpanel-browser": "^2",
+    "modern-screenshot": "^4",
     "nanoid": "^5",
     "next": "^13.5.3",
     "openai": "^4.10.0",

package/src/app/chat/(desktop)/features/{ChatHeader/Desktop.tsx → ChatHeader.tsx}

@@ -12,8 +12,8 @@ import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
-import PluginTag from '../../../components/ChatHeader/PluginTag';
-import ShareButton from '../../../components/ChatHeader/ShareButton';
+import PluginTag from '../../features/ChatHeader/PluginTag';
+import ShareButton from '../../features/ChatHeader/ShareButton';
 
 const Header = memo(() => {
   const init = useSessionChatInit();

package/src/app/chat/(desktop)/features/{ChatInput/Desktop.tsx → ChatInput.tsx}

@@ -1,15 +1,13 @@
 import { DraggablePanel } from '@lobehub/ui';
-import { ReactNode, memo } from 'react';
+import { memo, useState } from 'react';
 
 import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 
-interface ChatInputDesktopLayoutProps {
-  children: ReactNode;
-  expand?: boolean;
-}
+import ChatInputContent from '../../features/ChatInputContent';
 
-const ChatInputDesktopLayout = memo<ChatInputDesktopLayoutProps>(({ children, expand }) => {
+const ChatInputDesktopLayout = memo(() => {
+  const [expand, setExpand] = useState<boolean>(false);
   const [inputHeight, updatePreference] = useGlobalStore((s) => [
     s.preference.inputHeight,
     s.updatePreference,
@@ -32,7 +30,7 @@ const ChatInputDesktopLayout = memo<ChatInputDesktopLayoutProps>(({ children, ex
       size={{ height: inputHeight, width: '100%' }}
       style={{ zIndex: 10 }}
     >
-      {children}
+      <ChatInputContent expand={expand} onExpandChange={setExpand} />
     </DraggablePanel>
   );
 });

package/src/app/chat/(desktop)/features/{SessionHeader/Desktop.tsx → SessionHeader.tsx}

@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 
-import SessionSearchBar from '../../../features/SessionSearchBar';
+import SessionSearchBar from '../../features/SessionSearchBar';
 
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`

package/src/app/chat/(desktop)/features/{SessionList/Desktop.tsx → SessionList.tsx}

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

package/src/app/chat/(desktop)/features/{SideBar/Desktop.tsx → SideBar.tsx}

@@ -1,6 +1,6 @@
 import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ReactNode, memo } from 'react';
+import { memo } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
@@ -8,7 +8,8 @@ import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
-import SystemRole from '../../../components/Inspector/SystemRole';
+import TopicListContent from '../../features/TopicListContent';
+import SystemRole from '../../features/TopicListContent/SystemRole';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -23,7 +24,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const Desktop = memo<{ children: ReactNode }>(({ children }) => {
+const Desktop = memo(() => {
   const { styles } = useStyles();
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
@@ -49,7 +50,7 @@ const Desktop = memo<{ children: ReactNode }>(({ children }) => {
       >
         <SafeSpacing />
         {!isInbox && <SystemRole />}
-        {children}
+        <TopicListContent />
       </DraggablePanelContainer>
     </DraggablePanel>
   );

package/src/app/chat/(desktop)/index.tsx

@@ -3,20 +3,26 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import ResponsiveIndex from '@/components/ResponsiveIndex';
+
+import Mobile from '../(mobile)';
 import Conversation from '../features/Conversation';
 import PageTitle from '../features/PageTitle';
 import ChatHeader from './features/ChatHeader';
 import ChatInput from './features/ChatInput';
 import SideBar from './features/SideBar';
+import Layout from './layout.responsive';
 
 const DesktopPage = memo(() => (
-  <>
-    <PageTitle />
-    <ChatHeader />
-    <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-      <Conversation chatInput={<ChatInput />} />
-      <SideBar />
-    </Flexbox>
-  </>
+  <ResponsiveIndex Mobile={Mobile}>
+    <Layout>
+      <PageTitle />
+      <ChatHeader />
+      <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+        <Conversation chatInput={<ChatInput />} />
+        <SideBar />
+      </Flexbox>
+    </Layout>
+  </ResponsiveIndex>
 ));
 export default DesktopPage;

package/src/app/chat/(desktop)/{layout/Desktop.tsx → layout.desktop.tsx}

@@ -1,17 +1,18 @@
+'use client';
+
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import AppLayout from '@/layout/AppLayout';
+import AppLayoutDesktop from '@/layout/AppLayout.desktop';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import ResponsiveSessionList from '../features/SessionList';
+import ResponsiveSessionList from './features/SessionList';
 
-const Desktop = memo<PropsWithChildren>(({ children }) => {
+export default memo(({ children }: PropsWithChildren) => {
   useSwitchSideBarOnInit(SidebarTabKey.Chat);
-
   return (
-    <AppLayout>
+    <AppLayoutDesktop>
       <ResponsiveSessionList />
       <Flexbox
         flex={1}
@@ -21,8 +22,6 @@ const Desktop = memo<PropsWithChildren>(({ children }) => {
       >
         {children}
       </Flexbox>
-    </AppLayout>
+    </AppLayoutDesktop>
   );
 });
-
-export default Desktop;

package/src/app/chat/(desktop)/layout.responsive.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren, memo } from 'react';
+
+import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
+
+import Mobile from '../(mobile)/layout.mobile';
+import Desktop from './layout.desktop';
+
+export default memo(({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile}>
+    {children}
+  </ResponsiveLayout>
+));

package/src/app/chat/(mobile)/features/ChatHeader.tsx

@@ -1 +1,54 @@
-export { default } from '../../components/ChatHeader/Mobile';
+import { ActionIcon, MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { LayoutList, Settings } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
+import { pathString } from '@/utils/url';
+
+import ShareButton from '../../features/ChatHeader/ShareButton';
+
+const MobileHeader = memo(() => {
+  const { t } = useTranslation('common');
+  const router = useRouter();
+
+  const [isInbox, title] = useSessionStore((s) => [
+    sessionSelectors.isInboxSession(s),
+    agentSelectors.currentAgentTitle(s),
+  ]);
+
+  const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
+
+  const displayTitle = isInbox ? t('inbox.title') : title;
+
+  return (
+    <MobileNavBar
+      center={<MobileNavBarTitle title={displayTitle} />}
+      onBackClick={() => router.push('/chat')}
+      right={
+        <>
+          <ShareButton />
+          <ActionIcon
+            icon={LayoutList}
+            onClick={() => toggleConfig()}
+            size={MOBILE_HEADER_ICON_SIZE}
+          />
+          {!isInbox && (
+            <ActionIcon
+              icon={Settings}
+              onClick={() => router.push(pathString('/chat/settings', { hash: location.hash }))}
+              size={MOBILE_HEADER_ICON_SIZE}
+            />
+          )}
+        </>
+      }
+      showBackButton
+    />
+  );
+});
+
+export default MobileHeader;

package/src/app/chat/(mobile)/features/ChatInput.tsx

@@ -1,14 +1,34 @@
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 
-import { ChatInputContent } from '../../components/ChatInput';
-import Mobile from '../../components/ChatInput/Mobile';
+import SafeSpacing from '@/components/SafeSpacing';
+import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
 
-const ChatInput = () => {
+import ChatInputContent from '../../features/ChatInputContent';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    width: 100vw;
+
+    background: ${token.colorBgLayout};
+  `,
+);
+
+const ChatInputMobileLayout = memo(() => {
+  const { styles } = useStyles();
   return (
-    <Mobile>
-      <ChatInputContent mobile />
-    </Mobile>
+    <>
+      <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
+      <div className={styles}>
+        <ChatInputContent mobile />
+      </div>
+    </>
   );
-};
+});
 
-export default memo(ChatInput);
+export default ChatInputMobileLayout;

package/src/app/chat/(mobile)/features/SessionList.tsx

@@ -1,12 +1,17 @@
 import { memo } from 'react';
 
-import { SessionListContent } from '../../components/SessionList';
-import Wrapper from '../../components/SessionList/Mobile';
+import SessionListContent from '../../features/SessionListContent';
+import SessionSearchBar from '../../features/SessionSearchBar';
 
-const SessionList = memo(() => (
-  <Wrapper>
-    <SessionListContent />
-  </Wrapper>
-));
+const Sessions = memo(() => {
+  return (
+    <>
+      <div style={{ padding: '8px 16px' }}>
+        <SessionSearchBar />
+      </div>
+      <SessionListContent />
+    </>
+  );
+});
 
-export default SessionList;
+export default Sessions;

package/src/app/chat/{components/Inspector/Mobile.tsx → (mobile)/features/TopicList.tsx}

@@ -1,10 +1,12 @@
 import { Modal } from '@lobehub/ui';
-import { PropsWithChildren, memo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
 
-const Mobile = memo<PropsWithChildren>(({ children }) => {
+import TopicListContent from '../../features/TopicListContent';
+
+const Topics = memo(() => {
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.mobileShowTopic,
     s.toggleMobileTopic,
@@ -14,9 +16,9 @@ const Mobile = memo<PropsWithChildren>(({ children }) => {
 
   return (
     <Modal onCancel={() => toggleConfig(false)} open={showAgentSettings} title={t('topic.title')}>
-      {children}
+      <TopicListContent />
     </Modal>
   );
 });
 
-export default Mobile;
+export default Topics;

package/src/app/chat/(mobile)/index.tsx

@@ -2,18 +2,16 @@
 
 import { memo } from 'react';
 
-import AppMobileLayout from '@/layout/AppMobileLayout';
-
 import PageTitle from '../features/PageTitle';
-import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
+import Layout from './layout.mobile';
 
 const ChatMobilePage = memo(() => {
   return (
-    <AppMobileLayout navBar={<SessionHeader />} showTabBar>
+    <Layout>
       <PageTitle />
       <SessionList />
-    </AppMobileLayout>
+    </Layout>
   );
 });
 

package/src/app/chat/(mobile)/layout.mobile.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+import SessionHeader from '@/app/chat/(mobile)/features/SessionHeader';
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
+
+export default memo(({ children }: PropsWithChildren) => {
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
+  return (
+    <AppLayoutMobile navBar={<SessionHeader />} showTabBar>
+      {children}
+    </AppLayoutMobile>
+  );
+});

package/src/app/chat/(mobile)/mobile/index.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Conversation from '../../features/Conversation';
+import ChatInput from '../features/ChatInput';
+import TopicList from '../features/TopicList';
+import Layout from './layout.mobile';
+
+const Chat = memo(() => (
+  <Layout>
+    <Flexbox height={'calc(100vh - 44px)'} horizontal>
+      <Conversation chatInput={<ChatInput />} mobile />
+      <TopicList />
+    </Flexbox>
+  </Layout>
+));
+export default Chat;

package/src/app/chat/(mobile)/mobile/layout.mobile.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+
+import ChatHeader from '../features/ChatHeader';
+
+export default ({ children }: PropsWithChildren) => (
+  <AppLayoutMobile navBar={<ChatHeader />}>{children}</AppLayoutMobile>
+);

package/src/app/chat/(mobile)/mobile/page.tsx

@@ -1,21 +1,3 @@
-'use client';
+import Index from './index';
 
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-
-import Conversation from '../../features/Conversation';
-import Header from '../features/ChatHeader';
-import ChatInput from '../features/ChatInput';
-import Topics from '../features/Topics';
-
-const Chat = memo(() => (
-  <AppMobileLayout navBar={<Header />}>
-    <Flexbox height={'calc(100vh - 44px)'} horizontal>
-      <Conversation chatInput={<ChatInput />} mobile />
-      <Topics />
-    </Flexbox>
-  </AppMobileLayout>
-));
-export default Chat;
+export default () => <Index />;

package/src/app/chat/{components → features}/ChatHeader/ShareButton/Preview.tsx

@@ -2,24 +2,25 @@ import { SiOpenai } from '@icons-pack/react-simple-icons';
 import { Avatar, ChatHeaderTitle, Logo, Markdown, Tag } from '@lobehub/ui';
 import { Button, SegmentedProps } from 'antd';
 import dayjs from 'dayjs';
-import { toJpeg, toPng, toSvg } from 'html-to-image';
+import { domToJpeg, domToPng, domToSvg, domToWebp } from 'modern-screenshot';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import ChatList from 'src/app/chat/features/Conversation/ChatList';
 
-import PluginTag from '@/app/chat/components/ChatHeader/PluginTag';
+import pkg from '@/../package.json';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/slices/agentConfig';
 import { sessionSelectors } from '@/store/session/slices/session/selectors';
 
-import pkg from '../../../../../../package.json';
+import PluginTag from '../../ChatHeader/PluginTag';
 import { useStyles } from './style';
 
 export enum ImageType {
   JPG = 'jpg',
   PNG = 'png',
   SVG = 'svg',
+  WEBP = 'webp',
 }
 
 export const imageTypeOptions: SegmentedProps['options'] = [
@@ -35,6 +36,10 @@ export const imageTypeOptions: SegmentedProps['options'] = [
     label: 'SVG',
     value: ImageType.SVG,
   },
+  {
+    label: 'WEBP',
+    value: ImageType.WEBP,
+  },
 ];
 
 interface PreviewProps {
@@ -69,26 +74,37 @@ const Preview = memo<PreviewProps>(({ withSystemRole, imageType, withBackground,
       let screenshotFn: any;
       switch (imageType) {
         case ImageType.JPG: {
-          screenshotFn = toJpeg;
+          screenshotFn = domToJpeg;
           break;
         }
         case ImageType.PNG: {
-          screenshotFn = toPng;
+          screenshotFn = domToPng;
           break;
         }
         case ImageType.SVG: {
-          screenshotFn = toSvg;
+          screenshotFn = domToSvg;
+          break;
+        }
+        case ImageType.WEBP: {
+          screenshotFn = domToWebp;
           break;
         }
       }
-      const dataUrl = await screenshotFn(document.querySelector('#preview') as HTMLDivElement);
+
+      const dataUrl = await screenshotFn(document.querySelector('#preview') as HTMLDivElement, {
+        features: {
+          // 不启用移除控制符，否则会导致 safari emoji 报错
+          removeControlCharacter: false,
+        },
+        scale: 2,
+      });
       const link = document.createElement('a');
       link.download = `LobeChat_${title}_${dayjs().format('YYYY-MM-DD')}.${imageType}`;
       link.href = dataUrl;
       link.click();
       setLoading(false);
-    } catch {
-      console.error('Failed to download image');
+    } catch (error) {
+      console.error('Failed to download image', error);
       setLoading(false);
     }
   }, [imageType, title]);

package/src/app/chat/{components → features}/ChatHeader/ShareButton/style.ts

@@ -1,22 +1,22 @@
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
 
 export const useStyles = createStyles(({ css, token, stylish, cx }, withBackground: boolean) => ({
   background: css`
     padding: 24px;
-    background: url('/images/screenshot_background.webp') no-repeat;
-    background-size: 100% 100%;
+
+    background-color: ${token.colorBgLayout};
+    background-image: url('/images/screenshot_background.webp');
+    background-position: center;
+    background-size: 120% 120%;
   `,
   container: cx(
     withBackground &&
       css`
         overflow: hidden;
-        border: 1px solid ${rgba(token.colorText, 0.15)};
+        border: 2px solid ${token.colorBorder};
         border-radius: ${token.borderRadiusLG}px;
-        box-shadow:
-          0 8px 16px -4px rgba(0, 0, 0, 75%),
-          0 8px 24px -4px rgba(0, 0, 0, 75%);
       `,
+
     css`
       background: ${token.colorBgLayout};
     `,

package/src/app/chat/{components/ChatInput → features/ChatInputContent}/index.tsx

@@ -19,7 +19,7 @@ interface ChatContentProps {
   onExpandChange?: (expand: boolean) => void;
 }
 
-export const ChatInputContent = memo<ChatContentProps>(
+const ChatInputContent = memo<ChatContentProps>(
   ({ expand, onExpandChange, mobile: defaultMobile }) => {
     const { t } = useTranslation('common');
 
@@ -63,3 +63,5 @@ export const ChatInputContent = memo<ChatContentProps>(
     );
   },
 );
+
+export default ChatInputContent;