@lobehub/chat 1.27.2 → 1.28.0

package/src/features/ShareModal/ShareText/index.tsx

@@ -0,0 +1,119 @@
+import { Form, type FormItemProps, Icon, copyToClipboard } from '@lobehub/ui';
+import { App, Button, Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { CopyIcon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
+import { exportFile } from '@/utils/client/exportFile';
+
+import Preview from './Preview';
+import { generateMarkdown } from './template';
+import { FieldType } from './type';
+
+const DEFAULT_FIELD_VALUE: FieldType = {
+  includeTool: true,
+  includeUser: true,
+  withRole: true,
+  withSystemRole: false,
+};
+
+const ShareText = memo(() => {
+  const [fieldValue, setFieldValue] = useState(DEFAULT_FIELD_VALUE);
+  const { t } = useTranslation(['chat', 'common']);
+
+  const { message } = App.useApp();
+  const settings: FormItemProps[] = [
+    {
+      children: <Switch />,
+      label: t('shareModal.withSystemRole'),
+      minWidth: undefined,
+      name: 'withSystemRole',
+      valuePropName: 'checked',
+    },
+    {
+      children: <Switch />,
+      label: t('shareModal.withRole'),
+      minWidth: undefined,
+      name: 'withRole',
+      valuePropName: 'checked',
+    },
+    {
+      children: <Switch />,
+      label: t('shareModal.includeUser'),
+      minWidth: undefined,
+      name: 'includeUser',
+      valuePropName: 'checked',
+    },
+    {
+      children: <Switch />,
+      label: t('shareModal.includeTool'),
+      minWidth: undefined,
+      name: 'includeTool',
+      valuePropName: 'checked',
+    },
+  ];
+
+  const [systemRole] = useAgentStore((s) => [agentSelectors.currentAgentSystemRole(s)]);
+  const messages = useChatStore(chatSelectors.currentChats, isEqual);
+  const topic = useChatStore(topicSelectors.currentActiveTopic, isEqual);
+
+  const title = topic?.title || t('shareModal.exportTitle');
+  const content = generateMarkdown({
+    ...fieldValue,
+    messages,
+    systemRole,
+    title,
+  }).replaceAll('\n\n\n', '\n');
+
+  const isMobile = useIsMobile();
+  return (
+    <Flexbox gap={16} horizontal={!isMobile}>
+      <Preview content={content} />
+      <Flexbox gap={16}>
+        <Form
+          initialValues={DEFAULT_FIELD_VALUE}
+          items={settings}
+          itemsType={'flat'}
+          onValuesChange={(_, v) => setFieldValue(v)}
+          {...FORM_STYLE}
+          itemMinWidth={320}
+        />
+        <Button
+          block
+          icon={<Icon icon={CopyIcon} />}
+          onClick={async () => {
+            await copyToClipboard(content);
+            message.success(t('copySuccess', { defaultValue: 'Copy Success', ns: 'common' }));
+          }}
+          size={'large'}
+          style={isMobile ? { bottom: 0, position: 'sticky' } : undefined}
+          type={'primary'}
+        >
+          {t('copy', { ns: 'common' })}
+        </Button>
+        {!isMobile && (
+          <Button
+            block
+            onClick={() => {
+              exportFile(content, `${title}.md`);
+            }}
+            size={'large'}
+            variant={'filled'}
+          >
+            {t('shareModal.downloadFile')}
+          </Button>
+        )}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ShareText;

package/src/features/ShareModal/ShareText/template.test.ts

@@ -0,0 +1,178 @@
+import { describe, expect, it } from 'vitest';
+
+import { LOADING_FLAT } from '@/const/message';
+import { ChatMessage } from '@/types/message';
+
+import { generateMarkdown } from './template';
+
+describe('generateMarkdown', () => {
+  // 创建测试用的消息数据
+  const mockMessages = [
+    {
+      id: '1',
+      content: 'Hello',
+      role: 'user',
+      createdAt: Date.now(),
+    },
+    {
+      id: '2',
+      content: 'Hi there',
+      role: 'assistant',
+      createdAt: Date.now(),
+    },
+    {
+      id: '3',
+      content: LOADING_FLAT,
+      role: 'assistant',
+      createdAt: Date.now(),
+    },
+    {
+      id: '4',
+      content: '{"result": "tool data"}',
+      role: 'tool',
+      createdAt: Date.now(),
+      tool_call_id: 'tool1',
+    },
+    {
+      id: '5',
+      content: 'Message with tools',
+      role: 'assistant',
+      createdAt: Date.now(),
+      tools: [{ name: 'calculator', result: '42' }],
+    },
+  ] as ChatMessage[];
+
+  const defaultParams = {
+    messages: mockMessages,
+    title: 'Chat Title',
+    includeTool: false,
+    includeUser: true,
+    withSystemRole: false,
+    withRole: false,
+    systemRole: '',
+  };
+
+  it('should generate basic markdown with title', () => {
+    const result = generateMarkdown(defaultParams);
+
+    expect(result).toContain('# Chat Title');
+    expect(result).toContain('Hello');
+    expect(result).toContain('Hi there');
+  });
+
+  it('should include system role when withSystemRole is true', () => {
+    const systemRole = 'I am a helpful assistant';
+    const result = generateMarkdown({
+      ...defaultParams,
+      withSystemRole: true,
+      systemRole,
+    });
+
+    expect(result).toContain('````md\nI am a helpful assistant\n````');
+  });
+
+  it('should not include system role when withSystemRole is false', () => {
+    const systemRole = 'I am a helpful assistant';
+    const result = generateMarkdown({
+      ...defaultParams,
+      withSystemRole: false,
+      systemRole,
+    });
+
+    expect(result).not.toContain('```\nI am a helpful assistant\n```');
+  });
+
+  it('should add role labels when withRole is true', () => {
+    const result = generateMarkdown({
+      ...defaultParams,
+      withRole: true,
+    });
+
+    expect(result).toContain('##### User:');
+    expect(result).toContain('##### Assistant:');
+  });
+
+  it('should not add role labels when withRole is false', () => {
+    const result = generateMarkdown({
+      ...defaultParams,
+      withRole: false,
+    });
+
+    expect(result).not.toContain('##### User:');
+    expect(result).not.toContain('##### Assistant:');
+  });
+
+  it('should include tool messages when includeTool is true', () => {
+    const result = generateMarkdown({
+      ...defaultParams,
+      includeTool: true,
+      withRole: true,
+    });
+
+    expect(result).toContain('##### Tools Calling:');
+    expect(result).toContain('```json\n{"result": "tool data"}\n```');
+  });
+
+  it('should exclude tool messages when includeTool is false', () => {
+    const result = generateMarkdown({
+      ...defaultParams,
+      includeTool: false,
+    });
+
+    expect(result).not.toContain('{"result": "tool data"}');
+  });
+
+  it('should exclude user messages when includeUser is false', () => {
+    const result = generateMarkdown({
+      ...defaultParams,
+      includeUser: false,
+    });
+
+    expect(result).not.toContain('Hello');
+    expect(result).toContain('Hi there');
+  });
+
+  it('should filter out loading messages', () => {
+    const result = generateMarkdown(defaultParams);
+
+    expect(result).not.toContain(LOADING_FLAT);
+  });
+
+  it('should include tools data when includeTool is true', () => {
+    const result = generateMarkdown({
+      ...defaultParams,
+      includeTool: true,
+    });
+
+    expect(result).toContain('"name": "calculator"');
+    expect(result).toContain('"result": "42"');
+  });
+
+  it('should handle empty messages array', () => {
+    const result = generateMarkdown({
+      ...defaultParams,
+      messages: [],
+    });
+
+    expect(result).toContain('# Chat Title');
+    // Should not throw error and should contain at least the title
+  });
+
+  it('should handle messages with special characters', () => {
+    const messagesWithSpecialChars = [
+      {
+        id: '1',
+        content: '**Bold** *Italic* `Code`',
+        role: 'user',
+        createdAt: Date.now(),
+      },
+    ] as ChatMessage[];
+
+    const result = generateMarkdown({
+      ...defaultParams,
+      messages: messagesWithSpecialChars,
+    });
+
+    expect(result).toContain('**Bold** *Italic* `Code`');
+  });
+});

package/src/features/ShareModal/ShareText/template.ts

@@ -0,0 +1,79 @@
+import { template } from 'lodash-es';
+
+import { LOADING_FLAT } from '@/const/message';
+import { FieldType } from '@/features/ShareModal/ShareText/type';
+import { ChatMessage } from '@/types/message';
+
+const markdownTemplate = template(
+  `# {{title}}
+
+<% if (systemRole) { %>
+\`\`\`\`md
+{{systemRole}}
+\`\`\`\`
+<% } %>
+
+<% messages.forEach(function(chat) { %>
+
+<% if (withRole) { %>
+
+<% if (chat.role === 'user') { %>
+##### User:
+<% } else if (chat.role === 'assistant') { %>
+##### Assistant:
+<% } else if (chat.role === 'tool') { %>
+##### Tools Calling:
+<% } %>
+
+<% } %>
+
+<% if (chat.role === 'tool') { %>
+\`\`\`json
+{{chat.content}}
+\`\`\`
+<% } else { %>
+
+{{chat.content}}
+
+<% if (includeTool && chat.tools) { %>
+
+\`\`\`json
+{{JSON.stringify(chat.tools, null, 2)}}
+\`\`\`
+
+<% } %>
+<% } %>
+
+<% }); %>
+`,
+  {
+    evaluate: /<%([\S\s]+?)%>/g,
+    interpolate: /{{([\S\s]+?)}}/g,
+  },
+);
+
+interface MarkdownParams extends FieldType {
+  messages: ChatMessage[];
+  systemRole: string;
+  title: string;
+}
+
+export const generateMarkdown = ({
+  messages,
+  title,
+  includeTool,
+  includeUser,
+  withSystemRole,
+  withRole,
+  systemRole,
+}: MarkdownParams) =>
+  markdownTemplate({
+    includeTool,
+    messages: messages
+      .filter((m) => m.content !== LOADING_FLAT)
+      .filter((m) => (!includeUser ? m.role !== 'user' : true))
+      .filter((m) => (!includeTool ? m.role !== 'tool' : true)),
+    systemRole: withSystemRole ? systemRole : undefined,
+    title,
+    withRole,
+  });

package/src/features/ShareModal/ShareText/type.ts

@@ -0,0 +1,6 @@
+export type FieldType = {
+  includeTool: boolean;
+  includeUser: boolean;
+  withRole: boolean;
+  withSystemRole: boolean;
+};

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),
+        });
       });
     });
   });