@fe-free/ai 4.1.11 → 4.1.13

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/style.scss

@@ -0,0 +1,38 @@
+.fea-markdown {
+  &.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;
+  }
+}

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,3 +1,5 @@
 export { MessageActions } from './message_actions';
+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

@@ -0,0 +1,45 @@
+import { Think } from '@ant-design/x';
+import Icons from '@fe-free/icons';
+import classNames from 'classnames';
+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,
+  onClick,
+  className,
+}: MessageThinkProps) {
+  return (
+    <Think
+      title={title}
+      icon={icon || <Icons component={ThinkIcon} className="!text-sm" />}
+      loading={loading}
+      blink={loading}
+      expanded={expanded}
+      onClick={onClick}
+      className={classNames('fea-message-think', className)}
+    >
+      {children}
+    </Think>
+  );
+}
+
+function MessageThinkOfDeepSeek(props: MessageThinkProps) {
+  return <MessageThink {...props} className="fea-message-think-deep-seek" />;
+}
+
+export { MessageThink, MessageThinkOfDeepSeek };
+export type { MessageThinkProps };

package/src/messages/messages.stories.tsx

@@ -0,0 +1,45 @@
+import { MessageThink } from '@fe-free/ai';
+import { CheckCircleOutlined } from '@fe-free/icons';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof MessageThink> = {
+  title: '@fe-free/ai/MessageThink',
+  component: MessageThink,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MessageThink>;
+
+export const Default: Story = {
+  args: {
+    title: '思考',
+    children: '这是 Think 的内容',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    title: '思考中...',
+    loading: true,
+    children: '这是 Think 的内容',
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    title: '思考',
+    children: '这是 Think 的内容',
+    icon: <CheckCircleOutlined className="text-green08" />,
+  },
+};
+
+export const DeepSeek: Story = {
+  args: {
+    title: '思考中...',
+    loading: true,
+    children: '这是 Think 的内容',
+    type: 'deepSeek',
+  },
+};
+
+export default meta;

package/src/sender/index.tsx

@@ -105,6 +105,9 @@ function Sender(originProps: SenderProps) {
             'fea-sender-drag-hover': dragHover,
           },
         )}
+        style={{
+          boxShadow: '0px 2px 12px 0px #00000014',
+        }}
       >
         <Files
           {...props}

package/src/store/index.ts

@@ -6,7 +6,7 @@ interface BaseSenderValue {
   text?: string;
   files?: string[];
 }
-interface ChatStore<Value extends BaseSenderValue | undefined, AIData> {
+interface ChatStore<Value extends BaseSenderValue | undefined, AIData, ContextData = any> {
   senderValue?: Value;
   setSenderValue: (senderValue?: Value) => void;
 
@@ -15,6 +15,10 @@ interface ChatStore<Value extends BaseSenderValue | undefined, AIData> {
   addMessage: (message: ChatMessage<AIData>) => void;
   updateMessage: (message: ChatMessage<AIData>) => void;
 
+  /** 存放Chat的上下文数据 */
+  contextData?: ContextData;
+  setContextData: (contextData?: ContextData) => void;
+
   reset: () => void;
 }
 
@@ -62,6 +66,10 @@ function createChatStore<Value extends BaseSenderValue | undefined, AIData>() {
         }),
       }));
     },
+    contextData: undefined,
+    setContextData: (contextData) => {
+      set(() => ({ contextData }));
+    },
     reset: () => {
       set(store.getInitialState());
     },

package/src/style.scss

@@ -1,4 +1,4 @@
-@keyframes sender-rectangle-white {
+@keyframes fea-sender-rectangle-white {
   0%,
   80%,
   100% {
@@ -12,7 +12,7 @@
   }
 }
 
-@keyframes sender-rectangle-primary {
+@keyframes fea-sender-rectangle-primary {
   0%,
   80%,
   100% {
@@ -25,3 +25,14 @@
     box-shadow: 0 -8px theme('colors.primary');
   }
 }
+
+.fea-message-think {
+  &:not(.fea-message-think-deep-seek) {
+    .ant-think-content {
+      border-inline-start: none;
+      background-color: theme('backgroundColor.01');
+      padding: 12px 16px;
+      border-radius: 8px;
+    }
+  }
+}

package/src/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>