@lobehub/chat 0.84.0-beta.2 → 0.85.0

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}/Footer/SaveTopic.tsx

@@ -19,7 +19,7 @@ const SaveTopic = memo(() => {
 
   return (
     <Tooltip title={t('topic.saveCurrentMessages')}>
-      <Render icon={icon} onClick={saveToTopic} />
+      <Render aria-label={t('topic.saveCurrentMessages')} icon={icon} onClick={saveToTopic} />
     </Tooltip>
   );
 });

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;

package/src/app/chat/{components/SessionList → features/SessionListContent}/Inbox/index.tsx

@@ -1,5 +1,6 @@
 import { Avatar, List } from '@lobehub/ui';
 import { useHover } from 'ahooks';
+import { useResponsive } from 'antd-style';
 import Link from 'next/link';
 import { memo, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,10 +16,10 @@ const Inbox = memo(() => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
   const { t } = useTranslation('common');
-
-  const [mobile, activeId, switchSession] = useSessionStore((s) => [
-    s.isMobile,
+  const { mobile } = useResponsive();
+  const [activeId, activeSession, switchSession] = useSessionStore((s) => [
     s.activeId,
+    s.activeSession,
     s.switchSession,
   ]);
 
@@ -39,11 +40,12 @@ const Inbox = memo(() => {
       href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={(e) => {
         e.preventDefault();
-        switchSession(INBOX_SESSION_ID);
+        if (mobile) switchSession(INBOX_SESSION_ID);
+        else activeSession(INBOX_SESSION_ID);
       }}
     >
       <Item
-        active={activeId === INBOX_SESSION_ID}
+        active={mobile ? false : activeId === INBOX_SESSION_ID}
         avatar={avatarRender}
         ref={ref}
         style={{ alignItems: 'center' }}

package/src/app/chat/{components/SessionList → features/SessionListContent}/index.tsx

@@ -6,7 +6,7 @@ import CollapseGroup from './CollapseGroup';
 import Inbox from './Inbox';
 import SessionList from './List';
 
-export const SessionListContent = memo(() => {
+const SessionListContent = memo(() => {
   const { t } = useTranslation('common');
   const items: CollapseProps['items'] = useMemo(
     () => [
@@ -26,3 +26,5 @@ export const SessionListContent = memo(() => {
     </>
   );
 });
+
+export default SessionListContent;

package/src/app/chat/{components/Inspector → features/TopicListContent}/index.tsx

@@ -3,7 +3,7 @@ import { Flexbox } from 'react-layout-kit';
 import { Topic } from './Topic';
 import TopicSearchBar from './TopicSearchBar';
 
-export const InspectorContent = () => {
+const TopicListContent = () => {
   return (
     <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
       <Flexbox padding={16}>
@@ -15,3 +15,5 @@ export const InspectorContent = () => {
     </Flexbox>
   );
 };
+
+export default TopicListContent;

package/src/app/chat/page.tsx

@@ -6,7 +6,9 @@ import MobilePage from './(mobile)';
 const Page = () => {
   const mobile = isMobileDevice();
 
-  return mobile ? <MobilePage /> : <DesktopPage />;
+  const Page = mobile ? MobilePage : DesktopPage;
+
+  return <Page />;
 };
 
 export default Page;

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { memo } from 'react';
+
+import EditPage from '../features/EditPage';
+import Layout from './layout.responsive';
+
+const ChatSettings = memo(() => (
+  <Layout>
+    <EditPage />
+  </Layout>
+));
+
+export default ChatSettings;

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

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

package/src/app/chat/settings/(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/settings/(mobile)/index.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { memo } from 'react';
+
+import EditPage from '../features/EditPage';
+import Layout from './layout.mobile';
+
+const ChatSettings = memo(() => (
+  <Layout>
+    <EditPage />
+  </Layout>
+));
+
+export default ChatSettings;

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

@@ -1,13 +1,9 @@
-'use client';
-
 import { PropsWithChildren, memo } from 'react';
 
-import AppMobileLayout from '@/layout/AppMobileLayout';
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
 
 import Header from './Header';
 
-const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  return <AppMobileLayout navBar={<Header />}>{children}</AppMobileLayout>;
-});
-
-export default MobileLayout;
+export default memo(({ children }: PropsWithChildren) => (
+  <AppLayoutMobile navBar={<Header />}>{children}</AppLayoutMobile>
+));