@lobehub/chat 0.83.10 → 0.84.0-beta.2

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

@@ -2,16 +2,18 @@
 
 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 (
-    <Layout>
+    <AppMobileLayout navBar={<SessionHeader />} showTabBar>
       <PageTitle />
       <SessionList />
-    </Layout>
+    </AppMobileLayout>
   );
 });
 

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+import { useEffectAfterSessionHydrated } from '@/store/session';
+
+const ChatMobileLayout = memo<PropsWithChildren>(({ children }) => {
+  useEffectAfterSessionHydrated((store) => {
+    store.setState({ isMobile: true });
+  }, []);
+
+  return children;
+});
+
+export default ChatMobileLayout;

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

@@ -1,3 +1,21 @@
-import Index from './index';
+'use client';
 
-export default () => <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;

package/src/app/chat/components/ChatHeader/Mobile.tsx

@@ -0,0 +1,54 @@
+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 './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/{features → components}/ChatHeader/ShareButton/Preview.tsx

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

package/src/app/chat/{features → components}/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-color: ${token.colorBgLayout};
-    background-image: url('/images/screenshot_background.webp');
-    background-position: center;
-    background-size: 120% 120%;
+    background: url('/images/screenshot_background.webp') no-repeat;
+    background-size: 100% 100%;
   `,
   container: cx(
     withBackground &&
       css`
         overflow: hidden;
-        border: 2px solid ${token.colorBorder};
+        border: 1px solid ${rgba(token.colorText, 0.15)};
         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/Mobile.tsx

@@ -0,0 +1,35 @@
+import { createStyles } from 'antd-style';
+import { ReactNode, memo } from 'react';
+
+import SafeSpacing from '@/components/SafeSpacing';
+import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
+
+const useStyles = createStyles(
+  ({ css, token }) => css`
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    width: 100vw;
+
+    background: ${token.colorBgLayout};
+  `,
+);
+
+interface ChatInputMobileLayoutProps {
+  children: ReactNode;
+  expand?: boolean;
+}
+
+const ChatInputMobileLayout = memo<ChatInputMobileLayoutProps>(({ children }) => {
+  const { styles } = useStyles();
+  return (
+    <>
+      <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
+      <div className={styles}>{children}</div>
+    </>
+  );
+});
+
+export default ChatInputMobileLayout;

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 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';
@@ -16,10 +15,10 @@ const Inbox = memo(() => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
   const { t } = useTranslation('common');
-  const { mobile } = useResponsive();
-  const [activeId, activeSession, switchSession] = useSessionStore((s) => [
+
+  const [mobile, activeId, switchSession] = useSessionStore((s) => [
+    s.isMobile,
     s.activeId,
-    s.activeSession,
     s.switchSession,
   ]);
 
@@ -40,12 +39,11 @@ const Inbox = memo(() => {
       href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={(e) => {
         e.preventDefault();
-        if (mobile) switchSession(INBOX_SESSION_ID);
-        else activeSession(INBOX_SESSION_ID);
+        switchSession(INBOX_SESSION_ID);
       }}
     >
       <Item
-        active={mobile ? false : activeId === INBOX_SESSION_ID}
+        active={activeId === INBOX_SESSION_ID}
         avatar={avatarRender}
         ref={ref}
         style={{ alignItems: 'center' }}

package/src/app/chat/components/SessionList/Mobile.tsx

@@ -0,0 +1,16 @@
+import { ReactNode, memo } from 'react';
+
+import SessionSearchBar from '../../features/SessionSearchBar';
+
+const Sessions = memo<{ children: ReactNode }>(({ children }) => {
+  return (
+    <>
+      <div style={{ padding: '8px 16px' }}>
+        <SessionSearchBar />
+      </div>
+      {children}
+    </>
+  );
+});
+
+export default Sessions;

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

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

package/src/app/chat/layout.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './(desktop)/layout';
+import Mobile from './(mobile)/layout';
+
+const Layout = ({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={isMobileDevice}>
+    {children}
+  </ResponsiveLayout>
+);
+
+export default Layout;

package/src/app/chat/page.tsx

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

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

@@ -1,18 +1,23 @@
+'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';
 
-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>
-));
+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;

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

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

package/src/app/chat/settings/layout.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './(desktop)/layout.desktop';
+import Mobile from './(mobile)/layout.mobile';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const mobile = isMobileDevice();
+
+  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+};
+
+export default Layout;

package/src/app/chat/settings/page.tsx

@@ -1,14 +1,38 @@
-import { isMobileDevice } from '@/utils/responsive';
+'use client';
 
-import DesktopPage from './(desktop)';
-import MobilePage from './(mobile)';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
-const Page = () => {
-  const mobile = isMobileDevice();
+import PageTitle from '@/components/PageTitle';
+import AgentSetting from '@/features/AgentSetting';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-  const Page = mobile ? MobilePage : DesktopPage;
+const EditPage = memo(() => {
+  const { t } = useTranslation('setting');
+  const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
+  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
+  const [updateAgentConfig, updateAgentMeta, title] = useSessionStore((s) => [
+    s.updateAgentConfig,
+    s.updateAgentMeta,
+    agentSelectors.currentAgentTitle(s),
+  ]);
 
-  return <Page />;
-};
+  const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
 
-export default Page;
+  return (
+    <>
+      <PageTitle title={pageTitle} />
+      <AgentSetting
+        config={config}
+        meta={meta}
+        onConfigChange={updateAgentConfig}
+        onMetaChange={updateAgentMeta}
+      />
+    </>
+  );
+});
+
+export default EditPage;

package/src/app/market/(desktop)/{features/AgentDetail.tsx → AgentDetail/Desktop.tsx}

@@ -1,13 +1,11 @@
 import { DraggablePanel, DraggablePanelBody, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo, useState } from 'react';
+import { ReactNode, memo, useState } from 'react';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { MARKET_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
-import AgentDetailContent from '../../features/AgentDetailContent';
-
 const useStyles = createStyles(({ css, token, stylish }) => ({
   content: css`
     display: flex;
@@ -22,7 +20,7 @@ const useStyles = createStyles(({ css, token, stylish }) => ({
   noScrollbar: stylish.noScrollbar,
 }));
 
-const SideBar = memo(() => {
+const SideBar = memo<{ children?: ReactNode }>(({ children }) => {
   const { styles } = useStyles();
   const [tempId, setTempId] = useState<string>('');
   const [showAgentSidebar, deactivateAgent, activateAgent] = useMarketStore((s) => [
@@ -62,7 +60,7 @@ const SideBar = memo(() => {
           className={styles.noScrollbar}
           style={{ padding: 0, position: 'relative' }}
         >
-          <AgentDetailContent />
+          {children}
         </DraggablePanelBody>
       </DraggablePanelContainer>
     </DraggablePanel>

package/src/app/market/(desktop)/AgentDetail/index.tsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import Mobile from '@/app/market/components/AgentDetail/Mobile';
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import { AgentDetailContent } from '../../components/AgentDetail';
+import Desktop from './Desktop';
+
+const AgentDetail = memo(() => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile}>
+    <AgentDetailContent />
+  </ResponsiveLayout>
+));
+
+export default AgentDetail;

package/src/app/market/(desktop)/Header/index.tsx

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import Mobile from '../../(mobile)/Header';
+import Desktop from './Desktop';
+
+const Header = memo(() => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile} />
+));
+
+export default Header;

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

@@ -5,12 +5,12 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { MAX_WIDTH } from '@/const/layoutTokens';
-import AppLayoutDesktop from '@/layout/AppLayout.desktop';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import SideBar from './features/AgentDetail';
-import Header from './features/Header';
+import AppLayout from '../../../../layout/AppLayout';
+import SideBar from '../AgentDetail';
+import Header from '../Header';
 
 const useStyles = createStyles(({ css }) => ({
   background: css`
@@ -31,7 +31,7 @@ const MarketLayout = memo<PropsWithChildren>(({ children }) => {
   useSwitchSideBarOnInit(SidebarTabKey.Market);
 
   return (
-    <AppLayoutDesktop>
+    <AppLayout>
       <Flexbox
         flex={1}
         height={'100vh'}
@@ -59,7 +59,7 @@ const MarketLayout = memo<PropsWithChildren>(({ children }) => {
           <SideBar />
         </Flexbox>
       </Flexbox>
-    </AppLayoutDesktop>
+    </AppLayout>
   );
 });
 

package/src/app/market/(desktop)/layout/index.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import ResponsiveLayout from '@/components/ResponsiveLayout';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import Mobile from '../../(mobile)/layout.mobile';
+import Desktop from './Desktop';
+
+const Market = ({ children }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={Desktop} Mobile={Mobile} isMobile={useIsMobile}>
+    {children}
+  </ResponsiveLayout>
+);
+
+export default Market;