@lobehub/chat 1.27.3 → 1.28.1

package/src/features/ShareModal/ShareJSON/generateMessages.test.ts

@@ -0,0 +1,135 @@
+import { describe, expect, it } from 'vitest';
+
+import { LOADING_FLAT } from '@/const/message';
+import { ChatMessage } from '@/types/message';
+
+import { generateMessages } from './generateMessages';
+
+describe('generateMessages', () => {
+  // 创建一些测试用的消息数据
+  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: 'Tool response',
+      role: 'tool',
+      createdAt: Date.now(),
+      tool_call_id: 'tool1',
+    },
+  ] as ChatMessage[];
+
+  it('should filter out loading messages', () => {
+    const result = generateMessages({
+      messages: mockMessages,
+      withSystemRole: false,
+      includeTool: false,
+      systemRole: '',
+    });
+
+    expect(result).toHaveLength(2);
+    expect(result.some((m) => m.content === LOADING_FLAT)).toBeFalsy();
+  });
+
+  it('should include system role when withSystemRole is true and systemRole is provided', () => {
+    const systemRole = 'I am a helpful assistant';
+    const result = generateMessages({
+      messages: mockMessages,
+      withSystemRole: true,
+      includeTool: false,
+      systemRole,
+    });
+
+    expect(result[0]).toEqual({
+      content: systemRole,
+      role: 'system',
+    });
+    expect(result).toHaveLength(3); // system role + 2 messages
+  });
+
+  it('should not include system role when withSystemRole is false', () => {
+    const systemRole = 'I am a helpful assistant';
+    const result = generateMessages({
+      messages: mockMessages,
+      withSystemRole: false,
+      includeTool: false,
+      systemRole,
+    });
+
+    expect(result[0].role).not.toBe('system');
+    expect(result).toHaveLength(2);
+  });
+
+  it('should include tool messages when includeTool is true', () => {
+    const result = generateMessages({
+      messages: mockMessages,
+      withSystemRole: false,
+      includeTool: true,
+      systemRole: '',
+    });
+
+    expect(result).toHaveLength(3);
+    expect(result.some((m) => m.role === 'tool')).toBeTruthy();
+    expect((result.find((m) => m.role === 'tool')! as any).tool_call_id).toBeDefined();
+  });
+
+  it('should exclude tool messages when includeTool is false', () => {
+    const result = generateMessages({
+      messages: mockMessages,
+      withSystemRole: false,
+      includeTool: false,
+      systemRole: '',
+    });
+
+    expect(result).toHaveLength(2);
+    expect(result.some((m) => m.role === 'tool')).toBeFalsy();
+  });
+
+  it('should trim message content', () => {
+    const messagesWithSpaces = [
+      {
+        id: '1',
+        content: '  Hello  ',
+        role: 'user',
+        createdAt: Date.now(),
+      },
+    ] as ChatMessage[];
+
+    const result = generateMessages({
+      messages: messagesWithSpaces,
+      withSystemRole: false,
+      includeTool: false,
+      systemRole: '',
+    });
+
+    expect(result[0].content).toBe('Hello');
+  });
+
+  it('should not include system role when systemRole is empty', () => {
+    const result = generateMessages({
+      messages: mockMessages,
+      withSystemRole: true,
+      includeTool: false,
+      systemRole: '',
+    });
+
+    expect(result).toHaveLength(2);
+    expect(result[0].role).not.toBe('system');
+  });
+});

package/src/features/ShareModal/ShareJSON/generateMessages.ts

@@ -0,0 +1,35 @@
+import { LOADING_FLAT } from '@/const/message';
+import { ChatMessage } from '@/types/message';
+
+import { FieldType } from './type';
+
+interface JSONParams extends FieldType {
+  messages: ChatMessage[];
+  systemRole: string;
+}
+export const generateMessages = ({
+  messages,
+  withSystemRole,
+  includeTool,
+  systemRole,
+}: JSONParams) => {
+  const defaultMessages = messages
+    .filter((m) => m.content !== LOADING_FLAT)
+    .filter((m) => (!includeTool ? m.role !== 'tool' : true))
+    .map((m) => ({
+      content: m.content.trim(),
+      role: m.role,
+      tool_call_id: includeTool && m.tool_call_id ? m.tool_call_id : undefined,
+      tools: includeTool && m.tools ? m.tools : undefined,
+    }));
+
+  return withSystemRole && !!systemRole
+    ? [
+        {
+          content: systemRole,
+          role: 'system',
+        },
+        ...defaultMessages,
+      ]
+    : defaultMessages;
+};

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

@@ -0,0 +1,99 @@
+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 { generateMessages } from './generateMessages';
+import { FieldType } from './type';
+
+const DEFAULT_FIELD_VALUE: FieldType = {
+  includeTool: true,
+  withSystemRole: true,
+};
+
+const ShareImage = 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.includeTool'),
+      minWidth: undefined,
+      name: 'includeTool',
+      valuePropName: 'checked',
+    },
+  ];
+
+  const systemRole = useAgentStore(agentSelectors.currentAgentSystemRole);
+  const messages = useChatStore(chatSelectors.currentChats, isEqual);
+  const data = generateMessages({ ...fieldValue, messages, systemRole });
+  const content = JSON.stringify(data, null, 2);
+
+  const topic = useChatStore(topicSelectors.currentActiveTopic, isEqual);
+  const title = topic?.title || t('shareModal.exportTitle');
+
+  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}.json`);
+            }}
+            size={'large'}
+            variant={'filled'}
+          >
+            {t('shareModal.downloadFile')}
+          </Button>
+        )}
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ShareImage;

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

@@ -0,0 +1,4 @@
+export interface FieldType {
+  includeTool: boolean;
+  withSystemRole: boolean;
+}

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

@@ -0,0 +1,16 @@
+import { Markdown } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useContainerStyles } from '../style';
+
+const Preview = memo<{ content: string }>(({ content }) => {
+  const { styles } = useContainerStyles();
+
+  return (
+    <div className={styles.preview} style={{ padding: 12 }}>
+      <Markdown>{content}</Markdown>
+    </div>
+  );
+});
+
+export default Preview;

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