@lobehub/chat 0.81.0 → 0.82.1

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.82.1](https://github.com/lobehub/lobe-chat/compare/v0.82.0...v0.82.1)
+
+<sup>Released on **2023-09-27**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix share screenshot scrollbar.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix share screenshot scrollbar ([244b3b4](https://github.com/lobehub/lobe-chat/commit/244b3b4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.82.0](https://github.com/lobehub/lobe-chat/compare/v0.81.0...v0.82.0)
+
+<sup>Released on **2023-09-27**</sup>
+
+#### ✨ Features
+
+- **share**: Add screenshot.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **share**: Add screenshot, closes [#152](https://github.com/lobehub/lobe-chat/issues/152) ([f5d21f4](https://github.com/lobehub/lobe-chat/commit/f5d21f4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.81.0](https://github.com/lobehub/lobe-chat/compare/v0.80.2...v0.81.0)
 
 <sup>Released on **2023-09-27**</sup>

package/docs/Environment-Variable.zh-CN.md

@@ -20,10 +20,7 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
 - [数据统计](#数据统计)
   - [Vercel Analytics](#vercel-analytics)
   - [Mixpanel Analytics](#mixpanel-analytics)
-  - [`NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN`](#next_public_mixpanel_project_token)
-  - [`NEXT_PUBLIC_MIXPANEL_DEBUG`](#next_public_mixpanel_debug)
   - [Posthog Analytics](#posthog-analytics)
-  - [`NEXT_PUBLIC_POSTHOG_DEBUG`](#next_public_posthog_debug)
 - [开发环境](#开发环境)
   - [`DEV_API_END_PORT_URL`](#dev_api_end_port_url)
 
@@ -128,14 +125,14 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
 - 默认值： -
 - 示例：`1`
 
-### `NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN`
+#### `NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN`
 
 - 类型：可选
 - 描述：设置 Mixpanel 项目的识别 Token，可以在[这里][mixpanel-project-url]找到
 - 默认值： -
 - 示例：`60db2abae7fdd29961f4e8f91b074b3a`
 
-### `NEXT_PUBLIC_MIXPANEL_DEBUG`
+#### `NEXT_PUBLIC_MIXPANEL_DEBUG`
 
 - 类型：可选
 - 描述：开启 Mixpanel 的调试模式
@@ -165,7 +162,7 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
 - 默认值：`https://app.posthog.com`
 - 示例：`https://example.com`
 
-### `NEXT_PUBLIC_POSTHOG_DEBUG`
+#### `NEXT_PUBLIC_POSTHOG_DEBUG`
 
 - 类型：可选
 - 描述：开启 PostHog 的调试模式

package/locales/en_US/common.json

@@ -47,6 +47,7 @@
   "newAgent": "New Agent",
   "noDescription": "No Description",
   "ok": "OK",
+  "password": "Password",
   "pin": "Pin",
   "pinOff": "Unpin",
   "regenerate": "Regenerate",
@@ -60,6 +61,17 @@
   "sessionList": "Agent List",
   "setting": "Settings",
   "share": "Share",
+  "shareModal": {
+    "download": "Download Screenshot",
+    "imageType": "Image Type",
+    "screenshot": "Screenshot",
+    "settings": "Export Settings",
+    "withBackground": "Include Background Image",
+    "withPluginInfo": "Include Plugin Information",
+    "withSystemRole": "Include Agent Role Setting",
+    "withFooter": "Including footer",
+    "shareToShareGPT": "Generate ShareGPT sharing link"
+  },
   "stop": "Stop",
   "tab": {
     "chat": "Chat",

package/locales/ru_RU/common.json

@@ -47,6 +47,7 @@
   "newAgent": "Новый ассистент",
   "noDescription": "Нет описания",
   "ok": "ОК",
+  "password": "пароль",
   "pin": "Закрепить",
   "pinOff": "Открепить",
   "regenerate": "Ре-генерация",
@@ -60,6 +61,17 @@
   "sessionList": "Список помощников",
   "setting": "Настройки",
   "share": "Поделиться",
+  "shareModal": {
+    "download": "Скачать скриншот",
+    "imageType": "Тип изображения",
+    "screenshot": "Скриншот",
+    "settings": "Настройки экспорта",
+    "withBackground": "С фоновым изображением",
+    "withPluginInfo": "С информацией о плагине",
+    "withSystemRole": "С настройками роли помощника",
+    "withFooter": "с подвалом",
+    "shareToShareGPT": "Создать ссылку для обмена ShareGPT"
+  },
   "stop": "Остановить",
   "tab": {
     "chat": "Чат",

package/locales/zh_CN/common.json

@@ -47,6 +47,7 @@
   "newAgent": "新建助手",
   "noDescription": "暂无描述",
   "ok": "确定",
+  "password": "密码",
   "pin": "置顶",
   "pinOff": "取消置顶",
   "regenerate": "重新生成",
@@ -60,6 +61,17 @@
   "sessionList": "助手列表",
   "setting": "设置",
   "share": "分享",
+  "shareModal": {
+    "download": "下载截图",
+    "imageType": "图片格式",
+    "screenshot": "截图",
+    "settings": "导出设置",
+    "shareToShareGPT": "生成 ShareGPT 分享链接",
+    "withBackground": "包含背景图片",
+    "withFooter": "包含页脚",
+    "withPluginInfo": "包含插件信息",
+    "withSystemRole": "包含助手角色设定"
+  },
   "stop": "停止",
   "tab": {
     "chat": "会话",

package/locales/zh_TW/common.json

@@ -47,6 +47,7 @@
   "newAgent": "新助理",
   "noDescription": "無描述",
   "ok": "確定",
+  "password": "密碼",
   "pin": "置頂",
   "pinOff": "取消置頂",
   "regenerate": "重新產生",
@@ -60,6 +61,17 @@
   "sessionList": "助理列表",
   "setting": "設定",
   "share": "分享",
+  "shareModal": {
+    "download": "下載截圖",
+    "imageType": "圖片格式",
+    "screenshot": "截圖",
+    "settings": "匯出設定",
+    "withBackground": "包含背景圖片",
+    "withPluginInfo": "包含插件資訊",
+    "withSystemRole": "包含助手角色設定",
+    "withFooter": "包含頁腳",
+    "shareToShareGPT": "生成 ShareGPT 分享連結"
+  },
   "stop": "停止",
   "tab": {
     "chat": "聊天",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.81.0",
+  "version": "0.82.1",
   "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",
@@ -78,9 +78,11 @@
     "antd-style": "^3",
     "brotli-wasm": "^1",
     "chroma-js": "^2",
+    "dayjs": "^1",
     "emoji-mart": "^5",
     "fast-deep-equal": "^3",
     "gpt-tokenizer": "^2",
+    "html-to-image": "^1",
     "i18next": "^23",
     "idb-keyval": "^6",
     "immer": "^10",
@@ -98,7 +100,9 @@
     "react-i18next": "^13",
     "react-intersection-observer": "^9",
     "react-layout-kit": "^1",
-    "satori": "^0.10",
+    "remark": "^14",
+    "remark-gfm": "^3",
+    "remark-html": "^15",
     "swr": "^2",
     "systemjs": "^6",
     "ts-md5": "^1",
@@ -138,7 +142,6 @@
     "next-pwa": "^5",
     "node-fetch": "^3",
     "prettier": "^3",
-    "remark": "^14",
     "remark-cli": "^11",
     "semantic-release": "^21",
     "stylelint": "^15",

package/public/manifest.json

@@ -6,26 +6,12 @@
     {
       "src": "/icons/icon-192x192.png",
       "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/icons/icon-maskable-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
+      "type": "image/png"
     },
     {
       "src": "/icons/icon-512x512.png",
       "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/icons/icon-maskable-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
+      "type": "image/png"
     }
   ],
   "id": "/",

package/src/app/chat/features/Conversation/ChatList/Error/InvalidAccess.tsx

@@ -12,9 +12,14 @@ import OtpInput from '../OTPInput';
 import APIKeyForm from './ApiKeyForm';
 import { ErrorActionContainer, FormAction } from './style';
 
+enum Tab {
+  Api = 'api',
+  Password = 'password',
+}
+
 const InvalidAccess = memo<{ id: string }>(({ id }) => {
   const { t } = useTranslation('error');
-  const [mode, setMode] = useState('password');
+  const [mode, setMode] = useState<Tab>(Tab.Password);
   const [password, setSettings] = useGlobalStore((s) => [s.settings.password, s.setSettings]);
   const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
 
@@ -22,16 +27,20 @@ const InvalidAccess = memo<{ id: string }>(({ id }) => {
     <ErrorActionContainer>
       <Segmented
         block
-        onChange={(value) => setMode(value as string)}
+        onChange={(value) => setMode(value as Tab)}
         options={[
-          { icon: <Icon icon={KeySquare} />, label: 'OpenAI API Key', value: 'api' },
-          { icon: <Icon icon={SquareAsterisk} />, label: '密码', value: 'password' },
+          { icon: <Icon icon={KeySquare} />, label: 'OpenAI API Key', value: Tab.Api },
+          {
+            icon: <Icon icon={SquareAsterisk} />,
+            label: t('password', { ns: 'common' }),
+            value: Tab.Password,
+          },
         ]}
         style={{ width: '100%' }}
         value={mode}
       />
       <Flexbox gap={24}>
-        {mode === 'password' ? (
+        {mode === Tab.Password && (
           <>
             <FormAction
               avatar={'🗳'}
@@ -56,7 +65,8 @@ const InvalidAccess = memo<{ id: string }>(({ id }) => {
               {t('unlock.confirm')}
             </Button>
           </>
-        ) : (
+        )}
+        {mode === Tab.Api && (
           <APIKeyForm
             onConfirm={() => {
               resend(id);

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

@@ -1,28 +1,123 @@
-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 { 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}>
+      <Segmented
+        block
+        onChange={(value) => setTab(value as Tab)}
+        options={options}
+        style={{ width: '100%' }}
+        value={tab}
+      />
+      <Form items={[settings]} {...FORM_STYLE} />
+      {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>
+      )}
+    </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

@@ -5,6 +5,8 @@ import { useTranslation } from 'react-i18next';
 
 import { useSessionStore } from '@/store/session';
 
+import Inner from './Inner';
+
 const ShareButton = memo(() => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { t } = useTranslation('common');
@@ -20,11 +22,14 @@ const ShareButton = memo(() => {
         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/features/AvatarWithUpload/index.tsx

@@ -4,6 +4,7 @@ import { createStyles } from 'antd-style';
 import { CSSProperties, memo } from 'react';
 
 import { useGlobalStore } from '@/store/global';
+import { imageToBase64 } from '@/utils/imageToBase64';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
 const useStyle = createStyles(
@@ -26,56 +27,33 @@ const useStyle = createStyles(
 
 interface AvatarWithUploadProps {
   compressSize?: number;
+  id?: string;
   size?: number;
   style?: CSSProperties;
 }
 
-const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40, compressSize = 128, style }) => {
-  const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
-  const { styles } = useStyle();
-
-  const handleUploadAvatar = createUploadImageHandler((avatar) => {
-    const img = new Image();
-    img.src = avatar;
-    img.addEventListener('load', () => {
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
-      let startX = 0;
-      let startY = 0;
-
-      if (img.width > img.height) {
-        startX = (img.width - img.height) / 2;
-      } else {
-        startY = (img.height - img.width) / 2;
-      }
-
-      canvas.width = compressSize;
-      canvas.height = compressSize;
-
-      ctx.drawImage(
-        img,
-        startX,
-        startY,
-        Math.min(img.width, img.height),
-        Math.min(img.width, img.height),
-        0,
-        0,
-        compressSize,
-        compressSize,
-      );
-
-      const webpBase64 = canvas.toDataURL('image/webp');
-      setSettings({ avatar: webpBase64 });
+const AvatarWithUpload = memo<AvatarWithUploadProps>(
+  ({ size = 40, compressSize = 128, style, id }) => {
+    const [avatar, setSettings] = useGlobalStore((st) => [st.settings.avatar, st.setSettings]);
+    const { styles } = useStyle();
+
+    const handleUploadAvatar = createUploadImageHandler((avatar) => {
+      const img = new Image();
+      img.src = avatar;
+      img.addEventListener('load', () => {
+        const webpBase64 = imageToBase64({ img, size: compressSize });
+        setSettings({ avatar: webpBase64 });
+      });
     });
-  });
 
-  return (
-    <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>
-    </div>
-  );
-});
+    return (
+      <div className={styles} id={id} style={{ maxHeight: size, maxWidth: size, ...style }}>
+        <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+          {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
+        </Upload>
+      </div>
+    );
+  },
+);
 
 export default AvatarWithUpload;

package/src/features/SideBar/index.tsx

@@ -12,7 +12,7 @@ export default memo(() => {
 
   return (
     <SideNav
-      avatar={<AvatarWithUpload />}
+      avatar={<AvatarWithUpload id={'avatar'} />}
       bottomActions={<BottomActions setTab={setTab} tab={tab} />}
       style={{ height: '100vh' }}
       topActions={<TopActions setTab={setTab} tab={tab} />}

package/src/locales/create.ts

@@ -7,6 +7,8 @@ import type { Namespaces } from '@/types/locale';
 
 import resources from './resources';
 
+const isDev = process.env.NODE_ENV === 'development';
+
 export const createI18nNext = (params: { namespace?: Namespaces[] | Namespaces } = {}) => {
   const { namespace } = params;
 
@@ -18,16 +20,16 @@ export const createI18nNext = (params: { namespace?: Namespaces[] | Namespaces }
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({
-      debug: process.env.NODE_ENV === 'development',
+      debug: isDev,
       defaultNS: ns,
       detection: {
         caches: [],
       },
-      fallbackLng: 'en-US',
+      fallbackLng: isDev ? 'zh-CN' : 'en-US',
       interpolation: {
         escapeValue: false,
       },
-      lng: 'en-US',
+      lng: isDev ? 'zh-CN' : 'en-US',
       ns,
       resources,
     });

package/src/locales/default/common.ts

@@ -49,6 +49,7 @@ export default {
   newAgent: '新建助手',
   noDescription: '暂无描述',
   ok: '确定',
+  password: '密码',
   pin: '置顶',
   pinOff: '取消置顶',
   regenerate: '重新生成',
@@ -62,6 +63,17 @@ export default {
   sessionList: '助手列表',
   setting: '设置',
   share: '分享',
+  shareModal: {
+    download: '下载截图',
+    imageType: '图片格式',
+    screenshot: '截图',
+    settings: '导出设置',
+    shareToShareGPT: '生成 ShareGPT 分享链接',
+    withBackground: '包含背景图片',
+    withFooter: '包含页脚',
+    withPluginInfo: '包含插件信息',
+    withSystemRole: '包含助手角色设定',
+  },
   stop: '停止',
   tab: {
     chat: '会话',

package/src/services/shareGPT.ts

@@ -1,10 +1,20 @@
 import { ShareGPTConversation } from '@/types/share';
+import { parseMarkdown } from '@/utils/parseMarkdown';
 
 const SHAREGPT_URL = 'https://sharegpt.com/api/conversations';
 
 export const genShareGPTUrl = async (conversation: ShareGPTConversation) => {
+  const items = [];
+
+  for (const item of conversation.items) {
+    items.push({
+      from: item.from,
+      value: item.from === 'gpt' ? await parseMarkdown(item.value) : item.value,
+    });
+  }
+
   const res = await fetch(SHAREGPT_URL, {
-    body: JSON.stringify(conversation),
+    body: JSON.stringify({ ...conversation, items }),
     headers: {
       'Content-Type': 'application/json',
     },

package/src/store/session/slices/chat/actions/share.ts

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
@@ -9,9 +10,45 @@ import { agentSelectors } from '../../agentConfig';
 import { sessionSelectors } from '../../session/selectors';
 import { chatSelectors } from '../selectors';
 
+interface ShareMessage {
+  from: 'human' | 'gpt';
+  value: string;
+}
+const AVATAR =
+  'data:image/webp;base64,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';
+
+const Footer: ShareMessage = {
+  from: 'gpt',
+  value: `Share from [**🤯 LobeChat**](https://github.com/lobehub/lobe-chat) - ${dayjs().format(
+    'YYYY-MM-DD',
+  )}`,
+};
+
+const PLUGIN_INFO = (plugin: {
+  apiName: string;
+  content: string;
+  identifier: string;
+}): ShareMessage => ({
+  from: 'gpt',
+  value: [
+    `**🧩 Function Calling Plugin**`,
+    `- Identifier: \`${plugin.identifier}\``,
+    `- API name: \`${plugin.apiName}\``,
+    `- Result:`,
+    ``,
+    '```json',
+    plugin.content,
+    '```',
+  ].join('\n'),
+});
+
 // const t = setNamespace('chat/share');
 export interface ShareAction {
-  shareToShareGPT: () => void;
+  shareToShareGPT: (props: {
+    avatar?: string;
+    withPluginInfo?: boolean;
+    withSystemRole?: boolean;
+  }) => void;
 }
 
 export const chatShare: StateCreator<
@@ -20,72 +57,69 @@ export const chatShare: StateCreator<
   [],
   ShareAction
 > = (set, get) => ({
-  // genShareUrl: () => {
-  //   const session = sessionSelectors.currentSession(get());
-  //   if (!session) return '';
-  //
-  //   const agent = session.config;
-  //   return genShareMessagesUrl(session.chats, agent.systemRole);
-  // },
-  shareToShareGPT: async () => {
+  shareToShareGPT: async ({ withSystemRole, withPluginInfo, avatar }) => {
     const session = sessionSelectors.currentSession(get());
     if (!session) return;
     const messages = chatSelectors.currentChats(get());
     const config = agentSelectors.currentAgentConfig(get());
+    const meta = agentSelectors.currentAgentMeta(get());
 
     const defaultMsg: ShareGPTConversation['items'] = [];
-
+    const showSystemRole = withSystemRole && !!config.systemRole;
     const shareMsgs = produce(defaultMsg, (draft) => {
-      if (!!config.systemRole) {
-        draft.push({
-          from: 'human',
-          value: `-------------- ### This is a system settings | 这是一条系统设定
-
-${config.systemRole}`,
-        });
-      }
+      draft.push({
+        from: 'gpt',
+        value: [
+          `${meta.avatar} **${meta.title}** - ${meta.description}`,
+          showSystemRole && '---',
+          showSystemRole && config.systemRole,
+        ]
+          .filter(Boolean)
+          .join('\n\n'),
+      });
 
       for (const i of messages) {
         switch (i.role) {
-          case 'user':
-          default: {
-            draft.push({ from: 'human', value: i.content });
-            break;
-          }
-
           case 'assistant': {
             draft.push({ from: 'gpt', value: i.content });
             break;
           }
           case 'function': {
-            draft.push({
-              from: 'gpt',
-              value: `-------------- ### This is a function call | 这是一次插件调用
-plugin name: ${i.plugin?.identifier}
-function call name: ${i.plugin?.apiName}
-result:
-\`\`\`json
-${i.content}
-\`\`\``,
-            });
+            if (withPluginInfo)
+              draft.push(
+                PLUGIN_INFO({
+                  apiName: i.plugin?.apiName || 'undefined',
+                  content: i.content,
+                  identifier: i.plugin?.identifier || 'undefined',
+                }),
+              );
+            break;
+          }
+          case 'user': {
+            draft.push({ from: 'human', value: i.content });
             break;
           }
         }
       }
 
-      draft.push({
-        from: 'human',
-        value: 'Share from [LobeChat](https://github.com/lobehub/lobe-chat)',
-      });
+      draft.push(Footer);
     });
 
     set({ shareLoading: true });
+
     const res = await genShareGPTUrl({
-      avatarUrl: 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp',
+      avatarUrl: avatar || AVATAR,
       items: shareMsgs,
     });
     set({ shareLoading: false });
 
     window.open(res, '_blank');
   },
+  // genShareUrl: () => {
+  //   const session = sessionSelectors.currentSession(get());
+  //   if (!session) return '';
+  //
+  //   const agent = session.config;
+  //   return genShareMessagesUrl(session.chats, agent.systemRole);
+  // },
 });

package/src/utils/imageToBase64.ts

@@ -0,0 +1,37 @@
+export const imageToBase64 = ({
+  size,
+  img,
+  type = 'image/webp',
+}: {
+  img: HTMLImageElement;
+  size: number;
+  type?: string;
+}) => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  let startX = 0;
+  let startY = 0;
+
+  if (img.width > img.height) {
+    startX = (img.width - img.height) / 2;
+  } else {
+    startY = (img.height - img.width) / 2;
+  }
+
+  canvas.width = size;
+  canvas.height = size;
+
+  ctx.drawImage(
+    img,
+    startX,
+    startY,
+    Math.min(img.width, img.height),
+    Math.min(img.width, img.height),
+    0,
+    0,
+    size,
+    size,
+  );
+
+  return canvas.toDataURL(type);
+};

package/src/utils/parseMarkdown.ts

@@ -0,0 +1,9 @@
+import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
+import remarkHtml from 'remark-html';
+
+export const parseMarkdown = async (content: string) => {
+  const file = await remark().use(remarkGfm).use(remarkHtml).process(content.trim());
+
+  return String(file);
+};