@lobehub/chat 0.80.2 → 0.82.1

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/components/Analytics/Mixpanel.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import mixpanel from 'mixpanel-browser';
+import { memo, useEffect } from 'react';
+
+import { getClientConfig } from '@/config/client';
+
+const { MIXPANEL_PROJECT_TOKEN, MIXPANEL_DEBUG } = getClientConfig();
+
+const MixpanelAnalytics = memo(() => {
+  useEffect(() => {
+    if (!MIXPANEL_PROJECT_TOKEN) return;
+
+    mixpanel.init(MIXPANEL_PROJECT_TOKEN, {
+      debug: MIXPANEL_DEBUG,
+      persistence: 'localStorage',
+      track_pageview: true,
+    });
+  }, []);
+  return null;
+});
+
+export default MixpanelAnalytics;

package/src/components/Analytics/Plausible.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import Script from 'next/script';
+import { memo } from 'react';
+
+import { getClientConfig } from '@/config/client';
+
+const { PLAUSIBLE_DOMAIN } = getClientConfig();
+
+const PlausibleAnalytics = memo(() => {
+  return (
+    PLAUSIBLE_DOMAIN && (
+      <Script data-domain={PLAUSIBLE_DOMAIN} defer src="https://plausible.io/js/script.js" />
+    )
+  );
+});
+
+export default PlausibleAnalytics;

package/src/components/Analytics/Posthog.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import posthog from 'posthog-js';
+import { FC, memo, useEffect } from 'react';
+
+import { getClientConfig } from '@/config/client';
+
+const { POSTHOG_HOST, POSTHOG_KEY, POSTHOG_DEBUG } = getClientConfig();
+
+const PostHog: FC = memo(() => {
+  useEffect(() => {
+    if (!POSTHOG_KEY) return;
+
+    posthog.init(POSTHOG_KEY, {
+      api_host: POSTHOG_HOST ?? 'https://app.posthog.com',
+      debug: POSTHOG_DEBUG,
+    });
+  }, []);
+
+  return null;
+});
+
+export default PostHog;

package/src/components/Analytics/Vercel.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { Analytics } from '@vercel/analytics/react';
+import { memo } from 'react';
+
+import { getClientConfig } from '@/config/client';
+
+const { VERCEL_DEBUG } = getClientConfig();
+
+const VercelAnalytics = memo(() => <Analytics debug={VERCEL_DEBUG} />);
+
+export default VercelAnalytics;

package/src/components/Analytics/index.tsx

@@ -1,7 +1,24 @@
-import { Analytics as VercelAnalytics } from '@vercel/analytics/react';
+import dynamic from 'next/dynamic';
+
+import { getClientConfig } from '@/config/client';
+
+const Vercel = dynamic(() => import('./Vercel'), { ssr: false });
+const Mixpanel = dynamic(() => import('./Mixpanel'), { ssr: false });
+const Plausible = dynamic(() => import('./Plausible'), { ssr: false });
+const Posthog = dynamic(() => import('./Posthog'), { ssr: false });
+
+const { ANALYTICS_VERCEL, ANALYTICS_POSTHOG, ANALYTICS_MIXPANEL, ANALYTICS_PLAUSIBLE } =
+  getClientConfig();
 
 const Analytics = () => {
-  return <VercelAnalytics />;
+  return (
+    <>
+      {ANALYTICS_VERCEL && <Vercel />}
+      {ANALYTICS_PLAUSIBLE && <Plausible />}
+      {ANALYTICS_MIXPANEL && <Mixpanel />}
+      {ANALYTICS_POSTHOG && <Posthog />}
+    </>
+  );
 };
 
 export default Analytics;

package/src/components/AppTheme/index.tsx

@@ -20,9 +20,9 @@ export interface AppThemeProps {
 
 const AppTheme = memo<AppThemeProps>(
   ({ children, defaultAppearance, defaultPrimaryColor, defaultNeutralColor }) => {
-    console.log('server:appearance', defaultAppearance);
-    console.log('server:primaryColor', defaultPrimaryColor);
-    console.log('server:neutralColor', defaultNeutralColor);
+    // console.log('server:appearance', defaultAppearance);
+    // console.log('server:primaryColor', defaultPrimaryColor);
+    // console.log('server:neutralColor', defaultNeutralColor);
     const themeMode = useGlobalStore((s) => s.settings.themeMode);
 
     const [primaryColor, neutralColor] = useGlobalStore((s) => [
@@ -31,7 +31,6 @@ const AppTheme = memo<AppThemeProps>(
     ]);
 
     useEffect(() => {
-      console.log(primaryColor);
       setCookie(LOBE_THEME_PRIMARY_COLOR, primaryColor);
     }, [primaryColor]);
 

package/src/config/client.ts

@@ -0,0 +1,46 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface ProcessEnv {
+      AGENTS_INDEX_URL?: string;
+      PLUGINS_INDEX_URL?: string;
+
+      NEXT_PUBLIC_ANALYTICS_VERCEL?: string;
+      NEXT_PUBLIC_VERCEL_DEBUG?: string;
+
+      NEXT_PUBLIC_ANALYTICS_MIXPANEL?: string;
+      NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN?: string;
+      NEXT_PUBLIC_MIXPANEL_DEBUG?: string;
+
+      NEXT_PUBLIC_ANALYTICS_PLAUSIBLE?: string;
+      NEXT_PUBLIC_PLAUSIBLE_DOMAIN?: string;
+
+      NEXT_PUBLIC_ANALYTICS_POSTHOG: string;
+      NEXT_PUBLIC_POSTHOG_KEY: string;
+      NEXT_PUBLIC_POSTHOG_HOST: string;
+      NEXT_PUBLIC_POSTHOG_DEBUG: string;
+    }
+  }
+}
+
+export const getClientConfig = () => ({
+  AGENTS_INDEX_URL: process.env.AGENTS_INDEX_URL,
+  PLUGINS_INDEX_URL: process.env.PLUGINS_INDEX_URL,
+
+  ANALYTICS_VERCEL: process.env.NEXT_PUBLIC_ANALYTICS_VERCEL !== '0',
+  VERCEL_DEBUG: process.env.NEXT_PUBLIC_VERCEL_DEBUG === '1',
+
+  ANALYTICS_PLAUSIBLE: process.env.NEXT_PUBLIC_ANALYTICS_PLAUSIBLE === '1',
+  PLAUSIBLE_DOMAIN: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
+
+  ANALYTICS_MIXPANEL: process.env.NEXT_PUBLIC_ANALYTICS_MIXPANEL === '1',
+  MIXPANEL_PROJECT_TOKEN: process.env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN,
+  MIXPANEL_DEBUG: process.env.NEXT_PUBLIC_MIXPANEL_DEBUG === '1',
+
+  ANALYTICS_POSTHOG: process.env.NEXT_PUBLIC_ANALYTICS_POSTHOG === '1',
+  POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+  POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+  POSTHOG_DEBUG: process.env.NEXT_PUBLIC_POSTHOG_DEBUG === '1',
+});

package/src/config/server.ts

@@ -1,12 +1,16 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
+
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace NodeJS {
     interface ProcessEnv {
       ACCESS_CODE?: string;
-      AZURE_API_KEY?: string;
-      AZURE_API_VERSION?: string;
+
       OPENAI_API_KEY?: string;
       OPENAI_PROXY_URL?: string;
+
+      AZURE_API_KEY?: string;
+      AZURE_API_VERSION?: string;
       USE_AZURE_OPENAI?: string;
     }
   }
@@ -19,13 +23,12 @@ export const getServerConfig = () => {
 
   return {
     ACCESS_CODE: process.env.ACCESS_CODE,
-    /* eslint-disable sort-keys-fix/sort-keys-fix */
-    AZURE_API_KEY: process.env.AZURE_API_KEY,
-    AZURE_API_VERSION: process.env.AZURE_API_VERSION,
-    /* eslint-enabled */
 
     OPENAI_API_KEY: process.env.OPENAI_API_KEY,
     OPENAI_PROXY_URL: process.env.OPENAI_PROXY_URL,
+
+    AZURE_API_KEY: process.env.AZURE_API_KEY,
+    AZURE_API_VERSION: process.env.AZURE_API_VERSION,
     USE_AZURE_OPENAI: process.env.USE_AZURE_OPENAI === '1',
   };
 };

package/src/const/url.ts

@@ -1,5 +1,6 @@
 import urlJoin from 'url-join';
 
+import { getClientConfig } from '@/config/client';
 import { localeOptions } from '@/locales/options';
 import { Locales } from '@/locales/resources';
 
@@ -13,7 +14,7 @@ export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 
 export const PLUGINS_INDEX_URL =
-  process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
+  getClientConfig().PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
 
 export const DEFAULT_LANG = 'en-US';
 
@@ -26,7 +27,8 @@ export const getPluginIndexJSON = (lang: Locales = DEFAULT_LANG, baseUrl = PLUGI
   return urlJoin(baseUrl, `index.${lang}.json`);
 };
 
-export const AGENTS_INDEX_URL = process.env.AGENTS_INDEX_URL ?? 'https://chat-agents.lobehub.com';
+export const AGENTS_INDEX_URL =
+  getClientConfig().AGENTS_INDEX_URL ?? 'https://chat-agents.lobehub.com';
 
 export const getAgentIndexJSON = (lang: Locales = DEFAULT_LANG, baseUrl = AGENTS_INDEX_URL) => {
   if (checkLang(lang)) return baseUrl;

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',
     },