From 9fc44eb0d89ecf79d946660ce03277e0a3151dbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=94=A1=E6=B5=B7=E7=8F=8A?= <haishanb@163.com>
Date: Fri, 25 Apr 2025 19:41:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chat-loading/_example/base.tsx | 20 ++++++++
 .../chat-loading/chat-loading.en-US.md        | 26 ++++++++++
 .../components/chat-loading/chat-loading.md   | 37 ++++++++++++++
 packages/components/chat-loading/index.ts     | 10 ++++
 .../components/chat-sender/_example/base.tsx  | 40 +++++++++++++++
 .../chat-sender/chat-sender.en-US.md          | 26 ++++++++++
 .../components/chat-sender/chat-sender.md     | 37 ++++++++++++++
 packages/components/chat-sender/index.ts      | 13 +++++
 .../chat-thinking/_example/base.tsx           | 51 +++++++++++++++++++
 .../chat-thinking/chat-thinking.en-US.md      | 26 ++++++++++
 .../components/chat-thinking/chat-thinking.md | 37 ++++++++++++++
 packages/components/chat-thinking/index.ts    | 16 ++++++
 .../chatbot/_example/thinkContent.tsx         |  4 +-
 packages/components/chatbot/index.ts          | 19 -------
 packages/components/index.ts                  |  3 ++
 packages/tdesign-react/package.json           |  1 +
 packages/tdesign-react/site/site.config.mjs   | 24 +++++++++
 17 files changed, 369 insertions(+), 21 deletions(-)
 create mode 100644 packages/components/chat-loading/_example/base.tsx
 create mode 100644 packages/components/chat-loading/chat-loading.en-US.md
 create mode 100644 packages/components/chat-loading/chat-loading.md
 create mode 100644 packages/components/chat-loading/index.ts
 create mode 100644 packages/components/chat-sender/_example/base.tsx
 create mode 100644 packages/components/chat-sender/chat-sender.en-US.md
 create mode 100644 packages/components/chat-sender/chat-sender.md
 create mode 100644 packages/components/chat-sender/index.ts
 create mode 100644 packages/components/chat-thinking/_example/base.tsx
 create mode 100644 packages/components/chat-thinking/chat-thinking.en-US.md
 create mode 100644 packages/components/chat-thinking/chat-thinking.md
 create mode 100644 packages/components/chat-thinking/index.ts

diff --git a/packages/components/chat-loading/_example/base.tsx b/packages/components/chat-loading/_example/base.tsx
new file mode 100644
index 0000000000..09a9fc6cf8
--- /dev/null
+++ b/packages/components/chat-loading/_example/base.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { ChatLoading, Space } from 'tdesign-react';
+
+const ChatLoadingExample = () => (
+  <>
+    <Space>
+      <div style={{ width: 600, height: 150 }}>
+        <ChatLoading animation="skeleton"></ChatLoading>
+      </div>
+    </Space>
+    <Space size={60}>
+      <ChatLoading animation="moving" />
+      <ChatLoading animation="gradient" />
+      <ChatLoading animation="circle" />
+      <ChatLoading animation="moving" text={'加载中...'} />
+    </Space>
+  </>
+);
+
+export default ChatLoadingExample;
diff --git a/packages/components/chat-loading/chat-loading.en-US.md b/packages/components/chat-loading/chat-loading.en-US.md
new file mode 100644
index 0000000000..c417d90bbb
--- /dev/null
+++ b/packages/components/chat-loading/chat-loading.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+block | Boolean | false | make button to be a block-level element | N
+children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | disable the button, make it can not be clicked | N
+form | String | undefined |  native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute. | N
+ghost | Boolean | false | make background-color to be transparent | N
+href | String | - | \- | N
+icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | set button to be loading state | N
+shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
+size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | HTML Tag Element。options：button/a/div | N
+theme | String | - | button theme。options：default/primary/danger/warning/success | N
+type | String | button | type of button element in html。options：submit/reset/button | N
+variant | String | base | variant of button。options：base/outline/dashed/text | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
diff --git a/packages/components/chat-loading/chat-loading.md b/packages/components/chat-loading/chat-loading.md
new file mode 100644
index 0000000000..4d5c467dc8
--- /dev/null
+++ b/packages/components/chat-loading/chat-loading.md
@@ -0,0 +1,37 @@
+---
+title: ChatLoading 对话加载
+description: 对话加载
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+## 基础用法
+
+{{ base }}
+
+
+## API
+### Chatbot Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+block | Boolean | false | 是否为块级元素 | N
+children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | 禁用状态 | N
+form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
+icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | 是否显示为加载状态 | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
+theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+type | String | button | 按钮类型。可选项：submit/reset/button | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
diff --git a/packages/components/chat-loading/index.ts b/packages/components/chat-loading/index.ts
new file mode 100644
index 0000000000..cf9ce2a0cb
--- /dev/null
+++ b/packages/components/chat-loading/index.ts
@@ -0,0 +1,10 @@
+import { TdChatLoadingProps } from '@tencent/tdesign-chatbot/lib/chat-loading';
+import reactify from '../_util/reactify';
+
+export const ChatLoading: React.ForwardRefExoticComponent<
+  Omit<TdChatLoadingProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
+> = reactify<TdChatLoadingProps>('t-chat-loading');
+
+export default ChatLoading;
+
+export type * from '@tencent/tdesign-chatbot';
diff --git a/packages/components/chat-sender/_example/base.tsx b/packages/components/chat-sender/_example/base.tsx
new file mode 100644
index 0000000000..74ede45555
--- /dev/null
+++ b/packages/components/chat-sender/_example/base.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { ChatSender } from 'tdesign-react';
+
+const ChatSenderExample = () => {
+  const [inputValue, setInputValue] = useState('输入内容');
+  const [loading, setLoading] = useState(false);
+
+  // 输入变化处理
+  const handleChange = (e) => {
+    console.log('onChange', e.detail);
+    setInputValue(e.detail);
+  };
+
+  // 发送处理
+  const handleSend = () => {
+    console.log('提交', { value: inputValue });
+    setInputValue('');
+    setLoading(true);
+  };
+
+  // 停止处理
+  const handleStop = () => {
+    console.log('停止');
+    setLoading(false);
+  };
+
+  return (
+    <ChatSender
+      value={inputValue}
+      placeholder="请输入内容"
+      loading={loading}
+      autosize={{ minRows: 2 }}
+      onChange={handleChange}
+      onSend={handleSend}
+      onStop={handleStop}
+    />
+  );
+};
+
+export default ChatSenderExample;
diff --git a/packages/components/chat-sender/chat-sender.en-US.md b/packages/components/chat-sender/chat-sender.en-US.md
new file mode 100644
index 0000000000..c417d90bbb
--- /dev/null
+++ b/packages/components/chat-sender/chat-sender.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+block | Boolean | false | make button to be a block-level element | N
+children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | disable the button, make it can not be clicked | N
+form | String | undefined |  native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute. | N
+ghost | Boolean | false | make background-color to be transparent | N
+href | String | - | \- | N
+icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | set button to be loading state | N
+shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
+size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | HTML Tag Element。options：button/a/div | N
+theme | String | - | button theme。options：default/primary/danger/warning/success | N
+type | String | button | type of button element in html。options：submit/reset/button | N
+variant | String | base | variant of button。options：base/outline/dashed/text | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
diff --git a/packages/components/chat-sender/chat-sender.md b/packages/components/chat-sender/chat-sender.md
new file mode 100644
index 0000000000..8d95c682e6
--- /dev/null
+++ b/packages/components/chat-sender/chat-sender.md
@@ -0,0 +1,37 @@
+---
+title: ChatSender 对话输入
+description: 对话输入
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+## 基础用法
+
+{{ base }}
+
+
+## API
+### Chatbot Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+block | Boolean | false | 是否为块级元素 | N
+children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | 禁用状态 | N
+form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
+icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | 是否显示为加载状态 | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
+theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+type | String | button | 按钮类型。可选项：submit/reset/button | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
diff --git a/packages/components/chat-sender/index.ts b/packages/components/chat-sender/index.ts
new file mode 100644
index 0000000000..74508ee11d
--- /dev/null
+++ b/packages/components/chat-sender/index.ts
@@ -0,0 +1,13 @@
+import {
+  TdChatSenderProps,
+} from '@tencent/tdesign-chatbot';
+import reactify from '../_util/reactify';
+
+
+export const ChatSender: React.ForwardRefExoticComponent<
+  Omit<TdChatSenderProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
+> = reactify<TdChatSenderProps>('t-chat-sender');
+
+export default ChatSender;
+
+export type * from '@tencent/tdesign-chatbot';
diff --git a/packages/components/chat-thinking/_example/base.tsx b/packages/components/chat-thinking/_example/base.tsx
new file mode 100644
index 0000000000..ff49e211bf
--- /dev/null
+++ b/packages/components/chat-thinking/_example/base.tsx
@@ -0,0 +1,51 @@
+import { type MessageStatus } from '@tencent/tdesign-chatbot';
+import React, { useState, useEffect, useRef } from 'react';
+import { ChatThinking } from 'tdesign-react';
+
+const fullText =
+  '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。';
+
+export default function ThinkContentDemo() {
+  const [displayText, setDisplayText] = useState('');
+  const [status, setStatus] = useState<MessageStatus>('pending');
+  const [title, setTitle] = useState('正在思考中...');
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const currentIndex = useRef(0);
+  const startTimeRef = useRef(Date.now());
+
+  useEffect(() => {
+    // 模拟打字效果
+    const typeEffect = () => {
+      if (currentIndex.current < fullText.length) {
+        const char = fullText[currentIndex.current];
+        currentIndex.current += 1;
+        setDisplayText((prev) => prev + char);
+        timerRef.current = setTimeout(typeEffect, 50);
+        setStatus('streaming');
+      } else {
+        // 计算耗时并更新状态
+        const costTime = parseInt(((Date.now() - startTimeRef.current) / 1000).toString(), 10);
+        setTitle(`已完成思考（耗时${costTime}秒）`);
+        setStatus('complete');
+      }
+    };
+
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(typeEffect, 500);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  return (
+    <ChatThinking
+      content={{
+        title,
+        text: displayText,
+      }}
+      status={status}
+      maxHeight={100}
+    />
+  );
+}
diff --git a/packages/components/chat-thinking/chat-thinking.en-US.md b/packages/components/chat-thinking/chat-thinking.en-US.md
new file mode 100644
index 0000000000..c417d90bbb
--- /dev/null
+++ b/packages/components/chat-thinking/chat-thinking.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+block | Boolean | false | make button to be a block-level element | N
+children | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | disable the button, make it can not be clicked | N
+form | String | undefined |  native `form` attribute，which supports triggering events for a form with a specified id through the use of the form attribute. | N
+ghost | Boolean | false | make background-color to be transparent | N
+href | String | - | \- | N
+icon | TElement | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | set button to be loading state | N
+shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
+size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | HTML Tag Element。options：button/a/div | N
+theme | String | - | button theme。options：default/primary/danger/warning/success | N
+type | String | button | type of button element in html。options：submit/reset/button | N
+variant | String | base | variant of button。options：base/outline/dashed/text | N
+onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
diff --git a/packages/components/chat-thinking/chat-thinking.md b/packages/components/chat-thinking/chat-thinking.md
new file mode 100644
index 0000000000..499a5779ef
--- /dev/null
+++ b/packages/components/chat-thinking/chat-thinking.md
@@ -0,0 +1,37 @@
+---
+title: ChatThinking 思考过程
+description: 思考过程
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+## 基础用法
+
+{{ base }}
+
+
+## API
+### Chatbot Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+block | Boolean | false | 是否为块级元素 | N
+children | TNode | - | 按钮内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+content | TNode | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+disabled | Boolean | false | 禁用状态 | N
+form | String | undefined | 原生的form属性，支持用于通过 form 属性触发对应 id 的 form 的表单事件 | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
+icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+loading | Boolean | false | 是否显示为加载状态 | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
+tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
+theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
+type | String | button | 按钮类型。可选项：submit/reset/button | N
+variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N
+onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
diff --git a/packages/components/chat-thinking/index.ts b/packages/components/chat-thinking/index.ts
new file mode 100644
index 0000000000..94f0ecf7f9
--- /dev/null
+++ b/packages/components/chat-thinking/index.ts
@@ -0,0 +1,16 @@
+import {
+  TdChatThinkContentProps,
+} from '@tencent/tdesign-chatbot';
+import reactify from '../_util/reactify';
+
+
+
+const ChatThinkContent: React.ForwardRefExoticComponent<
+  Omit<TdChatThinkContentProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
+> = reactify<TdChatThinkContentProps>('t-chat-thinking-content');
+
+export const ChatThinking = ChatThinkContent;
+
+export default ChatThinking;
+
+export type * from '@tencent/tdesign-chatbot';
diff --git a/packages/components/chatbot/_example/thinkContent.tsx b/packages/components/chatbot/_example/thinkContent.tsx
index 7ab79b5909..ff49e211bf 100644
--- a/packages/components/chatbot/_example/thinkContent.tsx
+++ b/packages/components/chatbot/_example/thinkContent.tsx
@@ -1,6 +1,6 @@
 import { type MessageStatus } from '@tencent/tdesign-chatbot';
 import React, { useState, useEffect, useRef } from 'react';
-import { ChatThinkContent } from 'tdesign-react';
+import { ChatThinking } from 'tdesign-react';
 
 const fullText =
   '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。';
@@ -39,7 +39,7 @@ export default function ThinkContentDemo() {
   }, []);
 
   return (
-    <ChatThinkContent
+    <ChatThinking
       content={{
         title,
         text: displayText,
diff --git a/packages/components/chatbot/index.ts b/packages/components/chatbot/index.ts
index 5b16d8017f..e683d774e4 100644
--- a/packages/components/chatbot/index.ts
+++ b/packages/components/chatbot/index.ts
@@ -1,18 +1,14 @@
 import '@tencent/tdesign-chatbot/lib/chatbot';
-import '@tencent/tdesign-chatbot/lib/chat-message/content/thinking-content';
 import '@tencent/tdesign-chatbot/lib/chat-message/content/search-content';
 import '@tencent/tdesign-chatbot/lib/chat-message/content/suggestion-content';
 import '@tencent/tdesign-chatbot/lib/chat-message/content/markdown-content';
 import '@tencent/tdesign-chatbot/lib/style/index.css';
 import {
   TdChatProps,
-  TdChatThinkContentProps,
   TdChatSearchContentProps,
   TdChatSuggestionContentProps,
   TdChatMarkdownContentProps,
-  TdChatSenderProps,
 } from '@tencent/tdesign-chatbot';
-import { TdChatLoadingProps } from '@tencent/tdesign-chatbot/lib/chat-loading';
 import { TdChatActionProps } from '@tencent/tdesign-chatbot/lib/chat-action';
 import { TdAttachmentsProps } from '@tencent/tdesign-chatbot/lib/attachments';
 import { TdFileCardProps } from '@tencent/tdesign-chatbot/lib/filecard';
@@ -22,18 +18,10 @@ const ChatBot: React.ForwardRefExoticComponent<
   Omit<TdChatProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
 > = reactify<TdChatProps>('t-chatbot');
 
-const ChatSender: React.ForwardRefExoticComponent<
-  Omit<TdChatSenderProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
-> = reactify<TdChatSenderProps>('t-chat-sender');
-
 const ChatActionBar: React.ForwardRefExoticComponent<
   Omit<TdChatActionProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
 > = reactify<TdChatActionProps>('t-chat-action');
 
-const ChatLoading: React.ForwardRefExoticComponent<
-  Omit<TdChatLoadingProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
-> = reactify<TdChatLoadingProps>('t-chat-loading');
-
 const Attachments: React.ForwardRefExoticComponent<
   Omit<TdAttachmentsProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
 > = reactify<TdAttachmentsProps>('t-attachments');
@@ -42,10 +30,6 @@ const Filecard: React.ForwardRefExoticComponent<
   Omit<TdFileCardProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
 > = reactify<TdFileCardProps>('t-filecard');
 
-const ChatThinkContent: React.ForwardRefExoticComponent<
-  Omit<TdChatThinkContentProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
-> = reactify<TdChatThinkContentProps>('t-chat-thinking-content');
-
 const ChatSearchContent: React.ForwardRefExoticComponent<
   Omit<TdChatSearchContentProps, 'ref'> & React.RefAttributes<HTMLElement | undefined>
 > = reactify<TdChatSearchContentProps>('t-chat-search-content');
@@ -60,12 +44,9 @@ const ChatMarkdownContent: React.ForwardRefExoticComponent<
 
 export {
   ChatBot,
-  ChatSender,
   ChatActionBar,
-  ChatLoading,
   Attachments,
   Filecard,
-  ChatThinkContent,
   ChatSearchContent,
   ChatSuggestionContent,
   ChatMarkdownContent,
diff --git a/packages/components/index.ts b/packages/components/index.ts
index a81232f3a6..ff2b972180 100644
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@@ -69,3 +69,6 @@ export * from './descriptions';
 export * from './empty';
 export * from './typography';
 export * from './chatbot';
+export * from './chat-loading';
+export * from './chat-thinking';
+export * from './chat-sender';
diff --git a/packages/tdesign-react/package.json b/packages/tdesign-react/package.json
index f440957bee..caa3ab4817 100644
--- a/packages/tdesign-react/package.json
+++ b/packages/tdesign-react/package.json
@@ -76,6 +76,7 @@
   "dependencies": {
     "@babel/runtime": "~7.26.7",
     "@popperjs/core": "~2.11.2",
+    "@tencent/tdesign-chatbot": "1.0.0-beta.35",
     "@types/sortablejs": "^1.10.7",
     "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.1.3",
diff --git a/packages/tdesign-react/site/site.config.mjs b/packages/tdesign-react/site/site.config.mjs
index 1ae489bb17..e59f8b9fa5 100644
--- a/packages/tdesign-react/site/site.config.mjs
+++ b/packages/tdesign-react/site/site.config.mjs
@@ -81,6 +81,30 @@ export const docs = [
         component: () => import('@tdesign/components/chatbot/chatbot.md'),
         componentEn: () => import('@tdesign/components/chatbot/chatbot.en-US.md'),
       },
+      {
+        title: 'ChatThinking 思考过程',
+        titleEn: 'ChatThinking',
+        name: 'chat-thinking',
+        path: '/react/components/chat-thinking',
+        component: () => import('@tdesign/components/chat-thinking/chat-thinking.md'),
+        componentEn: () => import('@tdesign/components/chat-thinking/chat-thinking.en-US.md'),
+      },
+      {
+        title: 'ChatSender 对话输入',
+        titleEn: 'ChatSender',
+        name: 'chat-sender',
+        path: '/react/components/chat-sender',
+        component: () => import('@tdesign/components/chat-sender/chat-sender.md'),
+        componentEn: () => import('@tdesign/components/chat-sender/chat-sender.en-US.md'),
+      },
+      {
+        title: 'ChatLoading 对话加载',
+        titleEn: 'ChatLoading',
+        name: 'chat-loading',
+        path: '/react/components/chat-loading',
+        component: () => import('@tdesign/components/chat-loading/chat-loading.md'),
+        componentEn: () => import('@tdesign/components/chat-loading/chat-loading.en-US.md'),
+      },
     ],
   },
   {