@lobehub/chat 0.81.0 → 0.82.2

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

@@ -4,6 +4,8 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import ShareButton from '@/app/chat/features/Header/ShareButton';
+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';
@@ -13,10 +15,9 @@ const MobileHeader = memo(() => {
   const { t } = useTranslation('common');
   const router = useRouter();
 
-  const [isInbox, title, model] = useSessionStore((s) => [
+  const [isInbox, title] = useSessionStore((s) => [
     sessionSelectors.isInboxSession(s),
     agentSelectors.currentAgentTitle(s),
-    agentSelectors.currentAgentModel(s),
   ]);
 
   const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
@@ -25,17 +26,21 @@ const MobileHeader = memo(() => {
 
   return (
     <MobileNavBar
-      center={<MobileNavBarTitle desc={model} title={displayTitle} />}
+      center={<MobileNavBarTitle title={displayTitle} />}
       onBackClick={() => router.push('/chat')}
       right={
         <>
-          <ActionIcon icon={LayoutList} onClick={() => toggleConfig()} />
+          <ShareButton />
+          <ActionIcon
+            icon={LayoutList}
+            onClick={() => toggleConfig()}
+            size={MOBILE_HEADER_ICON_SIZE}
+          />
           {!isInbox && (
             <ActionIcon
               icon={Settings}
-              onClick={() => {
-                router.push(pathString('/chat/settings', { hash: location.hash }));
-              }}
+              onClick={() => router.push(pathString('/chat/settings', { hash: location.hash }))}
+              size={MOBILE_HEADER_ICON_SIZE}
             />
           )}
         </>

package/src/app/chat/features/Header/ShareButton/Inner.tsx

@@ -1,28 +1,128 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Loader2, Share2 } from 'lucide-react';
-import { memo } from 'react';
+import { Form, ItemGroup } from '@lobehub/ui';
+import { Button, Segmented, SegmentedProps, Switch } from 'antd';
+import { Share2 } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
+import MobilePadding from '@/components/MobilePadding';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
-const ShareButton = memo(() => {
+import Preview, { ImageType, imageTypeOptions } from './Preview';
+
+enum Tab {
+  Screenshot = 'screenshot',
+  ShareGPT = 'sharegpt',
+}
+
+const Inner = memo(() => {
+  const [withSystemRole, setWithSystemRole] = useState(false);
+  const [withPluginInfo, setWithPluginInfo] = useState(false);
+  const [withBackground, setWithBackground] = useState(true);
+  const [withFooter, setWithFooter] = useState(true);
+  const [imageType, setImageType] = useState<ImageType>(ImageType.JPG);
+  const [tab, setTab] = useState<Tab>(Tab.Screenshot);
   const { t } = useTranslation('common');
 
+  const avatar = useGlobalStore((s) => s.settings.avatar);
   const [shareLoading, shareToShareGPT] = useSessionStore((s) => [
     s.shareLoading,
     s.shareToShareGPT,
   ]);
 
-  return shareLoading ? (
-    <Icon icon={Loader2} size={{ fontSize: 24 }} spin />
-  ) : (
-    <ActionIcon
-      icon={Share2}
-      onClick={shareToShareGPT}
-      size={{ fontSize: 24 }}
-      title={t('share')}
-    />
+  const options: SegmentedProps['options'] = useMemo(
+    () => [
+      {
+        label: t('shareModal.screenshot'),
+        value: Tab.Screenshot,
+      },
+      {
+        label: 'ShareGPT',
+        value: Tab.ShareGPT,
+      },
+    ],
+    [],
+  );
+
+  const settings: ItemGroup = useMemo(
+    () =>
+      ({
+        children: [
+          {
+            children: <Switch checked={withSystemRole} onChange={setWithSystemRole} />,
+            label: t('shareModal.withSystemRole'),
+            minWidth: undefined,
+          },
+          tab === Tab.Screenshot && {
+            children: <Switch checked={withBackground} onChange={setWithBackground} />,
+            label: t('shareModal.withBackground'),
+            minWidth: undefined,
+          },
+          tab === Tab.Screenshot && {
+            children: <Switch checked={withFooter} onChange={setWithFooter} />,
+            label: t('shareModal.withFooter'),
+            minWidth: undefined,
+          },
+          tab === Tab.Screenshot && {
+            children: (
+              <Segmented
+                onChange={(value) => setImageType(value as ImageType)}
+                options={imageTypeOptions}
+                value={imageType}
+              />
+            ),
+            label: t('shareModal.imageType'),
+            minWidth: undefined,
+          },
+          tab === Tab.ShareGPT && {
+            children: <Switch checked={withPluginInfo} onChange={setWithPluginInfo} />,
+            label: t('shareModal.withPluginInfo'),
+            minWidth: undefined,
+          },
+        ].filter(Boolean),
+        icon: Share2,
+        title: t('shareModal.settings'),
+      }) as ItemGroup,
+    [tab, withSystemRole, withPluginInfo, withBackground, withFooter, imageType],
+  );
+
+  return (
+    <Flexbox gap={16}>
+      <MobilePadding bottom={0}>
+        <Segmented
+          block
+          onChange={(value) => setTab(value as Tab)}
+          options={options}
+          style={{ width: '100%' }}
+          value={tab}
+        />
+      </MobilePadding>
+      <Form items={[settings]} {...FORM_STYLE} />
+      <MobilePadding gap={16} top={0}>
+        {tab === Tab.Screenshot && (
+          <Preview
+            imageType={imageType}
+            withBackground={withBackground}
+            withFooter={withFooter}
+            withSystemRole={withSystemRole}
+          />
+        )}
+        {tab === Tab.ShareGPT && (
+          <Button
+            block
+            loading={shareLoading}
+            onClick={() => shareToShareGPT({ avatar, withPluginInfo, withSystemRole })}
+            size={'large'}
+            type={'primary'}
+          >
+            {t('shareModal.shareToShareGPT')}
+          </Button>
+        )}
+      </MobilePadding>
+    </Flexbox>
   );
 });
 
-export default ShareButton;
+export default Inner;

package/src/app/chat/features/Header/ShareButton/Preview.tsx

@@ -0,0 +1,140 @@
+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 { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import pkg from '@/../package.json';
+import ChatList from '@/app/chat/features/Conversation/ChatList';
+import PluginTag from '@/app/chat/features/Header/PluginTag';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/slices/agentConfig';
+import { sessionSelectors } from '@/store/session/slices/session/selectors';
+
+import { useStyles } from './style';
+
+export enum ImageType {
+  JPG = 'jpg',
+  PNG = 'png',
+  SVG = 'svg',
+}
+
+export const imageTypeOptions: SegmentedProps['options'] = [
+  {
+    label: 'JPG',
+    value: ImageType.JPG,
+  },
+  {
+    label: 'PNG',
+    value: ImageType.PNG,
+  },
+  {
+    label: 'SVG',
+    value: ImageType.SVG,
+  },
+];
+
+interface PreviewProps {
+  imageType: ImageType;
+  withBackground: boolean;
+  withFooter: boolean;
+  withSystemRole: boolean;
+}
+
+const Preview = memo<PreviewProps>(({ withSystemRole, imageType, withBackground, withFooter }) => {
+  const [loading, setLoading] = useState(false);
+  const [isInbox, title, description, avatar, backgroundColor, model, plugins, systemRole] =
+    useSessionStore((s) => [
+      sessionSelectors.isInboxSession(s),
+      agentSelectors.currentAgentTitle(s),
+      agentSelectors.currentAgentDescription(s),
+      agentSelectors.currentAgentAvatar(s),
+      agentSelectors.currentAgentBackgroundColor(s),
+      agentSelectors.currentAgentModel(s),
+      agentSelectors.currentAgentPlugins(s),
+      agentSelectors.currentAgentSystemRole(s),
+    ]);
+  const { t } = useTranslation('common');
+  const { styles } = useStyles(withBackground);
+
+  const displayTitle = isInbox ? t('inbox.title') : title;
+  const displayDesc = isInbox ? t('inbox.desc') : description;
+
+  const handleDownload = useCallback(async () => {
+    setLoading(true);
+    try {
+      let screenshotFn: any;
+      switch (imageType) {
+        case ImageType.JPG: {
+          screenshotFn = toJpeg;
+          break;
+        }
+        case ImageType.PNG: {
+          screenshotFn = toPng;
+          break;
+        }
+        case ImageType.SVG: {
+          screenshotFn = toSvg;
+          break;
+        }
+      }
+      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 {
+      console.error('Failed to download image');
+      setLoading(false);
+    }
+  }, [imageType, title]);
+
+  return (
+    <>
+      <div className={styles.preview}>
+        <div className={withBackground ? styles.background : undefined} id={'preview'}>
+          <Flexbox className={styles.container} gap={16}>
+            <div className={styles.header}>
+              <Flexbox align={'flex-start'} gap={12} horizontal>
+                <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
+                <ChatHeaderTitle
+                  desc={displayDesc}
+                  tag={
+                    <>
+                      <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
+                      {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+                    </>
+                  }
+                  title={displayTitle}
+                />
+              </Flexbox>
+              {withSystemRole && systemRole && (
+                <div className={styles.role}>
+                  <Markdown>{systemRole}</Markdown>
+                </div>
+              )}
+            </div>
+            <ChatList />
+            {withFooter ? (
+              <Flexbox align={'center'} className={styles.footer} gap={4}>
+                <Logo extra={'chat'} type={'combine'} />
+                <div className={styles.url}>{pkg.homepage}</div>
+              </Flexbox>
+            ) : (
+              <div />
+            )}
+          </Flexbox>
+        </div>
+      </div>
+      <Button block loading={loading} onClick={handleDownload} size={'large'} type={'primary'}>
+        {t('shareModal.download')}
+      </Button>
+    </>
+  );
+});
+
+export default Preview;

package/src/app/chat/features/Header/ShareButton/index.tsx

@@ -1,14 +1,21 @@
 import { ActionIcon, Modal } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { Share2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
 
+import Inner from './Inner';
+
 const ShareButton = memo(() => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { t } = useTranslation('common');
   const [shareLoading] = useSessionStore((s) => [s.shareLoading]);
+  const { mobile } = useResponsive();
+
+  const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 };
 
   return (
     <>
@@ -16,15 +23,18 @@ const ShareButton = memo(() => {
         icon={Share2}
         loading={shareLoading}
         onClick={() => setIsModalOpen(true)}
-        size={{ fontSize: 24 }}
+        size={size}
         title={t('share')}
       />
       <Modal
+        centered={false}
         footer={null}
         onCancel={() => setIsModalOpen(false)}
         open={isModalOpen}
         title={t('share')}
-      />
+      >
+        <Inner />
+      </Modal>
     </>
   );
 });

package/src/app/chat/features/Header/ShareButton/style.ts

@@ -0,0 +1,71 @@
+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%;
+  `,
+  container: cx(
+    withBackground &&
+      css`
+        overflow: hidden;
+        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};
+    `,
+  ),
+  footer: css`
+    padding: 16px;
+    border-top: 1px solid ${token.colorBorder};
+  `,
+  header: css`
+    margin-bottom: -24px;
+    padding: 16px;
+    background: ${token.colorBgContainer};
+    border-bottom: 1px solid ${token.colorBorder};
+  `,
+  preview: cx(
+    stylish.noScrollbar,
+    css`
+      overflow-x: hidden;
+      overflow-y: scroll;
+
+      width: 100%;
+      max-height: 40vh;
+
+      background: ${token.colorBgLayout};
+      border: 1px solid ${token.colorBorder};
+      border-radius: ${token.borderRadiusLG}px;
+
+      * {
+        pointer-events: none;
+        overflow: hidden;
+
+        ::-webkit-scrollbar {
+          width: 0 !important;
+          height: 0 !important;
+        }
+      }
+    `,
+  ),
+  role: css`
+    margin-top: 12px;
+    padding-top: 12px;
+    opacity: 0.75;
+    border-top: 1px dashed ${token.colorBorderSecondary};
+
+    * {
+      font-size: 12px !important;
+    }
+  `,
+  url: css`
+    color: ${token.colorTextDescription};
+  `,
+}));

package/src/app/chat/features/SessionList/Header/Desktop.tsx

@@ -1,7 +1,6 @@
 import { ActionIcon, Logo } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -28,9 +27,8 @@ const Header = memo(() => {
   return (
     <Flexbox className={styles.top} gap={16} padding={16}>
       <Flexbox distribution={'space-between'} horizontal>
-        <Link href={'/'}>
-          <Logo className={styles.logo} size={36} type={'text'} />
-        </Link>
+        <Logo className={styles.logo} size={36} type={'text'} />
+
         <ActionIcon
           icon={MessageSquarePlus}
           onClick={() => createSession()}

package/src/app/chat/features/SessionList/Header/Mobile.tsx

@@ -1,10 +1,11 @@
-import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui';
+import { ActionIcon, Avatar, Logo, MobileNavBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { MessageSquarePlus, Settings2 } from 'lucide-react';
+import { MessageSquarePlus } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 
-import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -20,21 +21,21 @@ export const useStyles = createStyles(({ css, token }) => ({
 const Header = memo(() => {
   const [createSession] = useSessionStore((s) => [s.createSession]);
   const router = useRouter();
-
+  const avatar = useGlobalStore((st) => st.settings.avatar);
   return (
     <MobileNavBar
       center={<Logo type={'text'} />}
-      left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
+      left={
+        <div onClick={() => router.push('/settings/mobile')} style={{ marginLeft: 8 }}>
+          {avatar ? <Avatar avatar={avatar} size={28} /> : <Logo size={28} />}
+        </div>
+      }
       right={
-        <>
-          <ActionIcon icon={MessageSquarePlus} onClick={() => createSession()} />
-          <ActionIcon
-            icon={Settings2}
-            onClick={() => {
-              router.push('/settings');
-            }}
-          />
-        </>
+        <ActionIcon
+          icon={MessageSquarePlus}
+          onClick={() => createSession()}
+          size={MOBILE_HEADER_ICON_SIZE}
+        />
       }
     />
   );

package/src/app/chat/features/Sidebar/Mobile.tsx

@@ -1,14 +1,10 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Drawer } from 'antd';
-import { useTheme } from 'antd-style';
-import { X } from 'lucide-react';
+import { Modal } from '@lobehub/ui';
 import { PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
 
 const Mobile = memo<PropsWithChildren>(({ children }) => {
-  const theme = useTheme();
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.mobileShowTopic,
     s.toggleMobileTopic,
@@ -17,19 +13,9 @@ const Mobile = memo<PropsWithChildren>(({ children }) => {
   const { t } = useTranslation('common');
 
   return (
-    <Drawer
-      bodyStyle={{ padding: 0 }}
-      closeIcon={<ActionIcon icon={X} size={{ blockSize: 32, fontSize: 20 }} />}
-      drawerStyle={{ background: theme.colorBgContainer }}
-      headerStyle={{ padding: '8px 4px' }}
-      height={'75vh'}
-      onClose={() => toggleConfig(false)}
-      open={showAgentSettings}
-      placement={'bottom'}
-      title={t('topic.title')}
-    >
+    <Modal onCancel={() => toggleConfig(false)} open={showAgentSettings} title={t('topic.title')}>
       {children}
-    </Drawer>
+    </Modal>
   );
 });
 

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

@@ -3,11 +3,12 @@ import { Flexbox } from 'react-layout-kit';
 
 import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import { Sessions } from './features/SessionList';
 
 const ChatLayout = memo<PropsWithChildren>(({ children }) => {
-  useSwitchSideBarOnInit('chat');
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
 
   return (
     <AppLayout>

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

@@ -2,12 +2,13 @@ import { memo } from 'react';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import { Sessions } from './features/SessionList';
 import Header from './features/SessionList/Header';
 
 const ChatMobileLayout = memo(() => {
-  useSwitchSideBarOnInit('chat');
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
 
   return (
     <AppMobileLayout navBar={<Header />} showTabBar>

package/src/app/chat/settings/features/Header/index.tsx

@@ -1,10 +1,11 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Dropdown, MenuProps } from 'antd';
 import { useResponsive } from 'antd-style';
-import { HardDriveDownload, Share2 } from 'lucide-react';
+import { HardDriveDownload } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { useSessionStore } from '@/store/session';
 
@@ -42,11 +43,10 @@ const Header = memo<{ mobile?: boolean }>(() => {
     [],
   );
 
-  const size = mobile ? undefined : { fontSize: 24 };
+  const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 };
 
   return (
     <Render>
-      <ActionIcon icon={Share2} size={size} title={t('share', { ns: 'common' })} />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
         <ActionIcon icon={HardDriveDownload} size={size} title={t('export', { ns: 'common' })} />
       </Dropdown>

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

@@ -1,18 +1,11 @@
 import { PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
 
 import Header from './features/Header';
 
 const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  return (
-    <AppMobileLayout navBar={<Header />}>
-      <Flexbox gap={16} padding={16}>
-        {children}
-      </Flexbox>
-    </AppMobileLayout>
-  );
+  return <AppMobileLayout navBar={<Header />}>{children}</AppMobileLayout>;
 });
 
 export default MobileLayout;

package/src/app/market/features/AgentCard/AgentCardBanner.tsx

@@ -39,7 +39,7 @@ interface AgentCardBannerProps extends DivProps {
 }
 
 const AgentCardBanner = memo<AgentCardBannerProps>(
-  ({ meta, className, mask, size = 8, maskColor, ...props }) => {
+  ({ meta, className, mask, size = 8, maskColor, children, ...props }) => {
     const { styles, theme, cx } = useStyles(maskColor);
 
     return (
@@ -56,6 +56,7 @@ const AgentCardBanner = memo<AgentCardBannerProps>(
           style={{ transform: `scale(${size})` }}
         />
         {mask && <div className={styles.bannerMask} />}
+        {children}
       </Flexbox>
     );
   },

package/src/app/market/features/Header/Mobile.tsx

@@ -1,27 +1,8 @@
-import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui';
-import { Settings2 } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { Logo, MobileNavBar } from '@lobehub/ui';
 import { memo } from 'react';
 
-import AvatarWithUpload from '@/features/AvatarWithUpload';
-
 const Header = memo(() => {
-  const router = useRouter();
-
-  return (
-    <MobileNavBar
-      center={<Logo type={'text'} />}
-      left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
-      right={
-        <ActionIcon
-          icon={Settings2}
-          onClick={() => {
-            router.push('/settings');
-          }}
-        />
-      }
-    />
-  );
+  return <MobileNavBar center={<Logo type={'text'} />} />;
 });
 
 export default Header;