@fe-free/core 4.1.40 → 4.1.42

package/src/markdown/markdown.stories.tsx

@@ -1,5 +1,6 @@
-import { Markdown } from '@fe-free/core';
+import { Markdown } from '@fe-free/ai';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useEffect, useState } from 'react';
 
 const meta: Meta<typeof Markdown> = {
   title: '@fe-free/core/Markdown',
@@ -9,11 +10,29 @@ const meta: Meta<typeof Markdown> = {
 
 export default meta;
 
+function StreamingComponent(args) {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    setInterval(() => {
+      setIndex((value) => value + 1);
+    }, 50);
+  }, []);
+
+  return (
+    <Markdown
+      {...args}
+      content={args.content.slice(0, index)}
+      isStreaming={index !== args.content.length}
+    />
+  );
+}
+
 type Story = StoryObj<typeof Markdown>;
 
 export const Default: Story = {
   args: {
-    children: `
+    content: `
 # Markdown 组件示例
 
 这是一个 **Markdown** 组件的基本用法示例。
@@ -88,439 +107,78 @@ function hello(name: string): string {
   },
 };
 
-export const DeepSeek: Story = {
+export const Streaming: Story = {
+  render: StreamingComponent,
   args: {
-    children: `<think>
-好的，我现在需要处理用户的问题。用户一开始用中文打招呼“你好”，然后我的回应应该遵循之前设定的角色和技能。首先，我需要确认用户是否是前端工程师求职者，或者他们需要哪方面的帮助。根据角色设定，我应该先了解他们的具体情况，比如技术栈、工作年限、项目经验和目标城市。
-
-用户可能没有详细说明他们的需求，所以我需要引导他们提供更多信息。根据技能1中的步骤，我应该先询问他们的技术栈、工作年限、项目经验和目标城市。同时，我需要保持友好和专业，确保用户感到被理解和支持。
-
-另外，用户可能对生成卡通头像感兴趣，但根据限制，我需要先处理求职相关的问题，再提及头像生成。因此，在初始回复中，我应该先专注于求职建议，然后在适当的时候提到头像生成选项。
-
-我需要确保回复符合Markdown格式，使用适当的标题和列表结构，使信息清晰易读。同时，避免使用复杂术语，保持语言简洁明了，适合不同水平的用户。
-
-现在，我需要按照模板组织回复，先欢迎用户，然后分步骤询问必要的信息，最后提到头像生成的选项。确保每个问题都明确，帮助用户逐步提供所需的信息，以便我能够提供有针对性的建议。
-</think>
-
-你好！欢迎来到前端工程师求职助手。为了提供更有针对性的建议，请告诉我以下信息：
-
-### 1. 你的技术栈
-- 是否掌握核心三件套（HTML/CSS/JavaScript）？
-- 熟悉哪些前端框架（React/Vue/Angular等）？
-- 是否有Node.js/Webpack/Vite等工程化经验？
-
-### 2. 工作年限
-- 应届毕业生/1-3年经验/3-5年经验/5年以上？
-
-### 3. 项目亮点
-- 请用一句话描述你最具代表性的项目（如：主导开发日均UV百万级的电商前端架构）
+    content: `
+# Markdown 组件示例
 
-### 4. 目标城市
-- 期望在哪个城市发展？
+这是一个 **Markdown** 组件的基本用法示例。
 
 ---
 
-💡 **小贴士**：需要生成专属前端工程师卡通头像吗？可同步告知：
-1. 意向职位（如：高级前端开发）
-2. 工作年限
-3. 目标城市
-
-我会根据你的信息提供：求职策略+技术提升路径+简历优化建议+面试指南+定制头像（如需）
-    `,
-  },
-};
-
-export const DeepSeekPending: Story = {
-  args: {
-    children: `<think>
-好的，我现在需要处理用户的问题。用户一开始用中文打招呼“你好”，然后我的回应应该遵循之前设定的角色和技能。首先，我需要确认用户是否是前端工程师求职者，或者他们需要哪方面的帮助。根据角色设定，我应该先了解他们的具体情况，比如技术栈、工作年限、项目经验和目标城市。
-
-    `,
-  },
-};
-
-export const Chart: Story = {
-  args: {
-    children: `
-## 折线图示例
-
-\`\`\`chart
-{
-  "data": {
-    "columns": ["time", "amount"],
-    "rows": [
-      ["2025-06-03", 18.23],
-      ["2025-06-10", 112.2],
-      ["2025-06-23", 10],
-      ["2025-07-01", 85.5],
-      ["2025-07-15", 156.8]
-    ]
-  },
-  "chart": {
-    "chart_type": "line",
-    "x_field": "time",
-    "y_field": "amount",
-    "title": "张三金额变化趋势图"
-  }
-}
-\`\`\`
-
-多条折线
-
-\`\`\`chart
-{
-  "data": {
-    "columns": ["quarter", "L'Oreal", "P&G", "Proya"],
-    "rows": [
-      ["FY23-Q4/23-Q2", 8, 7, null],
-      ["FY24-Q1/23-Q3", 7, 6, null],
-      ["FY24-Q2/23-Q4", 4, 3, null],
-      ["FY24-Q3/24-Q1", 3, null, null],
-      ["FY24-Q4/24-Q2", null, null, null],
-      ["FY25-Q1/24-Q34",null,null,null]
-    ]
-  },
-  "chart": {
-    "chart_type": "line",
-    "x_field": "quarter",
-    "y_field": ["L'Oreal", "P&G","Proya"],
-    "title": "欧莱雅、宝洁及珀莱雅增长率变化趋势"
-  }
-}
-\`\`\`
-
-## 柱状图示例
-
-\`\`\`chart
-{
-  "data": {
-    "columns": ["time", "amount"],
-    "rows": [
-      ["2025-06-03", 18.23],
-      ["2025-06-10", 112.2],
-      ["2025-06-23", 10],
-      ["2025-07-01", 85.5],
-      ["2025-07-15", 156.8]
-    ]
-  },
-  "chart": {
-    "chart_type": "bar",
-    "x_field": "time",
-    "y_field": "amount",
-    "title": "张三金额变化趋势图"
-  }
-}
-\`\`\`
+## 支持的特性
 
+- 标题
+- 列表
 
-## 饼图示例
+---
 
-\`\`\`chart
-{
-  "data": {
-    "columns": ["category", "sales"],
-    "rows": [
-      ["电子产品", 45],
-      ["服装", 30],
-      ["食品", 15],
-      ["家居", 10]
-    ]
-  },
-  "chart": {
-    "chart_type": "pie",
-    "angle_field": "sales",
-    "color_field": "category",
-    "title": "销售品类分布"
-  }
-}
-\`\`\`
+## 代码高亮
 
-## 散点图示例
-
-\`\`\`chart
-{
-  "data": {
-    "columns": ["width", "height"],
-    "rows": [
-      [100, 200],
-      [300, 400],
-      [500, 600]
-    ]
-  },
-  "chart": {
-    "chart_type": "scatter",
-    "x_field": "width",
-    "y_field": "height",
-    "title": "散点图示例"
-  }
+\`\`\`typescript
+function hello(name: string): string {
+  return \`Hello, \${name}!\`;
 }
 \`\`\`
 
-## 错误处理示例
-
-### JSON 解析错误
-
-\`\`\`chart
-{
-  "data": {
-    "columns": ["time", "amount"],
-    "rows": [
-      ["2025-06-03", 18.23],
-      ["2025-06-10", 112.2]
-    ]
-  },
-  "chart": {
-    "chart_type": "line",
-    "x_field": "time",
-    "y_field": "amount",
-    "title": "张三金额变化趋势图"
-  }
-\`\`\`
 
-### 字段不存在错误
-
-\`\`\`chart
-{
-  "data": {
-    "columns": ["time", "amount"],
-    "rows": [
-      ["2025-06-03", 18.23],
-      ["2025-06-10", 112.2]
-    ]
-  },
-  "chart": {
-    "chart_type": "line",
-    "x_field": "nonexistent_field",
-    "y_field": "amount",
-    "title": "张三金额变化趋势图"
-  }
-}
-\`\`\`
+## 表格
 
-### 不支持的图表类型
+| 姓名   | 年龄 | 城市   | 职业       | 邮箱                  | 状态   |状态   |状态   |状态   |
+| ------ | ---- | ------ | ---------- | --------------------- | ------ |------ |------ |------ |
+| 张三   | 28   | 北京   | 前端开发   | zhangsan@example.com  | 在职   |
+| 李四   | 32   | 上海   | 产品经理   | lisi@example.com      | 离职   |
+| 王五   | 24   | 广州   | 设计师     | wangwu@example.com    | 在职   |
+| 赵六   | 29   | 深圳   | 测试工程师 | zhaoliu@example.com   | 实习   |
 
-\`\`\`chart
-{
-  "data": {
-    "columns": ["time", "amount"],
-    "rows": [
-      ["2025-06-03", 18.23],
-      ["2025-06-10", 112.2]
-    ]
-  },
-  "chart": {
-    "chart_type": "some_chart_type",
-    "x_field": "time",
-    "y_field": "amount",
-    "title": "张三金额变化趋势图"
-  }
-}
-\`\`\`
+---
 `,
   },
 };
 
-export const HMChart: Story = {
+export const Latex: Story = {
   args: {
-    children: `
-类型定义见：https://github.com/frontend-free/free/blob/main/packages/core/src/markdown/hm_chart.tsx
-
-## 折线图示例
-
-\`\`\`hmchart
-{
-  "title": "趋势变化",
-  "type": "line",
-  "data": [
-    { "year": "1991", "value": 3 },
-    { "year": "1992", "value": 4 },
-    { "year": "1993", "value": 3.5 }
-  ],
-  "xField": "year",
-  "yField": "value"
-}
-\`\`\`
-
-\`\`\`hmchart
-{
-  "title": "多条趋势变化",
-  "type": "line",
-  "data": [
-    { "year": "1991", "type": "A", "value": 3 },
-    { "year": "1991", "type": "B", "value": 4 },
-    { "year": "1992", "type": "A", "value": 4 },
-    { "year": "1992", "type": "B", "value": 4.5 },
-    { "year": "1993", "type": "A", "value": 3.5 },
-    { "year": "1993", "type": "B", "value": 6 }
-  ],
-  "xField": "year",
-  "yField": "value",
-  "seriesField": "type"
-}
-\`\`\`
-
-\`\`\`hmchart
-{
-  "title": "柱状图",
-  "type": "bar",
-  "data": [
-    { "year": "1991", "value": 3 },
-    { "year": "1992", "value": 4 },
-    { "year": "1993", "value": 3.5 }
-  ],
-  "xField": "year",
-  "yField": "value"
-}
-\`\`\`
-
-\`\`\`hmchart
-{
-  "title": "多条柱状图",
-  "type": "bar",
-  "data": [
-    { "year": "1991", "type": "A", "value": 3 },
-    { "year": "1991", "type": "B", "value": 4 },
-    { "year": "1992", "type": "A", "value": 4 },
-    { "year": "1992", "type": "B", "value": 4.5 },
-    { "year": "1993", "type": "A", "value": 3.5 },
-    { "year": "1993", "type": "B", "value": 6 }
-  ],
-  "xField": "year",
-  "yField": "value",
-  "seriesField": "type"
-}
-\`\`\`
-
-\`\`\`hmchart
-{
-  "title": "饼图",
-  "type": "pie",
-  "data": [
-    { "year": "1991", "value": 3 },
-    { "year": "1992", "value": 4 },
-    { "year": "1993", "value": 3.5 }
-  ],
-  "angleField": "value",
-  "colorField": "year"
-}
-\`\`\`
-
-\`\`\`hmchart
-{
-  "title": "散点图示例",
-  "type": "scatter",
-  "data": [
-    {
-        "gender": "female",
-        "height": 161.2,
-        "weight": 51.6
-    },
-    {
-        "gender": "male",
-        "height": 167.5,
-        "weight": 59
-    },
-    {
-        "gender": "female",
-        "height": 159.5,
-        "weight": 49.2
-    },
-    {
-        "gender": "male",
-        "height": 157,
-        "weight": 63
-    },
-    {
-        "gender": "male",
-        "height": 155.8,
-        "weight": 53.6
-    },
-    {
-        "gender": "female",
-        "height": 170,
-        "weight": 59
-    },
-    {
-        "gender": "female",
-        "height": 159.1,
-        "weight": 47.6
-    },
-    {
-        "gender": "female",
-        "height": 166,
-        "weight": 69.8
-    },
-    {
-        "gender": "female",
-        "height": 176.2,
-        "weight": 66.8
-    },
-    {
-        "gender": "female",
-        "height": 160.2,
-        "weight": 75.2
-    },
-    {
-        "gender": "female",
-        "height": 172.5,
-        "weight": 55.2
-    },
-    {
-        "gender": "female",
-        "height": 170.9,
-        "weight": 54.2
-    },
-    {
-        "gender": "female",
-        "height": 172.9,
-        "weight": 62.5
-    },
-    {
-        "gender": "male",
-        "height": 153.4,
-        "weight": 42
-    },
-    {
-        "gender": "male",
-        "height": 160,
-        "weight": 50
-    }
-  ],
-  "xField": "height",
-  "yField": "weight",
-  "colorField": "gender"
-}
-\`\`\`
+    content: `
+### Latex
+inline standard: $\\frac{df}{dt}$ \n
+block standard：\n
+$$
+\\Delta t' = \\frac{\\Delta t}{\\sqrt{1 - \\frac{v^2}{c^2}}}
+$$
+
+inline: \\(\\frac{df}{dt}\\)  \n
+block: \n
+\\[
+\\Delta t' = \\frac{\\Delta t}{\\sqrt{1 - \\frac{v^2}{c^2}}}
+\\]
 
 `,
   },
 };
 
-export const Knowledge: Story = {
+export const Think: Story = {
+  render: StreamingComponent,
   args: {
-    children: `
-   根据检索结果，知识库中包含多个酒店的信息。[^knowledge:1-0]例如：\n\n- **杭州城中香格里拉**：位于杭州长寿路6号，提供多种餐饮选择，包括非凡酒廊、美食汇、城中啤酒餐吧以及城中小馆中餐厅[^knowledge:0-0]。\n- **凯恩斯香格里拉**：位于澳大利亚Pierpoint Road Cairns, Queensland，提供纯正澳式待客之道，靠近马林码头与珊瑚海交汇处[^knowledge:2-0]。\n- **马斯喀特 Al Husn 香格里拉**：位于阿曼P.O. Box 644, Muscat 100，是一个成人专享的世外桃源，拥有私人海滩和海湾[^knowledge:3-0]。\n\n此外，还有一家未直接命名但详细描述了其服务特色的豪华酒店，该酒店以江南丝绸商贸之家为灵感设计，提供独特的入住体验，包括定制贴心体验、精致餐饮及新颖的康养项目[^knowledge:4-0][^knowledge:14-0]。
-    `,
-    knowledgeRefs: [
-      { id: '0-0', title: '杭州城中香格里拉' },
-      { id: '1-0', title: '巴拉巴拉酒店' },
-      { id: '2-0', title: '凯恩斯香格里拉' },
-      { id: '3-0', title: '马斯喀特 Al Husn 香格里拉' },
-      { id: '4-0', title: '江南丝绸商贸之家' },
-    ],
-    onKnowledgeRef: (id?: string) => {
-      console.log('onKnowledgeRef', id);
-    },
-  },
-};
-
-export const KnowledgeWithoutData: Story = {
-  args: {
-    children: `
-   根据检索结果，知识库中包含多个酒店的信息。[^knowledge:1-0]例如：\n\n- **杭州城中香格里拉**：位于杭州长寿路6号，提供多种餐饮选择，包括非凡酒廊、美食汇、城中啤酒餐吧以及城中小馆中餐厅[^knowledge:0-0]。\n- **凯恩斯香格里拉**：位于澳大利亚Pierpoint Road Cairns, Queensland，提供纯正澳式待客之道，靠近马林码头与珊瑚海交汇处[^knowledge:2-0]。\n- **马斯喀特 Al Husn 香格里拉**：位于阿曼P.O. Box 644, Muscat 100，是一个成人专享的世外桃源，拥有私人海滩和海湾[^knowledge:3-0]。\n\n此外，还有一家未直接命名但详细描述了其服务特色的豪华酒店，该酒店以江南丝绸商贸之家为灵感设计，提供独特的入住体验，包括定制贴心体验、精致餐饮及新颖的康养项目[^knowledge:4-0][^knowledge:14-0]。
-    `,
-    onKnowledgeRef: (id?: string) => {
-      console.log('onKnowledgeRef', id);
-    },
+    content: `
+<think>Deep thinking is a systematic and structured cognitive approach that requires individuals to move beyond intuition and superficial information, delving into the essence of a problem and its underlying principles through logical analysis, multi-perspective examination, and persistent inquiry. Unlike quick reactions or heuristic judgments, deep thinking emphasizes slow thinking, actively engaging knowledge reserves, critical thinking, and creativity to uncover deeper connections and meanings.
+Key characteristics of deep thinking include:
+Probing the Essence: Not settling for "what it is," but continuously asking "why" and "how it works" until reaching the fundamental logic.
+Multidimensional Connections: Placing the issue in a broader context and analyzing it through interdisciplinary knowledge or diverse perspectives.
+Skepticism & Reflection: Challenging existing conclusions, authoritative opinions, and even personal biases, validating them through logic or evidence.
+Long-term Value Focus: Prioritizing systemic consequences and sustainable impact over short-term or localized benefits.
+This mode of thinking helps individuals avoid cognitive biases in complex scenarios, improve decision-making, and generate groundbreaking insights in fields such as academic research, business innovation, and social problem-solving.</think>
+# Hello Deep Thinking\n Deep thinking is over.\n\n You can use the think tag to package your thoughts.
+`,
   },
 };

package/src/markdown/messages/message_think.tsx

@@ -0,0 +1,69 @@
+import { Think } from '@ant-design/x';
+import Icons from '@fe-free/icons';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+import ThinkIcon from './svgs/think.svg?react';
+
+interface MessageThinkProps {
+  title: string;
+  icon?: React.ReactNode;
+  loading?: boolean;
+  children?: React.ReactNode;
+  expanded?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+function MessageThink({
+  title,
+  icon,
+  loading,
+  children,
+  expanded: propsExpanded,
+  onClick,
+  className,
+}: MessageThinkProps) {
+  const [expanded, setExpanded] = useState(propsExpanded || false);
+
+  useEffect(() => {
+    setExpanded(propsExpanded || false);
+  }, [propsExpanded]);
+
+  useEffect(() => {
+    // 如果 propsExpanded 未定义，则根据 loading 状态设置 expanded
+    if (propsExpanded === undefined && loading !== undefined) {
+      setExpanded(loading ? true : false);
+    }
+  }, [propsExpanded, loading]);
+
+  const handleClick = useCallback(() => {
+    setExpanded(!expanded);
+    onClick?.();
+  }, [expanded, onClick]);
+
+  return (
+    <Think
+      title={title}
+      icon={icon || <Icons component={ThinkIcon} className="!text-sm" />}
+      loading={loading}
+      blink={loading}
+      expanded={expanded}
+      onClick={handleClick}
+      className={classNames('fea-message-think', className)}
+    >
+      {children}
+    </Think>
+  );
+}
+
+function MessageThinkOfDeepSeek(props: MessageThinkProps) {
+  return (
+    <MessageThink
+      {...props}
+      className={classNames('fea-message-think-deep-seek', props.className)}
+    />
+  );
+}
+
+export { MessageThink, MessageThinkOfDeepSeek };
+export type { MessageThinkProps };

package/src/markdown/messages/svgs/think.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.80022 0.000346623C10.3956 -0.0083669 10.97 0.146298 11.3912 0.566726C11.8123 0.987879 11.9677 1.56297 11.9583 2.1584C11.9496 2.75164 11.7782 3.41387 11.4935 4.09352C11.2145 4.7429 10.8741 5.36414 10.477 5.94878C10.9214 6.60592 11.2793 7.25436 11.5349 7.86575C11.8196 8.54541 11.9902 9.20764 11.9997 9.80088C12.0084 10.3963 11.853 10.9707 11.4326 11.3911C11.0114 11.8123 10.4363 11.9684 9.84088 11.9589C9.24763 11.9502 8.58613 11.7789 7.90575 11.4942C7.29726 11.2401 6.65318 10.8843 5.99894 10.4428C5.34543 10.8843 4.70135 11.2401 4.09286 11.4942C3.4132 11.7789 2.75097 11.9502 2.15773 11.9589C1.5623 11.9684 0.987938 11.8123 0.566784 11.3918C0.14563 10.9707 -0.00903481 10.3963 0.000404838 9.80088C0.00911836 9.20691 0.179032 8.54541 0.463674 7.86575C0.719271 7.25436 1.0758 6.60592 1.52019 5.94878C1.12348 5.36412 0.783555 4.74287 0.505063 4.09352C0.220421 3.41387 0.0505076 2.75164 0.041068 2.1584C0.0323545 1.56297 0.186293 0.988605 0.607447 0.567452C1.0286 0.146298 1.60369 -0.00836689 2.19912 0.00107276C2.79236 0.00978629 3.45387 0.1797 4.13425 0.464342C4.72967 0.713403 5.35922 1.05831 5.99894 1.486C6.63866 1.05759 7.26966 0.713403 7.86509 0.464342C8.54474 0.1797 9.20624 0.00978628 9.80022 0.000346623ZM2.20638 6.89057C1.9225 7.33469 1.67575 7.80148 1.46863 8.28618C1.21667 8.88887 1.09468 9.40805 1.08814 9.81686C1.08233 10.2235 1.18835 10.4733 1.33648 10.6214C1.48533 10.7695 1.73585 10.8756 2.14175 10.8697C2.55056 10.8639 3.06974 10.7419 3.67243 10.49C4.15456 10.2835 4.61891 10.0377 5.06078 9.75514C4.53958 9.34105 4.04257 8.89738 3.57222 8.42632C3.0712 7.9253 2.61374 7.40829 2.20638 6.89057ZM9.7915 6.89057C8.95508 7.9533 7.99736 8.91467 6.93782 9.75514C7.4207 10.0601 7.88905 10.307 8.32618 10.49C8.92886 10.7419 9.44877 10.8639 9.85758 10.8697C10.2642 10.8763 10.514 10.7703 10.6621 10.6214C10.8103 10.4733 10.9163 10.2235 10.9105 9.81686C10.9039 9.40805 10.7819 8.88814 10.53 8.28618C10.3226 7.80147 10.0756 7.33468 9.7915 6.89057ZM5.99894 2.82208C5.39911 3.27502 4.83182 3.76951 4.30126 4.30192C3.78316 4.81841 3.30086 5.36961 2.85772 5.95168C3.31201 6.55419 3.80822 7.12392 4.34264 7.65663C4.86105 8.1765 5.41444 8.66026 5.99894 9.10453C6.5508 8.687 7.10992 8.20268 7.65596 7.65663C8.18989 7.12387 8.68561 6.55414 9.13944 5.95168C8.69678 5.36964 8.21497 4.81845 7.69735 4.30192C7.13824 3.74281 6.56459 3.24686 5.99894 2.82208ZM2.18242 1.08881C1.77579 1.083 1.526 1.18902 1.37787 1.33715C1.22974 1.486 1.12372 1.73579 1.12953 2.14242C1.13607 2.55123 1.25806 3.07041 1.51002 3.6731C1.68647 4.09498 1.92174 4.54445 2.21074 5.00917C2.62264 4.4922 3.06362 3.99909 3.53156 3.53223C4.01281 3.05013 4.52198 2.59673 5.05643 2.17437C4.5888 1.88319 4.13715 1.64648 3.71309 1.4693C3.11041 1.21734 2.59123 1.09535 2.18242 1.08881ZM9.81619 1.08881C9.40738 1.09607 8.88748 1.21734 8.28552 1.4693C7.86146 1.64648 7.40908 1.88319 6.94218 2.17365C7.47661 2.59602 7.98578 3.04942 8.46705 3.5315C8.93477 3.99886 9.37552 4.49245 9.78715 5.0099C10.0761 4.54518 10.3136 4.0957 10.49 3.67382C10.742 3.07114 10.864 2.55196 10.8698 2.14315C10.8763 1.73652 10.7703 1.48673 10.6215 1.33787C10.4733 1.18974 10.2235 1.08373 9.81692 1.08954L9.81619 1.08881Z"/>
+</svg>

package/src/markdown/think.tsx

@@ -0,0 +1,55 @@
+import type { ComponentProps } from '@ant-design/x-markdown';
+import { memo, useEffect, useState } from 'react';
+import { MessageThinkOfDeepSeek } from './messages/message_think';
+
+const ThinkComponent = memo((props: ComponentProps) => {
+  const [title, setTitle] = useState('思考中...');
+  const [loading, setLoading] = useState(true);
+  const [expand, setExpand] = useState(true);
+
+  useEffect(() => {
+    if (props.streamStatus === 'done') {
+      setTitle('完成思考');
+      setLoading(false);
+      setExpand(false);
+    }
+  }, [props.streamStatus]);
+
+  return (
+    <MessageThinkOfDeepSeek
+      title={title}
+      loading={loading}
+      expanded={expand}
+      onClick={() => setExpand(!expand)}
+    >
+      {props.children}
+    </MessageThinkOfDeepSeek>
+  );
+});
+
+function compatibleWithDeepSeek(text: string) {
+  if (!text.startsWith('<think>')) {
+    return text;
+  }
+
+  const [left, right] = text.split('</think>');
+
+  let newText = text;
+
+  // 如果 think 部分是 <think>\n\n</think>，相当于没有，则直接返回 right
+  if (text.startsWith('<think>\n\n</think>')) {
+    newText = right;
+  }
+  // 否则做一些处理
+  else {
+    newText =
+      left
+        .replace('<think>\n', '<think>')
+        .replace('\n</think>', '</think>')
+        .replace(/\n/g, '<br/>') + (right || '');
+  }
+
+  return newText;
+}
+
+export { compatibleWithDeepSeek, ThinkComponent };

package/src/value_type_map/index.tsx

@@ -2,6 +2,7 @@ import type { ProRenderFieldPropsType } from '@ant-design/pro-components';
 import { dateRender } from './date';
 import { jsonRender } from './json';
 import { jsonModalRender } from './json_modal';
+import { markdownModalRender } from './markdown_modal';
 import { switchNumberRender, switchOptionsRender } from './switch';
 
 enum CustomValueTypeEnum {
@@ -13,6 +14,8 @@ enum CustomValueTypeEnum {
   CustomJSON = 'CustomJSON',
   /** JSON Modal */
   CustomJSONModal = 'CustomJSONModal',
+  /** Markdown Modal */
+  CustomMarkdownModal = 'CustomMarkdownModal',
   /** 渲染开关 */
   CustomSwitchNumber = 'CustomSwitchNumber',
   CustomSwitchOptions = 'CustomSwitchOptions',
@@ -37,6 +40,10 @@ const customValueTypeMap: Record<string, ProRenderFieldPropsType> = {
     render: jsonModalRender.render,
     renderFormItem: jsonModalRender.renderFormItem,
   },
+  [CustomValueTypeEnum.CustomMarkdownModal]: {
+    render: markdownModalRender.render,
+    renderFormItem: markdownModalRender.renderFormItem,
+  },
   [CustomValueTypeEnum.CustomSwitchNumber]: {
     render: switchNumberRender.render,
     renderFormItem: switchNumberRender.renderFormItem,