feat: add think component, update test and details

Author: zhaoge

src/chat/__tests__/__snapshots__/think.test.tsx.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Think component snapshot renders completed state with children correctly 1`] = `
+<div>
+  <div
+    class="dtc__custom__think"
+  >
+    <section
+      class="dtc-flex dtc__custom__think__btn"
+      style="flex-wrap: nowrap; justify-content: normal; align-items: center; gap: 4px;"
+    >
+      已完成深度思考
+      <span
+        color="#64698B"
+        data-mock-icon="UpOutlined"
+        size="12"
+        style="transform: none;"
+      />
+    </section>
+    <div
+      class="dtc__custom__think__content"
+    >
+      <div
+        class="dtc__custom__think__line"
+      />
+      <div
+        class="dtc__custom__think__text"
+      >
+        这里是 Think 的内容示例（支持 Markdown）
+
+- 列表项 A
+- 列表项 B
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Think component snapshot renders loading state correctly 1`] = `
+<div>
+  <div
+    class="dtc__custom__think"
+  >
+    <section
+      class="dtc-flex dtc__custom__think__btn"
+      style="flex-wrap: nowrap; justify-content: normal; align-items: center; gap: 4px;"
+    >
+      <span
+        class="gradient-text"
+      >
+        思考中...
+      </span>
+      <span
+        color="#64698B"
+        data-mock-icon="UpOutlined"
+        size="12"
+        style="transform: none;"
+      />
+    </section>
+    <div
+      class="dtc__custom__think__content"
+    >
+      <div
+        class="dtc__custom__think__line"
+      />
+      <div
+        class="dtc__custom__think__text"
+      >
+        正在思考中，暂无内容。
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/chat/__tests__/think.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Think from '../think';
+
+describe('Think component snapshot', () => {
+    it('renders loading state correctly', () => {
+        const data = { children: '正在思考中，暂无内容。' } as any;
+        const { container } = render(<Think data={data} loading />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it('renders completed state with children correctly', () => {
+        const markdown = `这里是 Think 的内容示例（支持 Markdown）\n\n- 列表项 A\n- 列表项 B`;
+        const data = { children: markdown } as any;
+        const { container } = render(<Think data={data} loading={false} />);
+        expect(container).toMatchSnapshot();
+    });
+});

src/chat/demos/markdown.tsx

@@ -34,7 +34,7 @@ SELECT * FROM table_name;
 | 单元格 | 单元格 | 单元格 |
 | 单元格 | 单元格 | 单元格 |
 | 单元格 | 单元格 | 单元格 |
-<span style="color: red;">自定义颜色</span>
+<span style="color: red;">带自定义样式的dom结构显示</span>
 `;
 
 export default function () {

src/chat/demos/think.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
+import { Chat } from 'dt-react-component';
+
+const children = `
+这里是 Think 的内容示例
+
+- 列表项 A
+- 列表项 B
+`;
+
+export default function () {
+    const [loading, setLoading] = React.useState(true);
+
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            setLoading(false);
+        }, 3000);
+
+        return () => clearTimeout(timer);
+    }, []);
+    const data = { children } as ReactMarkdownProps;
+    return <Chat.Think data={data} loading={loading} />;
+}

src/chat/gradientText/index.scss

@@ -0,0 +1,18 @@
+$loadingGradient: #90F8FF99 6%, #4983DA 28%, #002DA1 46%, #4983DA 72%, #90F8FF99 94%;
+
+span.gradient-text {
+    background: linear-gradient(102deg, $loadingGradient);
+    background-size: 200% 100%;
+    background-clip: text;
+    color: transparent;
+    animation: gradientScroll 2s linear infinite;
+}
+
+@keyframes gradientScroll {
+    0% {
+        background-position: 200% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}

src/chat/gradientText/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import './index.scss';
+
+interface IGradientTextProps {
+    className?: string;
+    gradient?: boolean;
+}
+/**
+ * @deprecated 从 rc 中同步过来，切勿直接修改该组件
+ */
+export default function GradientText({
+    className,
+    gradient,
+    children,
+}: React.PropsWithChildren<IGradientTextProps>) {
+    return <span className={classNames(gradient && 'gradient-text', className)}>{children}</span>;
+}

src/chat/index.$tab-think.md

@@ -0,0 +1,24 @@
+---
+title: Think
+group: 组件
+toc: content
+demo:
+    cols: 2
+---
+
+# Think
+
+## 何时使用
+
+Think 组件用以展示 AI 交互中深度思考样式。
+
+## 示例
+
+<code src="./demos/think.tsx" title="基本使用"></code>
+
+## API
+
+| 参数    | 说明 | 类型               | 默认值 |
+| ------- | ---- | ------------------ | ------ |
+| data    | 类型 | ReactMarkdownProps | -      |
+| loading | 类型 | boolean            | -      |

src/chat/index.md

@@ -21,6 +21,7 @@ Chat 规范由多个组件复合使用实现落地场景，其中：
 -   `Message` 组件是符合 AI 规范的回答框
 -   `Prompt` 组件是符合 AI 规范的提问框
 -   `Content` 组件是符合 AI 规范的正文内容
+-   `Think` 组件是符合 AI 规范的深度思考样式
 
 ## 何时使用
 

src/chat/index.tsx

@@ -10,6 +10,7 @@ import Message from './message';
 import Pagination from './pagination';
 import Prompt from './prompt';
 import Tag from './tag';
+import Think from './think';
 import useChat from './useChat';
 import { context, type IChatContext, useContext } from './useContext';
 import Welcome from './welcome';
@@ -21,7 +22,24 @@ const DEFAULT_MAX_REGENERATE_COUNT = 5;
 type ChatProviderConfig = Omit<IChatProps, 'maxRegenerateCount'> &
     Partial<Pick<IChatProps, 'maxRegenerateCount'>>;
 
-function Chat({
+type ChatComponent = React.FC<PropsWithChildren<ChatProviderConfig>> & {
+    useChat: typeof useChat;
+    useContext: typeof useContext;
+    Loading: typeof Loading;
+    Button: typeof Button;
+    CodeBlock: typeof CodeBlock;
+    Input: typeof Input;
+    Markdown: typeof Markdown;
+    Pagination: typeof Pagination;
+    Message: typeof Message;
+    Prompt: typeof Prompt;
+    Content: typeof Content;
+    Tag: typeof Tag;
+    Welcome: typeof Welcome;
+    Think: typeof Think;
+};
+
+const Chat: ChatComponent = function Chat({
     chat,
     components,
     maxRegenerateCount = DEFAULT_MAX_REGENERATE_COUNT,
@@ -50,11 +68,10 @@ function Chat({
             {children}
         </context.Provider>
     );
-}
+};
 
 Chat.useChat = useChat;
 Chat.useContext = useContext;
-
 Chat.Loading = Loading;
 Chat.Button = Button;
 Chat.CodeBlock = CodeBlock;
@@ -66,6 +83,7 @@ Chat.Prompt = Prompt;
 Chat.Content = Content;
 Chat.Tag = Tag;
 Chat.Welcome = Welcome;
+Chat.Think = Think;
 
 export { type IContentRef } from './content';
 export default Chat;

src/chat/markdown/index.tsx

@@ -81,7 +81,7 @@ export default memo(
                 includeElementIndex
                 {...rest}
             >
-                {children}
+                {children?.replace(/<\/think>/g, '\n\n</think>')}
             </ReactMarkdown>
         );
     },