@lobehub/chat 1.27.3 → 1.28.1

package/src/features/ShareModal/index.tsx

@@ -0,0 +1,69 @@
+import { Modal, type ModalProps } from '@lobehub/ui';
+import { Segmented, SegmentedProps } from 'antd';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import ShareImage from './ShareImage';
+import ShareJSON from './ShareJSON';
+import ShareText from './ShareText';
+
+enum Tab {
+  JSON = 'json',
+  Screenshot = 'screenshot',
+  Text = 'text',
+}
+
+const ShareModal = memo<ModalProps>(({ onCancel, open }) => {
+  const [tab, setTab] = useState<Tab>(Tab.Screenshot);
+  const { t } = useTranslation('chat');
+
+  const options: SegmentedProps['options'] = useMemo(
+    () => [
+      {
+        label: t('shareModal.screenshot'),
+        value: Tab.Screenshot,
+      },
+      {
+        label: t('shareModal.text'),
+        value: Tab.Text,
+      },
+      {
+        label: 'JSON',
+        value: Tab.JSON,
+      },
+    ],
+    [],
+  );
+
+  const isMobile = useIsMobile();
+  return (
+    <Modal
+      allowFullscreen
+      centered={false}
+      footer={null}
+      maxHeight={false}
+      onCancel={onCancel}
+      open={open}
+      title={t('share', { ns: 'common' })}
+      width={1440}
+    >
+      <Flexbox gap={isMobile ? 8 : 24}>
+        <Segmented
+          block
+          onChange={(value) => setTab(value as Tab)}
+          options={options}
+          style={{ width: '100%' }}
+          value={tab}
+        />
+        {tab === Tab.Screenshot && <ShareImage />}
+        {tab === Tab.Text && <ShareText />}
+        {tab === Tab.JSON && <ShareJSON />}
+      </Flexbox>
+    </Modal>
+  );
+});
+
+export default ShareModal;

package/src/features/ShareModal/style.ts

@@ -0,0 +1,30 @@
+import { createStyles } from 'antd-style';
+
+export const useContainerStyles = createStyles(({ css, token, stylish, cx, responsive }) => ({
+  preview: cx(
+    stylish.noScrollbar,
+    css`
+      overflow: hidden scroll;
+
+      width: 100%;
+      max-height: 70dvh;
+
+      background: ${token.colorBgLayout};
+      border: 1px solid ${token.colorBorder};
+      border-radius: ${token.borderRadiusLG}px;
+
+      * {
+        pointer-events: none;
+
+        ::-webkit-scrollbar {
+          width: 0 !important;
+          height: 0 !important;
+        }
+      }
+
+      ${responsive.mobile} {
+        max-height: 40dvh;
+      }
+    `,
+  ),
+}));

package/src/locales/default/chat.ts

@@ -102,14 +102,20 @@ export default {
     tooLong: '分组名称长度需在 1-20 之内',
   },
   shareModal: {
+    copy: '复制',
     download: '下载截图',
+    downloadFile: '下载文件',
+    exportTitle: '默认标题',
     imageType: '图片格式',
+    includeTool: '包含插件消息',
+    includeUser: '包含用户消息',
     screenshot: '截图',
     settings: '导出设置',
-    shareToShareGPT: '生成 ShareGPT 分享链接',
+    text: '文本',
     withBackground: '包含背景图片',
     withFooter: '包含页脚',
     withPluginInfo: '包含插件信息',
+    withRole: '包含消息角色',
     withSystemRole: '包含助手角色设定',
   },
   stt: {

package/src/services/__tests__/share.test.ts

@@ -2,11 +2,9 @@ import { DeepPartial } from 'utility-types';
 import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { LOBE_URL_IMPORT_NAME } from '@/const/url';
-import { ShareGPTConversation } from '@/types/share';
 import { UserSettings } from '@/types/user/settings';
-import { parseMarkdown } from '@/utils/parseMarkdown';
 
-import { SHARE_GPT_URL, shareService } from '../share';
+import { shareService } from '../share';
 
 // Mock dependencies
 vi.mock('@/utils/parseMarkdown', () => ({
@@ -15,116 +13,48 @@ vi.mock('@/utils/parseMarkdown', () => ({
 
 global.fetch = vi.fn();
 
-describe('ShareGPTService', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should create and return a ShareGPT URL when fetch is successful', async () => {
-    // Arrange
-    const mockId = '123abc';
-    const conversation: ShareGPTConversation = {
-      items: [
-        { from: 'human', value: 'Hello' },
-        { from: 'gpt', value: 'Hi there!' },
-      ],
-    };
-    (parseMarkdown as Mock).mockResolvedValue('Parsed markdown');
-    (fetch as Mock).mockResolvedValue({
-      json: () => Promise.resolve({ id: mockId }),
-    });
-
-    // Act
-    const url = await shareService.createShareGPTUrl(conversation);
-
-    // Assert
-    expect(parseMarkdown).toHaveBeenCalledWith('Hi there!');
-    expect(fetch).toHaveBeenCalledWith(SHARE_GPT_URL, expect.anything());
-    expect(url).toBe(`https://shareg.pt/${mockId}`);
-  });
-
-  it('should throw an error when the fetch call fails', async () => {
-    // Arrange
-    const conversation: ShareGPTConversation = {
-      items: [{ from: 'human', value: 'Hello' }],
-    };
-    (fetch as Mock).mockRejectedValue(new Error('Network error'));
-
-    // Act & Assert
-    await expect(shareService.createShareGPTUrl(conversation)).rejects.toThrow('Network error');
-  });
-
-  it('should not parse markdown for items not from gpt', async () => {
-    // Arrange
-    const mockId = '123abc';
-    const conversation: ShareGPTConversation = {
-      items: [
-        { from: 'human', value: 'Hello' },
-        { from: 'human', value: 'How are you?' },
-      ],
-    };
-    (fetch as Mock).mockResolvedValue({
-      json: () => Promise.resolve({ id: mockId }),
-    });
-
-    // Act
-    await shareService.createShareGPTUrl(conversation);
-
-    // Assert
-    expect(parseMarkdown).not.toHaveBeenCalled();
-  });
-
-  it('should throw an error if the response does not contain an id', async () => {
-    // Arrange
-    const conversation: ShareGPTConversation = {
-      items: [{ from: 'human', value: 'Hello' }],
-    };
-    (fetch as Mock).mockResolvedValue({
-      json: () => Promise.resolve({}),
-    });
-
-    // Act & Assert
-    await expect(shareService.createShareGPTUrl(conversation)).rejects.toThrow();
-  });
+beforeEach(() => {
+  vi.clearAllMocks();
 });
-
-describe('ShareViaUrl', () => {
-  describe('createShareSettingsUrl', () => {
-    it('should create a share settings URL with the provided settings', () => {
-      const settings: DeepPartial<UserSettings> = {
-        keyVaults: {
-          openai: {
-            apiKey: 'user-key',
-          },
-        },
-      };
-      const url = shareService.createShareSettingsUrl(settings);
-      expect(url).toBe(
-        `/?${LOBE_URL_IMPORT_NAME}=%7B%22keyVaults%22:%7B%22openai%22:%7B%22apiKey%22:%22user-key%22%7D%7D%7D`,
-      );
-    });
-  });
-
-  describe('decodeShareSettings', () => {
-    it('should decode share settings from search params', () => {
-      const settings = '{"languageModel":{"openai":{"apiKey":"user-key"}}}';
-      const decodedSettings = shareService.decodeShareSettings(settings);
-      expect(decodedSettings).toEqual({
-        data: {
-          languageModel: {
+describe('ShareGPTService', () => {
+  describe('ShareViaUrl', () => {
+    describe('createShareSettingsUrl', () => {
+      it('should create a share settings URL with the provided settings', () => {
+        const settings: DeepPartial<UserSettings> = {
+          keyVaults: {
             openai: {
               apiKey: 'user-key',
             },
           },
-        },
+        };
+        const url = shareService.createShareSettingsUrl(settings);
+        expect(url).toBe(
+          `/?${LOBE_URL_IMPORT_NAME}=%7B%22keyVaults%22:%7B%22openai%22:%7B%22apiKey%22:%22user-key%22%7D%7D%7D`,
+        );
       });
     });
 
-    it('should return an error message if decoding fails', () => {
-      const settings = '%7B%22theme%22%3A%22dark%22%2C%22fontSize%22%3A16%';
-      const decodedSettings = shareService.decodeShareSettings(settings);
-      expect(decodedSettings).toEqual({
-        message: expect.any(String),
+    describe('decodeShareSettings', () => {
+      it('should decode share settings from search params', () => {
+        const settings = '{"languageModel":{"openai":{"apiKey":"user-key"}}}';
+        const decodedSettings = shareService.decodeShareSettings(settings);
+        expect(decodedSettings).toEqual({
+          data: {
+            languageModel: {
+              openai: {
+                apiKey: 'user-key',
+              },
+            },
+          },
+        });
+      });
+
+      it('should return an error message if decoding fails', () => {
+        const settings = '%7B%22theme%22%3A%22dark%22%2C%22fontSize%22%3A16%';
+        const decodedSettings = shareService.decodeShareSettings(settings);
+        expect(decodedSettings).toEqual({
+          message: expect.any(String),
+        });
       });
     });
   });

package/src/services/share.ts

@@ -1,40 +1,10 @@
 import { DeepPartial } from 'utility-types';
 
 import { LOBE_URL_IMPORT_NAME } from '@/const/url';
-import { ShareGPTConversation } from '@/types/share';
 import { UserSettings } from '@/types/user/settings';
 import { withBasePath } from '@/utils/basePath';
-import { parseMarkdown } from '@/utils/parseMarkdown';
-
-export const SHARE_GPT_URL = 'https://sharegpt.com/api/conversations';
 
 class ShareService {
-  public async createShareGPTUrl(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(SHARE_GPT_URL, {
-      body: JSON.stringify({ ...conversation, items }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-    });
-
-    const { id } = await res.json();
-
-    if (!id) throw new Error('Failed to create ShareGPT URL');
-
-    // short link to the ShareGPT post
-    return `https://shareg.pt/${id}`;
-  }
-
   /**
    * Creates a share settings URL with the provided settings.
    * @param settings - The settings object to be encoded in the URL.

package/src/store/chat/slices/share/action.test.ts

@@ -6,208 +6,17 @@ import { useChatStore } from '@/store/chat';
 import { messageMapKey } from '@/store/chat/utils/messageMapKey';
 import { ChatMessage } from '@/types/message';
 
-describe('shareSlice actions', () => {
-  let shareServiceSpy: any;
-  let windowOpenSpy;
-
-  beforeEach(() => {
-    shareServiceSpy = vi.spyOn(shareService, 'createShareGPTUrl').mockResolvedValue('test-url');
-    windowOpenSpy = vi.spyOn(window, 'open');
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  describe('shareToShareGPT', () => {
-    it('should share to ShareGPT and open a new window', async () => {
-      const { result } = renderHook(() => useChatStore());
-      const shareServiceSpy = vi.spyOn(shareService, 'createShareGPTUrl');
-      const windowOpenSpy = vi.spyOn(window, 'open');
-      const avatar = 'avatar-url';
-      const withPluginInfo = true;
-      const withSystemRole = true;
-
-      await act(async () => {
-        await result.current.shareToShareGPT({ avatar, withPluginInfo, withSystemRole });
-      });
-
-      expect(shareServiceSpy).toHaveBeenCalled();
-      expect(windowOpenSpy).toHaveBeenCalled();
-    });
-    it('should handle messages from different roles correctly', async () => {
-      // 注意：此处需要你根据实际情况模拟 chatSelectors.currentChats 和 agentSelectors 返回的数据
-      // 此外，你可能需要调整 useChatStore 的引用路径
-      const { result } = renderHook(() => useChatStore());
-      await act(async () => {
-        await result.current.shareToShareGPT({
-          withPluginInfo: true,
-          withSystemRole: true,
-        });
-      });
-      // 根据你的逻辑添加对应的expect断言
-    });
-
-    it('should not include system role information when withSystemRole is false or systemRole is undefined', async () => {
-      // 模拟不同的配置以测试这个行为
-      // 你可能需要调整 useChatStore 的引用路径
-      const { result } = renderHook(() => useChatStore());
-      await act(async () => {
-        await result.current.shareToShareGPT({
-          withSystemRole: false,
-        });
-      });
-      // 根据你的逻辑添加对应的expect断言
-    });
-
-    it('should use default avatar URL when avatar is not provided', async () => {
-      const { result } = renderHook(() => useChatStore());
-      await act(async () => {
-        await result.current.shareToShareGPT({});
-      });
-
-      expect(shareServiceSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          avatarUrl: DEFAULT_USER_AVATAR_URL,
-        }),
-      );
-    });
-
-    it('should set shareLoading to true before sharing and to false after sharing', async () => {
-      const { result } = renderHook(() => useChatStore());
-      expect(result.current.shareLoading).toBe(false);
-      await act(async () => {
-        await result.current.shareToShareGPT({});
-      });
-      expect(result.current.shareLoading).toBe(false);
-      // 注意：这里的验证可能需要你根据实际的状态管理逻辑进行调整
-    });
-
-    it('should include plugin information when withPluginInfo is true', async () => {
-      // 模拟带有插件信息的消息
-      const pluginMessage = {
-        role: 'tool',
-        content: 'plugin content',
-        plugin: {
-          type: 'default',
-          arguments: '{}',
-          apiName: 'test-api',
-          identifier: 'test-identifier',
-        },
-        id: 'abc',
-      } as ChatMessage;
-
-      act(() => {
-        useChatStore.setState({
-          messagesMap: {
-            [messageMapKey('abc')]: [pluginMessage],
-          },
-          activeId: 'abc',
-        });
-      });
-
-      const { result } = renderHook(() => useChatStore());
-      await act(async () => {
-        result.current.shareToShareGPT({ withPluginInfo: true });
-      });
-      expect(shareServiceSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          items: expect.arrayContaining([
-            expect.objectContaining({
-              from: 'gpt',
-              value: expect.stringContaining('Function Calling Plugin'),
-            }),
-          ]),
-        }),
-      );
-    });
-
-    it('should not include plugin information when withPluginInfo is false', async () => {
-      const pluginMessage = {
-        role: 'tool',
-        content: 'plugin content',
-        plugin: {
-          type: 'default',
-          arguments: '{}',
-          apiName: 'test-api',
-          identifier: 'test-identifier',
-        },
-        id: 'abc',
-      } as ChatMessage;
-
-      act(() => {
-        useChatStore.setState({
-          messagesMap: {
-            [messageMapKey('abc')]: [pluginMessage],
-          },
-          activeId: 'abc',
-        });
-      });
-
-      const { result } = renderHook(() => useChatStore());
-      await act(async () => {
-        result.current.shareToShareGPT({ withPluginInfo: false });
-      });
-      expect(shareServiceSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          items: expect.not.arrayContaining([
-            expect.objectContaining({
-              from: 'gpt',
-              value: expect.stringContaining('Function Calling Plugin'),
-            }),
-          ]),
-        }),
-      );
-    });
-
-    it('should handle messages from different roles correctly', async () => {
-      const messages = [
-        { role: 'user', content: 'user message', id: '1' },
-        { role: 'assistant', content: 'assistant message', id: '2' },
-        {
-          role: 'tool',
-          content: 'plugin content',
-          plugin: {
-            type: 'default',
-            arguments: '{}',
-            apiName: 'test-api',
-            identifier: 'test-identifier',
-          },
-          id: '3',
-        },
-      ] as ChatMessage[];
-
-      act(() => {
-        useChatStore.setState({
-          messagesMap: {
-            [messageMapKey('abc')]: messages,
-          },
-          activeId: 'abc',
-        });
-      });
+afterEach(() => {
+  vi.restoreAllMocks();
+});
 
+describe('shareSlice actions', () => {
+  describe('genShareUrl', () => {
+    it('TODO', async () => {
       const { result } = renderHook(() => useChatStore());
       await act(async () => {
-        await result.current.shareToShareGPT({
-          withPluginInfo: true,
-          withSystemRole: true,
-        });
+        await result.current.genShareUrl();
       });
-
-      expect(shareServiceSpy).toHaveBeenCalledWith(
-        expect.objectContaining({
-          items: [
-            expect.objectContaining({ from: 'gpt' }), // Agent meta info
-            expect.objectContaining({ from: 'human', value: 'user message' }),
-            expect.objectContaining({ from: 'gpt', value: 'assistant message' }),
-            expect.objectContaining({
-              from: 'gpt',
-              value: expect.stringContaining('Function Calling Plugin'),
-            }),
-            expect.objectContaining({ from: 'gpt', value: expect.stringContaining('Share from') }), // Footer
-          ],
-        }),
-      );
     });
   });
 });

package/src/store/chat/slices/share/action.ts

@@ -1,122 +1,18 @@
-import dayjs from 'dayjs';
-import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
-import { DEFAULT_USER_AVATAR_URL } from '@/const/meta';
-import { shareService } from '@/services/share';
-import { useAgentStore } from '@/store/agent';
-import { agentSelectors } from '@/store/agent/selectors';
-import { useSessionStore } from '@/store/session';
-import { sessionMetaSelectors } from '@/store/session/selectors';
-import { ShareGPTConversation } from '@/types/share';
-
-import { chatSelectors } from '../../selectors';
 import { ChatStore } from '../../store';
 
-interface ShareMessage {
-  from: 'human' | 'gpt';
-  value: string;
-}
-
-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: (props: {
-    avatar?: string;
-    withPluginInfo?: boolean;
-    withSystemRole?: boolean;
-  }) => Promise<void>;
+  genShareUrl: () => Promise<string>;
 }
 
-export const chatShare: StateCreator<ChatStore, [['zustand/devtools', never]], [], ShareAction> = (
-  set,
-  get,
-) => ({
-  shareToShareGPT: async ({ withSystemRole, withPluginInfo, avatar }) => {
-    const messages = chatSelectors.currentChats(get());
-    const config = agentSelectors.currentAgentConfig(useAgentStore.getState());
-    const meta = sessionMetaSelectors.currentAgentMeta(useSessionStore.getState());
-
-    const defaultMsg: ShareGPTConversation['items'] = [];
-    const showSystemRole = withSystemRole && !!config.systemRole;
-    const shareMsgs = produce(defaultMsg, (draft) => {
-      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 'assistant': {
-            draft.push({ from: 'gpt', value: i.content });
-            break;
-          }
-          case 'tool': {
-            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(Footer);
-    });
-
-    set({ shareLoading: true });
-
-    const res = await shareService.createShareGPTUrl({
-      avatarUrl: avatar || DEFAULT_USER_AVATAR_URL,
-      items: shareMsgs,
-    });
-    set({ shareLoading: false });
-
-    window.open(res, '_blank');
+export const chatShare: StateCreator<
+  ChatStore,
+  [['zustand/devtools', never]],
+  [],
+  ShareAction
+> = () => ({
+  genShareUrl: () => {
+    return Promise.resolve('TODO');
   },
-  // genShareUrl: () => {
-  //   const session = sessionSelectors.currentSession(get());
-  //   if (!session) return '';
-  //
-  //   const agent = session.config;
-  //   return genShareMessagesUrl(session.chats, agent.systemRole);
-  // },
 });

package/src/utils/client/exportFile.ts

@@ -0,0 +1,20 @@
+export const exportFile = (content: string, filename?: string) => {
+  // 创建一个 Blob 对象
+  const blob = new Blob([content], { type: 'plain/text' });
+
+  // 创建一个 URL 对象，用于下载
+  const url = URL.createObjectURL(blob);
+
+  // 创建一个 <a> 元素，设置下载链接和文件名
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename || 'file.txt';
+
+  // 触发 <a> 元素的点击事件，开始下载
+  document.body.append(a);
+  a.click();
+
+  // 下载完成后，清除 URL 对象
+  URL.revokeObjectURL(url);
+  a.remove();
+};