@lobehub/chat 1.27.2 → 1.28.0

package/locales/zh-CN/chat.json

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

package/locales/zh-CN/models.json

@@ -320,6 +320,9 @@
   "claude-2.1": {
     "description": "Claude 2 为企业提供了关键能力的进步，包括业界领先的 200K token 上下文、大幅降低模型幻觉的发生率、系统提示以及一个新的测试功能：工具调用。"
   },
+  "claude-3-5-haiku-20241022": {
+    "description": "Claude 3.5 Haiku 是 Anthropic 最快的下一代模型。与 Claude 3 Haiku 相比，Claude 3.5 Haiku 在各项技能上都有所提升，并在许多智力基准测试中超越了上一代最大的模型 Claude 3 Opus。"
+  },
   "claude-3-5-sonnet-20240620": {
     "description": "Claude 3.5 Sonnet 提供了超越 Opus 的能力和比 Sonnet 更快的速度，同时保持与 Sonnet 相同的价格。Sonnet 特别擅长编程、数据科学、视觉处理、代理任务。"
   },

package/locales/zh-TW/chat.json

@@ -100,14 +100,20 @@
     "tooLong": "分組名稱長度需在 1-20 之內"
   },
   "shareModal": {
+    "copy": "複製",
     "download": "下載截圖",
+    "downloadFile": "下載檔案",
+    "exportTitle": "預設標題",
     "imageType": "圖片格式",
+    "includeTool": "包含插件訊息",
+    "includeUser": "包含使用者訊息",
     "screenshot": "截圖",
     "settings": "導出設置",
-    "shareToShareGPT": "生成 ShareGPT 分享鏈接",
+    "text": "文本",
     "withBackground": "包含背景圖片",
     "withFooter": "包含頁腳",
     "withPluginInfo": "包含插件信息",
+    "withRole": "包含訊息角色",
     "withSystemRole": "包含助手角色設定"
   },
   "stt": {

package/locales/zh-TW/models.json

@@ -320,6 +320,9 @@
   "claude-2.1": {
     "description": "Claude 2 為企業提供了關鍵能力的進步，包括業界領先的 200K token 上下文、大幅降低模型幻覺的發生率、系統提示以及一個新的測試功能：工具調用。"
   },
+  "claude-3-5-haiku-20241022": {
+    "description": "Claude 3.5 Haiku 是 Anthropic 最快的下一代模型。與 Claude 3 Haiku 相比，Claude 3.5 Haiku 在各項技能上都有所提升，並在許多智力基準測試中超越了上一代最大的模型 Claude 3 Opus。"
+  },
   "claude-3-5-sonnet-20240620": {
     "description": "Claude 3.5 Sonnet 提供了超越 Opus 的能力和比 Sonnet 更快的速度，同時保持與 Sonnet 相同的價格。Sonnet 特別擅長編程、數據科學、視覺處理、代理任務。"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.27.2",
+  "version": "1.28.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/chat/(workspace)/features/ShareButton/index.tsx

@@ -11,7 +11,8 @@ import { useChatStore } from '@/store/chat';
 
 import { useWorkspaceModal } from '../useWorkspaceModal';
 
-const ShareModal = dynamic(() => import('./ShareModal'));
+const ShareModal = dynamic(() => import('@/features/ShareModal'));
+
 interface ShareButtonProps {
   mobile?: boolean;
   open?: boolean;

package/src/config/modelProviders/anthropic.ts

@@ -3,6 +3,23 @@ import { ModelProviderCard } from '@/types/llm';
 // ref: https://docs.anthropic.com/en/docs/about-claude/models#model-names
 const Anthropic: ModelProviderCard = {
   chatModels: [
+    {
+      description:
+        'Claude 3.5 Haiku 是 Anthropic 最快的下一代模型。与 Claude 3 Haiku 相比，Claude 3.5 Haiku 在各项技能上都有所提升，并在许多智力基准测试中超越了上一代最大的模型 Claude 3 Opus。',
+      displayName: 'Claude 3.5 Haiku',
+      enabled: true,
+      functionCall: true,
+      id: 'claude-3-5-haiku-20241022',
+      maxOutput: 8192,
+      pricing: {
+        cachedInput: 0.1,
+        input: 1,
+        output: 5,
+        writeCacheInput: 1.25,
+      },
+      releasedAt: '2024-11-05',
+      tokens: 200_000,
+    },
     {
       description:
         'Claude 3.5 Sonnet 提供了超越 Opus 的能力和比 Sonnet 更快的速度，同时保持与 Sonnet 相同的价格。Sonnet 特别擅长编程、数据科学、视觉处理、代理任务。',
@@ -42,7 +59,6 @@ const Anthropic: ModelProviderCard = {
       description:
         'Claude 3 Haiku 是 Anthropic 的最快且最紧凑的模型，旨在实现近乎即时的响应。它具有快速且准确的定向性能。',
       displayName: 'Claude 3 Haiku',
-      enabled: true,
       functionCall: true,
       id: 'claude-3-haiku-20240307',
       maxOutput: 4096,
@@ -58,7 +74,6 @@ const Anthropic: ModelProviderCard = {
       description:
         'Claude 3 Sonnet 在智能和速度方面为企业工作负载提供了理想的平衡。它以更低的价格提供最大效用，可靠且适合大规模部署。',
       displayName: 'Claude 3 Sonnet',
-      enabled: true,
       functionCall: true,
       id: 'claude-3-sonnet-20240229',
       maxOutput: 4096,

package/src/{app/(main)/chat/(workspace)/features/ShareButton → features/ShareModal/ShareImage}/Preview.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import pkg from '@/../package.json';
+import PluginTag from '@/app/(main)/chat/(workspace)/features/PluginTag';
 import { ProductLogo } from '@/components/Branding';
 import ChatList from '@/features/Conversation/components/ChatList';
 import { useAgentStore } from '@/store/agent';
@@ -12,7 +12,8 @@ import { agentSelectors } from '@/store/agent/selectors';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors, sessionSelectors } from '@/store/session/selectors';
 
-import PluginTag from '../PluginTag';
+import pkg from '../../../../package.json';
+import { useContainerStyles } from '../style';
 import { useStyles } from './style';
 import { FieldType } from './type';
 
@@ -32,12 +33,13 @@ const Preview = memo<FieldType & { title?: string }>(
 
     const { t } = useTranslation('chat');
     const { styles } = useStyles(withBackground);
+    const { styles: containerStyles } = useContainerStyles();
 
     const displayTitle = isInbox ? t('inbox.title') : title;
     const displayDesc = isInbox ? t('inbox.desc') : description;
 
     return (
-      <div className={styles.preview}>
+      <div className={containerStyles.preview}>
         <div className={withBackground ? styles.background : undefined} id={'preview'}>
           <Flexbox className={styles.container} gap={16}>
             <div className={styles.header}>

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

@@ -0,0 +1,103 @@
+import { Form, type FormItemProps } from '@lobehub/ui';
+import { Button, Segmented, SegmentedProps, Switch } from 'antd';
+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 Preview from './Preview';
+import { FieldType, ImageType } from './type';
+import { useScreenshot } from './useScreenshot';
+
+export const imageTypeOptions: SegmentedProps['options'] = [
+  {
+    label: 'JPG',
+    value: ImageType.JPG,
+  },
+  {
+    label: 'PNG',
+    value: ImageType.PNG,
+  },
+  {
+    label: 'SVG',
+    value: ImageType.SVG,
+  },
+  {
+    label: 'WEBP',
+    value: ImageType.WEBP,
+  },
+];
+
+const DEFAULT_FIELD_VALUE: FieldType = {
+  imageType: ImageType.JPG,
+  withBackground: true,
+  withFooter: true,
+  withPluginInfo: false,
+  withSystemRole: false,
+};
+
+const ShareImage = memo(() => {
+  const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
+  const { t } = useTranslation('chat');
+  const { loading, onDownload, title } = useScreenshot(fieldValue.imageType);
+
+  const settings: FormItemProps[] = [
+    {
+      children: <Switch />,
+      label: t('shareModal.withSystemRole'),
+      minWidth: undefined,
+      name: 'withSystemRole',
+      valuePropName: 'checked',
+    },
+    {
+      children: <Switch />,
+      label: t('shareModal.withBackground'),
+      minWidth: undefined,
+      name: 'withBackground',
+      valuePropName: 'checked',
+    },
+    {
+      children: <Switch />,
+      label: t('shareModal.withFooter'),
+      minWidth: undefined,
+      name: 'withFooter',
+      valuePropName: 'checked',
+    },
+    {
+      children: <Segmented options={imageTypeOptions} />,
+      label: t('shareModal.imageType'),
+      minWidth: undefined,
+      name: 'imageType',
+    },
+  ];
+
+  const isMobile = useIsMobile();
+  return (
+    <Flexbox gap={16} horizontal={!isMobile}>
+      <Preview title={title} {...fieldValue} />
+      <Flexbox gap={16}>
+        <Form
+          initialValues={DEFAULT_FIELD_VALUE}
+          items={settings}
+          itemsType={'flat'}
+          onValuesChange={(_, v) => setFieldValue(v)}
+          {...FORM_STYLE}
+        />
+        <Button
+          block
+          loading={loading}
+          onClick={onDownload}
+          size={'large'}
+          style={isMobile ? { bottom: 0, position: 'sticky' } : undefined}
+          type={'primary'}
+        >
+          {t('shareModal.download')}
+        </Button>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default ShareImage;

package/src/{app/(main)/chat/(workspace)/features/ShareButton → features/ShareModal/ShareImage}/style.ts

@@ -2,7 +2,7 @@ import { createStyles } from 'antd-style';
 
 import { imageUrl } from '@/const/url';
 
-export const useStyles = createStyles(({ css, token, stylish, cx }, withBackground: boolean) => ({
+export const useStyles = createStyles(({ css, token, cx }, withBackground: boolean) => ({
   background: css`
     padding: 24px;
 
@@ -33,28 +33,6 @@ export const useStyles = createStyles(({ css, token, stylish, cx }, withBackgrou
     background: ${token.colorBgContainer};
     border-block-end: 1px solid ${token.colorBorder};
   `,
-  preview: cx(
-    stylish.noScrollbar,
-    css`
-      overflow: hidden scroll;
-
-      width: 100%;
-      max-height: 40dvh;
-
-      background: ${token.colorBgLayout};
-      border: 1px solid ${token.colorBorder};
-      border-radius: ${token.borderRadiusLG}px;
-
-      * {
-        pointer-events: none;
-
-        ::-webkit-scrollbar {
-          width: 0 !important;
-          height: 0 !important;
-        }
-      }
-    `,
-  ),
   role: css`
     margin-block-start: 12px;
     padding-block-start: 12px;

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

@@ -0,0 +1,18 @@
+import { Highlighter } 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}>
+      <Highlighter language={'json'} wrap>
+        {content}
+      </Highlighter>
+    </div>
+  );
+});
+
+export default Preview;

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;