@fe-free/ai 4.1.12 → 4.1.14

package/src/markdown/knowledge_ref.tsx

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+function KnowledgeRefBlock(props: any) {
+  const { knowledgeRefs, onKnowledgeRef } = props;
+  const id = props['data-id'];
+
+  const handleClick = useCallback(() => {
+    onKnowledgeRef?.(id);
+  }, [id, onKnowledgeRef]);
+
+  if (id) {
+    const index = knowledgeRefs?.findIndex((ref: { id: string }) => ref.id === id);
+
+    // 没有数据的时候显示 id
+    if (index === -1 || index === undefined) {
+      return <span>[^knowledge:{id}]</span>;
+    }
+
+    return (
+      <span
+        data-id={id}
+        onClick={handleClick}
+        className="fea-markdown-body-block-knowledge-ref mx-1 h-[16px] min-w-[16px] cursor-pointer rounded-full border border-blue-500 text-center text-[12px] text-blue-600"
+      >
+        {index + 1}
+      </span>
+    );
+  }
+
+  return (
+    <span className="fea-markdown-body-block-knowledge-ref-source" onClick={handleClick}>
+      来源&gt;&gt;
+    </span>
+  );
+}
+
+function processWithKnowledgeRef(text: string, knowledgeRefs?: { id: string }[]) {
+  // 匹配 [^knowledge:X-Y] 格式
+  const knowledgeRefRegex = /\[\^knowledge:(\d+-\d+)\]/g;
+
+  let count = 0;
+  let newText = text.replace(knowledgeRefRegex, (_match, id) => {
+    count++;
+    return `<knowledge-ref data-id="${id}">${id}</knowledge-ref>`;
+  });
+
+  if (count > 0 && knowledgeRefs && knowledgeRefs.length > 0) {
+    newText = `${newText}\n\n<knowledge-ref>来源&gt;&gt;</knowledge>`;
+  }
+
+  return newText;
+}
+
+export { KnowledgeRefBlock, processWithKnowledgeRef };

package/src/markdown/markdown.stories.tsx

@@ -0,0 +1,184 @@
+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/ai/Markdown',
+  component: Markdown,
+  tags: ['autodocs'],
+};
+
+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: {
+    content: `
+# Markdown 组件示例
+
+这是一个 **Markdown** 组件的基本用法示例。
+
+---
+
+## 支持的特性
+
+- 标题
+- 列表
+- 代码高亮
+- 表格
+- 链接与图片
+- 引用
+- 内联代码
+- 分割线
+
+---
+
+## 代码高亮
+
+\`\`\`typescript
+function hello(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+\`\`\`js
+// long line long line long line long line long line long line long line long line long line long line long line long line long line
+function hello(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+---
+
+## 表格
+
+| 姓名   | 年龄 | 城市   | 职业       | 邮箱                  | 状态   |状态   |状态   |状态   |
+| ------ | ---- | ------ | ---------- | --------------------- | ------ |------ |------ |------ |
+| 张三   | 28   | 北京   | 前端开发   | zhangsan@example.com  | 在职   |
+| 李四   | 32   | 上海   | 产品经理   | lisi@example.com      | 离职   |
+| 王五   | 24   | 广州   | 设计师     | wangwu@example.com    | 在职   |
+| 赵六   | 29   | 深圳   | 测试工程师 | zhaoliu@example.com   | 实习   |
+
+---
+
+## 链接与图片
+
+[访问 Ant Design 官网](https://ant.design)
+
+![Ant Design Logo](https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg)
+
+---
+
+## 引用
+
+> 这是一段引用文本，可以用于强调内容。
+
+---
+
+## 内联代码
+
+你可以在文本中嵌入 \`const a = 1;\` 这样的内联代码。
+
+---
+
+## 分割线
+
+---
+`,
+  },
+};
+
+export const Streaming: Story = {
+  render: StreamingComponent,
+  args: {
+    content: `
+# Markdown 组件示例
+
+这是一个 **Markdown** 组件的基本用法示例。
+
+---
+
+## 支持的特性
+
+- 标题
+- 列表
+
+---
+
+## 代码高亮
+
+\`\`\`typescript
+function hello(name: string): string {
+  return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+
+## 表格
+
+| 姓名   | 年龄 | 城市   | 职业       | 邮箱                  | 状态   |状态   |状态   |状态   |
+| ------ | ---- | ------ | ---------- | --------------------- | ------ |------ |------ |------ |
+| 张三   | 28   | 北京   | 前端开发   | zhangsan@example.com  | 在职   |
+| 李四   | 32   | 上海   | 产品经理   | lisi@example.com      | 离职   |
+| 王五   | 24   | 广州   | 设计师     | wangwu@example.com    | 在职   |
+| 赵六   | 29   | 深圳   | 测试工程师 | zhaoliu@example.com   | 实习   |
+
+---
+`,
+  },
+};
+
+export const Latex: Story = {
+  args: {
+    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 Think: Story = {
+  render: StreamingComponent,
+  args: {
+    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/think.tsx

@@ -0,0 +1,55 @@
+import type { ComponentProps } from '@ant-design/x-markdown';
+import { memo, useEffect, useState } from 'react';
+import { MessageThinkOfDeepSeek } from '../messages';
+
+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/messages/index.tsx

@@ -1,5 +1,5 @@
 export { MessageActions } from './message_actions';
-export { MessageThink } from './message_think';
+export { MessageThink, MessageThinkOfDeepSeek } from './message_think';
 export type { MessageThinkProps } from './message_think';
 export { Messages } from './messages';
 export type { MessagesProps } from './messages';

package/src/messages/message_think.tsx

@@ -8,24 +8,38 @@ interface MessageThinkProps {
   icon?: React.ReactNode;
   loading?: boolean;
   children?: React.ReactNode;
-  type?: 'deepSeek';
+  expanded?: boolean;
+  onClick?: () => void;
+  className?: string;
 }
 
-function MessageThink({ title, icon, loading, children, type }: MessageThinkProps) {
+function MessageThink({
+  title,
+  icon,
+  loading,
+  children,
+  expanded,
+  onClick,
+  className,
+}: MessageThinkProps) {
   return (
     <Think
       title={title}
       icon={icon || <Icons component={ThinkIcon} className="!text-sm" />}
       loading={loading}
       blink={loading}
-      className={classNames('fea-message-think', {
-        'fea-message-think-deep-seek': type === 'deepSeek',
-      })}
+      expanded={expanded}
+      onClick={onClick}
+      className={classNames('fea-message-think', className)}
     >
       {children}
     </Think>
   );
 }
 
-export { MessageThink };
+function MessageThinkOfDeepSeek(props: MessageThinkProps) {
+  return <MessageThink {...props} className="fea-message-think-deep-seek" />;
+}
+
+export { MessageThink, MessageThinkOfDeepSeek };
 export type { MessageThinkProps };

package/src/sender/index.tsx

@@ -7,7 +7,6 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Actions } from './actions';
 import { FileUpload, Files } from './files';
-import './style.scss';
 import type { SenderProps, SenderRef } from './types';
 
 function Text(props: SenderProps & { refText: RefObject<HTMLTextAreaElement> }) {
@@ -105,6 +104,9 @@ function Sender(originProps: SenderProps) {
             'fea-sender-drag-hover': dragHover,
           },
         )}
+        style={{
+          boxShadow: '0px 2px 12px 0px #00000014',
+        }}
       >
         <Files
           {...props}

package/src/style.scss

@@ -1,3 +1,80 @@
+.fea-markdown.x-markdown {
+  --hr-margin: 1em 0;
+  --margin-ul-ol: 0;
+  --margin-block: 0 0 8px 0;
+
+  ul,
+  ol {
+    li {
+      margin: 0;
+    }
+  }
+
+  &.x-markdown-light pre code:not([class$='-highlightCode-code'] pre code) {
+    padding: 0 !important;
+    background-color: transparent !important;
+    margin: 0 !important;
+  }
+
+  .fea-markdown-body-block-chart {
+    background: white;
+    border-radius: 6px;
+    margin: 0.5rem;
+
+    .fea-markdown-body-block-chart-title {
+      font-size: 16px;
+      font-weight: bold;
+      padding: 10px;
+    }
+  }
+
+  .fea-markdown-body-block-knowledge-ref[data-id] {
+    height: 16px;
+    min-width: 16px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    border: 1px solid #0374e9;
+    color: #0374e9;
+    font-size: 12px;
+    padding: 0 4px;
+  }
+
+  .fea-markdown-body-block-knowledge-ref-source {
+    color: #0374e9;
+    cursor: pointer;
+  }
+}
+
+.fea-sender {
+  .ant-upload-select {
+    display: none !important;
+  }
+
+  .ant-upload-list {
+    display: none !important;
+  }
+
+  .ant-upload-wrapper {
+    display: none;
+  }
+
+  &.fea-sender-drag-hover {
+    .ant-upload-wrapper {
+      display: block;
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+
+      .ant-upload-drag {
+        border-color: theme('colors.primary');
+      }
+    }
+  }
+}
+
 @keyframes fea-sender-rectangle-white {
   0%,
   80%,

package/src/sender/style.scss

@@ -1,26 +0,0 @@
-.fea-sender {
-  .ant-upload-select {
-    display: none !important;
-  }
-
-  .ant-upload-list {
-    display: none !important;
-  }
-
-  .ant-upload-wrapper {
-    display: none;
-  }
-
-  &.fea-sender-drag-hover {
-    .ant-upload-wrapper {
-      display: block;
-      position: absolute;
-      inset: 0;
-      z-index: 10;
-
-      .ant-upload-drag {
-        border-color: theme('colors.primary');
-      }
-    }
-  }
-}