@lobehub/chat 0.80.2 → 0.82.1

package/CHANGELOG.md

@@ -2,6 +2,81 @@
 
 # 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>
+
+#### ✨ Features
+
+- **misc**: Add several analytics sdk.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add several analytics sdk, closes [#244](https://github.com/lobehub/lobe-chat/issues/244) ([65c6c93](https://github.com/lobehub/lobe-chat/commit/65c6c93))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.80.2](https://github.com/lobehub/lobe-chat/compare/v0.80.1...v0.80.2)
 
 <sup>Released on **2023-09-27**</sup>

package/docs/Analytics.zh-CN.md

@@ -0,0 +1,19 @@
+# 数据统计
+
+为更好地帮助分析 LobeChat 的用户使用情况，我们在 LobeChat 中集成了若干免费 / 开源的数据统计服务，用于收集用户的使用情况，你可以按需开启。
+
+## Vercel Analytics
+
+[Vercel Analytics](https://vercel.com/analytics) 是 Vercel 推出的一款数据分析服务，它可以帮助你收集网站的访问情况，包括访问量、访问来源、访问设备等等。
+
+由于我们推荐使用 Vercel 一键部署 LobeChat，因此我们在代码中默认集成了 Vercel Analytics，你可以通过自行打开部署项目中 \[Insights] tab，查看你的应用访问情况。
+
+Vercel Analytics 提供了 2500 次 / 月的免费 Web Analytics Events (可以理解为 PV)，对于个人部署自用的产品来说基本够用。
+
+如果你需要了解 Vercel Analytics 的详细使用教程，请查阅[Vercel Web Analytics 快速开始](https://vercel.com/docs/analytics/quickstart)
+
+如果你不需要 Vercel Analytics，你可以通过设置环境变量 `NEXT_PUBLIC_ANALYTICS_VERCEL=0` 来关闭它。
+
+## 🚧 Posthog
+
+## 🚧 Mixpanel

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

@@ -17,6 +17,10 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
   - [`PLUGINS_INDEX_URL`](#plugins_index_url)
 - [角色服务](#角色服务)
   - [`AGENTS_INDEX_URL`](#agents_index_url)
+- [数据统计](#数据统计)
+  - [Vercel Analytics](#vercel-analytics)
+  - [Mixpanel Analytics](#mixpanel-analytics)
+  - [Posthog Analytics](#posthog-analytics)
 - [开发环境](#开发环境)
   - [`DEV_API_END_PORT_URL`](#dev_api_end_port_url)
 
@@ -94,7 +98,76 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
 - 描述：LobeChat 角色市场的索引地址，如果你自行部署了角色市场的服务，可以使用该变量来覆盖默认的插件市场地址
 - 默认值：`https://chat-agents.lobehub.com`
 
-<br/>
+## 数据统计
+
+### Vercel Analytics
+
+#### `NEXT_PUBLIC_ANALYTICS_VERCEL`
+
+- 类型：可选
+- 描述：用于配置 Vercel Analytics 的环境变量，当设为 `0` 则关闭 Vercel Analytics
+- 默认值： -
+- 示例：`0`
+
+#### `NEXT_PUBLIC_VERCEL_DEBUG`
+
+- 类型：可选
+- 描述：用于开启 Vercel Analytics 的调试模式
+- 默认值： -
+- 示例：`1`
+
+### Mixpanel Analytics
+
+#### `NEXT_PUBLIC_ANALYTICS_MIXPANEL`
+
+- 类型：可选
+- 描述：用于开启 [Mixpanel Analytics][mixpanel-analytics-url] 的环境变量，设为 `1` 时开启 Mixpanel Analytics
+- 默认值： -
+- 示例：`1`
+
+#### `NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN`
+
+- 类型：可选
+- 描述：设置 Mixpanel 项目的识别 Token，可以在[这里][mixpanel-project-url]找到
+- 默认值： -
+- 示例：`60db2abae7fdd29961f4e8f91b074b3a`
+
+#### `NEXT_PUBLIC_MIXPANEL_DEBUG`
+
+- 类型：可选
+- 描述：开启 Mixpanel 的调试模式
+- 默认值： -
+- 示例：`1`
+
+### Posthog Analytics
+
+#### `NEXT_PUBLIC_ANALYTICS_POSTHOG`
+
+- 类型：可选
+- 描述：用于开启 [PostHog Analytics][posthog-analytics-url] 的环境变量，设为 `1` 时开启 PostHog Analytics
+- 默认值： -
+- 示例：`1`
+
+#### `NEXT_PUBLIC_POSTHOG_KEY`
+
+- 类型：可选
+- 描述：设置 PostHog 项目 Key
+- 默认值： -
+- 示例：`phc_xxxxxxxx`
+
+#### `NEXT_PUBLIC_POSTHOG_HOST`
+
+- 类型：可选
+- 描述：设置 PostHog 服务的部署地址，默认为官方的 SAAS 地址
+- 默认值：`https://app.posthog.com`
+- 示例：`https://example.com`
+
+#### `NEXT_PUBLIC_POSTHOG_DEBUG`
+
+- 类型：可选
+- 描述：开启 PostHog 的调试模式
+- 默认值： -
+- 示例：`1`
 
 ## 开发环境
 
@@ -106,4 +179,7 @@ LobeChat 在部署时提供了一些额外的配置项，使用环境变量进
 - 示例：`https://chat-preview.lobehub.com`
 
 [azure-api-verion-url]: https://docs.microsoft.com/zh-cn/azure/developer/javascript/api-reference/es-modules/azure-sdk/ai-translation/translationconfiguration?view=azure-node-latest#api-version
+[mixpanel-analytics-url]: https://mixpanel.com
+[mixpanel-project-url]: https://mixpanel.com/settings/project
 [openai-api-page]: https://platform.openai.com/account/api-keys
+[posthog-analytics-url]: https://posthog.com

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/next.config.mjs

@@ -41,6 +41,10 @@ const nextConfig = {
       },
     ];
   },
+  env: {
+    AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL,
+    PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL,
+  },
 };
 
 export default isProd ? withPWA(nextConfig) : nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.80.2",
+  "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,25 +78,31 @@
     "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",
     "lodash-es": "^4",
     "lucide-react": "latest",
+    "mixpanel-browser": "^2",
     "nanoid": "^5",
     "next": "^13.5.3",
     "openai": "^4",
     "polished": "^4",
+    "posthog-js": "^1",
     "react": "^18",
     "react-dom": "^18",
     "react-hotkeys-hook": "^4",
     "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",
@@ -116,6 +122,7 @@
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
     "@types/lodash-es": "^4",
+    "@types/mixpanel-browser": "^2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -135,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;