diff --git a/.gitignore b/.gitignore
index af6656d400..a0dea569b3 100755
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,5 @@ Dockerfile
 robotMsg.json
 .gitlogmap
 .eslintcache
+.codebuddy
+.tico
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index db50e1696e..7e99754fea 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,12 @@
 {
   "eslint.format.enable": true,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue"
+  ],
   "[vue]": {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
@@ -42,6 +48,8 @@
     "tmenu",
     "tnode",
     "vnode",
-    "wechat"
+    "wechat",
+    "Actionbar",
+    "vueify"
   ]
 }
diff --git a/internal/builds/vue-next-chat/build-components.ts b/internal/builds/vue-next-chat/build-components.ts
index edf2aa0c7f..1c1ebea004 100644
--- a/internal/builds/vue-next-chat/build-components.ts
+++ b/internal/builds/vue-next-chat/build-components.ts
@@ -179,7 +179,11 @@ export const buildEs = async () => {
       input: [...inputList, `!${joinProComponentsChatRoot('index-lib.ts')}`],
       // 为了保留 style/css.js
       treeshake: false,
-      external: esExternal,
+      external: [
+        ...esExternal,
+        /\.css$/, // 排除所有 CSS 文件
+        /tdesign-web-components.*\.css$/, // 排除 tdesign-web-components 的 CSS 文件
+      ],
       plugins: [multiInput({ relative: joinProComponentsChatRoot() }), ...getPlugins({ cssBuildType: 'multi' })],
     });
     bundle.write({
@@ -203,7 +207,13 @@ export const buildEs = async () => {
 export const buildEsm = async () => {
   const bundle = await rollup({
     input: [...inputList, `!${joinProComponentsChatRoot('index-lib.ts')}`],
-    external: [...externalDeps, ...externalPeerDeps, /@tdesign\/common-style/],
+    external: [
+      ...externalDeps,
+      ...externalPeerDeps,
+      /@tdesign\/common-style/,
+      /\.css$/, // 排除所有 CSS 文件
+      /tdesign-web-components.*\.css$/, // 排除 tdesign-web-components 的 CSS 文件
+    ],
     plugins: [multiInput({ relative: joinProComponentsChatRoot() }), ...getPlugins({ cssBuildType: 'source' })],
   });
   await bundle.write({
diff --git a/internal/builds/vue-next-chat/build-types.ts b/internal/builds/vue-next-chat/build-types.ts
index f4238d2d73..7a68e66dc7 100644
--- a/internal/builds/vue-next-chat/build-types.ts
+++ b/internal/builds/vue-next-chat/build-types.ts
@@ -11,7 +11,7 @@ const generateSourceTypes = async () => {
   const typesRoot = joinWorkspaceRoot(typesTempDir);
 
   // 2. 删除 style 目录
-  const styleDirPaths = await glob(`${joinPosix(typesRoot, 'packages/**/style')}`);
+  const styleDirPaths = await glob(`${joinPosix(typesRoot, 'packages/pro-components/chat/**/style')}`);
   await Promise.all(
     styleDirPaths.map(async (styleDirPath) => {
       await remove(styleDirPath);
@@ -27,20 +27,17 @@ const generateTargetTypes = async (target: 'es' | 'esm' | 'lib' | 'cjs') => {
 
   // 1. 复制 packages/pro-components/chat 到 packages/tdesign-vue-next-chat/target 下
   const targetDir = joinTdesignVueNextChatRoot(`${target}`);
-  // TODO
-  // temp delete 'dist/types/packages/pro-components/chat/_example'
+
   // should be use correct tsconfig.json to generate correct types
-  await remove(joinPosix(typesRoot, `packages/pro-components/chat/_example`));
   await copy(joinPosix(typesRoot, `packages/pro-components/chat`), targetDir);
 
   // 2. 替换 @tdesign/common-js 为 tdesign-vue-next/common/js
-  // TODO: check if this is needed, NOW chat does not use common-js
-  // const dtsPaths = await glob(`${joinPosix(targetDir, '**/*.d.ts')}`);
-  // const rewrite = dtsPaths.map(async (filePath) => {
-  //   const content = await readFile(filePath, 'utf8');
-  //   await writeFile(filePath, content.replace(/@tdesign\/common-js/g, `tdesign-vue-next/${target}/common/js`), 'utf8');
-  // });
-  // await Promise.all(rewrite);
+  const dtsPaths = await glob(`${joinPosix(targetDir, '**/*.d.ts')}`);
+  const rewrite = dtsPaths.map(async (filePath) => {
+    const content = await readFile(filePath, 'utf8');
+    await writeFile(filePath, content.replace(/@tdesign\/common-js/g, `tdesign-vue-next/${target}/common/js`), 'utf8');
+  });
+  await Promise.all(rewrite);
 };
 
 const removeSourceTypes = async () => {
@@ -52,7 +49,6 @@ export const buildTypes = async () => {
   try {
     await removeSourceTypes();
     await generateSourceTypes();
-    // const targets = ['es', 'esm', 'lib', 'cjs'] as const;
     const targets = ['es', 'esm'] as const;
     await Promise.all(
       targets.map(async (target) => {
diff --git a/internal/utils/src/catalogs.ts b/internal/utils/src/catalogs.ts
index 9681ab8014..e5ad69f706 100644
--- a/internal/utils/src/catalogs.ts
+++ b/internal/utils/src/catalogs.ts
@@ -60,7 +60,7 @@ export const catalogs = {
     sortablejs: '^1.15.0',
     tinycolor2: '^1.6.0',
     validator: '^13.9.0',
-    vue: '^3.3.9',
+    vue: '^3.5.0',
     'vue-router': '^4.2.4',
   },
   docs: {
diff --git a/package.json b/package.json
index 4f1b12bfcf..89c32d2ed1 100644
--- a/package.json
+++ b/package.json
@@ -83,4 +83,4 @@
       "eslint --fix --cache"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/packages/components/affix/affix.tsx b/packages/components/affix/affix.tsx
index 1cd9d12e08..d9401678fa 100644
--- a/packages/components/affix/affix.tsx
+++ b/packages/components/affix/affix.tsx
@@ -14,7 +14,7 @@ export default defineComponent({
     const COMPONENT_NAME = usePrefixClass('affix');
     const renderContent = useContent();
 
-    const affixWrapRef = ref<HTMLElement>(null);
+    const affixWrapRef = ref(null);
     const affixRef = ref<HTMLElement>(null);
     const placeholderEL = ref(document?.createElement('div')); // 占位节点
     const ticking = ref(false);
diff --git a/packages/components/alert/alert.tsx b/packages/components/alert/alert.tsx
index 4f23b14e57..c3ac2872ac 100644
--- a/packages/components/alert/alert.tsx
+++ b/packages/components/alert/alert.tsx
@@ -40,9 +40,9 @@ export default defineComponent({
 
     const renderIconTNode = useIcon();
     // alert的dom引用
-    const alertRef = ref<HTMLElement | null>(null);
+    const alertRef = ref<HTMLElement>();
     // description的dom引用
-    const descriptionRef = ref<HTMLElement | null>(null);
+    const descriptionRef = ref<HTMLElement>();
     // desc高度
     const descHeight = ref(0);
     // 是否可见，关闭后置为false
diff --git a/packages/components/anchor/anchor-target.tsx b/packages/components/anchor/anchor-target.tsx
index fd62a17287..b39ab9282c 100644
--- a/packages/components/anchor/anchor-target.tsx
+++ b/packages/components/anchor/anchor-target.tsx
@@ -30,6 +30,7 @@ export default defineComponent({
       const className = [`${COMPONENT_NAME.value}__target`];
       const iconClassName = `${classPrefix.value}-copy`;
       return (
+        // @ts-expect-error
         <TAG id={id} class={className}>
           {children && children(null)}
           <Popup content={globalConfig.value.copyText} placement="top" showArrow class={iconClassName}>
diff --git a/packages/components/anchor/anchor.tsx b/packages/components/anchor/anchor.tsx
index 2b43dda4dc..7f8d4dafc5 100644
--- a/packages/components/anchor/anchor.tsx
+++ b/packages/components/anchor/anchor.tsx
@@ -40,7 +40,7 @@ export default defineComponent({
     const anchorRef = ref<HTMLElement | null>(null);
     const links = ref<string[]>([]);
     const active = ref('');
-    const scrollContainer = ref<ANCHOR_CONTAINER>(null);
+    const scrollContainer = ref<ANCHOR_CONTAINER>();
     const handleScrollLock = ref<boolean>(false);
     const activeLineStyle = reactive({});
     const COMPONENT_NAME = usePrefixClass('anchor');
diff --git a/packages/components/avatar/__tests__/avatar.test.tsx b/packages/components/avatar/__tests__/avatar.test.tsx
index f65501212c..921e71479f 100644
--- a/packages/components/avatar/__tests__/avatar.test.tsx
+++ b/packages/components/avatar/__tests__/avatar.test.tsx
@@ -13,6 +13,7 @@ describe('Avatar', () => {
   describe('props', () => {
     let wrapper: VueWrapper<InstanceType<typeof Avatar>> | null = null;
     beforeEach(() => {
+      // @ts-ignore TODO
       wrapper = mount(<Avatar>Avatar</Avatar>) as VueWrapper<InstanceType<typeof Avatar>>;
     });
 
diff --git a/packages/components/breadcrumb/breadcrumb-item.tsx b/packages/components/breadcrumb/breadcrumb-item.tsx
index fdc45307f2..5f328f7398 100644
--- a/packages/components/breadcrumb/breadcrumb-item.tsx
+++ b/packages/components/breadcrumb/breadcrumb-item.tsx
@@ -56,6 +56,7 @@ export default defineComponent({
     });
 
     const handleClick = () => {
+      // @ts-ignore
       const router = props.router || proxy.$router;
 
       if (props.to && router) {
diff --git a/packages/components/calendar/calendar.tsx b/packages/components/calendar/calendar.tsx
index 00cf19fd4a..7687a2762f 100644
--- a/packages/components/calendar/calendar.tsx
+++ b/packages/components/calendar/calendar.tsx
@@ -275,7 +275,6 @@ export default defineComponent({
               <div class={cls.controlSectionCell.value}>
                 <TCheckTag
                   class={cls.controlTag.value}
-                  theme={state.isShowWeekend ? 'default' : 'primary'}
                   size="large"
                   {...weekendBtn.vBind.value}
                   disabled={weekendBtn.isDisabled.value}
diff --git a/packages/components/cascader/cascader.tsx b/packages/components/cascader/cascader.tsx
index de79e8b13f..37126bbe10 100644
--- a/packages/components/cascader/cascader.tsx
+++ b/packages/components/cascader/cascader.tsx
@@ -58,12 +58,11 @@ export default defineComponent({
         return renderTNodeJSX('suffixIcon');
       }
 
-      const { visible, disabled } = cascaderContext.value;
+      const { visible } = cascaderContext.value;
       return (
         <FakeArrow
           overlayClassName={getFakeArrowIconClass(classPrefix.value, STATUS.value, cascaderContext.value)}
           isActive={visible}
-          disabled={disabled}
         />
       );
     };
@@ -189,7 +188,6 @@ export default defineComponent({
                   option={props.option}
                   options={props.options}
                   empty={props.empty}
-                  visible={visible}
                   trigger={props.trigger}
                   loading={props.loading}
                   loadingText={props.loadingText}
diff --git a/packages/components/color-picker/color-picker-panel.tsx b/packages/components/color-picker/color-picker-panel.tsx
index da77c940c7..740a3dab84 100644
--- a/packages/components/color-picker/color-picker-panel.tsx
+++ b/packages/components/color-picker/color-picker-panel.tsx
@@ -11,6 +11,6 @@ export default defineComponent({
   setup(props, { attrs }) {
     const newProps = computed(() => pickBy({ ...props, ...attrs }, (v) => v !== undefined));
     const prefix = usePrefixClass();
-    return () => <ColorPanel {...newProps.value} popupProps={null} class={`${prefix.value}-is-inline`} />;
+    return () => <ColorPanel {...newProps.value} class={`${prefix.value}-is-inline`} />;
   },
 });
diff --git a/packages/components/color-picker/components/panel/saturation.tsx b/packages/components/color-picker/components/panel/saturation.tsx
index e2dfc0d33b..f64b49e6c5 100644
--- a/packages/components/color-picker/components/panel/saturation.tsx
+++ b/packages/components/color-picker/components/panel/saturation.tsx
@@ -12,7 +12,7 @@ export default defineComponent({
   props: baseProps,
   setup(props) {
     const baseClassName = useBaseClassName();
-    const refPanel = ref<HTMLElement>(null);
+    const refPanel = ref<HTMLElement>();
     const refThumb = ref<HTMLElement>(null);
     const dragInstance = ref<Draggable>(null);
     const panelRect = reactive({
diff --git a/packages/components/color-picker/components/panel/slider.tsx b/packages/components/color-picker/components/panel/slider.tsx
index 48013301b3..2ab397937b 100644
--- a/packages/components/color-picker/components/panel/slider.tsx
+++ b/packages/components/color-picker/components/panel/slider.tsx
@@ -30,7 +30,7 @@ export default defineComponent({
   },
   setup(props) {
     const baseClassName = useBaseClassName();
-    const refPanel = ref<HTMLElement>(null);
+    const refPanel = ref<HTMLElement>();
     const refThumb = ref<HTMLElement>(null);
     const dragInstance = ref<Draggable>(null);
     const panelRect = reactive({
diff --git a/packages/components/config-provider/type.ts b/packages/components/config-provider/type.ts
index eee886a56e..4bb50a9691 100644
--- a/packages/components/config-provider/type.ts
+++ b/packages/components/config-provider/type.ts
@@ -318,6 +318,11 @@ export interface ChatConfig {
    * @default ''
    */
   dislikeTipText?: string;
+  /**
+   * 语言配置，“分享”占位描述文本
+   * @default ''
+   */
+  shareTipText?: string;
   /**
    * 语言配置，“复制代码”占位描述文本
    * @default ''
diff --git a/packages/components/date-picker/DatePicker.tsx b/packages/components/date-picker/DatePicker.tsx
index 47f98c0a65..dc0ca044f4 100644
--- a/packages/components/date-picker/DatePicker.tsx
+++ b/packages/components/date-picker/DatePicker.tsx
@@ -389,7 +389,6 @@ export default defineComponent({
           }
           popupVisible={!isReadOnly.value && popupVisible.value}
           valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })}
-          needConfirm={props.needConfirm}
           {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])}
           panel={() => <TSinglePanel {...panelProps.value} />}
           tagInputProps={{
diff --git a/packages/components/empty/empty.tsx b/packages/components/empty/empty.tsx
index 35a9931388..f8e0578400 100644
--- a/packages/components/empty/empty.tsx
+++ b/packages/components/empty/empty.tsx
@@ -5,7 +5,7 @@ import { useConfig, useTNodeJSX, usePrefixClass, useCommonClassName } from '@tde
 
 import props from './props';
 import type { TdEmptyProps } from './type';
-import Image from '../image';
+import Image, { ImageProps } from '../image';
 import MaintenanceSvg from './components/MaintenanceSvg';
 import NetworkErrorSvg from './components/NetworkErrorSvg';
 import EmptySvg from './components/EmptySvg';
@@ -82,7 +82,7 @@ export default defineComponent({
       } else if (data && Reflect.has(data, 'setup')) {
         result = h(data as unknown);
       } else if (isPlainObject(data)) {
-        result = <Image {...data} />;
+        result = <Image {...(data as ImageProps)} />;
       }
 
       return data ? result : null;
diff --git a/packages/components/form/__tests__/form-item.test.tsx b/packages/components/form/__tests__/form-item.test.tsx
index 6961bcf793..9f91b22e44 100644
--- a/packages/components/form/__tests__/form-item.test.tsx
+++ b/packages/components/form/__tests__/form-item.test.tsx
@@ -10,7 +10,7 @@ describe('FormItem', () => {
       const wrapper = mount(
         <Form>
           <FormItem label="label" name="name" for="name">
-            <Input id="name" />
+            <Input />
           </FormItem>
         </Form>,
       );
@@ -22,7 +22,7 @@ describe('FormItem', () => {
       const wrapper = mount(
         <Form>
           <FormItem label="label" name="name" help="help text">
-            <Input id="name" />
+            <Input />
           </FormItem>
         </Form>,
       );
@@ -33,7 +33,7 @@ describe('FormItem', () => {
       const wrapperSlot = mount(
         <Form>
           <FormItem label="label" name="name" v-slots={{ help: () => 'help text' }}>
-            <Input id="name" />
+            <Input />
           </FormItem>
         </Form>,
       );
@@ -43,7 +43,7 @@ describe('FormItem', () => {
       const wrapperFunction = mount(
         <Form>
           <FormItem label="label" name="name" help={renderHelp}>
-            <Input id="name" />
+            <Input />
           </FormItem>
         </Form>,
       );
@@ -54,7 +54,7 @@ describe('FormItem', () => {
       const wrapper = mount(
         <Form>
           <FormItem label="label" name="name">
-            <Input id="name" />
+            <Input />
           </FormItem>
         </Form>,
       );
@@ -65,7 +65,7 @@ describe('FormItem', () => {
       const wrapperSlot = mount(
         <Form>
           <FormItem name="name" v-slots={{ label: () => 'label' }}>
-            <Input id="name" />
+            <Input />
           </FormItem>
         </Form>,
       );
@@ -75,7 +75,7 @@ describe('FormItem', () => {
       const wrapperFunction = mount(
         <Form>
           <FormItem name="name" label={renderHelp}>
-            <Input id="name" />
+            <Input />
           </FormItem>
         </Form>,
       );
@@ -85,7 +85,7 @@ describe('FormItem', () => {
     it('labelAlign[string]', () => {
       const formItemWrapper = mount(
         <FormItem label="label" name="name">
-          <Input id="name" />
+          <Input />
         </FormItem>,
       );
 
@@ -99,7 +99,7 @@ describe('FormItem', () => {
         mount(
           <Form label-align="right">
             <FormItem label="label" name="name" labelAlign={align}>
-              <Input id="name" />
+              <Input />
             </FormItem>
           </Form>,
         );
@@ -114,7 +114,7 @@ describe('FormItem', () => {
         mount(
           <Form label-width="100px">
             <FormItem label="label" name="name" labelWidth={labelWidth}>
-              <Input id="name" />
+              <Input />
             </FormItem>
           </Form>,
         );
@@ -134,7 +134,7 @@ describe('FormItem', () => {
           return () => (
             <Form rules={rules}>
               <FormItem label="label" name="name">
-                <Input id="name" />
+                <Input />
               </FormItem>
             </Form>
           );
diff --git a/packages/components/form/__tests__/form.hooks.test.tsx b/packages/components/form/__tests__/form.hooks.test.tsx
index 47722be7f8..1282940fe5 100644
--- a/packages/components/form/__tests__/form.hooks.test.tsx
+++ b/packages/components/form/__tests__/form.hooks.test.tsx
@@ -20,6 +20,7 @@ describe('Form hooks', () => {
       const wrapper = mount(TestComponent, {
         props: { disabled: true },
       });
+      // @ts-ignore: TODO
       expect(wrapper.vm.disabledState).toBe(true);
     });
 
@@ -32,6 +33,7 @@ describe('Form hooks', () => {
           },
         },
       });
+      // @ts-ignore: TODO
       expect(wrapper.vm.disabledState).toBe(true);
     });
 
@@ -49,6 +51,7 @@ describe('Form hooks', () => {
           return { disabledState };
         },
       });
+      // @ts-ignore: TODO
       expect(wrapper.vm.disabledState).toBe(true);
     });
 
@@ -66,6 +69,7 @@ describe('Form hooks', () => {
           return { disabledState };
         },
       });
+      // @ts-ignore: TODO
       expect(wrapper.vm.disabledState).toBe(false);
     });
   });
diff --git a/packages/components/form/__tests__/form.test.tsx b/packages/components/form/__tests__/form.test.tsx
index 86ed989a4c..8c2b00bafb 100644
--- a/packages/components/form/__tests__/form.test.tsx
+++ b/packages/components/form/__tests__/form.test.tsx
@@ -14,6 +14,7 @@ describe('Form', () => {
   describe('props', () => {
     let wrapper: VueWrapper<InstanceType<typeof Form>> | null = null;
     beforeEach(() => {
+      // @ts-ignore
       wrapper = mount(
         <Form>
           <FormItem label="姓名" name="name">
diff --git a/packages/components/form/form.tsx b/packages/components/form/form.tsx
index 4042020fd4..8d18bf9fa7 100644
--- a/packages/components/form/form.tsx
+++ b/packages/components/form/form.tsx
@@ -34,7 +34,7 @@ export default defineComponent({
       readonly,
     });
 
-    const formRef = ref<HTMLFormElement>(null);
+    const formRef = ref<HTMLFormElement>();
     const children = ref<FormItemContext[]>([]);
 
     const {
diff --git a/packages/components/grid/col.tsx b/packages/components/grid/col.tsx
index a963299771..0273c09931 100644
--- a/packages/components/grid/col.tsx
+++ b/packages/components/grid/col.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, inject } from 'vue';
+import { computed, defineComponent, inject, h } from 'vue';
 import props from './col-props';
 import { useRowSize } from './hooks';
 import { RowProviderType, parseFlex, calcColPadding, getColClasses } from './utils';
@@ -31,10 +31,14 @@ export default defineComponent({
 
     return () => {
       const { tag: TAG } = props;
-      return (
-        <TAG class={colClasses.value} style={colStyle.value}>
-          {renderTNodeJSX('default')}
-        </TAG>
+
+      return h(
+        TAG,
+        {
+          class: colClasses.value,
+          style: colStyle.value,
+        },
+        [renderTNodeJSX('default')],
       );
     };
   },
diff --git a/packages/components/grid/row.tsx b/packages/components/grid/row.tsx
index 130db51256..6969b4630a 100644
--- a/packages/components/grid/row.tsx
+++ b/packages/components/grid/row.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, provide, computed, toRefs, reactive } from 'vue';
+import { defineComponent, provide, computed, toRefs, reactive, h } from 'vue';
 import props from './row-props';
 import { useRowSize } from './hooks';
 import { getRowClasses, RowProviderType, calcRowStyle } from './utils';
@@ -27,10 +27,13 @@ export default defineComponent({
 
     return () => {
       const { tag: TAG } = props;
-      return (
-        <TAG class={rowClasses.value} style={rowStyle.value}>
-          {renderTNodeJSX('default')}
-        </TAG>
+      return h(
+        TAG,
+        {
+          class: rowClasses.value,
+          style: rowStyle.value,
+        },
+        [renderTNodeJSX('default')],
       );
     };
   },
diff --git a/packages/components/guide/guide.tsx b/packages/components/guide/guide.tsx
index da78cb8c3a..9cb50ac304 100644
--- a/packages/components/guide/guide.tsx
+++ b/packages/components/guide/guide.tsx
@@ -42,7 +42,7 @@ export default defineComponent({
     // dialog ref
     const dialogTooltipRef = ref<HTMLElement>();
     // ! popup ref 不确定这里的类型是否完全正确
-    const popupTooltipRef = ref<InstanceType<typeof Popup>>();
+    const popupTooltipRef = ref();
     // 是否开始展示
     const actived = ref<boolean>(false);
     // 步骤总数
diff --git a/packages/components/image-viewer/base/ImageViewerUtils.tsx b/packages/components/image-viewer/base/ImageViewerUtils.tsx
index c46d9ca512..5f1b9649ae 100644
--- a/packages/components/image-viewer/base/ImageViewerUtils.tsx
+++ b/packages/components/image-viewer/base/ImageViewerUtils.tsx
@@ -60,7 +60,6 @@ export default defineComponent({
           <TImageViewerIcon icon={() => <ZoomOutIcon size="medium" />} onClick={props.onZoomOut} />
           <TImageViewerIcon
             class={`${classPrefix.value}-image-viewer__utils-scale`}
-            size="medium"
             label={`${largeNumberToFixed(String(props.scale * 100))}%`}
           />
 
diff --git a/packages/components/image-viewer/image-viewer.tsx b/packages/components/image-viewer/image-viewer.tsx
index 167c267a24..a623993da8 100644
--- a/packages/components/image-viewer/image-viewer.tsx
+++ b/packages/components/image-viewer/image-viewer.tsx
@@ -193,7 +193,6 @@ export default defineComponent({
                   src={image.thumbnail || image.mainImage}
                   error=""
                   class={`${COMPONENT_NAME.value}__header-img`}
-                  onClick={() => onImgClick(index)}
                 />
               </div>
             ))}
@@ -236,13 +235,7 @@ export default defineComponent({
       const imageSrc = typeof firstImage === 'string' ? firstImage : firstImage.mainImage || firstImage.thumbnail;
       return (
         <div class={`${COMPONENT_NAME.value}__trigger`}>
-          <Image
-            src={imageSrc}
-            alt="preview"
-            fit="contain"
-            class={`${COMPONENT_NAME.value}__trigger-img`}
-            onClick={() => openHandler()}
-          />
+          <Image src={imageSrc} alt="preview" fit="contain" class={`${COMPONENT_NAME.value}__trigger-img`} />
           <div class={`${COMPONENT_NAME.value}__trigger--hover`} onClick={() => openHandler()}>
             <span>
               <BrowseIcon size="1.4em" class={`${COMPONENT_NAME.value}__trigger-icon`} />
diff --git a/packages/components/image/image.tsx b/packages/components/image/image.tsx
index e37a58905a..61b8e2362f 100644
--- a/packages/components/image/image.tsx
+++ b/packages/components/image/image.tsx
@@ -12,8 +12,8 @@ export default defineComponent({
   name: 'TImage',
   props,
   setup(props) {
-    const divRef = ref<HTMLElement>(null);
-    const imgRef = ref<HTMLImageElement>(null);
+    const divRef = ref<HTMLElement>();
+    const imgRef = ref<HTMLImageElement>();
     let io: IntersectionObserver = null;
 
     const { src } = toRefs(props);
diff --git a/packages/components/input-number/input-number.tsx b/packages/components/input-number/input-number.tsx
index 3e16abb00c..aacd76de13 100644
--- a/packages/components/input-number/input-number.tsx
+++ b/packages/components/input-number/input-number.tsx
@@ -51,6 +51,7 @@ export default defineComponent({
             readonly={p.isReadonly.value}
             autocomplete="off"
             placeholder={props.placeholder}
+            // @ts-expect-error
             unselectable={p.isReadonly.value ? 'on' : 'off'}
             autoWidth={props.autoWidth}
             align={props.align || (props.theme === 'row' ? 'center' : undefined)}
diff --git a/packages/components/input/hooks/useInput.ts b/packages/components/input/hooks/useInput.ts
index 17a096e187..130bfef857 100644
--- a/packages/components/input/hooks/useInput.ts
+++ b/packages/components/input/hooks/useInput.ts
@@ -31,7 +31,7 @@ export function useInput(props: ExtendsTdInputProps, expose: (exposed: Record<st
   const isHover = ref(false);
   const focused = ref(false);
   const renderType = ref(props.type);
-  const inputRef = ref<HTMLInputElement>(null);
+  const inputRef = ref<HTMLInputElement>();
 
   const limitParams = computed(() => ({
     value: [undefined, null].includes(innerValue.value) ? undefined : String(innerValue.value),
diff --git a/packages/components/input/hooks/useInputWidth.ts b/packages/components/input/hooks/useInputWidth.ts
index 202689a117..042e41a8eb 100644
--- a/packages/components/input/hooks/useInputWidth.ts
+++ b/packages/components/input/hooks/useInputWidth.ts
@@ -6,7 +6,7 @@ const ANIMATION_TIME = 100;
 
 export function useInputWidth(props: TdInputProps, inputRef: Ref<HTMLInputElement>, innerValue: Ref<InputValue>) {
   const { autoWidth, placeholder } = toRefs(props);
-  const inputPreRef = ref<HTMLSpanElement>(null);
+  const inputPreRef = ref<HTMLSpanElement>();
   const observerTimer = ref(null);
 
   const updateInputWidth = () => {
diff --git a/packages/components/loading/__tests__/loading.test.tsx b/packages/components/loading/__tests__/loading.test.tsx
index d635aecf52..0630f3d78c 100644
--- a/packages/components/loading/__tests__/loading.test.tsx
+++ b/packages/components/loading/__tests__/loading.test.tsx
@@ -90,7 +90,7 @@ describe('Loading', () => {
     });
 
     it(':fullscreen[boolean]', async () => {
-      const wrapper = mount(<Loading fullscreen={true} loading={true} attachTo={document.body} />);
+      const wrapper = mount(<Loading fullscreen={true} loading={true} attach={() => document.body} />);
       await nextTick();
       expect(wrapper.find('.t-loading__fullscreen').exists()).toBe(true);
       expect(wrapper.element).toMatchSnapshot();
@@ -153,7 +153,7 @@ describe('Loading', () => {
 
     it(':preventScrollThrough[boolean]', async () => {
       const wrapper = mount(
-        <Loading fullscreen={true} preventScrollThrough={true} loading={false} attachTo={document.body} />,
+        <Loading fullscreen={true} preventScrollThrough={true} loading={false} attach={() => document.body} />,
       );
       await nextTick();
       expect(document.body.classList.contains('t-loading--lock')).toBe(false);
diff --git a/packages/components/loading/loading.tsx b/packages/components/loading/loading.tsx
index 77bd54758e..039adbbf98 100644
--- a/packages/components/loading/loading.tsx
+++ b/packages/components/loading/loading.tsx
@@ -105,7 +105,7 @@ export default defineComponent({
     return () => {
       const { fullScreenClasses, baseClasses, withContentClasses, attachClasses, normalClasses } = classes.value;
 
-      const defaultIndicator = <GradientIcon size={props.size} />;
+      const defaultIndicator = <GradientIcon />;
       const indicator = loading.value && renderTNodeJSX('indicator', defaultIndicator);
       const text = showText.value && <div class={`${classPrefix.value}-loading__text`}>{renderTNodeJSX('text')}</div>;
 
diff --git a/packages/components/menu/__tests__/head-menu.test.tsx b/packages/components/menu/__tests__/head-menu.test.tsx
index 2ec7ee5c36..3063efde8a 100644
--- a/packages/components/menu/__tests__/head-menu.test.tsx
+++ b/packages/components/menu/__tests__/head-menu.test.tsx
@@ -22,15 +22,6 @@ describe('HeadMenu', () => {
       });
       expect(wrapper.element).toMatchSnapshot();
     });
-
-    it(':height', () => {
-      const wrapper = mount({
-        render() {
-          return <HeadMenu height={'750px'}></HeadMenu>;
-        },
-      });
-      expect(wrapper.element).toMatchSnapshot();
-    });
   });
 
   describe('slot', () => {
diff --git a/packages/components/menu/__tests__/menu-item.test.tsx b/packages/components/menu/__tests__/menu-item.test.tsx
index c4acd09a88..a1990b9e09 100644
--- a/packages/components/menu/__tests__/menu-item.test.tsx
+++ b/packages/components/menu/__tests__/menu-item.test.tsx
@@ -7,38 +7,6 @@ const $routerMock = { push: vi.fn() };
 describe('MenuItem', () => {
   // test props api
   describe('props', () => {
-    it(':name', () => {
-      const wrapper = mount(
-        {
-          render() {
-            return (
-              <Menu>
-                <MenuItem name="1-1"></MenuItem>
-              </Menu>
-            );
-          },
-        },
-        { global: { mocks: { $router: $routerMock } } },
-      );
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
-    it(':route', () => {
-      const wrapper = mount(
-        {
-          render() {
-            return (
-              <Menu>
-                <MenuItem route={'/user/list'}></MenuItem>
-              </Menu>
-            );
-          },
-        },
-        { global: { mocks: { $router: $routerMock } } },
-      );
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
     it(':disabled', () => {
       const wrapper = mount(
         {
diff --git a/packages/components/menu/__tests__/menu.test.tsx b/packages/components/menu/__tests__/menu.test.tsx
index d044c8e3eb..8d23932767 100644
--- a/packages/components/menu/__tests__/menu.test.tsx
+++ b/packages/components/menu/__tests__/menu.test.tsx
@@ -41,15 +41,6 @@ describe('Menu', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it(':height', () => {
-      const wrapper = mount({
-        render() {
-          return <Menu height={'750px'}></Menu>;
-        },
-      });
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
     it(':collapsed', () => {
       const wrapper = mount({
         render() {
@@ -58,15 +49,6 @@ describe('Menu', () => {
       });
       expect(wrapper.element).toMatchSnapshot();
     });
-
-    it(':collapsedWidth', () => {
-      const wrapper = mount({
-        render() {
-          return <Menu collapsedWidth={'100px'}></Menu>;
-        },
-      });
-      expect(wrapper.element).toMatchSnapshot();
-    });
   });
 
   describe('slot', () => {
diff --git a/packages/components/menu/__tests__/submenu.test.tsx b/packages/components/menu/__tests__/submenu.test.tsx
index 6197ddcec9..be50658424 100644
--- a/packages/components/menu/__tests__/submenu.test.tsx
+++ b/packages/components/menu/__tests__/submenu.test.tsx
@@ -13,18 +13,6 @@ const Menu = {
 describe('Submenu', () => {
   // test props api
   describe('props', () => {
-    it(':name', () => {
-      const wrapper = mount({
-        provide: {
-          TdMenu: Menu,
-        },
-        render() {
-          return <Submenu name="1"></Submenu>;
-        },
-      });
-      expect(wrapper.element).toMatchSnapshot();
-    });
-
     it(':disabled', () => {
       const wrapper = mount({
         provide: {
diff --git a/packages/components/menu/_usage/index.vue b/packages/components/menu/_usage/index.vue
index 46361e95ac..de3d872362 100644
--- a/packages/components/menu/_usage/index.vue
+++ b/packages/components/menu/_usage/index.vue
@@ -1,8 +1,8 @@
 <!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
 <template>
   <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
-    <template #menu="{ configProps }">
-      <div :style="{ padding: '24px', background: 'var(--bg-color-page)', borderRadius: '3px' }">
+    <template #menu="{ configProps }"
+      ><div :style="{ padding: '24px', background: 'var(--bg-color-page)', borderRadius: '3px' }">
         <t-menu v-bind="configProps">
           <t-menu-item value="0">
             <template #icon>
@@ -35,42 +35,21 @@
         </t-menu>
       </div></template
     >
-    <template #headMenu="{ configProps }">
-      <div :style="{ padding: '24px', background: 'var(--bg-color-page)', borderRadius: '3px' }">
-        <t-head-menu style="margin-bottom: 20px" v-bind="configProps">
+    <template #headMenu="{ configProps }"
+      ><div :style="{ padding: '24px', background: 'var(--bg-color-page)', borderRadius: '3px' }">
+        <t-head-menu style="marginbottom: 20px" v-bind="configProps">
           <template #logo>
             <img src="https://www.tencent.com/img/index/menu_logo_hover.png" width="136" />
           </template>
           <t-menu-item value="0">
-            <template #icon>
-              <t-icon name="app" />
-            </template>
-            仪表盘
+            <span>菜单1</span>
+          </t-menu-item>
+          <t-menu-item value="1">
+            <span>菜单2</span>
           </t-menu-item>
-          <t-submenu value="1" title="资源列表">
-            <template #icon>
-              <t-icon name="code" />
-            </template>
-            <t-menu-item value="1-1" disabled>
-              <span>菜单二</span>
-            </t-menu-item>
-          </t-submenu>
-          <t-submenu value="2" title="调度平台">
-            <template #icon>
-              <t-icon name="file" />
-            </template>
-            <t-submenu value="2-1" title="二级菜单-1">
-              <t-menu-item value="3-1">三级菜单-1</t-menu-item>
-              <t-menu-item value="3-2">三级菜单-2</t-menu-item>
-              <t-menu-item value="3-3">三级菜单-3</t-menu-item>
-            </t-submenu>
-            <t-menu-item value="2-2">
-              <span>二级菜单-2</span>
-            </t-menu-item>
-          </t-submenu>
         </t-head-menu>
-      </div>
-    </template>
+      </div></template
+    >
   </base-usage>
 </template>
 
diff --git a/packages/components/menu/head-menu.tsx b/packages/components/menu/head-menu.tsx
index 1e367e3d98..cea164e881 100644
--- a/packages/components/menu/head-menu.tsx
+++ b/packages/components/menu/head-menu.tsx
@@ -128,6 +128,7 @@ export default defineComponent({
       if (href) {
         window.location.href = activeMenuItem.href;
       }
+      // @ts-ignore: TODO
       const router = activeMenuItem.router || proxy.$router;
       if (to && router) {
         replace ? router.replace(to) : router.push(to);
diff --git a/packages/components/menu/menu-item.tsx b/packages/components/menu/menu-item.tsx
index ff072b341f..d98048b563 100644
--- a/packages/components/menu/menu-item.tsx
+++ b/packages/components/menu/menu-item.tsx
@@ -33,6 +33,7 @@ export default defineComponent({
         [`${classPrefix.value}-submenu__item`]: !!submenu && !menu.isHead,
       },
     ]);
+    // @ts-ignore
     const router = computed(() => props.router || instance?.proxy.$router);
 
     const handleClick = (e: MouseEvent) => {
diff --git a/packages/components/menu/submenu.tsx b/packages/components/menu/submenu.tsx
index 3d407be2e6..24cfee7c0f 100644
--- a/packages/components/menu/submenu.tsx
+++ b/packages/components/menu/submenu.tsx
@@ -27,8 +27,16 @@ import { TdSubmenuProps } from './type';
 
 export default defineComponent({
   name: 'TSubmenu',
-  props,
-  setup(props: TdSubmenuProps, { attrs, slots }) {
+  props: {
+    ...props,
+    expandType: String,
+  },
+  setup(
+    props: TdSubmenuProps & {
+      expandType: string;
+    },
+    { slots },
+  ) {
     const classPrefix = usePrefixClass();
     const renderTNodeJSX = useTNodeJSX();
     const renderContent = useContent();
@@ -41,7 +49,7 @@ export default defineComponent({
     const submenu = inject<TdSubMenuInterface>('TdSubmenu', {});
     const { setSubPopup, closeParentPopup, cancelHideTimer } = submenu;
 
-    const mode = computed(() => attrs.expandType || menu.mode.value);
+    const mode = computed(() => props.expandType || menu.mode.value);
 
     const menuItems = ref([]); // 因composition-api的缺陷，不用reactive， 详见：https://github.com/vuejs/composition-api/issues/637
     const isActive = computed(() => activeValues.value.indexOf(props.value) > -1);
diff --git a/packages/components/pagination/pagination-mini.tsx b/packages/components/pagination/pagination-mini.tsx
index 808315fe01..864781c541 100644
--- a/packages/components/pagination/pagination-mini.tsx
+++ b/packages/components/pagination/pagination-mini.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, VNode } from 'vue';
 import { isObject } from 'lodash-es';
 import {
   ChevronLeftIcon as TdChevronLeftIcon,
@@ -47,7 +47,7 @@ export default defineComponent({
       return { prev: false, current: false, next: false };
     });
 
-    const renderWithTooltip = (content: string | undefined, node: JSX.Element) => {
+    const renderWithTooltip = (content: string | undefined, node: VNode) => {
       if (!content) return node;
       return (
         <TTooltip content={content} showArrow={false}>
diff --git a/packages/components/popup/popup.tsx b/packages/components/popup/popup.tsx
index af310827ad..ecdbe31e0f 100644
--- a/packages/components/popup/popup.tsx
+++ b/packages/components/popup/popup.tsx
@@ -107,10 +107,10 @@ export default defineComponent({
     let showTimeout: any;
     let hideTimeout: any;
 
-    const triggerEl = ref<HTMLElement>(null);
-    const overlayEl = ref<HTMLElement>(null);
-    const popperEl = ref<HTMLElement>(null);
-    const containerRef = ref<typeof Container>(null);
+    const triggerEl = ref<HTMLElement>();
+    const overlayEl = ref<HTMLElement>();
+    const popperEl = ref<HTMLElement>();
+    const containerRef = ref<typeof Container>();
     const isOverlayHover = ref(false);
 
     const arrowStyle = ref<CSSProperties>({});
diff --git a/packages/components/progress/progress.tsx b/packages/components/progress/progress.tsx
index e7bfc6869c..b984863ee0 100644
--- a/packages/components/progress/progress.tsx
+++ b/packages/components/progress/progress.tsx
@@ -166,7 +166,7 @@ export default defineComponent({
 
     // 当文字小于进度条宽度时，文字在进度条外部，否则在内部
     const infoIsOut = ref(true);
-    const infoRef = ref<HTMLDivElement>(null);
+    const infoRef = ref<HTMLDivElement>();
 
     const separateClasses = computed(() => {
       return infoIsOut.value ? `${COMPONENT_NAME.value}--over-ten` : `${COMPONENT_NAME.value}--under-ten`;
diff --git a/packages/components/qrcode/__tests__/qrcode.test.tsx b/packages/components/qrcode/__tests__/qrcode.test.tsx
index a0aec93388..b58007d1c8 100644
--- a/packages/components/qrcode/__tests__/qrcode.test.tsx
+++ b/packages/components/qrcode/__tests__/qrcode.test.tsx
@@ -13,9 +13,8 @@ describe('QRCode', () => {
     const defaultFgColor = '#000000'; // 实际使用时为 rgba(0, 0, 0, .9)
     const defaultSize = 160;
     beforeEach(() => {
-      wrapper = mount(<QRCode value="https://tdesign.tencent.com/"></QRCode>) as VueWrapper<
-        InstanceType<typeof QRCode>
-      >;
+      // @ts-ignore
+      wrapper = mount(<QRCode value="https://tdesign.tencent.com/"></QRCode>);
     });
 
     it(':bgColor[string]', async () => {
diff --git a/packages/components/qrcode/components/qrcode-canvas.tsx b/packages/components/qrcode/components/qrcode-canvas.tsx
index 5e1d567dac..e2f48fb014 100644
--- a/packages/components/qrcode/components/qrcode-canvas.tsx
+++ b/packages/components/qrcode/components/qrcode-canvas.tsx
@@ -15,7 +15,7 @@ export default defineComponent({
   setup(props) {
     const imgSrc = computed(() => props.imageSettings?.src);
 
-    const imageRef = ref<HTMLImageElement>(null);
+    const imageRef = ref<HTMLImageElement>();
 
     const canvasRef = ref<HTMLCanvasElement>(null);
 
diff --git a/packages/components/select/option.tsx b/packages/components/select/option.tsx
index 254c23c0c0..aee570bd2d 100644
--- a/packages/components/select/option.tsx
+++ b/packages/components/select/option.tsx
@@ -23,6 +23,7 @@ export default defineComponent({
     isVirtual: Boolean,
     bufferSize: Number,
     checkAll: Boolean,
+    onRowMounted: Function,
   },
   emits: ['row-mounted'],
 
diff --git a/packages/components/slider/slider-button.tsx b/packages/components/slider/slider-button.tsx
index a21fa3337f..183e060b70 100644
--- a/packages/components/slider/slider-button.tsx
+++ b/packages/components/slider/slider-button.tsx
@@ -1,14 +1,4 @@
-import {
-  ComponentPublicInstance,
-  PropType,
-  computed,
-  defineComponent,
-  inject,
-  nextTick,
-  reactive,
-  ref,
-  watchEffect,
-} from 'vue';
+import { PropType, computed, defineComponent, inject, nextTick, reactive, ref, watchEffect } from 'vue';
 import TTooltip from '../tooltip/index';
 import { TdSliderProps } from './type';
 
@@ -108,7 +98,7 @@ export default defineComponent({
     };
 
     const handleMouseEnter = () => {
-      (buttonRef.value as ComponentPublicInstance).focus();
+      (buttonRef.value as HTMLDivElement).focus();
       toggleTooltip(true);
     };
     const handleMouseLeave = () => {
diff --git a/packages/components/slider/slider.tsx b/packages/components/slider/slider.tsx
index 8db4a6878e..0d4c7d2b27 100644
--- a/packages/components/slider/slider.tsx
+++ b/packages/components/slider/slider.tsx
@@ -397,7 +397,6 @@ export default defineComponent({
               vertical={vertical.value}
               value={firstValue.value}
               ref={firstButtonRef}
-              disabled={disabled.value}
               range={props.range}
               position="start"
               tooltip-props={props.tooltipProps}
@@ -415,7 +414,6 @@ export default defineComponent({
                 vertical={vertical.value}
                 value={secondValue.value}
                 ref={secondButtonRef}
-                disabled={disabled.value}
                 label={props.label}
                 range={props.range}
                 position="end"
diff --git a/packages/components/table/base-table.tsx b/packages/components/table/base-table.tsx
index c51f249919..917a448763 100644
--- a/packages/components/table/base-table.tsx
+++ b/packages/components/table/base-table.tsx
@@ -412,7 +412,6 @@ export default defineComponent({
           offsetBottom={0}
           {...getAffixProps(props.horizontalScrollAffixedBottom)}
           style={{ marginTop: `-${scrollbarWidth.value * 2}px` }}
-          horizontalScrollAffixedBottom
           ref={horizontalScrollAffixRef}
         >
           <div
diff --git a/packages/components/table/components/editable-cell.tsx b/packages/components/table/components/editable-cell.tsx
index 36e0104eba..205645b8d9 100644
--- a/packages/components/table/components/editable-cell.tsx
+++ b/packages/components/table/components/editable-cell.tsx
@@ -71,6 +71,7 @@ export default defineComponent({
     onValidate: Function as PropType<EditableCellProps['onValidate']>,
     onRuleChange: Function as PropType<EditableCellProps['onRuleChange']>,
     onEditableChange: Function as PropType<EditableCellProps['onEditableChange']>,
+    onUpdateEditedCell: Function,
   },
 
   emits: ['update-edited-cell'],
diff --git a/packages/components/table/components/tr.tsx b/packages/components/table/components/tr.tsx
index 3d49359779..75fe04b389 100644
--- a/packages/components/table/components/tr.tsx
+++ b/packages/components/table/components/tr.tsx
@@ -157,6 +157,7 @@ export default defineComponent({
     tableElm: {},
     // eslint-disable-next-line
     tableContentElm: {},
+    onRowMounted: Function,
   },
   emits: ['row-mounted'],
   setup(props: TrProps, context: SetupContext) {
diff --git a/packages/components/table/hooks/useFilter.tsx b/packages/components/table/hooks/useFilter.tsx
index 4cbf105125..0bb30050f3 100644
--- a/packages/components/table/hooks/useFilter.tsx
+++ b/packages/components/table/hooks/useFilter.tsx
@@ -177,7 +177,6 @@ export default function useFilter(props: TdPrimaryTableProps, context: SetupCont
         locale={props.locale}
         onReset={onReset}
         onConfirm={onConfirm}
-        onInnerFilterChange={onInnerFilterChange}
         primaryTableElement={primaryTableRef.value?.$el}
         onVisibleChange={onPopupVisibleChange}
       ></TableFilterController>
diff --git a/packages/components/table/hooks/useRowSelect.tsx b/packages/components/table/hooks/useRowSelect.tsx
index 20fcb7cb84..bef9d560bb 100644
--- a/packages/components/table/hooks/useRowSelect.tsx
+++ b/packages/components/table/hooks/useRowSelect.tsx
@@ -16,7 +16,7 @@ import {
 import { isRowSelectedDisabled } from '@tdesign/common-js/table/utils';
 import { TableClassName } from './useClassName';
 import Checkbox from '../../checkbox';
-import Radio from '../../radio';
+import Radio, { RadioProps } from '../../radio';
 import log from '@tdesign/common-js/log/index';
 
 export default function useRowSelect(
@@ -136,7 +136,7 @@ export default function useRowSelect(
       },
       onChange: () => handleSelectChange(row),
     };
-    if (column.type === 'single') return <Radio {...selectBoxProps} />;
+    if (column.type === 'single') return <Radio {...(selectBoxProps as RadioProps)} />;
     if (column.type === 'multiple') {
       const isIndeterminate = props.indeterminateSelectedRowKeys?.length
         ? props.indeterminateSelectedRowKeys.includes(get(row, props.rowKey))
diff --git a/packages/components/table/hooks/useSorter.tsx b/packages/components/table/hooks/useSorter.tsx
index 84aa524cb5..ee525aef7e 100644
--- a/packages/components/table/hooks/useSorter.tsx
+++ b/packages/components/table/hooks/useSorter.tsx
@@ -143,6 +143,7 @@ export default function useSorter(props: TdPrimaryTableProps, { slots }: SetupCo
       <SorterButton
         v-slots={{ sortIcon: slots.sortIcon }}
         {...sorterButtonsProps}
+        // @ts-expect-error
         onSortIconClick={(_: MouseEvent, p: { descending: boolean }) => handleSortHeaderClick(col, p)}
       />
     );
diff --git a/packages/components/tabs/__tests__/tabs.test.tsx b/packages/components/tabs/__tests__/tabs.test.tsx
index 2cdc662ff7..b0dea8c741 100644
--- a/packages/components/tabs/__tests__/tabs.test.tsx
+++ b/packages/components/tabs/__tests__/tabs.test.tsx
@@ -94,7 +94,7 @@ describe('Tabs', () => {
       const wrapper = mount({
         render() {
           return (
-            <Tabs onChange={fn} value={2} removable={true} onRemove={onTabRemoveFn}>
+            <Tabs onChange={fn} value={2} onRemove={onTabRemoveFn}>
               <TabPanel value={1} label={'1'} removable={true}>
                 1
               </TabPanel>
diff --git a/packages/components/tabs/tab-nav.tsx b/packages/components/tabs/tab-nav.tsx
index ed9a1ef0dc..db0eebc3c9 100644
--- a/packages/components/tabs/tab-nav.tsx
+++ b/packages/components/tabs/tab-nav.tsx
@@ -214,7 +214,9 @@ export default defineComponent({
     const renderNavsContent = () => {
       return props.panels.map((panel, index) => {
         let label;
+        // @ts-ignore
         if (panel?.children?.label) {
+          // @ts-ignore
           label = panel.children.label();
         } else if (isFunction(panel.label)) {
           label = panel.label(h);
@@ -228,7 +230,6 @@ export default defineComponent({
         return (
           <TTabNavItem
             ref={setActiveTab}
-            draggable={draggable}
             key={panel.value}
             index={index}
             theme={props.theme}
diff --git a/packages/components/tabs/tabs.tsx b/packages/components/tabs/tabs.tsx
index ac09a93f7f..5e03a14164 100644
--- a/packages/components/tabs/tabs.tsx
+++ b/packages/components/tabs/tabs.tsx
@@ -1,4 +1,4 @@
-import { ComponentPublicInstance, defineComponent, provide, Ref, toRefs } from 'vue';
+import { ComponentInternalInstance, defineComponent, provide, Ref, toRefs } from 'vue';
 import TTabPanel from './tab-panel';
 import TTabNav from './tab-nav';
 import { TabValue, TdTabsProps } from './type';
@@ -43,12 +43,13 @@ export default defineComponent({
 
       const flatContent = (ct: any) => {
         return ct
-          .map((item: ComponentPublicInstance) => {
+          .map((item: ComponentInternalInstance) => {
+            // @ts-ignore TODO
             if (item.children && isArray(item.children)) return flatContent(item.children);
             return item;
           })
           .flat()
-          .filter((item: ComponentPublicInstance) => {
+          .filter((item: ComponentInternalInstance) => {
             return item.type.name === 'TTabPanel';
           });
       };
@@ -58,11 +59,12 @@ export default defineComponent({
     const renderHeader = () => {
       const panels = (props.list?.length ? props.list : getSlotPanels()) || [];
       const actionContent = renderTNodeJSX('action');
-      const panelsData = panels.map((item: ComponentPublicInstance) => {
+      const panelsData = panels.map((item: ComponentInternalInstance) => {
         const selfItem = item;
 
         if (item.props) {
           Object.keys(item.props).forEach((key) => {
+            // @ts-ignore TODO
             selfItem[key] = item.props[key];
           });
         }
diff --git a/packages/components/tag/check-tag.tsx b/packages/components/tag/check-tag.tsx
index 7dfd20e0e0..1614638f67 100644
--- a/packages/components/tag/check-tag.tsx
+++ b/packages/components/tag/check-tag.tsx
@@ -71,6 +71,7 @@ export default defineComponent({
         <Tag
           class={tagClass.value}
           disabled={props.disabled}
+          // @ts-expect-error
           tabindex={props.disabled ? undefined : '0'}
           onFocus={onCheckboxFocus}
           onBlur={onCheckboxBlur}
diff --git a/packages/components/time-picker/panel/time-picker-panel.tsx b/packages/components/time-picker/panel/time-picker-panel.tsx
index 57501528c3..29dd80108d 100644
--- a/packages/components/time-picker/panel/time-picker-panel.tsx
+++ b/packages/components/time-picker/panel/time-picker-panel.tsx
@@ -20,6 +20,7 @@ export default defineComponent({
     isFooterDisplay: Boolean,
     handleConfirmClick: Function,
     onChange: Function,
+    position: String,
   },
   setup(props) {
     const { globalConfig } = useConfig('timePicker');
diff --git a/packages/components/time-picker/time-range-picker.tsx b/packages/components/time-picker/time-range-picker.tsx
index 3bd5c63fb1..59beef2347 100644
--- a/packages/components/time-picker/time-range-picker.tsx
+++ b/packages/components/time-picker/time-range-picker.tsx
@@ -200,7 +200,6 @@ export default defineComponent({
               isFooterDisplay={true}
               value={currentValue.value[currentPanelIdx.value || 0]}
               onChange={handleTimeChange}
-              onPick={handleOnPick}
               handleConfirmClick={handleClickConfirm}
               position={currentPanelIdx.value === 0 ? 'start' : 'end'}
               activeIndex={currentPanelIdx.value}
diff --git a/packages/components/transfer/components/transfer-list.tsx b/packages/components/transfer/components/transfer-list.tsx
index b68de7d1e4..ad06dee4f5 100644
--- a/packages/components/transfer/components/transfer-list.tsx
+++ b/packages/components/transfer/components/transfer-list.tsx
@@ -230,7 +230,7 @@ export default defineComponent({
     };
     const renderContent = () => {
       const isDraggable = props.draggable && props.listType === TARGET;
-      let defaultNode: JSX.Element = null;
+      let defaultNode: VNode = null;
       if (!isDraggable) {
         defaultNode = (
           <TCheckboxGroup value={props.checkedValue} onChange={handleCheckedChange}>
@@ -357,10 +357,9 @@ export default defineComponent({
         >
           {props.search && (
             <Search
-              searchValue={filterValue.value}
+              value={filterValue.value}
               placeholder={t(globalConfig.value.placeholder)}
               onChange={handleSearch}
-              disabled={props.disabled}
               search={props.search}
             />
           )}
diff --git a/packages/components/tree-select/tree-select.tsx b/packages/components/tree-select/tree-select.tsx
index 31539371b9..7d2d407003 100644
--- a/packages/components/tree-select/tree-select.tsx
+++ b/packages/components/tree-select/tree-select.tsx
@@ -370,7 +370,6 @@ export default defineComponent({
         activable={!props.multiple}
         checkable={props.multiple}
         disabled={tDisabled.value || multiLimitDisabled.value}
-        size={props.size}
         filter={filterByText.value}
         actived={actived.value}
         expanded={expanded.value}
@@ -393,7 +392,6 @@ export default defineComponent({
     const renderSuffixIcon = () => (
       <FakeArrow
         isActive={innerVisible.value}
-        disabled={props.disabled}
         overlayClassName={{
           [`${classPrefix.value}-fake-arrow--highlight`]: innerVisible.value,
           [`${classPrefix.value}-fake-arrow--disable`]: props.disabled,
diff --git a/packages/components/tree/hooks/useRenderLabel.tsx b/packages/components/tree/hooks/useRenderLabel.tsx
index 8f7c703725..ea6bb10323 100644
--- a/packages/components/tree/hooks/useRenderLabel.tsx
+++ b/packages/components/tree/hooks/useRenderLabel.tsx
@@ -56,22 +56,17 @@ export default function useRenderLabel(state: TypeTreeItemState) {
       if (node.isDisabled()) {
         checkboxDisabled = true;
       }
-      const itemCheckProps = {
-        ...checkProps,
-        disabled: checkboxDisabled,
-      };
 
       labelNode = (
         <TCheckBox
           class={labelClasses}
           checked={node.checked}
           indeterminate={node.indeterminate}
-          disabled={checkboxDisabled}
           name={String(node.value)}
           onChange={handleChange}
           stopLabelTrigger={shouldStopLabelTrigger.value}
-          ignore={treeProps.expandOnClickNode ? 'active' : 'expand,active'}
-          props={itemCheckProps}
+          {...checkProps}
+          disabled={checkboxDisabled}
           title={node.label}
         >
           {labelNode}
diff --git a/packages/components/tree/hooks/useTreeNodes.tsx b/packages/components/tree/hooks/useTreeNodes.tsx
index 4b851e74f9..bfc91cbfce 100644
--- a/packages/components/tree/hooks/useTreeNodes.tsx
+++ b/packages/components/tree/hooks/useTreeNodes.tsx
@@ -69,6 +69,7 @@ export default function useTreeNodes(state: TypeTreeState) {
         stateId={stateId}
         itemKey={nodeUniqueId}
         treeScope={scope}
+        // @ts-expect-error
         onClick={handleClick}
         onChange={handleChange}
       />
diff --git a/packages/components/tree/tree.tsx b/packages/components/tree/tree.tsx
index 6f6408b4d0..26945baf3c 100644
--- a/packages/components/tree/tree.tsx
+++ b/packages/components/tree/tree.tsx
@@ -111,6 +111,7 @@ export default defineComponent({
             const val = spec[name as keyof typeof spec];
             delete spec[name as keyof typeof spec];
             const methodName = `set${upperFirst(name)}`;
+            // @ts-ignore TODO
             const setupMethod = this[methodName];
             if (isFunction(setupMethod)) {
               setupMethod.call(this, node, val);
@@ -298,10 +299,8 @@ export default defineComponent({
       treeNodeList = (
         <TransitionGroup
           tag="div"
-          class={`${cname}__list`}
           enter-active-class={`${cname}__item--enter-active`}
           leave-active-class={`${cname}__item--leave-active`}
-          style={scrollStyles}
         >
           {treeNodeViews}
         </TransitionGroup>
diff --git a/packages/components/typography/__tests__/typography-text.test.tsx b/packages/components/typography/__tests__/typography-text.test.tsx
index 1cc8b48137..4b4555a9e5 100644
--- a/packages/components/typography/__tests__/typography-text.test.tsx
+++ b/packages/components/typography/__tests__/typography-text.test.tsx
@@ -36,6 +36,7 @@ describe('Typography Text', () => {
       const renderCopySlot = () => 'test';
       const wrapper = mount(() => (
         <Text
+          //@ts-ignore
           id="test"
           copyable={{
             onCopy: handleCopy,
diff --git a/packages/components/typography/text.tsx b/packages/components/typography/text.tsx
index 1f06b4fd42..5c71d97fc1 100644
--- a/packages/components/typography/text.tsx
+++ b/packages/components/typography/text.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref, h } from 'vue';
 import { useContent, usePrefixClass } from '@tdesign/shared-hooks';
 import props from './text-props';
 import copy from './utils/copy-to-clipboard';
@@ -28,7 +28,7 @@ export default defineComponent({
 
       function wrap(needed: boolean, Tag: string, styles: object = {}) {
         if (!needed) return;
-        currentContent = <Tag style={styles}>{currentContent}</Tag>;
+        currentContent = h(Tag, { style: styles }, [currentContent]);
       }
 
       wrap(strong, 'strong');
diff --git a/packages/components/upload/components/dragger-file.tsx b/packages/components/upload/components/dragger-file.tsx
index b5bfe1c209..08008a8ed1 100644
--- a/packages/components/upload/components/dragger-file.tsx
+++ b/packages/components/upload/components/dragger-file.tsx
@@ -69,7 +69,11 @@ export default defineComponent({
         <div class={`${uploadPrefix}__dragger-img-wrap`}>
           <ImageViewer
             images={[url]}
-            trigger={(h, { open }: any) => <Image src={url || file.raw} onClick={open} error="" loading="" />}
+            trigger={(h, { open }: any) => (
+              <div onClick={open}>
+                <Image src={url || file.raw} error="" loading="" />
+              </div>
+            )}
             {...(props.imageViewerProps as ImageViewerProps)}
           ></ImageViewer>
         </div>
diff --git a/packages/components/upload/components/multiple-flow-list.tsx b/packages/components/upload/components/multiple-flow-list.tsx
index ec4affb654..33e7d25093 100644
--- a/packages/components/upload/components/multiple-flow-list.tsx
+++ b/packages/components/upload/components/multiple-flow-list.tsx
@@ -281,19 +281,16 @@ export default defineComponent({
       const className = `${uploadPrefix.value}__file-thumbnail`;
       if (IMAGE_REGEXP.test(fileType)) {
         return (
-          <Image
-            class={className}
-            src={file.url || file.raw}
-            fit="scale-down"
-            error=""
-            loading=""
+          <div
             onClick={(e: MouseEvent) => {
               e.preventDefault();
               currentPreviewFile.value = [file];
               previewIndex.value = 0;
               props.onPreview?.({ file, index: 0, e });
             }}
-          />
+          >
+            <Image class={className} src={file.url || file.raw} fit="scale-down" error="" loading="" />
+          </div>
         );
       }
       return <div class={className}>{getFileThumbnailIcon(fileType)}</div>;
diff --git a/packages/components/upload/hooks/useUpload.ts b/packages/components/upload/hooks/useUpload.ts
index 7d2b97f2f5..f086f47461 100644
--- a/packages/components/upload/hooks/useUpload.ts
+++ b/packages/components/upload/hooks/useUpload.ts
@@ -18,7 +18,7 @@ export type ValidateParams = Parameters<TdUploadProps['onValidate']>[0];
 /**
  * 上传组件全部逻辑，方便脱离 UI，自定义 UI 组件
  */
-export default function useUpload(props: TdUploadProps) {
+export default function useUpload(props: TdUploadProps): any {
   const inputRef = ref<HTMLInputElement>();
   // TODO: Form 表单控制上传组件是否禁用
   const { disabled, autoUpload, isBatchUpload, multiple, files, modelValue, defaultFiles } = toRefs(props);
diff --git a/packages/components/upload/upload.tsx b/packages/components/upload/upload.tsx
index 90d25b1695..c5fac16d66 100644
--- a/packages/components/upload/upload.tsx
+++ b/packages/components/upload/upload.tsx
@@ -146,7 +146,6 @@ export default defineComponent({
         cancelUpload={cancelUpload}
         triggerUpload={triggerUpload}
         uploadFiles={uploadFiles}
-        onCancelUpload={props.onCancelUpload}
         v-slots={{
           fileListDisplay: slots.fileListDisplay,
           'file-list-display': slots['file-list-display'],
diff --git a/packages/pro-components/chat/_example/chat-action.vue b/packages/pro-components/chat/_example/chat-action.vue
deleted file mode 100644
index 0bd43c3158..0000000000
--- a/packages/pro-components/chat/_example/chat-action.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div class="chat-action-content">
-    <t-chat-action
-      :is-good="isGood"
-      :is-bad="isBad"
-      content="它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。"
-      :operation-btn="['good', 'bad', 'replay', 'copy']"
-      @operation="handleOperation"
-    />
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-const isGood = ref(false);
-const isBad = ref(false);
-const handleOperation = (type, options) => {
-  console.log(type, options);
-  if (type === 'good') {
-    isGood.value = !isGood.value;
-    isBad.value = false;
-  } else if (type === 'bad') {
-    isBad.value = !isBad.value;
-    isGood.value = false;
-  }
-};
-</script>
diff --git a/packages/pro-components/chat/_example/chat-ai.vue b/packages/pro-components/chat/_example/chat-ai.vue
deleted file mode 100644
index 64ff734d5f..0000000000
--- a/packages/pro-components/chat/_example/chat-ai.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <t-chat-ai
-    ref="chatAreaRef"
-    :welcome="welcome"
-    layout="single"
-    :user-meta="userMeta"
-    :assistant-meta="assistantMeta"
-    class="chat-ai"
-    :operation-btn="['copy', 'replay']"
-    :footer="true"
-    :show-user-msg="true"
-    :chat-request="chatRequest"
-    @operation="handleOperation"
-    @clear="handleClearChat"
-  >
-  </t-chat-ai>
-</template>
-<script setup>
-import { ref } from 'vue';
-const chatAreaRef = ref(null);
-const userMeta = {
-  avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
-  name: '自己',
-};
-const assistantMeta = {
-  avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
-  name: 'TDesignAI',
-};
-const welcome = ref(['你有什么要问我的吗？', '你好，有什么可以帮到你的吗？']);
-const handleOperation = (type, options) => {
-  // type 操作类型 good bad replay
-  console.log('handleOperation', type, options);
-};
-const handleClearChat = () => {
-  console.log('handleClearChat');
-};
-/**
- * 聊天入参
- * @param {Array} params.messages 消息列表
- * @param {AbortSignal} params.signal 终止请求
- * */
-
-const chatRequest = async (params) => {
-  const { messages, cancel } = params;
-  const controller = new AbortController();
-  const { signal } = controller;
-  cancel?.(controller);
-  // 存在安全风险，不推荐明文传入apiKey，推荐通过接口代理
-  const apiKey = 'your-api-key';
-  const response = await fetch('//hunyuanapi.woa.com/openapi/v1/chat/completions', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer${apiKey ? ` ${apiKey}` : ''}`,
-    },
-    body: JSON.stringify({
-      messages, // 消息列表
-      model: 'hunyuan', // 模型
-      stream: true, // 流式
-    }),
-    signal,
-  });
-  return response;
-};
-</script>
-<style scoped>
-.chat-ai {
-  height: 600px;
-}
-</style>
diff --git a/packages/pro-components/chat/_example/chat-footer-slot.vue b/packages/pro-components/chat/_example/chat-footer-slot.vue
deleted file mode 100644
index a85e18d7d8..0000000000
--- a/packages/pro-components/chat/_example/chat-footer-slot.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <t-chat
-    :clear-history="false"
-    :reverse="true"
-    :text-loading="loading"
-    :data="[
-      {
-        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
-        name: 'TDesignAI',
-        datetime: '今天16:38',
-        content: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
-        role: 'assistant',
-      },
-      {
-        avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
-        name: '自己',
-        datetime: '今天16:38',
-        content: '南极的自动提款机叫什么名字？',
-        role: 'user',
-      },
-    ]"
-  >
-    <!-- eslint-disable vue/no-unused-vars -->
-    <template #name="{ item, index }">
-      {{ item.name }}
-    </template>
-    <template #avatar="{ item, index }">
-      <t-avatar size="large" shape="circle" :image="item.avatar" />
-    </template>
-    <template #datetime="{ item, index }">
-      {{ item.datetime }}
-    </template>
-    <template #content="{ item, index }">
-      <t-chat-content :content="item.content" />
-    </template>
-    <template #footer>
-      <t-chat-input :stop-disabled="isStreamLoad" @send="inputEnter" @stop="handleStop"> </t-chat-input>
-    </template>
-  </t-chat>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-const loading = ref(false);
-const isStreamLoad = ref(false);
-const handleStop = function () {
-  isStreamLoad.value = false;
-};
-// 模拟消息发送
-const inputEnter = function (inputValue: string) {
-  if (isStreamLoad.value) {
-    return;
-  }
-  if (!inputValue) return;
-  isStreamLoad.value = true;
-  loading.value = true;
-  // 模拟接口请求响应中
-  setTimeout(() => {
-    loading.value = false;
-  }, 3000);
-  //   模拟流式数据加载中
-  setTimeout(() => {
-    isStreamLoad.value = false;
-  }, 5000);
-};
-</script>
diff --git a/packages/pro-components/chat/_example/item-reasoning.vue b/packages/pro-components/chat/_example/item-reasoning.vue
deleted file mode 100644
index 7ca5a1fad2..0000000000
--- a/packages/pro-components/chat/_example/item-reasoning.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <t-chat-item
-    avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
-    name="AI"
-    role="assistant"
-    datetime="今天16:38"
-    :content="markdownContent"
-    :reasoning="{
-      expandIconPlacement: 'right',
-      onExpandChange: handleChange(),
-      collapsePanelProps: {
-        header: renderHeader(true),
-        content: renderReasoningContent(reasoningContent),
-      },
-    }"
-    variant="text"
-  ></t-chat-item>
-</template>
-<script setup lang="jsx">
-const reasoningContent = `嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。`;
-const markdownContent = `牛顿第一定律（惯性定律）**并不适用于所有参考系**，它只在**惯性参考系**中成立。以下是关键点：
-
----
-
-### **1. 牛顿第一定律的核心**
-- **内容**：物体在不受外力（或合力为零）时，将保持静止或匀速直线运动状态。
-- **本质**：定义了惯性系的存在——即存在一类参考系，在其中惯性定律成立。`;
-const handleChange = (value) => {
-  console.log('handleChange', value);
-};
-
-/**
- * 渲染推理模块的头部自定义内容
- * @param {boolean} flag - 思维链内容是否加载中
- * @param {string} endText - 思维链加载完成时显示的文本
- * @returns {JSX.Element} 返回对应的头部组件
- */
-const renderHeader = (flag) => {
-  if (flag) {
-    return <t-chat-loading text="思考中..." />;
-  }
-  return (
-    <t-space align="center">
-      <t-icon
-        name="check-circle"
-        style={{
-          color: 'var(--td-success-color-5)',
-          fontSize: '20px',
-          marginRight: '8px',
-        }}
-      />
-      <span>{endText}</span>
-    </t-space>
-  );
-};
-const renderReasoningContent = (content) => <t-chat-content content={content} role="assistant" />;
-</script>
-<style scoped></style>
diff --git a/packages/pro-components/chat/_example/sse.vue b/packages/pro-components/chat/_example/sse.vue
deleted file mode 100644
index b7f6e1be79..0000000000
--- a/packages/pro-components/chat/_example/sse.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <t-chat layout="both" style="height: 600px" :clear-history="false">
-    <template v-for="(item, index) in chatList" :key="index">
-      <t-chat-item :content="item" avatar="https://tdesign.gtimg.com/site/avatar.jpg" variant="base"> </t-chat-item>
-    </template>
-    <template #footer>
-      <t-space align="center">
-        <t-button block variant="outline" @click="addMessage">非流式消息</t-button>
-        <t-button v-if="!startRender" block variant="outline" @click="toggleStartRender">流式消息</t-button>
-        <t-button v-else block variant="dashed" @click="stop">停止</t-button>
-      </t-space>
-    </template>
-  </t-chat>
-</template>
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-
-const chatList = ref(new Array(5).fill('牛顿第一定律是否适用于所有参考系？'));
-const startRender = ref(false);
-const addMessage = () => {
-  chatList.value = [
-    `牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用`,
-    ...chatList.value,
-  ];
-};
-const toggleStartRender = () => {
-  startRender.value = true;
-};
-const stop = () => {
-  startRender.value = false;
-};
-watch(
-  [chatList, startRender],
-  ([newChatList, newStartRender], []) => {
-    if (!newStartRender) return;
-
-    const timer = setTimeout(() => {
-      chatList.value = [newChatList[0] + '逐字渲染', ...newChatList.slice(1)];
-    }, 100);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  },
-  { deep: true },
-);
-</script>
diff --git a/packages/pro-components/chat/_usage/index.vue b/packages/pro-components/chat/_usage/index.vue
deleted file mode 100644
index 39ca0e2171..0000000000
--- a/packages/pro-components/chat/_usage/index.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
-<template>
-  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
-    <template #chat="{ configProps }"
-      ><t-chat
-        v-bind="configProps"
-        :data="[
-          {
-            avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
-            content: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
-            role: 'assistant',
-          },
-          {
-            avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
-            content: '南极的自动提款机叫什么名字？',
-            role: 'user',
-          },
-        ]"
-      >
-      </t-chat
-    ></template>
-  </base-usage>
-</template>
-
-<script setup lang="jsx">
-/* eslint-disable */
-import { ref, onMounted } from 'vue';
-import configJson from './props.json';
-
-const configList = ref(configJson);
-const panelList = [{ label: 'chat', value: 'chat' }];
-
-const usageCodeMap = {
-  chat: "\n      <t-chat v-bind=\"configProps\" :data=\"[\n        {\n        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',\n        content: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',\n        role: 'assistant',\n      },\n      {\n        avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',\n        content: '南极的自动提款机叫什么名字？',\n        role: 'user',\n      }]\">\n      </t-chat>\n      ",
-};
-const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
-
-function onPanelChange(panel) {
-  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
-}
-</script>
diff --git a/packages/pro-components/chat/_usage/props.json b/packages/pro-components/chat/_usage/props.json
deleted file mode 100644
index f8d8304375..0000000000
--- a/packages/pro-components/chat/_usage/props.json
+++ /dev/null
@@ -1,48 +0,0 @@
-[
-  {
-    "name": "animation",
-    "type": "enum",
-    "defaultValue": "skeleton",
-    "options": [
-      {
-        "label": "skeleton",
-        "value": "skeleton"
-      },
-      {
-        "label": "moving",
-        "value": "moving"
-      },
-      {
-        "label": "gradient",
-        "value": "gradient"
-      }
-    ]
-},
-    {
-        "name": "layout",
-        "type": "enum",
-        "defaultValue": "both",
-        "options": [
-          {
-            "label": "both",
-            "value": "both"
-          },
-          {
-            "label": "single",
-            "value": "single"
-          }
-        ]
-},
-{
-  "name": "clearHistory",
-  "type": "Boolean",
-  "defaultValue": true,
-  "options": []
-},
-{
-  "name": "textLoading",
-  "type": "Boolean",
-  "defaultValue": false,
-  "options": []
-}
-]
\ No newline at end of file
diff --git a/packages/pro-components/chat/attachments/_example/attachments-base.vue b/packages/pro-components/chat/attachments/_example/attachments-base.vue
new file mode 100644
index 0000000000..09e2a3dea0
--- /dev/null
+++ b/packages/pro-components/chat/attachments/_example/attachments-base.vue
@@ -0,0 +1,67 @@
+<template>
+  <t-space>
+    <t-attachments :items="filesList" @file-click="handleFileClick"></t-attachments>
+  </t-space>
+</template>
+
+<script setup lang="js">
+const filesList = [
+  {
+    uid: '1',
+    name: 'excel-file.xlsx',
+    size: 111111,
+  },
+  {
+    uid: '2',
+    name: 'word-file.docx',
+    size: 222222,
+  },
+  {
+    uid: '3',
+    name: 'image-file.png',
+    url:'https://tdesign.gtimg.com/site/avatar.jpg',
+    size: 333333,
+  },
+  {
+    uid: '4',
+    name: 'pdf-file.pdf',
+    size: 444444,
+  },
+  {
+    uid: '5',
+    name: 'ppt-file.pptx',
+    size: 555555,
+  },
+  {
+    uid: '6',
+    name: 'video-file.mp4',
+    size: 666666,
+  },
+  {
+    uid: '7',
+    name: 'audio-file.mp3',
+    size: 777777,
+  },
+  {
+    uid: '8',
+    name: 'zip-file.zip',
+    size: 888888,
+  },
+  {
+    uid: '9',
+    name: 'markdown-file.md',
+    size: 999999,
+    description: 'Custom description',
+  },
+  {
+    uid: '10',
+    name: 'word-markdown-file.doc',
+    size: 99899,
+    status: 'progress',
+    percent: '50',
+  },
+];
+const handleFileClick = (e) => {
+  console.log('fileClick', e.detail);
+};
+</script>
diff --git a/packages/pro-components/chat/attachments/_example/attachments-scrollX.vue b/packages/pro-components/chat/attachments/_example/attachments-scrollX.vue
new file mode 100644
index 0000000000..f54c569579
--- /dev/null
+++ b/packages/pro-components/chat/attachments/_example/attachments-scrollX.vue
@@ -0,0 +1,65 @@
+<template>
+  <t-space>
+    <div style="width: 668px">
+      <t-attachments :items="filesList" overflow="scrollX"></t-attachments>
+    </div>
+  </t-space>
+</template>
+
+<script setup lang="js">
+const filesList = [
+  {
+    uid: '1',
+    name: 'excel-file.xlsx',
+    size: 111111,
+  },
+  {
+    uid: '2',
+    name: 'word-file.docx',
+    size: 222222,
+  },
+  {
+    uid: '3',
+    name: 'image-file.png',
+    size: 333333,
+  },
+  {
+    uid: '4',
+    name: 'pdf-file.pdf',
+    size: 444444,
+  },
+  {
+    uid: '5',
+    name: 'ppt-file.pptx',
+    size: 555555,
+  },
+  {
+    uid: '6',
+    name: 'video-file.mp4',
+    size: 666666,
+  },
+  {
+    uid: '7',
+    name: 'audio-file.mp3',
+    size: 777777,
+  },
+  {
+    uid: '8',
+    name: 'zip-file.zip',
+    size: 888888,
+  },
+  {
+    uid: '9',
+    name: 'markdown-file.md',
+    size: 999999,
+    description: 'Custom description',
+  },
+  {
+    uid: '10',
+    name: 'word-markdown-file.doc',
+    size: 99899,
+    status: 'progress',
+    percent: '50',
+  },
+];
+</script>
diff --git a/packages/pro-components/chat/attachments/_example/attachments-scrollY.vue b/packages/pro-components/chat/attachments/_example/attachments-scrollY.vue
new file mode 100644
index 0000000000..67a3ea5b15
--- /dev/null
+++ b/packages/pro-components/chat/attachments/_example/attachments-scrollY.vue
@@ -0,0 +1,65 @@
+<template>
+  <t-space>
+    <div style="width: 668px; height: 50px">
+      <t-attachments :items="filesList" overflow="scrollY" @remove="handleRemove"></t-attachments>
+    </div>
+  </t-space>
+</template>
+
+<script setup lang="js">
+const filesList = [
+  {
+    uid: '1',
+    name: 'excel-file.xlsx',
+    size: 111111,
+  },
+  {
+    uid: '2',
+    name: 'word-file.docx',
+    size: 222222,
+  },
+  {
+    uid: '3',
+    name: 'image-file.png',
+    size: 333333,
+  },
+  {
+    uid: '4',
+    name: 'pdf-file.pdf',
+    size: 444444,
+  },
+  {
+    uid: '5',
+    name: 'ppt-file.pptx',
+    size: 555555,
+  },
+  {
+    uid: '6',
+    name: 'video-file.mp4',
+    size: 666666,
+  },
+  {
+    uid: '7',
+    name: 'audio-file.mp3',
+    size: 777777,
+  },
+  {
+    uid: '8',
+    name: 'zip-file.zip',
+    size: 888888,
+  },
+  {
+    uid: '9',
+    name: 'markdown-file.md',
+    size: 999999,
+    description: 'Custom description',
+  },
+  {
+    uid: '10',
+    name: 'word-markdown-file.doc',
+    size: 99899,
+    status: 'progress',
+    percent: '50',
+  },
+];
+</script>
diff --git a/packages/pro-components/chat/attachments/_usage/index.vue b/packages/pro-components/chat/attachments/_usage/index.vue
new file mode 100644
index 0000000000..859826b5d8
--- /dev/null
+++ b/packages/pro-components/chat/attachments/_usage/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
+    <template #chat="{ configProps }">
+      <div style="width: '600px'">
+        <t-attachments :items="filesList" v-bind="configProps" />
+      </div>
+    </template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+import configJson from './props.json';
+const configList = ref(configJson);
+// labe:组件名  value:chat （不用chat渲染不出来todo）
+const panelList = [{ label: 'Attachments', value: 'chat' }];
+const filesList = [
+  {
+    name: 'excel-file.xlsx',
+    size: 111111,
+  },
+  {
+    name: 'word-file.docx',
+    size: 222222,
+  },
+  {
+    name: 'image-file.png',
+    size: 333333,
+    url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+  },
+  {
+    name: 'pdf-file.pdf',
+    size: 444444,
+  },
+  {
+    name: 'ppt-file.pptx',
+    size: 555555,
+  },
+  {
+    name: 'video-file.mp4',
+    size: 666666,
+  },
+  {
+    name: 'audio-file.mp3',
+    size: 777777,
+  },
+  {
+    name: 'zip-file.zip',
+    size: 888888,
+  },
+  {
+    name: 'markdown-file.md',
+    size: 999999,
+    description: 'Custom description',
+  },
+  {
+    name: 'word-markdown-file.doc',
+    size: 99899,
+    status: 'progress',
+    percent: 50,
+  },
+];
+const usageCodeMap = {
+  chat: ` 
+    <div style="width: '600px'">
+        <t-attachments :items="filesList" v-bind="configProps" />
+    </div>
+    `,
+};
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>
diff --git a/packages/pro-components/chat/attachments/_usage/props.json b/packages/pro-components/chat/attachments/_usage/props.json
new file mode 100644
index 0000000000..4aae856836
--- /dev/null
+++ b/packages/pro-components/chat/attachments/_usage/props.json
@@ -0,0 +1,33 @@
+[
+  {
+    "name": "removable",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  },
+  {
+    "name": "image-viewer",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  },
+  {
+    "name": "overflow",
+    "type": "enum",
+    "defaultValue": "wrap",
+    "options": [
+      {
+        "label": "wrap",
+        "value": "wrap"
+      },
+      {
+        "label": "scrollX",
+        "value": "scrollX"
+      },
+      {
+        "label": "scrollY",
+        "value": "scrollY"
+      }
+    ]
+  }
+]
diff --git a/packages/pro-components/chat/attachments/attachments.md b/packages/pro-components/chat/attachments/attachments.md
new file mode 100644
index 0000000000..290d93aad5
--- /dev/null
+++ b/packages/pro-components/chat/attachments/attachments.md
@@ -0,0 +1,20 @@
+:: BASE_DOC ::
+
+## API
+
+### Attachments Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+imageViewer | Boolean | true | 图片预览开关 | N
+items | Attachment[] | false | 附件列表，同 Upload UploadFile | Y
+overflow | 'wrap'/'scrollX'/'scrollY' | 'wrap' | 文件列表超出时样式 | N
+removable | boolean | true | 是否显示删除按钮 | N
+onRemove | (item: Attachment) => void / undefined | - | 附件移除时的回调函数 | N
+
+### ChatAction Events
+
+名称 | 参数 | 描述
+-- | -- | --
+remove | `(item: Attachment) => void` | 附件移除时的回调函数
+fileClick |	`(item: Attachment) => void`|点击文件时触发
\ No newline at end of file
diff --git a/packages/pro-components/chat/attachments/index.ts b/packages/pro-components/chat/attachments/index.ts
new file mode 100644
index 0000000000..16638a9b16
--- /dev/null
+++ b/packages/pro-components/chat/attachments/index.ts
@@ -0,0 +1,9 @@
+import 'tdesign-web-components/lib/attachments';
+import type { TdAttachmentsProps } from 'tdesign-web-components';
+import type { DefineComponent } from 'vue';
+import { omiVueify } from 'omi-vueify';
+// 附件
+export const Attachments = omiVueify('t-attachments', {
+  methodNames: [],
+}) as DefineComponent<TdAttachmentsProps>;
+export default Attachments;
diff --git a/packages/pro-components/chat/chat-action-props.ts b/packages/pro-components/chat/chat-action-props.ts
deleted file mode 100644
index 4eb9ae8b82..0000000000
--- a/packages/pro-components/chat/chat-action-props.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* eslint-disable */
-
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-import { TdChatActionProps } from './type';
-import { PropType } from 'vue';
-
-export default {
-  /** 被复制的内容 */
-  content: {
-    type: String,
-    default: '',
-  },
-  /** 操作按钮是否可点击 */
-  disabled: Boolean,
-  /** 是否点踩 */
-  isBad: Boolean,
-  /** 是否点赞 */
-  isGood: Boolean,
-  /** 操作按钮配置项，可配置操作按钮选项和顺序 */
-  operationBtn: {
-    type: Array as PropType<TdChatActionProps['operationBtn']>,
-    default: (): TdChatActionProps['operationBtn'] => ['replay', 'copy', 'good', 'bad'],
-  },
-  /** 点击点赞，点踩，复制，重新生成按钮时触发 */
-  onOperation: Function as PropType<TdChatActionProps['onOperation']>,
-};
diff --git a/packages/pro-components/chat/chat-action.md b/packages/pro-components/chat/chat-action.md
deleted file mode 100644
index 839227385b..0000000000
--- a/packages/pro-components/chat/chat-action.md
+++ /dev/null
@@ -1,20 +0,0 @@
-:: BASE_DOC ::
-
-## API
-
-### ChatAction Props
-
-名称 | 类型 | 默认值 | 描述 | 必传
--- | -- | -- | -- | --
-content | String | - | 被复制的内容 | N
-disabled | Boolean | false | 操作按钮是否可点击 | N
-isBad | Boolean | false | 是否点踩 | N
-isGood | Boolean | false | 是否点赞 | N
-operationBtn | Array | ["replay", "copy", "good", "bad"] | 操作按钮配置项，可配置操作按钮选项和顺序。TS 类型：`Array<'replay'\|'copy'\|'good'\|'bad'>` | N
-onOperation | Function |  | TS 类型：`(value:string, context: { e: MouseEvent }) => void`<br/>点击点赞，点踩，复制，重新生成按钮时触发 | N
-
-### ChatAction Events
-
-名称 | 参数 | 描述
--- | -- | --
-operation | `(value:string, context: { e: MouseEvent })` | 点击点赞，点踩，复制，重新生成按钮时触发
diff --git a/packages/pro-components/chat/chat-actionbar/__tests__/__snapshots__/index.test.jsx.snap b/packages/pro-components/chat/chat-actionbar/__tests__/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..0dba53ae2a
--- /dev/null
+++ b/packages/pro-components/chat/chat-actionbar/__tests__/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,249 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ChatAction > :props > :actionBar 1`] = `
+<div
+  class="t-chat__actions"
+>
+  
+  <div
+    class="t-space t-space-horizontal"
+    style="gap: 16px;"
+  >
+    
+    
+    <div
+      class="t-space-item"
+    >
+      
+      <button
+        class="t-button t-button--variant-base t-button--theme-default t-button--shape-rectangle t-size-s copy-btn"
+        data-clipboard-text=""
+        href=""
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          
+          <svg
+            class="t-icon t-icon-copy"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M2 2H15V7.5H13V4H4V13H7.5V15H2V2ZM9 9H22V22H9V9ZM11 11V20H20V11H11Z"
+              fill="currentColor"
+            />
+          </svg>
+          
+        </span>
+      </button>
+      <!---->
+      
+    </div>
+    <!---->
+    
+    
+  </div>
+  <div
+    class="t-space t-space-horizontal"
+    style="gap: 16px;"
+  >
+    
+    
+    <div
+      class="t-space-item"
+    >
+      
+      <button
+        class="t-button t-button--variant-base t-button--theme-default t-button--shape-rectangle t-size-s"
+        href=""
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          
+          <svg
+            class="t-icon t-icon-thumb-up"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M10.8786 1.38257L12.1576 1.59573C14.0863 1.91719 15.5 3.58595 15.5 5.54131V7.99992H20.8195C22.0554 7.99992 22.9955 9.10966 22.7923 10.3287L21.1257 20.3287C20.9649 21.2931 20.1306 21.9999 19.1529 21.9999H7V10.8021L10.8786 1.38257ZM12.1131 3.63742L9 11.1977V19.9999L19.1529 19.9999L20.8195 9.99992H13.5V5.54131C13.5 4.66252 12.9289 3.89951 12.1131 3.63742ZM4 9.99992V21.9999H2V9.99992H4Z"
+              fill="currentColor"
+            />
+          </svg>
+          
+        </span>
+      </button>
+      <!---->
+      
+    </div>
+    <!---->
+    
+    
+  </div>
+  
+</div>
+`;
+
+exports[`ChatAction > :props > :comment 1`] = `
+<div
+  class="t-chat__actions"
+>
+  
+  <div
+    class="t-space t-space-horizontal"
+    style="gap: 16px;"
+  >
+    
+    
+    <div
+      class="t-space-item"
+    >
+      
+      <button
+        class="t-button t-button--variant-base t-button--theme-default t-button--shape-rectangle t-size-s t-chat-button--active"
+        href=""
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          
+          <svg
+            class="t-icon t-icon-thumb-up-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12.1578 1.59573C14.0866 1.91719 15.5002 3.58595 15.5002 5.54131L15.5002 7.99992 20.8198 7.99992C22.0557 7.99992 22.9958 9.10966 22.7926 10.3287L21.1259 20.3287C20.9652 21.2931 20.1308 21.9999 19.1531 21.9999H7.00024L7.00025 10.8021 10.8789 1.38257 12.1578 1.59573zM4.00024 21.9999H2.00024L2.00025 9.99992H4.00025L4.00024 21.9999z"
+              fill="currentColor"
+            />
+          </svg>
+          
+        </span>
+      </button>
+      <!---->
+      
+    </div>
+    <!---->
+    
+    
+  </div>
+  
+</div>
+`;
+
+exports[`ChatAction > :props > :disabled 1`] = `
+<div
+  class="t-chat__actions"
+>
+  
+  <div
+    class="t-space t-space-horizontal"
+    style="gap: 16px;"
+  >
+    
+    
+    <div
+      class="t-space-item"
+    >
+      
+      <button
+        class="t-button t-button--variant-base t-button--theme-default t-button--shape-rectangle t-size-s t-is-disabled copy-btn"
+        data-clipboard-text=""
+        disabled=""
+        href=""
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          
+          <svg
+            class="t-icon t-icon-copy"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M2 2H15V7.5H13V4H4V13H7.5V15H2V2ZM9 9H22V22H9V9ZM11 11V20H20V11H11Z"
+              fill="currentColor"
+            />
+          </svg>
+          
+        </span>
+      </button>
+      <!---->
+      
+    </div>
+    <!---->
+    
+    
+  </div>
+  
+</div>
+`;
+
+exports[`ChatAction > :props > :operation 1`] = `
+<div
+  class="t-chat__actions"
+>
+  
+  <div
+    class="t-space t-space-horizontal"
+    style="gap: 16px;"
+  >
+    
+    
+    <div
+      class="t-space-item"
+    >
+      
+      <button
+        class="t-button t-button--variant-base t-button--theme-default t-button--shape-rectangle t-size-s t-chat-button--active"
+        href=""
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="t-button__text"
+        >
+          
+          <svg
+            class="t-icon t-icon-thumb-up-filled"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12.1578 1.59573C14.0866 1.91719 15.5002 3.58595 15.5002 5.54131L15.5002 7.99992 20.8198 7.99992C22.0557 7.99992 22.9958 9.10966 22.7926 10.3287L21.1259 20.3287C20.9652 21.2931 20.1308 21.9999 19.1531 21.9999H7.00024L7.00025 10.8021 10.8789 1.38257 12.1578 1.59573zM4.00024 21.9999H2.00024L2.00025 9.99992H4.00025L4.00024 21.9999z"
+              fill="currentColor"
+            />
+          </svg>
+          
+        </span>
+      </button>
+      <!---->
+      
+    </div>
+    <!---->
+    
+    
+  </div>
+  
+</div>
+`;
diff --git a/packages/pro-components/chat/chat-actionbar/__tests__/index.test.jsx b/packages/pro-components/chat/chat-actionbar/__tests__/index.test.jsx
new file mode 100644
index 0000000000..707f2af76c
--- /dev/null
+++ b/packages/pro-components/chat/chat-actionbar/__tests__/index.test.jsx
@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils';
+import { vi } from 'vitest';
+import ChatAction from '@tdesign/pro-components-chat/chat-action/index';
+
+describe('ChatAction', () => {
+  describe(':props', () => {
+    it(':actionBar', () => {
+      const wrapper = mount(ChatAction, {
+        props: {
+          actionBar: ['copy', 'good'],
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+    it(':disabled', () => {
+      const wrapper = mount(ChatAction, {
+        props: {
+          actionBar: ['copy'],
+          disabled: true,
+        },
+      });
+      expect(wrapper.find('button').attributes('disabled')).toBeDefined();
+      expect(wrapper.element).toMatchSnapshot();
+    });
+    it(':comment', () => {
+      const wrapper = mount(ChatAction, {
+        props: {
+          actionBar: ['good'],
+          comment: 'good',
+        },
+      });
+      expect(wrapper.find('.t-chat-button--active').exists()).toBe(true);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('@event', () => {
+    it('Event passthrough', () => {
+      const fn = vi.fn();
+      const wrapper = mount(ChatAction, {
+        props: {
+          actionBar: ['copy'],
+          onActions: fn,
+        },
+      });
+      wrapper.find('button').trigger('click');
+      expect(fn).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/pro-components/chat/chat-actionbar/_example/chat-action.vue b/packages/pro-components/chat/chat-actionbar/_example/chat-action.vue
new file mode 100644
index 0000000000..25bb24edb7
--- /dev/null
+++ b/packages/pro-components/chat/chat-actionbar/_example/chat-action.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="chat-action-content">
+    <t-chat-actionbar
+      :comment="comment"
+      content="它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。"
+      :action-bar="['replay', 'copy', 'good', 'bad', 'share']"
+      @actions="handleActions"
+    />
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+const comment = ref('');
+const handleActions = (type, options) => {
+  console.log(type, options);
+  comment.value = type;
+};
+</script>
diff --git a/packages/pro-components/chat/chat-actionbar/_example/comment-validation-test.vue b/packages/pro-components/chat/chat-actionbar/_example/comment-validation-test.vue
new file mode 100644
index 0000000000..d336c3a226
--- /dev/null
+++ b/packages/pro-components/chat/chat-actionbar/_example/comment-validation-test.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="comment-validation-test">
+    <h3>Comment 属性验证测试</h3>
+
+    <div class="test-section">
+      <h4>空字符串（默认值）</h4>
+      <t-chat-action content="测试空字符串" :action-bar="['good', 'bad', 'copy']" comment="" @actions="handleAction" />
+    </div>
+
+    <div class="test-section">
+      <h4>good 值</h4>
+      <t-chat-action
+        content="测试 good 值"
+        :action-bar="['good', 'bad', 'copy']"
+        comment="good"
+        @actions="handleAction"
+      />
+    </div>
+
+    <div class="test-section">
+      <h4>bad 值</h4>
+      <t-chat-action
+        content="测试 bad 值"
+        :action-bar="['good', 'bad', 'copy']"
+        comment="bad"
+        @actions="handleAction"
+      />
+    </div>
+
+    <div class="test-section">
+      <h4>动态切换</h4>
+      <t-chat-action
+        content="点击按钮动态切换评价"
+        :action-bar="['good', 'bad', 'copy']"
+        :comment="dynamicComment"
+        @actions="handleDynamicAction"
+      />
+      <p>当前评价状态: {{ dynamicComment || '无评价' }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const dynamicComment = ref('');
+
+const handleAction = (type, context) => {
+  console.log('Action clicked:', type, context);
+};
+
+const handleDynamicAction = (type, context) => {
+  if (type === 'good') {
+    dynamicComment.value = dynamicComment.value === 'good' ? '' : 'good';
+  } else if (type === 'bad') {
+    dynamicComment.value = dynamicComment.value === 'bad' ? '' : 'bad';
+  }
+  console.log('Dynamic action clicked:', type, 'Current comment:', dynamicComment.value);
+};
+</script>
+
+<style scoped>
+.comment-validation-test {
+  padding: 20px;
+}
+
+.test-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #e7e7e7;
+  border-radius: 6px;
+}
+
+.test-section h4 {
+  margin: 0 0 15px 0;
+  color: #333;
+}
+
+.test-section p {
+  margin: 10px 0 0 0;
+  color: #666;
+  font-size: 14px;
+}
+</style>
diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar-props.ts b/packages/pro-components/chat/chat-actionbar/chat-actionbar-props.ts
new file mode 100644
index 0000000000..c19c913131
--- /dev/null
+++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar-props.ts
@@ -0,0 +1,55 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+import { TdChatActionProps } from '../type';
+import { PropType } from 'vue';
+
+export default {
+  /** 被复制的内容 */
+  content: {
+    type: String,
+    default: '',
+  },
+  /** 操作按钮是否可点击 */
+  disabled: Boolean,
+  /** 评价类型， 可选值： 'good(点赞)'/'bad(点踩)', 默认值为空 */
+  comment: {
+    type: String as PropType<'good' | 'bad' | ''>,
+    validator: (value: string) => ['good', 'bad', ''].includes(value),
+    default: '',
+  },
+  /** 是否点踩（待废弃，请尽快使用comment）
+   * @deprecated
+   */
+  isBad: {
+    type: Boolean,
+    default: false,
+  },
+  /** 是否点赞（待废弃，请尽快使用comment）
+   * @deprecated
+   */
+  isGood: {
+    type: Boolean,
+    default: false,
+  },
+  /** 操作按钮配置项，可配置操作按钮选项和顺序 */
+  actionBar: {
+    type: Array as PropType<TdChatActionProps['actionBar']>,
+    default: (): TdChatActionProps['actionBar'] => ['replay', 'copy', 'good', 'bad', 'share'],
+  },
+  /** 操作按钮配置项，可配置操作按钮选项和顺序（待废弃，请尽快使用actionBar）
+   * @deprecated
+   */
+  operationBtn: {
+    type: Array as PropType<TdChatActionProps['operationBtn']>,
+    default: (): TdChatActionProps['operationBtn'] => ['replay', 'copy', 'good', 'bad', 'share'],
+  },
+  /** 点击点赞，点踩，复制，重新生成按钮时触发 */
+  onActions: Function as PropType<TdChatActionProps['onActions']>,
+  /** 点击点赞，点踩，复制，重新生成按钮时触发（待废弃，请尽快使用onActions）
+   * @deprecated
+   */
+  onOperation: Function as PropType<TdChatActionProps['onOperation']>,
+};
diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar.md b/packages/pro-components/chat/chat-actionbar/chat-actionbar.md
new file mode 100644
index 0000000000..96f4037b08
--- /dev/null
+++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar.md
@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+
+### ChatActionbar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+content | String | - | 被复制的内容 | N
+disabled | Boolean | false | 操作按钮是否可点击 | N
+comment | String | - | 评价类型， 可选值： `'good(点赞)'/'bad(点踩)`， 默认为空| N
+isBad | Boolean | false | 是否点踩`待废弃，请尽快使用comment` | N
+isGood | Boolean | false | 是否点赞`待废弃，请尽快使用comment`	 | N
+actionBar | Array | ["replay", "copy", "good", "bad", "share"] | 操作按钮配置项，可配置操作按钮选项和顺序。TS 类型：`Array<'replay'\|'copy'\|'good'\|'bad'\|'share'>` | N
+operationBtn | Array | ["replay", "copy", "good", "bad", "share"] | 操作按钮配置项，可配置操作按钮选项和顺序。TS 类型：`Array<'replay'\|'copy'\|'good'\|'bad'\|'share'>` `待废弃，请尽快使用actionBar`| N
+onActions | Function |  | TS 类型：`(value:string, context: { e: MouseEvent }) => void`<br/>点击点赞，点踩，复制，重新生成按钮时触发 | N
+onOperation | Function |  | TS 类型：`(value:string, context: { e: MouseEvent }) => void`<br/>点击点赞，点踩，复制，重新生成按钮时触发`待废弃，请尽快使用onActions` | N
+
+### ChatActionbar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+actions | `(value:string, context: { e: MouseEvent })` | 点击点赞，点踩，复制，重新生成，分享按钮时触发
+operation | `(value:string, context: { e: MouseEvent })` | 点击点赞，点踩，复制，重新生成，分享按钮时触发`待废弃，请尽快使用actions`
+
diff --git a/packages/pro-components/chat/chat-action.tsx b/packages/pro-components/chat/chat-actionbar/chat-actionbar.tsx
similarity index 65%
rename from packages/pro-components/chat/chat-action.tsx
rename to packages/pro-components/chat/chat-actionbar/chat-actionbar.tsx
index 687be03d8c..e3e7b1dde4 100644
--- a/packages/pro-components/chat/chat-action.tsx
+++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar.tsx
@@ -9,30 +9,33 @@ import {
   ThumbDownFilledIcon,
   RefreshIcon,
   CopyIcon,
+  Share1Icon,
 } from 'tdesign-icons-vue-next';
-// TODO: need refactor packages/components/typography/utils/copy-to-clipboard/index.ts???
 import Clipboard from 'clipboard';
-import props from './chat-action-props';
-import { MessagePluginSingleton } from './utils';
+import { MessagePluginSingleton } from '../utils';
+import props from './chat-actionbar-props';
 
 export default defineComponent({
-  name: 'TChatAction',
+  name: 'TChatActionbar',
   props,
-  emits: ['operation'],
+  emits: ['actions', 'operation'],
   setup(props, { emit }) {
     const COMPONENT_NAME = usePrefixClass('chat');
     const renderTNodeJSX = useTNodeJSX();
     const messagePluginInstance = MessagePluginSingleton.getInstance();
     const { globalConfig } = useConfig('chat');
-
     return () => {
       // textLoading更新后要传给子组件和孙组件
       const content = renderTNodeJSX('content');
-      const { copyTipText, likeTipText, dislikeTipText, refreshTipText, copyTextSuccess, copyTextFail } =
+      const { copyTipText, likeTipText, dislikeTipText, refreshTipText, copyTextSuccess, copyTextFail, shareTipText } =
         globalConfig.value;
 
       // 内置操作按钮，assistantActions和插槽判断 t-chat注入的属性获取不到默认为false
       const disabled = props.disabled;
+      // 向后兼容：优先使用 actionBar，如果没有则使用 operationBtn
+      const actionButtons = props.actionBar || props.operationBtn;
+      // 向后兼容：优先使用 comment，如果没有则根据 isGood/isBad 计算
+      const commentValue = props.comment || (props.isGood ? 'good' : props.isBad ? 'bad' : '');
       const copyAnswer = () => {
         // 根据e获取当前按钮选择器
         const copyBtn = new Clipboard(`.copy-btn`);
@@ -48,11 +51,15 @@ export default defineComponent({
           copyAnswer();
         }
         // 如果通过default传入的chat-item 组件，如何获取index值todo
+        emit('actions', type, {
+          e,
+        });
+        // 向后兼容：同时触发 operation 事件
         emit('operation', type, {
           e,
         });
       };
-      const replayButton = props.operationBtn.includes('replay') ? (
+      const replayButton = actionButtons.includes('replay') ? (
         <Space>
           <div class={`${COMPONENT_NAME.value}__refresh`}>
             <Tooltip content={refreshTipText}>
@@ -69,7 +76,7 @@ export default defineComponent({
           </div>
         </Space>
       ) : null;
-      const copyButton = props.operationBtn.includes('copy') ? (
+      const copyButton = actionButtons.includes('copy') ? (
         <Space>
           <Tooltip content={copyTipText}>
             <Button
@@ -85,46 +92,64 @@ export default defineComponent({
           </Tooltip>
         </Space>
       ) : null;
-      const goodButton = props.operationBtn.includes('good') ? (
+      const goodButton = actionButtons.includes('good') ? (
         <Space>
           <Tooltip content={likeTipText}>
             <Button
               theme="default"
               size="small"
-              class={props.isGood && `${COMPONENT_NAME.value}-button--active`}
+              class={commentValue === 'good' && `${COMPONENT_NAME.value}-button--active`}
               disabled={disabled}
               onClick={(e: MouseEvent) => handleClick(e, 'good')}
             >
-              {props.isGood ? <ThumbUpFilledIcon /> : <ThumbUpIcon />}
+              {commentValue === 'good' ? <ThumbUpFilledIcon /> : <ThumbUpIcon />}
             </Button>
           </Tooltip>
         </Space>
       ) : null;
-      const badButton = props.operationBtn.includes('bad') ? (
+      const badButton = actionButtons.includes('bad') ? (
         <Space>
           <Tooltip content={dislikeTipText}>
             <Button
               theme="default"
               size="small"
-              class={props.isBad && `${COMPONENT_NAME.value}-button--active`}
+              class={commentValue === 'bad' && `${COMPONENT_NAME.value}-button--active`}
               disabled={disabled}
               onClick={(e: MouseEvent) => handleClick(e, 'bad')}
             >
-              {props.isBad ? <ThumbDownFilledIcon /> : <ThumbDownIcon />}
+              {commentValue === 'bad' ? <ThumbDownFilledIcon /> : <ThumbDownIcon />}
             </Button>
           </Tooltip>
         </Space>
       ) : null;
+      const shareButton = actionButtons.includes('share') ? (
+        <Space>
+          <div class={`${COMPONENT_NAME.value}__refresh`}>
+            <Tooltip content={shareTipText}>
+              <Button
+                theme="default"
+                size="small"
+                disabled={disabled}
+                onClick={(e: MouseEvent) => handleClick(e, 'share')}
+              >
+                <Share1Icon />
+              </Button>
+            </Tooltip>
+            {/* <span class={`${COMPONENT_NAME.value}__refresh-line`}></span> */}
+          </div>
+        </Space>
+      ) : null;
       // 按钮组件的映射
       const buttonComponents = {
         replay: replayButton,
         copy: copyButton,
         good: goodButton,
         bad: badButton,
+        share: shareButton,
       };
       return (
         <div class={`${COMPONENT_NAME.value}__actions`}>
-          {props.operationBtn.map((btnKey) => {
+          {actionButtons.map((btnKey) => {
             return buttonComponents[btnKey];
           })}
         </div>
diff --git a/packages/pro-components/chat/chat-actionbar/index.ts b/packages/pro-components/chat/chat-actionbar/index.ts
new file mode 100644
index 0000000000..f456ca2ec8
--- /dev/null
+++ b/packages/pro-components/chat/chat-actionbar/index.ts
@@ -0,0 +1,3 @@
+import _ChatActionbar from './chat-actionbar';
+
+export default _ChatActionbar;
diff --git a/packages/pro-components/chat/chat-content-props.ts b/packages/pro-components/chat/chat-content-props.ts
deleted file mode 100644
index b5cd32a065..0000000000
--- a/packages/pro-components/chat/chat-content-props.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable */
-
-/**
- * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * */
-// TODO: need fix
-import { TdChatContentProps } from './type';
-import { PropType } from 'vue';
-
-export default {
-  /** 聊天内容，支持 markdown 格式 */
-  content: {
-    type: String,
-    default: '',
-  },
-  /** 角色，不同选项配置不同的样式，支持类型包括用户、助手、错误、模型切换、系统消息 */
-  role: {
-    type: String as PropType<TdChatContentProps['role']>,
-    validator(val: TdChatContentProps['role']): boolean {
-      if (!val) return true;
-      return ['user', 'assistant', 'error', 'model-change', 'system'].includes(val);
-    },
-  },
-};
diff --git a/packages/pro-components/chat/chat-content.md b/packages/pro-components/chat/chat-content.md
deleted file mode 100644
index cdece568dd..0000000000
--- a/packages/pro-components/chat/chat-content.md
+++ /dev/null
@@ -1,12 +0,0 @@
-:: BASE_DOC ::
-
-## API
-
-### ChatContent Props
-
-名称 | 类型 | 默认值 | 描述 | 必传
--- | -- | -- | -- | --
-content | String | - | 聊天内容，支持 markdown 格式 | N
-role | String | - | 角色，不同选项配置不同的样式，支持类型包括用户、助手、错误、模型切换、系统消息。可选项：user/assistant/error/model-change/system | N
-
-
diff --git a/packages/pro-components/chat/_example/markdown.vue b/packages/pro-components/chat/chat-content/_example/markdown.vue
similarity index 79%
rename from packages/pro-components/chat/_example/markdown.vue
rename to packages/pro-components/chat/chat-content/_example/markdown.vue
index d2b045f1e8..f88c6c0e1a 100644
--- a/packages/pro-components/chat/_example/markdown.vue
+++ b/packages/pro-components/chat/chat-content/_example/markdown.vue
@@ -1,34 +1,31 @@
 <template>
-  <t-chat-content role="assistant" :content="doc" variant="base"> </t-chat-content>
+  <t-chat-content :content="content" :markdown-props="markdownProps" />
 </template>
 <script setup lang="ts">
+const markdownProps = {
+  options: {
+    themeSettings: {
+      // 代码块主题设置, 默认是'light'|'dark'
+      codeBlockTheme: 'dark',
+    },
+  },
+};
+
 const doc = `
 # This is TDesign
 
-
-
 ## This is TDesign
 
-
-
 ### This is TDesign
 
-
 #### This is TDesign
 
-
 The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text.
 
-
-
 > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet.
 
-
-
 an example | *an example* | **an example**
 
-
-
 1. Bird
 1. McHale
 1. Parish
@@ -36,7 +33,6 @@ an example | *an example* | **an example**
     1. McHale
         1. Parish
 
-
 - Red
 - Green
 - Blue
@@ -44,13 +40,10 @@ an example | *an example* | **an example**
     - Green
         - Blue
 
-
-
 This is [an example](http://example.com/ "Title") inline link.
 
 <http://example.com/>
 
-
 \`\`\`bash
 $ npm i tdesign-vue-next
 \`\`\`
@@ -65,4 +58,8 @@ const app = createApp(App);
 app.use(TDesignChat);
 \`\`\`
 `;
+const content = {
+  type: 'markdown',
+  data: doc,
+};
 </script>
diff --git a/packages/pro-components/chat/_example/text-message.vue b/packages/pro-components/chat/chat-content/_example/text-message.vue
similarity index 66%
rename from packages/pro-components/chat/_example/text-message.vue
rename to packages/pro-components/chat/chat-content/_example/text-message.vue
index 2633bc2a1c..b91b63948b 100644
--- a/packages/pro-components/chat/_example/text-message.vue
+++ b/packages/pro-components/chat/chat-content/_example/text-message.vue
@@ -1,8 +1,13 @@
 <template>
-  <t-chat-content :content="ask" variant="base" role="user"></t-chat-content>
+  <t-chat-content :content="content"></t-chat-content>
 </template>
 <script setup lang="ts">
 const ask = `import TDesign from 'tdesign-vue-next'; // 引入tdesign组件库
 app.use(TDesign).use(router).mount('#app');`;
+
+const content = {
+  type: 'text',
+  data: ask,
+};
 </script>
 <style scoped></style>
diff --git a/packages/pro-components/chat/chat-content/chat-content-props.ts b/packages/pro-components/chat/chat-content/chat-content-props.ts
new file mode 100644
index 0000000000..1af0c7ed90
--- /dev/null
+++ b/packages/pro-components/chat/chat-content/chat-content-props.ts
@@ -0,0 +1,36 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+// TODO: need fix
+import { TdChatContentProps } from '../type';
+import { PropType } from 'vue';
+
+export default {
+  /** 聊天内容，支持多种内容类型 */
+  content: {
+    type: [String, Object] as PropType<TdChatContentProps['content']>,
+    default: '',
+  },
+  /** 角色，不同选项配置不同的样式，支持类型包括用户、助手、错误、模型切换、系统消息
+   */
+  role: {
+    type: String as PropType<TdChatContentProps['role']>,
+    validator(val: TdChatContentProps['role']): boolean {
+      if (!val) return true;
+      return ['user', 'assistant', 'model-change', 'system'].includes(val);
+    },
+  },
+  status: {
+    type: String as PropType<TdChatContentProps['status']>,
+    default: '',
+  },
+  markdownProps: {
+    type: Object as PropType<TdChatContentProps['markdownProps']>,
+    default: () => ({
+      engine: 'cherry-markdown',
+      options: {},
+    }),
+  },
+};
diff --git a/packages/pro-components/chat/chat-content/chat-content.md b/packages/pro-components/chat/chat-content/chat-content.md
new file mode 100644
index 0000000000..6e54121762
--- /dev/null
+++ b/packages/pro-components/chat/chat-content/chat-content.md
@@ -0,0 +1,14 @@
+:: BASE_DOC ::
+
+## API
+
+### ChatContent Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+content | String \| Object | '' | 聊天内容，支持多种内容类型。可以是字符串或结构化对象 `{ type: 'text'\|'markdown', data: String }` | Y
+`role` | String | - | 角色，不同选项配置不同的样式，支持类型包括用户、助手、模型切换、系统消息。可选项：user/assistant/system | N
+status | String | - | 错误状态。可选项：error / '' | N
+markdownProps | `{engine: 'cherry-markdown', options: {}}` | - | engine可选项：cherry-markdown/marked,options是透传给 ChatMarkdown 组件的全部属性。TS 类型：`ChatMarkdownProps`，[ChatMarkdown API Documents](./chat-markdown?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/pro-components/chat/type.ts) | N
+
+
diff --git a/packages/pro-components/chat/chat-content.tsx b/packages/pro-components/chat/chat-content/chat-content.tsx
similarity index 64%
rename from packages/pro-components/chat/chat-content.tsx
rename to packages/pro-components/chat/chat-content/chat-content.tsx
index 7864f6f72f..c08121eac2 100644
--- a/packages/pro-components/chat/chat-content.tsx
+++ b/packages/pro-components/chat/chat-content/chat-content.tsx
@@ -1,11 +1,12 @@
-import { defineComponent, computed, onMounted, inject, ComputedRef } from 'vue';
+import { defineComponent, computed, inject, onMounted, ComputedRef } from 'vue';
 import { useConfig } from 'tdesign-vue-next/es/config-provider/hooks';
 import { usePrefixClass } from '@tdesign/shared-hooks';
-import props from './chat-content-props';
-import Clipboard from 'clipboard';
-import hljs from 'highlight.js';
 import { Marked } from 'marked';
 import { markedHighlight } from 'marked-highlight';
+import hljs from 'highlight.js';
+import Clipboard from 'clipboard';
+import props from './chat-content-props';
+import ChatMarkdown from '../chat-markdown';
 
 const escapeTest = /[&<>"']/;
 const escapeReplace = new RegExp(escapeTest.source, 'g');
@@ -45,7 +46,7 @@ export default defineComponent({
     const { globalConfig } = useConfig('chat');
 
     // role 没被注入的时候，使用props.role来自chat-item传入，content在插槽里的inject，修复role数据混乱问题
-    const injectedRole = inject<ComputedRef<string>>('role');
+    const injectedRole = inject<ComputedRef<string>>('role', null);
     const role = computed(() => props.role || injectedRole?.value || '');
     onMounted(() => {
       const clipboard = new Clipboard(`.${COMPONENT_NAME.value}__copy-btn`, {
@@ -81,35 +82,61 @@ export default defineComponent({
     );
 
     const getHtmlByMarked = (markdown: string) => {
+      if (props.markdownProps.engine !== 'marked') return;
       if (!markdown) {
         return '<div class="waiting"></div>';
       }
       return marked.parse(markdown);
     };
     const textInfo = computed(() => {
-      if (role.value === 'model-change') {
+      if (props.status === 'error' || ['model-change', 'system', 'error'].includes(role.value)) {
         return props.content || '';
       }
-
-      if (role.value === 'user' && typeof props.content === 'string') {
-        return escape(props.content);
+      if (typeof props.content === 'string') {
+        return role.value === 'user' ? escape(props.content) : getHtmlByMarked(props.content);
+      }
+      // 处理结构化内容类型
+      if (typeof props.content === 'object' && props.content !== null) {
+        const { type, data } = props.content;
+        switch (type) {
+          case 'text':
+            return escape(data || '');
+          case 'markdown':
+            return getHtmlByMarked(data || '');
+          default:
+            return getHtmlByMarked(JSON.stringify(data) || '');
+        }
       }
-      // @ts-ignore 暂时处理
-      return getHtmlByMarked(props.content);
+      // 如果内容为空或不是字符串，返回空内容
+      return props.content || '';
     });
     return () => (
       <div class={[`${COMPONENT_NAME.value}__text`]}>
-        {role.value === 'user' ? (
-          <div class={`${COMPONENT_NAME.value}__text--${role.value}`}>
+        {/* role兼容旧版 status为error*/}
+        {props.status === 'error' ||
+        (typeof props.content === 'object' && props.content?.type === 'text') ||
+        (role.value && ['user', 'model-change', 'system'].includes(role.value)) ? (
+          <div class={[`${COMPONENT_NAME.value}__text--user`, `other__${props.status || role.value}`]}>
             <pre v-html={textInfo.value}></pre>
           </div>
-        ) : (
+        ) : props.markdownProps?.engine && props.markdownProps?.engine === 'marked' ? (
           <div class={`${COMPONENT_NAME.value}__text__assistant`}>
             <div
-              class={[`${COMPONENT_NAME.value}__text__content`, `${COMPONENT_NAME.value}__text--${role.value}`]}
+              class={[`${COMPONENT_NAME.value}__text__content`, `${COMPONENT_NAME.value}__text--assistant`]}
               v-html={textInfo.value}
             ></div>
           </div>
+        ) : (
+          <ChatMarkdown
+            content={
+              typeof props.content === 'string'
+                ? props.content
+                : typeof props.content === 'object' && props.content?.type === 'markdown'
+                ? props.content.data
+                : JSON.stringify(props.content)
+            }
+            options={props.markdownProps.options}
+          />
         )}
       </div>
     );
diff --git a/packages/pro-components/chat/chat-content/index.ts b/packages/pro-components/chat/chat-content/index.ts
new file mode 100644
index 0000000000..b5dff03d3b
--- /dev/null
+++ b/packages/pro-components/chat/chat-content/index.ts
@@ -0,0 +1,2 @@
+import _ChatContent from './chat-content';
+export default _ChatContent;
diff --git a/packages/pro-components/chat/_example/chat-input-slot.vue b/packages/pro-components/chat/chat-input/_example/chat-input-slot.vue
similarity index 100%
rename from packages/pro-components/chat/_example/chat-input-slot.vue
rename to packages/pro-components/chat/chat-input/_example/chat-input-slot.vue
diff --git a/packages/pro-components/chat/_example/chat-input.vue b/packages/pro-components/chat/chat-input/_example/chat-input.vue
similarity index 100%
rename from packages/pro-components/chat/_example/chat-input.vue
rename to packages/pro-components/chat/chat-input/_example/chat-input.vue
diff --git a/packages/pro-components/chat/chat-input-props.ts b/packages/pro-components/chat/chat-input/chat-input-props.ts
similarity index 97%
rename from packages/pro-components/chat/chat-input-props.ts
rename to packages/pro-components/chat/chat-input/chat-input-props.ts
index ebfc9028d4..852a942111 100644
--- a/packages/pro-components/chat/chat-input-props.ts
+++ b/packages/pro-components/chat/chat-input/chat-input-props.ts
@@ -3,7 +3,7 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
-import { TdChatInputProps } from './type';
+import { TdChatInputProps } from '../type';
 import { PropType } from 'vue';
 
 export default {
diff --git a/packages/pro-components/chat/chat-input.md b/packages/pro-components/chat/chat-input/chat-input.md
similarity index 100%
rename from packages/pro-components/chat/chat-input.md
rename to packages/pro-components/chat/chat-input/chat-input.md
diff --git a/packages/pro-components/chat/chat-input.tsx b/packages/pro-components/chat/chat-input/chat-input.tsx
similarity index 94%
rename from packages/pro-components/chat/chat-input.tsx
rename to packages/pro-components/chat/chat-input/chat-input.tsx
index 39f552e09b..ea3dfa732b 100644
--- a/packages/pro-components/chat/chat-input.tsx
+++ b/packages/pro-components/chat/chat-input/chat-input.tsx
@@ -26,7 +26,7 @@ export default defineComponent({
     const placeholderText = computed(() => props.placeholder ?? globalConfig.value.placeholder);
 
     let shiftDownFlag = false;
-    let isComposition = false;
+    const isComposition = false;
     const renderTNodeJSX = useTNodeJSX();
     const sendClick = (e: MouseEvent | KeyboardEvent) => {
       if (textValue.value && !disabled.value) {
@@ -75,13 +75,6 @@ export default defineComponent({
       }
     };
 
-    const compositionstartFn = () => {
-      isComposition = true;
-    };
-
-    const compositionendFn = () => {
-      isComposition = false;
-    };
     // 默认suffixIcon
     const getDefaultSuffixIcon = () => {
       return (
@@ -119,8 +112,6 @@ export default defineComponent({
             onFocus={focusFn}
             onKeydown={keydownFn}
             onKeyup={keyupFn}
-            onCompositionstart={compositionstartFn}
-            onCompositionend={compositionendFn}
           />
           <div class={`${COMPONENT_NAME.value}__footer__textarea__icon`} onClick={sendClick}>
             {renderSuffixIcon()}
diff --git a/packages/pro-components/chat/chat-input/index.ts b/packages/pro-components/chat/chat-input/index.ts
new file mode 100644
index 0000000000..6d54739f8a
--- /dev/null
+++ b/packages/pro-components/chat/chat-input/index.ts
@@ -0,0 +1,2 @@
+import _ChatInput from './chat-input';
+export default _ChatInput;
diff --git a/packages/pro-components/chat/chat-item/__tests__/index.test.jsx b/packages/pro-components/chat/chat-item/__tests__/index.test.jsx
new file mode 100644
index 0000000000..fc5a147a55
--- /dev/null
+++ b/packages/pro-components/chat/chat-item/__tests__/index.test.jsx
@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils';
+import { vi } from 'vitest';
+import ChatItem from '@tdesign/pro-components-chat/chat-item/index';
+import ChatLoading from '@tdesign/pro-components-chat/chat-loading/index';
+import ChatReasoning from '@tdesign/pro-components-chat/chat-reasoning/index';
+import { omiVueify } from 'omi-vueify';
+
+describe('ChatItem', () => {
+  const provideMock = {
+    role: { value: 'user' },
+  };
+
+  describe(':props', () => {
+    it(':role - string', () => {
+      const wrapper = mount(ChatItem, {
+        props: {
+          role: 'user',
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it(':variant - string', () => {
+      const wrapper = mount(ChatItem, {
+        props: {
+          variant: 'primary',
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it(':reasoningLoading - boolean', () => {
+      const wrapper = mount(ChatItem, {
+        props: {
+          reasoningLoading: true,
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.findComponent(ChatLoading).exists()).toBe(true);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('<slot>', () => {
+    it('default slot', () => {
+      const wrapper = mount(ChatItem, {
+        slots: {
+          default: '<div>custom content</div>',
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('avatar slot', () => {
+      const wrapper = mount(ChatItem, {
+        slots: {
+          avatar: '<div>custom avatar</div>',
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('@event', () => {
+    it('operation', async () => {
+      const fn = vi.fn();
+      const wrapper = mount(ChatItem, {
+        props: {
+          onOperation: fn,
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      await wrapper.find('.t-chat__actions-margin button').trigger('click');
+      expect(fn).toHaveBeenCalled();
+    });
+  });
+
+  describe('functional', () => {
+    it('renders reasoning component when reasoning prop is provided', () => {
+      const wrapper = mount(ChatItem, {
+        props: {
+          reasoning: { expandIconPlacement: 'right' },
+          role: 'assistant',
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.findComponent(ChatReasoning).exists()).toBe(true);
+    });
+  });
+});
diff --git a/packages/pro-components/chat/_example/bubble.vue b/packages/pro-components/chat/chat-item/_example/bubble.vue
similarity index 100%
rename from packages/pro-components/chat/_example/bubble.vue
rename to packages/pro-components/chat/chat-item/_example/bubble.vue
diff --git a/packages/pro-components/chat/_example/change-model-message.vue b/packages/pro-components/chat/chat-item/_example/change-model-message.vue
similarity index 100%
rename from packages/pro-components/chat/_example/change-model-message.vue
rename to packages/pro-components/chat/chat-item/_example/change-model-message.vue
diff --git a/packages/pro-components/chat/_example/chat-avatar-name.vue b/packages/pro-components/chat/chat-item/_example/chat-avatar-name.vue
similarity index 100%
rename from packages/pro-components/chat/_example/chat-avatar-name.vue
rename to packages/pro-components/chat/chat-item/_example/chat-avatar-name.vue
diff --git a/packages/pro-components/chat/_example/chat-item-slot.vue b/packages/pro-components/chat/chat-item/_example/chat-item-slot.vue
similarity index 84%
rename from packages/pro-components/chat/_example/chat-item-slot.vue
rename to packages/pro-components/chat/chat-item/_example/chat-item-slot.vue
index 4a81257d0b..43bcf0bb0b 100644
--- a/packages/pro-components/chat/_example/chat-item-slot.vue
+++ b/packages/pro-components/chat/chat-item/_example/chat-item-slot.vue
@@ -21,26 +21,22 @@
       </div>
     </template>
     <template #actions>
-      <t-chat-action
-        :is-good="isGood"
-        :is-bad="isBad"
+      <t-chat-actionbar
+        :comment="commentValue"
         content="牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。"
-        @operation="(type, { e }) => handleOperation(type, { e, index })"
+        @actions="(type, { e }) => handleOperation(type, { e, index })"
       />
     </template>
   </t-chat-item>
 </template>
 <script setup>
 import { ref } from 'vue';
-const isGood = ref(false);
-const isBad = ref(false);
+const commentValue = ref('');
 const handleOperation = (type) => {
   if (type === 'good') {
-    isGood.value = !isGood.value;
-    isBad.value = false;
+    commentValue.value = commentValue.value === 'good' ? '' : 'good';
   } else if (type === 'bad') {
-    isBad.value = !isBad.value;
-    isGood.value = false;
+    commentValue.value = commentValue.value === 'bad' ? '' : 'bad';
   }
 };
 </script>
diff --git a/packages/pro-components/chat/_example/error-message.vue b/packages/pro-components/chat/chat-item/_example/error-message.vue
similarity index 93%
rename from packages/pro-components/chat/_example/error-message.vue
rename to packages/pro-components/chat/chat-item/_example/error-message.vue
index 47f1240fe2..e309a63dc6 100644
--- a/packages/pro-components/chat/_example/error-message.vue
+++ b/packages/pro-components/chat/chat-item/_example/error-message.vue
@@ -5,7 +5,7 @@
       name="自己"
       datetime="今天16:38"
       content="！！！请求出错"
-      role="error"
+      status="error"
     ></t-chat-item>
   </t-space>
 </template>
diff --git a/packages/pro-components/chat/chat-item-props.ts b/packages/pro-components/chat/chat-item/chat-item-props.ts
similarity index 91%
rename from packages/pro-components/chat/chat-item-props.ts
rename to packages/pro-components/chat/chat-item/chat-item-props.ts
index cf6c0a993e..d546400a9a 100644
--- a/packages/pro-components/chat/chat-item-props.ts
+++ b/packages/pro-components/chat/chat-item/chat-item-props.ts
@@ -3,11 +3,13 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
-import { TdChatItemProps } from './type';
+import { TdChatItemProps } from '../type';
 import { PropType } from 'vue';
 
 export default {
-  /** 自定义的操作内容 */
+  /** 自定义的操作内容
+   * @deprecated
+   */
   actions: {
     type: [String, Function] as PropType<TdChatItemProps['actions']>,
   },
@@ -60,4 +62,8 @@ export default {
       return ['base', 'outline', 'text'].includes(val);
     },
   },
+  status: {
+    type: String as PropType<TdChatItemProps['status']>,
+    default: '' as TdChatItemProps['status'],
+  },
 };
diff --git a/packages/pro-components/chat/chat-item.md b/packages/pro-components/chat/chat-item/chat-item.md
similarity index 83%
rename from packages/pro-components/chat/chat-item.md
rename to packages/pro-components/chat/chat-item/chat-item.md
index 613b48934c..e205b05b24 100644
--- a/packages/pro-components/chat/chat-item.md
+++ b/packages/pro-components/chat/chat-item/chat-item.md
@@ -6,13 +6,15 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-actions | String / Slot / Function | - | 自定义的操作内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+actions | String / Slot / Function | - | 自定义的操作内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)`待废弃，请尽快使用actionbar` | N
+actionbar | String / Slot / Function | - | 自定义的操作内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)| N
 animation | String | skeleton | 动画效果，支持「渐变加载动画」,「闪烁加载动画」, 「骨架屏」三种。可选项：skeleton/moving/gradient | N
 avatar | String / Object / Slot / Function | - | 自定义的头像配置。TS 类型：`String \| AvatarProps \| TNode `，[Avatar API Documents](./avatar?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/pro-components/chat/type.ts) | N
 content | String / Slot / Function | - | 对话单元的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 datetime | String / Slot / Function | - | 对话单元的时间配置。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 name | String / Slot / Function | - | 自定义的昵称。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 reasoning | String / Boolean / Object | false | 值为false不显示思维链，为string则显示内置推理内容交互，为对象则单独配置推理内容。TS 类型：`boolean \| TdChatReasoning ` ` interface TdChatReasoning { expandIconPlacement?: 'left' \| 'right';onExpandChange?: (isExpand: boolean) => void; collapsePanelProps?: Object } `。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/pro-components/chat/type.ts) | N
-role | String | - | 角色，不同选项配置不同的样式，支持类型包括用户、助手、错误、模型切换、系统消息。可选项：user/assistant/error/model-change/system | N
+role | String | - | 角色，不同选项配置不同的样式，支持类型包括用户、助手、模型切换、系统消息。可选项：user/assistant/model-change/system | N
 textLoading | Boolean | false | 新消息是否处于加载状态，加载状态默认显示骨架屏，接口请求返回数据时请将新消息加载状态置为false | N
 variant | String | text | 气泡框样式，支持基础、线框、文字三种类型。可选项：base/outline/text | N
+status | String | '' | 消息状态。可选项：''/error | N
diff --git a/packages/pro-components/chat/chat-item.tsx b/packages/pro-components/chat/chat-item/chat-item.tsx
similarity index 86%
rename from packages/pro-components/chat/chat-item.tsx
rename to packages/pro-components/chat/chat-item/chat-item.tsx
index 62c10fc7dd..380f181926 100644
--- a/packages/pro-components/chat/chat-item.tsx
+++ b/packages/pro-components/chat/chat-item/chat-item.tsx
@@ -6,10 +6,10 @@ import { usePrefixClass, useTNodeJSX } from '@tdesign/shared-hooks';
 import props from './chat-item-props';
 import { isString, isObject } from 'lodash-es';
 import { Skeleton } from 'tdesign-vue-next';
-import Text from './chat-content';
+import Text from '../chat-content/chat-content';
 import { CheckCircleIcon } from 'tdesign-icons-vue-next';
-import ChatLoading from './chat-loading';
-import ChatReasoning from './chat-reasoning';
+import ChatLoading from '../chat-loading';
+import ChatReasoning from '../chat-reasoning/chat-reasoning';
 
 export default defineComponent({
   name: 'TChatItem',
@@ -20,7 +20,7 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['operation'],
+  emits: [],
   setup(props) {
     const COMPONENT_NAME = usePrefixClass('chat');
     const { globalConfig } = useConfig('chat');
@@ -60,7 +60,7 @@ export default defineComponent({
       const textLoading = props.textLoading;
       const reasoningLoading = props.reasoningLoading;
       // 内置操作按钮，assistantActions和插槽判断 t-chat注入的属性获取不到默认为false
-      const showActions = computed(() => renderTNodeJSX('actions'));
+      const showActions = computed(() => renderTNodeJSX('actionbar') || renderTNodeJSX('actions'));
       const renderHeader = () => {
         const { loadingText, loadingEndText } = globalConfig.value;
         if (reasoningLoading) {
@@ -88,13 +88,12 @@ export default defineComponent({
               (props.animation === 'skeleton' ? (
                 <Skeleton loading={textLoading} animation={'gradient'}></Skeleton>
               ) : (
-                <ChatLoading loading={textLoading} animation={props.animation}></ChatLoading>
+                <ChatLoading animation={props.animation}></ChatLoading>
               ))}
             {!textLoading && (
               <div class={`${COMPONENT_NAME.value}__detail`}>
                 {isObject(props.reasoning) && role.value === 'assistant' && (
                   <ChatReasoning
-                    role={role.value}
                     expandIconPlacement={(props.reasoning as Record<string, any>).expandIconPlacement}
                     onExpandChange={(props.reasoning as Record<string, any>).onExpandChange}
                     collapse-panel-props={{
@@ -105,19 +104,25 @@ export default defineComponent({
                 {/* 适配t-chat传入data */}
                 {isString(props.reasoning) && role.value === 'assistant' && (
                   <ChatReasoning
-                    role={role.value}
                     expandIconPlacement={'right'}
                     collapse-panel-props={{
                       header: renderHeader(),
-                      content: <Text isNormalText={false} content={props.reasoning} role={role.value} />,
+                      content: (
+                        <Text
+                          content={{ type: 'text', data: props.reasoning as unknown as string }}
+                          role={role.value}
+                        />
+                      ),
                     }}
                   ></ChatReasoning>
                 )}
-                {isString(content) ? <Text isNormalText={false} content={content} role={role.value} /> : content}
+                {isString(content) ? <Text content={content} role={role.value} status={props.status} /> : content}
               </div>
             )}
             {role.value === 'assistant' && showActions.value && (
-              <div class={`${COMPONENT_NAME.value}__actions-margin`}>{renderTNodeJSX('actions')}</div>
+              <div class={`${COMPONENT_NAME.value}__actions-margin`}>
+                {renderTNodeJSX('actionbar') || renderTNodeJSX('actions')}
+              </div>
             )}
           </div>
         </Fragment>
diff --git a/packages/pro-components/chat/chat-item/index.ts b/packages/pro-components/chat/chat-item/index.ts
new file mode 100644
index 0000000000..a15a9c217d
--- /dev/null
+++ b/packages/pro-components/chat/chat-item/index.ts
@@ -0,0 +1,2 @@
+import _ChatItem from './chat-item';
+export default _ChatItem;
diff --git a/packages/pro-components/chat/_example/base.vue b/packages/pro-components/chat/chat-list/_example/base.vue
similarity index 65%
rename from packages/pro-components/chat/_example/base.vue
rename to packages/pro-components/chat/chat-list/_example/base.vue
index 2568110be6..299ab60dda 100644
--- a/packages/pro-components/chat/_example/base.vue
+++ b/packages/pro-components/chat/chat-list/_example/base.vue
@@ -1,68 +1,55 @@
 <template>
   <div class="chat-box">
-    <t-chat
+    <t-chat-list
       ref="chatRef"
       :clear-history="chatList.length > 0 && !isStreamLoad"
       :data="chatList"
       :text-loading="loading"
-      :is-stream-load="isStreamLoad"
       style="height: 600px"
+      animation="gradient"
       @scroll="handleChatScroll"
       @clear="clearConfirm"
     >
       <!-- eslint-disable vue/no-unused-vars -->
       <template #content="{ item, index }">
-        <t-chat-reasoning v-if="item.reasoning?.length > 0" expand-icon-placement="right">
-          <template #header>
-            <t-chat-loading v-if="isStreamLoad && item.content.length === 0" text="思考中..." />
-            <div v-else style="display: flex; align-items: center">
-              <CheckCircleIcon style="color: var(--td-success-color-5); font-size: 20px; margin-right: 8px" />
-              <span>已深度思考</span>
-            </div>
-          </template>
-          <t-chat-content v-if="item.reasoning.length > 0" :content="item.reasoning" />
-        </t-chat-reasoning>
-        <t-chat-content v-if="item.content.length > 0" :content="item.content" />
+        <template v-for="(content, contentIndex) in item.content" :key="contentIndex">
+          <t-chat-thinking v-if="content.type === 'thinking'" :status="content.status" :content="content.data" />
+          <t-chat-content v-else :content="content.data" :role="item.role" />
+        </template>
       </template>
-      <template #actions="{ item, index }">
-        <t-chat-action
-          :content="item.content"
-          :operation-btn="['good', 'bad', 'replay', 'copy']"
-          @operation="handleOperation"
+      <template #actionbar="{ item, index }">
+        <t-chat-actionbar
+          v-if="item.role === 'assistant'"
+          :content="getActionContent(item.content)"
+          :action-bar="['good', 'bad', 'replay', 'copy']"
+          @actions="handleOperation"
         />
       </template>
       <template #footer>
-        <t-chat-input :stop-disabled="isStreamLoad" @send="inputEnter" @stop="onStop"> </t-chat-input>
+        <t-chat-sender v-model="query" :loading="isStreamLoad" @send="inputEnter" @stop="onStop"> </t-chat-sender>
       </template>
-    </t-chat>
-    <t-button v-show="isShowToBottom" variant="text" class="bottomBtn" @click="backBottom">
-      <div class="to-bottom">
-        <ArrowDownIcon />
-      </div>
-    </t-button>
+    </t-chat-list>
   </div>
 </template>
+
 <script setup lang="jsx">
 import { ref } from 'vue';
 import { MockSSEResponse } from './mock-data/sseRequest-reasoning';
-import { ArrowDownIcon, CheckCircleIcon } from 'tdesign-icons-vue-next';
+
 const fetchCancel = ref(null);
 const loading = ref(false);
 // 流式数据加载中
 const isStreamLoad = ref(false);
-
+const query = ref('');
 const chatRef = ref(null);
-const isShowToBottom = ref(false);
 // 滚动到底部
 const backBottom = () => {
   chatRef.value.scrollToBottom({
     behavior: 'smooth',
   });
 };
-// 是否显示回到底部按钮
 const handleChatScroll = function ({ e }) {
-  const scrollTop = e.target.scrollTop;
-  isShowToBottom.value = scrollTop < 0;
+  console.log('handleChatScroll', e);
 };
 // 清空消息
 const clearConfirm = function () {
@@ -71,29 +58,37 @@ const clearConfirm = function () {
 const handleOperation = function (type, options) {
   console.log('handleOperation', type, options);
 };
+
+// 获取操作按钮需要的内容（排除thinking类型）
+const getActionContent = function (contentArray) {
+  const textContent = contentArray.find((item) => item.type === 'text' || item.type === 'markdown');
+  return textContent ? textContent.data : '';
+};
 // 倒序渲染
 const chatList = ref([
   {
-    content: `模型由<span>hunyuan</span>变为<span>GPT4</span>`,
-    role: 'model-change',
-    reasoning: '',
+    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+    name: '自己',
+    datetime: '今天16:38',
+    role: 'user',
+    content: [
+      {
+        type: 'text',
+        data: '南极的自动提款机叫什么名字？',
+      },
+    ],
   },
   {
     avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
     name: 'TDesignAI',
     datetime: '今天16:38',
-    reasoning: '',
-    content: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
     role: 'assistant',
-    duration: 10,
-  },
-  {
-    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
-    name: '自己',
-    datetime: '今天16:38',
-    content: '南极的自动提款机叫什么名字？',
-    role: 'user',
-    reasoning: '',
+    content: [
+      {
+        type: 'text',
+        data: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
+      },
+    ],
   },
 ]);
 
@@ -114,21 +109,41 @@ const inputEnter = function (inputValue) {
     avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
     name: '自己',
     datetime: new Date().toDateString(),
-    content: inputValue,
     role: 'user',
+    content: [
+      {
+        type: 'text',
+        data: inputValue,
+      },
+    ],
   };
-  chatList.value.unshift(params);
+
+  chatList.value.push(params);
   // 空消息占位
   const params2 = {
     avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
     name: 'TDesignAI',
     datetime: new Date().toDateString(),
-    content: '',
-    reasoning: '',
     role: 'assistant',
+    content: [
+      {
+        type: 'thinking',
+        status: 'pending',
+        data: {
+          title: '思考中...',
+          text: '',
+        },
+      },
+      {
+        type: 'markdown',
+        data: '',
+      },
+    ],
   };
-  chatList.value.unshift(params2);
+
+  chatList.value.push(params2);
   handleData(inputValue);
+  query.value = '';
 };
 
 const fetchSSE = async (fetchFn, options) => {
@@ -160,7 +175,7 @@ const fetchSSE = async (fetchFn, options) => {
 const handleData = async () => {
   loading.value = true;
   isStreamLoad.value = true;
-  const lastItem = chatList.value[0];
+  const lastItem = chatList.value[chatList.value.length - 1];
   const mockedData = {
     reasoning: `嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。
 
@@ -181,19 +196,27 @@ const handleData = async () => {
     },
     {
       success(result) {
-        console.log('success', result);
+        // console.log('success', result);
         loading.value = false;
-        lastItem.reasoning += result.delta.reasoning_content;
-        lastItem.content += result.delta.content;
+        // 设置思考过程的status
+        if (result.delta.reasoning_content) {
+          lastItem.content[0].data.text += result.delta.reasoning_content;
+        }
+        if (result.delta.content) {
+          lastItem.content[1].data += result.delta.content;
+        }
       },
       complete(isOk, msg) {
         if (!isOk) {
           lastItem.role = 'error';
-          lastItem.content = msg;
-          lastItem.reasoning = msg;
+          lastItem.content[0].data.text = msg;
+          lastItem.content[1].data = msg;
         }
+
         // 显示用时xx秒，业务侧需要自行处理
-        lastItem.duration = 20;
+        // 设置思考过程的status
+        lastItem.content[0].status = 'complete';
+        lastItem.content[0].data.title = '已完成思考(耗时20秒)';
         // 控制终止按钮
         isStreamLoad.value = false;
         loading.value = false;
@@ -203,6 +226,9 @@ const handleData = async () => {
 };
 </script>
 <style lang="less">
+.text {
+  color: red;
+}
 /* 应用滚动条样式 */
 ::-webkit-scrollbar-thumb {
   background-color: var(--td-scrollbar-color);
@@ -213,38 +239,6 @@ const handleData = async () => {
 ::-webkit-scrollbar-track {
   background-color: var(--td-scroll-track-color);
 }
-.chat-box {
-  position: relative;
-  .bottomBtn {
-    position: absolute;
-    left: 50%;
-    margin-left: -20px;
-    bottom: 210px;
-    padding: 0;
-    border: 0;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04),
-      0px 6px 30px 5px rgba(0, 0, 0, 0.05);
-  }
-  .to-bottom {
-    width: 40px;
-    height: 40px;
-    border: 1px solid #dcdcdc;
-    box-sizing: border-box;
-    background: var(--td-bg-color-container);
-    border-radius: 50%;
-    font-size: 24px;
-    line-height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .t-icon {
-      font-size: 24px;
-    }
-  }
-}
 
 .model-select {
   display: flex;
diff --git a/packages/pro-components/chat/_example/chat-drag.vue b/packages/pro-components/chat/chat-list/_example/chat-drag.vue
similarity index 72%
rename from packages/pro-components/chat/_example/chat-drag.vue
rename to packages/pro-components/chat/chat-list/_example/chat-drag.vue
index 72b40095ae..c326f1a05c 100644
--- a/packages/pro-components/chat/_example/chat-drag.vue
+++ b/packages/pro-components/chat/chat-list/_example/chat-drag.vue
@@ -11,28 +11,35 @@
     :on-confirm="() => (visibleModelessDrag = false)"
   >
     <template #body>
-      <t-chat
+      <t-chat-list
         layout="single"
         style="height: 600px"
         :data="chatList"
         :clear-history="chatList.length > 0 && !isStreamLoad"
         :text-loading="loading"
-        :is-stream-load="isStreamLoad"
-        @on-action="operation"
+        :reverse="true"
         @clear="clearConfirm"
       >
         <!-- eslint-disable-next-line vue/no-unused-vars -->
-        <template #actions="{ item, index }">
-          <t-chat-action
-            :content="item.content"
-            :operation-btn="['good', 'bad', 'replay', 'copy']"
-            @operation="handleOperation"
+        <template #content="{ item }">
+          <template v-for="(content, contentIndex) in item.content" :key="contentIndex">
+            <t-chat-content :content="content.data" :role="item.role" />
+          </template>
+        </template>
+        <template #actionbar="{ item }">
+          <t-chat-actionbar
+            v-if="item.role === 'assistant'"
+            :comment="commentValue"
+            :content="item.content[0]?.data || ''"
+            :action-bar="['good', 'bad', 'replay', 'copy']"
+            @actions="handleOperation"
           />
         </template>
+
         <template #footer>
           <t-chat-input :stop-disabled="isStreamLoad" @send="inputEnter" @stop="onStop"> </t-chat-input>
         </template>
-      </t-chat>
+      </t-chat-list>
     </template>
   </t-dialog>
 </template>
@@ -43,32 +50,50 @@ import { MockSSEResponse } from './mock-data/sseRequest';
 const fetchCancel = ref(null);
 const loading = ref(false);
 const isStreamLoad = ref(false);
+const commentValue = ref('');
 // 倒序渲染
 const chatList = ref([
   {
-    content: `模型由 <span>hunyuan</span> 变为 <span>GPT4</span>`,
-    role: 'model-change',
+    role: 'system',
+    content: [
+      {
+        type: 'text',
+        data: '模型由hunyuan变为GPT4',
+      },
+    ],
   },
   {
     avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
     name: 'TDesignAI',
     datetime: '今天16:38',
-    content: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
     role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        data: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
+      },
+    ],
   },
   {
     avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
     name: '自己',
     datetime: '今天16:38',
-    content: '南极的自动提款机叫什么名字？',
     role: 'user',
+    content: [
+      {
+        type: 'text',
+        data: '南极的自动提款机叫什么名字？',
+      },
+    ],
   },
 ]);
-const handleOperation = function (type, options) {
-  console.log('handleOperation', type, options);
-};
-const operation = function (type, options) {
-  console.log(type, options);
+
+const handleOperation = (type) => {
+  if (type === 'good') {
+    commentValue.value = commentValue.value === 'good' ? '' : 'good';
+  } else if (type === 'bad') {
+    commentValue.value = commentValue.value === 'bad' ? '' : 'bad';
+  }
 };
 const clearConfirm = function () {
   chatList.value = [];
@@ -88,18 +113,30 @@ const inputEnter = function (inputValue) {
     avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
     name: '自己',
     datetime: new Date().toDateString(),
-    content: inputValue,
     role: 'user',
+    content: [
+      {
+        type: 'text',
+        data: inputValue,
+      },
+    ],
   };
+
   chatList.value.unshift(params);
   // 空消息占位
   const params2 = {
     avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
     name: 'TDesignAI',
     datetime: new Date().toDateString(),
-    content: '',
     role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        data: '',
+      },
+    ],
   };
+
   chatList.value.unshift(params2);
   handleData(inputValue);
 };
@@ -160,13 +197,14 @@ const handleData = async () => {
       success(result) {
         loading.value = false;
         const { data } = result;
-        lastItem.content += data;
+        lastItem.content[0].data += data;
       },
       complete(isOk, msg) {
-        if (!isOk || !lastItem.content) {
+        if (!isOk || !lastItem.content[0].data) {
           lastItem.role = 'error';
-          lastItem.content = msg;
+          lastItem.content[0].data = msg;
         }
+
         // 控制终止按钮
         isStreamLoad.value = false;
         loading.value = false;
@@ -187,4 +225,3 @@ const handleData = async () => {
   background-color: var(--td-scroll-track-color);
 }
 </style>
-../_example-mock/sseRequest
diff --git a/packages/pro-components/chat/_example/chat-drawer.vue b/packages/pro-components/chat/chat-list/_example/chat-drawer.vue
similarity index 51%
rename from packages/pro-components/chat/_example/chat-drawer.vue
rename to packages/pro-components/chat/chat-list/_example/chat-drawer.vue
index 8919f2f02d..c995ede326 100644
--- a/packages/pro-components/chat/_example/chat-drawer.vue
+++ b/packages/pro-components/chat/chat-list/_example/chat-drawer.vue
@@ -7,47 +7,60 @@
       <t-avatar size="32px" shape="circle" image="https://tdesign.gtimg.com/site/chat-avatar.png"></t-avatar>
       <span class="title">Hi, &nbsp;我是AI</span>
     </template>
-    <t-chat
+    <t-chat-list
       layout="both"
       :clear-history="chatList.length > 0 && !isStreamLoad"
-      @on-action="operation"
+      :text-loading="loading"
       @clear="clearConfirm"
     >
       <template v-for="(item, index) in chatList" :key="index">
-        <t-chat-item
+        <t-chat-message
+          :avatar="item.avatar"
+          :name="item.name"
           :role="item.role"
           :content="item.content"
-          :text-loading="index === 0 && loading"
+          :datetime="item.datetime"
           :variant="getStyle(item.role)"
+          :placement="item.role === 'user' ? 'right' : item.role === 'assistant' ? 'left' : 'left'"
         >
-          <template v-if="!isStreamLoad" #actions>
-            <t-chat-action
-              :is-good="isGood"
-              :item-index="index"
-              :is-bad="isBad"
-              :content="item.content"
-              @operation="handleOperation"
+          <!-- 自定义操作按钮插槽 -->
+          <template #actionbar>
+            <t-chat-actionbar
+              v-if="item.role === 'assistant'"
+              :content="getActionContent(item.content)"
+              :action-bar="['good', 'bad', 'replay', 'copy']"
+              @actions="handleOperation"
             />
           </template>
-        </t-chat-item>
+        </t-chat-message>
       </template>
       <template #footer>
         <t-chat-input :stop-disabled="isStreamLoad" @send="inputEnter" @stop="onStop"> </t-chat-input>
       </template>
-    </t-chat>
+    </t-chat-list>
   </t-drawer>
 </template>
 <script setup>
 import { ref } from 'vue';
 const visible = ref(false);
-import { MockSSEResponse } from './mock-data/sseRequest';
+import { MockSSEResponse } from './mock-data/sseRequest-reasoning';
 
 const fetchCancel = ref(null);
 const loading = ref(false);
 const isStreamLoad = ref(false);
-const isGood = ref(false);
-const isBad = ref(false);
 
+const handleOperation = function (type, options) {
+  const { index } = options;
+  if (type === 'good') {
+    commentValue.value = commentValue.value === 'good' ? '' : 'good';
+  } else if (type === 'bad') {
+    commentValue.value = commentValue.value === 'bad' ? '' : 'bad';
+  } else if (type === 'replay') {
+    const userQuery = chatList.value[index + 1].content[0].data;
+
+    inputEnter(userQuery);
+  }
+};
 const getStyle = (role) => {
   if (role === 'assistant') {
     return 'outline';
@@ -55,43 +68,44 @@ const getStyle = (role) => {
   if (role === 'user') {
     return 'base';
   }
-  if (role === 'error') {
-    return 'text';
-  }
   return 'text';
 };
-
-const handleOperation = function (type, options) {
-  const { index } = options;
-  if (type === 'good') {
-    isGood.value = !isGood.value;
-    isBad.value = false;
-  } else if (type === 'bad') {
-    isBad.value = !isBad.value;
-    isGood.value = false;
-  } else if (type === 'replay') {
-    const userQuery = chatList.value[index + 1].content;
-    inputEnter(userQuery);
-  }
+// 获取操作按钮需要的内容（排除thinking类型）
+const getActionContent = function (contentArray) {
+  const textContent = contentArray.find((item) => item.type === 'text' || item.type === 'markdown');
+  return textContent ? textContent.data : '';
 };
-// 倒序渲染
+// 正序渲染
 const chatList = ref([
   {
-    content: `模型由 <span>hunyuan</span> 变为 <span>GPT4</span>`,
-    role: 'model-change',
+    role: 'system',
+    content: [
+      {
+        type: 'text',
+        data: '模型由 hunyuan 变为 GPT4',
+      },
+    ],
   },
   {
-    content: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
-    role: 'assistant',
+    role: 'user',
+    content: [
+      {
+        type: 'text',
+        data: '南极的自动提款机叫什么名字？',
+      },
+    ],
   },
   {
-    content: '南极的自动提款机叫什么名字？',
-    role: 'user',
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        data: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
+      },
+    ],
   },
 ]);
-const operation = function (type, options) {
-  console.log(type, options);
-};
+
 const clearConfirm = function () {
   chatList.value = [];
 };
@@ -107,16 +121,37 @@ const inputEnter = function (inputValue) {
   }
   if (!inputValue) return;
   const params = {
-    content: inputValue,
     role: 'user',
+    content: [
+      {
+        type: 'text',
+        data: inputValue,
+      },
+    ],
   };
-  chatList.value.unshift(params);
+
+  chatList.value.push(params);
   // 空消息占位
   const params2 = {
-    content: '',
     role: 'assistant',
+    content: [
+      {
+        type: 'thinking',
+        status: 'pending',
+        data: {
+          title: '思考中...',
+          text: '',
+        },
+      },
+      {
+        type: 'markdown',
+        data: '',
+      },
+    ],
   };
-  chatList.value.unshift(params2);
+
+  chatList.value.push(params2);
+
   handleData(inputValue);
 };
 const fetchSSE = async (fetchFn, options) => {
@@ -131,9 +166,6 @@ const fetchSSE = async (fetchFn, options) => {
   const reader = response?.body?.getReader();
   const decoder = new TextDecoder();
   if (!reader) return;
-  const bufferArr = [];
-  let dataText = ''; // 记录数据
-  const event = { data: null };
 
   reader.read().then(function processText({ done, value }) {
     if (done) {
@@ -143,29 +175,28 @@ const fetchSSE = async (fetchFn, options) => {
     }
     const chunk = decoder.decode(value, { stream: true });
     const buffers = chunk.toString().split(/\r?\n/);
-    bufferArr.push(...buffers);
-    const i = 0;
-    while (i < bufferArr.length) {
-      const line = bufferArr[i];
-      if (line) {
-        dataText = dataText + line;
-        event.data = dataText;
-      }
-      if (event.data) {
-        const jsonData = JSON.parse(JSON.stringify(event));
-        success(jsonData);
-        event.data = null;
-      }
-      bufferArr.splice(i, 1);
-    }
+    const jsonData = JSON.parse(buffers);
+    success(jsonData);
     reader.read().then(processText);
   });
 };
 const handleData = async () => {
   loading.value = true;
   isStreamLoad.value = true;
-  const lastItem = chatList.value[0];
-  const mockedData = `这是一段模拟的流式字符串数据。`;
+  const lastItem = chatList.value[chatList.value.length - 1];
+
+  const mockedData = {
+    reasoning: `嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。
+
+那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。`,
+    content: `牛顿第一定律（惯性定律）**并不适用于所有参考系**，它只在**惯性参考系**中成立。以下是关键点：
+
+---
+
+### **1. 牛顿第一定律的核心**
+- **内容**：物体在不受外力（或合力为零）时，将保持静止或匀速直线运动状态。
+- **本质**：定义了惯性系的存在——即存在一类参考系，在其中惯性定律成立。`,
+  };
   const mockResponse = new MockSSEResponse(mockedData);
   fetchCancel.value = mockResponse;
   await fetchSSE(
@@ -174,15 +205,25 @@ const handleData = async () => {
     },
     {
       success(result) {
+        console.log('success', result);
         loading.value = false;
-        const { data } = result;
-        lastItem.content += data;
+        // 设置思考过程的status
+        if (result.delta.reasoning_content) {
+          lastItem.content[0].data.text += result.delta.reasoning_content;
+        }
+        if (result.delta.content) {
+          lastItem.content[1].data += result.delta.content;
+        }
       },
       complete(isOk, msg) {
-        if (!isOk || !lastItem.content) {
+        if (!isOk) {
           lastItem.role = 'error';
-          lastItem.content = msg;
+          lastItem.content[0].data.text = msg;
+          lastItem.content[1].data = msg;
         }
+        // 设置思考过程的status
+        lastItem.content[0].status = 'complete';
+        lastItem.content[0].data.title = '已完成思考(耗时20秒)';
         // 控制终止按钮
         isStreamLoad.value = false;
         loading.value = false;
diff --git a/packages/pro-components/chat/chat-list/_example/chat-footer-slot.vue b/packages/pro-components/chat/chat-list/_example/chat-footer-slot.vue
new file mode 100644
index 0000000000..0883c1878c
--- /dev/null
+++ b/packages/pro-components/chat/chat-list/_example/chat-footer-slot.vue
@@ -0,0 +1,130 @@
+<template>
+  <t-chat-list
+    :clear-history="false"
+    :text-loading="loading"
+    :data="[
+      {
+        avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+        name: '自己',
+        datetime: '今天16:38',
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            data: '南极的自动提款机叫什么名字？',
+          },
+        ],
+      },
+      {
+        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+        name: 'TDesignAI',
+        datetime: '今天16:38',
+        role: 'assistant',
+        content: [
+          {
+            type: 'text',
+            data: '昨日上午北京道路车辆通行状况，9:00的峰值（1330）可能显示早高峰拥堵最严重时段，10:00后缓慢回落，可以得出如下折线图：',
+          },
+          {
+            type: 'chart',
+            data: {
+              id: '13123',
+              chartType: 'line',
+              options: {
+                xAxis: {
+                  type: 'category',
+                  data: [
+                    '0:00',
+                    '1:00',
+                    '2:00',
+                    '3:00',
+                    '4:00',
+                    '5:00',
+                    '6:00',
+                    '7:00',
+                    '8:00',
+                    '9:00',
+                    '10:00',
+                    '11:00',
+                    '12:00',
+                  ],
+                },
+                yAxis: {
+                  axisLabel: { inside: false },
+                },
+                series: [
+                  {
+                    data: [820, 932, 901, 934, 600, 500, 700, 900, 1330, 1320, 1200, 1300, 1100],
+                    type: 'line',
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+    ]"
+  >
+    <!-- eslint-disable vue/no-unused-vars -->
+    <template #name="{ item, index }">
+      {{ item.name }}
+    </template>
+    <template #avatar="{ item, index }">
+      <t-avatar size="large" shape="circle" :image="item.avatar" />
+    </template>
+    <template #datetime="{ item, index }">
+      {{ item.datetime }}
+    </template>
+    <template #content="{ item, index }">
+      <template v-for="(contentItem, contentIndex) in item.content" :key="contentItem.data.id || contentIndex">
+        <t-chat-content v-if="contentItem.type === 'text'" :content="contentItem.data" :role="item.role" />
+        <TvisionTcharts
+          v-else-if="contentItem.type === 'chart'"
+          class="chart"
+          :chart-type="contentItem.data.chartType"
+          :options="contentItem.data.options"
+        />
+      </template>
+    </template>
+    <template #footer>
+      <t-chat-sender :loading="isStreamLoad" @send="inputEnter" @stop="handleStop">
+        <template #suffix="{ renderPresets }">
+          <!-- 不需要附件操作的使用方式 -->
+          <component :is="renderPresets([])" />
+        </template>
+      </t-chat-sender>
+    </template>
+  </t-chat-list>
+</template>
+<script setup lang="ts">
+import TvisionTcharts from 'tvision-charts-vue-next';
+import { ref } from 'vue';
+const loading = ref(false);
+const isStreamLoad = ref(false);
+const handleStop = function () {
+  isStreamLoad.value = false;
+};
+// 模拟消息发送
+const inputEnter = function (inputValue: string) {
+  if (isStreamLoad.value) {
+    return;
+  }
+  if (!inputValue) return;
+  isStreamLoad.value = true;
+  loading.value = true;
+  // 模拟接口请求响应中
+  setTimeout(() => {
+    loading.value = false;
+  }, 3000);
+  //   模拟流式数据加载中
+  setTimeout(() => {
+    isStreamLoad.value = false;
+  }, 5000);
+};
+</script>
+<style scoped>
+.chart {
+  width: 600px;
+  height: 500px;
+}
+</style>
diff --git a/packages/pro-components/chat/chat-list/_example/chat-with-message.vue b/packages/pro-components/chat/chat-list/_example/chat-with-message.vue
new file mode 100644
index 0000000000..51b3bca9c4
--- /dev/null
+++ b/packages/pro-components/chat/chat-list/_example/chat-with-message.vue
@@ -0,0 +1,385 @@
+<template>
+  <div class="chat-box">
+    <t-chat-list
+      ref="chatRef"
+      :clear-history="chatList.length > 0 && !isStreamLoad"
+      :text-loading="loading"
+      style="height: 600px"
+      animation="gradient"
+      @scroll="handleChatScroll"
+      @clear="clearConfirm"
+    >
+      <template v-for="(item, index) in chatList" :key="index">
+        <t-chat-message
+          :avatar="item.avatar"
+          :name="item.name"
+          :role="item.role"
+          :content="item.content"
+          :datetime="item.datetime"
+          :handle-actions="onActions"
+          :chat-content-props="{
+            thinking: { maxHeight: 100, collapsed: false },
+            search: { expandable: true },
+          }"
+        >
+          <!-- 自定义操作按钮插槽 -->
+          <template #actionbar>
+            <t-chat-actionbar
+              v-if="item.role === 'assistant'"
+              :content="getActionContent(item.content)"
+              :action-bar="['good', 'bad', 'replay', 'copy']"
+              @actions="handleOperation"
+            />
+          </template>
+        </t-chat-message>
+      </template>
+      <template #footer>
+        <t-chat-sender v-model="query" :loading="isStreamLoad" @send="inputEnter" @stop="onStop"> </t-chat-sender>
+      </template>
+    </t-chat-list>
+  </div>
+</template>
+<script setup lang="jsx">
+import { ref } from 'vue';
+import { MockSSEResponse } from './mock-data/sseRequest-reasoning';
+import { ArrowDownIcon } from 'tdesign-icons-vue-next';
+
+const fetchCancel = ref(null);
+const loading = ref(false);
+const query = ref('');
+// 流式数据加载中
+const isStreamLoad = ref(false);
+
+const chatRef = ref(null);
+// 滚动到底部
+const backBottom = () => {
+  chatRef.value.scrollToBottom({
+    behavior: 'smooth',
+  });
+};
+// 是否显示回到底部按钮
+const handleChatScroll = function ({ e }) {
+  console.log('handleChatScroll', e);
+};
+
+// 清空消息
+const clearConfirm = function () {
+  chatList.value = [];
+};
+const handleOperation = function (type, options) {
+  console.log('handleOperation', type, options);
+};
+
+// 处理建议和搜索项的操作
+const onActions = {
+  suggestion: (content) => {
+    console.log('suggestionItem', content);
+  },
+  searchItem: (content, event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log('searchItem', content);
+  },
+};
+
+// 获取操作按钮需要的内容（排除thinking类型）
+const getActionContent = function (contentArray) {
+  const textContent = contentArray.find((item) => item.type === 'text' || item.type === 'markdown');
+  return textContent ? textContent.data : '';
+};
+// 正序渲染
+const chatList = ref([
+  {
+    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+    name: '自己',
+    datetime: '今天16:38',
+    id: '11111',
+    role: 'user',
+    status: 'complete',
+    content: [
+      {
+        type: 'text',
+        data: '分析以下内容，总结一篇广告策划方案',
+      },
+      {
+        type: 'attachment',
+        data: [
+          {
+            fileType: 'doc',
+            name: 'demo.docx',
+            url: 'https://tdesign.gtimg.com/site/demo.docx',
+            size: 12312,
+          },
+          {
+            fileType: 'pdf',
+            name: 'demo2.pdf',
+            url: 'https://tdesign.gtimg.com/site/demo.pdf',
+            size: 34333,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+    name: '自己',
+    datetime: '今天16:38',
+    id: '22222',
+    role: 'user',
+    status: 'complete',
+    content: [
+      {
+        type: 'text',
+        data: '这个图里的帅哥是谁？',
+      },
+      {
+        type: 'attachment',
+        data: [
+          {
+            fileType: 'image',
+            name: 'avatar.jpg',
+            size: 234234,
+            url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+    name: 'TDesignAI',
+    datetime: '今天16:38',
+    id: '33333',
+    role: 'assistant',
+    status: 'complete',
+    content: [
+      {
+        type: 'thinking',
+        status: 'complete',
+        data: {
+          title: '已完成思考（耗时3秒）',
+          text: '好的，我现在需要回答用户关于对比近3年当代偶像爱情剧并总结创作经验的问题\n查询网络信息中...\n根据网络搜索结果，成功案例包括《春色寄情人》《要久久爱》《你也有今天》等，但缺乏具体播放数据，需要结合行业报告总结共同特征。2022-2024年偶像爱情剧的创作经验主要集中在题材创新、现实元素融入、快节奏叙事等方面。结合行业报告和成功案例，总结出以下创作经验。',
+        },
+      },
+      {
+        type: 'search',
+        data: {
+          title: '搜索到2篇相关内容',
+          references: [
+            {
+              title: '《传媒内参2024剧集市场分析报告》',
+              url: '',
+            },
+            {
+              title: '2024年国产剧市场分析:优质内容的消失与未来展望_观众_剧集_平台',
+              url: '',
+            },
+          ],
+        },
+      },
+      {
+        type: 'markdown',
+        data: '**数据支撑：** 据《传媒内参2024报告》，2024年偶像爱情剧完播率`提升12%`，其中"职业创新"类`占比达65%`，豆瓣评分7+作品数量同比`增加40%`。',
+      },
+      {
+        type: 'suggestion',
+        data: [
+          {
+            title: '近3年偶像爱情剧的市场反馈如何',
+            prompt: '近3年偶像爱情剧的市场反馈如何',
+          },
+          {
+            title: '偶像爱情剧的观众群体分析',
+            prompt: '偶像爱情剧的观众群体分析',
+          },
+        ],
+      },
+    ],
+  },
+]);
+
+const onStop = function () {
+  if (fetchCancel.value) {
+    fetchCancel.value.controller.close();
+    loading.value = false;
+    isStreamLoad.value = false;
+  }
+};
+
+const inputEnter = function (inputValue) {
+  if (isStreamLoad.value) {
+    return;
+  }
+  if (!inputValue) return;
+  const params = {
+    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+    name: '自己',
+    datetime: new Date().toDateString(),
+    role: 'user',
+    content: [
+      {
+        type: 'text',
+        data: inputValue,
+      },
+    ],
+  };
+
+  chatList.value.push(params);
+  // 空消息占位
+  const params2 = {
+    avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+    name: 'TDesignAI',
+    datetime: new Date().toDateString(),
+    role: 'assistant',
+    content: [
+      {
+        type: 'thinking',
+        status: 'pending',
+        data: {
+          title: '思考中...',
+          text: '',
+        },
+      },
+      {
+        type: 'markdown',
+        data: '',
+      },
+    ],
+  };
+
+  chatList.value.push(params2);
+
+  handleData(inputValue);
+  query.value = '';
+};
+
+const fetchSSE = async (fetchFn, options) => {
+  const response = await fetchFn();
+  const { success, fail, complete } = options;
+  // 如果不 ok 说明有请求错误
+  if (!response.ok) {
+    complete?.(false, response.statusText);
+    fail?.();
+    return;
+  }
+  const reader = response?.body?.getReader();
+  const decoder = new TextDecoder();
+  if (!reader) return;
+
+  reader.read().then(function processText({ done, value }) {
+    if (done) {
+      // 正常的返回
+      complete?.(true);
+      return;
+    }
+    const chunk = decoder.decode(value, { stream: true });
+    const buffers = chunk.toString().split(/\r?\n/);
+    const jsonData = JSON.parse(buffers);
+    success(jsonData);
+    reader.read().then(processText);
+  });
+};
+const handleData = async () => {
+  loading.value = true;
+  isStreamLoad.value = true;
+  const lastItem = chatList.value[chatList.value.length - 1];
+
+  const mockedData = {
+    reasoning: `嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。
+  
+  那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。`,
+    content: `牛顿第一定律（惯性定律）**并不适用于所有参考系**，它只在**惯性参考系**中成立。以下是关键点：
+  
+  ---
+  
+  ### **1. 牛顿第一定律的核心**
+  - **内容**：物体在不受外力（或合力为零）时，将保持静止或匀速直线运动状态。
+  - **本质**：定义了惯性系的存在——即存在一类参考系，在其中惯性定律成立。`,
+  };
+  const mockResponse = new MockSSEResponse(mockedData);
+  fetchCancel.value = mockResponse;
+  await fetchSSE(
+    () => {
+      return mockResponse.getResponse();
+    },
+    {
+      success(result) {
+        console.log('success', result);
+        loading.value = false;
+        // 设置思考过程的status
+        if (result.delta.reasoning_content) {
+          lastItem.content[0].data.text += result.delta.reasoning_content;
+        }
+        if (result.delta.content) {
+          lastItem.content[1].data += result.delta.content;
+        }
+      },
+      complete(isOk, msg) {
+        if (!isOk) {
+          lastItem.role = 'error';
+          lastItem.content[0].data.text = msg;
+          lastItem.content[1].data = msg;
+        }
+
+        // 显示用时xx秒，业务侧需要自行处理
+        lastItem.duration = 20;
+        // 控制终止按钮
+        isStreamLoad.value = false;
+        loading.value = false;
+      },
+    },
+  );
+};
+</script>
+<style lang="less">
+.text {
+  color: red;
+}
+/* 应用滚动条样式 */
+::-webkit-scrollbar-thumb {
+  background-color: var(--td-scrollbar-color);
+}
+::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: var(--td-scrollbar-hover-color);
+}
+::-webkit-scrollbar-track {
+  background-color: var(--td-scroll-track-color);
+}
+
+.model-select {
+  display: flex;
+  align-items: center;
+  .t-select {
+    width: 112px;
+    height: 32px;
+    margin-right: 8px;
+    .t-input {
+      border-radius: 32px;
+      padding: 0 15px;
+    }
+  }
+  .check-box {
+    width: 112px;
+    height: 32px;
+    border-radius: 32px;
+    border: 0;
+    background: #e7e7e7;
+    color: rgba(0, 0, 0, 0.9);
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    .t-button__text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span {
+        margin-left: 4px;
+      }
+    }
+  }
+  .check-box.is-active {
+    border: 1px solid #d9e1ff;
+    background: #f2f3ff;
+    color: var(--td-brand-color);
+  }
+}
+</style>
diff --git a/packages/pro-components/chat/_example/mock-data/sseRequest-reasoning.ts b/packages/pro-components/chat/chat-list/_example/mock-data/sseRequest-reasoning.ts
similarity index 100%
rename from packages/pro-components/chat/_example/mock-data/sseRequest-reasoning.ts
rename to packages/pro-components/chat/chat-list/_example/mock-data/sseRequest-reasoning.ts
diff --git a/packages/pro-components/chat/_example/mock-data/sseRequest.ts b/packages/pro-components/chat/chat-list/_example/mock-data/sseRequest.ts
similarity index 100%
rename from packages/pro-components/chat/_example/mock-data/sseRequest.ts
rename to packages/pro-components/chat/chat-list/_example/mock-data/sseRequest.ts
diff --git a/packages/pro-components/chat/chat-list/_usage/index.vue b/packages/pro-components/chat/chat-list/_usage/index.vue
new file mode 100644
index 0000000000..dd9b5af1d8
--- /dev/null
+++ b/packages/pro-components/chat/chat-list/_usage/index.vue
@@ -0,0 +1,52 @@
+<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
+    <template #chat="{ configProps }"
+      ><t-chat-list
+        v-bind="configProps"
+        :data="[
+          {
+            avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+            role: 'user',
+            content: [
+              {
+                type: 'text',
+                data: '南极的自动提款机叫什么名字？',
+              },
+            ],
+          },
+          {
+            avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+            role: 'assistant',
+            content: [
+              {
+                type: 'text',
+                data: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
+              },
+            ],
+          },
+        ]"
+      >
+      </t-chat-list
+    ></template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref, onMounted } from 'vue';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'chat', value: 'chat' }];
+
+const usageCodeMap = {
+  chat: "\n      <t-chat-list \n        v-bind=\"configProps\"\n        :data=\"[\n          {\n            avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',\n            role: 'user',\n            content: [\n              {\n                type: 'text',\n                data: '南极的自动提款机叫什么名字？',\n              },\n            ],\n          },\n          {\n            avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',\n            role: 'assistant',\n            content: [\n              {\n                type: 'text',\n                data: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',\n              },\n            ],\n          },\n        ]\"\n      >\n      </t-chat-list>",
+};
+
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>
diff --git a/packages/pro-components/chat/chat-list/_usage/props.json b/packages/pro-components/chat/chat-list/_usage/props.json
new file mode 100644
index 0000000000..37d56013cd
--- /dev/null
+++ b/packages/pro-components/chat/chat-list/_usage/props.json
@@ -0,0 +1,60 @@
+[
+  {
+    "name": "animation",
+    "type": "enum",
+    "defaultValue": "skeleton",
+    "options": [
+      {
+        "label": "skeleton",
+        "value": "skeleton"
+      },
+      {
+        "label": "moving",
+        "value": "moving"
+      },
+      {
+        "label": "gradient",
+        "value": "gradient"
+      },
+      {
+        "label": "dots",
+        "value": "dots"
+      },
+      {
+        "label": "circle",
+        "value": "circle"
+      },
+      {
+        "label": "dot",
+        "value": "dot"
+      }
+    ]
+  },
+  {
+    "name": "layout",
+    "type": "enum",
+    "defaultValue": "both",
+    "options": [
+      {
+        "label": "both",
+        "value": "both"
+      },
+      {
+        "label": "single",
+        "value": "single"
+      }
+    ]
+  },
+  {
+    "name": "clearHistory",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
+  },
+  {
+    "name": "textLoading",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  }
+]
diff --git a/packages/pro-components/chat/chat.md b/packages/pro-components/chat/chat-list/chat-list.md
similarity index 78%
rename from packages/pro-components/chat/chat.md
rename to packages/pro-components/chat/chat-list/chat-list.md
index 3c2d85fd99..f0a4a3c696 100644
--- a/packages/pro-components/chat/chat.md
+++ b/packages/pro-components/chat/chat-list/chat-list.md
@@ -2,34 +2,35 @@
 
 ## API
 
-### Chat Props
+### ChatList Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-actions | Slot / Function | - | 自定义操作按钮的插槽。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+actions | Slot / Function | - | 自定义操作按钮的插槽。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) `待废弃，请尽快使用actionbar` | N
+actionbar | Slot / Function | - | 自定义操作按钮的插槽。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)  | N
 animation | String | skeleton | 动画效果，支持「渐变加载动画」,「闪烁加载动画」, 「骨架屏」三种。可选项：skeleton/moving/gradient | N
 avatar | Slot / Function | - | 自定义每个对话单元的头像插槽。TS 类型：`TNode<{ item: TdChatItemProps, index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 clearHistory | Boolean | true | 是否显示清空历史 | N
 content | Slot / Function | - | 自定义每个对话单独的聊天内容。TS 类型：`TNode<{ item: TdChatItemProps, index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-data | Array | - | 对话列表的数据。TS 类型：`Array<TdChatItemMeta>` ` interface TdChatItemMeta { avatar?: string; name?:string; role?:string; datetime?: string; content?: string; reasoning?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/pro-components/chat/type.ts) | N
+data | Array | - | 对话列表的数据。TS 类型：`Array<TdChatItemMeta>` ` interface TdChatItemMeta { avatar?: string; name?:string; role?:string; datetime?: string; content?: string \| object; reasoning?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/pro-components/chat/type.ts) | N
 datetime | Slot / Function | - | 自定义每个对话单元的时间。TS 类型：`TNode<{ item: TdChatItemProps, index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-isStreamLoad | Boolean | false | 流式加载是否结束 | N
-layout | String | both | 对话布局形式，支持两侧对齐与左对齐。可选项：both/single | N
+layout | String | both | 对话布局形式，支持两侧对齐与左对齐。可选项：both/single `使用默认插槽时无效，请使用ChatMessage的placement设置消息显示位置` | N
 name | Slot / Function | - | 自定义每个对话单元的昵称。TS 类型：`TNode<{ item: TdChatItemProps, index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-reasoning | Slot / Function | - | 自定义每个对话单元的思考过程的插槽。TS 类型：`TNode<{ item: TdChatItemProps, index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-reverse | Boolean | true | 是否表现为倒序 | N
+reverse | Boolean | false | 默认为正序 | N
 textLoading | Boolean | false | 新消息是否处于加载状态，加载状态默认显示骨架屏，接口请求返回数据时请将新消息加载状态置为false | N
 onClear | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击清空历史按钮回调。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 onScroll | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>滚动事件的回调。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+autoScroll | Boolean | true | 是否开启自动滚动到底部 | N
+showScrollButton | Boolean | true | 是否显示滚动到底部按钮 | N
 
-### Chat Events
+### ChatList Events
 
 名称 | 参数 | 描述
 -- | -- | --
 clear | `(context: { e: MouseEvent })` | 点击清空历史按钮回调。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
 scroll | `(context: { e: MouseEvent })` | 滚动事件的回调。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)
 
-### ChatInstanceFunctions 组件实例方法
+### ChatListInstanceFunctions 组件实例方法
 
 名称 | 参数 | 返回值 | 描述
 -- | -- | -- | --
diff --git a/packages/pro-components/chat/chat-list/chat-list.tsx b/packages/pro-components/chat/chat-list/chat-list.tsx
new file mode 100644
index 0000000000..2d790001e6
--- /dev/null
+++ b/packages/pro-components/chat/chat-list/chat-list.tsx
@@ -0,0 +1,299 @@
+import { defineComponent, computed, provide, ref, onMounted, onUnmounted } from 'vue';
+import { ClearIcon, ArrowDownIcon } from 'tdesign-icons-vue-next';
+import { useConfig } from 'tdesign-vue-next/es/config-provider/hooks';
+import { isArray, throttle, debounce } from 'lodash-es';
+
+import props from './props';
+import { Divider, Popconfirm, Button } from 'tdesign-vue-next';
+import { usePrefixClass, useTNodeJSX } from '@tdesign/shared-hooks';
+import ChatMessage from '../chat-message';
+import { TdChatItemMeta, ScrollToBottomParams } from '../type';
+
+const handleScrollToBottom = (target: HTMLDivElement, behavior?: 'auto' | 'smooth') => {
+  const currentScrollHeight = target.scrollHeight;
+  const currentClientHeight = target.clientHeight;
+
+  const innerBehavior = behavior ?? 'auto';
+  if (innerBehavior === 'auto') {
+    target.scrollTop = currentScrollHeight - currentClientHeight;
+  } else {
+    const startScrollTop = target.scrollTop;
+    const endScrollTop = currentScrollHeight - currentClientHeight;
+    const duration = 300;
+    const step = (endScrollTop - startScrollTop) / duration;
+    let startTime: number | undefined;
+    // 平滑地修改scrollTop值
+    const animateScroll = (time: number) => {
+      if (!startTime) {
+        startTime = time;
+      }
+      const elapsed = time - startTime;
+      const top = Math.min(endScrollTop, startScrollTop + elapsed * step);
+      target.scrollTop = top;
+      if (top < endScrollTop) {
+        requestAnimationFrame(animateScroll);
+      }
+    };
+
+    requestAnimationFrame(animateScroll);
+  }
+};
+
+export default defineComponent({
+  name: 'TChatList',
+  props,
+  emits: ['clear', 'scroll'],
+  setup(props, { emit, expose }) {
+    const COMPONENT_NAME = usePrefixClass('chat');
+    const { globalConfig } = useConfig('chat');
+    const renderTNodeJSX = useTNodeJSX();
+    provide('textLoading', props.textLoading);
+    provide('animation', props.animation);
+    provide('reverse', props.reverse);
+    const classes = computed(() => {
+      return [
+        COMPONENT_NAME.value,
+        {
+          [`${COMPONENT_NAME.value}--normal`]: props.layout === 'both',
+        },
+      ];
+    });
+    // 默认反转布局
+    const listClasses = computed(() => {
+      return [
+        `${COMPONENT_NAME.value}__list`,
+        {
+          [`${COMPONENT_NAME.value}__list--reverse`]: props.reverse,
+        },
+      ];
+    });
+    const renderBody = () => {
+      /**
+       * 1. 两种方式获取要渲染的 list
+       *  a. props 传 data
+       *  b. slots t-chat-item
+       * a 优先级更高
+       */
+      const data = renderTNodeJSX('data');
+      if (isArray(data) && data.length > 0) {
+        // 根据layout来设置placement，both时仅对user、assistant设置placement，其他值使用默认left
+        const setPlacement = (item: TdChatItemMeta) => {
+          if (props.layout === 'both') {
+            if (item.role === 'assistant') return 'left';
+            if (item.role === 'user') return 'right';
+            return 'left'; // 其他role使用默认值
+          }
+          return 'left';
+        };
+        return data.map((item: TdChatItemMeta, index: number) => (
+          <ChatMessage
+            avatar={item.avatar}
+            name={item.name}
+            role={item.role}
+            status={
+              item.status || (props.textLoading && (props.reverse ? index === 0 : index === data.length - 1))
+                ? 'pending'
+                : ''
+            }
+            content={item.content}
+            datetime={item.datetime}
+            animation={props.animation}
+            placement={setPlacement(item)}
+            v-slots={{
+              actionbar: () =>
+                renderTNodeJSX('actionbar', {
+                  params: { item, index },
+                }) ||
+                renderTNodeJSX('actions', {
+                  params: { item, index },
+                }),
+              name: () => renderTNodeJSX('name', { params: { item, index } }),
+              avatar: () => renderTNodeJSX('avatar', { params: { item, index } }),
+              datetime: () => renderTNodeJSX('datetime', { params: { item, index } }),
+              header: () => renderTNodeJSX('header', { params: { item, index } }),
+              content: () => renderTNodeJSX('content', { params: { item, index } }),
+            }}
+          />
+        ));
+      } else {
+        return renderTNodeJSX('default');
+      }
+    };
+    const clearConfirm = (context: { e: MouseEvent }) => {
+      emit('clear', context);
+    };
+    const defaultClearHistory = (
+      <Popconfirm content={globalConfig.value.confirmClearHistory} onConfirm={clearConfirm}>
+        <Divider class="clear-btn">
+          <ClearIcon size="14px" />
+          <span class="clear-btn-text">{globalConfig.value.clearHistoryBtnText}</span>
+        </Divider>
+      </Popconfirm>
+    );
+    const showFooter = computed(() => renderTNodeJSX('footer'));
+    const listRef = ref<HTMLDivElement>();
+    const innerRef = ref<HTMLDivElement>();
+    // 回到底部按钮显示
+    const scrollButtonVisible = ref(false);
+    /** 检测并显示滚到底部按钮（阈值 140px，debounce 70ms） */
+    const checkAndShowScrollButton = debounce(() => {
+      // 关闭时不显示按钮也不计算
+      if (!props.showScrollButton) {
+        scrollButtonVisible.value = false;
+        return;
+      }
+      const list = listRef.value;
+      if (!list) return;
+      if (!props.reverse) {
+        if (list && list.scrollHeight - list.clientHeight - list.scrollTop > 0) {
+          scrollButtonVisible.value = true;
+        } else {
+          scrollButtonVisible.value = false;
+        }
+      } else {
+        scrollButtonVisible.value = list.scrollTop < 0;
+      }
+    }, 70);
+    // 自动滚动相关状态
+    const scrollTopTmp = ref(0);
+    const scrollHeightTmp = ref(0);
+    const preventAutoScroll = ref(false);
+    const isAutoScrollEnabled = ref(false);
+    const observer = ref<ResizeObserver | null>(null);
+
+    // 滚动到底部
+    const scrollToBottom = (data?: ScrollToBottomParams) => {
+      if (!listRef.value) return;
+      const behavior = data?.behavior ?? 'auto';
+      handleScrollToBottom(listRef.value, behavior);
+    };
+
+    /** 触发自动滚动 */
+    const handleAutoScroll = throttle(() => {
+      const { autoScroll, defaultScrollTo, reverse } = props;
+      if (!autoScroll || !isAutoScrollEnabled.value || reverse) {
+        return;
+      }
+
+      if (!listRef.value) return;
+
+      if (defaultScrollTo === 'top') {
+        listRef.value.scrollTo({
+          top: 0,
+          behavior: 'auto',
+        });
+      } else {
+        scrollToBottom({
+          behavior: 'auto',
+        });
+      }
+    }, 50);
+
+    /** 检测自动滚动是否触发 */
+    const checkAutoScroll = throttle(() => {
+      if (!listRef.value || props.reverse) return;
+      const { scrollTop, scrollHeight, clientHeight } = listRef.value;
+      const { defaultScrollTo } = props;
+
+      // 判断上滚：总高度未变更 && 滚动diff大于阈值
+      const scrollDiff = scrollTopTmp.value - scrollTop;
+      const upScroll = scrollHeight === scrollHeightTmp.value && scrollDiff >= 10 ? true : false;
+      // 用户主动上滚，取消自动滚动，标记为手动阻止
+      if (upScroll) {
+        isAutoScrollEnabled.value = false;
+        preventAutoScroll.value = true;
+      } else {
+        const threshold = 50;
+        let isNearTarget = false;
+
+        if (defaultScrollTo === 'top') {
+          // 滚动到顶部模式：检查是否接近顶部
+          isNearTarget = scrollTop <= threshold;
+        } else {
+          // 滚动到底部模式：检查是否接近底部
+          isNearTarget = scrollHeight - (scrollTop + clientHeight) <= threshold;
+        }
+
+        // 如果手动阻止，必须滚动至目标位置阈值内才可恢复自动滚动
+        if (preventAutoScroll.value) {
+          if (isNearTarget) {
+            isAutoScrollEnabled.value = true;
+            preventAutoScroll.value = false;
+          }
+          // 未手动阻止，可触发自动滚动
+        } else {
+          isAutoScrollEnabled.value = true;
+        }
+      }
+      scrollTopTmp.value = scrollTop;
+    }, 60);
+
+    const handleScroll = (e: Event) => {
+      checkAutoScroll();
+      // 使用防抖检测是否显示“回到底部”按钮（距离底部超过阈值显示）
+      checkAndShowScrollButton();
+      emit('scroll', {
+        e,
+      });
+    };
+
+    // 初始化自动滚动
+    onMounted(() => {
+      const { defaultScrollTo } = props;
+      defaultScrollTo === 'bottom' && !props.reverse && (isAutoScrollEnabled.value = true);
+
+      const list = listRef.value;
+      const inner = innerRef.value;
+
+      // 初始化“回到底部”按钮显示状态
+      checkAndShowScrollButton();
+      if (list) {
+        observer.value = new ResizeObserver(() => {
+          // 高度变化，触发滚动校验
+          if (list?.scrollHeight !== scrollHeightTmp.value) {
+            handleAutoScroll();
+          }
+          scrollHeightTmp.value = list?.scrollHeight || 0;
+        });
+        if (inner) {
+          observer.value?.observe(inner);
+        }
+      }
+    });
+
+    onUnmounted(() => {
+      observer.value?.disconnect();
+    });
+
+    // 平滑回到底部
+    const backBottom = () => {
+      scrollToBottom({ behavior: 'smooth' });
+    };
+
+    expose({
+      scrollToBottom,
+    });
+
+    // clearHistory为true时，清空历史记录显示
+    // return里的props是响应式
+    // 倒序渲染不影响清空历史的位置
+    return () => (
+      <div class={classes.value}>
+        <div class={listClasses.value} ref={listRef} onScroll={handleScroll}>
+          {props.reverse && <div class="place-holder"></div>}
+          {props.reverse && props.clearHistory && renderTNodeJSX('clearHistory', defaultClearHistory)}
+          {props.reverse ? renderBody() : <div ref={innerRef}>{renderBody()}</div>}
+          {!props.reverse && props.clearHistory && renderTNodeJSX('clearHistory', defaultClearHistory)}
+        </div>
+        {showFooter.value && <div class={`${COMPONENT_NAME.value}__footer`}>{showFooter.value}</div>}
+        {props.showScrollButton && scrollButtonVisible.value && (
+          <Button variant="text" class={`${COMPONENT_NAME.value}__to-bottom`} onClick={backBottom}>
+            <div class={`${COMPONENT_NAME.value}__to-bottom-inner`}>
+              <ArrowDownIcon />
+            </div>
+          </Button>
+        )}
+      </div>
+    );
+  },
+});
diff --git a/packages/pro-components/chat/chat-list/index.ts b/packages/pro-components/chat/chat-list/index.ts
new file mode 100644
index 0000000000..12319e92e9
--- /dev/null
+++ b/packages/pro-components/chat/chat-list/index.ts
@@ -0,0 +1,2 @@
+import _ChatList from './chat-list';
+export default _ChatList;
diff --git a/packages/pro-components/chat/props.ts b/packages/pro-components/chat/chat-list/props.ts
similarity index 72%
rename from packages/pro-components/chat/props.ts
rename to packages/pro-components/chat/chat-list/props.ts
index b269207a5f..33d24726ee 100644
--- a/packages/pro-components/chat/props.ts
+++ b/packages/pro-components/chat/chat-list/props.ts
@@ -4,14 +4,35 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdChatProps } from './type';
+import { TdChatProps } from '../type';
 import { PropType } from 'vue';
 
 export default {
-  /** 自定义操作按钮的插槽 */
+  /** 自定义操作按钮的插槽
+   * @deprecated
+   */
   actions: {
     type: Function as PropType<TdChatProps['actions']>,
   },
+  /** 自定义操作按钮的插槽（推荐使用） */
+  actionbar: {
+    type: Function as PropType<TdChatProps['actionbar']>,
+  },
+  /** 是否开启自动滚动 */
+  autoScroll: {
+    type: Boolean,
+    default: true,
+  },
+  /** 默认滚动位置 */
+  defaultScrollTo: {
+    type: String as PropType<TdChatProps['defaultScrollTo']>,
+    default: 'bottom' as TdChatProps['defaultScrollTo'],
+    validator(val: TdChatProps['defaultScrollTo']): boolean {
+      if (!val) return true;
+      return ['top', 'bottom'].includes(val);
+    },
+  },
+
   /** 动画效果，支持「渐变加载动画」,「闪烁加载动画」, 「骨架屏」三种 */
   animation: {
     type: String as PropType<TdChatProps['animation']>,
@@ -61,9 +82,14 @@ export default {
   reasoning: {
     type: Function as PropType<TdChatProps['reasoning']>,
   },
-  /** 是否表现为倒序 */
+  /** 是否表现为倒序，默认为正序 */
   reverse: {
     type: Boolean,
+    default: false,
+  },
+  // 是否显示“回到底部”按钮
+  showScrollButton: {
+    type: Boolean as PropType<TdChatProps['showScrollButton']>,
     default: true,
   },
   /** 新消息是否处于加载状态，加载状态默认显示骨架屏，接口请求返回数据时请将新消息加载状态置为false */
diff --git a/packages/pro-components/chat/chat-loading.tsx b/packages/pro-components/chat/chat-loading.tsx
deleted file mode 100644
index b52017ee61..0000000000
--- a/packages/pro-components/chat/chat-loading.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { defineComponent } from 'vue';
-import { usePrefixClass } from '@tdesign/shared-hooks';
-import props from './chat-loading-props';
-
-export default defineComponent({
-  name: 'TChatLoading',
-  props,
-  setup(props) {
-    const componentName = usePrefixClass('chat-loading');
-
-    return () => (
-      <div class={`${componentName.value}`}>
-        {props.animation === 'moving' ? (
-          <div class={[`${componentName.value}__indicator`, `${componentName.value}__indicator--moving`]}>
-            <div class={[`${componentName.value}__dot`, `${componentName.value}__dot--top`]} />
-            <div class={[`${componentName.value}__dot`, `${componentName.value}__dot--left`]} />
-            <div class={[`${componentName.value}__dot`, `${componentName.value}__dot--right`]} />
-          </div>
-        ) : (
-          <div class={[`${componentName.value}__indicator`, `${componentName.value}__indicator--gradient`]} />
-        )}
-        <div class={`${componentName.value}__text`}>{props.text}</div>
-      </div>
-    );
-  },
-});
diff --git a/packages/pro-components/chat/chat-loading/__tests__/index.test.jsx b/packages/pro-components/chat/chat-loading/__tests__/index.test.jsx
new file mode 100644
index 0000000000..d5cf97a02c
--- /dev/null
+++ b/packages/pro-components/chat/chat-loading/__tests__/index.test.jsx
@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import ChatLoading from '@tdesign/pro-components-chat/chat-loading/index';
+import { omiVueify } from 'omi-vueify';
+
+describe('ChatLoading', () => {
+  describe(':props', () => {
+    it(':animation - moving', () => {
+      const wrapper = mount(ChatLoading, {
+        props: {
+          animation: 'moving',
+        },
+      });
+      expect(wrapper.find('.t-chat-loading__indicator--moving').exists()).toBe(true);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it(':animation - gradient', () => {
+      const wrapper = mount(ChatLoading, {
+        props: {
+          animation: 'gradient',
+        },
+      });
+      expect(wrapper.find('.t-chat-loading__indicator--gradient').exists()).toBe(true);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it(':text', () => {
+      const wrapper = mount(ChatLoading, {
+        props: {
+          text: 'Loading...',
+        },
+      });
+      expect(wrapper.find('.t-chat-loading__text').text()).toBe('Loading...');
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/pro-components/chat/_example/chat-loading-text.vue b/packages/pro-components/chat/chat-loading/_example/chat-loading-text.vue
similarity index 100%
rename from packages/pro-components/chat/_example/chat-loading-text.vue
rename to packages/pro-components/chat/chat-loading/_example/chat-loading-text.vue
diff --git a/packages/pro-components/chat/_example/chat-loading.vue b/packages/pro-components/chat/chat-loading/_example/chat-loading.vue
similarity index 55%
rename from packages/pro-components/chat/_example/chat-loading.vue
rename to packages/pro-components/chat/chat-loading/_example/chat-loading.vue
index 20692ad9b5..0d3a5685a0 100644
--- a/packages/pro-components/chat/_example/chat-loading.vue
+++ b/packages/pro-components/chat/chat-loading/_example/chat-loading.vue
@@ -1,7 +1,8 @@
 <template>
-  <t-space>
+  <t-space :style="{ display: 'flex', alignItems: 'center' }" :size="32">
     <t-chat-loading animation="moving" />
     <t-chat-loading animation="gradient" />
+    <t-chat-loading animation="dots" />
   </t-space>
 </template>
 <script></script>
diff --git a/packages/pro-components/chat/chat-loading-props.ts b/packages/pro-components/chat/chat-loading/chat-loading-props.ts
similarity index 92%
rename from packages/pro-components/chat/chat-loading-props.ts
rename to packages/pro-components/chat/chat-loading/chat-loading-props.ts
index af61c27882..ac4a0939b2 100644
--- a/packages/pro-components/chat/chat-loading-props.ts
+++ b/packages/pro-components/chat/chat-loading/chat-loading-props.ts
@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdChatLoadingProps } from './type';
+import { TdChatLoadingProps } from '../type';
 import { PropType } from 'vue';
 
 export default {
diff --git a/packages/pro-components/chat/chat-loading.md b/packages/pro-components/chat/chat-loading/chat-loading.md
similarity index 84%
rename from packages/pro-components/chat/chat-loading.md
rename to packages/pro-components/chat/chat-loading/chat-loading.md
index 7a3b98ec08..c316f1ea61 100644
--- a/packages/pro-components/chat/chat-loading.md
+++ b/packages/pro-components/chat/chat-loading/chat-loading.md
@@ -6,5 +6,5 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-animation | String | moving | 加载的状态形式。可选项：moving/gradient | N
+animation | String | moving | 加载的状态形式。可选项：skeleton/moving/gradient/dots/circle | N
 text | String | - | 加载过程展示的文字内容 | N
\ No newline at end of file
diff --git a/packages/pro-components/chat/chat-loading/index.ts b/packages/pro-components/chat/chat-loading/index.ts
new file mode 100644
index 0000000000..3e8c7965b1
--- /dev/null
+++ b/packages/pro-components/chat/chat-loading/index.ts
@@ -0,0 +1,11 @@
+// import _ChatLoading from './chat-loading';
+// export default _ChatLoading;
+import { TdChatLoadingProps } from 'tdesign-web-components';
+import 'tdesign-web-components/lib/chat-loading';
+import type { DefineComponent } from 'vue';
+import { omiVueify } from 'omi-vueify';
+// 附件
+export const ChatLoading = omiVueify('t-chat-loading', {
+  methodNames: [],
+}) as DefineComponent<TdChatLoadingProps>;
+export default ChatLoading;
diff --git a/packages/pro-components/chat/chat-markdown/_example/base.vue b/packages/pro-components/chat/chat-markdown/_example/base.vue
new file mode 100644
index 0000000000..fff6c480a6
--- /dev/null
+++ b/packages/pro-components/chat/chat-markdown/_example/base.vue
@@ -0,0 +1,125 @@
+<template>
+  <t-space direction="vertical">
+    <t-chat-markdown :content="displayText" />
+  </t-space>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+
+const doc = `
+# This is TDesign
+
+## This is TDesign
+
+### This is TDesign
+
+#### This is TDesign
+
+The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text.
+
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet.
+
+an example | *an example* | **an example**
+
+1. Bird
+1. McHale
+1. Parish
+    1. Bird
+    1. McHale
+        1. Parish
+
+- Red
+- Green
+- Blue
+    - Red
+    - Green
+        - Blue
+
+This is [an example](http://example.com/ "Title") inline link.
+
+<http://example.com/>
+# TDesign（腾讯设计体系）核心特性与技术架构
+
+以下是关于 TDesign（腾讯设计体系）的核心特性与技术架构的表格化总结：
+
+| 分类 | 核心内容 | 关键技术/特性 |
+|------|----------|---------------|
+| **设计理念** | • 设计价值观：用户为本、科技向善、突破创新... | • 设计原子单元 |
+| **核心组件库** | • 基础组件：Button/Input/Table/Modal... | • 组件覆盖率  |
+| **技术特性** | • 多框架支持：Vue/React/Angular... | • 按需加载 |
+\`\`\`bash
+$ npm i tdesign-vue-next
+\`\`\`
+
+---
+
+\`\`\`javascript
+import { createApp } from 'vue';
+import App from './app.vue';
+
+const app = createApp(App);
+app.use(TDesignChat);
+\`\`\`
+\`\`\`mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+
+\`\`\`
+  `;
+
+const displayText = ref(doc);
+const isTyping = ref(false);
+const timerRef = ref(null);
+const currentIndex = ref(doc.length);
+const startTimeRef = ref(Date.now());
+
+const typeWriter = () => {
+  if (!isTyping.value) return;
+
+  if (currentIndex.value < doc.length) {
+    const char = doc[currentIndex.value];
+    currentIndex.value += 1;
+    displayText.value += char;
+    timerRef.value = setTimeout(typeWriter, 30);
+  } else {
+    isTyping.value = false;
+  }
+};
+
+// 使用watch监听isTyping的变化
+watch(isTyping, (newValue) => {
+  // 清理之前的定时器
+  if (timerRef.value) {
+    clearTimeout(timerRef.value);
+    timerRef.value = null;
+  }
+
+  if (newValue) {
+    // 如果已经完成输入，点击开始则重置
+    if (currentIndex.value >= doc.length) {
+      currentIndex.value = 0;
+      displayText.value = '';
+    }
+    startTimeRef.value = Date.now();
+    // 延迟500ms开始打字效果
+    timerRef.value = setTimeout(typeWriter, 500);
+  }
+});
+
+onMounted(() => {
+  const handleResourceClick = (event) => {
+    console.log(event.target);
+  };
+  document.addEventListener('click', handleResourceClick);
+
+  return () => {
+    document.removeEventListener('click', handleResourceClick);
+  };
+});
+</script>
+
+<style scoped></style>
diff --git a/packages/pro-components/chat/chat-markdown/_example/event.vue b/packages/pro-components/chat/chat-markdown/_example/event.vue
new file mode 100644
index 0000000000..0f6915478b
--- /dev/null
+++ b/packages/pro-components/chat/chat-markdown/_example/event.vue
@@ -0,0 +1,90 @@
+<template>
+  <t-chat-markdown :content="displayText" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const doc = `
+这是一个markdown[链接地址](http://example.com), 点击后**不会**自动跳转.
+`;
+
+const displayText = ref(doc);
+const isTyping = ref(false);
+const timerRef = ref(null);
+const currentIndex = ref(doc.length);
+const startTimeRef = ref(Date.now());
+
+const findTargetElement = (event: MouseEvent, selector: string | string[]): HTMLElement | null => {
+  // 统一处理选择器输入格式（支持字符串或数组）
+  const selectors = Array.isArray(selector) ? selector : selector.split(',').map((s) => s.trim());
+
+  // 获取事件穿透路径（包含Shadow DOM内部元素）
+  const eventPath = event.composedPath();
+
+  // 遍历路径查找目标元素
+  for (const el of eventPath) {
+    // 类型安全判断 + 多选择器匹配
+    if (el instanceof HTMLElement) {
+      // 检查是否匹配任意一个选择器
+      if (selectors.some((sel) => el.matches?.(sel))) {
+        return el; // 找到即返回
+      }
+    }
+  }
+
+  return null; // 未找到返回null
+};
+// 自定义链接的点击
+const handleResourceClick = (event: MouseEvent) => {
+  event.preventDefault();
+  // 查找符合条件的目标元素
+  const targetResource = findTargetElement(event, ['a[part=md_a]']);
+  if (targetResource) {
+    // 获取链接地址并触发回调
+    const href = targetResource.getAttribute('href');
+    if (href) {
+      console.log('跳转链接href', href);
+    }
+  }
+};
+
+// 模拟打字效果
+const typeEffect = () => {
+  if (!isTyping.value) return;
+
+  if (currentIndex.value < doc.length) {
+    const char = doc[currentIndex.value];
+    currentIndex.value += 1;
+    displayText.value += char;
+    timerRef.value = setTimeout(typeEffect, 10);
+  } else {
+    // 输入完成时自动停止
+    isTyping.value = false;
+  }
+};
+
+onMounted(() => {
+  // 注册全局点击事件监听
+  document.addEventListener('click', handleResourceClick);
+
+  // 处理打字效果
+  if (isTyping.value) {
+    // 如果已经完成输入，点击开始则重置
+    if (currentIndex.value >= doc.length) {
+      currentIndex.value = 0;
+      displayText.value = '';
+    }
+    startTimeRef.value = Date.now();
+    timerRef.value = setTimeout(typeEffect, 500);
+  }
+});
+
+onUnmounted(() => {
+  // 清理函数
+  document.removeEventListener('click', handleResourceClick);
+  if (timerRef.value) clearTimeout(timerRef.value);
+});
+</script>
+
+<style scoped></style>
diff --git a/packages/pro-components/chat/chat-markdown/_example/footnote.vue b/packages/pro-components/chat/chat-markdown/_example/footnote.vue
new file mode 100644
index 0000000000..7af799f07c
--- /dev/null
+++ b/packages/pro-components/chat/chat-markdown/_example/footnote.vue
@@ -0,0 +1,197 @@
+<template>
+  <t-chat-markdown class="hover-markdown" :content="markdownContent" :options="options" />
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+// MarkdownEngine是内置的cherry
+import { MarkdownEngine } from '@tdesign-vue-next/chat';
+
+const hoverStyles = `
+<style>
+  ::part(hover-ref) {
+    color: rgba(0,0,0,0.6);
+    font-size: 12px;
+    background: rgba(0, 0, 0, .05);
+    cursor: pointer;
+    text-decoration: none;
+    padding: 2px 6px;
+    border-radius: 22px;
+    position: relative;
+    text-align: center;
+    margin: 0 2px;
+  }
+  
+  ::part(hover-ref):hover {
+    background: rgba(0, 0, 0, .1);
+  }
+  
+  .hover-tooltip {
+    position: fixed;
+    background: #2c3e50;
+    color: white;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: 3px solid #34495e;
+    font-size: 13px;
+    z-index: 10000;
+    max-width: 300px;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
+    white-space: normal;
+    pointer-events: auto;
+    line-height: 1.4;
+    display: none;
+  }
+  
+  .hover-tooltip .hover-title {
+    font-weight: bold;
+    margin-bottom: 6px;
+    display: block;
+    font-size: 14px;
+    color: #ecf0f1;
+    cursor: pointer;
+    text-decoration: none;
+  }
+  
+  .hover-tooltip .hover-title:hover {
+    color: #3498db;
+    text-decoration: underline;
+  }
+  
+  .hover-tooltip .hover-summary {
+    color: #bdc3c7;
+    font-size: 12px;
+    line-height: 1.3;
+  }
+</style>
+`;
+
+/**
+ * 自定义悬停提示语法插件
+ * 语法格式：[ref:1|标题|摘要|链接]
+ */
+const hoverRefHook = MarkdownEngine.createSyntaxHook('hoverRef', MarkdownEngine.constants.HOOKS_TYPE_LIST.SEN, {
+  makeHtml(str) {
+    return str.replace(this.RULE.reg, (_whole, id, title, summary, link) => {
+      const tooltipId = `tooltip-${id}-${Math.random().toString(36).substr(2, 9)}`;
+      return `<span class="hover-ref" part="hover-ref" data-tooltip-id="${tooltipId}" data-title="${title}" data-summary="${summary}" data-link="${link}" onmouseenter="this.dispatchEvent(new CustomEvent('hover-enter', { bubbles: true, composed: true, detail: { id: '${tooltipId}', title: '${title}', summary: '${summary}', link: '${link}', target: this }}))" onmouseleave="this.dispatchEvent(new CustomEvent('hover-leave', { bubbles: true, composed: true, detail: { id: '${tooltipId}' }}))">${id}</span>`;
+    });
+  },
+  rule() {
+    // 匹配 [ref:1|标题|摘要|链接] 语法
+    return { reg: /\[ref:([^|\]]+)\|([^|\]]+)\|([^|\]]+)\|([^\]]+)\]/g };
+  },
+});
+
+const tooltipTimeouts = new Map();
+
+const handleHoverEnter = (e) => {
+  const { id, title, summary, link, target } = e.detail;
+
+  // 清除该 tooltip 的隐藏定时器
+  if (tooltipTimeouts.has(id)) {
+    clearTimeout(tooltipTimeouts.get(id));
+    tooltipTimeouts.delete(id);
+  }
+
+  // 移除其他所有浮层（确保同时只显示一个）
+  document.querySelectorAll('.hover-tooltip').forEach((tooltip) => {
+    if (tooltip.id !== id) {
+      tooltip.remove();
+    }
+  });
+
+  // 移除已存在的同 ID 浮层
+  const existingTooltip = document.getElementById(id);
+  if (existingTooltip) {
+    existingTooltip.remove();
+  }
+
+  // 创建新的浮层
+  const tooltip = document.createElement('div');
+  tooltip.id = id;
+  tooltip.className = 'hover-tooltip';
+
+  // 创建可点击的标题
+  const titleElement = link
+    ? `<a href="${link}" target="_blank" class="hover-title">${title}</a>`
+    : `<div class="hover-title">${title}</div>`;
+
+  tooltip.innerHTML = `
+    ${titleElement}
+    <div class="hover-summary">${summary}</div>
+  `;
+
+  document.body.appendChild(tooltip);
+
+  // 定位浮层
+  const rect = target.getBoundingClientRect();
+  tooltip.style.display = 'block';
+  tooltip.style.left = `${rect.left}px`;
+  tooltip.style.top = `${rect.bottom + 5}px`;
+
+  // 添加 tooltip 的鼠标事件
+  tooltip.addEventListener('mouseenter', () => {
+    if (tooltipTimeouts.has(id)) {
+      clearTimeout(tooltipTimeouts.get(id));
+      tooltipTimeouts.delete(id);
+    }
+  });
+
+  tooltip.addEventListener('mouseleave', () => {
+    const timeout = setTimeout(() => {
+      tooltip.remove();
+      tooltipTimeouts.delete(id);
+    }, 100);
+    tooltipTimeouts.set(id, timeout);
+  });
+};
+
+const handleHoverLeave = (e) => {
+  const { id } = e.detail;
+
+  // 延迟隐藏，给用户时间移动到 tooltip 上
+  const timeout = setTimeout(() => {
+    const tooltip = document.getElementById(id);
+    if (tooltip) {
+      tooltip.remove();
+    }
+    tooltipTimeouts.delete(id);
+  }, 100);
+
+  tooltipTimeouts.set(id, timeout);
+};
+
+const markdownContent = `人工智能的发展经历了不同的阶段和研究方法，包括​​符号处理、神经网络、机器学习、深度学习等[ref:1|人工智能的发展历程|探讨AI从诞生到现在的重要里程碑和技术突破|https://tdesign.tencent.com][ref:2|机器学习算法详解|深入分析各种机器学习算法的原理和应用场景|https://tdesign.tencent.com]。`;
+
+const options = {
+  engine: {
+    global: {
+      htmlAttrWhiteList: 'part|class|data-tooltip-id|data-title|data-summary|data-link|onmouseenter|onmouseleave',
+    },
+    customSyntax: {
+      hoverRefHook: {
+        syntaxClass: hoverRefHook,
+        force: true,
+        before: 'link',
+      },
+    },
+  },
+};
+
+onMounted(() => {
+  // 添加样式
+  document.head.insertAdjacentHTML('beforeend', hoverStyles);
+
+  // 添加事件监听器
+  document.addEventListener('hover-enter', handleHoverEnter);
+  document.addEventListener('hover-leave', handleHoverLeave);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('hover-enter', handleHoverEnter);
+  document.removeEventListener('hover-leave', handleHoverLeave);
+});
+</script>
+
+<style scoped></style>
diff --git a/packages/pro-components/chat/chat-markdown/_example/plugin.vue b/packages/pro-components/chat/chat-markdown/_example/plugin.vue
new file mode 100644
index 0000000000..e7fb5ec088
--- /dev/null
+++ b/packages/pro-components/chat/chat-markdown/_example/plugin.vue
@@ -0,0 +1,57 @@
+<template>
+  <t-space direction="vertical">
+    <t-space>
+      <strong>动态加载插件：</strong>
+      <t-space align="center">
+        <span>公式</span>
+        <t-switch v-model="hasKatex" size="large" @change="handleKatexChange" />
+      </t-space>
+    </t-space>
+    <!-- 通过key强制重新挂载组件 -->
+    <t-chat-markdown :key="rerenderKey" :content="mdContent" :options="options" />
+  </t-space>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js';
+
+const mdContent = `
+---
+
+## 块级公式
+
+$$
+E=mc^2
+$$
+
+## 行内公式
+这是一个行内公式 $\\sqrt{3x-1}+(1+x)^2$
+`;
+
+const hasKatex = ref(false);
+const rerenderKey = ref(1);
+
+// 切换公式插件
+const handleKatexChange = (checked) => {
+  hasKatex.value = checked;
+  rerenderKey.value += 1;
+};
+
+const options = computed(() => ({
+  engine: {
+    syntax: hasKatex.value
+      ? {
+          mathBlock: {
+            engine: 'katex',
+          },
+          inlineMath: {
+            engine: 'katex',
+          },
+        }
+      : undefined,
+  },
+}));
+</script>
+
+<style scoped></style>
diff --git a/packages/pro-components/chat/chat-markdown/_example/theme.vue b/packages/pro-components/chat/chat-markdown/_example/theme.vue
new file mode 100644
index 0000000000..6eeade673a
--- /dev/null
+++ b/packages/pro-components/chat/chat-markdown/_example/theme.vue
@@ -0,0 +1,61 @@
+<template>
+  <t-space direction="vertical">
+    <t-space>
+      <t-space align="center">
+        <span>代码块主题切换：</span>
+        <t-switch v-model="isDarkTheme" size="large" @change="handleCodeThemeChange" />
+      </t-space>
+    </t-space>
+    <!-- 通过key强制重新挂载组件 -->
+    <t-chat-markdown :key="rerenderKey" :content="mdContent" :options="options" />
+  </t-space>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js';
+
+const mdContent = `
+---
+
+## 代码块主题设置演示
+
+\`\`\`javascript
+function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+console.log(fibonacci(10)); // 输出: 55
+\`\`\`
+
+\`\`\`python
+def quick_sort(arr):
+    if len(arr) <= 1:
+        return arr
+    pivot = arr[len(arr) // 2]
+    left = [x for x in arr if x < pivot]
+    middle = [x for x in arr if x == pivot]
+    right = [x for x in arr if x > pivot]
+    return quick_sort(left) + middle + quick_sort(right)
+\`\`\`
+`;
+
+const isDarkTheme = ref(false);
+const rerenderKey = ref(1);
+
+// 切换代码块主题
+const handleCodeThemeChange = (checked) => {
+  isDarkTheme.value = checked;
+  rerenderKey.value += 1;
+};
+
+const options = computed(() => ({
+  themeSettings: {
+    // 代码块主题设置, 默认是'light'
+    codeBlockTheme: isDarkTheme.value ? 'dark' : 'light',
+  },
+}));
+</script>
+
+<style scoped></style>
diff --git a/packages/pro-components/chat/chat-markdown/chat-markdown.md b/packages/pro-components/chat/chat-markdown/chat-markdown.md
new file mode 100644
index 0000000000..5a12d0ce15
--- /dev/null
+++ b/packages/pro-components/chat/chat-markdown/chat-markdown.md
@@ -0,0 +1,9 @@
+:: BASE_DOC ::
+
+## API
+### ChatMarkdown Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | String | - | 需要渲染的 Markdown 内容 | N
+options | Object | - | Markdown 解析器基础配置。TS类型：`TdChatContentMDOptions` | N
\ No newline at end of file
diff --git a/packages/pro-components/chat/chat-markdown/index.ts b/packages/pro-components/chat/chat-markdown/index.ts
new file mode 100644
index 0000000000..7ddb7f03d0
--- /dev/null
+++ b/packages/pro-components/chat/chat-markdown/index.ts
@@ -0,0 +1,10 @@
+import 'tdesign-web-components/lib/chat-message/content/markdown-content';
+import type { DefineComponent } from 'vue';
+import { omiVueify } from 'omi-vueify';
+import type { TdChatMarkdownContentProps } from 'tdesign-web-components/lib/chat-message/content/markdown-content';
+
+// Markdown内容
+export const ChatMarkdown = omiVueify('t-chat-md-content', {
+  methodNames: [],
+}) as DefineComponent<TdChatMarkdownContentProps>;
+export default ChatMarkdown;
diff --git a/packages/pro-components/chat/chat-message/_example/action.vue b/packages/pro-components/chat/chat-message/_example/action.vue
new file mode 100644
index 0000000000..dcc48e5e17
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/_example/action.vue
@@ -0,0 +1,34 @@
+<template>
+  <t-space direction="vertical" style="width: 100%">
+    <t-chat-message
+      variant="text"
+      avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+      name="TDesignAI"
+      :role="message.role"
+      :content="message.content"
+    >
+      <!-- 植入插槽用来追加消息底部操作栏 -->
+      <template #actionbar>
+        <t-chat-actionbar
+          :comment="comment"
+          :content="message.content[0].data"
+          :action-bar="['good', 'bad', 'replay', 'copy']"
+          @actions="handleActions"
+        />
+      </template>
+    </t-chat-message>
+  </t-space>
+</template>
+
+<script setup>
+const message = {
+  id: '123123',
+  role: 'assistant',
+  content: [
+    {
+      type: 'text',
+      data: '牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。',
+    },
+  ],
+};
+</script>
diff --git a/packages/pro-components/chat/chat-message/_example/chat-message-base.vue b/packages/pro-components/chat/chat-message/_example/chat-message-base.vue
new file mode 100644
index 0000000000..308786bd13
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/_example/chat-message-base.vue
@@ -0,0 +1,19 @@
+<script setup>
+const message = {
+  role: 'user',
+  content: [
+    {
+      type: 'text',
+      data: '牛顿第一定律是否适用于所有参考系？',
+    },
+  ],
+};
+</script>
+
+<template>
+  <t-space direction="vertical" style="width: 100%">
+    <t-chat-message :content="message.content" :role="message.role" />
+    <t-chat-message variant="base" :content="message.content" :role="message.role" />
+    <t-chat-message variant="outline" :content="message.content" :role="message.role" />
+  </t-space>
+</template>
diff --git a/packages/pro-components/chat/chat-message/_example/configure.vue b/packages/pro-components/chat/chat-message/_example/configure.vue
new file mode 100644
index 0000000000..7d936f7d45
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/_example/configure.vue
@@ -0,0 +1,70 @@
+<script setup>
+const messages = {
+  ai: {
+    id: '11111',
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        data: '牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。',
+      },
+    ],
+  },
+  user: {
+    id: '22222',
+    role: 'user',
+    content: [
+      {
+        type: 'text',
+        data: '牛顿第一定律是否适用于所有参考系？',
+      },
+    ],
+  },
+  system: {
+    id: '33333',
+    role: 'system',
+    content: [
+      {
+        type: 'text',
+        data: '模型由 hunyuan 变为 GPT4',
+      },
+    ],
+  },
+  error: {
+    id: '4444',
+    role: 'assistant',
+    status: 'error',
+    content: [
+      {
+        type: 'text',
+        data: '数据解析失败',
+      },
+    ],
+  },
+};
+</script>
+
+<template>
+  <t-space direction="vertical" style="width: 100%">
+    <t-divider>可配置角色，头像，昵称，时间</t-divider>
+    <t-chat-message
+      avatar="https://tdesign.gtimg.com/site/avatar.jpg"
+      datetime="今天16:38"
+      name="张三"
+      role="user"
+      :content="messages.user.content"
+    />
+    <t-chat-message
+      avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+      datetime="今天16:43"
+      name="TDesignAI"
+      role="assistant"
+      :content="messages.ai.content"
+    />
+    <t-divider>可配置位置</t-divider>
+    <t-chat-message placement="right" variant="base" role="user" :content="messages.user.content" />
+    <t-chat-message placement="left" role="assistant" :content="messages.ai.content" />
+    <t-divider>角色为system的系统消息</t-divider>
+    <t-chat-message :content="messages.system.content" role="system" />
+  </t-space>
+</template>
diff --git a/packages/pro-components/chat/chat-message/_example/content.vue b/packages/pro-components/chat/chat-message/_example/content.vue
new file mode 100644
index 0000000000..d470a25705
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/_example/content.vue
@@ -0,0 +1,133 @@
+<script setup>
+const userMessage1 = {
+  id: '11111',
+  role: 'user',
+  status: 'complete',
+  content: [
+    {
+      type: 'text',
+      data: '分析以下内容，总结一篇广告策划方案',
+    },
+    {
+      type: 'attachment',
+      data: [
+        {
+          fileType: 'doc',
+          name: 'demo.docx',
+          url: 'https://tdesign.gtimg.com/site/demo.docx',
+          size: 12312,
+        },
+        {
+          fileType: 'pdf',
+          name: 'demo2.pdf',
+          url: 'https://tdesign.gtimg.com/site/demo.pdf',
+          size: 34333,
+        },
+      ],
+    },
+  ],
+};
+
+const userMessage2 = {
+  id: '22222',
+  role: 'user',
+  status: 'complete',
+  content: [
+    {
+      type: 'text',
+      data: '这个图里的帅哥是谁？',
+    },
+    {
+      type: 'attachment',
+      data: [
+        {
+          fileType: 'image',
+          name: 'avatar.jpg',
+          size: 234234,
+          url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+        },
+      ],
+    },
+  ],
+};
+
+const aiMessages = {
+  id: '33333',
+  role: 'assistant',
+  status: 'complete',
+  content: [
+    {
+      type: 'thinking',
+      status: 'complete',
+      data: {
+        title: '已完成思考（耗时3秒）',
+        text: '好的，我现在需要回答用户关于对比近3年当代偶像爱情剧并总结创作经验的问题\n查询网络信息中...\n根据网络搜索结果，成功案例包括《春色寄情人》《要久久爱》《你也有今天》等，但缺乏具体播放数据，需要结合行业报告总结共同特征。2022-2024年偶像爱情剧的创作经验主要集中在题材创新、现实元素融入、快节奏叙事等方面。结合行业报告和成功案例，总结出以下创作经验。',
+      },
+    },
+    {
+      type: 'search',
+      data: {
+        title: '搜索到2篇相关内容',
+        references: [
+          {
+            title: '《传媒内参2024剧集市场分析报告》',
+            url: '',
+          },
+          {
+            title: '2024年国产剧市场分析:优质内容的消失与未来展望_观众_剧集_平台',
+            url: '',
+          },
+        ],
+      },
+    },
+    {
+      type: 'markdown',
+      data: '**数据支撑：** 据《传媒内参2024报告》，2024年偶像爱情剧完播率`提升12%`，其中“职业创新”类`占比达65%`，豆瓣评分7+作品数量同比`增加40%`。',
+    },
+    {
+      type: 'suggestion',
+      data: [
+        {
+          title: '近3年偶像爱情剧的市场反馈如何',
+          prompt: '近3年偶像爱情剧的市场反馈如何',
+        },
+        {
+          title: '偶像爱情剧的观众群体分析',
+          prompt: '偶像爱情剧的观众群体分析',
+        },
+      ],
+    },
+  ],
+};
+
+const onActions = {
+  suggestion: (content) => {
+    console.log('suggestionItem', content);
+  },
+  searchItem: (content, event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    console.log('searchItem', content);
+  },
+};
+</script>
+
+<template>
+  <t-space direction="vertical" style="width: 100%">
+    <t-divider>文件附件</t-divider>
+    <t-chat-message variant="base" :content="userMessage1.content" :role="userMessage1.role" />
+    <t-divider>思考过程，资料来源与搜索联想</t-divider>
+    <t-chat-message
+      :content="aiMessages.content"
+      :role="aiMessages.role"
+      animation="gradient"
+      :chat-content-props="{
+        thinking: { maxHeight: 100, collapsed: true },
+        search: { expandable: true },
+      }"
+      :handle-actions="onActions"
+    />
+    <t-divider>图片附件</t-divider>
+    <t-chat-message variant="base" :content="userMessage2.content" :role="userMessage2.role" />
+  </t-space>
+</template>
diff --git a/packages/pro-components/chat/chat-message/_example/custom.vue b/packages/pro-components/chat/chat-message/_example/custom.vue
new file mode 100644
index 0000000000..6a76d01f99
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/_example/custom.vue
@@ -0,0 +1,80 @@
+<template>
+  <t-space direction="vertical" style="width: 100%">
+    <t-chat-message
+      variant="text"
+      avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+      name="TDesignAI"
+      role="assistant"
+    >
+      <template #content>
+        <template v-for="(contentItem, contentIndex) in message.content" :key="contentItem.data.id || contentIndex">
+          <t-chat-content v-if="contentItem.type === 'text'" :content="contentItem.data" />
+          <TvisionTcharts
+            v-else-if="contentItem.type === 'chart'"
+            class="chart"
+            :chart-type="contentItem.data.chartType"
+            :options="contentItem.data.options"
+          />
+        </template>
+      </template>
+    </t-chat-message>
+  </t-space>
+</template>
+
+<script setup lang="js">
+import TvisionTcharts from 'tvision-charts-vue-next';
+import { ref } from 'vue';
+
+const message = ref({
+  id: '123123',
+  role: 'assistant',
+  content: [
+    {
+      type: 'text',
+      data: '昨日上午北京道路车辆通行状况，9:00的峰值（1330）可能显示早高峰拥堵最严重时段，10:00后缓慢回落，可以得出如下折线图：',
+    },
+    {
+      type: 'chart',
+      data: {
+        id: '13123',
+        chartType: 'line',
+        options: {
+          xAxis: {
+            type: 'category',
+            data: [
+              '0:00',
+              '1:00',
+              '2:00',
+              '3:00',
+              '4:00',
+              '5:00',
+              '6:00',
+              '7:00',
+              '8:00',
+              '9:00',
+              '10:00',
+              '11:00',
+              '12:00',
+            ],
+          },
+          yAxis: {
+            axisLabel: { inside: false },
+          },
+          series: [
+            {
+              data: [820, 932, 901, 934, 600, 500, 700, 900, 1330, 1320, 1200, 1300, 1100],
+              type: 'line',
+            },
+          ],
+        },
+      },
+    },
+  ],
+});
+</script>
+<style scoped>
+.chart {
+  width: 600px;
+  height: 500px;
+}
+</style>
diff --git a/packages/pro-components/chat/chat-message/_example/status.vue b/packages/pro-components/chat/chat-message/_example/status.vue
new file mode 100644
index 0000000000..0aac9aec31
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/_example/status.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue';
+
+const messages = {
+  loading: {
+    id: '11111',
+    role: 'assistant',
+    status: 'pending',
+  },
+  error: {
+    id: '22222',
+    role: 'assistant',
+    status: 'error',
+    content: [
+      {
+        type: 'text',
+        data: '出错了',
+      },
+    ],
+  },
+};
+
+const animation = ref('skeleton');
+const animationOptions = [
+  { label: 'skeleton', value: 'skeleton' },
+  { label: 'moving', value: 'moving' },
+  { label: 'gradient', value: 'gradient' },
+  { label: 'dot', value: 'dot' },
+];
+</script>
+
+<template>
+  <t-space direction="vertical" style="width: 100%">
+    <t-divider>消息加载状态</t-divider>
+    <t-chat-message
+      v-for="opt in animationOptions"
+      :key="opt.value"
+      avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+      datetime="今天16:38"
+      :animation="opt.value"
+      name="TDesignAI"
+      role="assistant"
+      :status="messages.loading.status"
+    />
+    <t-divider>出错状态下的消息</t-divider>
+    <t-chat-message
+      avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+      role="assistant"
+      :content="messages.error.content"
+      :status="messages.error.status"
+    />
+  </t-space>
+</template>
+<style lang="less">
+.t-divider {
+  color: var(--td-text-color-placeholder);
+}
+</style>
diff --git a/packages/pro-components/chat/chat-message/_usage/index.vue b/packages/pro-components/chat/chat-message/_usage/index.vue
new file mode 100644
index 0000000000..f11806149d
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/_usage/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
+    <template #chat="{ configProps }">
+      <div style="width: 560px">
+        <t-chat-message
+          avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+          datetime="今天16:38"
+          name="TDesignAI"
+          role="user"
+          :content="[
+            {
+              type: 'text',
+              data: '牛顿第一定律是否适用于所有参考系？',
+            },
+          ]"
+          v-bind="configProps"
+        />
+        <t-chat-message
+          avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+          datetime="今天16:38"
+          name="TDesignAI"
+          role="assistant"
+          status="pending"
+          v-bind="configProps"
+        />
+      </div>
+    </template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+import configJson from './props.json';
+const configList = ref(configJson);
+// labe:组件名  value:chat （不用chat渲染不出来todo）
+const panelList = [{ label: 'ChatMessage', value: 'chat' }];
+const usageCodeMap = {
+  chat: ` 
+  <div style="width: 560px">
+  <t-chat-message
+        avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+        datetime="今天16:38"
+        name="TDesignAI"
+        role="user"
+          :content="[
+            {
+              type: 'text',
+              data: '牛顿第一定律是否适用于所有参考系？',
+            },
+          ]"
+        v-bind="configProps"
+      />
+      <t-chat-message
+        avatar="https://tdesign.gtimg.com/site/chat-avatar.png"
+        datetime="今天16:38"
+        name="TDesignAI"
+        role="assistant"
+        status="pending"
+        v-bind="configProps"
+      />
+       </div>
+      `,
+};
+
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>
diff --git a/packages/pro-components/chat/chat-message/_usage/props.json b/packages/pro-components/chat/chat-message/_usage/props.json
new file mode 100644
index 0000000000..63ac82180f
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/_usage/props.json
@@ -0,0 +1,63 @@
+[
+  {
+    "name": "variant",
+    "type": "enum",
+    "defaultValue": "base",
+    "options": [
+      {
+        "label": "base",
+        "value": "base"
+      },
+      {
+        "label": "outline",
+        "value": "outline"
+      },
+      {
+        "label": "text",
+        "value": "text"
+      }
+    ]
+  },
+  {
+    "name": "animation",
+    "type": "enum",
+    "defaultValue": "skeleton",
+    "options": [
+      {
+        "label": "skeleton",
+        "value": "skeleton"
+      },
+      {
+        "label": "moving",
+        "value": "moving"
+      },
+      {
+        "label": "gradient",
+        "value": "gradient"
+      },
+      {
+        "label": "dots",
+        "value": "dots"
+      },
+      {
+        "label": "circle",
+        "value": "circle"
+      }
+    ]
+  },
+  {
+    "name": "placement",
+    "type": "enum",
+    "defaultValue": "left",
+    "options": [
+      {
+        "label": "left",
+        "value": "left"
+      },
+      {
+        "label": "right",
+        "value": "right"
+      }
+    ]
+  }
+]
diff --git a/packages/pro-components/chat/chat-message/chat-message-props.ts b/packages/pro-components/chat/chat-message/chat-message-props.ts
new file mode 100644
index 0000000000..9cf0b14207
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/chat-message-props.ts
@@ -0,0 +1,56 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+import { TdChatItemProps } from '../type';
+import type { TdChatMessageProps } from 'tdesign-web-components';
+import { PropType } from 'vue';
+import type { TNode } from 'tdesign-vue-next';
+
+export default {
+  /** 动画效果 */
+  animation: {
+    type: String as PropType<TdChatMessageProps['animation']>,
+    default: 'circle' as TdChatMessageProps['animation'],
+    validator(val: TdChatMessageProps['animation']): boolean {
+      if (!val) return true;
+      return ['skeleton', 'moving', 'gradient', 'circle'].includes(val);
+    },
+  },
+  /** 自定义的头像配置 */
+  avatar: {
+    type: [String, Object, Function] as PropType<TdChatMessageProps['avatar']>,
+  },
+  /** 对话单元的时间配置 */
+  datetime: {
+    type: [String, Function] as PropType<TdChatMessageProps['datetime']>,
+  },
+  /** 自定义的昵称 */
+  name: {
+    type: [String, Function] as PropType<TdChatMessageProps['name']>,
+  },
+  /** 气泡框样式，支持基础、线框、文字三种类型 */
+  variant: {
+    type: String as PropType<TdChatMessageProps['variant']>,
+    default: 'text' as TdChatMessageProps['variant'],
+    validator(val: TdChatMessageProps['variant']): boolean {
+      if (!val) return true;
+      return ['base', 'outline', 'text'].includes(val);
+    },
+  },
+  message: {
+    type: Object as PropType<TdChatMessageProps['message']>,
+  },
+  placement: {
+    type: String as PropType<TdChatMessageProps['placement']>,
+    default: 'left' as TdChatMessageProps['placement'],
+  },
+  chatContentProps: {
+    type: Object as PropType<TdChatMessageProps['chatContentProps']>,
+  },
+  allowContentSegmentCustom: {
+    type: Boolean,
+    default: false,
+  },
+};
diff --git a/packages/pro-components/chat/chat-message/chat-message.md b/packages/pro-components/chat/chat-message/chat-message.md
new file mode 100644
index 0000000000..5ff07023d7
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/chat-message.md
@@ -0,0 +1,55 @@
+:: BASE_DOC ::
+
+## API
+### ChatMessage Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+name | String / Slot / Function | - | 发送者名称 | N
+avatar | String / Slot / Function | - | 发送者头像 | N
+datetime | String / Slot / Function | - | 消息发送时间 | N
+content | Array | - | 消息内容对象。类型定义见 `Message` | Y
+role | String | assistant | 消息角色。可选项：user/assistant/system | N
+status | String | - | 消息状态。可选项：pending/streaming/complete/stop/error | N
+placement | String | left | 消息位置。可选项：left/right | N
+variant | String | text | 消息变体样式。可选项：base/outline/text | N
+chatContentProps | Object | - | 消息内容属性配置。类型支持见 `chatContentProps` | N
+animation | String | circle | 加载动画类型。可选项：skeleton/moving/gradient/circle | N
+allowContentSegmentCustom | Boolean | false | 是否允许自定义局部消息内容，其他消息内容实用默认样式 | N
+
+
+#### UserMessageContent 内容类型支持
+- 文本消息 (`TextContent`)
+- 附件消息 (`AttachmentContent`)
+
+#### AIMessageContent 内容类型支持
+- 文本消息 (`TextContent`)
+- Markdown 消息 (`MarkdownContent`)
+- 搜索消息 (`SearchContent`)
+- 建议消息 (`SuggestionContent`)
+- 思考状态 (`ThinkingContent`)
+- 图片消息 (`ImageContent`)
+- 附件消息 (`AttachmentContent`)
+- 自定义消息 (`AIContentTypeOverrides`)
+
+几种类型都继承自`ChatBaseContent`，包含通用字段：
+字段 | 类型 | 必传 | 默认值 | 说明
+--|--|--|--|--
+type | `ChatContentType` | Y | - | 内容类型标识（text/markdown/search等）
+data | 泛型TData | Y | - | 具体内容数据，类型由type决定
+status | `ChatMessageStatus \| ((currentStatus?: ChatMessageStatus) => ChatMessageStatus)` | N | - | 内容状态或状态计算函数
+id | string | N | - | 内容块唯一标识
+
+每种类型的data字段有不同的结构，具体可参考下方表格，[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/chatbot/core/type.ts#L17)
+
+
+### 插槽
+
+| 插槽名 | 说明 |
+|--------|------|
+| content | 自定义消息内容 |
+| avatar | 自定义头像 |
+| name | 自定义名称 |
+| datetime | 自定义时间 |
+| actionbar | 自定义操作栏 |
+
diff --git a/packages/pro-components/chat/chat-message/chat-message.tsx b/packages/pro-components/chat/chat-message/chat-message.tsx
new file mode 100644
index 0000000000..18a6cccd0e
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/chat-message.tsx
@@ -0,0 +1,67 @@
+import { defineComponent } from 'vue';
+import type { DefineComponent } from 'vue';
+import type { TdChatMessageProps } from 'tdesign-web-components';
+// 封装tdesign-web-components 的 chat-message
+import 'tdesign-web-components/lib/chat-message';
+import { omiVueify } from 'omi-vueify';
+import props from './chat-message-props';
+import { useTNodeJSX } from '@tdesign/shared-hooks';
+
+const BaseChatMessage = omiVueify('t-chat-item', {
+  methodNames: [],
+}) as DefineComponent<TdChatMessageProps>;
+export default defineComponent({
+  name: 'ChatMessage',
+  props,
+  setup(props, { slots }) {
+    return () => {
+      const renderTNodeJSX = useTNodeJSX();
+      const baseSlots = {
+        actionbar: () => {
+          const actionbar = renderTNodeJSX('actionbar', { slotFirst: true }) && slots.actionbar?.();
+          return actionbar ? <div>{actionbar}</div> : null;
+        },
+        name: () => {
+          const name = renderTNodeJSX('name', { slotFirst: true }) && slots.name?.();
+          return name ? <div>{name}</div> : null;
+        },
+        avatar: () => {
+          // renderTNodeJSX如果没有插槽，会返回属性值，所以需要判断插槽是否存在
+          const avatar = renderTNodeJSX('avatar', { slotFirst: true }) && slots.avatar?.();
+          return avatar ? <div>{avatar}</div> : null;
+        },
+        datetime: () => {
+          const datetime = renderTNodeJSX('datetime', { slotFirst: true }) && slots.datetime?.();
+          return datetime ? <div>{datetime}</div> : null;
+        },
+        header: () => {
+          const header = renderTNodeJSX('header', { slotFirst: true }) && slots.header?.();
+          return header ? <div>{header}</div> : null;
+        },
+      };
+      let vSlots = null;
+      if (props.allowContentSegmentCustom) {
+        vSlots = {
+          ...slots,
+          ...baseSlots,
+        };
+      } else {
+        vSlots = {
+          ...baseSlots,
+          content: () => {
+            const content = (renderTNodeJSX('content', { slotFirst: true }) && slots.content?.()) || slots.default?.();
+            return content ? <div>{content}</div> : null;
+          },
+        };
+      }
+      return (
+        <BaseChatMessage
+          {...(props as TdChatMessageProps)}
+          v-slots={{
+            ...vSlots,
+          }}
+        />
+      );
+    };
+  },
+}) as any;
diff --git a/packages/pro-components/chat/chat-message/index.ts b/packages/pro-components/chat/chat-message/index.ts
new file mode 100644
index 0000000000..6b557a9524
--- /dev/null
+++ b/packages/pro-components/chat/chat-message/index.ts
@@ -0,0 +1,2 @@
+import _ChatMessage from './chat-message';
+export default _ChatMessage;
diff --git a/packages/pro-components/chat/chat-reasoning/__tests__/__snapshots__/index.test.jsx.snap b/packages/pro-components/chat/chat-reasoning/__tests__/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..8c83d13500
--- /dev/null
+++ b/packages/pro-components/chat/chat-reasoning/__tests__/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,469 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ChatReasoning > :props > :collapsed - boolean 1`] = `
+<div
+  class="t-chat__detail-reasoning"
+>
+  <div
+    class="t-collapse t--border-less"
+  >
+    
+    <div
+      class="t-collapse-panel"
+    >
+      <div
+        class="t-collapse-panel__wrapper"
+      >
+        <div
+          class="t-collapse-panel__header t-is-clickable"
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-collapse-panel__header--blank"
+          />
+          <!---->
+          <div
+            class="t-collapse-panel__icon t-collapse-panel__icon--right "
+          >
+            <svg
+              class="t-fake-arrow t-collapse-panel__icon--default"
+              fill="none"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                stroke="black"
+                stroke-opacity="0.9"
+                stroke-width="1.3"
+              />
+            </svg>
+          </div>
+        </div>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-slide-down"
+          persisted="false"
+        >
+          <div
+            class="t-collapse-panel__body"
+            style="display: none;"
+          >
+            <div
+              class="t-collapse-panel__content"
+            >
+              <!---->
+            </div>
+          </div>
+        </transition-stub>
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
+
+exports[`ChatReasoning > :props > :collapsed 1`] = `
+<div
+  class="t-chat__detail-reasoning"
+>
+  <div
+    class="t-collapse t--border-less"
+  >
+    
+    <div
+      class="t-collapse-panel"
+    >
+      <div
+        class="t-collapse-panel__wrapper"
+      >
+        <div
+          class="t-collapse-panel__header t-is-clickable"
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-collapse-panel__header--blank"
+          />
+          <!---->
+          <div
+            class="t-collapse-panel__icon t-collapse-panel__icon--right "
+          >
+            <svg
+              class="t-fake-arrow t-collapse-panel__icon--default"
+              fill="none"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                stroke="black"
+                stroke-opacity="0.9"
+                stroke-width="1.3"
+              />
+            </svg>
+          </div>
+        </div>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-slide-down"
+          persisted="false"
+        >
+          <div
+            class="t-collapse-panel__body"
+            style="display: none;"
+          >
+            <div
+              class="t-collapse-panel__content"
+            >
+              <!---->
+            </div>
+          </div>
+        </transition-stub>
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
+
+exports[`ChatReasoning > :props > :expandIconPlacement - string 1`] = `
+<div
+  class="t-chat__detail-reasoning"
+>
+  <div
+    class="t-collapse t--border-less"
+  >
+    
+    <div
+      class="t-collapse-panel"
+    >
+      <div
+        class="t-collapse-panel__wrapper"
+      >
+        <div
+          class="t-collapse-panel__header t-is-clickable"
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-collapse-panel__header--blank"
+          />
+          <!---->
+          <div
+            class="t-collapse-panel__icon t-collapse-panel__icon--right t-collapse-panel__icon--active"
+          >
+            <svg
+              class="t-fake-arrow t-collapse-panel__icon--default"
+              fill="none"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                stroke="black"
+                stroke-opacity="0.9"
+                stroke-width="1.3"
+              />
+            </svg>
+          </div>
+        </div>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-slide-down"
+          persisted="false"
+        >
+          <div
+            class="t-collapse-panel__body"
+          >
+            <div
+              class="t-collapse-panel__content"
+            >
+              <!---->
+            </div>
+          </div>
+        </transition-stub>
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
+
+exports[`ChatReasoning > :props > :expandIconPlacement 1`] = `
+<div
+  class="t-chat__detail-reasoning"
+>
+  <div
+    class="t-collapse t--border-less"
+  >
+    
+    <div
+      class="t-collapse-panel"
+    >
+      <div
+        class="t-collapse-panel__wrapper"
+      >
+        <div
+          class="t-collapse-panel__header t-is-clickable"
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-collapse-panel__header--blank"
+          />
+          <!---->
+          <div
+            class="t-collapse-panel__icon t-collapse-panel__icon--right t-collapse-panel__icon--active"
+          >
+            <svg
+              class="t-fake-arrow t-collapse-panel__icon--default"
+              fill="none"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                stroke="black"
+                stroke-opacity="0.9"
+                stroke-width="1.3"
+              />
+            </svg>
+          </div>
+        </div>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-slide-down"
+          persisted="false"
+        >
+          <div
+            class="t-collapse-panel__body"
+          >
+            <div
+              class="t-collapse-panel__content"
+            >
+              <!---->
+            </div>
+          </div>
+        </transition-stub>
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
+
+exports[`ChatReasoning > :props > :layout - string 1`] = `
+<div
+  class="t-chat__detail-reasoning"
+>
+  <div
+    class="t-collapse t--border-less t-chat__detail-reasoning-border"
+  >
+    
+    <div
+      class="t-collapse-panel"
+    >
+      <div
+        class="t-collapse-panel__wrapper"
+      >
+        <div
+          class="t-collapse-panel__header t-is-clickable"
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-collapse-panel__header--blank"
+          />
+          <!---->
+          <div
+            class="t-collapse-panel__icon t-collapse-panel__icon--right t-collapse-panel__icon--active"
+          >
+            <svg
+              class="t-fake-arrow t-collapse-panel__icon--default"
+              fill="none"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                stroke="black"
+                stroke-opacity="0.9"
+                stroke-width="1.3"
+              />
+            </svg>
+          </div>
+        </div>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-slide-down"
+          persisted="false"
+        >
+          <div
+            class="t-collapse-panel__body"
+          >
+            <div
+              class="t-collapse-panel__content"
+            >
+              <!---->
+            </div>
+          </div>
+        </transition-stub>
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
+
+exports[`ChatReasoning > :props > :layout 1`] = `
+<div
+  class="t-chat__detail-reasoning"
+>
+  <div
+    class="t-collapse t--border-less t-chat__detail-reasoning-border"
+  >
+    
+    <div
+      class="t-collapse-panel"
+    >
+      <div
+        class="t-collapse-panel__wrapper"
+      >
+        <div
+          class="t-collapse-panel__header t-is-clickable"
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-collapse-panel__header--blank"
+          />
+          <!---->
+          <div
+            class="t-collapse-panel__icon t-collapse-panel__icon--right t-collapse-panel__icon--active"
+          >
+            <svg
+              class="t-fake-arrow t-collapse-panel__icon--default"
+              fill="none"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                stroke="black"
+                stroke-opacity="0.9"
+                stroke-width="1.3"
+              />
+            </svg>
+          </div>
+        </div>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-slide-down"
+          persisted="false"
+        >
+          <div
+            class="t-collapse-panel__body"
+          >
+            <div
+              class="t-collapse-panel__content"
+            >
+              <!---->
+            </div>
+          </div>
+        </transition-stub>
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
+
+exports[`ChatReasoning > <slot> > default slot 1`] = `
+<div
+  class="t-chat__detail-reasoning"
+>
+  <div
+    class="t-collapse t--border-less"
+  >
+    
+    <div
+      class="t-collapse-panel"
+    >
+      <div
+        class="t-collapse-panel__wrapper"
+      >
+        <div
+          class="t-collapse-panel__header t-is-clickable"
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-collapse-panel__header--blank"
+          />
+          <!---->
+          <div
+            class="t-collapse-panel__icon t-collapse-panel__icon--right t-collapse-panel__icon--active"
+          >
+            <svg
+              class="t-fake-arrow t-collapse-panel__icon--default"
+              fill="none"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                stroke="black"
+                stroke-opacity="0.9"
+                stroke-width="1.3"
+              />
+            </svg>
+          </div>
+        </div>
+        <transition-stub
+          appear="false"
+          css="true"
+          name="t-slide-down"
+          persisted="false"
+        >
+          <div
+            class="t-collapse-panel__body"
+          >
+            <div
+              class="t-collapse-panel__content"
+            >
+              
+              <div>
+                custom content
+              </div>
+              
+            </div>
+          </div>
+        </transition-stub>
+      </div>
+    </div>
+    
+  </div>
+</div>
+`;
diff --git a/packages/pro-components/chat/chat-reasoning/__tests__/index.test.jsx b/packages/pro-components/chat/chat-reasoning/__tests__/index.test.jsx
new file mode 100644
index 0000000000..ea403d0e65
--- /dev/null
+++ b/packages/pro-components/chat/chat-reasoning/__tests__/index.test.jsx
@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import { vi } from 'vitest';
+import ChatReasoning from '@tdesign/pro-components-chat/chat-reasoning/index';
+
+describe('ChatReasoning', () => {
+  const provideMock = {
+    role: { value: 'user' },
+  };
+
+  describe(':props', () => {
+    it(':collapsed - boolean', () => {
+      const wrapper = mount(ChatReasoning, {
+        props: {
+          collapsed: true,
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it(':layout - string', () => {
+      const wrapper = mount(ChatReasoning, {
+        props: {
+          layout: 'border',
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.find('.t-chat__detail-reasoning-border').exists()).toBe(true);
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it(':expandIconPlacement - string', () => {
+      const wrapper = mount(ChatReasoning, {
+        props: {
+          expandIconPlacement: 'right',
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('@event', () => {
+    it('onExpandChange', async () => {
+      const fn = vi.fn();
+      const wrapper = mount(ChatReasoning, {
+        props: {
+          collapsed: false,
+          onExpandChange: fn,
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+
+      // Simulate clicking the expand icon
+      await wrapper.find('.t-collapse-panel__header').trigger('click');
+      expect(fn).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('<slot>', () => {
+    it('default slot', () => {
+      const wrapper = mount(ChatReasoning, {
+        slots: {
+          default: '<div>custom content</div>',
+        },
+        global: {
+          provide: provideMock,
+        },
+      });
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/pro-components/chat/chat-reasoning/_example/mock-data/sseRequest-reasoning.ts b/packages/pro-components/chat/chat-reasoning/_example/mock-data/sseRequest-reasoning.ts
new file mode 100644
index 0000000000..4e5ddc1daf
--- /dev/null
+++ b/packages/pro-components/chat/chat-reasoning/_example/mock-data/sseRequest-reasoning.ts
@@ -0,0 +1,101 @@
+export class MockSSEResponse {
+  private controller!: ReadableStreamDefaultController<Uint8Array>;
+  private encoder = new TextEncoder();
+  private stream: ReadableStream<Uint8Array>;
+  private error: boolean;
+  private currentPhase: 'reasoning' | 'content' = 'reasoning';
+
+  constructor(
+    private data: {
+      reasoning: string; // 推理内容
+      content: string; // 正式内容
+    },
+    private delay: number = 100,
+    error = false,
+  ) {
+    this.error = error;
+
+    this.stream = new ReadableStream({
+      start: (controller) => {
+        this.controller = controller;
+        if (!this.error) {
+          // 如果不是错误情况，则开始推送数据
+          setTimeout(() => this.pushData(), this.delay); // 延迟开始推送数据
+        }
+      },
+      cancel() {},
+    });
+  }
+
+  private pushData() {
+    try {
+      if (this.currentPhase === 'reasoning') {
+        // 推送推理内容
+        if (this.data.reasoning.length > 0) {
+          const chunk = JSON.stringify({
+            delta: {
+              reasoning_content: this.data.reasoning.slice(0, 1),
+              content: '',
+            },
+            finished: false,
+          });
+          this.controller.enqueue(this.encoder.encode(chunk));
+          this.data.reasoning = this.data.reasoning.slice(1);
+          // 设置下次推送
+          setTimeout(() => this.pushData(), this.delay);
+        } else {
+          // 推理内容推送完成，切换到正式内容
+          this.currentPhase = 'content';
+          setTimeout(() => this.pushData(), this.delay); // 立即开始推送正式内容
+          return;
+        }
+      }
+
+      if (this.currentPhase === 'content') {
+        // 推送正式内容
+        if (this.data.content.length > 0) {
+          const chunk = JSON.stringify({
+            delta: {
+              reasoning_content: '',
+              content: this.data.content.slice(0, 1),
+            },
+            finished: this.data.content.length === 1, // 最后一个字符时标记完成
+          });
+          this.controller.enqueue(this.encoder.encode(chunk));
+          this.data.content = this.data.content.slice(1);
+
+          // 设置下次推送
+          setTimeout(() => this.pushData(), this.delay);
+        } else {
+          // const finalPayload = JSON.stringify({
+          //   delta: {
+          //     reasoning_content: '',
+          //     content: '',
+          //   },
+          //   finished: true,
+          // });
+          // this.controller.enqueue(this.encoder.encode(`${finalPayload}`));
+          // 全部内容推送完成
+          setTimeout(() => this.controller.close(), this.delay);
+          return;
+        }
+      }
+    } catch {}
+  }
+
+  getResponse(): Promise<Response> {
+    return new Promise((resolve) => {
+      // 使用setTimeout来模拟网络延迟
+      setTimeout(() => {
+        if (this.error) {
+          const errorResponseOptions = { status: 500, statusText: 'Internal Server Error' };
+
+          // 返回模拟的网络错误响应，这里我们使用500状态码作为示例
+          resolve(new Response(null, errorResponseOptions));
+        } else {
+          resolve(new Response(this.stream));
+        }
+      }, this.delay); // 使用构造函数中设置的delay值作为延迟时间
+    });
+  }
+}
diff --git a/packages/pro-components/chat/chat-reasoning/_example/mock-data/sseRequest.ts b/packages/pro-components/chat/chat-reasoning/_example/mock-data/sseRequest.ts
new file mode 100644
index 0000000000..c144e1b067
--- /dev/null
+++ b/packages/pro-components/chat/chat-reasoning/_example/mock-data/sseRequest.ts
@@ -0,0 +1,61 @@
+export class MockSSEResponse {
+  private controller!: ReadableStreamDefaultController<Uint8Array>;
+  private encoder = new TextEncoder();
+  private stream: ReadableStream<Uint8Array>;
+  private error: boolean;
+
+  constructor(
+    private data: string,
+    private delay: number = 300,
+    error = false, // 新增参数，默认为false
+  ) {
+    this.error = error;
+
+    this.stream = new ReadableStream({
+      start: (controller) => {
+        this.controller = controller;
+        if (!this.error) {
+          // 如果不是错误情况，则开始推送数据
+          setTimeout(() => this.pushData(), this.delay); // 延迟开始推送数据
+        }
+      },
+      cancel() {},
+    });
+  }
+
+  private pushData() {
+    if (this.data.length === 0) {
+      this.controller.close();
+      return;
+    }
+    try {
+      const chunk = this.data.slice(0, 1);
+      this.data = this.data.slice(1);
+
+      this.controller.enqueue(this.encoder.encode(chunk));
+
+      if (this.data.length > 0) {
+        setTimeout(() => this.pushData(), this.delay);
+      } else {
+        // 数据全部发送完毕后关闭流
+        setTimeout(() => this.controller.close(), this.delay);
+      }
+    } catch {}
+  }
+
+  getResponse(): Promise<Response> {
+    return new Promise((resolve) => {
+      // 使用setTimeout来模拟网络延迟
+      setTimeout(() => {
+        if (this.error) {
+          const errorResponseOptions = { status: 500, statusText: 'Internal Server Error' };
+
+          // 返回模拟的网络错误响应，这里我们使用500状态码作为示例
+          resolve(new Response(null, errorResponseOptions));
+        } else {
+          resolve(new Response(this.stream));
+        }
+      }, this.delay); // 使用构造函数中设置的delay值作为延迟时间
+    });
+  }
+}
diff --git a/packages/pro-components/chat/_example/reasoning-custom-slot.vue b/packages/pro-components/chat/chat-reasoning/_example/reasoning-custom-slot.vue
similarity index 56%
rename from packages/pro-components/chat/_example/reasoning-custom-slot.vue
rename to packages/pro-components/chat/chat-reasoning/_example/reasoning-custom-slot.vue
index 8275bc85e0..5a7ecd4ca3 100644
--- a/packages/pro-components/chat/_example/reasoning-custom-slot.vue
+++ b/packages/pro-components/chat/chat-reasoning/_example/reasoning-custom-slot.vue
@@ -1,12 +1,10 @@
 <template>
-  <t-chat ref="chatRef" layout="both" style="height: 150px" :clear-history="false" :reverse="false">
-    <t-chat-reasoning v-model:collapsed="collapsed" expand-icon-placement="right" @expand-change="handleChange">
-      <template #header>
-        <t-chat-loading text="思考中..." />
-      </template>
-      <t-chat-content :content="reasoning" />
-    </t-chat-reasoning>
-  </t-chat>
+  <t-chat-reasoning v-model:collapsed="collapsed" expand-icon-placement="right" @expand-change="handleChange">
+    <template #header>
+      <t-chat-loading text="思考中..." />
+    </template>
+    <t-chat-content :content="reasoning" />
+  </t-chat-reasoning>
 </template>
 <script setup lang="jsx">
 import { ref } from 'vue';
@@ -16,9 +14,6 @@ setTimeout(() => {
   collapsed.value = true;
 }, 3000);
 
-// 流式数据加载中
-const chatRef = ref(null);
-
 const reasoning = `嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。
 `;
 const handleChange = (value) => {
diff --git a/packages/pro-components/chat/_example/reasoning-custom.vue b/packages/pro-components/chat/chat-reasoning/_example/reasoning-custom.vue
similarity index 100%
rename from packages/pro-components/chat/_example/reasoning-custom.vue
rename to packages/pro-components/chat/chat-reasoning/_example/reasoning-custom.vue
diff --git a/packages/pro-components/chat/_example/reasoning-drag.vue b/packages/pro-components/chat/chat-reasoning/_example/reasoning-drag.vue
similarity index 96%
rename from packages/pro-components/chat/_example/reasoning-drag.vue
rename to packages/pro-components/chat/chat-reasoning/_example/reasoning-drag.vue
index 9ae39dc5cb..d3b0461241 100644
--- a/packages/pro-components/chat/_example/reasoning-drag.vue
+++ b/packages/pro-components/chat/chat-reasoning/_example/reasoning-drag.vue
@@ -15,7 +15,6 @@
         layout="single"
         style="height: 600px"
         :clear-history="chatList.length > 0 && !isStreamLoad"
-        @on-action="operation"
         @clear="clearConfirm"
       >
         <template v-for="(item, index) in chatList" :key="index">
@@ -24,13 +23,14 @@
             :name="item.name"
             :role="item.role"
             :datetime="item.datetime"
-            :text-loading="index === 0 && loading"
+            :text-loading="index === chatList.length - 1 && loading"
             :content="item.content"
             :reasoning="{
               expandIconPlacement: 'right',
               onExpandChange: handleChange(value, { index }),
               collapsePanelProps: {
-                header: renderHeader(index === 0 && isStreamLoad && !item.content, item),
+                header: renderHeader(index === chatList.length - 1 && isStreamLoad && !item.content, item),
+
                 content: renderReasoningContent(item.reasoning),
               },
             }"
@@ -47,7 +47,7 @@
             @stop="onStop"
             @send="inputEnter"
           >
-            <template #prefix>
+            <template #footer-prefix>
               <div class="model-select">
                 <t-tooltip v-model:visible="allowToolTip" content="切换模型" trigger="hover">
                   <t-select
@@ -136,11 +136,14 @@ const renderHeader = (flag, item) => {
   );
 };
 const renderReasoningContent = (reasoningContent) => <t-chat-content content={reasoningContent} role="assistant" />;
-// 倒序渲染
+// 正序渲染
 const chatList = ref([
   {
-    content: `模型由<span>hunyuan</span>变为<span>GPT4</span>`,
-    role: 'model-change',
+    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+    name: '自己',
+    datetime: '今天16:38',
+    content: '牛顿第一定律是否适用于所有参考系？',
+    role: 'user',
     reasoning: '',
   },
   {
@@ -175,14 +178,12 @@ const chatList = ref([
     duration: 10,
   },
   {
-    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
-    name: '自己',
-    datetime: '今天16:38',
-    content: '牛顿第一定律是否适用于所有参考系？',
-    role: 'user',
+    content: `模型由<span>hunyuan</span>变为<span>GPT4</span>`,
+    role: 'system',
     reasoning: '',
   },
 ]);
+
 const clearConfirm = function () {
   chatList.value = [];
 };
@@ -205,7 +206,7 @@ const inputEnter = function () {
     content: inputValue.value,
     role: 'user',
   };
-  chatList.value.unshift(params);
+  chatList.value.push(params);
   // 空消息占位
   const params2 = {
     avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
@@ -215,7 +216,8 @@ const inputEnter = function () {
     reasoning: '',
     role: 'assistant',
   };
-  chatList.value.unshift(params2);
+  chatList.value.push(params2);
+
   handleData(inputValue.value);
   inputValue.value = '';
 };
@@ -248,7 +250,8 @@ const fetchSSE = async (fetchFn, options) => {
 const handleData = async () => {
   loading.value = true;
   isStreamLoad.value = true;
-  const lastItem = chatList.value[0];
+  const lastItem = chatList.value[chatList.value.length - 1];
+
   const mockedData = {
     reasoning: `嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。
 
diff --git a/packages/pro-components/chat/_example/reasoning-drawer.vue b/packages/pro-components/chat/chat-reasoning/_example/reasoning-drawer.vue
similarity index 96%
rename from packages/pro-components/chat/_example/reasoning-drawer.vue
rename to packages/pro-components/chat/chat-reasoning/_example/reasoning-drawer.vue
index 6a80fd92f1..1b33692771 100644
--- a/packages/pro-components/chat/_example/reasoning-drawer.vue
+++ b/packages/pro-components/chat/chat-reasoning/_example/reasoning-drawer.vue
@@ -7,23 +7,19 @@
       <t-avatar size="32px" shape="circle" image="https://tdesign.gtimg.com/site/chat-avatar.png"></t-avatar>
       <span class="title">Hi, &nbsp;我是AI</span>
     </template>
-    <t-chat
-      layout="both"
-      :clear-history="chatList.length > 0 && !isStreamLoad"
-      @on-action="operation"
-      @clear="clearConfirm"
-    >
+    <t-chat layout="both" :clear-history="chatList.length > 0 && !isStreamLoad" @clear="clearConfirm">
       <template v-for="(item, index) in chatList" :key="index">
         <t-chat-item
           :role="item.role"
-          :text-loading="index === 0 && loading"
+          :text-loading="index === chatList.length - 1 && loading"
           :content="item.content"
           :variant="getStyle(item.role)"
           :reasoning="{
             expandIconPlacement: 'right',
             onExpandChange: handleChange(value, { index }),
             collapsePanelProps: {
-              header: renderHeader(index === 0 && isStreamLoad && !item.content, item),
+              header: renderHeader(index === chatList.length - 1 && isStreamLoad && !item.content, item),
+
               content: renderReasoningContent(item.reasoning),
             },
           }"
@@ -40,7 +36,7 @@
           @stop="onStop"
           @send="inputEnter"
         >
-          <template #prefix>
+          <template #footer-prefix>
             <div class="model-select">
               <t-tooltip v-model:visible="allowToolTip" content="切换模型" trigger="hover">
                 <t-select
@@ -140,11 +136,14 @@ const renderHeader = (flag, item) => {
   );
 };
 const renderReasoningContent = (reasoningContent) => <t-chat-content content={reasoningContent} role="assistant" />;
-// 倒序渲染
+// 正序渲染
 const chatList = ref([
   {
-    content: `模型由<span>hunyuan</span>变为<span>GPT4</span>`,
-    role: 'model-change',
+    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+    name: '自己',
+    datetime: '今天16:38',
+    content: '牛顿第一定律是否适用于所有参考系？',
+    role: 'user',
     reasoning: '',
   },
   {
@@ -179,14 +178,12 @@ const chatList = ref([
     duration: 10,
   },
   {
-    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
-    name: '自己',
-    datetime: '今天16:38',
-    content: '牛顿第一定律是否适用于所有参考系？',
-    role: 'user',
+    content: `模型由<span>hunyuan</span>变为<span>GPT4</span>`,
+    role: 'system',
     reasoning: '',
   },
 ]);
+
 const clearConfirm = function () {
   chatList.value = [];
 };
@@ -210,7 +207,7 @@ const inputEnter = function () {
     content: inputValue.value,
     role: 'user',
   };
-  chatList.value.unshift(params);
+  chatList.value.push(params);
   // 空消息占位
   const params2 = {
     avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
@@ -220,7 +217,8 @@ const inputEnter = function () {
     reasoning: '',
     role: 'assistant',
   };
-  chatList.value.unshift(params2);
+  chatList.value.push(params2);
+
   handleData(inputValue.value);
   inputValue.value = '';
 };
@@ -253,7 +251,8 @@ const fetchSSE = async (fetchFn, options) => {
 const handleData = async () => {
   loading.value = true;
   isStreamLoad.value = true;
-  const lastItem = chatList.value[0];
+  const lastItem = chatList.value[chatList.value.length - 1];
+
   const mockedData = {
     reasoning: `嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。
 
diff --git a/packages/pro-components/chat/chat-reasoning/_example/reasoning-style.vue b/packages/pro-components/chat/chat-reasoning/_example/reasoning-style.vue
new file mode 100644
index 0000000000..e99189644d
--- /dev/null
+++ b/packages/pro-components/chat/chat-reasoning/_example/reasoning-style.vue
@@ -0,0 +1,121 @@
+<script setup lang="jsx">
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { CheckCircleIcon } from 'tdesign-icons-vue-next';
+const fullText =
+  '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。';
+const displayText = ref('');
+const status = ref('streaming');
+const title = ref('正在思考中...');
+const layout = ref('block');
+const animation = ref('moving');
+const timerRef = ref(null);
+const currentIndex = ref(0);
+const startTimeRef = ref(Date.now());
+
+// 打字效果函数
+const typeEffect = () => {
+  if (currentIndex.value < fullText.length) {
+    const char = fullText[currentIndex.value];
+    currentIndex.value += 1;
+    displayText.value += char;
+    timerRef.value = setTimeout(typeEffect, 50);
+    status.value = 'streaming';
+  } else {
+    // 计算耗时并更新状态
+    const costTime = parseInt(((Date.now() - startTimeRef.value) / 1000).toString(), 10);
+    title.value = `已完成思考（耗时${costTime}秒）`;
+    status.value = 'complete';
+  }
+};
+
+// 重置打字效果相关状态
+const resetTypingEffect = () => {
+  displayText.value = '';
+  status.value = 'pending';
+  title.value = '正在思考中...';
+  currentIndex.value = 0;
+  if (timerRef.value) clearTimeout(timerRef.value);
+};
+
+// 监听layout和animation变化
+watch([layout, animation], () => {
+  resetTypingEffect();
+  startTimeRef.value = Date.now();
+  timerRef.value = setTimeout(typeEffect, 500);
+});
+
+onMounted(() => {
+  resetTypingEffect();
+  startTimeRef.value = Date.now();
+  timerRef.value = setTimeout(typeEffect, 500);
+});
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  if (timerRef.value) clearTimeout(timerRef.value);
+});
+
+/**
+ * 渲染推理模块的头部自定义内容
+ * @param {boolean} flag - 思维链内容是否加载中
+ * @param {string} endText - 思维链加载完成时显示的文本
+ * @returns {JSX.Element} 返回对应的头部组件
+ */
+const renderHeader = (status) => {
+  if (status === 'streaming' || status === 'pending') {
+    return <t-chat-loading text="正在思考中..." />;
+  }
+  return (
+    <div style="display:flex;align-items:center">
+      <CheckCircleIcon
+        style={{
+          color: 'var(--td-success-color-5)',
+          fontSize: '20px',
+          marginRight: '8px',
+        }}
+      />
+      <span>{title.value}</span>
+    </div>
+  );
+};
+
+/**
+ * 渲染推理内容组件
+ * @param {string} reasoningContent - 需要渲染的推理内容
+ * @returns {JSX.Element} 返回 markdown渲染内容，用于展示推理内容, 不用markdown渲染组件原文返回
+ */
+const renderReasoningContent = (reasoningContent) => <t-chat-content content={reasoningContent} role="assistant" />;
+
+const onLayoutChange = (value) => {
+  resetTypingEffect();
+  layout.value = value;
+};
+
+const handleChange = (value) => {
+  console.log('handleChange', value);
+};
+</script>
+
+<template>
+  <t-space direction="vertical">
+    <t-space>
+      <t-space direction="vertical">
+        <h5>layout：</h5>
+        <t-radio-group :default-value="layout" @change="onLayoutChange">
+          <t-radio value="border">border</t-radio>
+          <t-radio value="block">block</t-radio>
+        </t-radio-group>
+      </t-space>
+    </t-space>
+    <t-chat-reasoning
+      expand-icon-placement="right"
+      :layout="layout"
+      :collapse-panel-props="{
+        header: renderHeader(status),
+        content: renderReasoningContent(displayText),
+      }"
+      @expand-change="handleChange"
+    >
+    </t-chat-reasoning>
+  </t-space>
+</template>
diff --git a/packages/pro-components/chat/_example/reasoning.vue b/packages/pro-components/chat/chat-reasoning/_example/reasoning.vue
similarity index 87%
rename from packages/pro-components/chat/_example/reasoning.vue
rename to packages/pro-components/chat/chat-reasoning/_example/reasoning.vue
index f12393b34e..2950399d3f 100644
--- a/packages/pro-components/chat/_example/reasoning.vue
+++ b/packages/pro-components/chat/chat-reasoning/_example/reasoning.vue
@@ -14,14 +14,15 @@
           :name="item.name"
           :role="item.role"
           :datetime="item.datetime"
-          :text-loading="index === 0 && loading"
+          :text-loading="index === chatList.length - 1 && loading"
           :content="item.content"
           :reasoning="{
-            collapsed: index === 0 && !isStreamLoad,
+            collapsed: index === chatList.length - 1 && !isStreamLoad,
             expandIconPlacement: 'right',
             onExpandChange: handleChange(value, { index }),
             collapsePanelProps: {
-              header: renderHeader(index === 0 && isStreamLoad && !item.content, item),
+              header: renderHeader(index === chatList.length - 1 && isStreamLoad && !item.content, item),
+
               content: renderReasoningContent(item.reasoning),
             },
           }"
@@ -38,7 +39,7 @@
           @stop="onStop"
           @send="inputEnter"
         >
-          <template #prefix>
+          <template #footer-prefix>
             <div class="model-select">
               <t-tooltip v-model:visible="allowToolTip" content="切换模型" trigger="hover">
                 <t-select
@@ -57,11 +58,6 @@
         </t-chat-sender>
       </template>
     </t-chat>
-    <t-button v-show="isShowToBottom" variant="text" class="bottomBtn" @click="backBottom">
-      <div class="to-bottom">
-        <ArrowDownIcon />
-      </div>
-    </t-button>
   </div>
 </template>
 <script setup lang="jsx">
@@ -134,11 +130,14 @@ const renderHeader = (flag, item) => {
   );
 };
 const renderReasoningContent = (reasoningContent) => <t-chat-content content={reasoningContent} role="assistant" />;
-// 倒序渲染
+// 正序渲染
 const chatList = ref([
   {
-    content: `模型由<span>hunyuan</span>变为<span>GPT4</span>`,
-    role: 'model-change',
+    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+    name: '自己',
+    datetime: '今天16:38',
+    content: '牛顿第一定律是否适用于所有参考系？',
+    role: 'user',
     reasoning: '',
   },
   {
@@ -162,14 +161,12 @@ const chatList = ref([
     duration: 10,
   },
   {
-    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
-    name: '自己',
-    datetime: '今天16:38',
-    content: '牛顿第一定律是否适用于所有参考系？',
-    role: 'user',
+    content: `模型由<span>hunyuan</span>变为<span>GPT4</span>`,
+    role: 'system',
     reasoning: '',
   },
 ]);
+
 const clearConfirm = function () {
   chatList.value = [];
 };
@@ -182,8 +179,7 @@ const onStop = function () {
 };
 // 是否显示回到底部按钮
 const handleChatScroll = function ({ e }) {
-  const scrollTop = e.target.scrollTop;
-  isShowToBottom.value = scrollTop < 0;
+  console.log('handleChatScroll', e);
 };
 
 const inputEnter = function () {
@@ -199,7 +195,7 @@ const inputEnter = function () {
     content: inputValue.value,
     role: 'user',
   };
-  chatList.value.unshift(params);
+  chatList.value.push(params);
   // 空消息占位
   const params2 = {
     avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
@@ -209,7 +205,8 @@ const inputEnter = function () {
     reasoning: '',
     role: 'assistant',
   };
-  chatList.value.unshift(params2);
+  chatList.value.push(params2);
+
   handleData(inputValue.value);
   inputValue.value = '';
 };
@@ -242,7 +239,8 @@ const fetchSSE = async (fetchFn, options) => {
 const handleData = async () => {
   loading.value = true;
   isStreamLoad.value = true;
-  const lastItem = chatList.value[0];
+  const lastItem = chatList.value[chatList.value.length - 1];
+
   const mockedData = {
     reasoning: `嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。
 
@@ -290,38 +288,6 @@ const handleData = async () => {
 ::-webkit-scrollbar-track {
   background-color: var(--td-scroll-track-color);
 }
-.chat-box {
-  position: relative;
-  .bottomBtn {
-    position: absolute;
-    left: 50%;
-    margin-left: -20px;
-    bottom: 210px;
-    padding: 0;
-    border: 0;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04),
-      0px 6px 30px 5px rgba(0, 0, 0, 0.05);
-  }
-  .to-bottom {
-    width: 40px;
-    height: 40px;
-    border: 1px solid #dcdcdc;
-    box-sizing: border-box;
-    background: var(--td-bg-color-container);
-    border-radius: 50%;
-    font-size: 24px;
-    line-height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .t-icon {
-      font-size: 24px;
-    }
-  }
-}
 
 .model-select {
   display: flex;
diff --git a/packages/pro-components/chat/chat-reasoning-props.ts b/packages/pro-components/chat/chat-reasoning/chat-reasoning-props.ts
similarity index 92%
rename from packages/pro-components/chat/chat-reasoning-props.ts
rename to packages/pro-components/chat/chat-reasoning/chat-reasoning-props.ts
index f0219e0563..069a6d81de 100644
--- a/packages/pro-components/chat/chat-reasoning-props.ts
+++ b/packages/pro-components/chat/chat-reasoning/chat-reasoning-props.ts
@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdChatReasoningProps } from './type';
+import { TdChatReasoningProps } from '../type';
 import { PropType } from 'vue';
 
 export default {
@@ -54,4 +54,8 @@ export default {
     type: Boolean as PropType<TdChatReasoningProps['collapsed']>,
     default: false,
   },
+  layout: {
+    type: String as PropType<TdChatReasoningProps['layout']>,
+    default: 'block',
+  },
 };
diff --git a/packages/pro-components/chat/chat-reasoning.md b/packages/pro-components/chat/chat-reasoning/chat-reasoning.md
similarity index 78%
rename from packages/pro-components/chat/chat-reasoning.md
rename to packages/pro-components/chat/chat-reasoning/chat-reasoning.md
index 24c2374cee..ebd80500db 100644
--- a/packages/pro-components/chat/chat-reasoning.md
+++ b/packages/pro-components/chat/chat-reasoning/chat-reasoning.md
@@ -13,7 +13,8 @@ expandIcon | Slot / Function | - | 当前折叠面板展开图标。优先级低
 expandIconPlacement | String | right | 展开图标位置，可选项：left/right。可选项：left/right | N
 header | Slot / Function | - | 折叠面板头内容。优先级低于collapsePanelProps.header。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 headerRightContent | Slot / Function | - | 折叠面板尾内容。优先级低于collapsePanelProps.headerRightContent。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
-onExpandChange | Function |  | TS 类型：`(value: CollapseValue) => void`<br/>展开图标点击事件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/pro-components/chat/type.ts)。<br/>`import { CollapseValue } from '@Collapse'`<br/> | N
+layout | String | block | 布局方式。可选项： `border`/`block` | N
+onExpandChange | Function | — | TS 类型：`(value: CollapseValue) => void`<br/>展开图标点击事件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/pro-components/chat/type.ts)。<br/>`import { CollapseValue } from '@Collapse'`<br/> | N
 
 ### ChatReasoning Events
 
diff --git a/packages/pro-components/chat/chat-reasoning.tsx b/packages/pro-components/chat/chat-reasoning/chat-reasoning.tsx
similarity index 92%
rename from packages/pro-components/chat/chat-reasoning.tsx
rename to packages/pro-components/chat/chat-reasoning/chat-reasoning.tsx
index 8753bc457d..ccd286f95a 100644
--- a/packages/pro-components/chat/chat-reasoning.tsx
+++ b/packages/pro-components/chat/chat-reasoning/chat-reasoning.tsx
@@ -22,6 +22,9 @@ export default defineComponent({
       props.onExpandChange,
       'collapsed',
     );
+    const layoutClass = computed(() =>
+      props.layout === 'border' ? `${COMPONENT_NAME.value}__detail-reasoning-border` : '',
+    );
 
     const onChangeFn = (value: Array<number>) => {
       setInnerCollapsed(value.length === 0); // Update collapsed state based on value
@@ -31,6 +34,7 @@ export default defineComponent({
       <div class={`${COMPONENT_NAME.value}__detail-reasoning`}>
         <Collapse
           borderless={true}
+          class={`${layoutClass.value}`}
           expandIconPlacement={props.expandIconPlacement}
           onChange={onChangeFn}
           value={innerCollapsed.value ? [] : [0]}
diff --git a/packages/pro-components/chat/chat-reasoning/index.ts b/packages/pro-components/chat/chat-reasoning/index.ts
new file mode 100644
index 0000000000..8a2a35b753
--- /dev/null
+++ b/packages/pro-components/chat/chat-reasoning/index.ts
@@ -0,0 +1,2 @@
+import _ChatReasoning from './chat-reasoning';
+export default _ChatReasoning;
diff --git a/packages/pro-components/chat/chat-sender/_example/chat-sender-attachments.vue b/packages/pro-components/chat/chat-sender/_example/chat-sender-attachments.vue
new file mode 100644
index 0000000000..49d6fbfe38
--- /dev/null
+++ b/packages/pro-components/chat/chat-sender/_example/chat-sender-attachments.vue
@@ -0,0 +1,102 @@
+<template>
+  <t-chat-sender
+    v-model="query"
+    :stop-disabled="loading"
+    :textarea-props="{
+      placeholder: '请输入消息...',
+    }"
+    :attachments-props="{
+      items: filesList,
+      overflow: 'scrollX',
+    }"
+    @send="inputEnter"
+    @file-select="handleUploadFile"
+    @file-click="handleFileClick"
+    @remove="handleRemoveFile"
+  >
+    <!-- 自定义操作区域的内容，默认支持图片上传、附件上传和发送按钮 -->
+    <template #suffix="{ renderPresets }">
+      <!-- 在这里可以进行自由的组合使用，或者新增预设 -->
+      <!-- 不需要附件操作的使用方式 -->
+      <!-- <component :is="renderPresets([])" /> -->
+      <!-- 只需要附件上传的使用方式-->
+      <!-- <component :is="renderPresets([{ name: 'uploadAttachment' }])" /> -->
+      <!-- 只需要图片上传的使用方式-->
+      <!-- <component :is="renderPresets([{ name: 'uploadImage' }])" /> -->
+      <!-- 任意配置顺序-->
+      <component :is="renderPresets([{ name: 'uploadImage' }, { name: 'uploadAttachment' }])" />
+    </template>
+  </t-chat-sender>
+</template>
+<script setup lang="ts">
+import { TdAttachmentItem } from '@tdesign-vue-next/chat';
+
+import { ref } from 'vue';
+const query = ref('');
+const loading = ref(false);
+// 模拟消息发送
+const inputEnter = function (inputValue: string) {
+  if (loading.value) {
+    return;
+  }
+  if (!inputValue) return;
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 5000);
+};
+const filesList = ref<TdAttachmentItem[]>([
+  {
+    key: '1',
+    name: 'excel-file.xlsx',
+    size: 111111,
+  },
+  {
+    key: '2',
+    name: 'word-file.docx',
+    size: 222222,
+  },
+  {
+    key: '3',
+    name: 'image-file.png',
+    size: 333333,
+  },
+  {
+    key: '4',
+    name: 'pdf-file.pdf',
+    size: 444444,
+  },
+]);
+const handleRemoveFile = (e: CustomEvent<TdAttachmentItem>) => {
+  filesList.value = filesList.value.filter((item) => item.key !== e.detail.key);
+};
+
+const handleUploadFile = ({ files, name, e }) => {
+  console.log('🚀 ~ handleUploadFile ~ eYLog :', e, files, name);
+  // 添加新文件并模拟上传进度
+  const newFile = {
+    size: files[0].size,
+    name: files[0].name,
+    status: 'progress' as TdAttachmentItem['status'],
+    description: '上传中',
+  };
+
+  filesList.value = [newFile, ...filesList.value];
+  console.log('🚀 ~ handleUploadFile ~ filesListYLog :', filesList);
+  setTimeout(() => {
+    filesList.value = filesList.value.map((file) =>
+      file.name === newFile.name
+        ? {
+            ...file,
+            url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+            status: 'success',
+            description: `${Math.floor(newFile.size / 1024)}KB`,
+          }
+        : file,
+    );
+  }, 1000);
+};
+const handleFileClick = (e: CustomEvent<TdAttachmentItem>) => {
+  console.log('fileClick', e.detail);
+};
+</script>
diff --git a/packages/pro-components/chat/chat-sender/_example/chat-sender-base.vue b/packages/pro-components/chat/chat-sender/_example/chat-sender-base.vue
new file mode 100644
index 0000000000..1ece79912d
--- /dev/null
+++ b/packages/pro-components/chat/chat-sender/_example/chat-sender-base.vue
@@ -0,0 +1,38 @@
+<template>
+  <t-chat-sender
+    v-model="query"
+    :stop-disabled="loading"
+    :textarea-props="{
+      placeholder: '请输入消息...',
+    }"
+    @send="inputEnter"
+  >
+    <template #suffix="{ renderPresets }">
+      <!-- 在这里可以进行自由的组合使用，或者新增预设 -->
+      <!-- 不需要附件操作的使用方式 -->
+      <component :is="renderPresets([])" />
+    </template>
+  </t-chat-sender>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const query = ref('');
+const loading = ref(false);
+// 模拟消息发送
+const inputEnter = function () {
+  if (loading.value) {
+    return;
+  }
+  if (!query.value) return;
+  query.value = '';
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 5000);
+};
+</script>
+<style>
+.test {
+  color: var(--td-brand-color);
+}
+</style>
diff --git a/packages/pro-components/chat/chat-sender/_example/chat-sender-mix.vue b/packages/pro-components/chat/chat-sender/_example/chat-sender-mix.vue
new file mode 100644
index 0000000000..10e381aa68
--- /dev/null
+++ b/packages/pro-components/chat/chat-sender/_example/chat-sender-mix.vue
@@ -0,0 +1,219 @@
+<template>
+  <t-chat-sender
+    ref="chatSenderRef"
+    v-model="inputValue"
+    class="chat-sender"
+    :textarea-props="{
+      placeholder: '请输入消息...',
+    }"
+    :attachments-props="{
+      items: filesList,
+      overflow: 'scrollX',
+    }"
+    :loading="loading"
+    @send="inputEnter"
+    @file-select="handleUploadFile"
+    @file-click="handleFileClick"
+    @remove="handleRemoveFile"
+  >
+    <template #suffix="{ renderPresets }">
+      <component :is="renderPresets([{ name: 'uploadImage' }, { name: 'uploadAttachment' }])" />
+    </template>
+    <template #footer-prefix>
+      <div class="model-select">
+        <t-tooltip v-model:visible="allowToolTip" content="切换模型" trigger="hover">
+          <t-select
+            v-model="selectValue"
+            :options="selectOptions"
+            value-type="object"
+            @focus="allowToolTip = false"
+          ></t-select>
+        </t-tooltip>
+        <t-button class="check-box" :class="{ 'is-active': isChecked }" variant="outline" @click="checkClick">
+          <SystemSumIcon />
+          <span>深度思考</span>
+        </t-button>
+      </div>
+    </template>
+    <template #inner-header>
+      <div
+        :style="{
+          display: 'flex',
+          width: '100%',
+          marginBottom: '8px',
+          paddingBottom: '8px',
+          justifyContent: 'space-between',
+          alignItem: 'center',
+          borderBottom: '1px solid var(--td-component-stroke)',
+        }"
+      >
+        <div :style="{ flex: 1, display: 'flex', alignItems: 'center' }">
+          <EnterIcon
+            :size="'20px'"
+            :style="{ color: 'var(--td-text-color-disabled)', transform: 'scaleX(-1)', padding: '6px' }"
+          />
+          <p :style="{ fontSize: '14px', color: 'var(--td-text-color-placeholder)', marginLeft: '4px' }">
+            “牛顿第一定律（惯性定律）仅适用于惯性参考系，而不适用于非惯性参考系。”
+          </p>
+        </div>
+        <CloseIcon
+          :size="'20px'"
+          :style="{ color: 'var(--td-text-color-disabled)', padding: '6px' }"
+          @click="onRemoveRef"
+        />
+      </div>
+    </template>
+  </t-chat-sender>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { SystemSumIcon, EnterIcon, CloseIcon } from 'tdesign-icons-vue-next';
+import { TdAttachmentItem } from '@tdesign-vue-next/chat';
+const loading = ref(false);
+const allowToolTip = ref(false);
+const chatSenderRef = ref(null);
+const inputValue = ref('');
+const scene = ref(1);
+const selectOptions = [
+  {
+    label: '默认模型',
+    value: 'default',
+  },
+  {
+    label: 'Deepseek',
+    value: 'deepseek-r1',
+  },
+  {
+    label: '混元',
+    value: 'hunyuan',
+  },
+];
+const selectValue = ref({
+  label: '默认模型',
+  value: 'default',
+});
+const isChecked = ref(false);
+const filesList = ref<TdAttachmentItem[]>([
+  {
+    key: '1',
+    name: 'excel-file.xlsx',
+    size: 111111,
+  },
+  {
+    key: '2',
+    name: 'word-file.docx',
+    size: 222222,
+  },
+  {
+    key: '3',
+    name: 'image-file.png',
+    size: 333333,
+  },
+  {
+    key: '4',
+    name: 'pdf-file.pdf',
+    size: 444444,
+  },
+]);
+const checkClick = () => {
+  isChecked.value = !isChecked.value;
+};
+// 模拟消息发送
+const inputEnter = function () {
+  if (loading.value) {
+    return;
+  }
+  if (!inputValue.value) return;
+  inputValue.value = '';
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 5000);
+};
+
+const handleRemoveFile = (e: CustomEvent<TdAttachmentItem>) => {
+  filesList.value = filesList.value.filter((item) => item.key !== e.detail.key);
+};
+
+const handleUploadFile = ({ files, name, e }) => {
+  console.log('🚀 ~ handleUploadFile ~ eYLog :', e, files, name);
+  // 添加新文件并模拟上传进度
+  const newFile = {
+    size: files[0].size,
+    name: files[0].name,
+    status: 'progress' as TdAttachmentItem['status'],
+    description: '上传中',
+  };
+
+  filesList.value = [newFile, ...filesList.value];
+  console.log('🚀 ~ handleUploadFile ~ filesListYLog :', filesList);
+  setTimeout(() => {
+    filesList.value = filesList.value.map((file) =>
+      file.name === newFile.name
+        ? {
+            ...file,
+            url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+            status: 'success',
+            description: `${Math.floor(newFile.size / 1024)}KB`,
+          }
+        : file,
+    );
+  }, 1000);
+};
+const handleFileClick = (e: CustomEvent<TdAttachmentItem>) => {
+  console.log('fileClick', e.detail);
+};
+</script>
+<style lang="less">
+.chat-sender {
+  .btn {
+    color: var(--td-text-color-disabled);
+    border: none;
+    &:hover {
+      color: var(--td-brand-color-hover);
+      border: none;
+      background: none;
+    }
+  }
+  .btn.t-button {
+    height: var(--td-comp-size-m);
+    padding: 0;
+  }
+  .model-select {
+    display: flex;
+    align-items: center;
+    .t-select {
+      width: 112px;
+      height: var(--td-comp-size-m);
+      margin-right: var(--td-comp-margin-s);
+      .t-input {
+        border-radius: 32px;
+        padding: 0 15px;
+      }
+      .t-input.t-is-focused {
+        box-shadow: none;
+      }
+    }
+    .check-box {
+      width: 112px;
+      height: var(--td-comp-size-m);
+      border-radius: 32px;
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      .t-button__text {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span {
+          margin-left: var(--td-comp-margin-s);
+        }
+      }
+    }
+    .check-box.is-active {
+      border: 1px solid var(--td-brand-color-focus);
+      background: var(--td-brand-color-light);
+      color: var(--td-text-color-brand);
+    }
+  }
+}
+</style>
diff --git a/packages/pro-components/chat/_example/chat-sender-slot.vue b/packages/pro-components/chat/chat-sender/_example/chat-sender-slot.vue
similarity index 72%
rename from packages/pro-components/chat/_example/chat-sender-slot.vue
rename to packages/pro-components/chat/chat-sender/_example/chat-sender-slot.vue
index 6f5a7498e3..2a60468e41 100644
--- a/packages/pro-components/chat/_example/chat-sender-slot.vue
+++ b/packages/pro-components/chat/chat-sender/_example/chat-sender-slot.vue
@@ -4,16 +4,24 @@
     v-model="inputValue"
     class="chat-sender"
     :textarea-props="{
-      placeholder: '请输入消息...',
+      placeholder: options.filter((item) => item.value === scene)[0].placeholder,
     }"
     :loading="loading"
     @send="inputEnter"
   >
-    <template #suffix>
-      <!-- 监听键盘回车发送事件需要在sender组件监听 -->
-      <t-button theme="default" variant="text" size="large" class="btn" @click="inputEnter"> 发送 </t-button>
+    <template #input-prefix>
+      <t-dropdown :options="options" trigger="click" :style="{ padding: 0 }" @click="switchScene">
+        <t-tag
+          shape="round"
+          variant="light"
+          color="var(--td-brand-color)"
+          :style="{ marginRight: '4px', cursor: 'pointer' }"
+        >
+          {{ options.filter((item) => item.value === scene)[0].content }}
+        </t-tag>
+      </t-dropdown>
     </template>
-    <template #prefix>
+    <template #footer-prefix>
       <div class="model-select">
         <t-tooltip v-model:visible="allowToolTip" content="切换模型" trigger="hover">
           <t-select
@@ -23,7 +31,7 @@
             @focus="allowToolTip = false"
           ></t-select>
         </t-tooltip>
-        <t-button class="check-box" :class="{ 'is-active': isChecked }" variant="text" @click="checkClick">
+        <t-button class="check-box" :class="{ 'is-active': isChecked }" variant="outline" @click="checkClick">
           <SystemSumIcon />
           <span>深度思考</span>
         </t-button>
@@ -38,6 +46,24 @@ const loading = ref(false);
 const allowToolTip = ref(false);
 const chatSenderRef = ref(null);
 const inputValue = ref('');
+const options = [
+  {
+    content: '帮我写作',
+    value: 1,
+    placeholder: '输入你要撰写的主题',
+  },
+  {
+    content: '图像生成',
+    value: 2,
+    placeholder: '说说你的创作灵感',
+  },
+  {
+    content: '网页摘要',
+    value: 3,
+    placeholder: '输入你要解读的网页地址',
+  },
+];
+const scene = ref(1);
 const selectOptions = [
   {
     label: '默认模型',
@@ -72,6 +98,9 @@ const inputEnter = function () {
     loading.value = false;
   }, 5000);
 };
+const switchScene = (data: any) => {
+  scene.value = data.value;
+};
 </script>
 <style lang="less">
 .chat-sender {
@@ -107,9 +136,6 @@ const inputEnter = function () {
       width: 112px;
       height: var(--td-comp-size-m);
       border-radius: 32px;
-      border: 0;
-      background: var(--td-bg-color-component);
-      color: var(--td-text-color-primary);
       box-sizing: border-box;
       flex: 0 0 auto;
       .t-button__text {
@@ -117,7 +143,7 @@ const inputEnter = function () {
         align-items: center;
         justify-content: center;
         span {
-          margin-left: var(--td-comp-margin-xs);
+          margin-left: var(--td-comp-margin-s);
         }
       }
     }
diff --git a/packages/pro-components/chat/_example/chat-sender.vue b/packages/pro-components/chat/chat-sender/_example/chat-sender.vue
similarity index 65%
rename from packages/pro-components/chat/_example/chat-sender.vue
rename to packages/pro-components/chat/chat-sender/_example/chat-sender.vue
index e786991a8f..ff744ddbf9 100644
--- a/packages/pro-components/chat/_example/chat-sender.vue
+++ b/packages/pro-components/chat/chat-sender/_example/chat-sender.vue
@@ -9,17 +9,10 @@
     @file-select="fileSelect"
     @stop="onStop"
   >
-    <!-- 自定义操作区域的内容，默认支持图片上传、附件上传和发送按钮 -->
     <template #suffix="{ renderPresets }">
       <!-- 在这里可以进行自由的组合使用，或者新增预设 -->
       <!-- 不需要附件操作的使用方式 -->
       <component :is="renderPresets([])" />
-      <!-- 只需要附件上传的使用方式-->
-      <!-- <component :is="renderPresets([{ name: 'uploadAttachment' }])" /> -->
-      <!-- 只需要图片上传的使用方式-->
-      <!-- <component :is="renderPresets([{ name: 'uploadImage' }])" /> -->
-      <!-- 任意配置顺序-->
-      <!-- <component :is="renderPresets([{ name: 'uploadAttachment' }, { name: 'uploadImage' }])" /> -->
     </template>
   </t-chat-sender>
 </template>
diff --git a/packages/pro-components/chat/chat-sender-props.ts b/packages/pro-components/chat/chat-sender/chat-sender-props.ts
similarity index 88%
rename from packages/pro-components/chat/chat-sender-props.ts
rename to packages/pro-components/chat/chat-sender/chat-sender-props.ts
index 79f0253dad..9cb2537c4e 100644
--- a/packages/pro-components/chat/chat-sender-props.ts
+++ b/packages/pro-components/chat/chat-sender/chat-sender-props.ts
@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdChatSenderProps } from './type';
+import { TdChatSenderProps } from '../type';
 import { PropType } from 'vue';
 
 export default {
@@ -16,8 +16,8 @@ export default {
     default: '',
   },
   /** 输入框左下角区域扩展 */
-  prefix: {
-    type: [String, Function] as PropType<TdChatSenderProps['prefix']>,
+  footerPrefix: {
+    type: [String, Function] as PropType<TdChatSenderProps['footerPrefix']>,
   },
   /** 发送按钮是否处于加载状态 */
   stopDisabled: {
@@ -50,6 +50,9 @@ export default {
   defaultValue: {
     type: [String, Number] as PropType<TdChatSenderProps['defaultValue']>,
   },
+  attachmentsProps: {
+    type: Object as PropType<TdChatSenderProps['attachmentsProps']>,
+  },
   /** 输入框聚焦时触发 */
   onBlur: Function as PropType<TdChatSenderProps['onBlur']>,
   /** 输入框值发生变化时触发 */
diff --git a/packages/pro-components/chat/chat-sender.md b/packages/pro-components/chat/chat-sender/chat-sender.md
similarity index 88%
rename from packages/pro-components/chat/chat-sender.md
rename to packages/pro-components/chat/chat-sender/chat-sender.md
index 6d228b11f2..d7beef0a41 100644
--- a/packages/pro-components/chat/chat-sender.md
+++ b/packages/pro-components/chat/chat-sender/chat-sender.md
@@ -8,7 +8,8 @@
 -- | -- | -- | -- | --
 disabled | Boolean | false | 是否禁用输入框 | N
 placeholder | String | - | 输入框默认文案 | N
-prefix | String / Slot / Function | - | 输入框左下角区域扩展。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+footer-prefix | String / Slot / Function | - | 输入框左下角区域扩展。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+input-prefix | String / Slot / Function | - | 输入框前方区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 stopDisabled | Boolean | false | 发送按钮是否处于加载状态`待废弃，请尽快使用loading替换` | N
 loading | Boolean | false | 发送按钮是否处于加载状态 | N
 suffix | String / Slot / Function | - | 输入框右下角区域扩展。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。当使用函数形式控制上传按钮时，参数为 `{ renderPresets: UploadActionConfig[] }`，其中 `UploadActionConfig` [详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/pro-components/chat/type.ts) | N
diff --git a/packages/pro-components/chat/chat-sender.tsx b/packages/pro-components/chat/chat-sender/chat-sender.tsx
similarity index 72%
rename from packages/pro-components/chat/chat-sender.tsx
rename to packages/pro-components/chat/chat-sender/chat-sender.tsx
index e673e75594..5ecd4bdd96 100644
--- a/packages/pro-components/chat/chat-sender.tsx
+++ b/packages/pro-components/chat/chat-sender/chat-sender.tsx
@@ -1,19 +1,27 @@
 import { defineComponent, ref, computed, toRefs, reactive, Fragment } from 'vue';
 import { SendFilledIcon, FileAttachmentIcon, ImageIcon } from 'tdesign-icons-vue-next';
 import { Button, Textarea, Tooltip } from 'tdesign-vue-next';
+import Attachments from '../attachments';
 import { useConfig } from 'tdesign-vue-next/es/config-provider/hooks';
 import { usePrefixClass, useTNodeJSX, useVModel } from '@tdesign/shared-hooks';
 import props from './chat-sender-props';
 
-import type { TdChatSenderProps, UploadActionType, UploadActionConfig } from './type';
+import type { TdChatSenderProps, UploadActionType, UploadActionConfig } from '../type';
 
 export default defineComponent({
   name: 'TChatSender',
-  props,
-  emits: ['send', 'stop', 'update:modelValue', 'blur', 'focus', 'fileSelect'], // declare the custom events here
+  props: {
+    ...props,
+    attachmentsProps: {
+      type: Object,
+      // @ts-ignore
+      default: () => ({ items: [], overflow: 'scrollX' }),
+    },
+  },
+  emits: ['send', 'stop', 'update:modelValue', 'blur', 'focus', 'fileSelect', 'remove', 'fileClick'], // declare the custom events here
   setup(props, { emit }) {
     let shiftDownFlag = false;
-    let isComposition = false;
+    const isComposition = false;
     const senderTextarea = ref(null);
     const COMPONENT_NAME = usePrefixClass('chat');
     const { globalConfig } = useConfig('chat');
@@ -76,14 +84,7 @@ export default defineComponent({
     const textChange = (value: string, context: { e: InputEvent }) => {
       setInnerValue(value, context);
     };
-    // 当用户通过输入法开始输入组合文字（如中文拼音输入）时触发
-    const compositionstartFn = () => {
-      isComposition = true;
-    };
-    // 当用户通过输入法完成组合文字的选择（如从候选词中选择中文）时触发
-    const compositionendFn = () => {
-      isComposition = false;
-    };
+
     const actionsDefault = reactive<UploadActionConfig[]>([
       {
         name: 'uploadImage',
@@ -91,14 +92,14 @@ export default defineComponent({
           multiple: true,
           accept: 'image/*',
         },
-        action: ({ files, name }) => {
-          emit('fileSelect', { files, name });
+        action: ({ files, name, e }) => {
+          emit('fileSelect', { files, name, e });
         },
       },
       {
         name: 'uploadAttachment',
-        action: ({ files, name }) => {
-          emit('fileSelect', { files, name });
+        action: ({ files, name, e }) => {
+          emit('fileSelect', { files, name, e });
         },
       },
     ]);
@@ -107,7 +108,7 @@ export default defineComponent({
       // 获取默认action处理函数
       const getDefaultAction = (name: UploadActionType) => {
         const defaultAction = actionsDefault.find((item) => item.name === name)?.action;
-        return defaultAction || (({ files, name }) => emit('fileSelect', { files, name }));
+        return defaultAction || (({ files, name, e }) => emit('fileSelect', { files, name, e }));
       };
       const { uploadAttachmentText, uploadImageText } = globalConfig.value;
       const uploadAttachment = actions.find((item) => item.name === 'uploadAttachment');
@@ -123,7 +124,7 @@ export default defineComponent({
                 return;
               }
               const action = uploadAttachment.action || getDefaultAction('uploadAttachment');
-              action({ files, name: uploadAttachment.name });
+              action({ files, name: uploadAttachment.name, e });
               (e.target as HTMLInputElement).value = '';
             }}
             hidden
@@ -136,7 +137,7 @@ export default defineComponent({
               variant="text"
               class={[`${COMPONENT_NAME.value}-sender__upload`]}
             >
-              <FileAttachmentIcon />
+              <FileAttachmentIcon size="20px" />
             </Button>
           </Tooltip>
         </Fragment>
@@ -155,7 +156,7 @@ export default defineComponent({
                 return;
               }
               const action = uploadImage.action || getDefaultAction('uploadImage');
-              action({ files, name: uploadImage.name });
+              action({ files, name: uploadImage.name, e });
               (e.target as HTMLInputElement).value = '';
             }}
             hidden
@@ -168,7 +169,7 @@ export default defineComponent({
               variant="text"
               class={[`${COMPONENT_NAME.value}-sender__upload`]}
             >
-              <ImageIcon />
+              <ImageIcon size="20px" />
             </Button>
           </Tooltip>
         </Fragment>
@@ -180,12 +181,13 @@ export default defineComponent({
 
       return (
         <Fragment>
-          {actions
-            .filter(
-              (item): item is { name: UploadActionType; action: () => void } =>
-                item.name === 'uploadAttachment' || item.name === 'uploadImage',
-            )
-            .map((item) => buttonComponents[item.name])}
+          {actions.length > 0 &&
+            actions
+              .filter(
+                (item): item is { name: UploadActionType; action: () => void } =>
+                  item.name === 'uploadAttachment' || item.name === 'uploadImage',
+              )
+              .map((item) => buttonComponents[item.name])}
           {!showStopBtn.value ? (
             <Button
               theme="default"
@@ -207,44 +209,65 @@ export default defineComponent({
           )}
         </Fragment>
       );
-      // }
     };
     const renderSuffixIcon = () => {
       const suffix = renderTNodeJSX('suffix', { params: { renderPresets: getDefaultSuffixIcon } });
-
-      return suffix ? suffix : getDefaultSuffixIcon();
+      // 默认没有上传附件和上传图片入口
+      return suffix ? suffix : getDefaultSuffixIcon([]);
+    };
+    const handleRemove = (e: CustomEvent) => {
+      emit('remove', e);
     };
+    const handleFileClick = (e: CustomEvent) => {
+      emit('fileClick', e);
+    };
+    const renderHeader = () => {
+      return props.attachmentsProps.items.length > 0 ? (
+        <Attachments
+          items={props.attachmentsProps.items}
+          onRemove={handleRemove}
+          onFileClick={handleFileClick}
+          class={`${COMPONENT_NAME.value}-sender__attachment`}
+          overflow={props.attachmentsProps.overflow}
+        />
+      ) : (
+        renderTNodeJSX('header')
+      );
+    };
+    const renderInputPrefix = renderTNodeJSX('input-prefix') || null;
     return () => (
       <div class={`${COMPONENT_NAME.value}-sender`}>
-        <div class={`${COMPONENT_NAME.value}-sender__header`}>{renderTNodeJSX('header')}</div>
+        {/* <div class={`${COMPONENT_NAME.value}-sender__header`}>{renderHeader()}</div> */}
         <div
           class={[
             `${COMPONENT_NAME.value}-sender__textarea`,
             focusFlag.value ? `${COMPONENT_NAME.value}-sender__textarea--focus` : '',
           ]}
         >
+          <div class={`${COMPONENT_NAME.value}-sender__header`}>{renderHeader()}</div>
           <div class={`${COMPONENT_NAME.value}-sender__inner-header`}>{renderTNodeJSX('inner-header')}</div>
-          <Textarea
-            ref={senderTextarea}
-            value={textValue.value}
-            onChange={textChange}
-            disabled={disabled.value || showStopBtn.value}
-            {...{
-              autosize: (props.textareaProps as TdChatSenderProps['textareaProps'])?.autosize || {
-                minRows: 2,
-                maxRows: 5,
-              },
-              ...(props.textareaProps as TdChatSenderProps['textareaProps']),
-            }}
-            onKeydown={keydownFn}
-            onKeyup={keyupFn}
-            onFocus={focusFn}
-            onBlur={blurFn}
-            onCompositionstart={compositionstartFn}
-            onCompositionend={compositionendFn}
-          />
+          <div class={`${COMPONENT_NAME.value}-sender__textarea__wrapper`}>
+            {renderInputPrefix}
+            <Textarea
+              ref={senderTextarea}
+              value={textValue.value}
+              onChange={textChange}
+              disabled={disabled.value}
+              {...{
+                autosize: (props.textareaProps as TdChatSenderProps['textareaProps'])?.autosize || {
+                  minRows: 2,
+                  maxRows: 5,
+                },
+                ...(props.textareaProps as TdChatSenderProps['textareaProps']),
+              }}
+              onKeydown={keydownFn}
+              onKeyup={keyupFn}
+              onFocus={focusFn}
+              onBlur={blurFn}
+            />
+          </div>
           <div class={`${COMPONENT_NAME.value}-sender__footer`}>
-            <div class={`${COMPONENT_NAME.value}-sender__mode`}>{renderTNodeJSX('prefix')}</div>
+            <div class={`${COMPONENT_NAME.value}-sender__mode`}>{renderTNodeJSX('footer-prefix')}</div>
             <div class={`${COMPONENT_NAME.value}-sender__button`}>
               {/* 发送按钮 */}
               <div class={`${COMPONENT_NAME.value}-sender__button__sendbtn`}>{renderSuffixIcon()}</div>
diff --git a/packages/pro-components/chat/chat-sender/index.ts b/packages/pro-components/chat/chat-sender/index.ts
new file mode 100644
index 0000000000..15efe0e944
--- /dev/null
+++ b/packages/pro-components/chat/chat-sender/index.ts
@@ -0,0 +1,2 @@
+import _ChatSender from './chat-sender';
+export default _ChatSender;
diff --git a/packages/pro-components/chat/chat-thinking/_example/think-base.vue b/packages/pro-components/chat/chat-thinking/_example/think-base.vue
new file mode 100644
index 0000000000..e3bf7500b7
--- /dev/null
+++ b/packages/pro-components/chat/chat-thinking/_example/think-base.vue
@@ -0,0 +1,80 @@
+<template>
+  <t-chat-thinking
+    :content="{
+      title: title,
+      text: displayText,
+    }"
+    :status="status"
+    :max-height="100"
+    :collapsed="collapsed"
+    animation="moving"
+    @collapsed-change="collapsedChangeHandle"
+  />
+</template>
+
+<script>
+import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue';
+
+const fullText =
+  '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。';
+
+export default defineComponent({
+  name: 'ThinkContentDemo',
+  setup() {
+    const displayText = ref('');
+    const status = ref('pending');
+    const title = ref('正在思考中...');
+    const collapsed = ref(false);
+    const timerRef = ref(null);
+    const currentIndex = ref(0);
+    const startTimeRef = ref(Date.now());
+
+    // 打字效果函数
+    const typeEffect = () => {
+      if (currentIndex.value < fullText.length) {
+        const char = fullText[currentIndex.value];
+        currentIndex.value += 1;
+        displayText.value += char;
+        timerRef.value = setTimeout(typeEffect, 50);
+        status.value = 'streaming';
+      } else {
+        // 计算耗时并更新状态
+        const costTime = parseInt(((Date.now() - startTimeRef.value) / 1000).toString(), 10);
+        title.value = `已完成思考（耗时${costTime}秒）`;
+        status.value = 'complete';
+      }
+    };
+
+    // 折叠状态变化处理
+    const collapsedChangeHandle = (e) => {
+      collapsed.value = e.detail;
+    };
+
+    // 监听status变化
+    watch(status, (newStatus) => {
+      if (newStatus === 'complete') {
+        collapsed.value = true; // 内容结束输出后收起面板
+      }
+    });
+
+    // 组件挂载时启动打字效果
+    onMounted(() => {
+      startTimeRef.value = Date.now();
+      timerRef.value = setTimeout(typeEffect, 500);
+    });
+
+    // 组件卸载时清除定时器
+    onUnmounted(() => {
+      if (timerRef.value) clearTimeout(timerRef.value);
+    });
+
+    return {
+      displayText,
+      status,
+      title,
+      collapsed,
+      collapsedChangeHandle,
+    };
+  },
+});
+</script>
diff --git a/packages/pro-components/chat/chat-thinking/_example/think-style.vue b/packages/pro-components/chat/chat-thinking/_example/think-style.vue
new file mode 100644
index 0000000000..931e56a68f
--- /dev/null
+++ b/packages/pro-components/chat/chat-thinking/_example/think-style.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="chat-thinking-demo">
+    <t-space direction="vertical">
+      <t-chat-thinking
+        :content="{
+          title: title,
+          text: displayText,
+        }"
+        :status="status"
+        :layout="layout"
+        :animation="animation"
+      />
+    </t-space>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue';
+
+const fullText =
+  '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。';
+
+export default defineComponent({
+  name: 'ThinkContentDemo',
+  setup() {
+    const displayText = ref('');
+    const status = ref('pending');
+    const title = ref('正在思考中...');
+    const layout = ref('block');
+    const animation = ref('moving');
+    const timerRef = ref(null);
+    const currentIndex = ref(0);
+    const startTimeRef = ref(Date.now());
+
+    // 打字效果函数
+    const typeEffect = () => {
+      if (currentIndex.value < fullText.length) {
+        const char = fullText[currentIndex.value];
+        currentIndex.value += 1;
+        displayText.value += char;
+        timerRef.value = setTimeout(typeEffect, 50);
+        status.value = 'streaming';
+      } else {
+        // 计算耗时并更新状态
+        const costTime = parseInt(((Date.now() - startTimeRef.value) / 1000).toString(), 10);
+        title.value = `已完成思考（耗时${costTime}秒）`;
+        status.value = 'complete';
+      }
+    };
+
+    // 重置打字效果相关状态
+    const resetTypingEffect = () => {
+      displayText.value = '';
+      status.value = 'pending';
+      title.value = '正在思考中...';
+      currentIndex.value = 0;
+      if (timerRef.value) clearTimeout(timerRef.value);
+    };
+
+    // 布局变化处理
+    const handleLayoutChange = (val) => {
+      layout.value = val;
+    };
+
+    // 动画变化处理
+    const handleAnimationChange = (val) => {
+      animation.value = val;
+    };
+
+    // 监听layout和animation变化
+    watch([layout, animation], () => {
+      resetTypingEffect();
+      startTimeRef.value = Date.now();
+      timerRef.value = setTimeout(typeEffect, 500);
+    });
+
+    // 组件挂载时启动打字效果
+    onMounted(() => {
+      startTimeRef.value = Date.now();
+      timerRef.value = setTimeout(typeEffect, 500);
+    });
+
+    // 组件卸载时清除定时器
+    onUnmounted(() => {
+      if (timerRef.value) clearTimeout(timerRef.value);
+    });
+
+    return {
+      displayText,
+      status,
+      title,
+      layout,
+      animation,
+      handleLayoutChange,
+      handleAnimationChange,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.chat-thinking-demo {
+  padding: 16px;
+}
+</style>
diff --git a/packages/pro-components/chat/chat-thinking/_usage/index.vue b/packages/pro-components/chat/chat-thinking/_usage/index.vue
new file mode 100644
index 0000000000..6fc6a08c19
--- /dev/null
+++ b/packages/pro-components/chat/chat-thinking/_usage/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
+    <template #ChatThinking="{ configProps }">
+      <t-chat-thinking
+        :content="{
+          title: '思考中...',
+          text: '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。',
+        }"
+        v-bind="configProps"
+      />
+    </template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref } from 'vue';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'ChatThinking', value: 'ChatThinking' }];
+
+const usageCodeMap = {
+  ChatThinking: `<t-chat-thinking
+      :content="{
+        title: '思考中',
+        text: '嗯，用户问牛顿第一定律是不是适用于所有参考系。首先，我得先回忆一下牛顿第一定律的内容。牛顿第一定律，也就是惯性定律，说物体在没有外力作用时会保持静止或匀速直线运动。也就是说，保持原来的运动状态。那问题来了，这个定律是否适用于所有参考系呢？记得以前学过的参考系分惯性系和非惯性系。惯性系里，牛顿定律成立；非惯性系里，可能需要引入惯性力之类的修正。所以牛顿第一定律应该只在惯性参考系中成立，而在非惯性系中不适用，比如加速的电梯或者旋转的参考系，这时候物体会有看似无外力下的加速度，所以必须引入假想的力来解释。',
+      }"
+      v-bind="configProps"
+    />`,
+};
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>
diff --git a/packages/pro-components/chat/chat-thinking/_usage/props.json b/packages/pro-components/chat/chat-thinking/_usage/props.json
new file mode 100644
index 0000000000..8d27d2a234
--- /dev/null
+++ b/packages/pro-components/chat/chat-thinking/_usage/props.json
@@ -0,0 +1,65 @@
+[
+  {
+    "name": "layout",
+    "type": "enum",
+    "defaultValue": "block",
+    "options": [
+      {
+        "label": "block",
+        "value": "block"
+      },
+      {
+        "label": "border",
+        "value": "border"
+      }
+    ]
+  },
+  {
+    "name": "status",
+    "type": "enum",
+    "defaultValue": "pending",
+    "options": [
+      {
+        "label": "pending",
+        "value": "pending"
+      },
+      {
+        "label": "complete",
+        "value": "complete"
+      },
+      {
+        "label": "stop",
+        "value": "stop"
+      },
+      {
+        "label": "error",
+        "value": "error"
+      }
+    ]
+  },
+  {
+    "name": "maxHeight",
+    "type": "number",
+    "defaultValue": "-",
+    "description": "内容区域最大高度，超出会自动滚动"
+  },
+  {
+    "name": "animation",
+    "type": "enum",
+    "defaultValue": "moving",
+    "options": [
+      {
+        "label": "dots",
+        "value": "dots"
+      },
+      {
+        "label": "moving",
+        "value": "moving"
+      },
+      {
+        "label": "gradient",
+        "value": "gradient"
+      }
+    ]
+  }
+]
diff --git a/packages/pro-components/chat/chat-thinking/chat-thinking.md b/packages/pro-components/chat/chat-thinking/chat-thinking.md
new file mode 100644
index 0000000000..5ffec5afca
--- /dev/null
+++ b/packages/pro-components/chat/chat-thinking/chat-thinking.md
@@ -0,0 +1,13 @@
+:: BASE_DOC ::
+
+## API
+### ChatThinking Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | Object | - | 思考内容对象。TS类型：`{ text?: string; title?: string }` | N
+layout | String | block | 布局方式。可选项： block/border | N
+status | ChatMessageStatus/Function | - | 思考状态。可选项：complete/stop/error/pending | N
+maxHeight | Number | - | 内容区域最大高度，超出会自动滚动 | N
+animation | String | circle | 加载动画类型。可选项： circle/moving/gradient | N
+collapsed | Boolean | false | 是否折叠（受控） | N
\ No newline at end of file
diff --git a/packages/pro-components/chat/chat-thinking/index.ts b/packages/pro-components/chat/chat-thinking/index.ts
new file mode 100644
index 0000000000..6772fe7933
--- /dev/null
+++ b/packages/pro-components/chat/chat-thinking/index.ts
@@ -0,0 +1,11 @@
+import 'tdesign-web-components/lib/chat-message/content/thinking-content';
+import type { DefineComponent } from 'vue';
+import { omiVueify } from 'omi-vueify';
+import type { TdChatThinkContentProps } from 'tdesign-web-components/lib/chat-message/content/thinking-content';
+
+// 思考过程
+export const ChatThinking = omiVueify('t-chat-thinking-content', {
+  methodNames: [],
+}) as DefineComponent<TdChatThinkContentProps>;
+
+export default ChatThinking;
diff --git a/packages/pro-components/chat/chat.tsx b/packages/pro-components/chat/chat.tsx
deleted file mode 100644
index 51018e4ac9..0000000000
--- a/packages/pro-components/chat/chat.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { defineComponent, computed, provide, ref } from 'vue';
-import { ClearIcon } from 'tdesign-icons-vue-next';
-import { useConfig } from 'tdesign-vue-next/es/config-provider/hooks';
-import { isArray } from 'lodash-es';
-import props from './props';
-import { Divider, Popconfirm } from 'tdesign-vue-next';
-import { usePrefixClass, useTNodeJSX } from '@tdesign/shared-hooks';
-import ChatItem from './chat-item';
-import { TdChatItemProps, ScrollToBottomParams } from './type';
-
-const handleScrollToBottom = (target: HTMLDivElement, behavior?: 'auto' | 'smooth') => {
-  const currentScrollHeight = target.scrollHeight;
-  const currentClientHeight = target.clientHeight;
-
-  const innerBehavior = behavior ?? 'auto';
-  if (innerBehavior === 'auto') {
-    target.scrollTop = currentScrollHeight - currentClientHeight;
-  } else {
-    const startScrollTop = target.scrollTop;
-    const endScrollTop = currentScrollHeight - currentClientHeight;
-    const duration = 300;
-    const step = (endScrollTop - startScrollTop) / duration;
-    let startTime: number | undefined;
-    // 平滑地修改scrollTop值
-    const animateScroll = (time: number) => {
-      if (!startTime) {
-        startTime = time;
-      }
-      const elapsed = time - startTime;
-      const top = Math.min(endScrollTop, startScrollTop + elapsed * step);
-      target.scrollTop = top;
-      if (top < endScrollTop) {
-        requestAnimationFrame(animateScroll);
-      }
-    };
-
-    requestAnimationFrame(animateScroll);
-  }
-};
-
-export default defineComponent({
-  name: 'TChat',
-  props,
-  emits: ['clear', 'scroll'],
-  setup(props, { emit, expose, slots }) {
-    const COMPONENT_NAME = usePrefixClass('chat');
-    const { globalConfig } = useConfig('chat');
-    const renderTNodeJSX = useTNodeJSX();
-    provide('textLoading', props.textLoading);
-    provide('animation', props.animation);
-    provide('reverse', props.reverse);
-    const classes = computed(() => {
-      return [
-        COMPONENT_NAME.value,
-        {
-          [`${COMPONENT_NAME.value}--normal`]: props.layout === 'both',
-        },
-      ];
-    });
-    // 默认反转布局
-    const listClasses = computed(() => {
-      return [
-        `${COMPONENT_NAME.value}__list`,
-        {
-          [`${COMPONENT_NAME.value}__list--reverse`]: props.reverse,
-        },
-      ];
-    });
-    const renderBody = () => {
-      /**
-       * 1. 两种方式获取要渲染的 list
-       *  a. props 传 data
-       *  b. slots t-chat-item
-       * a 优先级更高
-       */
-      const data = renderTNodeJSX('data');
-      if (isArray(data) && data.length > 0) {
-        const isLoading = (index: number) => {
-          return (props.reverse ? index === 0 : index === data.length - 1) && props.textLoading;
-        };
-        const isReasoningLoading = (index: number) => {
-          return (props.reverse ? index === 0 : index === data.length - 1) && props.isStreamLoad;
-        };
-        // 判断content是否为插槽，如果是插槽，则关闭reasoning默认渲染
-        const setReasoning = (item: TdChatItemProps) => {
-          return slots.content ? false : item.reasoning;
-        };
-        return data.map((item: TdChatItemProps, index: number) => (
-          <ChatItem
-            avatar={item.avatar}
-            name={item.name}
-            role={item.role}
-            datetime={item.datetime}
-            content={item.content}
-            reasoning={setReasoning(item)}
-            reasoningLoading={isReasoningLoading(index)}
-            text-loading={isLoading(index)}
-            itemIndex={index}
-            animation={props.animation}
-            v-slots={{
-              actions: () =>
-                renderTNodeJSX('actions', {
-                  params: { item, index },
-                }),
-              name: () => renderTNodeJSX('name', { params: { item, index } }),
-              avatar: () => renderTNodeJSX('avatar', { params: { item, index } }),
-              datetime: () => renderTNodeJSX('datetime', { params: { item, index } }),
-              content: () => renderTNodeJSX('content', { params: { item, index } }),
-            }}
-          />
-        ));
-      } else {
-        return renderTNodeJSX('default');
-      }
-    };
-    const clearConfirm = (context: { e: MouseEvent }) => {
-      emit('clear', context);
-    };
-    const defaultClearHistory = (
-      <Popconfirm content={globalConfig.value.confirmClearHistory} onConfirm={clearConfirm}>
-        <Divider class="clear-btn">
-          <ClearIcon size="14px" />
-          <span class="clear-btn-text">{globalConfig.value.clearHistoryBtnText}</span>
-        </Divider>
-      </Popconfirm>
-    );
-    const showFooter = computed(() => renderTNodeJSX('footer'));
-    const chatBoxRef = ref<HTMLDivElement>();
-    // 滚动到底部
-    const scrollToBottom = (data: ScrollToBottomParams) => {
-      if (!chatBoxRef.value) return;
-      const { behavior = 'auto' } = data;
-      handleScrollToBottom(chatBoxRef.value, behavior);
-    };
-    const handleScroll = (e: Event) => {
-      emit('scroll', {
-        e,
-      });
-    };
-    expose({
-      scrollToBottom,
-    });
-    // clearHistory为true时，清空历史记录显示
-    // return里的props是响应式
-    // 倒序渲染不影响清空历史的位置
-    return () => (
-      <div class={classes.value}>
-        <div class={listClasses.value} ref={chatBoxRef} onScroll={handleScroll}>
-          {props.reverse && <div class="place-holder"></div>}
-          {props.reverse && props.clearHistory && renderTNodeJSX('clearHistory', defaultClearHistory)}
-          {renderBody()}
-          {!props.reverse && props.clearHistory && renderTNodeJSX('clearHistory', defaultClearHistory)}
-        </div>
-        {showFooter.value && <div class={`${COMPONENT_NAME.value}__footer`}>{showFooter.value}</div>}
-      </div>
-    );
-  },
-});
diff --git a/packages/pro-components/chat/chatbot/_example/agent.vue b/packages/pro-components/chat/chatbot/_example/agent.vue
new file mode 100644
index 0000000000..716be84277
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/agent.vue
@@ -0,0 +1,208 @@
+<template>
+  <div style="height: 600px">
+    <t-chatbot
+      ref="chatRef"
+      :style="{ height: '100%' }"
+      :default-messages="mockData"
+      :message-props="messageProps"
+      :sender-props="senderProps"
+      :chat-service-config="chatServiceConfig"
+      @message-change="handleMessageChange"
+    >
+      <template v-for="msg in mockMessage" :key="msg.id">
+        <template v-for="(item, index) in msg.content" :key="`${msg.id}-${index}`">
+          <div v-if="item.type === 'agent'" :slot="`${msg.id}-${item.type}-${index}`">
+            <div style="padding-left: 10px; margin-top: 14px">
+              <Timeline mode="same" theme="dot">
+                <TimelineItem v-for="step in item.content.steps" :key="step.agent_id" label="">
+                  <template #dot>
+                    <CheckCircleFilledIcon
+                      :size="'medium'"
+                      :color="step?.status === 'finish' ? 'var(--td-success-color)' : '#ccc'"
+                      class="t-timeline-item__dot-content"
+                    />
+                  </template>
+                  <div class="step">
+                    <div class="title">{{ step.step }}</div>
+                    <template v-if="step.tasks">
+                      <div v-for="(task, taskIndex) in step.tasks" :key="`${step.agent_id}_task_${taskIndex}`">
+                        <div :class="task.type">{{ task.text }}</div>
+                      </div>
+                    </template>
+                  </div>
+                </TimelineItem>
+              </Timeline>
+            </div>
+          </div>
+        </template>
+      </template>
+    </t-chatbot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import type {
+  TdChatMessageConfig,
+  AIMessageContent,
+  ChatRequestParams,
+  ChatServiceConfig,
+  ChatMessagesData,
+  SSEChunkData,
+} from '@tdesign-vue-next/chat';
+import { CheckCircleFilledIcon } from 'tdesign-icons-vue-next';
+import { Timeline, TimelineItem } from 'tdesign-vue-next';
+
+// 默认初始化消息
+const mockData: ChatMessagesData[] = [
+  {
+    id: '123',
+    role: 'assistant',
+    status: 'complete',
+    content: [
+      {
+        type: 'text',
+        data: '欢迎使用TDesign Agent家庭活动策划助手，请给我布置任务吧～',
+      },
+    ],
+  },
+];
+
+const chatRef = ref(null);
+const mockMessage = ref<ChatMessagesData[]>(mockData);
+
+// 消息属性配置
+const messageProps: TdChatMessageConfig = {
+  user: {
+    variant: 'base',
+    placement: 'right',
+  },
+  assistant: {
+    placement: 'left',
+  },
+};
+
+// 聊天服务配置
+const chatServiceConfig: ChatServiceConfig = {
+  endpoint: `https://1257786608-9i9j1kpa67.ap-guangzhou.tencentscf.com/sse/agent`,
+  stream: true,
+  onComplete: (aborted: boolean, params: RequestInit) => {
+    console.log('onComplete', aborted, params);
+  },
+  onError: (err: Error | Response) => {
+    console.error('Chatservice Error:', err);
+  },
+  onAbort: async () => {},
+  onMessage: (chunk: SSEChunkData): AIMessageContent => {
+    const { type, ...rest } = chunk.data;
+    switch (type) {
+      case 'text':
+        return {
+          type: 'markdown',
+          data: rest?.msg || '',
+        };
+      case 'agent':
+        return {
+          type: 'agent',
+          ...rest,
+        };
+      default:
+        return {
+          ...chunk.data,
+          data: { ...chunk.data.content },
+        };
+    }
+  },
+  onRequest: (innerParams: ChatRequestParams) => {
+    const { prompt } = innerParams;
+    return {
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+      body: JSON.stringify({
+        uid: 'agent_uid',
+        prompt,
+      }),
+    };
+  },
+};
+
+// 消息变更处理
+const handleMessageChange = (e: CustomEvent<ChatMessagesData[]>) => {
+  mockMessage.value = e.detail;
+};
+
+const senderProps = ref({
+  defaultValue: '请帮我做一个5岁儿童生日聚会的规划',
+});
+
+// 注册合并策略
+onMounted(() => {
+  if (!chatRef.value) return;
+
+  chatRef.value.registerMergeStrategy('agent', (newChunk, existing) => {
+    // const updated = { ...existing };
+    const updated = JSON.parse(JSON.stringify(existing));
+    console.log(updated, 'updated');
+
+    if (!updated.content.steps) updated.content.steps = [];
+
+    const stepIndex = updated.content.steps.findIndex((step) => step.agent_id === newChunk.content.agent_id);
+
+    if (stepIndex === -1) return updated;
+
+    const step = {
+      ...updated.content.steps[stepIndex],
+      tasks: [...(updated.content.steps[stepIndex].tasks || [])],
+      status: newChunk.state === 'finish' ? 'finish' : 'pending',
+    };
+
+    if (newChunk.state === 'command') {
+      step.tasks.push({
+        type: 'command',
+        text: newChunk.content.text,
+      });
+    } else if (newChunk.state === 'result') {
+      const resultTaskIndex = step.tasks.findIndex((task) => task.type === 'result');
+      if (resultTaskIndex >= 0) {
+        step.tasks[resultTaskIndex].text += newChunk.content.text;
+      } else {
+        step.tasks.push({
+          type: 'result',
+          text: newChunk.content.text,
+        });
+      }
+    }
+    console.log(step, 'step');
+
+    updated.content.steps[stepIndex] = step;
+    return updated;
+  });
+});
+</script>
+
+<style scoped>
+.step {
+  color: var(--td-text-color-secondary);
+}
+
+.title {
+  margin-bottom: 8px;
+}
+
+.command,
+.result {
+  font-size: 14px;
+  line-height: 22px;
+  margin: 6px 0;
+}
+
+.command {
+  background-color: var(--td-bg-color-secondarycontainer);
+  border-radius: 12px;
+  display: inline-block; /* 内联块级元素使宽度自适应内容 */
+  padding: 4px 8px;
+  white-space: nowrap;
+  width: fit-content; /* 宽度精确匹配内容 */
+}
+</style>
diff --git a/packages/pro-components/chat/chatbot/_example/agui.vue b/packages/pro-components/chat/chatbot/_example/agui.vue
new file mode 100644
index 0000000000..68fbba7fc5
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/agui.vue
@@ -0,0 +1,219 @@
+<template>
+  <div style="height: 600px; display: flex; flex-direction: column">
+    <t-chat ref="listRef" style="width: 100%; flex: 1">
+      <t-chat-message
+        v-for="(message, idx) in messages"
+        :key="message.id"
+        v-bind="messageProps[message.role]"
+        :role="message.role"
+        :content="message.content"
+        allow-content-segment-custom
+      >
+        <template v-for="(item, index) in message.content" :key="index">
+          <template v-if="item.type === 'reasoning'">
+            <template v-for="(subItem, subIndex) in item.data" :key="`toolcall-${index}-${subIndex}`">
+              <div :slot="`reasoning-toolcall-${subIndex}`" class="toolcall-wrapper">
+                <CustomToolCallRenderer
+                  v-if="subItem.type === 'toolcall'"
+                  :tool-call="subItem.data"
+                  :status="subItem.status"
+                />
+              </div>
+            </template>
+          </template>
+        </template>
+
+        <template #actionbar>
+          <t-chat-actionbar
+            v-if="isAIMessage(message) && message.status === 'complete'"
+            :action-bar="getChatActionBar(idx === messages.length - 1)"
+            :content="getMessageContentForCopy(message)"
+            :comment="message.role === 'assistant' ? message.comment : ''"
+            @actions="actionHandler"
+          />
+        </template>
+      </t-chat-message>
+    </t-chat>
+
+    <t-chat-sender
+      ref="inputRef"
+      v-model="inputValue"
+      placeholder="请输入内容"
+      :loading="senderLoading"
+      @change="inputChangeHandler"
+      @send="sendHandler"
+      @stop="stopHandler"
+    >
+      <template #suffix="{ renderPresets }">
+        <!-- 在这里可以进行自由的组合使用，或者新增预设 -->
+        <!-- 不需要附件操作的使用方式 -->
+        <component :is="renderPresets([])" />
+      </template>
+    </t-chat-sender>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { ref, computed } from 'vue';
+import {
+  type TdChatMessageConfig,
+  type ChatRequestParams,
+  type ChatMessagesData,
+  type TdChatActionsName,
+  type TdChatListApi,
+  type TdChatSenderApi,
+  isAIMessage,
+  getMessageContentForCopy,
+  AGUIAdapter,
+  useChat,
+} from '@tdesign-vue-next/chat';
+import { MessagePlugin } from 'tdesign-vue-next';
+import CustomToolCallRenderer from './components/Toolcall.vue';
+
+const listRef = ref<TdChatListApi | null>(null);
+const inputRef = ref<TdChatSenderApi | null>(null);
+const inputValue = ref<string>('AG-UI协议的作用是什么');
+const loadingHistory = ref<boolean>(false);
+
+const { chatEngine, messages, status } = useChat({
+  defaultMessages: [],
+  // 聊天服务配置
+  chatServiceConfig: {
+    // 对话服务地址
+    endpoint: `https://1257786608-9i9j1kpa67.ap-guangzhou.tencentscf.com/sse/agui-simple`,
+    // 开启agui协议解析支持
+    protocol: 'agui',
+    stream: true,
+    onStart: (chunk) => {
+      console.log('onStart', chunk);
+    },
+    // 流式对话结束（aborted为true时，表示用户主动结束对话，params为请求参数）
+    onComplete: (aborted: boolean, params: RequestInit, event) => {
+      console.log('onComplete', aborted, params, event);
+    },
+    // 流式对话过程中出错业务自定义行为
+    onError: (err: Error | Response) => {
+      console.error('Chatservice Error:', err);
+    },
+    // 流式对话过程中用户主动结束对话业务自定义行为
+    onAbort: async () => {},
+    // 自定义请求参数
+    onRequest: (innerParams: ChatRequestParams) => {
+      const { prompt } = innerParams;
+      return {
+        headers: {
+          'X-Requested-With': 'XMLHttpRequest',
+        },
+        body: JSON.stringify({
+          uid: 'agent_uid',
+          prompt,
+        }),
+      };
+    },
+  },
+});
+
+const senderLoading = computed(() => {
+  if (status.value === 'pending' || status.value === 'streaming') {
+    return true;
+  }
+  return false;
+});
+
+// 加载历史消息
+const loadHistoryMessages = async () => {
+  loadingHistory.value = true;
+  try {
+    const response = await fetch(`http://127.0.0.1:3000/api/conversation/history?type=simple`);
+    const result = await response.json();
+    if (result.success && result.data) {
+      const messages = AGUIAdapter.convertHistoryMessages(result.data);
+      chatEngine.value?.setMessages(messages);
+      listRef.value?.scrollToBottom();
+    }
+  } catch (error) {
+    console.error('加载历史消息出错:', error);
+    MessagePlugin.error('加载历史消息出错');
+  } finally {
+    loadingHistory.value = false;
+  }
+};
+
+// 清空消息
+const clearMessages = () => {
+  chatEngine.value?.clearMessages();
+  MessagePlugin.success('已清空消息');
+};
+
+// 消息属性配置
+const messageProps: TdChatMessageConfig = {
+  user: {
+    variant: 'base',
+    placement: 'right',
+  },
+  assistant: {
+    placement: 'left',
+    // 内置的消息渲染配置
+    chatContentProps: {
+      thinking: {
+        maxHeight: 300,
+      },
+      reasoning: {
+        maxHeight: 300,
+        defaultCollapsed: false,
+      },
+    },
+  },
+};
+
+const getChatActionBar = (isLast: boolean): TdChatActionsName[] => {
+  let filterActions: TdChatActionsName[] = ['replay', 'good', 'bad', 'copy'];
+  if (!isLast) {
+    // 只有最后一条AI消息才能重新生成
+    filterActions = filterActions.filter((item) => item !== 'replay');
+  }
+  return filterActions;
+};
+
+const actionHandler = (name: string, data?: any) => {
+  switch (name) {
+    case 'replay': {
+      chatEngine.value?.regenerateAIMessage();
+      return;
+    }
+    default:
+      console.log('触发action', name, 'data', data);
+  }
+};
+
+const sendUserMessage = async (requestParams: ChatRequestParams) => {
+  await chatEngine.value?.sendUserMessage(requestParams);
+  listRef.value?.scrollToBottom();
+};
+
+// 输入变更处理
+const inputChangeHandler = (value: string) => {
+  inputValue.value = value;
+};
+
+// 发送处理
+const sendHandler = async (params) => {
+  if (senderLoading.value) {
+    MessagePlugin.error('回答输出中，请稍后操作或点击停止回答');
+  } else {
+    await sendUserMessage({ prompt: params });
+    inputValue.value = '';
+  }
+};
+
+// 停止处理
+const stopHandler = () => {
+  chatEngine.value?.abortChat();
+};
+</script>
+
+<style scoped>
+.toolcall-wrapper {
+  margin: 8px 0;
+}
+</style>
diff --git a/packages/pro-components/chat/chatbot/_example/basic.vue b/packages/pro-components/chat/chatbot/_example/basic.vue
new file mode 100644
index 0000000000..17f02ebd60
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/basic.vue
@@ -0,0 +1,262 @@
+<template>
+  <div style="height: 600px">
+    <t-chatbot
+      ref="chatRef"
+      :default-messages="mockData"
+      :message-props="messageProps"
+      :sender-props="senderProps"
+      :chat-service-config="chatServiceConfig"
+    >
+      <template #sender-footer-prefix>
+        <div class="model-select">
+          <t-tooltip v-model:visible="allowToolTip" content="切换模型" trigger="hover">
+            <t-select
+              v-model="selectValue"
+              :options="selectOptions"
+              value-type="object"
+              @focus="allowToolTip.value = false"
+            ></t-select>
+          </t-tooltip>
+          <t-button class="check-box" :class="{ 'is-active': isChecked }" variant="outline" @click="checkClick">
+            <SystemSumIcon />
+            <span>深度思考</span>
+          </t-button>
+        </div>
+      </template>
+    </t-chatbot>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { ref, watch } from 'vue';
+import { SystemSumIcon } from 'tdesign-icons-vue-next';
+import {
+  type SSEChunkData,
+  type AIMessageContent,
+  type TdChatMessageConfigItem,
+  type ChatRequestParams,
+  type ChatMessagesData,
+  type ChatServiceConfig,
+  type TdChatbotApi,
+} from '@tdesign-vue-next/chat';
+
+// 默认初始化消息
+const mockData: ChatMessagesData[] = [
+  {
+    id: '123',
+    role: 'assistant',
+    content: JSON.parse(
+      JSON.stringify([
+        {
+          type: 'text',
+          status: 'complete',
+          data: '欢迎使用TDesign Chatbot智能助手，你可以这样问我：',
+        },
+        {
+          type: 'suggestion',
+          status: 'complete',
+          data: [
+            {
+              title: '南极的自动提款机叫什么名字',
+              prompt: '南极的自动提款机叫什么名字？',
+            },
+            {
+              title: '南极自动提款机在哪里',
+              prompt: '南极自动提款机在哪里',
+            },
+          ],
+        },
+      ]),
+    ),
+  },
+];
+
+const allowToolTip = ref(false);
+
+const selectOptions = [
+  {
+    label: '默认模型',
+    value: 'default',
+  },
+  {
+    label: 'Deepseek',
+    value: 'deepseek-r1',
+  },
+  {
+    label: '混元',
+    value: 'hunyuan',
+  },
+];
+const selectValue = ref({
+  label: '默认模型',
+  value: 'default',
+});
+const isChecked = ref(false);
+const checkClick = () => {
+  isChecked.value = !isChecked.value;
+};
+
+const chatRef = ref<TdChatbotApi | null>(null);
+const activeR1 = ref(false);
+const activeSearch = ref(false);
+const reqParamsRef = ref({ think: false, search: false });
+// 消息属性配置
+const messageProps = (msg: ChatMessagesData): TdChatMessageConfigItem => {
+  const { role, content } = msg;
+  const thinking = content.find((item) => item.type === 'thinking');
+  if (role === 'user') {
+    return {
+      variant: 'base',
+      placement: 'right',
+      avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+    };
+  }
+  if (role === 'assistant') {
+    return {
+      placement: 'left',
+      actions: ['replay', 'copy', 'good', 'bad'],
+      handleActions: {
+        good: async ({ message, active }) => {
+          console.log('点赞', message, active);
+        },
+        bad: async ({ message, active }) => {
+          console.log('点踩', message, active);
+        },
+        replay: ({ message, active }) => {
+          console.log('自定义重新回复', message, active);
+          chatRef.value?.regenerate();
+        },
+        searchItem: ({ content, event }) => {
+          event.preventDefault();
+          console.log('点击搜索条目', content);
+        },
+        suggestion: ({ content }) => {
+          console.log('点击建议问题', content);
+          chatRef.value?.addPrompt(content.prompt);
+        },
+      },
+      chatContentProps: {
+        thinking: {
+          maxHeight: 100,
+          layout: 'block',
+          collapsed: thinking?.status === 'complete',
+        },
+      },
+    };
+  }
+  return {};
+};
+
+// 聊天服务配置
+const chatServiceConfig: ChatServiceConfig = ref({
+  endpoint: `https://1257786608-9i9j1kpa67.ap-guangzhou.tencentscf.com/sse/normal`,
+  stream: true,
+  onComplete: (aborted: boolean, params: RequestInit) => {
+    console.log('onComplete', aborted, params);
+  },
+  onError: (err: Error | Response) => {
+    console.error('Chatservice Error:', err);
+  },
+  onAbort: async () => {},
+  onMessage: (chunk: SSEChunkData): AIMessageContent => {
+    const { type, ...rest } = chunk.data as any;
+    switch (type) {
+      case 'search':
+        return {
+          type: 'search',
+          data: {
+            title: rest.title || `搜索到${rest?.docs?.length}条内容`,
+            references: rest?.content, // 深度克隆
+          },
+        };
+      case 'think':
+        return {
+          type: 'thinking',
+          status: /耗时/.test(rest?.title) ? 'complete' : 'streaming',
+          data: {
+            title: rest.title || '深度思考中',
+            text: rest.content || '', // 深度克隆
+          },
+        };
+      case 'text':
+        return {
+          type: 'markdown',
+          data: rest?.msg || '',
+        };
+      default:
+        return { type: 'text', data: '' };
+    }
+  },
+  onRequest: (innerParams: ChatRequestParams) => {
+    const { prompt } = innerParams;
+    return {
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+      body: JSON.stringify({
+        uid: 'tdesign-chat',
+        prompt,
+        ...reqParamsRef.value,
+      }),
+    };
+  },
+});
+
+// 监听状态变化
+watch(
+  [activeR1, activeSearch],
+  ([newR1, newSearch]) => {
+    reqParamsRef.value = {
+      think: newR1,
+      search: newSearch,
+    };
+  },
+  { immediate: true },
+);
+
+// 发送者属性
+const senderProps = {
+  placeholder: '有问题，尽管问～ Enter 发送，Shift+Enter 换行',
+};
+</script>
+<style lang="less">
+t-chatbot {
+  .model-select {
+    display: flex;
+    align-items: center;
+    .t-select {
+      width: 112px;
+      height: var(--td-comp-size-m);
+      margin-right: var(--td-comp-margin-s);
+      .t-input {
+        border-radius: 32px;
+        padding: 0 15px;
+      }
+      .t-input.t-is-focused {
+        box-shadow: none;
+      }
+    }
+    .check-box {
+      width: 112px;
+      height: var(--td-comp-size-m);
+      border-radius: 32px;
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      .t-button__text {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span {
+          margin-left: var(--td-comp-margin-s);
+        }
+      }
+    }
+    .check-box.is-active {
+      border: 1px solid var(--td-brand-color-focus);
+      background: var(--td-brand-color-light);
+      color: var(--td-text-color-brand);
+    }
+  }
+}
+</style>
diff --git a/packages/pro-components/chat/chatbot/_example/chatbot-base.vue b/packages/pro-components/chat/chatbot/_example/chatbot-base.vue
new file mode 100644
index 0000000000..c6944600df
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/chatbot-base.vue
@@ -0,0 +1,455 @@
+<!-- eslint-disable vue/attribute-hyphenation -->
+<template>
+  <t-chatbot
+    ref="chatRef"
+    style="display: block; height: 80vh"
+    :defaultMessages="mockData"
+    :messageProps="messageProps"
+    :senderProps="senderProps"
+    :chatServiceConfig="mockModels"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+
+// Mock data and functions from the original file
+const mockData = [
+  {
+    id: '223',
+    role: 'user',
+    status: 'complete',
+    content: [
+      {
+        type: 'text',
+        data: '南极的自动提款机叫什么名字？',
+      },
+    ],
+  },
+  {
+    id: '123',
+    role: 'assistant',
+    status: 'complete',
+    content: [
+      {
+        type: 'search',
+        status: 'complete',
+        data: {
+          title: '共找到10个相关内容',
+          references: [
+            {
+              title: '10本高口碑悬疑推理小说,情节高能刺激,看得让人汗毛直立!',
+              url: 'http://mp.weixin.qq.com/s?src=11&timestamp=1742897036&ver=5890&signature=USoIrxrKY*KWNmBLZTGo-**yUaxdhqowiMPr0wsVhH*dOUB3GUjYcBVG86Dyg7-TkQVrr0efPvrqSa1GJFjUQgQMtZFX5wxjbf8TcWkoUxOrTA7NsjfNQQoVY5CckmJj&new=1',
+              type: 'mp',
+            },
+            {
+              title: '悬疑小说下载:免费畅读最新悬疑大作!',
+              url: 'http://mp.weixin.qq.com/s?src=11&timestamp=1742897036&ver=5890&signature=UCc6xbIGsYEyfytL2IC6b3vXlaBcbEJCi98ZVK38vdoFEEulJ3J-95bNkE8Fiv5-pJ5iH75DfJAz6kGX2TSscSisBNW1u6nCPbP-Ue4HxCAfjU8DpUwaOXkFz3*T71rU&new=1',
+              type: 'mp',
+            },
+            {
+              title: '悬疑推理类小说五本 22',
+              url: 'http://mp.weixin.qq.com/s?src=11&timestamp=1742897036&ver=5890&signature=Fh*UdzlSG9IgB8U4n9t5qSWHA73Xat54ReUUgCZ5hUgW8QyEwPwoBFQzrfsWP9UCN0T6Zpfg5rMYSqKvrkP6Njp-ggxnym8YOSbDYLFB4uqMH14FDcq7*aAmN*8C3aSL&new=1',
+              type: 'mp',
+            },
+            {
+              title: '悬疑推理类小说五本 25',
+              url: 'http://mp.weixin.qq.com/s?src=11&timestamp=1742897036&ver=5890&signature=Fh*UdzlSG9IgB8U4n9t5qSWHA73Xat54ReUUgCZ5hUiBG0KD-41hoa2HJm1CC7*ueTzp3loaKojnUO1JR3KD7bh1EgWwTmOIDum3aYtrN1EYDXF9jTh1KNJsalAXHeQI&new=1',
+              type: 'mp',
+            },
+            // {
+            //   title: '百度',
+            //   icon: 'https://vfiles.gtimg.cn/wupload/creator_center.assets/45d68c02_u7V4BL0GqFgDFAwvzR345RxrLo3Gdv5m.png',
+            // },
+            // {
+            //   title: '1点',
+            //   icon: 'https://vfiles.gtimg.cn/wupload/creator_center.assets/45d68c02_LMDUO7DWP3cXGdOauIE8adfCwYWtvIqJ.png',
+            // },
+            // {
+            //   title: '搜狐',
+            //   icon: 'https://vfiles.gtimg.cn/wupload/creator_center.assets/45d68c02_GZEZ-r0UNhXci32OHT4BVjork53AlucQ.png',
+            // },
+          ],
+        },
+      },
+      {
+        type: 'thinking',
+        status: 'complete',
+        data: {
+          title: '思考完成（耗时3s）',
+          text: 'mock分析语境，首先，Omi是一个基于Web Components的前端框架，和Vue的用法可能不太一样。Vue里的v-html指令用于将字符串作为HTML渲染，防止XSS攻击的话需要信任内容。Omi有没有类似的功能呢？mock分析语境，首先，Omi是一个基于Web Components的前端框架，和Vue的用法可能不太一样。Vue里的v-html指令用于将字符串作为HTML渲染，防止XSS攻击的话需要信任内容。Omi有没有类似的功能呢？',
+        },
+      },
+      {
+        type: 'text',
+        data: '它叫 [McMurdo Station ATM](#promptId=atm)，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
+      },
+      {
+        type: 'suggestion',
+        status: 'complete',
+        data: [
+          {
+            title: '《六姊妹》中有哪些观众喜欢的剧情点？',
+            prompt: '《六姊妹》中有哪些观众喜欢的剧情点？',
+          },
+          {
+            title: '两部剧在演员表现上有什么不同？',
+            prompt: '两部剧在演员表现上有什么不同？',
+          },
+          {
+            title: '《六姊妹》有哪些负面的评价？',
+            prompt: '《六姊妹》有哪些负面的评价？',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '789',
+    role: 'user',
+    status: 'complete',
+    content: [
+      {
+        type: 'text',
+        data: '分析下以下内容，总结一篇广告策划方案',
+      },
+      {
+        type: 'attachment',
+        data: [
+          {
+            fileType: 'doc',
+            name: 'demo.docx',
+            url: 'https://tdesign.gtimg.com/site/demo.docx',
+            size: 12312,
+          },
+          {
+            fileType: 'pdf',
+            name: 'demo2.pdf',
+            url: 'https://tdesign.gtimg.com/site/demo.pdf',
+            size: 34333,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '34234',
+    status: 'error',
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        data: '出错了',
+      },
+    ],
+  },
+  {
+    id: '7389',
+    role: 'user',
+    status: 'complete',
+    content: [
+      {
+        type: 'text',
+        data: '这张图里的帅哥是谁',
+      },
+      {
+        type: 'attachment',
+        data: [
+          {
+            fileType: 'image',
+            name: 'avatar.jpg',
+            size: 234234,
+            url: 'https://tdesign.gtimg.com/site/avatar.jpg',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '3242',
+    role: 'assistant',
+    status: 'complete',
+    comment: 'good',
+    content: [
+      {
+        type: 'markdown',
+        data: '**tdesign** 团队的 *核心开发者*  `uyarnchen` 是也。',
+      },
+    ],
+  },
+];
+
+const defaultChunkParser = (chunk) => {
+  try {
+    return handleStructuredData(chunk);
+  } catch (err) {
+    console.error('Parsing error:', err);
+    return {
+      type: 'text',
+      data: '内容解析错误',
+    };
+  }
+};
+
+function handleStructuredData(chunk) {
+  if (!chunk?.data || typeof chunk === 'string') {
+    return {
+      type: 'markdown',
+      data: String(chunk),
+    };
+  }
+
+  const { type, ...rest } = chunk.data;
+  switch (type) {
+    case 'error':
+      return {
+        type: 'text',
+        status: 'error',
+        data: rest.content,
+      };
+    case 'search':
+      return {
+        type: 'search',
+        status: (status) => (rest.content ? status : 'complete'),
+        data: {
+          title: rest.title,
+          references: rest.content,
+        },
+      };
+    case 'think':
+      if (rest.step === 'web_search' && rest.docs.length > 0) {
+        return {
+          type: 'search',
+          status: 'complete',
+          data: {
+            title: `共找到${rest.docs.length}个相关内容`,
+            references: rest.docs,
+          },
+        };
+      }
+      return {
+        type: 'thinking',
+        status: () => (/耗时/.test(rest.title) ? 'complete' : undefined),
+        data: {
+          title: rest.title || '思考中...',
+          text: rest.content || '',
+        },
+      };
+
+    case 'text': {
+      return {
+        type: 'markdown',
+        data: rest?.msg || '',
+      };
+    }
+
+    case 'image': {
+      return {
+        type: 'image',
+        data: { ...JSON.parse(chunk.data.content) },
+      };
+    }
+
+    case 'suggestion':
+      return {
+        type: 'suggestion',
+        // title: '是不是想提问：',
+        data: extractMarkdownLinks(rest.content),
+      };
+
+    case 'weather': {
+      return {
+        type: 'weather',
+        data: {
+          temp: 1,
+          city: '北京',
+          conditions: '多云',
+        },
+      };
+    }
+
+    default:
+      return {
+        type: 'text',
+        data: chunk?.event === 'complete' ? '' : JSON.stringify(chunk.data),
+      };
+  }
+}
+
+const mockModels = ref({
+  endpoint: 'https://1257786608-9i9j1kpa67.ap-guangzhou.tencentscf.com/sse/normal',
+  stream: true,
+  onComplete: (isAborted) => {
+    console.log('onComplete', isAborted);
+  },
+  onError: (err) => {
+    console.log('onError', err);
+  },
+  onMessage: defaultChunkParser,
+  onRequest: (params) => {
+    const { prompt, messageID, attachments = [] } = params;
+    return {
+      headers: {
+        'X-Mock-Key': 'test123',
+        'Content-Type': 'text/event-stream',
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+      body: JSON.stringify({
+        session_id: 'session_123456789',
+        search: true,
+        think: true,
+        question: [
+          {
+            id: messageID,
+            content: prompt,
+            create_at: Date.now(),
+            role: 'user',
+          },
+        ],
+        attachments,
+        is_search_net: 1,
+      }),
+    };
+  },
+});
+
+const attachmentProps = ref({
+  onFileSelect: async (files) => {
+    const attachments = [];
+    for (const file of files) {
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+        const response = await fetch(`http://localhost:3000/file/upload`, {
+          method: 'POST',
+          body: formData,
+        });
+        if (!response.ok) continue;
+        const data = await response.json();
+        const { name, size, type } = file;
+        attachments.push({
+          url: data.result.cdnurl,
+          status: 'success',
+          name,
+          type,
+          size,
+          raw: file,
+        });
+      } catch (error) {
+        console.error(`${file.name} 上传失败:`, error);
+        // 可选：记录失败文件信息到错误日志
+      }
+    }
+    return attachments;
+  },
+  onFileRemove: () => {},
+});
+
+const resourceLinkPlugin = (md) => {
+  // 保存原始链接渲染函数
+  const defaultRender = md.renderer.rules.link_open?.bind(md.renderer);
+  // 覆盖链接渲染规则
+  md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+    const token = tokens[idx];
+    const href = token.attrGet('href') || '';
+    const id = href.split('#promptId=')[1];
+    // 识别特殊资源链接
+    if (href.startsWith('#promptId')) {
+      // 返回自定义DOM结构
+      // return `<a part="resource-link"
+      //   onclick="this.dispatchEvent(new CustomEvent('resource-link-click', {
+      //     bubbles: true,
+      //     composed: true,
+      //     detail: { resourceId: '${id}'}
+      //   }))">`;
+      return `<a part="resource-link" data-resource="${id}">`;
+    }
+    // 普通链接保持默认渲染
+    return defaultRender(tokens, idx, options, env, self);
+  };
+};
+
+const chatRef = ref(null);
+const messageProps = {
+  // user: {
+  //   avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+  // },
+  assistant: {
+    // avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+    actions: ['replay', 'copy', 'good', 'bad'],
+    onActions: {
+      replay: (data, callback) => {
+        console.log('自定义重新回复', data);
+        callback?.();
+      },
+      good: (data) => {
+        console.log('点赞', data);
+      },
+      suggestion: ({ prompt }) => {
+        chatRef.value.addPrompt(prompt);
+      },
+      searchItem: ({ content, event }) => {
+        event.preventDefault();
+        event.stopPropagation();
+        console.log('searchItem', content);
+      },
+    },
+    chatContentProps: {
+      search: {
+        expandable: true,
+      },
+      thinking: {
+        maxHeight: 100,
+        layout: 'border',
+      },
+      markdown: {
+        pluginConfig: [resourceLinkPlugin],
+      },
+    },
+  },
+};
+
+const senderProps = {
+  actions: true,
+  attachmentProps,
+  placeholder: '请输入问题',
+};
+
+let clickHandler = null;
+const findTargetElement = (event, selector) => {
+  // 统一处理选择器输入格式（支持字符串或数组）
+  const selectors = Array.isArray(selector) ? selector : selector.split(',').map((s) => s.trim());
+
+  // 获取事件穿透路径（包含Shadow DOM内部元素）
+  const eventPath = event.composedPath();
+
+  // 遍历路径查找目标元素
+  for (const el of eventPath) {
+    // 类型安全判断 + 多选择器匹配
+    if (el instanceof HTMLElement) {
+      // 检查是否匹配任意一个选择器
+      if (selectors.some((sel) => el.matches?.(sel))) {
+        return el; // 找到即返回
+      }
+    }
+  }
+
+  return null; // 未找到返回null
+};
+onMounted(() => {
+  clickHandler = (e) => {
+    const target = findTargetElement(e, 'a[data-resource]');
+    if (target) {
+      console.log('捕获资源链接点击:', target.dataset);
+    }
+  };
+  document.addEventListener('mousedown', clickHandler);
+});
+
+onUnmounted(() => {
+  // 移除全局点击监听
+  if (clickHandler) {
+    document.removeEventListener('mousedown', clickHandler);
+  }
+});
+</script>
diff --git a/packages/pro-components/chat/chatbot/_example/code.vue b/packages/pro-components/chat/chatbot/_example/code.vue
new file mode 100644
index 0000000000..1f88fd42a4
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/code.vue
@@ -0,0 +1,222 @@
+<template>
+  <div style="height: 600px">
+    <t-chatbot
+      ref="chatRef"
+      :default-messages="mockData"
+      :message-props="messageProps"
+      :sender-props="senderProps"
+      :chat-service-config="chatServiceConfig"
+      @messageChange="handleMessageChange"
+    >
+      <template v-for="msg in mockMessage" :key="msg.id">
+        <template v-for="(item, index) in msg.content" :key="`${msg.id}-${item.data.id}`">
+          <div v-if="item.type === 'preview'" :slot="`${msg.id}-${item.type}-${index}`">
+            <t-card
+              bordered
+              hover-shadow
+              shadow
+              size="medium"
+              theme="normal"
+              :title="item.data.enName"
+              style="margin: 14px 0"
+            >
+              <template #actionbar>
+                <t-space v-if="item.status === 'complete'">
+                  <a style="cursor: pointer" @click="copyHandler(msg.content[0].data)">复制代码</a>
+                  <a style="cursor: pointer" @click="previewHandler">预览</a>
+                </t-space>
+                <span v-else>{{ item.data.cnName }}</span>
+              </template>
+            </t-card>
+          </div>
+        </template>
+      </template>
+    </t-chatbot>
+  </div>
+  <t-dialog v-model:visible="visible" header="代码生成预览" @close="closeHandler" @confirm="confirmHandler">
+    <login />
+  </t-dialog>
+</template>
+
+<script lang="tsx">
+import { ref, reactive } from 'vue';
+import {
+  ChatMessagesData,
+  SSEChunkData,
+  TdChatMessageConfig,
+  AIMessageContent,
+  ChatRequestParams,
+  ChatServiceConfig,
+} from '@tdesign-vue-next/chat';
+import Login from './components/Login.vue';
+
+// 默认初始化消息
+const mockData = [
+  {
+    id: '123',
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        status: 'complete',
+        data: '欢迎使用TDesign Chatbot智能代码助手，请输入你的问题',
+      },
+    ],
+  },
+];
+
+export default {
+  name: 'ChatSample',
+  components: {
+    Login,
+  },
+  setup() {
+    const chatRef = ref(null);
+    const mockMessage = ref<ChatMessagesData[]>(mockData);
+
+    // 预览效果弹窗
+    let visible = ref(false);
+    const previewHandler = () => {
+      console.log(1231);
+
+      visible.value = true;
+    };
+    const closeHandler = () => {
+      visible.value = false;
+    };
+    const confirmHandler = () => {
+      visible.value = false;
+    };
+
+    // 复制生成的代码
+    const copyHandler = async (code: string) => {
+      try {
+        const codeBlocks = Array.from(code.matchAll(/```(?:jsx|javascript)?\n([\s\S]*?)```/g)).map((match) =>
+          match[1].trim(),
+        );
+        // 拼接多个代码块（如有）
+        const combinedCode = codeBlocks.join('\n\n// 分割代码块\n\n');
+
+        // 使用剪贴板
+        await navigator.clipboard.writeText(combinedCode);
+        console.log('代码已复制到剪贴板');
+      } catch (error) {
+        console.error('复制失败:', error);
+      }
+    };
+
+    // 消息属性配置
+    const messageProps: TdChatMessageConfig = reactive({
+      user: {
+        variant: 'base',
+        placement: 'right',
+        avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+      },
+      assistant: {
+        actions: ['replay', 'good', 'bad'],
+        handleActions: {
+          // 处理消息操作回调
+          replay: ({ message, active }) => {
+            console.log('自定义重新回复', message, active);
+            chatRef.value?.regenerate();
+          },
+        },
+        // 内置的消息渲染配置
+        chatContentProps: {
+          markdown: {
+            options: {
+              html: true,
+              breaks: true,
+              typographer: true,
+            },
+            pluginConfig: [
+              // 按需加载，开启插件
+              {
+                preset: 'code', // 代码块
+                enabled: true,
+              },
+            ],
+          },
+        },
+      },
+    });
+
+    // 聊天服务配置
+    const chatServiceConfig: ChatServiceConfig = reactive({
+      // 对话服务地址
+      endpoint: `https://1257786608-9i9j1kpa67.ap-guangzhou.tencentscf.com/sse/normal`,
+      stream: true,
+      // 流式对话结束（aborted为true时，表示用户主动结束对话，params为请求参数）
+      onComplete: (aborted: boolean, params: RequestInit) => {
+        console.log('onComplete', aborted, params);
+      },
+      // 流式对话过程中出错业务自定义行为
+      onError: (err: Error | Response) => {
+        console.error('Chatservice Error:', err);
+      },
+      // 流式对话过程中用户主动结束对话业务自定义行为
+      onAbort: async () => {},
+      // 自定义流式数据结构解析
+      onMessage: (chunk: SSEChunkData): AIMessageContent => {
+        const { type, ...rest } = chunk.data;
+        switch (type) {
+          // 正文
+          case 'text':
+            return {
+              type: 'markdown',
+              data: rest?.msg || '',
+              // 根据后端返回的paragraph字段来决定是否需要另起一段展示markdown
+              strategy: rest?.paragraph === 'next' ? 'append' : 'merge',
+            };
+          // 自定义：代码运行结果预览
+          case 'preview':
+            return {
+              type: 'preview',
+              status: () => (/完成/.test(rest?.content?.cnName) ? 'complete' : 'streaming'),
+              data: rest?.content,
+            };
+        }
+      },
+      // 自定义请求参数
+      onRequest: (innerParams: ChatRequestParams) => {
+        const { prompt } = innerParams;
+        return {
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest',
+          },
+          body: JSON.stringify({
+            uid: 'tdesign-chat',
+            prompt,
+            code: true,
+          }),
+        };
+      },
+    });
+
+    const senderProps = reactive({
+      defaultValue: '使用 TDesign 组件库实现一个登录表单的例子',
+      placeholder: '有问题，尽管问～ Enter 发送，Shift+Enter 换行',
+    });
+
+    const handleMessageChange = (e: CustomEvent<ChatMessagesData[]>) => {
+      mockMessage.value = e.detail;
+    };
+
+    return {
+      chatRef,
+      mockMessage,
+      messageProps,
+      chatServiceConfig,
+      senderProps,
+      handleMessageChange,
+      copyHandler,
+      mockData,
+      previewHandler,
+      closeHandler,
+      confirmHandler,
+      visible,
+    };
+  },
+};
+</script>
diff --git a/packages/pro-components/chat/chatbot/_example/components/Login.vue b/packages/pro-components/chat/chatbot/_example/components/Login.vue
new file mode 100644
index 0000000000..4c9bccf28b
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/components/Login.vue
@@ -0,0 +1,43 @@
+<template>
+  <div :style="{ width: '350px' }">
+    <t-form status-icon :colon="true" :label-width="0" @submit="onSubmit" @reset="onReset">
+      <t-form-item name="account">
+        <t-input clearable :prefix-icon="DesktopIcon" placeholder="请输入账户名" />
+      </t-form-item>
+      <t-form-item name="password">
+        <t-input type="password" :prefix-icon="LockOnIcon" clearable placeholder="请输入密码" />
+      </t-form-item>
+      <t-form-item>
+        <t-button theme="primary" type="submit" block>登录</t-button>
+      </t-form-item>
+    </t-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Form, MessagePlugin } from 'tdesign-vue-next';
+import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next';
+
+export default defineComponent({
+  name: 'LoginForm',
+  setup() {
+    const onSubmit: Parameters<typeof Form>[0]['onSubmit'] = (e) => {
+      if (e.validateResult === true) {
+        MessagePlugin.info('提交成功');
+      }
+    };
+
+    const onReset: Parameters<typeof Form>[0]['onReset'] = (e) => {
+      MessagePlugin.info('重置成功');
+    };
+
+    return {
+      onSubmit,
+      onReset,
+      DesktopIcon,
+      LockOnIcon,
+    };
+  },
+});
+</script>
diff --git a/packages/pro-components/chat/chatbot/_example/components/Toolcall.vue b/packages/pro-components/chat/chatbot/_example/components/Toolcall.vue
new file mode 100644
index 0000000000..ed52cf812f
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/components/Toolcall.vue
@@ -0,0 +1,100 @@
+<template>
+  <t-collapse style="margin: 8px 0">
+    <t-collapse-panel :header="panelHeader" :header-right-content="() => renderStatusTag(status)">
+      <!-- 搜索工具的特殊渲染 -->
+      <div v-if="toolCallName === 'search' && searchResult">
+        <div style="font-size: 13px; color: #666; margin-bottom: 8px">
+          {{ searchResult.title }}
+        </div>
+        <div v-if="searchResult.references && searchResult.references.length > 0">
+          <div
+            v-for="(ref, idx) in searchResult.references"
+            :key="idx"
+            style="font-size: 12px; margin-bottom: 2px; padding-left: 8px"
+          >
+            <a :href="ref.url" target="_blank" rel="noopener noreferrer" style="color: #1976d2; text-decoration: none">
+              📄 {{ ref.title }}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 默认工具调用渲染 -->
+      <div v-else>
+        <div v-if="args" style="font-size: 12px; color: #666; margin-bottom: 4px">
+          参数: {{ typeof args === 'string' ? args : JSON.stringify(args) }}
+        </div>
+        <div v-if="result" style="font-size: 12px; color: #333">
+          结果: {{ typeof result === 'string' ? result : JSON.stringify(result) }}
+        </div>
+      </div>
+    </t-collapse-panel>
+  </t-collapse>
+</template>
+
+<script setup lang="tsx">
+import { computed } from 'vue';
+import { Collapse as TCollapse, CollapsePanel as TCollapsePanel, Tag } from 'tdesign-vue-next';
+
+// 定义 props
+interface ToolCall {
+  toolCallName?: string;
+  args?: any;
+  result?: any;
+}
+
+interface Props {
+  toolCall: ToolCall;
+  status?: 'pending' | 'streaming' | 'complete';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 'complete',
+});
+
+// 状态配置
+const statusConfig = {
+  pending: { color: 'warning', text: '处理中' },
+  streaming: { color: 'processing', text: '执行中' },
+  complete: { color: 'success', text: '已完成' },
+};
+
+// 状态渲染函数
+const renderStatusTag = (status: 'pending' | 'streaming' | 'complete') => {
+  const config = statusConfig[status] || statusConfig.complete;
+
+  return (
+    <Tag theme={config.color} size="small">
+      {config.text}
+    </Tag>
+  );
+};
+
+// 使用 computed 监听 props.toolCall 的变化
+const toolCallName = computed(() => props.toolCall?.toolCallName);
+const args = computed(() => props.toolCall?.args);
+const result = computed(() => props.toolCall?.result);
+
+// 计算面板标题
+const panelHeader = computed(() => {
+  if (toolCallName.value === 'search') {
+    return '🔍 搜索工具调用';
+  }
+  return `🔧 ${toolCallName.value || '工具调用'}`;
+});
+
+// 解析搜索结果
+const searchResult = computed(() => {
+  if (toolCallName.value !== 'search') return null;
+
+  try {
+    return typeof result.value === 'string' ? JSON.parse(result.value) : result.value;
+  } catch (e) {
+    return { title: '解析错误', references: [] };
+  }
+});
+</script>
+
+<style scoped>
+/* 如果需要额外的样式可以在这里添加 */
+</style>
diff --git a/packages/pro-components/chat/chatbot/_example/custom.vue b/packages/pro-components/chat/chatbot/_example/custom.vue
new file mode 100644
index 0000000000..c4c8b019c9
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/custom.vue
@@ -0,0 +1,186 @@
+<template>
+  <div style="height: 600px">
+    <t-chatbot
+      ref="chatRef"
+      style="height: 100%"
+      :default-messages="initMessage"
+      :message-props="messageProps"
+      :sender-props="senderProps"
+      :chat-service-config="chatServiceConfig"
+      @messageChange="handleMessageChange"
+    >
+      <!-- 自定义消息体渲染插槽 -->
+      <template v-for="msg in mockMessage" :key="msg.id">
+        <template v-for="(item, index) in msg.content" :key="`${msg.id}-${item.data.id}`">
+          <div
+            v-if="item.type === 'chart'"
+            :slot="`${msg.id}-${item.type}-${index}`"
+            style="width: 600px; height: 400px"
+          >
+            <TvisionTcharts
+              class="chart"
+              :chart-type="item.data.chartType"
+              :options="item.data.options"
+              :theme="item.data.theme"
+            />
+          </div>
+        </template>
+      </template>
+      <!-- 自定义消息操作区 -->
+      <template v-for="data in mockMessage" :key="`${data.id}-actionbar`">
+        <template v-if="data.role === 'assistant' && data.status === 'complete'">
+          <div :slot="`${data.id}-actionbar`">
+            <t-space size="small" style="margin-top: 6px">
+              <t-button shape="square" variant="text" size="small">
+                <sound-icon />
+              </t-button>
+              <t-button shape="square" variant="text" size="small">
+                <edit-icon />
+              </t-button>
+              <t-button shape="square" variant="text" size="small">
+                <copy-icon />
+              </t-button>
+            </t-space>
+          </div>
+        </template>
+      </template>
+    </t-chatbot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { SoundIcon, EditIcon, CopyIcon } from 'tdesign-icons-vue-next';
+import {
+  type SSEChunkData,
+  type TdChatMessageConfig,
+  type AIContentChunkUpdate,
+  type ChatRequestParams,
+  type ChatServiceConfig,
+  type ChatBaseContent,
+  type ChatMessagesData,
+} from '@tdesign-vue-next/chat';
+import TvisionTcharts from 'tvision-charts-vue-next';
+
+const initMessage: ChatMessagesData[] = [
+  {
+    id: '123',
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        status: 'complete',
+        data: '欢迎使用TDesign智能图表分析助手，请输入你的问题',
+      },
+    ],
+  },
+];
+
+const chatRef = ref(null);
+const mockMessage = ref<ChatMessagesData[]>(initMessage);
+
+// 消息属性配置
+const messageProps: TdChatMessageConfig = {
+  user: {
+    variant: 'base',
+    placement: 'right',
+  },
+  assistant: {
+    placement: 'left',
+    avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
+    chatContentProps: {
+      thinking: {
+        maxHeight: 100,
+      },
+    },
+  },
+};
+
+// 发送者属性
+const senderProps = {
+  defaultValue: '北京今天早晚高峰交通情况如何，需要分别给出曲线图表示每个时段',
+};
+
+// 聊天服务配置
+const chatServiceConfig: ChatServiceConfig = {
+  // 对话服务地址
+  endpoint: `https://1257786608-9i9j1kpa67.ap-guangzhou.tencentscf.com/sse/normal`,
+  stream: true,
+  // 流式对话结束（aborted为true时，表示用户主动结束对话，params为请求参数）
+  onComplete: (aborted: boolean, params: RequestInit) => {
+    console.log('onComplete', aborted, params);
+  },
+  // 流式对话过程中出错业务自定义行为
+  onError: (err: Error | Response) => {
+    console.error('Chatservice Error:', err);
+  },
+  // 流式对话过程中用户主动结束对话业务自定义行为
+  onAbort: async () => {},
+  // 流式消息输出时的回调
+  onMessage: (chunk: SSEChunkData): AIContentChunkUpdate => {
+    const { type, ...rest } = chunk.data as any;
+    switch (type) {
+      // 正文
+      case 'text':
+        return {
+          type: 'markdown',
+          data: rest?.msg || '',
+          // 根据后端返回的paragraph字段来决定是否需要另起一段展示markdown
+          strategy: rest?.paragraph === 'next' ? 'append' : 'merge',
+        };
+      // 3、自定义渲染图表所需的数据结构
+      case 'chart':
+        return {
+          type: 'chart',
+          data: {
+            id: Date.now(),
+            ...chunk.data.content,
+          },
+          // 图表每次出现都是追加创建新的内容块
+          strategy: 'append',
+        };
+    }
+  },
+  // 自定义请求参数
+  onRequest: (innerParams: ChatRequestParams) => {
+    const { prompt } = innerParams;
+    return {
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+      body: JSON.stringify({
+        uid: 'test',
+        prompt,
+        chart: true,
+      }),
+    };
+  },
+};
+
+// 消息变更处理
+const handleMessageChange = (e: CustomEvent<ChatMessagesData[]>) => {
+  mockMessage.value = e.detail;
+  console.log(mockMessage.value);
+
+  // 如果最后一条消息状态变为complete，强制更新视图
+  if (mockMessage.value.length > 0) {
+    const lastMessage = mockMessage.value[mockMessage.value.length - 1];
+    if (lastMessage.role === 'assistant' && lastMessage.status === 'complete') {
+      console.log('update');
+      // 使用setTimeout确保所有DOM更新完成
+      setTimeout(() => {
+        // 强制更新组件
+        console.log(chatRef.value, 'chatRef.value');
+
+        chatRef.value?.$forceUpdate?.();
+      }, 0);
+    }
+  }
+};
+</script>
+<style scoped>
+.chart {
+  width: 600px;
+  height: 400px;
+}
+</style>
diff --git a/packages/pro-components/chat/chatbot/_example/docs.vue b/packages/pro-components/chat/chatbot/_example/docs.vue
new file mode 100644
index 0000000000..97aa044054
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/docs.vue
@@ -0,0 +1,196 @@
+<template>
+  <div style="height: 600px">
+    <t-chatbot
+      ref="chatRef"
+      :default-messages="mockData"
+      :message-props="messageProps"
+      :sender-props="senderProps"
+      :chat-service-config="chatServiceConfig"
+      @fileSelect="onFileSelect"
+      @fileRemove="onFileRemove"
+      @chatAfterSend="onSend"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, ref } from 'vue';
+import type {
+  SSEChunkData,
+  AIMessageContent,
+  ChatMessagesData,
+  ChatServiceConfig,
+  TdAttachmentItem,
+  UploadFile,
+  ChatRequestParams,
+  TdChatMessageConfig,
+  TdChatbotApi,
+} from '@tdesign-vue-next/chat';
+
+// 默认初始化消息
+const mockData: ChatMessagesData[] = [
+  {
+    id: '123',
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        status: 'complete',
+        data: '欢迎使用TDesign文案写作助手，可以先上传你需要参考的文件，输入你要撰写的主题~',
+      },
+    ],
+  },
+];
+
+export default {
+  name: 'ChatSample',
+  setup() {
+    const chatRef = ref(null);
+    const files = ref<TdAttachmentItem[]>([]);
+
+    // 消息属性配置
+    const messageProps = ref<TdChatMessageConfig>({
+      user: {
+        variant: 'base',
+        placement: 'right',
+        avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+      },
+      assistant: {
+        placement: 'left',
+        actions: ['copy', 'good', 'bad'],
+        handleActions: {
+          // 处理消息操作回调
+          good: async ({ message, active }) => {
+            // 点赞
+            console.log('点赞', message, active);
+          },
+          bad: async ({ message, active }) => {
+            // 点踩
+            console.log('点踩', message, active);
+          },
+        },
+      },
+    });
+
+    // 聊天服务配置
+    const chatServiceConfig = ref<ChatServiceConfig>({
+      // 对话服务地址
+      endpoint: `https://1257786608-9i9j1kpa67.ap-guangzhou.tencentscf.com/sse/normal`,
+      stream: true,
+      // 流式对话结束（aborted为true时，表示用户主动结束对话，params为请求参数）
+      onComplete: (aborted, params) => {
+        console.log('onComplete', aborted, params);
+      },
+      // 流式对话过程中出错业务自定义行为
+      onError: (err) => {
+        console.error('Chatservice Error:', err);
+      },
+      // 流式对话过程中用户主动结束对话业务自定义行为
+      onAbort: async () => {},
+      // 自定义流式数据结构解析
+      onMessage: (chunk: SSEChunkData): AIMessageContent => {
+        const { type, ...rest } = chunk.data;
+        switch (type) {
+          // 图片列表预览（自定义渲染）
+          case 'image':
+            return {
+              type: 'imageview',
+              status: 'complete',
+              data: JSON.parse(rest.content),
+            };
+          // 正文
+          case 'text':
+            return {
+              type: 'markdown',
+              data: rest?.msg || '',
+            };
+        }
+      },
+      // 自定义请求参数
+      onRequest: (innerParams: ChatRequestParams) => {
+        const { prompt, attachments } = innerParams;
+        return {
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest',
+          },
+          body: JSON.stringify({
+            uid: 'tdesign-chat',
+            prompt,
+            files: attachments,
+            docs: true,
+          }),
+        };
+      },
+    });
+
+    // 文件上传
+    const onFileSelect = (e: CustomEvent<File[]>) => {
+      console.log(e, 'e-------');
+
+      // 添加新文件并模拟上传进度
+      const newFile = {
+        ...e.detail[0],
+        name: e.detail[0].name,
+        status: 'progress' as UploadFile['status'],
+        description: '上传中',
+      };
+
+      files.value = [newFile, ...files.value];
+
+      setTimeout(() => {
+        files.value = files.value.map((file) => {
+          console.log(file.name, 'file.name');
+          console.log(newFile.name, 'newFile.name');
+
+          console.log(file.name === newFile.name);
+          return file.name === newFile.name
+            ? {
+                ...file,
+                url: 'https://tdesign.gtimg.com/site/demo.docx', // mock返回的文件地址
+                status: 'success',
+                description: '上传成功',
+              }
+            : file;
+        });
+      }, 1000);
+    };
+
+    // 移除文件回调
+    const onFileRemove = (e: CustomEvent<File[]>) => {
+      files.value = e.detail;
+    };
+
+    const onSend = () => {
+      files.value = []; // 清除掉附件区域
+    };
+
+    const senderProps = computed(() => ({
+      defaultValue: '根据所提供的材料总结一篇文章，推荐春天户外郊游打卡目的地，需要符合小红书平台写作风格',
+      placeholder: '输入你要撰写的主题，支持上传附件',
+      actions: ['attachment', 'send'],
+      uploadProps: {
+        multiple: true,
+      },
+      attachmentsProps: {
+        items: files.value,
+        overflow: 'scrollX',
+      },
+      onSend,
+      onFileSelect,
+      onFileRemove,
+    }));
+
+    return {
+      chatRef,
+      mockData,
+      messageProps,
+      chatServiceConfig,
+      senderProps,
+      onSend,
+      onFileSelect,
+      onFileRemove,
+    };
+  },
+};
+</script>
diff --git a/packages/pro-components/chat/chatbot/_example/hookComponent.vue b/packages/pro-components/chat/chatbot/_example/hookComponent.vue
new file mode 100644
index 0000000000..448fbe4652
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/hookComponent.vue
@@ -0,0 +1,221 @@
+<template>
+  <div style="height: 600px; display: flex; flex-direction: column">
+    <t-chat ref="listRef" style="width: 100%" @scroll="onScrollHandler">
+      <t-chat-message
+        v-for="(message, idx) in messages"
+        :key="message.id"
+        v-bind="messageProps[message.role]"
+        :role="message.role"
+        :content="message.content"
+      >
+        <template #actionbar>
+          <t-chat-actionbar
+            v-if="message.role === 'assistant' && message.status === 'complete'"
+            :action-bar="getChatActionBar(idx === messages.length - 1)"
+            :content="message.content[0].data"
+            :comment="message.role === 'assistant' ? message.comment : ''"
+            @actions="actionHandler"
+          />
+        </template>
+      </t-chat-message>
+    </t-chat>
+    <t-chat-sender
+      ref="inputRef"
+      v-model="inputValue"
+      placeholder="请输入内容"
+      :loading="senderLoading"
+      @change="inputChangeHandler"
+      @send="sendHandler"
+      @stop="stopHandler"
+    >
+      <template #suffix="{ renderPresets }">
+        <!-- 在这里可以进行自由的组合使用，或者新增预设 -->
+        <!-- 不需要附件操作的使用方式 -->
+        <component :is="renderPresets([])" />
+      </template>
+    </t-chat-sender>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import {
+  type SSEChunkData,
+  type TdChatMessageConfig,
+  type AIMessageContent,
+  type ChatRequestParams,
+  type ChatMessagesData,
+  type TdChatActionsName,
+  TdChatListApi,
+  TdChatSenderApi,
+  useChat,
+} from '@tdesign-vue-next/chat';
+import { MessagePlugin } from 'tdesign-vue-next';
+
+// 状态管理
+const listRef = ref<TdChatListApi | null>(null);
+const inputRef = ref<TdChatSenderApi | null>(null);
+const inputValue = ref<string>('南极的自动提款机叫什么名字');
+
+const mockData = {
+  normal: [
+    {
+      id: '1',
+      role: 'user',
+      status: 'complete',
+      content: [
+        {
+          type: 'text',
+          data: '牛顿第一定律是否适用于所有参考系？',
+        },
+      ],
+    },
+    {
+      id: '2',
+      role: 'assistant',
+      status: 'complete',
+      content: [
+        {
+          type: 'text',
+          data: '牛顿第一定律并不适用于所有参考系，它只适用于惯性参考系。在质点不受外力作用时，能够判断出质点静止或作匀速直线运动的参考系一定是惯性参考系，因此只有在惯性参考系中牛顿第一定律才适用。',
+        },
+      ],
+    },
+  ],
+  image: [],
+};
+
+// 使用聊天引擎
+const { chatEngine, messages, status } = useChat({
+  defaultMessages: mockData.normal,
+  chatServiceConfig: {
+    endpoint: `https://1257786608-9i9j1kpa67.ap-guangzhou.tencentscf.com/sse/normal`,
+    stream: true,
+    onComplete: (aborted: boolean, params: RequestInit) => {
+      console.log('onComplete', aborted, params);
+    },
+    onError: (err: Error | Response) => {
+      console.error('Chatservice Error:', err);
+    },
+    onAbort: async () => {
+      console.log('中断');
+    },
+    onMessage: (chunk: SSEChunkData): AIMessageContent => {
+      const { type, ...rest } = chunk.data as any;
+      switch (type) {
+        case 'search':
+          return {
+            type: 'search',
+            data: {
+              title: rest.title || `搜索到${rest?.docs?.length}条内容`,
+              references: rest?.content,
+            },
+          };
+        case 'think':
+          return {
+            type: 'thinking',
+            status: /耗时/.test(rest?.title) ? 'complete' : 'streaming',
+            data: {
+              title: rest.title || '深度思考中',
+              text: rest.content || '',
+            },
+          };
+        case 'text':
+          return {
+            type: 'markdown',
+            data: rest?.msg || '',
+          };
+        default:
+          return { type: 'text', data: '' };
+      }
+    },
+    onRequest: (innerParams: ChatRequestParams) => {
+      const { prompt } = innerParams;
+      return {
+        headers: {
+          'X-Requested-With': 'XMLHttpRequest',
+        },
+        body: JSON.stringify({
+          uid: 'abcd',
+          prompt,
+          think: true,
+          search: true,
+        }),
+      };
+    },
+  },
+});
+
+// 计算发送器加载状态
+const senderLoading = computed(() => {
+  return status.value === 'pending' || status.value === 'streaming';
+});
+
+// 消息属性配置
+const messageProps: TdChatMessageConfig = {
+  user: {
+    variant: 'base',
+    placement: 'right',
+  },
+  assistant: {
+    placement: 'left',
+    chatContentProps: {
+      thinking: {
+        maxHeight: 100,
+      },
+    },
+  },
+};
+
+// 获取聊天操作栏配置
+const getChatActionBar = (isLast: boolean): TdChatActionsName[] => {
+  let filterActions: TdChatActionsName[] = ['replay', 'good', 'bad', 'copy'];
+  if (!isLast) {
+    filterActions = filterActions.filter((item) => item !== 'replay') as TdChatActionsName[];
+  }
+  return filterActions;
+};
+
+// 操作处理
+const actionHandler = (name) => {
+  switch (name) {
+    case 'replay':
+      console.log('自定义重新回复');
+      chatEngine.value?.regenerateAIMessage();
+      break;
+    default:
+      console.log('触发action', name);
+  }
+};
+
+// 发送用户消息
+const sendUserMessage = async (requestParams: ChatRequestParams) => {
+  await chatEngine.value?.sendUserMessage(requestParams);
+  listRef.value?.scrollToBottom();
+};
+
+// 输入变更处理
+const inputChangeHandler = (value: string) => {
+  inputValue.value = value;
+};
+
+// 发送处理
+const sendHandler = async (params) => {
+  if (senderLoading.value) {
+    MessagePlugin.error('回答输出中，请稍后操作或点击停止回答');
+  } else {
+    await sendUserMessage({ prompt: params });
+    inputValue.value = '';
+  }
+};
+
+// 停止处理
+const stopHandler = () => {
+  chatEngine.value?.abortChat();
+};
+
+// 滚动处理
+const onScrollHandler = (e: Event) => {
+  console.log('===scroll', e);
+};
+</script>
diff --git a/packages/pro-components/chat/chatbot/_example/image.vue b/packages/pro-components/chat/chatbot/_example/image.vue
new file mode 100644
index 0000000000..0cf008c46b
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/_example/image.vue
@@ -0,0 +1,401 @@
+<template>
+  <div style="height: 600px">
+    <t-chatbot
+      ref="chatRef"
+      :default-messages="mockData"
+      :message-props="messageProps"
+      :sender-props="senderProps"
+      :chat-service-config="chatServiceConfig"
+      @message-change="handleMessageChange"
+      @chat-after-send="onSend"
+    >
+      <!-- 渲染自定义消息内容 -->
+      <template v-for="msg in mockMessage" :key="msg.id">
+        <template v-for="(item, index) in msg.content" :key="index">
+          <div v-if="item.type === 'imageview'" :slot="`${msg.id}-${item.type}-${index}`">
+            <!-- 图片预览组件 -->
+            <template v-if="item.data?.length === 0 || item.data?.every((img) => img.url === undefined)">
+              <Skeleton style="width: 600px; margin: 14px 0" theme="paragraph" animation="gradient" />
+            </template>
+            <Space v-else break-line :size="16">
+              <ImageViewer
+                v-for="(img, imgIndex) in item.data.map((img) => img.url)"
+                :key="imgIndex"
+                :images="item.data.map((img) => img.url)"
+                :default-index="imgIndex"
+              >
+                <template #trigger="{ open }">
+                  <div class="tdesign-demo-image-viewer__ui-image tdesign-demo-image-viewer__base">
+                    <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
+                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
+                      <span><browse-icon size="1.4em" /> 预览</span>
+                    </div>
+                  </div>
+                </template>
+              </ImageViewer>
+            </Space>
+          </div>
+        </template>
+      </template>
+
+      <!-- 输入框底部自定义区域 -->
+      <template #sender-footer-prefix>
+        <Space align="center" size="small">
+          <Button shape="round" variant="outline" :icon="renderImageAddIcon" @click="onAttachClick"> 参考图 </Button>
+          <Dropdown :options="RatioOptions" trigger="click" @click="switchRatio">
+            <Button shape="round" variant="outline" :icon="renderTransform1Icon">
+              {{ selectedRatioLabel }}
+            </Button>
+          </Dropdown>
+          <Dropdown :options="StyleOptions" trigger="click" @click="switchStyle">
+            <Button shape="round" variant="outline" :icon="renderFilter3Icon">
+              {{ selectedStyleLabel }}
+            </Button>
+          </Dropdown>
+        </Space>
+      </template>
+    </t-chatbot>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { ref, onMounted, computed, watch } from 'vue';
+import { BrowseIcon, Filter3Icon, ImageAddIcon, Transform1Icon } from 'tdesign-icons-vue-next';
+import type {
+  SSEChunkData,
+  AIMessageContent,
+  ChatRequestParams,
+  ChatMessagesData,
+  ChatServiceConfig,
+  TdAttachmentItem,
+  UploadFile,
+  TdChatMessageConfig,
+} from '@tdesign-vue-next/chat';
+import { ImageViewer, Skeleton, Button, Dropdown, Space } from 'tdesign-vue-next';
+
+const renderFilter3Icon = () => <Filter3Icon />;
+const renderImageAddIcon = () => <ImageAddIcon />;
+const renderTransform1Icon = () => <Transform1Icon />;
+
+// 比例选项
+const RatioOptions = [
+  { content: '1:1 头像', value: 1 },
+  { content: '2:3 自拍', value: 2 / 3 },
+  { content: '4:3 插画', value: 4 / 3 },
+  { content: '9:16 人像', value: 9 / 16 },
+  { content: '16:9 风景', value: 16 / 9 },
+];
+
+// 风格选项
+const StyleOptions = [
+  { content: '人像摄影', value: 'portrait' },
+  { content: '卡通动漫', value: 'cartoon' },
+  { content: '风景', value: 'landscape' },
+  { content: '像素风', value: 'pixel' },
+];
+
+// 默认消息数据
+const mockData: ChatMessagesData[] = [
+  {
+    id: '123',
+    role: 'assistant',
+    content: [
+      {
+        type: 'text',
+        status: 'complete',
+        data: '欢迎使用 TDesign 智能生图助手，请先写下你的创意，可以试试上传参考图哦',
+      },
+    ],
+  },
+];
+
+// 模板引用
+const chatRef = ref(null);
+const ratio = ref<number>(0);
+const style = ref<string>('');
+const reqParamsRef = ref<{ ratio: number; style: string; file?: string }>({
+  ratio: 0,
+  style: '',
+});
+const files = ref<TdAttachmentItem[]>([]);
+const mockMessage = ref<ChatMessagesData[]>(mockData);
+
+// 计算属性：选中的比例标签
+const selectedRatioLabel = computed(() => {
+  const option = RatioOptions.find((opt) => opt.value === ratio.value);
+  return option ? option.content : '比例';
+});
+
+// 计算属性：选中的风格标签
+const selectedStyleLabel = computed(() => {
+  const option = StyleOptions.find((opt) => opt.value === style.value);
+  return option ? option.content : '风格';
+});
+
+// 消息属性配置
+const messageProps: TdChatMessageConfig = {
+  user: {
+    variant: 'base',
+    placement: 'right',
+    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
+  },
+  assistant: {
+    placement: 'left',
+    actions: ['good', 'bad'],
+    handleActions: {
+      good: async ({ message, active }) => {
+        console.log('点赞', message, active);
+      },
+      bad: async ({ message, active }) => {
+        console.log('点踩', message, active);
+      },
+    },
+  },
+};
+
+// 聊天服务配置
+const chatServiceConfig: ChatServiceConfig = {
+  endpoint: `https://1257786608-9i9j1kpa67.ap-guangzhou.tencentscf.com/sse/normal`,
+  stream: true,
+  onComplete: (aborted: boolean, params: RequestInit) => {
+    console.log('onComplete', aborted, params);
+  },
+  onError: (err: Error | Response) => {
+    console.error('Chatservice Error:', err);
+  },
+  onAbort: async () => {},
+  onMessage: (chunk: SSEChunkData): AIMessageContent => {
+    const { type, ...rest } = chunk.data;
+    switch (type) {
+      case 'image':
+        return {
+          type: 'imageview',
+          status: 'complete',
+          data: JSON.parse(rest.content),
+        };
+      case 'text':
+        return {
+          type: 'markdown',
+          data: rest?.msg || '',
+        };
+    }
+  },
+  onRequest: (innerParams: ChatRequestParams) => {
+    const { prompt } = innerParams;
+    return {
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+      body: JSON.stringify({
+        uid: 'tdesign-chat',
+        prompt,
+        image: true,
+        ...reqParamsRef.value,
+      }),
+    };
+  },
+};
+
+// 点击附件按钮
+const onAttachClick = () => {
+  chatRef.value?.selectFile();
+};
+
+// 文件选择处理
+const onFileSelect = (e: CustomEvent<TdAttachmentItem[]>) => {
+  const currFiles = e.detail;
+
+  if (currFiles.length === 0) return;
+
+  const newFile = {
+    ...currFiles[0],
+    name: currFiles[0].name,
+    status: 'progress' as UploadFile['status'],
+    description: '上传中',
+  };
+
+  files.value = [newFile, ...files.value];
+
+  setTimeout(() => {
+    files.value = files.value.map((file) =>
+      file.name === newFile.name
+        ? {
+            ...file,
+            url: 'https://tdesign.gtimg.com/demo/images/example5.png',
+            status: 'success',
+            description: '上传成功',
+          }
+        : file,
+    );
+    console.log(files, 'files');
+  }, 1000);
+};
+
+// 文件移除处理
+const onFileRemove = (e: CustomEvent<TdAttachmentItem[]>) => {
+  files.value = e.detail;
+};
+
+// 发送消息处理
+const onSend = (e: CustomEvent<ChatRequestParams>): ChatRequestParams => {
+  const { prompt, attachments } = e.detail;
+  files.value = [];
+
+  return {
+    attachments,
+    prompt: `${prompt}，要求比例：${
+      ratio.value === 0 ? '默认比例' : RatioOptions.find((opt) => opt.value === ratio.value)?.content
+    }, 风格：${style.value ? StyleOptions.find((opt) => opt.value === style.value)?.content : '默认风格'}`,
+  };
+};
+
+// 切换比例
+const switchRatio = (data: { value: number }) => {
+  ratio.value = data.value;
+};
+
+// 切换风格
+const switchStyle = (data: { value: string }) => {
+  style.value = data.value;
+};
+
+// 消息变化处理
+const handleMessageChange = (e: CustomEvent<ChatMessagesData[]>) => {
+  mockMessage.value = e.detail;
+};
+
+// 初始化请求参数
+onMounted(() => {
+  reqParamsRef.value = {
+    ratio: ratio.value,
+    style: style.value,
+    file: 'https://tdesign.gtimg.com/demo/images/example5.png',
+  };
+});
+
+// 监听比例和风格变化
+watch([ratio, style], () => {
+  reqParamsRef.value = {
+    ratio: ratio.value,
+    style: style.value,
+    file: 'https://tdesign.gtimg.com/demo/images/example5.png',
+  };
+});
+
+const senderProps = computed(() => ({
+  defaultValue: '请为 TDesign 设计三张品牌宣传图',
+  placeholder: '描述你的生图需求~',
+  uploadProps: {
+    multiple: false,
+    accept: 'image/*',
+  },
+  attachmentsProps: {
+    items: files.value,
+  },
+  onFileSelect,
+  onFileRemove,
+}));
+</script>
+
+<style scoped>
+/* 添加必要的样式 */
+.tdesign-demo-image-viewer__ui-image {
+  width: 100%;
+  height: 100%;
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  border-radius: 9px;
+  overflow: hidden;
+}
+
+.tdesign-demo-image-viewer__ui-image--hover {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: var(--td-text-color-anti);
+  line-height: 22px;
+  transition: 0.2s;
+}
+
+.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
+  opacity: 1;
+  cursor: pointer;
+}
+
+.tdesign-demo-image-viewer__ui-image--img {
+  width: auto;
+  height: auto;
+  max-height: 100%;
+  cursor: pointer;
+  position: absolute;
+  object-fit: cover;
+}
+
+.tdesign-demo-image-viewer__ui-image--footer {
+  padding: 0 16px;
+  height: 56px;
+  width: 100%;
+  line-height: 56px;
+  font-size: 16px;
+  position: absolute;
+  bottom: 0;
+  color: var(--td-text-color-anti);
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
+  display: flex;
+  box-sizing: border-box;
+}
+
+.tdesign-demo-image-viewer__ui-image--title {
+  flex: 1;
+}
+
+.tdesign-demo-popup__reference {
+  margin-left: 16px;
+}
+
+.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
+  cursor: pointer;
+}
+
+.tdesign-demo-image-viewer__base {
+  width: 160px;
+  height: 160px;
+  border: 4px solid var(--td-bg-color-secondarycontainer);
+}
+</style>
+<style lang="less">
+t-chatbot {
+  .t-space {
+    .t-button {
+      height: var(--td-comp-size-m);
+      border-radius: 32px;
+      color: var(--td-text-color-primary);
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      .t-button__text {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        span {
+          margin-left: var(--td-comp-margin-s);
+        }
+      }
+      &.is-active {
+        border: 1px solid var(--td-brand-color-focus);
+        background: var(--td-brand-color-light);
+        color: var(--td-text-color-brand);
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/pro-components/chat/chatbot/chatbot.md b/packages/pro-components/chat/chatbot/chatbot.md
new file mode 100644
index 0000000000..63c53327a9
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/chatbot.md
@@ -0,0 +1,60 @@
+:: BASE_DOC ::
+
+## API
+
+### Chatbot Props
+
+| 名称              | 类型            | 默认值 | 说明                                                                                                                                                                                                                                                                         | 必传 |
+| ----------------- | --------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| defaultMessages   | Array           | -      | 初始消息数据列表。TS 类型：`ChatMessagesData[]`。[详细类型定义](/chat/components/chat-message?tab=api)                                                                                                                                                                 | N    |
+| messageProps      | Object/Function | -      | 消息项配置，透传给内部 [ChatMessage](/chat/components/chat-message) 组件。按角色聚合了消息项的配置，可以是静态配置对象或动态配置函数。TS 类型：`TdChatMessageConfig \| ((msg: ChatMessagesData) => TdChatMessageConfigItem)` ，[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/chatbot/type.ts) | N    |
+| listProps         | Object          | -      | 消息列表配置，见下方详细说明。TS 类型：`TdChatListProps`。                                                                                                                                                                                                                                   | N    |
+| senderProps       | Object          | -      | 发送框配置，透传给内部 [ChatSender](/chat/components/chat-sender) 组件。TS 类型：`TdChatSenderProps` [详细类型定义](/chat/components/chat-sender?tab=api)                                                                                                                                                                            | N    |
+| chatServiceConfig | Object          | -      | 对话服务配置，包含网络请求和回调配置，见下方详细说明，TS 类型：`ChatServiceConfig`[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/chat-engine/type.ts])                                                                                                                                                                                                                   | N    |
+| onMessageChange   | Function        | -      | 消息列表数据变化回调，TS 类型：`(e: CustomEvent<ChatMessagesData[]>) => void`                                                                                                                                                                                                | N    |
+| onChatReady       | Function        | -      | 内部对话引擎初始化完成回调，TS 类型：`(e: CustomEvent) => void`                                                                                                                                                                                                              | N    |
+| onChatAfterSend   | Function        | -      | 发送消息后的回调，TS 类型：`(e: CustomEvent<ChatRequestParams>) => void`                                                                                                                                                                                                         | N    |
+
+### TdChatListProps 消息列表配置
+
+| 名称       | 类型     | 默认值 | 说明                             | 必传 |
+| ---------- | -------- | ------ | -------------------------------- | ---- |
+| autoScroll | Boolean  | true   | 高度变化时列表是否自动滚动到底部 | N    |
+| onScroll   | Function | -      | 滚动事件回调                     | N    |
+
+### ChatServiceConfig 类型说明
+
+对话服务核心配置类型，主要作用包括基础通信配置，请求流程控制及全生命周期管理（初始化 → 传输 → 完成/中止），流式数据的分块处理策略，状态通知回调等。
+
+| 名称       | 类型     | 默认值    | 说明                                                                                                                                 | 必传 |
+| ---------- | -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---- |
+| endpoint   | String   | -         | 对话服务请求地址 url                                                                                                                 | N    |
+| protocol   | String   | 'default' | 对话服务协议，支持'default'和'agui'                                                                                                  | N    |
+| stream     | Boolean  | true      | 是否使用流式传输                                                                                                                     | N    |
+| onStart    | Function | -         | 流式传输接收到第一个数据块时的回调。TS 类型：`(chunk: string) => void`                                                            | N    |
+| onRequest  | Function | -         | 请求发送前的配置回调，可修改请求参数、添加 headers 等。TS 类型：`(params: ChatRequestParams) => RequestInit`                                                  | N    |
+| onMessage  | Function | -         | 处理流式消息的回调，用于解析后端数据并映射为组件所需格式。TS 类型：`(chunk: SSEChunkData) => AIMessageContent  \| AIMessageContent[] \| null`                                 | N    |
+| onComplete | Function | -         | 请求结束时的回调。TS 类型：`(isAborted: boolean, params?: ChatRequestParams) => AIMessageContent \| AIMessageContent[] \| null` | N    |
+| onAbort    | Function | -         | 中止请求时的回调。TS 类型：`() => Promise<void>`                                                                                     | N    |
+| onError    | Function | -         | 错误处理回调。TS 类型：`(err: Error \| Response) => void`                                                                            | N    |
+
+### Chatbot 实例方法和属性
+
+通过 ref 获取组件实例，调用以下方法。
+
+| 名称                  | 类型                                                                              | 描述                                         |
+| --------------------- | --------------------------------------------------------------------------------- | -------------------------------------------- |
+| setMessages           | `(messages: ChatMessagesData[], mode?: 'replace' \| 'prepend' \| 'append') => void` | 批量设置消息                                 |
+| sendUserMessage       | `(params: ChatRequestParams) => Promise<void>`                                    | 发送用户消息，处理请求参数并触发消息流       |
+| sendAIMessage         | `{ params?: ChatRequestParams; content?: AIMessageContent[]; sendRequest?: boolean }`                                    | 发送 AI 消息，处理请求参数并触发消息流       |
+| sendSystemMessage     | `(msg: string) => void`                                                             | 发送系统级通知消息，用于展示系统提示/警告    |
+| abortChat             | `() => Promise<void>`                                                               | 中止当前进行中的对话请求，清理网络连接       |
+| addPrompt             | `(prompt: string) => void `                                                         | 将预设提示语添加到输入框，辅助用户快速输入   |
+| selectFile            | `() => void`                                                                        | 触发文件选择对话框，用于附件上传功能         |
+| regenerate            | `(keepVersion?: boolean) => Promise<void>`                                          | 重新生成最后一条消息，可选保留历史版本       |
+| registerMergeStrategy |`(type: T['type'], handler: (chunk: T, existing?: T) => T) => void`                | 注册自定义消息合并策略，用于处理流式数据更新 |
+| scrollList            | `({ to: 'bottom' \| 'top', behavior: 'auto' \| 'smooth' }) => void`                 | 受控滚动到指定位置                           |
+| isChatEngineReady     | boolean                                                                           | ChatEngine 是否就绪                          |
+| chatMessageValue      | ChatMessagesData[]                                                                | 获取当前消息列表的只读副本                   |
+| chatStatus            | ChatStatus                                                                        | 获取当前对话状态（空闲/进行中/错误等）       |
+| senderLoading         | boolean                                                                           | 当前输入框按钮是否在'输出中'                 |
diff --git a/packages/pro-components/chat/chatbot/index.ts b/packages/pro-components/chat/chatbot/index.ts
new file mode 100644
index 0000000000..85f0b3c031
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/index.ts
@@ -0,0 +1,27 @@
+import 'tdesign-web-components/lib/chatbot';
+import type { DefineComponent } from 'vue';
+import { omiVueify } from 'omi-vueify';
+import type {
+  TdChatListProps,
+  TdChatProps,
+  TdChatSearchContentProps,
+  TdChatSuggestionContentProps,
+} from 'tdesign-web-components';
+
+export const ChatBot = omiVueify('t-chatbot', {
+  // TODO: 这里可以补充TdChatbotApi里需要暴露出来的方法（ref实例上的方法）
+  methodNames: ['addPrompt', 'regenerate', 'selectFile', 'registerMergeStrategy'],
+}) as DefineComponent<TdChatProps>;
+
+export const ChatSearchContentComponent = omiVueify('t-chat-search-content', {
+  methodNames: [],
+}) as DefineComponent<TdChatSearchContentProps>;
+
+export const ChatSuggestionContentComponent = omiVueify('t-chat-suggestion-content', {
+  methodNames: [],
+}) as DefineComponent<TdChatSuggestionContentProps>;
+
+export const ChatListComponent = omiVueify('t-chat-list', {
+  methodNames: ['scrollToBottom'],
+}) as DefineComponent<TdChatListProps>;
+export default ChatBot;
diff --git a/packages/pro-components/chat/chatbot/useChat.ts b/packages/pro-components/chat/chatbot/useChat.ts
new file mode 100644
index 0000000000..d0d077efcf
--- /dev/null
+++ b/packages/pro-components/chat/chatbot/useChat.ts
@@ -0,0 +1,74 @@
+import { ref, onMounted, onUnmounted, watch, type Ref } from 'vue';
+import type { ChatMessagesData, ChatStatus, ChatServiceConfig } from 'tdesign-web-components/lib/chat-engine';
+import { TdChatProps } from 'tdesign-web-components';
+import ChatEngine from 'tdesign-web-components/lib/chat-engine';
+
+export const useChat = (options: {
+  defaultMessages: TdChatProps['defaultMessages'];
+  chatServiceConfig: ChatServiceConfig;
+}) => {
+  const messages: Ref<ChatMessagesData[]> = ref([]);
+  const status: Ref<ChatStatus> = ref('idle');
+  const chatEngineRef = ref<ChatEngine | null>(null);
+  const msgSubscribeRef = ref<(() => void) | null>(null);
+  const prevInitialMessages = ref<ChatMessagesData[]>([]);
+
+  const syncState = (state: ChatMessagesData[]) => {
+    messages.value = state;
+    status.value = state[state.length - 1]?.status || 'idle';
+  };
+
+  const subscribeToChat = () => {
+    if (!chatEngineRef.value) return;
+
+    msgSubscribeRef.value = chatEngineRef.value.messageStore.subscribe((state) => {
+      syncState(state.messages);
+    });
+  };
+
+  const initChat = () => {
+    chatEngineRef.value = new ChatEngine();
+    chatEngineRef.value.init(options.chatServiceConfig, options.defaultMessages);
+    syncState(options.defaultMessages || []);
+    subscribeToChat();
+  };
+
+  onMounted(() => {
+    initChat();
+  });
+
+  onUnmounted(() => {
+    if (msgSubscribeRef.value) {
+      msgSubscribeRef.value();
+    }
+  });
+
+  // 监听 defaultMessages 变化
+  watch(
+    () => options.defaultMessages,
+    (newMessages, oldMessages) => {
+      // 检查 defaultMessages 是否真的发生了变化
+      const hasChanged = JSON.stringify(prevInitialMessages.value) !== JSON.stringify(newMessages);
+
+      if (hasChanged && newMessages && newMessages.length > 0) {
+        // 更新引用
+        prevInitialMessages.value = newMessages;
+
+        // 重新初始化聊天引擎或更新消息
+        if (chatEngineRef.value) {
+          chatEngineRef.value.setMessages(newMessages, 'replace');
+
+          // 同步状态
+          syncState(newMessages);
+        }
+      }
+    },
+    { deep: true },
+  );
+
+  return {
+    chatEngine: chatEngineRef,
+    messages,
+    status,
+  };
+};
diff --git a/packages/pro-components/chat/index.ts b/packages/pro-components/chat/index.ts
index 5124ad6984..7efb949cde 100644
--- a/packages/pro-components/chat/index.ts
+++ b/packages/pro-components/chat/index.ts
@@ -1,15 +1,25 @@
 import { App } from 'vue';
 
-import _Chat from './chat';
+import _ChatList from './chat-list';
 import _ChatItem from './chat-item';
 import _ChatInput from './chat-input';
 import _ChatContent from './chat-content';
 import _ChatReasoning from './chat-reasoning';
 import _ChatLoading from './chat-loading';
 
-import _ChatAction from './chat-action';
+import _ChatActionbar from './chat-actionbar';
 import _ChatSender from './chat-sender';
+import _Attachments from './attachments';
+import _ChatThinking from './chat-thinking';
+import _ChatBot from './chatbot';
+import _ChatMarkdown from './chat-markdown';
+import { ChatSearchContentComponent, ChatSuggestionContentComponent } from './chatbot';
 
+// 修改为直接导出
+import { useChat } from './chatbot/useChat';
+export { useChat };
+
+import _ChatMessage from './chat-message';
 import { withInstall } from '@tdesign/shared-utils';
 
 import {
@@ -24,6 +34,10 @@ import {
 } from './type';
 
 import './style';
+import 'tdesign-web-components/lib/style/index.css';
+import 'tdesign-web-components/lib/chat-message/content/search-content';
+import 'tdesign-web-components/lib/chat-message/content/suggestion-content';
+import { TdMarkdownEngine } from 'tdesign-web-components/lib/chat-message';
 
 export * from './type';
 
@@ -36,26 +50,52 @@ export type ChatSenderProps = TdChatSenderProps;
 export type ChatReasoningProps = TdChatReasoningProps;
 export type ChatLoadingProps = TdChatLoadingProps;
 
-export const Chat = withInstall(_Chat);
-export const ChatItem = withInstall(_ChatItem);
-export const ChatInput = withInstall(_ChatInput);
+export const ChatList = withInstall(_ChatList);
 export const ChatSender = withInstall(_ChatSender);
+export const ChatActionbar = withInstall(_ChatActionbar);
+export const ChatLoading = withInstall(_ChatLoading);
+export const Attachments = withInstall(_Attachments);
+export const ChatThinking = withInstall(_ChatThinking, 't-chat-thinking');
+export const ChatBot = withInstall(_ChatBot, 't-chatbot');
+export const ChatMessage = withInstall(_ChatMessage, 't-chat-message');
 export const ChatContent = withInstall(_ChatContent);
+export const ChatSearchContent = withInstall(ChatSearchContentComponent, 't-chat-search-content');
+
+export const ChatSuggestionContent = withInstall(ChatSuggestionContentComponent, 't-chat-suggestion-content');
+
+export const ChatMarkdown = withInstall(_ChatMarkdown, 't-chat-markdown');
+
+// TODO：待下线的组件
+export const Chat = withInstall(_ChatList); // 兼容历史版本，分别导出ChatList，Chat
+export const ChatAction = withInstall(_ChatActionbar); // 兼容历史版本，分别导出ChatActionbar，ChatAction
+export const ChatInput = withInstall(_ChatInput);
 export const ChatReasoning = withInstall(_ChatReasoning);
-export const ChatAction = withInstall(_ChatAction);
-export const ChatLoading = withInstall(_ChatLoading);
+export const ChatItem = withInstall(_ChatItem);
+
+// 导出 MarkdownEngine
+export { TdMarkdownEngine as MarkdownEngine };
 
 export default {
-  // TODO: refactor
   install(app: App, config?: Record<string, unknown>) {
-    app.use(Chat, config);
-    app.use(ChatItem, config);
-    app.use(ChatInput, config);
+    app.use(ChatBot, config);
+    app.use(ChatList, config);
     app.use(ChatContent, config);
-    app.use(ChatReasoning, config);
-    app.use(ChatAction, config);
+    app.use(ChatMarkdown, config);
+    app.use(ChatActionbar, config);
     app.use(ChatLoading, config);
     app.use(ChatSender, config);
+    app.use(ChatThinking, config);
+    app.use(ChatMessage, config);
+    app.use(Attachments, config);
+    app.use(ChatSearchContent, config);
+    app.use(ChatSuggestionContent, config);
+    app.use(Chat, config);
+    app.use(ChatAction, config);
+    app.use(ChatInput, config);
+    app.use(ChatItem, config);
+    app.use(ChatReasoning, config);
   },
   version: typeof PKG_VERSION === 'undefined' ? '' : PKG_VERSION,
 };
+
+export { AGUIAdapter, getMessageContentForCopy, isAIMessage } from 'tdesign-web-components/lib/chat-engine';
diff --git a/packages/pro-components/chat/type.ts b/packages/pro-components/chat/type.ts
index b9f2fcf415..64dae41e50 100644
--- a/packages/pro-components/chat/type.ts
+++ b/packages/pro-components/chat/type.ts
@@ -12,8 +12,24 @@ import { TNode } from 'tdesign-vue-next';
 export interface TdChatProps {
   /**
    * 自定义操作按钮的插槽
+   * @deprecated
    */
   actions?: TNode;
+  /**
+   * 自定义操作按钮的插槽（推荐使用）
+   */
+  actionbar?: TNode;
+  /**
+   * 是否开启自动滚动
+   * @default true
+   */
+  autoScroll?: boolean;
+  /**
+   * 默认滚动位置
+   * @default 'bottom'
+   */
+  defaultScrollTo?: 'top' | 'bottom';
+
   /**
    * 动画效果，支持「渐变加载动画」,「闪烁加载动画」, 「骨架屏」三种
    * @default skeleton
@@ -63,6 +79,11 @@ export interface TdChatProps {
    * @default true
    */
   reverse?: boolean;
+  /**
+   * 是否显示“回到底部”按钮
+   * @default true
+   */
+  showScrollButton?: boolean;
   /**
    * 新消息是否处于加载状态，加载状态默认显示骨架屏，接口请求返回数据时请将新消息加载状态置为false
    * @default false
@@ -83,7 +104,7 @@ export interface ChatInstanceFunctions {
   /**
    * 对话列表过长时，支持对话列表重新滚动回底部的方法
    */
-  scrollToBottom?: (params: ScrollToBottomParams) => void;
+  scrollToBottom?: (params?: ScrollToBottomParams) => void;
 }
 
 export interface TdChatLoadingProps {
@@ -102,8 +123,13 @@ export interface TdChatLoadingProps {
 export interface TdChatItemProps {
   /**
    * 自定义的操作内容
+   * @deprecated
    */
   actions?: string | TNode;
+  /**
+   * 自定义的操作内容（推荐使用）
+   */
+  actionbar?: string | TNode;
   /**
    * 动画效果，支持「渐变加载动画」,「闪烁加载动画」, 「骨架屏」三种
    * @default skeleton
@@ -144,18 +170,36 @@ export interface TdChatItemProps {
    * @default text
    */
   variant?: 'base' | 'outline' | 'text';
+  status?: '' | 'error';
+}
+
+export type ChatContentType = 'text' | 'markdown';
+
+export interface ChatContentData {
+  type: ChatContentType;
+  data: any;
 }
 
 export interface TdChatContentProps {
   /**
-   * 聊天内容，支持 markdown 格式
+   * 聊天内容，支持多种内容类型
    * @default ''
    */
-  content?: string;
+  content?: string | ChatContentData;
   /**
    * 角色，不同选项配置不同的样式，支持类型包括用户、助手、错误、模型切换、系统消息
    */
-  role?: 'user' | 'assistant' | 'error' | 'model-change' | 'system';
+  role?: 'user' | 'assistant' | 'model-change' | 'system';
+  /**
+   * Markdown引擎类型，用于解析Markdown内容
+   */
+  markdownProps?: {
+    engine: 'marked' | 'cherry-markdown';
+    options: {
+      [key: string]: any;
+    };
+  };
+  status?: '' | 'error';
 }
 
 export interface TdChatActionProps {
@@ -170,23 +214,41 @@ export interface TdChatActionProps {
    */
   disabled?: boolean;
   /**
-   * 是否点踩
+   * 评价类型，可选值：'good(点赞)'/'bad(点踩)'，默认为空
+   * @default ''
+   */
+  comment?: 'good' | 'bad' | '';
+  /**
+   * 是否点踩（待废弃，请尽快使用comment）
    * @default false
+   * @deprecated
    */
   isBad?: boolean;
   /**
-   * 是否点赞
+   * 是否点赞（待废弃，请尽快使用comment）
    * @default false
+   * @deprecated
    */
   isGood?: boolean;
   /**
    * 操作按钮配置项，可配置操作按钮选项和顺序
    * @default ["replay", "copy", "good", "bad"]
    */
-  operationBtn?: Array<'replay' | 'copy' | 'good' | 'bad'>;
+  actionBar?: Array<'replay' | 'copy' | 'good' | 'bad' | 'share'>;
+  /**
+   * 操作按钮配置项，可配置操作按钮选项和顺序（待废弃，请尽快使用actionBar）
+   * @default ["replay", "copy", "good", "bad"]
+   * @deprecated
+   */
+  operationBtn?: Array<'replay' | 'copy' | 'good' | 'bad' | 'share'>;
   /**
    * 点击点赞，点踩，复制，重新生成按钮时触发
    */
+  onActions?: (value: string, context: { e: MouseEvent }) => void;
+  /**
+   * 点击点赞，点踩，复制，重新生成按钮时触发（待废弃，请尽快使用onActions）
+   * @deprecated
+   */
   onOperation?: (value: string, context: { e: MouseEvent }) => void;
 }
 
@@ -271,7 +333,7 @@ export interface TdChatSenderProps {
   /**
    * 输入框左下角区域扩展
    */
-  prefix?: string | TNode;
+  footerPrefix?: string | TNode;
   /**
    * 发送按钮是否处于加载状态，待废弃，请尽快使用 loading 替换
    * @deprecated
@@ -325,6 +387,13 @@ export interface TdChatSenderProps {
    * 点击消息终止的回调方法
    */
   onStop?: (value: string, context: { e: MouseEvent }) => void;
+  /**
+   * 附件配置属性
+   */
+  attachmentsProps?: {
+    items: any[];
+    overflow: 'scrollX' | 'scrollY' | 'wrap';
+  };
 }
 
 export interface TdChatReasoningProps {
@@ -358,6 +427,14 @@ export interface TdChatReasoningProps {
    * 是否折叠
    */
   collapsed?: boolean;
+  /**
+   * 布局方式
+   */
+  layout?: 'border' | 'block';
+  /**
+   * 加载过程动画
+   */
+  animation?: 'moving' | 'gradient' | 'circle';
 }
 
 export interface TdChatItemMeta {
@@ -366,7 +443,7 @@ export interface TdChatItemMeta {
   role?: string;
   datetime?: string;
   content?: string;
-  reasoning?: string;
+  status?: string;
 }
 
 export type ScrollToBottomParams = { behavior: 'auto' | 'smooth' };
@@ -403,6 +480,13 @@ export interface UploadActionConfig {
    * @param params - 上传参数对象
    * @param params.files - 上传的文件列表
    * @param params.name - 上传动作名称
+   * @param params.e - 事件对象
    */
-  action: (params: { files: File[]; name: UploadActionType }) => void;
+  action: (params: { files: File[]; name: UploadActionType; e?: Event }) => void;
 }
+
+export type * from 'tdesign-web-components/lib/chat-sender/type';
+export type * from 'tdesign-web-components/lib/filecard/type';
+export type * from 'tdesign-web-components/lib/chat-message/index';
+export type * from 'tdesign-web-components/lib/chatbot/type';
+export type * from 'tdesign-web-components/lib/chat-action/type';
diff --git a/packages/shared/hooks/useGlobalIcon/index.ts b/packages/shared/hooks/useGlobalIcon/index.ts
index 6865a91ad5..efb45c46de 100644
--- a/packages/shared/hooks/useGlobalIcon/index.ts
+++ b/packages/shared/hooks/useGlobalIcon/index.ts
@@ -3,7 +3,8 @@ import { useConfig } from '../useConfig';
 import { IconConfig } from '@tdesign/components/config-provider/type';
 
 // 从 globalConfig 获取 icon 配置用于覆盖组件内置 icon
-export function useGlobalIcon(tdIcon: object): IconConfig {
+// TODO
+export function useGlobalIcon(tdIcon: object): Record<string, any> {
   const { globalConfig } = useConfig('icon');
 
   const resultIcon: IconConfig = {};
diff --git a/packages/tdesign-vue-next-chat/CHANGELOG.md b/packages/tdesign-vue-next-chat/CHANGELOG.md
index 6554c2f026..b291552caa 100644
--- a/packages/tdesign-vue-next-chat/CHANGELOG.md
+++ b/packages/tdesign-vue-next-chat/CHANGELOG.md
@@ -5,23 +5,43 @@ toc: false
 spline: explain
 ---
 
-## 🌈 0.4.6 `2025-09-12` 
-
-### 🐞 Bug Fixes
-- `ChatInput`: 修复 `suffixIcon` 传值不是插槽，响应式无效 @liweijie0812 ([#5905](https://github.com/Tencent/tdesign-vue-next/pull/5905))
-
-
-## 🌈 0.4.5 `2025-07-31` 
-
-### 🐞 Bug Fixes
-- `Chat`: 修复`0.4.3` 版本后多语言功能没有正确响应切换的问题 @uyarn ([#5828](https://github.com/Tencent/tdesign-vue-next/pull/5828))
-
-## 🌈 0.4.4 `2025-07-31` 
-
-### 🐞 Bug Fixes
-- `ChatContent`: 错误使用变量导致文案显示异常 @BelinChung ([#5817](https://github.com/Tencent/tdesign-vue-next/pull/5817))
-
-
+## 🌈 0.5.0-alpha.7 `2025-11-18` 
+
+- `Attachments`: 修复按需引用导出组件命名错误的问题
+- `ChatSender`: 修复中文输入法回车触发 `enter` 的错误
+
+## 🌈 0.5.0-alpha.6 `2025-11-12` 
+
+### 🚨 Breaking Change
+- 组件新增：
+  - `Chatbot` 智能对话组件，用于需要快速集成智能客服、问答系统等的AI应用
+  - `ChatMessage` 对话消息体组件、用于在聊天对话中显示单个消息项
+  - `ChatMarkdown` 内容渲染组件，内置支持完善的 Markdown 流式渲染能力，包括 mermaid 等多种格式的渲染
+  - `Attachments` 文件附件组件，用于展示文件附件
+  - `ChatThinking` 思考过程组件，与原 `ChatReasoning` 功能一致
+  - 新组件均基于 Web Components 实现，样式覆盖方式请参考 [自定义样式](/cha/custom-style)
+- 原组件更名：`Chat` 更名为 `ChatList` 对话列表，`ChatAction` 更名为 `ChatActionbar` 对话操作
+- 旧组件移除：`ChatInput`、`ChatReasoning`、`ChatItem` 组件后续版本将移除，如果升级版本请尽量使用对应新组件 ⚠️ 
+- 点击 [0.4.x](https://0_4_6-tdesign-vue-next-chat.surge.sh/chat/getting-started) 查看老版本 Chat 组件的使用文档 
+
+
+## 🌈 0.4.6 `2025-09-12` 
+
+### 🐞 Bug Fixes
+- `ChatInput`: 修复 `suffixIcon` 传值不是插槽，响应式无效 @liweijie0812 ([#5905](https://github.com/Tencent/tdesign-vue-next/pull/5905))
+
+
+## 🌈 0.4.5 `2025-07-31` 
+
+### 🐞 Bug Fixes
+- `Chat`: 修复`0.4.3` 版本后多语言功能没有正确响应切换的问题 @uyarn ([#5828](https://github.com/Tencent/tdesign-vue-next/pull/5828))
+
+## 🌈 0.4.4 `2025-07-31` 
+
+### 🐞 Bug Fixes
+- `ChatContent`: 错误使用变量导致文案显示异常 @BelinChung ([#5817](https://github.com/Tencent/tdesign-vue-next/pull/5817))
+
+
 ## 🌈 0.4.3 `2025-07-18` 
 
 ### 🐞 Bug Fixes
@@ -146,3 +166,4 @@ spline: explain
 - `t-chat` 新增`scroll`事件回调
 - `t-chat-input` 组件添加 `v-model`支持, 添加 `change` 事件
 - `t-chat-input` 新增 `disabled` 属性
+
diff --git a/packages/tdesign-vue-next-chat/global.d.ts b/packages/tdesign-vue-next-chat/global.d.ts
index fd3600cf0c..9e61bcaef4 100644
--- a/packages/tdesign-vue-next-chat/global.d.ts
+++ b/packages/tdesign-vue-next-chat/global.d.ts
@@ -13,6 +13,13 @@ declare module 'vue' {
     TChatReasoning: typeof import('@tdesign-vue-next/chat')['ChatReasoning'];
     TChatAction: typeof import('@tdesign-vue-next/chat')['ChatAction'];
     TChatLoading: typeof import('@tdesign-vue-next/chat')['ChatLoading'];
+    Attachments: typeof import('@tdesign-vue-next/chat')['Attachments'];
+    ChatActionbar: typeof import('@tdesign-vue-next/chat')['ChatActionbar'];
+    ChatList: typeof import('@tdesign-vue-next/chat')['ChatList'];
+    ChatMarkdown: typeof import('@tdesign-vue-next/chat')['ChatMarkdown'];
+    ChatThinking: typeof import('@tdesign-vue-next/chat')['ChatThinking'];
+    Chatbot: typeof import('@tdesign-vue-next/chat')['Chatbot'];
+    ChatMessage: typeof import('@tdesign-vue-next/chat')['ChatMessage'];
   }
 }
 
diff --git a/packages/tdesign-vue-next-chat/package.json b/packages/tdesign-vue-next-chat/package.json
index c144d1965f..d244a6b143 100644
--- a/packages/tdesign-vue-next-chat/package.json
+++ b/packages/tdesign-vue-next-chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tdesign-vue-next/chat",
-  "version": "0.4.6",
+  "version": "0.5.0-alpha.7",
   "title": "@tdesign-vue-next/chat",
   "description": "AI Chat Component for Vue 3",
   "repository": {
@@ -42,9 +42,14 @@
     "marked": "catalog:deps",
     "marked-highlight": "catalog:docs",
     "tdesign-icons-vue-next": "catalog:tdesign",
-    "tdesign-vue-next": "workspace:^"
+    "tdesign-vue-next": "workspace:^",
+    "tdesign-web-components": "~1.2.6",
+    "omi-vueify": "^0.0.12"
+  },
+  "devDependencies": {
+    "tvision-charts-vue-next": "^3.3.13"
   },
   "peerDependencies": {
     "vue": ">=3.1.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/tdesign-vue-next-chat/site/docs/agui.md b/packages/tdesign-vue-next-chat/site/docs/agui.md
new file mode 100644
index 0000000000..9d30a9406c
--- /dev/null
+++ b/packages/tdesign-vue-next-chat/site/docs/agui.md
@@ -0,0 +1,148 @@
+---
+title: 与AG-UI协议集成
+order: 4
+group:
+  title: 快速上手
+  order: 3
+---
+
+## 什么是 AG-UI
+
+**AG-UI（Agent User Interaction Protocol）** 是专为 AI Agent 与前端应用交互设计的标准化协议。它建立了一套统一的通信规范，让前端界面能够与各种 AI 服务无缝对话，就像是 AI 应用的"通用语言"。
+
+AG-UI 采用**事件驱动模型**，通过标准化的事件流实现前后端解耦：
+
+- **统一接口标准**：屏蔽不同 AI 供应商的差异，提供一致的交互体验
+- **实时流式通信**：支持 SSE/WebSocket 等方式的流式数据传输
+- **有状态会话管理**：维护完整的对话上下文和共享状态
+- **工具调用机制**：标准化的工具定义、调用和结果处理流程
+
+## 为什么选择 AG-UI 协议？
+
+### 与传统对比
+
+| 对比维度         | 传统自定义协议                   | AG-UI 标准协议                        |
+| ---------------- | -------------------------------- | ------------------------------------- |
+| **协议标准化**   | 各家自定义格式，互不兼容         | 统一标准，跨服务兼容                  |
+| **事件模型**     | 简单请求-响应，缺乏细粒度控制    | 16 种标准事件，支持复杂交互流程       |
+| **流式传输**     | 需自行设计流式协议和解析逻辑     | 标准化流式事件，开箱即用              |
+| **状态管理**     | 无标准状态同步机制               | Snapshot + Delta 标准模式             |
+| **工具调用**     | 各家格式不同，集成复杂           | 统一工具调用生命周期                  |
+| **迁移适配成本** | 每个 AI 服务需单独开发前端适配层 | 一套前端代码适配所有遵循 AG-UI 的服务 |
+
+### 核心价值
+
+- **统一标准化**：通过统一的事件格式屏蔽底层 AI 服务的差异，一套前端代码可以处理所有遵循 AG-UI 协议的后端服务
+- **组件标准化**：接口协议一致性使得消息渲染、工具调用等核心功能可跨项目复用
+- **可扩展性**：标准化的扩展点，便于添加新功能
+
+## 协议要点
+
+### 事件机制
+
+AG-UI 定义了 16 种标准事件类型，覆盖 AI 交互的完整生命周期：
+
+| 事件分类         | 事件名                                   | 含义                                                        |
+| ---------------- | ---------------------------------------- | ----------------------------------------------------------- |
+| **生命周期事件** | `RUN_STARTED`                            | 开始执行，可显示进度指示                                    |
+|                  | `RUN_FINISHED`                           | 执行完成                                                    |
+|                  | `RUN_ERROR`                              | 执行错误，包含错误信息                                      |
+| **思考过程事件** | `THINKING_START/END`                     | 新的思考过程开始、结束                                      |
+|                  | `THINKING_TEXT_MESSAGE_START/CONTEN/END` | 思考过程文本内容（段）的过程起止，通过 CONTENT 事件增量传输 |
+| **文本消息事件** | `TEXT_MESSAGE_START`                     | 开始新消息，建立 messageId                                  |
+|                  | `TEXT_MESSAGE_CONTENT`                   | 流式文本内容，通过 delta 增量传输                           |
+|                  | `TEXT_MESSAGE_END`                       | 消息结束，可触发后续操作                                    |
+| **思考过程事件** | `THINKING_START`                         | 开始思考阶段                                                |
+|                  | `THINKING_END`                           | 思考结束                                                    |
+| **工具调用事件** | `TOOL_CALL_START`                        | 开始调用工具，显示工具名称                                  |
+|                  | `TOOL_CALL_ARGS`                         | 工具参数，支持流式传输 JSON 片段                            |
+|                  | `TOOL_CALL_END`                          | 工具调用完成                                                |
+|                  | `TOOL_CALL_RESULT`                       | 工具执行结果                                                |
+| **状态管理事件** | `STATE_SNAPSHOT`                         | 完整状态快照，用于初始化或同步                              |
+|                  | `STATE_DELTA`                            | 增量状态更新，基于 JSON Patch（RFC 6902）                   |
+|                  | `MESSAGES_SNAPSHOT`                      | 消息历史快照                                                |
+
+以下是一段符合 AG-UI 协议的事件流响应示例：
+
+```js
+data: {"type": "RUN_STARTED", "runId": "run_456"}
+
+data: {"type": "TEXT_MESSAGE_START", "messageId": "msg_789", "role": "assistant"}
+data: {"type": "TEXT_MESSAGE_CONTENT", "messageId": "msg_789", "delta": "我来帮您查询"}
+
+// 前端可以根据不同的toolCallName定义不同的工具组件来渲染
+data: {"type": "TOOL_CALL_START", "toolCallId": "tool_001", "toolCallName": "weather_query"}
+data: {"type": "TOOL_CALL_ARGS", "toolCallId": "tool_001", "delta": "{\"city\":\"北京\"}"}
+data: {"type": "TOOL_CALL_END", "toolCallId": "tool_001"}
+data: {"type": "TOOL_CALL_RESULT", "toolCallId": "tool_001", "content": "北京今日晴，22°C"}
+
+data: {"type": "TEXT_MESSAGE_CONTENT", "messageId": "msg_789", "delta": "北京的天气"}
+data: {"type": "TEXT_MESSAGE_END", "messageId": "msg_789"}
+
+data: {"type": "RUN_FINISHED", "runId": "run_456"}
+
+```
+
+### 交互流程
+
+AG-UI 基于事件驱动架构，实现前后端的实时双向通信：
+
+#### **基础交互流程**
+
+1. **前端请求**：用户输入 → 封装为`RunAgentInput结构` → 发送到服务端点
+2. **后端处理**：解析请求 → 启动 AI 代理 → 通过 SSE 发送事件流
+3. **前端响应**：接收事件 → 实时更新界面 → 展示处理过程
+4. **Human-in-Loop 流程**：AG-UI 支持人机协作的交互模式，允许在 AI 处理过程中插入人工干预
+
+#### **核心特性**
+
+- **状态共享**：通过`STATE_SNAPSHOT`和`STATE_DELTA`事件实现前后端状态同步
+- **工具双向调用**：前端定义工具，Agent 通过`TOOL_CALL_*`事件主动调用
+- **实时流式传输**：支持文本、思考过程、工具调用的流式展示
+- **上下文维护**：threadId/runId/stepId 体系维护完整的对话上下文
+
+这些能力构成了 AG-UI 成为生产级 Agent 应用的关键基础。
+
+## TDesign Chat 集成方式
+
+### 基础配置
+
+只需要简单配置`protocol: 'agui'`即可开启 TDesign Chat UI 与 AG-UI 协议的无缝对接，内置了对话生命周期`RUN_*`、思考过程事件`THINKING_*`、文本事件`TEXT_MESSAGE_*`和常见`TOOL_CALL_*`事件比如 search 搜索等的渲染支持, 也提供了标准消息结构的转换方法`AGUIAdapter.convertHistoryMessages`用于回填历史消息。
+
+```javascript
+<template>
+<t-chatbot :chat-service-config="chatServiceConfig" />
+</template>
+<script setup>
+export const chatServiceConfig = {
+    endpoint: '/api/agui/chat',
+    protocol: 'agui', // 启用AG-UI协议
+    stream: true,
+    // 可选：自定义事件处理
+    onMessage: (chunk) => {
+      // 返回null使用内置AG-UI解析
+      // 返回自定义内容覆盖内置解析
+      return null;
+    },
+}
+</script>
+```
+
+### 高级功能
+
+TDesign Chat 为 AG-UI 协议提供了两个专用 Hook：
+
+- **`useAgentToolcall`**：用于注册和管理工具调用组件，当 Agent 发送`TOOL_CALL_*`事件时自动渲染对应的工具组件
+- **`useAgentState`**：用于订阅 AG-UI 协议的状态事件，支持`STATE_SNAPSHOT`和`STATE_DELTA`事件的自动处理和状态同步
+
+详细的使用方法请参考[ChatBot 组件文档](/chat/components/chatbot#agui)。
+
+## 总结
+
+AG-UI 协议为 AI 应用开发提供了完整的标准化解决方案，通过采用 AG-UI 协议，TDesign Chat 为开发者提供了构建专业级 AI 交互应用的完整工具链，让 AI 功能集成变得简单、高效、可维护。
+
+## 相关资源
+
+- [AG-UI 官方文档](https://docs.ag-ui.com/)
+- [TDesign Chat 组件文档](/chat/components/chatbot)
+- [快速开始指南](/chat/docs/getting-started)
diff --git a/packages/tdesign-vue-next-chat/site/docs/getting-started.md b/packages/tdesign-vue-next-chat/site/docs/getting-started.md
index 8c4799bb25..ec7950e54b 100644
--- a/packages/tdesign-vue-next-chat/site/docs/getting-started.md
+++ b/packages/tdesign-vue-next-chat/site/docs/getting-started.md
@@ -1,6 +1,6 @@
 ---
-title: TD Chat for AI
-description: TDesign适配桌面端的AI Chat组件库，适合在 vue3.x 技术栈中的AI chat组件。后续将推出适用于React技术栈的chat组件。
+title: 快速开始
+description: TDesign 适配桌面端的 AI Chat 组件库，适合在 Vue3.x 技术栈中的 AI Chat 组件。
 spline: ai
 ---
 
@@ -11,7 +11,19 @@ spline: ai
 推荐使用 npm 方式进行开发
 
 ```shell
-npm i @tdesign-vue-next/chat
+npm i @tdesign-vue-next/chat@alpha
+```
+
+### 使用 yarn 安装
+
+```shell
+yarn add @tdesign-vue-next/chat@alpha
+```
+
+### 使用 pnpm 安装
+
+```shell
+pnpm add @tdesign-vue-next/chat@alpha
 ```
 
 ## 使用
@@ -50,11 +62,9 @@ app.use(TDesign).use(TDesignChat);
 
 ```js
 import {
-  Chat as TChat,
-  ChatAction as TChatAction,
-  ChatContent as TChatContent,
-  ChatInput as TChatInput,
-  ChatItem as TChatItem,
+  ChatList as TChatList,
+  ChatActionBar as TChatActionBar,
+  ChatMarkdown as TChatMarkdown,
 } from '@tdesign-vue-next/chat';
 ```
 
@@ -62,10 +72,11 @@ import {
    ⚠️ 如果按需使用的同时，需要通过主题生成器导出主题覆盖全局样式，建议请在 `main.ts` 按需注册使用 `createApp(App).use(TChatAction)`
 </div>
 
-
 ### 通过插件按需引用使用
 
-除此之外，也可以使用 `unplugin-vue-components` 和 `unplugin-auto-import` 来实现自动导入：
+除此之外，部分组件也可以使用 `unplugin-vue-components` 和 `unplugin-auto-import` 来实现自动导入
+
+> `TDesignResolver` 支持的配置，可以点击此[链接](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/auto-import-resolver/README.md#%E9%80%89%E9%A1%B9)。
 
 您仍需在项目引入组件库的少量全局样式变量
 
@@ -77,7 +88,7 @@ import 'tdesign-vue-next/es/style/index.css';
 const app = createApp(App);
 ```
 
-并安装 `@tdesign-vue-next/auto-import-resolver` 和两个unplugin相关的第三方包
+并安装 `@tdesign-vue-next/auto-import-resolver` 和两个 unplugin 相关的第三方包
 
 ```bash
 npm install -D @tdesign-vue-next/auto-import-resolver unplugin-vue-components unplugin-auto-import
@@ -95,14 +106,18 @@ export default {
   plugins: [
     // ...
     AutoImport({
-      resolvers: [TDesignResolver({
-        library: 'chat'
-      })],
+      resolvers: [
+        TDesignResolver({
+          library: 'chat',
+        }),
+      ],
     }),
     Components({
-      resolvers: [TDesignResolver({
-        library: 'chat'
-      })],
+      resolvers: [
+        TDesignResolver({
+          library: 'chat',
+        }),
+      ],
     }),
   ],
 };
@@ -118,43 +133,103 @@ module.exports = {
   // ...
   plugins: [
     AutoImport.default({
-      resolvers: [TDesignResolver({
-        library: 'chat'
-      })],
+      resolvers: [
+        TDesignResolver({
+          library: 'chat',
+        }),
+      ],
     }),
     Components.default({
-      resolvers: [TDesignResolver({
-        library: 'chat'
-      })],
+      resolvers: [
+        TDesignResolver({
+          library: 'chat',
+        }),
+      ],
     }),
   ],
 };
 ```
 
-> `TDesignResolver` 支持的配置，可以点击此[链接](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/auto-import-resolver/README.md#%E9%80%89%E9%A1%B9)。
+## 配置服务
 
+TDesign Chat 支持两种后端 AI Agent 服务返回数据协议模式：**自定义协议**和**AG-UI 标准协议**。您可以根据后端服务的实际情况选择合适的协议模式。
 
-## 多语言配置
+### 自定义协议模式
 
-`@tdesign-vue-next/chat` 的所有组件都内置支持了多语言配置的能力。
+适用于已有后端服务或需要自定义数据结构的场景，您的后端服务只需要返回标准 SSE 格式即可。
 
-如果您有多语言的需求，可以通过 `tdesign-vue-next` 提供的[全局配置能力](https://tdesign.tencent.com/vue-next/components/config-provider#%E5%9B%BD%E9%99%85%E5%8C%96%E9%85%8D%E7%BD%AE)进行配置。
+```js
+// 自定义后端接口（/api/chat）返回案例
+data: {"type": "think", "content": "正在分析您的问题..."}
+data: {"type": "text", "content": "我是**腾讯云**助手"}
+data: {"type": "text", "content": "很高兴为您服务！"}
+```
 
-```html
-<template>
-  <config-provider :global-config="enConfig">
-    <t-chat />
-  </config-provider>
-</template>
-<script setup>
-import { ConfigProvider } from '@tdesign-vue-next/chat/es/config-provider';
-import enConfig from 'tdesign-vue-next/es/locale/en_US';
-</script>
+接下来，前端通过配置 `onMessage` 回调来解析流式数据, 将自定义数据映射为组件所需格式。
+
+```javascript
+const chatServiceConfig = {
+  endpoint: '/api/chat',
+  onMessage: (chunk) => {
+    const { type, content } = chunk.data;
+    switch (type) {
+      case 'text':
+        return {
+          type: 'markdown',
+          data: content,
+        };
+      case 'think':
+        return {
+          type: 'thinking',
+          data: {
+            title: '思考中...',
+            text: content,
+          },
+        };
+      default:
+        return null;
+    }
+  },
+};
+```
+
+### AG-UI 标准协议
+
+**AG-UI 协议**是专为 AI 代理与前端应用交互设计的标准化轻量级协议，内置支持工具调用、状态管理、多步骤任务等高级功能。AG-UI 协议支持 16 种标准化事件类型，组件会自动解析并渲染，包括对话生命周期`RUN_*`、文本消息`TEXT_MESSAGE_*`、思考过程`THINKING_*`、工具调用`TOOL_CALL_*`、状态更新`STATE_*`等。
+
+TDesign Chat 内置支持**AG-UI 协议数据双向转换**，符合该协议的后端 Agent 服务，可以无缝接入使用，只需在配置中开启即可。详细介绍见[与 AG-UI 协议集成](/react-aigc/agui)
+
+```js
+// 符合AG-UI协议的后端接口（/api/agui/chat）返回案例
+data: {"type": "RUN_STARTED", "runId": "run_456"}
+data: {"type": "TEXT_MESSAGE_CONTENT", "delta": "正在处理您的请求..."}
+data: {"type": "TOOL_CALL_START", "toolCallName": "search"}
+data: {"type": "TOOL_CALL_RESULT", "content": "查询结果"}
+data: {"type": "RUN_FINISHED", "runId": "run_456"}
 ```
 
+```javascript
+const chatServiceConfig = {
+  endpoint: '/api/agui/chat',
+  protocol: 'agui', // 启用AG-UI协议
+  stream: true,
+};
+```
+
+### 协议选择建议
+
+| 场景               | 推荐协议   | 理由                              |
+| ------------------ | ---------- | --------------------------------- |
+| 快速集成到现有服务 | 自定义协议 | 灵活适配现有数据结构              |
+| 构建复杂 AI 应用   | AG-UI 协议 | 业界标准、功能完整、扩展性强      |
+| 多工具调用场景     | AG-UI 协议 | 内置工具注册、调用及状态管理 Hook |
+| 简单问答场景       | 自定义协议 | 配置简单、开发快速                |
+
+更多详细配置和示例请参考[组件文档](/chat/components/chatbot)。
+
 ## 编辑器提示
 
-安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
+安装注册 TDesign 之后，在开发项目时，可以配合插件在 VSCode 等主流编辑器中达到提示组件名及 API 的效果。
 
 推荐安装 `volar`，并在项目的 tsconfig.json 的 `includes` 属性中增加`node_modules/@tdesign-vue-next/chat/global.d.ts`，即可实现该效果。
 
diff --git a/packages/tdesign-vue-next-chat/site/docs/intro.md b/packages/tdesign-vue-next-chat/site/docs/intro.md
new file mode 100644
index 0000000000..9cc11d97ac
--- /dev/null
+++ b/packages/tdesign-vue-next-chat/site/docs/intro.md
@@ -0,0 +1,59 @@
+---
+title: 概述
+order: 3
+group:
+  title: 概述
+  order: 1
+description: TDesign Chat 智能对话组件库，为 AI 应用提供专业级聊天界面解决方案
+spline: ai
+---
+
+## 什么是 TDesign Chat 智能对话
+
+TDesign Chat 是腾讯 TDesign 团队推出的专业级智能对话组件库，专为 AI 应用场景设计。它提供了完整的聊天界面解决方案，让开发者能够快速构建智能客服、问答系统、代码助手、任务规划等 AI 聊天应用。
+
+## 核心优势
+
+### 📦 开箱即用，封装度高
+
+- **零配置启动**：无需复杂配置，只需简单几行代码即可拥有功能完整的专业级聊天界面
+- **核心功能完备**：内置消息发送接收控制、流式展示、自动滚动、消息状态处理等核心功能
+- **组件丰富**：内置支持多种消息渲染组件，包括 Markdown 文本、思考过程、建议问题、附件等
+- **智能交互体验**：自动处理用户输入、消息排版、界面响应等交互细节
+- **即插即用组件**：提供完整的组件生态，继承 TDesign 设计风格，支持快速集成到现有项目中
+
+### 🔄 双模式传输支持
+
+- **SSE 流式传输**：支持 Server-Sent Events 实时消息流，提供打字机效果的流畅体验
+- **传统 HTTP 模式**：兼容标准 HTTP 请求响应，适配现有后端架构
+
+### 🔌 **协议灵活适配**
+
+- **自定义协议**：支持服务端自定义数据结构，灵活适配各种后端实现
+- **AG-UI 协议**：内置对业界标准 `Agent User Interaction(AG-UI)` 协议的完整支持
+
+### 🛠️ 高度可定制化
+
+- **数据解析结构**：完全自定义消息数据的解析和处理逻辑
+- **UI 渲染组件**：支持自定义消息渲染组件和样式
+- **插槽机制**：预留多个插槽位置，实现灵活的内容渲染扩展
+
+## 接入案例
+
+### 知识问答助手
+
+构建企业内部知识库问答系统，帮助员工快速获取公司政策、产品信息、技术文档等知识内容。
+
+### 任务规划工具
+
+构建智能任务规划和项目管理助手，帮助用户制定计划、分解任务、跟踪进度。
+
+<img src="https://tdesign.gtimg.com/site/aigc-demo.png" />
+
+更多的实用案例在[组件介绍](/chat/components/chatbot)部分提供。
+
+## 开始使用
+
+TDesign Chat 让 AI 聊天应用的开发变得简单高效。无论您是要快速搭建原型，还是构建复杂的企业级应用，都能找到合适的解决方案。
+
+立即开始您的 AI 聊天应用开发之旅！
diff --git a/packages/tdesign-vue-next-chat/site/docs/style.md b/packages/tdesign-vue-next-chat/site/docs/style.md
new file mode 100644
index 0000000000..7e3b2e5f0e
--- /dev/null
+++ b/packages/tdesign-vue-next-chat/site/docs/style.md
@@ -0,0 +1,87 @@
+---
+title: 自定义样式
+description: 样式自定义指南
+spline: explain
+isGettingStarted: true
+---
+
+## 概述
+
+TDesign AIGC 系列组件底层UI基于 Web Components 技术构建，提供了灵活的样式自定义方案。由于 Web Components 的 Shadow DOM 特性，传统的 CSS 选择器无法直接穿透组件内部样式，因此我们提供了两种主要的样式自定义方式：
+
+1. **CSS 自定义属性（CSS Variables）**：修改预定义的 CSS 变量来调整组件样式
+2. **CSS Parts**：通过 `::part()` 伪元素选择器直接修改组件内部元素样式[了解更多](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::part)
+
+## 方式一：CSS 自定义属性（优先推荐）
+
+组件内部定义了丰富的 CSS 自定义属性，你可以通过重新定义这些变量来自定义样式，以设置对话输入框的背景色为例：
+
+```css
+/* 全局定义 */
+:root {
+  --td-chat-input-background: red;
+}
+
+/* 针对特定组件实例内部定义，优先级更高 */
+.my-chat-sender {
+  --td-chat-input-background: blue;
+}
+
+```
+
+## 方式二：CSS Parts
+
+CSS Parts 允许你直接选择和修改 Web Components 内部的特定元素。组件通过 `exportparts` 属性暴露内部元素[了解更多](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/exportparts)，你可以使用 `::part()` 伪元素选择器来修改这些元素的样式。
+
+以设置对话输入框圆角为例，先在chrome调试器中查看内部元素style，找到计划要设置样式的元素节点对应的part属性`t-chat__input__content`：
+
+```html
+<t-chat-sender class="my-chat-sender" exportparts="t-chat__input, t-chat__input__content">
+  <div class="t-chat__input" part="t-chat__input">
+    <div class="t-chat__input__content" part="t-chat__input__content"></div>
+  </div>
+</t-chat-sender>
+
+```
+
+```css
+.my-chat-sender::part(t-chat__input__content) {
+  border-radius: 2px;
+}
+```
+
+## 最佳实践
+
+在实际项目中，你可以组合使用上面两种方式来实现更精细的样式控制，建议优先使用 CSS 变量进行基础样式调整，在需要精细控制时再使用 CSS Parts。具体如下：
+
+### 1. 优先使用 CSS 变量
+- CSS 变量提供了更好的一致性和可维护性
+- 支持动态主题切换
+- 性能更好，避免了复杂的选择器
+
+### 2. CSS Parts 用于精细控制
+- 当未找到合适的 CSS 变量或者无法满足需求时使用 CSS Parts
+- 可以访问伪元素和伪类
+
+比如，如果希望改变对话输入框字体大小和hover态 ，可以这样写：
+
+```css
+.accessible-chat {
+  --td-chat-input-font-size: 16px;
+}
+```
+
+```css
+.accessible-chat chat-sender::part(t-textarea__inner):hover {
+  outline: 2px solid #0052d9;
+}
+```
+
+
+## 常见问题
+
+### Q: 为什么我的 CSS 选择器不生效？
+A: 组件内部有使用 Shadow DOM，外部 CSS 无法直接穿透。请使用 CSS 变量或 CSS Parts 的方式修改。
+
+### Q: 如何知道组件支持哪些 CSS 变量？
+A: Chrome Style查找元素样式，或查看[仓库内组件的样式文件](https://github.com/TDesignOteam/tdesign-web-components/blob/develop/src/chatbot/style/_var.less)（_var.less），所有以 `--td-` 开头的都是可自定义的变量。
diff --git a/packages/tdesign-vue-next-chat/site/index.html b/packages/tdesign-vue-next-chat/site/index.html
index 35a8a017af..bff156e259 100644
--- a/packages/tdesign-vue-next-chat/site/index.html
+++ b/packages/tdesign-vue-next-chat/site/index.html
@@ -1,35 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>TDesign Web Vue Next</title>
-  <meta name="theme-color" content="#ffffff">
-  <link rel="icon" href="/favicon.ico">
-  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
-  <meta name="msapplication-TileColor" content="#FFFFFF">
-  <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
-  <!--[if IE]>
-    <style>
-      #app {
-        display: none;
-      }
-    </style>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TDesign AI Chat for Vue 3</title>
+    <meta name="theme-color" content="#ffffff" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
+    <meta name="msapplication-TileColor" content="#FFFFFF" />
+    <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF" />
+    <!--[if IE]>
+      <style>
+        #app {
+          display: none;
+        }
+      </style>
     <![endif]-->
-</head>
+  </head>
 
-<body>
-  <!--[if IE]>
+  <body>
+    <!--[if IE]>
       <h1 style="position: absolute; width: 100%; text-align:center; top: 45%">
         建议使用 <a href="https://www.google.cn/chrome/">Chrome</a><
       /h1>
     <![endif]-->
 
-  <td-stats></td-stats>
-  <div id="app"></div>
-  <script type="module" src="./src/main.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+    <td-stats></td-stats>
+    <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>
diff --git a/packages/tdesign-vue-next-chat/site/package.json b/packages/tdesign-vue-next-chat/site/package.json
index 57b34bf0d7..e9ff55f8b3 100644
--- a/packages/tdesign-vue-next-chat/site/package.json
+++ b/packages/tdesign-vue-next-chat/site/package.json
@@ -17,7 +17,7 @@
     "@tdesign/pro-components-chat": "workspace:^",
     "@tdesign-vue-next/chat": "workspace:^",
     "semver": "catalog:docs",
-    "@tdesign/site-components": "catalog:tdesign",
+    "@tdesign/site-components": "0.18.0-alpha.5",
     "tdesign-theme-generator": "catalog:tdesign",
     "vue": "catalog:deps",
     "vue-router": "catalog:deps",
diff --git a/packages/tdesign-vue-next-chat/site/plugin-doc/md-to-vue.js b/packages/tdesign-vue-next-chat/site/plugin-doc/md-to-vue.js
index e886b313c5..e7b85c35ee 100644
--- a/packages/tdesign-vue-next-chat/site/plugin-doc/md-to-vue.js
+++ b/packages/tdesign-vue-next-chat/site/plugin-doc/md-to-vue.js
@@ -171,11 +171,11 @@ async function customRender({ source, file, md }) {
   };
 
   // 渲染 live demo
-  if (pageData.usage && pageData.isComponent && pageData.title === 'Chat') {
+  if (pageData.usage && pageData.isComponent) {
     const usageObj = compileUsage({
       componentName,
       usage: pageData.usage,
-      demoPath: joinProComponentsRoot(`chat/_usage/index.vue`),
+      demoPath: joinProComponentsRoot(`chat/${componentName}/_usage/index.vue`),
     });
     if (usageObj) {
       mdSegment.usage = usageObj;
diff --git a/packages/tdesign-vue-next-chat/site/plugin-doc/transforms.js b/packages/tdesign-vue-next-chat/site/plugin-doc/transforms.js
index eddc3a7e03..96f7aa51b4 100644
--- a/packages/tdesign-vue-next-chat/site/plugin-doc/transforms.js
+++ b/packages/tdesign-vue-next-chat/site/plugin-doc/transforms.js
@@ -45,16 +45,22 @@ export default {
       return `\n::: demo _example/${demoFileName} ${componentName}\n:::\n`;
     });
     source.replace(/:::\s*demo\s+([\\/.\w-]+)/g, (demoStr, relativeDemoPath) => {
-      const isMockDemoDisplay = ['_example/base', '_example/chat-drag', '_example/chat-drawer'].includes(
-        relativeDemoPath,
-      );
-      const isMockReasoningDemoDisplay = [
-        '_example/reasoning',
-        '_example/reasoning-drag',
-        '_example/reasoning-drawer',
-      ].includes(relativeDemoPath);
+      // 需要携带 mock-data/sseRequest 的示例
+      const isMockDemoDisplay =
+        ['_example/base', '_example/chat-drag', '_example/chat-drawer'].includes(relativeDemoPath) &&
+        ['chat'].includes(componentName);
+
+      // 需要携带 mock-data/sseRequest-reasoning 的示例
+      const isMockReasoningDemoDisplay =
+        ['_example/reasoning', '_example/reasoning-drag', '_example/reasoning-drawer'].includes(relativeDemoPath) &&
+        ['chat', 'chat-reasoning'].includes(componentName);
+      const isComponentDemoDisplay =
+        ['_example/agui', '_example/code'].includes(relativeDemoPath) && ['chatbot'].includes(componentName);
+
       const mockDemoPath = `_example/mock-data/sseRequest.ts`;
       const mockReasoningDemoPath = `_example/mock-data/sseRequest-reasoning.ts`;
+      const toolCallDemoPath = `_example/components/Toolcall.vue`;
+      const loginDemoPath = `_example/components/Login.vue`;
 
       const demoPathOnlyLetters = relativeDemoPath.replace(/[^a-zA-Z\d]/g, '');
       const demoDefName = `Demo${demoPathOnlyLetters}`;
@@ -67,6 +73,10 @@ export default {
         demoCodesImports[demoMockDataDefName] = `import ${demoMockDataDefName} from './${mockDemoPath}?raw'`;
       if (isMockReasoningDemoDisplay)
         demoCodesImports[demoMockDataDefName] = `import ${demoMockDataDefName} from './${mockReasoningDemoPath}?raw'`;
+      if (isComponentDemoDisplay) {
+        demoCodesImports[demoMockDataDefName] = `import ${demoMockDataDefName} from './${toolCallDemoPath}?raw'`;
+        demoCodesImports[demoMockDataDefName] = `import ${demoMockDataDefName} from './${loginDemoPath}?raw'`;
+      }
     });
 
     return source;
diff --git a/packages/tdesign-vue-next-chat/site/site.config.mjs b/packages/tdesign-vue-next-chat/site/site.config.mjs
index ef0c1aa8f8..f6a1a9cb25 100644
--- a/packages/tdesign-vue-next-chat/site/site.config.mjs
+++ b/packages/tdesign-vue-next-chat/site/site.config.mjs
@@ -1,59 +1,97 @@
 const componentDocs = [
   {
-    title: 'Chat 对话',
-    titleEn: 'Chat',
-    name: 'chat',
-    path: '/chat/components/chat',
-    component: () => import('@tdesign/pro-components-chat/chat.md'),
+    title: 'Chatbot 智能对话',
+    titleEn: 'Chatbot',
+    name: 'Chatbot',
+    path: '/chat/components/chatbot',
+    component: () => import('@tdesign/pro-components-chat/chatbot/chatbot.md'),
   },
   {
-    title: 'ChatItem 对话单元',
-    titleEn: 'ChatItem',
-    name: 'ChatItem',
-    path: '/chat/components/chat-item',
-    component: () => import('@tdesign/pro-components-chat/chat-item.md'),
+    title: 'ChatSender 对话输入',
+    titleEn: 'ChatSender',
+    name: 'ChatSender',
+    path: '/chat/components/chat-sender',
+    component: () => import('@tdesign/pro-components-chat/chat-sender/chat-sender.md'),
   },
   {
-    title: 'ChatContent 对话内容',
+    title: 'ChatMessage 对话消息体',
+    titleEn: 'ChatMessage',
+    name: 'ChatMessage',
+    path: '/chat/components/chat-message',
+    component: () => import('@tdesign/pro-components-chat/chat-message/chat-message.md'),
+  },
+  {
+    title: 'ChatActionbar 对话操作栏',
+    titleEn: 'ChatActionbar',
+    name: 'ChatActionbar',
+    path: '/chat/components/chat-actionbar',
+    component: () => import('@tdesign/pro-components-chat/chat-actionbar/chat-actionbar.md'),
+  },
+  {
+    title: 'ChatMarkdown Markdown内容',
+    titleEn: 'ChatMarkdown',
+    name: 'ChatMarkdown',
+    path: '/chat/components/chat-markdown',
+    component: () => import('@tdesign/pro-components-chat/chat-markdown/chat-markdown.md'),
+  },
+  {
+    title: 'ChatThinking 思考过程',
+    titleEn: 'ChatThinking',
+    name: 'ChatThinking',
+    path: '/chat/components/chat-thinking',
+    component: () => import('@tdesign/pro-components-chat/chat-thinking/chat-thinking.md'),
+  },
+  {
+    title: 'ChatLoading 对话加载',
+    titleEn: 'ChatLoading',
+    name: 'ChatLoading',
+    path: '/chat/components/chat-loading',
+    component: () => import('@tdesign/pro-components-chat/chat-loading/chat-loading.md'),
+  },
+  {
+    title: 'Attachments 文件附件',
+    titleEn: 'Attachments',
+    name: 'Attachments',
+    path: '/chat/components/attachments',
+    component: () => import('@tdesign/pro-components-chat/attachments/attachments.md'),
+  },
+  {
+    title: 'ChatList 对话列表',
+    titleEn: 'ChatList',
+    name: 'ChatList',
+    path: '/chat/components/chat-list',
+    component: () => import('@tdesign/pro-components-chat/chat-list/chat-list.md'),
+  },
+  {
+    title: 'ChatContent 对话正文',
     titleEn: 'ChatContent',
     name: 'ChatContent',
     path: '/chat/components/chat-content',
-    component: () => import('@tdesign/pro-components-chat/chat-content.md'),
+    component: () => import('@tdesign/pro-components-chat/chat-content/chat-content.md'),
   },
   {
-    title: 'ChatReasoning 思考过程',
-    titleEn: 'ChatReasoning',
-    name: 'ChatReasoning',
-    path: '/chat/components/chat-reasoning',
-    component: () => import('@tdesign/pro-components-chat/chat-reasoning.md'),
+    title: 'ChatItem 对话单元',
+    titleEn: 'ChatItem',
+    name: 'ChatItem',
+    path: '/chat/components/chat-item',
+    customTag: '待废弃',
+    component: () => import('@tdesign/pro-components-chat/chat-item/chat-item.md'),
   },
   {
     title: 'ChatInput 对话输入',
     titleEn: 'ChatInput',
     name: 'ChatInput',
     path: '/chat/components/chat-input',
-    component: () => import('@tdesign/pro-components-chat/chat-input.md'),
-  },
-  {
-    title: 'ChatSender 对话输入框',
-    titleEn: 'ChatSender',
-    name: 'ChatSender',
-    path: '/chat/components/chat-sender',
-    component: () => import('@tdesign/pro-components-chat/chat-sender.md'),
+    customTag: '待废弃',
+    component: () => import('@tdesign/pro-components-chat/chat-input/chat-input.md'),
   },
   {
-    title: 'ChatAction 对话操作',
-    titleEn: 'ChatAction',
-    name: 'ChatAction',
-    path: '/chat/components/chat-action',
-    component: () => import('@tdesign/pro-components-chat/chat-action.md'),
-  },
-  {
-    title: 'ChatLoading 对话加载',
-    titleEn: 'ChatLoading',
-    name: 'ChatLoading',
-    path: '/chat/components/chat-loading',
-    component: () => import('@tdesign/pro-components-chat/chat-loading.md'),
+    title: 'ChatReasoning 思考过程',
+    titleEn: 'ChatReasoning',
+    name: 'ChatReasoning',
+    path: '/chat/components/chat-reasoning',
+    customTag: '待废弃',
+    component: () => import('@tdesign/pro-components-chat/chat-reasoning/chat-reasoning.md'),
   },
 ];
 
@@ -63,6 +101,13 @@ export const docs = [
     titleEn: 'Start',
     type: 'doc',
     children: [
+      {
+        title: '概述',
+        titleEn: 'Overview',
+        name: 'overview',
+        path: '/chat/overview',
+        component: () => import('./docs/intro.md'),
+      },
       {
         title: '快速开始',
         titleEn: 'Getting Started',
@@ -83,6 +128,13 @@ export const docs = [
         path: '/chat/sse',
         component: () => import('./docs/sse.md'),
       },
+      {
+        title: '与AG-UI协议集成',
+        titleEn: 'AG-UI',
+        name: 'agui',
+        path: '/chat/agui',
+        component: () => import('./docs/agui.md'),
+      },
     ],
   },
   {
@@ -106,10 +158,17 @@ export const docs = [
         component: () => import('@tdesign/common/dark-mode.md'),
         componentEn: () => import('@tdesign/common/dark-mode.en-US.md'),
       },
+      {
+        title: '自定义样式',
+        titleEn: 'Style Customization',
+        name: 'custom-style',
+        path: '/cha/custom-style',
+        component: () => import('./docs/style.md'),
+      },
     ],
   },
   {
-    title: '数据展示',
+    title: '智能对话',
     titleEn: 'Data Display',
     type: 'component',
     children: componentDocs,
diff --git a/packages/tdesign-vue-next-chat/site/src/components/components.jsx b/packages/tdesign-vue-next-chat/site/src/components/components.jsx
index 9c16f82fad..c86f30fc0e 100644
--- a/packages/tdesign-vue-next-chat/site/src/components/components.jsx
+++ b/packages/tdesign-vue-next-chat/site/src/components/components.jsx
@@ -1,7 +1,6 @@
 import { defineComponent } from 'vue';
-import semver from 'semver';
 import siteConfig from '../../site.config';
-import { tdesignVueNextPackageJson } from '@tdesign/internal-utils/package-json';
+import { tdesignVueNextChatPackageJson } from '@tdesign/internal-utils/package-json';
 
 const { docs, enDocs } = JSON.parse(JSON.stringify(siteConfig).replace(/component:.+/g, ''));
 
@@ -10,12 +9,17 @@ const docsMap = {
   en: enDocs,
 };
 
+const currentVersion = tdesignVueNextChatPackageJson.version;
+
 export default defineComponent({
   data() {
     return {
       loaded: false,
-      version: tdesignVueNextPackageJson.version,
-      options: [],
+      version: tdesignVueNextChatPackageJson.version,
+      options: [
+        { label: '0.4.6', value: '0_4_6' },
+        { label: '0.4.5', value: '0_4_5' },
+      ],
     };
   },
 
@@ -52,10 +56,10 @@ export default defineComponent({
     },
     changeVersion(version) {
       if (version === currentVersion) return;
-      const historyUrl = `//${version}-tdesign-vue-next.surge.sh`;
+      const historyUrl = `//${version}-tdesign-vue-next-chat.surge.sh`;
       window.open(historyUrl, '_blank');
       this.$nextTick(() => {
-        this.version = tdesignVueNextPackageJson.version;
+        this.version = tdesignVueNextChatPackageJson.version;
       });
     },
   },
@@ -63,8 +67,17 @@ export default defineComponent({
   render() {
     return (
       <td-doc-layout>
-        <td-header ref="tdHeader" slot="header" />
-        <td-doc-aside ref="tdDocAside" title="TD Chat for AI"></td-doc-aside>
+        <td-header ref="tdHeader" slot="header" disabledLocale={true} />
+        <td-doc-aside ref="tdDocAside" title="TDesign Chat for Vue">
+          <t-select
+            id="historyVersion"
+            slot="extra"
+            value={this.version}
+            popupProps={{ zIndex: 500, attach: this.getAttach }}
+            onChange={this.changeVersion}
+            options={this.options}
+          />
+        </td-doc-aside>
         <router-view style={this.contentStyle} onLoaded={this.contentLoaded} />
         <td-theme-generator />
       </td-doc-layout>
diff --git a/packages/tdesign-vue-next-chat/site/src/components/stackblitz/content.js b/packages/tdesign-vue-next-chat/site/src/components/stackblitz/content.js
index d2421cbd7b..e225d7b51f 100644
--- a/packages/tdesign-vue-next-chat/site/src/components/stackblitz/content.js
+++ b/packages/tdesign-vue-next-chat/site/src/components/stackblitz/content.js
@@ -87,6 +87,9 @@ export const packageJSONContent = JSON.stringify(
       '@vue/compiler-sfc': catalogs.bundle['@vue/compiler-sfc'],
       '@vitejs/plugin-vue': catalogs.bundle['@vitejs/plugin-vue'],
       '@vitejs/plugin-vue-jsx': catalogs.bundle['@vitejs/plugin-vue-jsx'],
+      'tdesign-web-components': '1.1.18',
+      'omi-vueify': '^0.0.12',
+      'tvision-charts-vue-next': '^3.3.13',
     },
   },
   null,
@@ -163,11 +166,15 @@ export const mockDataReasoningContent = `export class MockSSEResponse {
   private encoder = new TextEncoder();
   private stream: ReadableStream<Uint8Array>;
   private error: boolean;
+  private currentPhase: 'reasoning' | 'content' = 'reasoning';
 
   constructor(
-    private data: string,
-    private delay: number = 300,
-    error = false, // 新增参数，默认为false
+    private data: {
+      reasoning: string; // 推理内容
+      content: string; // 正式内容
+    },
+    private delay: number = 100,
+    error = false,
   ) {
     this.error = error;
 
@@ -179,28 +186,53 @@ export const mockDataReasoningContent = `export class MockSSEResponse {
           setTimeout(() => this.pushData(), this.delay); // 延迟开始推送数据
         }
       },
-      cancel(reason) {
-        console.log('Stream canceled', reason);
-      },
+      cancel() {},
     });
   }
 
   private pushData() {
-    if (this.data.length === 0) {
-      this.controller.close();
-      return;
-    }
     try {
-      const chunk = this.data.slice(0, 1);
-      this.data = this.data.slice(1);
+      if (this.currentPhase === 'reasoning') {
+        // 推送推理内容
+        if (this.data.reasoning.length > 0) {
+          const chunk = JSON.stringify({
+            delta: {
+              reasoning_content: this.data.reasoning.slice(0, 1),
+              content: '',
+            },
+            finished: false,
+          });
+          this.controller.enqueue(this.encoder.encode(chunk));
+          this.data.reasoning = this.data.reasoning.slice(1);
+          // 设置下次推送
+          setTimeout(() => this.pushData(), this.delay);
+        } else {
+          // 推理内容推送完成，切换到正式内容
+          this.currentPhase = 'content';
+          setTimeout(() => this.pushData(), this.delay); // 立即开始推送正式内容
+          return;
+        }
+      }
 
-      this.controller.enqueue(this.encoder.encode(chunk));
+      if (this.currentPhase === 'content') {
+        // 推送正式内容
+        if (this.data.content.length > 0) {
+          const chunk = JSON.stringify({
+            delta: {
+              reasoning_content: '',
+              content: this.data.content.slice(0, 1),
+            },
+            finished: this.data.content.length === 1, // 最后一个字符时标记完成
+          });
+          this.controller.enqueue(this.encoder.encode(chunk));
+          this.data.content = this.data.content.slice(1);
 
-      if (this.data.length > 0) {
-        setTimeout(() => this.pushData(), this.delay);
-      } else {
-        // 数据全部发送完毕后关闭流
-        setTimeout(() => this.controller.close(), this.delay);
+          // 设置下次推送
+          setTimeout(() => this.pushData(), this.delay);
+        } else {
+          setTimeout(() => this.controller.close(), this.delay);
+          return;
+        }
       }
     } catch {}
   }
@@ -222,3 +254,150 @@ export const mockDataReasoningContent = `export class MockSSEResponse {
   }
 }
 `;
+
+export const componentToolcallDemoContent = `<template>
+  <t-collapse style="margin: 8px 0">
+    <t-collapse-panel :header="panelHeader" :header-right-content="() => renderStatusTag(status)">
+      <!-- 搜索工具的特殊渲染 -->
+      <div v-if="toolCallName === 'search' && searchResult">
+        <div style="font-size: 13px; color: #666; margin-bottom: 8px">
+          {{ searchResult.title }}
+        </div>
+        <div v-if="searchResult.references && searchResult.references.length > 0">
+          <div
+            v-for="(ref, idx) in searchResult.references"
+            :key="idx"
+            style="font-size: 12px; margin-bottom: 2px; padding-left: 8px"
+          >
+            <a :href="ref.url" target="_blank" rel="noopener noreferrer" style="color: #1976d2; text-decoration: none">
+              📄 {{ ref.title }}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- 默认工具调用渲染 -->
+      <div v-else>
+        <div v-if="args" style="font-size: 12px; color: #666; margin-bottom: 4px">
+          参数: {{ typeof args === 'string' ? args : JSON.stringify(args) }}
+        </div>
+        <div v-if="result" style="font-size: 12px; color: #333">
+          结果: {{ typeof result === 'string' ? result : JSON.stringify(result) }}
+        </div>
+      </div>
+    </t-collapse-panel>
+  </t-collapse>
+</template>
+
+<script setup lang="tsx">
+import { computed } from 'vue';
+import { Collapse as TCollapse, CollapsePanel as TCollapsePanel, Tag } from 'tdesign-vue-next';
+
+// 定义 props
+interface ToolCall {
+  toolCallName?: string;
+  args?: any;
+  result?: any;
+}
+
+interface Props {
+  toolCall: ToolCall;
+  status?: 'pending' | 'streaming' | 'complete';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 'complete',
+});
+
+// 状态配置
+const statusConfig = {
+  pending: { color: 'warning', text: '处理中' },
+  streaming: { color: 'processing', text: '执行中' },
+  complete: { color: 'success', text: '已完成' },
+};
+
+// 状态渲染函数
+const renderStatusTag = (status: 'pending' | 'streaming' | 'complete') => {
+  const config = statusConfig[status] || statusConfig.complete;
+
+  return (
+    <Tag theme={config.color} size="small">
+      {config.text}
+    </Tag>
+  );
+};
+
+// 使用 computed 监听 props.toolCall 的变化
+const toolCallName = computed(() => props.toolCall?.toolCallName);
+const args = computed(() => props.toolCall?.args);
+const result = computed(() => props.toolCall?.result);
+
+// 计算面板标题
+const panelHeader = computed(() => {
+  if (toolCallName.value === 'search') {
+    return '🔍 搜索工具调用';
+  }
+  return '🔧 工具调用';
+});
+
+// 解析搜索结果
+const searchResult = computed(() => {
+  if (toolCallName.value !== 'search') return null;
+
+  try {
+    return typeof result.value === 'string' ? JSON.parse(result.value) : result.value;
+  } catch (e) {
+    return { title: '解析错误', references: [] };
+  }
+});
+</script>
+
+<style scoped>
+/* 如果需要额外的样式可以在这里添加 */
+</style>
+`;
+
+export const componentLoginDemoContent = `<template>
+  <div :style="{ width: '350px' }">
+    <t-form status-icon :colon="true" :label-width="0" @submit="onSubmit" @reset="onReset">
+      <t-form-item name="account">
+        <t-input clearable :prefix-icon="DesktopIcon" placeholder="请输入账户名" />
+      </t-form-item>
+      <t-form-item name="password">
+        <t-input type="password" :prefix-icon="LockOnIcon" clearable placeholder="请输入密码" />
+      </t-form-item>
+      <t-form-item>
+        <t-button theme="primary" type="submit" block>登录</t-button>
+      </t-form-item>
+    </t-form>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Form, MessagePlugin } from 'tdesign-vue-next';
+import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next';
+
+export default defineComponent({
+  name: 'LoginForm',
+  setup() {
+    const onSubmit: Parameters<typeof Form>[0]['onSubmit'] = (e) => {
+      if (e.validateResult === true) {
+        MessagePlugin.info('提交成功');
+      }
+    };
+
+    const onReset: Parameters<typeof Form>[0]['onReset'] = (e) => {
+      MessagePlugin.info('重置成功');
+    };
+
+    return {
+      onSubmit,
+      onReset,
+      DesktopIcon,
+      LockOnIcon,
+    };
+  },
+});
+</script>
+`;
diff --git a/packages/tdesign-vue-next-chat/site/src/components/stackblitz/index.vue b/packages/tdesign-vue-next-chat/site/src/components/stackblitz/index.vue
index 350bfca98e..07cf120353 100644
--- a/packages/tdesign-vue-next-chat/site/src/components/stackblitz/index.vue
+++ b/packages/tdesign-vue-next-chat/site/src/components/stackblitz/index.vue
@@ -11,7 +11,13 @@
       <input type="hidden" name="project[files][src/index.css]" :value="styleContent" />
       <input type="hidden" name="project[files][src/main.js]" :value="mainJsContent" />
       <input type="hidden" name="project[files][src/mock-data/sseRequest.ts]" :value="mockDataContent" />
-      <input type="hidden" name="project[files][src/mock-data/sseRequest-reasoning.ts]" :value="mockDataContent" />
+      <input
+        type="hidden"
+        name="project[files][src/mock-data/sseRequest-reasoning.ts]"
+        :value="mockDataReasoningContent"
+      />
+      <input type="hidden" name="project[files][src/components/Toolcall.vue]" :value="componentToolcallDemoContent" />
+      <input type="hidden" name="project[files][src/components/Login.vue]" :value="componentLoginDemoContent" />
 
       <input type="hidden" name="project[files][index.html]" :value="htmlContent" />
       <input type="hidden" name="project[files][package.json]" :value="packageJSONContent" />
@@ -42,6 +48,8 @@ import {
   viteConfigContent,
   mockDataContent,
   mockDataReasoningContent,
+  componentLoginDemoContent,
+  componentToolcallDemoContent,
 } from './content';
 
 export default defineComponent({
@@ -61,6 +69,8 @@ export default defineComponent({
       packageJSONContent,
       mockDataContent,
       mockDataReasoningContent,
+      componentLoginDemoContent,
+      componentToolcallDemoContent,
     };
     const match = window.location.hostname.match(/preview-pr-(\d+)-tdesign-vue-next-chat.surge.sh/);
     if (match) {
diff --git a/packages/tdesign-vue-next-chat/site/src/routes.js b/packages/tdesign-vue-next-chat/site/src/routes.js
index 99356275aa..b12952de64 100644
--- a/packages/tdesign-vue-next-chat/site/src/routes.js
+++ b/packages/tdesign-vue-next-chat/site/src/routes.js
@@ -7,7 +7,7 @@ const { docs } = config;
 function getDocsRoutes(docs, type) {
   let docsRoutes = [];
   let docRoute;
-  console.log(docs, 'docs');
+
   docs?.forEach((item) => {
     const docType = item.type || type;
     let { children } = item;
diff --git a/packages/tdesign-vue-next-chat/site/vite.config.ts b/packages/tdesign-vue-next-chat/site/vite.config.ts
index b494490773..2edcfb5248 100644
--- a/packages/tdesign-vue-next-chat/site/vite.config.ts
+++ b/packages/tdesign-vue-next-chat/site/vite.config.ts
@@ -2,7 +2,12 @@ import { defineConfig, searchForWorkspaceRoot } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import tDocPlugin from './plugin-doc';
-import { joinPosix, joinComponentsRoot, joinTdesignVueNextRoot } from '@tdesign/internal-utils';
+import {
+  joinPosix,
+  joinComponentsRoot,
+  joinTdesignVueNextRoot,
+  getProComponentsChatRoot,
+} from '@tdesign/internal-utils';
 
 const publicPathMap: Record<string, string> = {
   preview: '/',
@@ -17,6 +22,7 @@ export default defineConfig(({ mode }) => {
         '@': joinPosix(__dirname, './'),
         '@tdesign/vue-next': joinTdesignVueNextRoot(),
         '@tdesign/components': joinComponentsRoot(),
+        '@tdesign-vue-next/chat': getProComponentsChatRoot(),
         // TODO: paopao 为什么还需要 alias，因为在 example 中的写法只能是 tdesign-vue-next，虽然有这个子应用，但没有 build 是没用的，同时即便是 prebuild 了，hmr 也是问题
         'tdesign-vue-next/es': joinComponentsRoot(),
         'tdesign-vue-next': joinComponentsRoot(),
@@ -33,6 +39,14 @@ export default defineConfig(({ mode }) => {
     plugins: [vue(), vueJsx(), tDocPlugin()],
     optimizeDeps: {
       include: ['prismjs', 'prismjs/components/prism-bash.js'],
+      exclude: [
+        '@tdesign/pro-components-chat',
+        '@tdesign-vue-next/chat',
+        '@tdesign/components',
+        '@tdesign/common',
+        'tdesign-vue-next',
+        'tdesign-vue-next/es',
+      ],
     },
   };
 });
diff --git a/packages/tdesign-vue-next/site/docs/getting-started.md b/packages/tdesign-vue-next/site/docs/getting-started.md
index 18cc97b19f..756ef58f8a 100644
--- a/packages/tdesign-vue-next/site/docs/getting-started.md
+++ b/packages/tdesign-vue-next/site/docs/getting-started.md
@@ -1,6 +1,6 @@
 ---
 title: Vue Next for Web
-description: TDesign 适配桌面端的组件库，适合在 vue3.x 技术栈项目中使用。
+description: TDesign 适配桌面端的组件库，适合在 Vue3.x 技术栈项目中使用。
 ---
 
 ## 安装
diff --git a/packages/tdesign-vue-next/site/src/main.ts b/packages/tdesign-vue-next/site/src/main.ts
index fce135f584..d2c358be24 100644
--- a/packages/tdesign-vue-next/site/src/main.ts
+++ b/packages/tdesign-vue-next/site/src/main.ts
@@ -31,4 +31,5 @@ app.component('CodeSandbox', CodeSandbox);
 app.component('NewWindow', NewWindow);
 app.component('BaseUsage', BaseUsage);
 
+// @ts-ignore TODO
 app.use(TDesign).use(router).mount('#app');
diff --git a/packages/tdesign-vue-next/test/src/snap/ssr.test.ts b/packages/tdesign-vue-next/test/src/snap/ssr.test.ts
index 1f0a378a74..e1db94e5f2 100644
--- a/packages/tdesign-vue-next/test/src/snap/ssr.test.ts
+++ b/packages/tdesign-vue-next/test/src/snap/ssr.test.ts
@@ -17,8 +17,7 @@ const router = createRouter({
 
 const createSSRApp = (comp: any) => {
   const app = createApp(comp);
-  // TODO: paopao 从代码上看，这句应该是没有用的
-  app.config.globalProperties.$route = undefined;
+  // @ts-ignore TODO
   app.use(TDesign);
   app.use(router);
   return renderToString(app);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eddb28e7cf..c05df3a231 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -182,8 +182,8 @@ catalogs:
       specifier: ^13.9.0
       version: 13.15.15
     vue:
-      specifier: ^3.3.9
-      version: 3.3.9
+      specifier: ^3.5.0
+      version: 3.5.18
     vue-router:
       specifier: ^4.2.4
       version: 4.5.1
@@ -253,9 +253,6 @@ catalogs:
       specifier: ^2.8.1
       version: 2.8.1
   tdesign:
-    '@tdesign/site-components':
-      specifier: ^0.17.0
-      version: 0.17.0
     tdesign-icons-vue-next:
       specifier: ~0.4.1
       version: 0.4.1
@@ -274,7 +271,7 @@ catalogs:
       version: 2.4.6
     canvas:
       specifier: ^3.1.2
-      version: 3.1.2
+      version: 3.2.0
     dom-parser:
       specifier: ^1.1.5
       version: 1.1.5
@@ -500,7 +497,7 @@ importers:
         version: 7.0.2(rollup@2.79.2)
       rollup-plugin-vue:
         specifier: catalog:bundle
-        version: 6.0.0(@vue/compiler-sfc@3.5.17)
+        version: 6.0.0(@vue/compiler-sfc@3.5.18)
       tsx:
         specifier: catalog:bundle
         version: 4.20.3
@@ -515,7 +512,7 @@ importers:
         version: 14.6.1(@testing-library/dom@9.3.4)
       vitest:
         specifier: catalog:test
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.1.2))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.2.0))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
 
   internal/utils:
     devDependencies:
@@ -581,20 +578,20 @@ importers:
         version: 7.0.2(rollup@2.79.2)
       rollup-plugin-vue:
         specifier: catalog:bundle
-        version: 6.0.0(@vue/compiler-sfc@3.5.17)
+        version: 6.0.0(@vue/compiler-sfc@3.5.18)
 
   packages/auto-import-resolver:
     dependencies:
       unplugin-utils:
         specifier: ^0.3.0
-        version: 0.3.0
+        version: 0.3.1
       unplugin-vue-components:
         specifier: ^29.0.0
-        version: 29.0.0(@babel/parser@7.28.0)(vue@3.3.9(typescript@5.7.3))
+        version: 29.2.0(@babel/parser@7.28.0)(vue@3.5.18(typescript@5.7.3))
     devDependencies:
       tdesign-icons-vue-next:
         specifier: catalog:tdesign
-        version: 0.4.1(vue@3.3.9(typescript@5.7.3))
+        version: 0.4.1(vue@3.5.18(typescript@5.7.3))
       tsdown:
         specifier: catalog:bundle
         version: 0.12.9(typescript@5.7.3)(vue-tsc@2.2.10(typescript@5.7.3))
@@ -694,7 +691,7 @@ importers:
         version: 5.7.3
       vitest:
         specifier: ^3.1.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.1.2))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.2.0))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
 
   packages/common/docs: {}
 
@@ -867,15 +864,25 @@ importers:
       marked-highlight:
         specifier: catalog:docs
         version: 2.2.1(marked@12.0.2)
+      omi-vueify:
+        specifier: ^0.0.12
+        version: 0.0.12(omi@7.7.13)(vue@3.3.9(typescript@5.8.3))
       tdesign-icons-vue-next:
         specifier: catalog:tdesign
         version: 0.4.1(vue@3.3.9(typescript@5.8.3))
       tdesign-vue-next:
         specifier: workspace:^
         version: link:../tdesign-vue-next
+      tdesign-web-components:
+        specifier: ~1.2.6
+        version: 1.2.6
       vue:
         specifier: '>=3.1.0'
         version: 3.3.9(typescript@5.8.3)
+    devDependencies:
+      tvision-charts-vue-next:
+        specifier: ^3.3.13
+        version: 3.3.13(dagre@0.8.5)
 
   packages/tdesign-vue-next-chat/site:
     dependencies:
@@ -895,8 +902,8 @@ importers:
         specifier: workspace:^
         version: link:../../pro-components/chat
       '@tdesign/site-components':
-        specifier: catalog:tdesign
-        version: 0.17.0
+        specifier: 0.18.0-alpha.5
+        version: 0.18.0-alpha.5
       semver:
         specifier: catalog:docs
         version: 7.7.2
@@ -905,10 +912,10 @@ importers:
         version: 1.1.8
       vue:
         specifier: catalog:deps
-        version: 3.3.9(typescript@5.7.3)
+        version: 3.5.18(typescript@5.7.3)
       vue-router:
         specifier: catalog:deps
-        version: 4.5.1(vue@3.3.9(typescript@5.7.3))
+        version: 4.5.1(vue@3.5.18(typescript@5.7.3))
       workbox-precaching:
         specifier: catalog:docs
         version: 6.6.1
@@ -918,16 +925,16 @@ importers:
         version: 4.17.12
       '@vitejs/plugin-vue':
         specifier: catalog:bundle
-        version: 5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.7.3))
+        version: 5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.7.3))
       '@vitejs/plugin-vue-jsx':
         specifier: catalog:bundle
-        version: 4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.7.3))
+        version: 4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.7.3))
       '@vue/compiler-sfc':
         specifier: catalog:bundle
         version: 3.5.17
       '@vue/tsconfig':
         specifier: catalog:lint
-        version: 0.7.0(typescript@5.7.3)(vue@3.3.9(typescript@5.7.3))
+        version: 0.7.0(typescript@5.7.3)(vue@3.5.18(typescript@5.7.3))
       less:
         specifier: catalog:bundle
         version: 4.3.0
@@ -963,10 +970,10 @@ importers:
         version: 1.1.8
       vue:
         specifier: catalog:deps
-        version: 3.3.9(typescript@5.7.3)
+        version: 3.5.18(typescript@5.7.3)
       vue-router:
         specifier: catalog:deps
-        version: 4.5.1(vue@3.3.9(typescript@5.7.3))
+        version: 4.5.1(vue@3.5.18(typescript@5.7.3))
       workbox-precaching:
         specifier: catalog:docs
         version: 6.6.1
@@ -976,16 +983,16 @@ importers:
         version: 0.2.3
       '@vitejs/plugin-vue':
         specifier: catalog:bundle
-        version: 5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.7.3))
+        version: 5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.7.3))
       '@vitejs/plugin-vue-jsx':
         specifier: catalog:bundle
-        version: 4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.7.3))
+        version: 4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.7.3))
       '@vue/compiler-sfc':
         specifier: catalog:bundle
         version: 3.5.17
       '@vue/tsconfig':
         specifier: catalog:lint
-        version: 0.7.0(typescript@5.7.3)(vue@3.3.9(typescript@5.7.3))
+        version: 0.7.0(typescript@5.7.3)(vue@3.5.18(typescript@5.7.3))
       gray-matter:
         specifier: catalog:docs
         version: 4.0.3
@@ -1018,16 +1025,16 @@ importers:
         version: link:../../../internal/utils
       '@vitejs/plugin-vue':
         specifier: catalog:bundle
-        version: 5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.8.3))
+        version: 5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.8.3))
       '@vitejs/plugin-vue-jsx':
         specifier: catalog:bundle
-        version: 4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.8.3))
+        version: 4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.8.3))
       '@vue/test-utils':
         specifier: catalog:test
         version: 2.4.6
       canvas:
         specifier: catalog:test
-        version: 3.1.2
+        version: 3.2.0
       dom-parser:
         specifier: catalog:test
         version: 1.1.5
@@ -1042,16 +1049,16 @@ importers:
         version: 3.0.5
       vitest:
         specifier: catalog:test
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.1.2))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.2.0))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
       vitest-fetch-mock:
         specifier: catalog:test
         version: 0.4.5(vitest@3.2.4)
       vue:
         specifier: catalog:deps
-        version: 3.3.9(typescript@5.8.3)
+        version: 3.5.18(typescript@5.8.3)
       vue-router:
         specifier: catalog:deps
-        version: 4.5.1(vue@3.3.9(typescript@5.8.3))
+        version: 4.5.1(vue@3.5.18(typescript@5.8.3))
 
 packages:
 
@@ -1059,6 +1066,30 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
+  '@antfu/utils@9.3.0':
+    resolution: {integrity: sha512-9hFT4RauhcUzqOE4f1+frMKLZrgNog5b06I7VmZQV1BkvwvqrbC8EBZf3L1eEL2AKb6rNKjER0sEvJiSP1FXEA==}
+
+  '@antv/g-webgpu-core@0.7.2':
+    resolution: {integrity: sha512-xUMmop7f3Rs34zFYKXLqHhDR1CQTeDl/7vI7Sn3X/73BqJc3X3HIIRvm83Fg2CjVACaOzw4WeLRXNaOCp9fz9w==}
+
+  '@antv/g-webgpu-engine@0.7.2':
+    resolution: {integrity: sha512-lx8Y93IW2cnJvdoDRKyMmTdYqSC1pOmF0nyG3PGGyA0NI9vBYVgO0KTF6hkyWjdTWVq7XDZyf/h8CJridLh3lg==}
+
+  '@antv/g-webgpu@0.7.2':
+    resolution: {integrity: sha512-kw+oYGsdvj5qeUfy5DPb/jztZBV+2fmqBd3Vv8NlKatfBmv8AirYX/CCW74AUSdWm99rEiLyxFB1VdRZ6b/wnQ==}
+
+  '@antv/graphlib@1.2.0':
+    resolution: {integrity: sha512-hhJOMThec51nU4Fe5p/viLlNIL71uDEgYFzKPajWjr2715SFG1HAgiP6AVylIeqBcAZ04u3Lw7usjl/TuI5RuQ==}
+
+  '@antv/layout@0.3.25':
+    resolution: {integrity: sha512-d29Aw1PXoAavMRZy7iTB9L5rMBeChFEX0BJ9ELP4TI35ySdCu07YbmPo9ju9OH/6sG2/NB3o85Ayxrre3iwX/g==}
+
+  '@antv/util@3.3.11':
+    resolution: {integrity: sha512-FII08DFM4ABh2q5rPYdr0hMtKXRgeZazvXaFYCs7J7uTcWDHUhczab2qOCJLNDugoj8jFag1djb7wS9ehaRYBg==}
+
   '@apideck/better-ajv-errors@0.3.6':
     resolution: {integrity: sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==}
     engines: {node: '>=10'}
@@ -1592,10 +1623,18 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
 
+  '@babel/runtime-corejs2@7.28.3':
+    resolution: {integrity: sha512-+1b3F+6P7ewZRsGVD/8sOTsq2YLpwr6ziqkUZ7vOQrW+jWZ/K2dv92LRcdlwta46z93g6IC/v66CzpSzms7U2A==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/runtime-corejs3@7.18.9':
     resolution: {integrity: sha512-qZEWeccZCrHA2Au4/X05QW5CMdm4VjUDCrGq5gf1ZDcM4hRqreKrtwAn7yci9zfgAS9apvnsFXiGBHBAxZdK9A==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.21.0':
+    resolution: {integrity: sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/runtime@7.27.6':
     resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
     engines: {node: '>=6.9.0'}
@@ -1624,6 +1663,27 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@braintree/sanitize-url@6.0.4':
+    resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==}
+
+  '@braintree/sanitize-url@7.1.1':
+    resolution: {integrity: sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==}
+
+  '@chevrotain/cst-dts-gen@11.0.3':
+    resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==}
+
+  '@chevrotain/gast@11.0.3':
+    resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==}
+
+  '@chevrotain/regexp-to-ast@11.0.3':
+    resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==}
+
+  '@chevrotain/types@11.0.3':
+    resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==}
+
+  '@chevrotain/utils@11.0.3':
+    resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==}
+
   '@commitlint/cli@16.3.0':
     resolution: {integrity: sha512-P+kvONlfsuTMnxSwWE1H+ZcPMY3STFaHb2kAacsqoIkNx66O0T7sTpBxpxkMrFPyhkJiLJnJWMhk4bbvYD3BMA==}
     engines: {node: '>=v12'}
@@ -1984,6 +2044,12 @@ packages:
     resolution: {integrity: sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==}
     engines: {node: '>=6.9.0'}
 
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@3.0.2':
+    resolution: {integrity: sha512-EfJS0rLfVuRuJRn4psJHtK2A9TqVnkxPpHY6lYHiB9+8eSuudsxbwMiavocG45ujOo6FJ+CIRlRnlOGinzkaGQ==}
+
   '@isaacs/balanced-match@4.0.1':
     resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
     engines: {node: 20 || >=22}
@@ -2007,6 +2073,9 @@ packages:
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -2021,6 +2090,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
@@ -2033,6 +2105,9 @@ packages:
   '@material/material-color-utilities@0.1.2':
     resolution: {integrity: sha512-uKkkx7Xo1AZJR0eMjH902rAb0vEjDbb3tgXt0cC3SHbpDGkPNhkuDKtxnw147axOM6uKuI7vywHRQlDrjDGhCA==}
 
+  '@mermaid-js/parser@0.6.3':
+    resolution: {integrity: sha512-lnjOhe7zyHjc+If7yT4zoedx2vo4sHaTmtkl1+or8BRTnCtDmcTpAjpzDSfCZrshM5bCoz0GyidzadJAH1xobA==}
+
   '@mswjs/cookies@0.2.2':
     resolution: {integrity: sha512-mlN83YSrcFgk7Dm1Mys40DLssI1KdJji2CMKN8eOlBqsTADYzj2+jWzsANsUTFbxDMWPD5e9bfA1RGqBpS3O1g==}
     engines: {node: '>=14'}
@@ -2082,6 +2157,15 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
+  '@probe.gl/env@3.6.0':
+    resolution: {integrity: sha512-4tTZYUg/8BICC3Yyb9rOeoKeijKbZHRXBEKObrfPmX4sQmYB15ZOUpoVBhAyJkOYVAM8EkPci6Uw5dLCwx2BEQ==}
+
+  '@probe.gl/log@3.6.0':
+    resolution: {integrity: sha512-hjpyenpEvOdowgZ1qMeCJxfRD4JkKdlXz0RC14m42Un62NtOT+GpWyKA4LssT0+xyLULCByRAtG2fzZorpIAcA==}
+
+  '@probe.gl/stats@3.6.0':
+    resolution: {integrity: sha512-JdALQXB44OP4kUBN/UrQgzbJe4qokbVF4Y8lkIA8iVCFnjVowWIgkD/z/0QO65yELT54tTrtepw1jScjKB+rhQ==}
+
   '@quansync/fs@0.1.3':
     resolution: {integrity: sha512-G0OnZbMWEs5LhDyqy2UL17vGhSVHkQIfVojMtEWVenvj0V5S84VBgy86kJIuNsGDp2p7sTKlpSIpBUWdC35OKg==}
     engines: {node: '>=20.0.0'}
@@ -2115,13 +2199,11 @@ packages:
     resolution: {integrity: sha512-h3hzQuP+5l47wxn9+A39n1Q3i4mAvbNFJCZ8EZLrkqfsecfeZ5btIbDJTVAIQTy+uPr7uluAHIf11Jw+YkWjOQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.28':
     resolution: {integrity: sha512-oW5LydGtfdT8TI5HTybxi1DdMCXCmVE1ak4VrSmVKsbBZyE0bDgL1UvTS1OOvuq4PM24zQHIuSNOpgLXgVj4vQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-linux-arm64-ohos@1.0.0-beta.28':
     resolution: {integrity: sha512-yeAAPMgssEkTCouUSYLrSWm+EXYBFI+ZTe8BVQkY5le51OCbqFNibtYkKZNHZBdhNRjWcSKSIuXN4MAXBz1j+g==}
@@ -2132,13 +2214,11 @@ packages:
     resolution: {integrity: sha512-xWsylmva9L4ZFc28A9VGlF9fnrFpVxVC+kKqrBoqz2l/p5b4zRoFNtnSecivnxuPeR5Ga6W6lnpwGeWDvqBZ1Q==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.28':
     resolution: {integrity: sha512-IdtRNm70EH7/1mjqXJc4pa2MoAxo/xl9hN8VySG9BQuYfhQz+JDC+FZBc+krlVUO3cTJz/o4xI/x4kA+rLKTwA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.28':
     resolution: {integrity: sha512-jS2G0+GtUCVcglCefScxgXeLJal0UAvVwvpy3reoC07K16k8WM/lXoYsZdpw34d5ONg0XcZpcokzA9R5K2o0lQ==}
@@ -2327,67 +2407,56 @@ packages:
     resolution: {integrity: sha512-x+e/Z9H0RAWckn4V2OZZl6EmV0L2diuX3QB0uM1r6BvhUIv6xBPL5mrAX2E3e8N8rEHVPwFfz/ETUbV4oW9+lQ==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.44.0':
     resolution: {integrity: sha512-1exwiBFf4PU/8HvI8s80icyCcnAIB86MCBdst51fwFmH5dyeoWVPVgmQPcKrMtBQ0W5pAs7jBCWuRXgEpRzSCg==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.44.0':
     resolution: {integrity: sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.44.0':
     resolution: {integrity: sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.44.0':
     resolution: {integrity: sha512-xw+FTGcov/ejdusVOqKgMGW3c4+AgqrfvzWEVXcNP6zq2ue+lsYUgJ+5Rtn/OTJf7e2CbgTFvzLW2j0YAtj0Gg==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.44.0':
     resolution: {integrity: sha512-bKGibTr9IdF0zr21kMvkZT4K6NV+jjRnBoVMt2uNMG0BYWm3qOVmYnXKzx7UhwrviKnmK46IKMByMgvpdQlyJQ==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.44.0':
     resolution: {integrity: sha512-vV3cL48U5kDaKZtXrti12YRa7TyxgKAIDoYdqSIOMOFBXqFj2XbChHAtXquEn2+n78ciFgr4KIqEbydEGPxXgA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.44.0':
     resolution: {integrity: sha512-TDKO8KlHJuvTEdfw5YYFBjhFts2TR0VpZsnLLSYmB7AaohJhM8ctDSdDnUGq77hUh4m/djRafw+9zQpkOanE2Q==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.44.0':
     resolution: {integrity: sha512-8541GEyktXaw4lvnGp9m84KENcxInhAt6vPWJ9RodsB/iGjHoMB2Pp5MVBCiKIRxrxzJhGCxmNzdu+oDQ7kwRA==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.44.0':
     resolution: {integrity: sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.44.0':
     resolution: {integrity: sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.44.0':
     resolution: {integrity: sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==}
@@ -2410,12 +2479,12 @@ packages:
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
 
-  '@tdesign/site-components@0.17.0':
-    resolution: {integrity: sha512-fk+4+Zlb0qVHfIume0wpkshBGioFAJWZJoXFPoVockjIZc+ifxyKBf5o2ac/lXopHP6mKVwchAe0W7KkkhJaBA==}
-
   '@tdesign/site-components@0.18.0-alpha.1':
     resolution: {integrity: sha512-00OBRle2kAlPFzKAoGE36O3+2uhUAiFkBMK3x17SN7htHDNWTJ3hpyNvzfwLOMl+yFJzTn/fW/xeqhTs/hzafw==}
 
+  '@tdesign/site-components@0.18.0-alpha.5':
+    resolution: {integrity: sha512-fymZOqgvSccAoq+UwJ9u3SNNd4gy31JTofa/maQrwPX3gpFW9+yDPez3uJpGMQgxkMU1AkW064RpSkFm5m+srg==}
+
   '@testing-library/dom@9.3.4':
     resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
     engines: {node: '>=14'}
@@ -2459,6 +2528,9 @@ packages:
     resolution: {integrity: sha512-6CIsNdBfOTN92GHhQ0BaGY9KoV4DPH7ynCk5eggSDy3HW7OHLKWJUskL72uoVxl2kZ/XCq28TEgI0HKxLbRxyQ==}
     deprecated: This is a stub types definition. clipboard provides its own type definitions, so you do not need this installed.
 
+  '@types/codemirror@0.0.108':
+    resolution: {integrity: sha512-3FGFcus0P7C2UOGCNUVENqObEb4SFk+S8Dnxq7K6aIsLVs/vDtlangl3PEO0ykaKXyK56swVF6Nho7VsA44uhw==}
+
   '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
 
@@ -2469,6 +2541,99 @@ packages:
     resolution: {integrity: sha512-BahAZSSvuFXyhgJiwQgsfsNlStE9K/ULGL+YEzK4mmL2Vf02Pjl2yZs+KmbkAg3MxkC9WwMuFwuwnwvrg7CqvQ==}
     deprecated: This is a stub types definition. cssnano provides its own type definitions, so you do not need this installed.
 
+  '@types/d3-array@3.2.2':
+    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
+
+  '@types/d3-axis@3.0.6':
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+
+  '@types/d3-brush@3.0.6':
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+
+  '@types/d3-chord@3.0.6':
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-contour@3.0.6':
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+
+  '@types/d3-delaunay@6.0.4':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
+  '@types/d3-dispatch@3.0.7':
+    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-polygon@3.0.2':
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.3':
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+
+  '@types/d3-scale-chromatic@3.1.0':
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time-format@4.0.3':
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/d3@7.4.3':
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -2487,6 +2652,9 @@ packages:
   '@types/fs-extra@8.1.5':
     resolution: {integrity: sha512-0dzKcwO+S8s2kuF5Z9oUWatQJj5Uq/iqphEtE3GQJVRRYm/tD1LglU2UnXi2A8jLq5umkGouOXOR9y0n613ZwQ==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/glob@7.2.0':
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
 
@@ -2556,6 +2724,9 @@ packages:
   '@types/sortablejs@1.15.8':
     resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
 
+  '@types/tern@0.23.9':
+    resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
+
   '@types/tinycolor2@1.4.6':
     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
 
@@ -2800,12 +2971,18 @@ packages:
   '@vue/compiler-core@3.5.17':
     resolution: {integrity: sha512-Xe+AittLbAyV0pabcN7cP7/BenRBNcteM4aSDCtRvGw0d9OL+HG1u/XHLY/kt1q4fyMeZYXyIYrsHuPSiDPosA==}
 
+  '@vue/compiler-core@3.5.18':
+    resolution: {integrity: sha512-3slwjQrrV1TO8MoXgy3aynDQ7lslj5UqDxuHnrzHtpON5CBinhWjJETciPngpin/T3OuW3tXUf86tEurusnztw==}
+
   '@vue/compiler-dom@3.3.9':
     resolution: {integrity: sha512-nfWubTtLXuT4iBeDSZ5J3m218MjOy42Vp2pmKVuBKo2/BLcrFUX8nCSr/bKRFiJ32R8qbdnnnBgRn9AdU5v0Sg==}
 
   '@vue/compiler-dom@3.5.17':
     resolution: {integrity: sha512-+2UgfLKoaNLhgfhV5Ihnk6wB4ljyW1/7wUIog2puUqajiC29Lp5R/IKDdkebh9jTbTogTbsgB+OY9cEWzG95JQ==}
 
+  '@vue/compiler-dom@3.5.18':
+    resolution: {integrity: sha512-RMbU6NTU70++B1JyVJbNbeFkK+A+Q7y9XKE2EM4NLGm2WFR8x9MbAtWxPPLdm0wUkuZv9trpwfSlL6tjdIa1+A==}
+
   '@vue/compiler-sfc@2.7.14':
     resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
 
@@ -2815,12 +2992,18 @@ packages:
   '@vue/compiler-sfc@3.5.17':
     resolution: {integrity: sha512-rQQxbRJMgTqwRugtjw0cnyQv9cP4/4BxWfTdRBkqsTfLOHWykLzbOc3C4GGzAmdMDxhzU/1Ija5bTjMVrddqww==}
 
+  '@vue/compiler-sfc@3.5.18':
+    resolution: {integrity: sha512-5aBjvGqsWs+MoxswZPoTB9nSDb3dhd1x30xrrltKujlCxo48j8HGDNj3QPhF4VIS0VQDUrA1xUfp2hEa+FNyXA==}
+
   '@vue/compiler-ssr@3.3.9':
     resolution: {integrity: sha512-NO5oobAw78R0G4SODY5A502MGnDNiDjf6qvhn7zD7TJGc8XDeIEw4fg6JU705jZ/YhuokBKz0A5a/FL/XZU73g==}
 
   '@vue/compiler-ssr@3.5.17':
     resolution: {integrity: sha512-hkDbA0Q20ZzGgpj5uZjb9rBzQtIHLS78mMilwrlpWk2Ep37DYntUz0PonQ6kr113vfOEdM+zTBuJDaceNIW0tQ==}
 
+  '@vue/compiler-ssr@3.5.18':
+    resolution: {integrity: sha512-xM16Ak7rSWHkM3m22NlmcdIM+K4BMyFARAfV9hYFl+SFuRzrZ3uGMNW05kA5pmeMa0X9X963Kgou7ufdbpOP9g==}
+
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
@@ -2852,23 +3035,40 @@ packages:
   '@vue/reactivity@3.3.9':
     resolution: {integrity: sha512-VmpIqlNp+aYDg2X0xQhJqHx9YguOmz2UxuUJDckBdQCNkipJvfk9yA75woLWElCa0Jtyec3lAAt49GO0izsphw==}
 
+  '@vue/reactivity@3.5.18':
+    resolution: {integrity: sha512-x0vPO5Imw+3sChLM5Y+B6G1zPjwdOri9e8V21NnTnlEvkxatHEH5B5KEAJcjuzQ7BsjGrKtfzuQ5eQwXh8HXBg==}
+
   '@vue/runtime-core@3.3.9':
     resolution: {integrity: sha512-xxaG9KvPm3GTRuM4ZyU8Tc+pMVzcu6eeoSRQJ9IE7NmCcClW6z4B3Ij6L4EDl80sxe/arTtQ6YmgiO4UZqRc+w==}
 
+  '@vue/runtime-core@3.5.18':
+    resolution: {integrity: sha512-DUpHa1HpeOQEt6+3nheUfqVXRog2kivkXHUhoqJiKR33SO4x+a5uNOMkV487WPerQkL0vUuRvq/7JhRgLW3S+w==}
+
   '@vue/runtime-dom@3.3.9':
     resolution: {integrity: sha512-e7LIfcxYSWbV6BK1wQv9qJyxprC75EvSqF/kQKe6bdZEDNValzeRXEVgiX7AHI6hZ59HA4h7WT5CGvm69vzJTQ==}
 
+  '@vue/runtime-dom@3.5.18':
+    resolution: {integrity: sha512-YwDj71iV05j4RnzZnZtGaXwPoUWeRsqinblgVJwR8XTXYZ9D5PbahHQgsbmzUvCWNF6x7siQ89HgnX5eWkr3mw==}
+
   '@vue/server-renderer@3.3.9':
     resolution: {integrity: sha512-w0zT/s5l3Oa3ZjtLW88eO4uV6AQFqU8X5GOgzq7SkQQu6vVr+8tfm+OI2kDBplS/W/XgCBuFXiPw6T5EdwXP0A==}
     peerDependencies:
       vue: 3.3.9
 
+  '@vue/server-renderer@3.5.18':
+    resolution: {integrity: sha512-PvIHLUoWgSbDG7zLHqSqaCoZvHi6NNmfVFOqO+OnwvqMz/tqQr3FuGWS8ufluNddk7ZLBJYMrjcw1c6XzR12mA==}
+    peerDependencies:
+      vue: 3.5.18
+
   '@vue/shared@3.3.9':
     resolution: {integrity: sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA==}
 
   '@vue/shared@3.5.17':
     resolution: {integrity: sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==}
 
+  '@vue/shared@3.5.18':
+    resolution: {integrity: sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==}
+
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
@@ -3177,8 +3377,8 @@ packages:
   caniuse-lite@1.0.30001724:
     resolution: {integrity: sha512-WqJo7p0TbHDOythNTqYujmaJTvtYRZrjpP8TCvH6Vb9CYJerJNKamKzIWOM4BkQatWj9H2lYulpdAQNBe7QhNA==}
 
-  canvas@3.1.2:
-    resolution: {integrity: sha512-Z/tzFAcBzoCvJlOSlCnoekh1Gu8YMn0J51+UAuXJAbW1Z6I9l2mZgdD7738MepoeeIcUdDtbMnOg6cC7GJxy/g==}
+  canvas@3.2.0:
+    resolution: {integrity: sha512-jk0GxrLtUEmW/TmFsk2WghvgHe8B0pxGilqCL21y8lHkPUGa6FTsnCNtHPOzT8O3y+N+m3espawV80bbBlgfTA==}
     engines: {node: ^18.12.0 || >= 20.9.0}
 
   chai@5.2.0:
@@ -3208,6 +3408,17 @@ packages:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
 
+  cherry-markdown@0.10.1-alpha.0:
+    resolution: {integrity: sha512-0huURu1e2BFmEoUiYxob6fr2eJ/GRrDEs0pxotDBiqweyBrvm4CU/FWLp36kzRgswSeaVLCF2V1my14T9w8LOQ==}
+
+  chevrotain-allstar@0.3.1:
+    resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==}
+    peerDependencies:
+      chevrotain: ^11.0.0
+
+  chevrotain@11.0.3:
+    resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -3222,6 +3433,9 @@ packages:
   chroma-js@2.1.2:
     resolution: {integrity: sha512-ri/ouYDWuxfus3UcaMxC1Tfp3IE9K5iQzxc2hSxbBRVNQFut1UuGAsZmiAf2mOUubzGJwgMSv9lHg+XqLaz1QQ==}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   classnames@2.5.1:
     resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
@@ -3266,6 +3480,10 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -3307,6 +3525,10 @@ packages:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
 
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   commitizen@4.3.1:
     resolution: {integrity: sha512-gwAPAVTy/j5YcOOebcCRIijn+mSjWJC+IYKivTu6aG8Ei/scoXgfsMRnuAk6b0GRste2J4NGxVdMN3ZpfNaVaw==}
     engines: {node: '>= 12'}
@@ -3345,6 +3567,10 @@ packages:
   confusing-browser-globals@1.0.11:
     resolution: {integrity: sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==}
 
+  construct-style-sheets-polyfill@3.0.1:
+    resolution: {integrity: sha512-vyAiTcS3i29IxjzJ12K2MGUUBYgrF69p6fKD+8ZPRLFhwTtuaxXLpazl4Yw4FITsQXwUMrh8juI1bOHWYjzkwA==}
+    engines: {npm: '>=7'}
+
   conventional-changelog-angular@5.0.13:
     resolution: {integrity: sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==}
     engines: {node: '>=10'}
@@ -3438,18 +3664,31 @@ packages:
   copy-anything@2.0.6:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
 
+  copy-to-clipboard@3.3.3:
+    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
+
   core-js-compat@3.43.0:
     resolution: {integrity: sha512-2GML2ZsCc5LR7hZYz4AXmjQw8zuy2T//2QntwdnpuYI7jteT6GVYJL7F6C2C57R7gSYrcqVW3lAALefdbhBLDA==}
 
   core-js-pure@3.43.0:
     resolution: {integrity: sha512-i/AgxU2+A+BbJdMxh3v7/vxi2SbFqxiFmg6VsDwYB4jkucrd1BZNA9a9gphC0fYMG5IBSgQcbQnk865VCLe7xA==}
 
+  core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+
   core-js@3.43.0:
     resolution: {integrity: sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  cose-base@1.0.3:
+    resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
+
+  cose-base@2.2.0:
+    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
+
   cosmiconfig-typescript-loader@2.0.2:
     resolution: {integrity: sha512-KmE+bMjWMXJbkWCeY4FJX/npHuZPNr9XF9q9CIQ/bpFwi1qHfCmSiKarrCcRa0LO4fWjk93pVoeRtJAkTGcYNw==}
     engines: {node: '>=12', npm: '>=6'}
@@ -3514,6 +3753,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   crypto-random-string@2.0.0:
     resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
     engines: {node: '>=8'}
@@ -3583,6 +3825,20 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  cytoscape-cose-bilkent@4.1.0:
+    resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape-fcose@2.2.0:
+    resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape@3.33.1:
+    resolution: {integrity: sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==}
+    engines: {node: '>=0.10'}
+
   cz-conventional-changelog@3.3.0:
     resolution: {integrity: sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==}
     engines: {node: '>= 10'}
@@ -3596,6 +3852,172 @@ packages:
     engines: {node: '>=v12.20.0'}
     hasBin: true
 
+  d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@2.0.0:
+    resolution: {integrity: sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force@2.1.1:
+    resolution: {integrity: sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@2.0.0:
+    resolution: {integrity: sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@2.0.0:
+    resolution: {integrity: sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
+  dagre-compound@0.0.11:
+    resolution: {integrity: sha512-UrSgRP9LtOZCYb9e5doolZXpc7xayyszgyOs7uakTK4n4KsLegLVTRRtq01GpQd/iZjYw5fWMapx9ed+c80MAQ==}
+    engines: {node: '>=6.0.0'}
+    peerDependencies:
+      dagre: ^0.8.5
+
+  dagre-d3-es@7.0.11:
+    resolution: {integrity: sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==}
+
+  dagre-d3-es@7.0.9:
+    resolution: {integrity: sha512-rYR4QfVmy+sR44IBDvVtcAmOReGBvRCWDpO2QjYwqgh9yijw6eSHBqaPG/LIOEy7aBsniLvtMW6pg19qJhq60w==}
+
+  dagre@0.8.5:
+    resolution: {integrity: sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==}
+
   dargs@7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -3622,6 +4044,9 @@ packages:
   dayjs@1.11.10:
     resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
 
+  dayjs@1.11.18:
+    resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
+
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
@@ -3642,6 +4067,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   decamelize-keys@1.1.1:
     resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
     engines: {node: '>=0.10.0'}
@@ -3701,6 +4135,9 @@ packages:
     resolution: {integrity: sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==}
     engines: {node: '>=10'}
 
+  delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -3716,8 +4153,8 @@ packages:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
 
-  detect-libc@2.0.4:
-    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
   diacritics@1.3.0:
@@ -3755,6 +4192,9 @@ packages:
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
@@ -3767,9 +4207,22 @@ packages:
     resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
     engines: {node: '>= 4'}
 
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  dompurify@2.4.3:
+    resolution: {integrity: sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ==}
+
+  dompurify@3.2.6:
+    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
@@ -3803,6 +4256,9 @@ packages:
   electron-to-chromium@1.5.171:
     resolution: {integrity: sha512-scWpzXEJEMrGJa4Y6m/tVotb0WuvNmasv3wWVzUAeCgKU0ToFOhUW6Z+xWnRQANMYGxN4ngJXIThgBJOqzVPCQ==}
 
+  elkjs@0.8.2:
+    resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -3830,6 +4286,10 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -4233,6 +4693,9 @@ packages:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
+  fast-json-patch@3.1.1:
+    resolution: {integrity: sha512-vf6IHUX2SBcA+5/+4883dsIjpBTqmfBjmYiWK1savxQmFk4JfBMLa7ynTYOs1Rolp/T1betJxHiGD3g1Mn8lUQ==}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -4257,6 +4720,15 @@ packages:
       picomatch:
         optional: true
 
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   fflate@0.8.2:
     resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
 
@@ -4432,6 +4904,12 @@ packages:
   github-from-package@0.0.0:
     resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
 
+  gl-matrix@3.4.4:
+    resolution: {integrity: sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==}
+
+  gl-vec2@1.3.0:
+    resolution: {integrity: sha512-YiqaAuNsheWmUV0Sa8k94kBB0D6RWjwZztyO+trEYS8KzJ6OQB/4686gdrf59wld4hHFIvaxynO3nRxpk1Ij/A==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -4447,7 +4925,6 @@ packages:
 
   glob@7.1.6:
     resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
-    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@@ -4456,7 +4933,6 @@ packages:
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
-    deprecated: Glob versions prior to v9 are no longer supported
 
   global-directory@4.0.1:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
@@ -4490,6 +4966,10 @@ packages:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
 
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
   globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
@@ -4518,6 +4998,9 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  graphlib@2.1.8:
+    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
+
   graphql@16.11.0:
     resolution: {integrity: sha512-mS1lbMsxgQj6hge1XZ6p7GPhbrtFwUFYi3wRzXAC/FmYnyXMTvvI3td3rjmQ2u8ewXueaSvRPWaEcgVVOT9Jnw==}
     engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
@@ -4526,6 +5009,9 @@ packages:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
 
+  hachure-fill@0.5.2:
+    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
+
   handlebars@4.7.8:
     resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
     engines: {node: '>=0.4.7'}
@@ -4594,6 +5080,9 @@ packages:
     resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
     engines: {node: '>=10'}
 
+  htm@3.1.1:
+    resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==}
+
   html-encoding-sniffer@3.0.0:
     resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
     engines: {node: '>=12'}
@@ -4605,6 +5094,9 @@ packages:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
 
+  htmlparser2@10.0.0:
+    resolution: {integrity: sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==}
+
   http-proxy-agent@5.0.0:
     resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
     engines: {node: '>= 6'}
@@ -4676,6 +5168,9 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
+  immer@10.1.1:
+    resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==}
+
   import-cwd@3.0.0:
     resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
     engines: {node: '>=8'}
@@ -4729,6 +5224,16 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-any-array@2.0.1:
+    resolution: {integrity: sha512-UtilS7hLRu++wb/WBAw9bNuP1Eg04Ivn1vERJck8zJthEvXCBEBpGR/33u/xLKWEQf95803oalHrVDptcAvFdQ==}
+
   is-arguments@1.2.0:
     resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
     engines: {node: '>= 0.4'}
@@ -5071,9 +5576,16 @@ packages:
     resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
     engines: {node: '>=0.10.0'}
 
+  katex@0.16.25:
+    resolution: {integrity: sha512-woHRUZ/iF23GBP1dkDQMh1QBad9dmr8/PAwNA54VrSOVYgI12MAcE14TqnDdQOdzyEonGzMepYnqBMYdsoAr8Q==}
+    hasBin: true
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  khroma@2.1.0:
+    resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
+
   kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -5081,6 +5593,19 @@ packages:
   known-css-properties@0.26.0:
     resolution: {integrity: sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
+  langium@3.3.1:
+    resolution: {integrity: sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==}
+    engines: {node: '>=16.0.0'}
+
+  layout-base@1.0.2:
+    resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
+
+  layout-base@2.0.1:
+    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+
   less@4.3.0:
     resolution: {integrity: sha512-X9RyH9fvemArzfdP8Pi3irr7lor2Ok4rOttDXBhlwDg+wKQsXOXgHWduAJE1EsF7JJx0w0bcO6BC6tCKKYnXKA==}
     engines: {node: '>=14'}
@@ -5130,6 +5655,10 @@ packages:
     resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
     engines: {node: '>=14'}
 
+  local-pkg@1.1.2:
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
+
   locate-path@2.0.0:
     resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
     engines: {node: '>=4'}
@@ -5239,6 +5768,9 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
@@ -5283,6 +5815,9 @@ packages:
   markdown-it-emoji@2.0.2:
     resolution: {integrity: sha512-zLftSaNrKuYl0kR5zm4gxXjHaOI3FAOEaloKmRA5hijmJZvSjmxcokOLlzycb/HXlUFWzXqpIEoyEMCE4i9MvQ==}
 
+  markdown-it-fence@0.1.3:
+    resolution: {integrity: sha512-mdZbkwJUyZXhyDX4QzD+WnIhxWBq9oIIJU22E6jCT7MHgIp79oEOJfwXIl/HqmfIxnXEdC47sBGn4h6chM4DKw==}
+
   markdown-it-toc-done-right@4.2.0:
     resolution: {integrity: sha512-UB/IbzjWazwTlNAX0pvWNlJS8NKsOQ4syrXZQ/C72j+jirrsjVRT627lCaylrKJFBQWfRsPmIVQie8x38DEhAQ==}
 
@@ -5300,6 +5835,11 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
+  marked@16.4.0:
+    resolution: {integrity: sha512-CTPAcRBq57cn3R8n3hwc2REddc28hjR7RzDXQ+lXLmMJYqn20BaI2cGw6QjgZGIgVfp2Wdfw4aMzgNteQ6qJgQ==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -5331,6 +5871,15 @@ packages:
   merge@2.1.1:
     resolution: {integrity: sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==}
 
+  mermaid@11.12.0:
+    resolution: {integrity: sha512-ZudVx73BwrMJfCFmSSJT84y6u5brEoV8DOItdHomNLz32uBjNrelm7mg95X7g+C6UoQH/W6mBLGDEDv73JdxBg==}
+
+  mermaid@9.4.3:
+    resolution: {integrity: sha512-TLkQEtqhRSuEHSE34lh5bCa94KATCyluAXmFnNI2PRZwOpXFeqiJWwZl+d2CcemE1RS6QbbueSSq9QIg8Uxcyw==}
+
+  mgrs@1.0.0:
+    resolution: {integrity: sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -5408,9 +5957,27 @@ packages:
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
 
+  ml-array-max@1.2.4:
+    resolution: {integrity: sha512-BlEeg80jI0tW6WaPyGxf5Sa4sqvcyY6lbSn5Vcv44lp1I2GR6AWojfUvLnGTNsIXrZ8uqWmo8VcG1WpkI2ONMQ==}
+
+  ml-array-min@1.2.3:
+    resolution: {integrity: sha512-VcZ5f3VZ1iihtrGvgfh/q0XlMobG6GQ8FsNyQXD3T+IlstDv85g8kfV0xUG1QPRO/t21aukaJowDzMTc7j5V6Q==}
+
+  ml-array-rescale@1.3.7:
+    resolution: {integrity: sha512-48NGChTouvEo9KBctDfHC3udWnQKNKEWN0ziELvY3KG25GR5cA8K8wNVzracsqSW1QEkAXjTNx+ycgAv06/1mQ==}
+
+  ml-matrix@6.10.4:
+    resolution: {integrity: sha512-rUyEhfNPzqFsltYwvjNeYQXlYEaVea3KgzcJKJteQUj2WVAGFx9fLNRjtMR9mg2B6bd5buxlmkZmxM4hmO+SKg==}
+
+  ml-matrix@6.5.0:
+    resolution: {integrity: sha512-sms732Dge+rs5dU4mnjE0oqLWm1WujvR2fr38LgUHRG2cjXjWlO3WJupLYaSz3++2iYr0UrGDK72OAivr3J8dg==}
+
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
+  mlly@1.8.0:
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
+
   mockdate@3.0.5:
     resolution: {integrity: sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ==}
 
@@ -5446,6 +6013,10 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanostores@0.11.4:
+    resolution: {integrity: sha512-k1oiVNN4hDK8NcNERSZLQiMfRzEGtfnvZvdBvey3SQbgn8Dcrk0h1I6vpxApjb10PFUflZrgJ2WEZyJQ+5v7YQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
   napi-build-utils@2.0.0:
     resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
 
@@ -5463,8 +6034,8 @@ packages:
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
-  node-abi@3.75.0:
-    resolution: {integrity: sha512-OhYaY5sDsIka7H7AtijtI9jwGYLyl29eQn/W623DiN/MIv5sUqc4g7BIDThX+gb7di9f6xK02nkp8sdfFWZLTg==}
+  node-abi@3.85.0:
+    resolution: {integrity: sha512-zsFhmbkAzwhTft6nd3VxcG0cvJsT70rL+BIGHWVq5fi6MwGrHwzqKaxXE+Hl2GmnGItnDKPPkO5/LQqjVkIdFg==}
     engines: {node: '>=10'}
 
   node-addon-api@7.1.1:
@@ -5482,6 +6053,9 @@ packages:
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
+  non-layered-tidy-tree-layout@2.0.2:
+    resolution: {integrity: sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==}
+
   nopt@7.2.1:
     resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -5559,6 +6133,18 @@ packages:
     resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
     engines: {node: '>= 0.4'}
 
+  omi-transition@0.1.11:
+    resolution: {integrity: sha512-AsiLCOzMUuFRQ2juGXnSVjcOA2eOb4WdZzbiALbeyXCUgxdRTlE0ekO08IgyvAe9Rdc9fhx0iEgLnwd7ufneCg==}
+
+  omi-vueify@0.0.12:
+    resolution: {integrity: sha512-Z7fircOM/vKmh4hKZss4V1h4u5FQAfvauzBwWTiTlHGJWsaXglGRiHatiSCWsKv8v9uNK/xYXz3p+2QbkevPZg==}
+    peerDependencies:
+      omi: '>=7.7.8'
+      vue: '>=3'
+
+  omi@7.7.13:
+    resolution: {integrity: sha512-LA/rLhGE7PO/OVN9Mp4TG4YL3Dt5dERM9fsVyiPmE75CRCuyW7vVfrYK8Ee7EPbQuTycYRsfbrD1YBQytOY/jw==}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -5640,6 +6226,9 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  package-manager-detector@1.4.1:
+    resolution: {integrity: sha512-dSMiVLBEA4XaNJ0PRb4N5cV/SEP4BWrWZKBmfF+OUm2pQTiZ6DDkKeWaltwu3JRhLoy59ayIkJ00cx9K9CaYTg==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -5666,6 +6255,9 @@ packages:
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
+  path-data-parser@0.1.0:
+    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
+
   path-exists@3.0.0:
     resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
     engines: {node: '>=4'}
@@ -5760,10 +6352,19 @@ packages:
   pkg-types@2.2.0:
     resolution: {integrity: sha512-2SM/GZGAEkPp3KWORxQZns4M+WSeXbC2HEvmOIJe3Cmiv6ieAJvdVhDldtHqM5J1Y7MrR1XhkBT/rMlhh9FdqQ==}
 
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
   pngjs@5.0.0:
     resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
     engines: {node: '>=10.13.0'}
 
+  points-on-curve@0.2.0:
+    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
+
+  points-on-path@0.2.1:
+    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -6035,6 +6636,9 @@ packages:
     resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
     engines: {node: '>=6'}
 
+  probe.gl@3.6.0:
+    resolution: {integrity: sha512-19JydJWI7+DtR4feV+pu4Mn1I5TAc0xojuxVgZdXIyfmTLfUaFnk4OloWK1bKbPtkgGKLr2lnbnCXmpZEcEp9g==}
+
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -6042,6 +6646,9 @@ packages:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
 
+  proj4@2.8.1:
+    resolution: {integrity: sha512-KK/bgM6oIwxdpeCaJ/JK3V1D8LMQCKKKzndab4/pYQNd+NVKTcddUNtds053Q110GxTALXVjx98L9f5q8xPVXQ==}
+
   promise.series@0.2.0:
     resolution: {integrity: sha512-VWQJyU2bcDTgZw8kpfBpB/ejZASlCrzwz5f2hjb/zlujOEB4oeiAhHygAWq8ubsX2GVkD4kCU5V2dwOTaCY5EQ==}
     engines: {node: '>=0.12'}
@@ -6078,6 +6685,9 @@ packages:
   quansync@0.2.10:
     resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
 
+  quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
+
   query-string@7.1.3:
     resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
     engines: {node: '>=6'}
@@ -6105,6 +6715,9 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
+  reactive-signal@2.0.1:
+    resolution: {integrity: sha512-c+avHi2L+sHn9kkEsDZskRGtkfj6PtoTn1wGgutY2NZR9jCI0InXY7zqWbUXz6cGcuIXKMkQq/mtUiUXBFmKVA==}
+
   read-pkg-up@3.0.0:
     resolution: {integrity: sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==}
     engines: {node: '>=4'}
@@ -6173,6 +6786,9 @@ packages:
     resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
     hasBin: true
 
+  regl@1.7.0:
+    resolution: {integrity: sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w==}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -6224,13 +6840,15 @@ packages:
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rimraf@5.0.10:
     resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
     hasBin: true
 
+  robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+
   rolldown-plugin-dts@0.13.14:
     resolution: {integrity: sha512-wjNhHZz9dlN6PTIXyizB6u/mAg1wEFMW9yw7imEVe3CxHSRnNHVyycIX0yDEOVJfDNISLPbkCIPEpFpizy5+PQ==}
     engines: {node: '>=20.18.0'}
@@ -6321,6 +6939,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  roughjs@4.6.6:
+    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
+
   run-async@2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
@@ -6328,6 +6949,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
@@ -6678,6 +7302,9 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -6709,8 +7336,11 @@ packages:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
     engines: {node: '>=10.0.0'}
 
-  tar-fs@2.1.3:
-    resolution: {integrity: sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==}
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+
+  tar-fs@2.1.4:
+    resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
 
   tar-stream@2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
@@ -6734,6 +7364,11 @@ packages:
     peerDependencies:
       vue: ^2.6.12
 
+  tdesign-icons-web-components@0.3.2:
+    resolution: {integrity: sha512-mhn2CtRT7M36/iosC1DBjJ4PazCCdRIHGVpUJ+3pE1xE0u4ztlZ7lFn9YdvF6uMZQc7c1hTlOwQKzY7nmSJ2mg==}
+    peerDependencies:
+      omi: '>=7.6.17'
+
   tdesign-publish-cli@0.0.12:
     resolution: {integrity: sha512-eRmrOCUqR/55AAZ8dqUGV8+TU1qzljGoiU9TsFOroHcNe4T1u/dYwEBfg39NsupWUoO/v67XeUDlKyTjUHkO2w==}
     hasBin: true
@@ -6746,6 +7381,9 @@ packages:
     peerDependencies:
       vue: ~2.7.14
 
+  tdesign-web-components@1.2.6:
+    resolution: {integrity: sha512-peGoh4gPXjxOrUgQKeJTyVl8cIBDK6y48WVuCS14UAChfuCWnLG9N+8KTgEnApy2rauTEtp1nU/rVOzMthlbxA==}
+
   temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}
@@ -6802,6 +7440,10 @@ packages:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
 
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
   tinypool@1.1.1:
     resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -6822,6 +7464,9 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  toggle-selection@1.0.6:
+    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -6850,6 +7495,10 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-dedent@2.2.0:
+    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+    engines: {node: '>=6.10'}
+
   ts-node@10.9.2:
     resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true
@@ -6909,9 +7558,18 @@ packages:
   tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
 
+  tvision-charts-vue-next@3.3.13:
+    resolution: {integrity: sha512-UN3k8lBOyzO/cApekecLdKspWnX0MoCiTIYgom3ewSVFlrZu0/F35oXcgugjIGVoAaSK3ziTx9M+m7WSQD50Eg==}
+
+  tvision-charts@3.3.13:
+    resolution: {integrity: sha512-VwKKjje1QAvZZrUuMtPKd7wRlDN9qQmJG5bllJy4Fc/kXQwTceZYNCGsYmW6jGokLUeLnVI7vn6amxmNqDPI2g==}
+
   tvision-color@1.6.0:
     resolution: {integrity: sha512-pu8LkA4ZLBjbnmC9keqce4TLnExcQphKSoExauncSybmbqAhslXQvGdsI/FeWpxItGa4mcjGsHz5YE8bjpLjRw==}
 
+  tvision-token@1.0.4:
+    resolution: {integrity: sha512-kOl8+BORUJSkD/S5wGkGVYX/VZrm6SGUoTZ/SpCtZ7diPHPwkBJg8zQY4jyPcex7zYbYZxU+neEyJ1eU3lJhGg==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -7032,16 +7690,12 @@ packages:
     resolution: {integrity: sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA==}
     engines: {node: '>= 0.4.0'}
 
-  unplugin-utils@0.2.4:
-    resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
-    engines: {node: '>=18.12.0'}
-
-  unplugin-utils@0.3.0:
-    resolution: {integrity: sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==}
+  unplugin-utils@0.3.1:
+    resolution: {integrity: sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==}
     engines: {node: '>=20.19.0'}
 
-  unplugin-vue-components@29.0.0:
-    resolution: {integrity: sha512-M2DX44g4/jvBkB0V6uwqTbkTd5DMRHpeGoi/cIKwGG4HPuNxLbe8zoTStB2n12hoDiWc9I1PIRQruRWExNXHlQ==}
+  unplugin-vue-components@29.2.0:
+    resolution: {integrity: sha512-QxBeBdmEflgtJRgMQMc/z/JVV5lcwXN5nOy5ehX6CKDGylIu6Qn4Goy8X95S0qOxF7EdI+uNhdBd4v5i0bvzCw==}
     engines: {node: '>=14'}
     peerDependencies:
       '@babel/parser': ^7.15.8
@@ -7053,8 +7707,8 @@ packages:
       '@nuxt/kit':
         optional: true
 
-  unplugin@2.3.5:
-    resolution: {integrity: sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw==}
+  unplugin@2.3.10:
+    resolution: {integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==}
     engines: {node: '>=18.12.0'}
 
   upath@1.2.0:
@@ -7083,11 +7737,19 @@ packages:
   util@0.12.5:
     resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
 
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+
   uuid@3.4.0:
     resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
     deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
     hasBin: true
 
+  uuid@9.0.1:
+    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    hasBin: true
+
   v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
@@ -7195,6 +7857,26 @@ packages:
       jsdom:
         optional: true
 
+  vscode-jsonrpc@8.2.0:
+    resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
+    engines: {node: '>=14.0.0'}
+
+  vscode-languageserver-protocol@3.17.5:
+    resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==}
+
+  vscode-languageserver-textdocument@1.0.12:
+    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
+
+  vscode-languageserver-types@3.17.5:
+    resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
+
+  vscode-languageserver@9.0.1:
+    resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
+    hasBin: true
+
+  vscode-uri@3.0.8:
+    resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
+
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
@@ -7230,6 +7912,14 @@ packages:
       typescript:
         optional: true
 
+  vue@3.5.18:
+    resolution: {integrity: sha512-7W4Y4ZbMiQ3SEo+m9lnoNpV9xG7QVMLa+/0RFwwiAVkeYoyGXqWE85jabU4pllJNUzqfLShJ5YLptewhCWUgNA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   w3c-hr-time@1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     deprecated: Use your platform's native performance.now() and performance.timeOrigin.
@@ -7241,9 +7931,16 @@ packages:
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
+  weakmap-polyfill@2.0.4:
+    resolution: {integrity: sha512-ZzxBf288iALJseijWelmECm/1x7ZwQn3sMYIkDr2VvZp7r6SEKuT8D0O9Wiq6L9Nl5mazrOMcmiZE/2NCenaxw==}
+    engines: {node: '>=8.10.0'}
+
   web-encoding@1.1.5:
     resolution: {integrity: sha512-HYLeVCdJ0+lBYV2FvNZmv3HJ2Nt0QYXqZojk3d9FJOLkwnuhzM9tmamh8d7HPM8QqjKH8DeHkFTx+CFlWpZZDA==}
 
+  web-worker@1.5.0:
+    resolution: {integrity: sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==}
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -7312,6 +8009,9 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  wkt-parser@1.5.2:
+    resolution: {integrity: sha512-1ZUiV1FTwSiSrgWzV9KXJuOF2BVW91KY/mau04BhnmgOdroRQea7Q0s5TVqwGLm0D2tZwObd/tBYXW49sSxp3Q==}
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -7480,6 +8180,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -7487,6 +8190,55 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.4.1
+      tinyexec: 1.0.1
+
+  '@antfu/utils@9.3.0': {}
+
+  '@antv/g-webgpu-core@0.7.2':
+    dependencies:
+      eventemitter3: 4.0.7
+      gl-matrix: 3.4.4
+      lodash: 4.17.21
+      probe.gl: 3.6.0
+
+  '@antv/g-webgpu-engine@0.7.2':
+    dependencies:
+      '@antv/g-webgpu-core': 0.7.2
+      gl-matrix: 3.4.4
+      lodash: 4.17.21
+      regl: 1.7.0
+
+  '@antv/g-webgpu@0.7.2':
+    dependencies:
+      '@antv/g-webgpu-core': 0.7.2
+      '@antv/g-webgpu-engine': 0.7.2
+      gl-matrix: 3.4.4
+      gl-vec2: 1.3.0
+      lodash: 4.17.21
+
+  '@antv/graphlib@1.2.0': {}
+
+  '@antv/layout@0.3.25(dagre@0.8.5)':
+    dependencies:
+      '@antv/g-webgpu': 0.7.2
+      '@antv/graphlib': 1.2.0
+      '@antv/util': 3.3.11
+      d3-force: 2.1.1
+      d3-quadtree: 2.0.0
+      dagre-compound: 0.0.11(dagre@0.8.5)
+      ml-matrix: 6.5.0
+    transitivePeerDependencies:
+      - dagre
+
+  '@antv/util@3.3.11':
+    dependencies:
+      fast-deep-equal: 3.1.3
+      gl-matrix: 3.4.4
+      tslib: 2.8.1
+
   '@apideck/better-ajv-errors@0.3.6(ajv@8.17.1)':
     dependencies:
       ajv: 8.17.1
@@ -8185,11 +8937,19 @@ snapshots:
       '@babel/types': 7.27.7
       esutils: 2.0.3
 
+  '@babel/runtime-corejs2@7.28.3':
+    dependencies:
+      core-js: 2.6.12
+
   '@babel/runtime-corejs3@7.18.9':
     dependencies:
       core-js-pure: 3.43.0
       regenerator-runtime: 0.13.11
 
+  '@babel/runtime@7.21.0':
+    dependencies:
+      regenerator-runtime: 0.13.11
+
   '@babel/runtime@7.27.6': {}
 
   '@babel/template@7.27.2':
@@ -8227,6 +8987,28 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@braintree/sanitize-url@6.0.4':
+    optional: true
+
+  '@braintree/sanitize-url@7.1.1': {}
+
+  '@chevrotain/cst-dts-gen@11.0.3':
+    dependencies:
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+
+  '@chevrotain/gast@11.0.3':
+    dependencies:
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+
+  '@chevrotain/regexp-to-ast@11.0.3': {}
+
+  '@chevrotain/types@11.0.3': {}
+
+  '@chevrotain/utils@11.0.3': {}
+
   '@commitlint/cli@16.3.0':
     dependencies:
       '@commitlint/format': 16.2.1
@@ -8627,6 +9409,21 @@ snapshots:
 
   '@hutson/parse-repository-url@3.0.2': {}
 
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@3.0.2':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 9.3.0
+      '@iconify/types': 2.0.0
+      debug: 4.4.1
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.1
+      mlly: 1.7.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@isaacs/balanced-match@4.0.1': {}
 
   '@isaacs/brace-expansion@5.0.0':
@@ -8655,6 +9452,11 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.12
+      '@jridgewell/trace-mapping': 0.3.29
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.2.1': {}
@@ -8666,6 +9468,8 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -8683,6 +9487,10 @@ snapshots:
 
   '@material/material-color-utilities@0.1.2': {}
 
+  '@mermaid-js/parser@0.6.3':
+    dependencies:
+      langium: 3.3.1
+
   '@mswjs/cookies@0.2.2':
     dependencies:
       '@types/set-cookie-parser': 2.4.10
@@ -8739,6 +9547,19 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
+  '@probe.gl/env@3.6.0':
+    dependencies:
+      '@babel/runtime': 7.27.6
+
+  '@probe.gl/log@3.6.0':
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@probe.gl/env': 3.6.0
+
+  '@probe.gl/stats@3.6.0':
+    dependencies:
+      '@babel/runtime': 7.27.6
+
   '@quansync/fs@0.1.3':
     dependencies:
       quansync: 0.2.10
@@ -8980,7 +9801,7 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.12
 
-  '@tdesign/site-components@0.17.0':
+  '@tdesign/site-components@0.18.0-alpha.1':
     dependencies:
       '@popperjs/core': 2.11.8
       hybrids: 8.2.2
@@ -8989,7 +9810,7 @@ snapshots:
       qrcode: 1.5.4
       tdesign-icons-svg: 0.0.1
 
-  '@tdesign/site-components@0.18.0-alpha.1':
+  '@tdesign/site-components@0.18.0-alpha.5':
     dependencies:
       '@popperjs/core': 2.11.8
       hybrids: 8.2.2
@@ -9013,8 +9834,7 @@ snapshots:
     dependencies:
       '@testing-library/dom': 9.3.4
 
-  '@tootallnate/once@2.0.0':
-    optional: true
+  '@tootallnate/once@2.0.0': {}
 
   '@trysound/sax@0.2.0': {}
 
@@ -9041,6 +9861,10 @@ snapshots:
     dependencies:
       clipboard: 2.0.11
 
+  '@types/codemirror@0.0.108':
+    dependencies:
+      '@types/tern': 0.23.9
+
   '@types/conventional-commits-parser@5.0.1':
     dependencies:
       '@types/node': 22.15.32
@@ -9054,6 +9878,123 @@ snapshots:
     transitivePeerDependencies:
       - postcss
 
+  '@types/d3-array@3.2.2': {}
+
+  '@types/d3-axis@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-brush@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-chord@3.0.6': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-contour@3.0.6':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-delaunay@6.0.4': {}
+
+  '@types/d3-dispatch@3.0.7': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-dsv@3.0.7': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-polygon@3.0.2': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.3': {}
+
+  '@types/d3-scale-chromatic@3.1.0': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time-format@4.0.3': {}
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3@7.4.3':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.7
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -9070,6 +10011,8 @@ snapshots:
     dependencies:
       '@types/node': 22.15.32
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/glob@7.2.0':
     dependencies:
       '@types/minimatch': 5.1.2
@@ -9128,6 +10071,10 @@ snapshots:
 
   '@types/sortablejs@1.15.8': {}
 
+  '@types/tern@0.23.9':
+    dependencies:
+      '@types/estree': 1.0.8
+
   '@types/tinycolor2@1.4.6': {}
 
   '@types/trusted-types@2.0.7': {}
@@ -9347,37 +10294,37 @@ snapshots:
       '@typescript-eslint/types': 8.34.1
       eslint-visitor-keys: 4.2.1
 
-  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.7.3))':
+  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.7.3))':
     dependencies:
       '@babel/core': 7.27.4
       '@babel/plugin-transform-typescript': 7.27.1(@babel/core@7.27.4)
       '@rolldown/pluginutils': 1.0.0-beta.19
       '@vue/babel-plugin-jsx': 1.4.0(@babel/core@7.27.4)
       vite: 6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
-      vue: 3.3.9(typescript@5.7.3)
+      vue: 3.5.18(typescript@5.7.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.8.3))':
+  '@vitejs/plugin-vue-jsx@4.2.0(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.8.3))':
     dependencies:
       '@babel/core': 7.27.4
       '@babel/plugin-transform-typescript': 7.27.1(@babel/core@7.27.4)
       '@rolldown/pluginutils': 1.0.0-beta.19
       '@vue/babel-plugin-jsx': 1.4.0(@babel/core@7.27.4)
       vite: 6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
-      vue: 3.3.9(typescript@5.8.3)
+      vue: 3.5.18(typescript@5.8.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.7.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.7.3))':
     dependencies:
       vite: 6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
-      vue: 3.3.9(typescript@5.7.3)
+      vue: 3.5.18(typescript@5.7.3)
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.3.9(typescript@5.8.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0))(vue@3.5.18(typescript@5.8.3))':
     dependencies:
       vite: 6.3.5(@types/node@22.15.32)(jiti@2.4.2)(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
-      vue: 3.3.9(typescript@5.8.3)
+      vue: 3.5.18(typescript@5.8.3)
 
   '@vitest/coverage-v8@3.2.4(vitest@3.2.4)':
     dependencies:
@@ -9394,7 +10341,7 @@ snapshots:
       std-env: 3.9.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.1.2))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.2.0))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -9443,7 +10390,7 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.14
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.1.2))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.2.0))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
     optional: true
 
   '@vitest/utils@3.2.4':
@@ -9489,7 +10436,7 @@ snapshots:
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/parser': 7.27.7
-      '@vue/compiler-sfc': 3.5.17
+      '@vue/compiler-sfc': 3.5.18
     transitivePeerDependencies:
       - supports-color
 
@@ -9508,6 +10455,14 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-core@3.5.18':
+    dependencies:
+      '@babel/parser': 7.28.0
+      '@vue/shared': 3.5.18
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-dom@3.3.9':
     dependencies:
       '@vue/compiler-core': 3.3.9
@@ -9518,9 +10473,14 @@ snapshots:
       '@vue/compiler-core': 3.5.17
       '@vue/shared': 3.5.17
 
+  '@vue/compiler-dom@3.5.18':
+    dependencies:
+      '@vue/compiler-core': 3.5.18
+      '@vue/shared': 3.5.18
+
   '@vue/compiler-sfc@2.7.14':
     dependencies:
-      '@babel/parser': 7.28.0
+      '@babel/parser': 7.27.7
       postcss: 8.5.6
       source-map: 0.6.1
 
@@ -9549,6 +10509,18 @@ snapshots:
       postcss: 8.5.6
       source-map-js: 1.2.1
 
+  '@vue/compiler-sfc@3.5.18':
+    dependencies:
+      '@babel/parser': 7.28.0
+      '@vue/compiler-core': 3.5.18
+      '@vue/compiler-dom': 3.5.18
+      '@vue/compiler-ssr': 3.5.18
+      '@vue/shared': 3.5.18
+      estree-walker: 2.0.2
+      magic-string: 0.30.17
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
   '@vue/compiler-ssr@3.3.9':
     dependencies:
       '@vue/compiler-dom': 3.3.9
@@ -9559,6 +10531,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.17
       '@vue/shared': 3.5.17
 
+  '@vue/compiler-ssr@3.5.18':
+    dependencies:
+      '@vue/compiler-dom': 3.5.18
+      '@vue/shared': 3.5.18
+
   '@vue/compiler-vue2@2.7.16':
     dependencies:
       de-indent: 1.0.2
@@ -9581,9 +10558,9 @@ snapshots:
   '@vue/language-core@2.2.10(typescript@5.7.3)':
     dependencies:
       '@volar/language-core': 2.4.14
-      '@vue/compiler-dom': 3.5.17
+      '@vue/compiler-dom': 3.5.18
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.17
+      '@vue/shared': 3.5.18
       alien-signals: 1.0.13
       minimatch: 9.0.5
       muggle-string: 0.4.1
@@ -9603,22 +10580,32 @@ snapshots:
     dependencies:
       '@vue/shared': 3.3.9
 
+  '@vue/reactivity@3.5.18':
+    dependencies:
+      '@vue/shared': 3.5.18
+
   '@vue/runtime-core@3.3.9':
     dependencies:
       '@vue/reactivity': 3.3.9
       '@vue/shared': 3.3.9
 
+  '@vue/runtime-core@3.5.18':
+    dependencies:
+      '@vue/reactivity': 3.5.18
+      '@vue/shared': 3.5.18
+
   '@vue/runtime-dom@3.3.9':
     dependencies:
       '@vue/runtime-core': 3.3.9
       '@vue/shared': 3.3.9
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.3.9(vue@3.3.9(typescript@5.7.3))':
+  '@vue/runtime-dom@3.5.18':
     dependencies:
-      '@vue/compiler-ssr': 3.3.9
-      '@vue/shared': 3.3.9
-      vue: 3.3.9(typescript@5.7.3)
+      '@vue/reactivity': 3.5.18
+      '@vue/runtime-core': 3.5.18
+      '@vue/shared': 3.5.18
+      csstype: 3.1.3
 
   '@vue/server-renderer@3.3.9(vue@3.3.9(typescript@5.8.3))':
     dependencies:
@@ -9626,19 +10613,33 @@ snapshots:
       '@vue/shared': 3.3.9
       vue: 3.3.9(typescript@5.8.3)
 
+  '@vue/server-renderer@3.5.18(vue@3.5.18(typescript@5.7.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.18
+      '@vue/shared': 3.5.18
+      vue: 3.5.18(typescript@5.7.3)
+
+  '@vue/server-renderer@3.5.18(vue@3.5.18(typescript@5.8.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.18
+      '@vue/shared': 3.5.18
+      vue: 3.5.18(typescript@5.8.3)
+
   '@vue/shared@3.3.9': {}
 
   '@vue/shared@3.5.17': {}
 
+  '@vue/shared@3.5.18': {}
+
   '@vue/test-utils@2.4.6':
     dependencies:
       js-beautify: 1.15.4
       vue-component-type-helpers: 2.2.10
 
-  '@vue/tsconfig@0.7.0(typescript@5.7.3)(vue@3.3.9(typescript@5.7.3))':
+  '@vue/tsconfig@0.7.0(typescript@5.7.3)(vue@3.5.18(typescript@5.7.3))':
     optionalDependencies:
       typescript: 5.7.3
-      vue: 3.3.9(typescript@5.7.3)
+      vue: 3.5.18(typescript@5.7.3)
 
   '@xmldom/xmldom@0.8.10': {}
 
@@ -9650,8 +10651,7 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
-  abab@2.0.6:
-    optional: true
+  abab@2.0.6: {}
 
   abbrev@2.0.0: {}
 
@@ -9659,7 +10659,6 @@ snapshots:
     dependencies:
       acorn: 7.4.1
       acorn-walk: 7.2.0
-    optional: true
 
   acorn-jsx@5.3.2(acorn@7.4.1):
     dependencies:
@@ -9669,8 +10668,7 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
-  acorn-walk@7.2.0:
-    optional: true
+  acorn-walk@7.2.0: {}
 
   acorn-walk@8.3.4:
     dependencies:
@@ -9687,7 +10685,6 @@ snapshots:
       debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   aggregate-error@3.1.0:
     dependencies:
@@ -9826,8 +10823,7 @@ snapshots:
 
   async@3.2.6: {}
 
-  asynckit@0.4.0:
-    optional: true
+  asynckit@0.4.0: {}
 
   at-least-node@1.0.0: {}
 
@@ -9902,8 +10898,7 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browser-process-hrtime@1.0.0:
-    optional: true
+  browser-process-hrtime@1.0.0: {}
 
   browserslist@4.25.0:
     dependencies:
@@ -9959,7 +10954,7 @@ snapshots:
 
   caniuse-lite@1.0.30001724: {}
 
-  canvas@3.1.2:
+  canvas@3.2.0:
     dependencies:
       node-addon-api: 7.1.1
       prebuild-install: 7.1.3
@@ -9992,6 +10987,36 @@ snapshots:
 
   check-error@2.1.1: {}
 
+  cherry-markdown@0.10.1-alpha.0:
+    dependencies:
+      '@types/codemirror': 0.0.108
+      crypto-js: 4.2.0
+      dompurify: 3.2.6
+      htmlparser2: 10.0.0
+      jsdom: 19.0.0(canvas@3.2.0)
+      ws: 8.18.2
+    optionalDependencies:
+      mermaid: 9.4.3
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
+  chevrotain-allstar@0.3.1(chevrotain@11.0.3):
+    dependencies:
+      chevrotain: 11.0.3
+      lodash-es: 4.17.21
+
+  chevrotain@11.0.3:
+    dependencies:
+      '@chevrotain/cst-dts-gen': 11.0.3
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/regexp-to-ast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      '@chevrotain/utils': 11.0.3
+      lodash-es: 4.17.21
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -10014,6 +11039,10 @@ snapshots:
     dependencies:
       cross-env: 6.0.3
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   classnames@2.5.1: {}
 
   clean-stack@2.2.0: {}
@@ -10062,6 +11091,8 @@ snapshots:
 
   clone@1.0.4: {}
 
+  clsx@2.1.1: {}
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -10083,7 +11114,6 @@ snapshots:
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
-    optional: true
 
   commander@10.0.1: {}
 
@@ -10093,6 +11123,8 @@ snapshots:
 
   commander@7.2.0: {}
 
+  commander@8.3.0: {}
+
   commitizen@4.3.1(@types/node@22.15.32)(typescript@5.7.3):
     dependencies:
       cachedir: 2.3.0
@@ -10147,6 +11179,8 @@ snapshots:
 
   confusing-browser-globals@1.0.11: {}
 
+  construct-style-sheets-polyfill@3.0.1: {}
+
   conventional-changelog-angular@5.0.13:
     dependencies:
       compare-func: 2.0.0
@@ -10279,16 +11313,30 @@ snapshots:
     dependencies:
       is-what: 3.14.1
 
+  copy-to-clipboard@3.3.3:
+    dependencies:
+      toggle-selection: 1.0.6
+
   core-js-compat@3.43.0:
     dependencies:
       browserslist: 4.25.0
 
   core-js-pure@3.43.0: {}
 
+  core-js@2.6.12: {}
+
   core-js@3.43.0: {}
 
   core-util-is@1.0.3: {}
 
+  cose-base@1.0.3:
+    dependencies:
+      layout-base: 1.0.2
+
+  cose-base@2.2.0:
+    dependencies:
+      layout-base: 2.0.1
+
   cosmiconfig-typescript-loader@2.0.2(@types/node@22.15.32)(cosmiconfig@7.1.0)(typescript@4.9.5):
     dependencies:
       '@types/node': 22.15.32
@@ -10357,6 +11405,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crypto-js@4.2.0: {}
+
   crypto-random-string@2.0.0: {}
 
   css-declaration-sorter@6.4.1(postcss@8.5.6):
@@ -10432,36 +11482,244 @@ snapshots:
     dependencies:
       css-tree: 1.1.3
 
-  cssom@0.3.8:
-    optional: true
+  cssom@0.3.8: {}
 
-  cssom@0.5.0:
-    optional: true
+  cssom@0.5.0: {}
+
+  cssstyle@2.3.0:
+    dependencies:
+      cssom: 0.3.8
+
+  csstype@3.1.3: {}
+
+  cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.1):
+    dependencies:
+      cose-base: 1.0.3
+      cytoscape: 3.33.1
+
+  cytoscape-fcose@2.2.0(cytoscape@3.33.1):
+    dependencies:
+      cose-base: 2.2.0
+      cytoscape: 3.33.1
+
+  cytoscape@3.33.1: {}
+
+  cz-conventional-changelog@3.3.0(@types/node@22.15.32)(typescript@5.7.3):
+    dependencies:
+      chalk: 2.4.2
+      commitizen: 4.3.1(@types/node@22.15.32)(typescript@5.7.3)
+      conventional-commit-types: 3.0.0
+      lodash.map: 4.6.0
+      longest: 2.0.1
+      word-wrap: 1.2.5
+    optionalDependencies:
+      '@commitlint/load': 19.8.1(@types/node@22.15.32)(typescript@5.7.3)
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+
+  cz-git@1.11.2: {}
+
+  czg@1.11.2: {}
+
+  d3-array@2.12.1:
+    dependencies:
+      internmap: 1.0.1
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-axis@3.0.0: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-color@3.1.0: {}
+
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.0.1
+
+  d3-dispatch@2.0.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
+  d3-ease@3.0.1: {}
+
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force@2.1.1:
+    dependencies:
+      d3-dispatch: 2.0.0
+      d3-quadtree: 2.0.0
+      d3-timer: 2.0.0
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-format@3.1.0: {}
+
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@1.0.9: {}
+
+  d3-path@3.1.0: {}
+
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@2.0.0: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-sankey@0.12.3:
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@1.3.7:
+    dependencies:
+      d3-path: 1.0.9
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@2.0.0: {}
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
 
-  cssstyle@2.3.0:
+  d3-zoom@3.0.0:
     dependencies:
-      cssom: 0.3.8
-    optional: true
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
 
-  csstype@3.1.3: {}
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
 
-  cz-conventional-changelog@3.3.0(@types/node@22.15.32)(typescript@5.7.3):
+  dagre-compound@0.0.11(dagre@0.8.5):
     dependencies:
-      chalk: 2.4.2
-      commitizen: 4.3.1(@types/node@22.15.32)(typescript@5.7.3)
-      conventional-commit-types: 3.0.0
-      lodash.map: 4.6.0
-      longest: 2.0.1
-      word-wrap: 1.2.5
-    optionalDependencies:
-      '@commitlint/load': 19.8.1(@types/node@22.15.32)(typescript@5.7.3)
-    transitivePeerDependencies:
-      - '@types/node'
-      - typescript
+      dagre: 0.8.5
 
-  cz-git@1.11.2: {}
+  dagre-d3-es@7.0.11:
+    dependencies:
+      d3: 7.9.0
+      lodash-es: 4.17.21
 
-  czg@1.11.2: {}
+  dagre-d3-es@7.0.9:
+    dependencies:
+      d3: 7.9.0
+      lodash-es: 4.17.21
+    optional: true
+
+  dagre@0.8.5:
+    dependencies:
+      graphlib: 2.1.8
+      lodash: 4.17.21
 
   dargs@7.0.0: {}
 
@@ -10470,7 +11728,6 @@ snapshots:
       abab: 2.0.6
       whatwg-mimetype: 3.0.0
       whatwg-url: 11.0.0
-    optional: true
 
   data-view-buffer@1.0.2:
     dependencies:
@@ -10494,6 +11751,8 @@ snapshots:
 
   dayjs@1.11.10: {}
 
+  dayjs@1.11.18: {}
+
   de-indent@1.0.2: {}
 
   debug@3.2.7:
@@ -10504,6 +11763,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
   decamelize-keys@1.1.1:
     dependencies:
       decamelize: 1.2.0
@@ -10511,8 +11774,7 @@ snapshots:
 
   decamelize@1.2.0: {}
 
-  decimal.js@10.5.0:
-    optional: true
+  decimal.js@10.5.0: {}
 
   decode-uri-component@0.2.2: {}
 
@@ -10580,8 +11842,11 @@ snapshots:
       rimraf: 3.0.2
       slash: 3.0.0
 
-  delayed-stream@1.0.0:
-    optional: true
+  delaunator@5.0.1:
+    dependencies:
+      robust-predicates: 3.0.2
+
+  delayed-stream@1.0.0: {}
 
   delegate@3.2.0: {}
 
@@ -10589,7 +11854,7 @@ snapshots:
 
   detect-indent@6.1.0: {}
 
-  detect-libc@2.0.4: {}
+  detect-libc@2.1.2: {}
 
   diacritics@1.3.0: {}
 
@@ -10621,23 +11886,45 @@ snapshots:
       domhandler: 4.3.1
       entities: 2.2.0
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
   domelementtype@2.3.0: {}
 
   domexception@4.0.0:
     dependencies:
       webidl-conversions: 7.0.0
-    optional: true
 
   domhandler@4.3.1:
     dependencies:
       domelementtype: 2.3.0
 
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  dompurify@2.4.3:
+    optional: true
+
+  dompurify@3.2.6:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@2.8.0:
     dependencies:
       dom-serializer: 1.4.1
       domelementtype: 2.3.0
       domhandler: 4.3.1
 
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dot-prop@5.3.0:
     dependencies:
       is-obj: 2.0.0
@@ -10665,6 +11952,9 @@ snapshots:
 
   electron-to-chromium@1.5.171: {}
 
+  elkjs@0.8.2:
+    optional: true
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
@@ -10686,6 +11976,8 @@ snapshots:
 
   entities@4.5.0: {}
 
+  entities@6.0.1: {}
+
   env-paths@2.2.1:
     optional: true
 
@@ -10923,7 +12215,6 @@ snapshots:
       esutils: 2.0.3
     optionalDependencies:
       source-map: 0.6.1
-    optional: true
 
   eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@4.33.0(eslint@7.32.0)(typescript@5.7.3))(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
@@ -11194,6 +12485,8 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
+  fast-json-patch@3.1.1: {}
+
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
@@ -11210,6 +12503,10 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.2
 
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
   fflate@0.8.2:
     optional: true
 
@@ -11283,7 +12580,6 @@ snapshots:
       es-set-tostringtag: 2.1.0
       hasown: 2.0.2
       mime-types: 2.1.35
-    optional: true
 
   fraction.js@4.3.7: {}
 
@@ -11413,6 +12709,10 @@ snapshots:
 
   github-from-package@0.0.0: {}
 
+  gl-matrix@3.4.4: {}
+
+  gl-vec2@1.3.0: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -11500,6 +12800,8 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
+  globals@15.15.0: {}
+
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
@@ -11537,6 +12839,10 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  graphlib@2.1.8:
+    dependencies:
+      lodash: 4.17.21
+
   graphql@16.11.0: {}
 
   gray-matter@4.0.3:
@@ -11546,6 +12852,8 @@ snapshots:
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
 
+  hachure-fill@0.5.2: {}
+
   handlebars@4.7.8:
     dependencies:
       minimist: 1.2.8
@@ -11601,15 +12909,23 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
+  htm@3.1.1: {}
+
   html-encoding-sniffer@3.0.0:
     dependencies:
       whatwg-encoding: 2.0.0
-    optional: true
 
   html-escaper@2.0.2: {}
 
   html-tags@3.3.1: {}
 
+  htmlparser2@10.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 6.0.1
+
   http-proxy-agent@5.0.0:
     dependencies:
       '@tootallnate/once': 2.0.0
@@ -11617,7 +12933,6 @@ snapshots:
       debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   https-proxy-agent@5.0.1:
     dependencies:
@@ -11625,7 +12940,6 @@ snapshots:
       debug: 4.4.1
     transitivePeerDependencies:
       - supports-color
-    optional: true
 
   human-signals@2.1.0: {}
 
@@ -11646,7 +12960,6 @@ snapshots:
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
-    optional: true
 
   icss-replace-symbols@1.1.0: {}
 
@@ -11665,6 +12978,8 @@ snapshots:
   image-size@0.5.5:
     optional: true
 
+  immer@10.1.1: {}
+
   import-cwd@3.0.0:
     dependencies:
       import-from: 3.0.0
@@ -11741,6 +13056,12 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  internmap@1.0.1: {}
+
+  internmap@2.0.3: {}
+
+  is-any-array@2.0.1: {}
+
   is-arguments@1.2.0:
     dependencies:
       call-bound: 1.0.4
@@ -11846,8 +13167,7 @@ snapshots:
 
   is-plain-object@5.0.0: {}
 
-  is-potential-custom-element-name@1.0.1:
-    optional: true
+  is-potential-custom-element-name@1.0.1: {}
 
   is-reference@1.2.1:
     dependencies:
@@ -11989,7 +13309,7 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@19.0.0(canvas@3.1.2):
+  jsdom@19.0.0(canvas@3.2.0):
     dependencies:
       abab: 2.0.6
       acorn: 8.15.0
@@ -12019,12 +13339,11 @@ snapshots:
       ws: 8.18.2
       xml-name-validator: 4.0.0
     optionalDependencies:
-      canvas: 3.1.2
+      canvas: 3.2.0
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
-    optional: true
 
   jsesc@3.0.2: {}
 
@@ -12068,14 +13387,34 @@ snapshots:
 
   jsonpointer@5.0.1: {}
 
+  katex@0.16.25:
+    dependencies:
+      commander: 8.3.0
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
+  khroma@2.1.0: {}
+
   kind-of@6.0.3: {}
 
   known-css-properties@0.26.0: {}
 
+  kolorist@1.8.0: {}
+
+  langium@3.3.1:
+    dependencies:
+      chevrotain: 11.0.3
+      chevrotain-allstar: 0.3.1(chevrotain@11.0.3)
+      vscode-languageserver: 9.0.1
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.0.8
+
+  layout-base@1.0.2: {}
+
+  layout-base@2.0.1: {}
+
   less@4.3.0:
     dependencies:
       copy-anything: 2.0.6
@@ -12152,6 +13491,12 @@ snapshots:
       pkg-types: 2.2.0
       quansync: 0.2.10
 
+  local-pkg@1.1.2:
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 2.3.0
+      quansync: 0.2.11
+
   locate-path@2.0.0:
     dependencies:
       p-locate: 2.0.0
@@ -12243,6 +13588,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   magicast@0.3.5:
     dependencies:
       '@babel/parser': 7.27.5
@@ -12281,6 +13630,8 @@ snapshots:
 
   markdown-it-emoji@2.0.2: {}
 
+  markdown-it-fence@0.1.3: {}
+
   markdown-it-toc-done-right@4.2.0: {}
 
   markdown-it@12.3.2:
@@ -12297,6 +13648,8 @@ snapshots:
 
   marked@12.0.2: {}
 
+  marked@16.4.0: {}
+
   math-intrinsics@1.1.0: {}
 
   mathml-tag-names@2.1.3: {}
@@ -12340,6 +13693,53 @@ snapshots:
 
   merge@2.1.1: {}
 
+  mermaid@11.12.0:
+    dependencies:
+      '@braintree/sanitize-url': 7.1.1
+      '@iconify/utils': 3.0.2
+      '@mermaid-js/parser': 0.6.3
+      '@types/d3': 7.4.3
+      cytoscape: 3.33.1
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.1)
+      cytoscape-fcose: 2.2.0(cytoscape@3.33.1)
+      d3: 7.9.0
+      d3-sankey: 0.12.3
+      dagre-d3-es: 7.0.11
+      dayjs: 1.11.18
+      dompurify: 3.2.6
+      katex: 0.16.25
+      khroma: 2.1.0
+      lodash-es: 4.17.21
+      marked: 16.4.0
+      roughjs: 4.6.6
+      stylis: 4.3.6
+      ts-dedent: 2.2.0
+      uuid: 11.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mermaid@9.4.3:
+    dependencies:
+      '@braintree/sanitize-url': 6.0.4
+      cytoscape: 3.33.1
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.1)
+      cytoscape-fcose: 2.2.0(cytoscape@3.33.1)
+      d3: 7.9.0
+      dagre-d3-es: 7.0.9
+      dayjs: 1.11.18
+      dompurify: 2.4.3
+      elkjs: 0.8.2
+      khroma: 2.1.0
+      lodash-es: 4.17.21
+      non-layered-tidy-tree-layout: 2.0.2
+      stylis: 4.3.6
+      ts-dedent: 2.2.0
+      uuid: 9.0.1
+      web-worker: 1.5.0
+    optional: true
+
+  mgrs@1.0.0: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -12400,6 +13800,29 @@ snapshots:
 
   mkdirp-classic@0.5.3: {}
 
+  ml-array-max@1.2.4:
+    dependencies:
+      is-any-array: 2.0.1
+
+  ml-array-min@1.2.3:
+    dependencies:
+      is-any-array: 2.0.1
+
+  ml-array-rescale@1.3.7:
+    dependencies:
+      is-any-array: 2.0.1
+      ml-array-max: 1.2.4
+      ml-array-min: 1.2.3
+
+  ml-matrix@6.10.4:
+    dependencies:
+      is-any-array: 2.0.1
+      ml-array-rescale: 1.3.7
+
+  ml-matrix@6.5.0:
+    dependencies:
+      ml-array-rescale: 1.3.7
+
   mlly@1.7.4:
     dependencies:
       acorn: 8.15.0
@@ -12407,6 +13830,13 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.1
 
+  mlly@1.8.0:
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+
   mockdate@3.0.5: {}
 
   modify-values@1.0.1: {}
@@ -12449,6 +13879,8 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  nanostores@0.11.4: {}
+
   napi-build-utils@2.0.0: {}
 
   natural-compare-lite@1.4.0: {}
@@ -12463,7 +13895,7 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  node-abi@3.75.0:
+  node-abi@3.85.0:
     dependencies:
       semver: 7.7.2
 
@@ -12475,6 +13907,9 @@ snapshots:
 
   node-releases@2.0.19: {}
 
+  non-layered-tidy-tree-layout@2.0.2:
+    optional: true
+
   nopt@7.2.1:
     dependencies:
       abbrev: 2.0.0
@@ -12515,8 +13950,7 @@ snapshots:
 
   null-check@1.0.0: {}
 
-  nwsapi@2.2.20:
-    optional: true
+  nwsapi@2.2.20: {}
 
   object-inspect@1.13.4: {}
 
@@ -12563,6 +13997,21 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  omi-transition@0.1.11:
+    dependencies:
+      omi: 7.7.13
+
+  omi-vueify@0.0.12(omi@7.7.13)(vue@3.3.9(typescript@5.8.3)):
+    dependencies:
+      omi: 7.7.13
+      vue: 3.3.9(typescript@5.8.3)
+
+  omi@7.7.13:
+    dependencies:
+      construct-style-sheets-polyfill: 3.0.1
+      reactive-signal: 2.0.1
+      weakmap-polyfill: 2.0.4
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -12651,6 +14100,8 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  package-manager-detector@1.4.1: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -12671,11 +14122,12 @@ snapshots:
 
   parse-passwd@1.0.0: {}
 
-  parse5@6.0.1:
-    optional: true
+  parse5@6.0.1: {}
 
   path-browserify@1.0.1: {}
 
+  path-data-parser@0.1.0: {}
+
   path-exists@3.0.0: {}
 
   path-exists@4.0.0: {}
@@ -12733,7 +14185,7 @@ snapshots:
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
-      mlly: 1.7.4
+      mlly: 1.8.0
       pathe: 2.0.3
 
   pkg-types@2.2.0:
@@ -12742,8 +14194,21 @@ snapshots:
       exsolve: 1.0.7
       pathe: 2.0.3
 
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.7
+      pathe: 2.0.3
+
   pngjs@5.0.0: {}
 
+  points-on-curve@0.2.0: {}
+
+  points-on-path@0.2.1:
+    dependencies:
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-calc@8.2.4(postcss@8.5.6):
@@ -12965,17 +14430,17 @@ snapshots:
 
   prebuild-install@7.1.3:
     dependencies:
-      detect-libc: 2.0.4
+      detect-libc: 2.1.2
       expand-template: 2.0.3
       github-from-package: 0.0.0
       minimist: 1.2.8
       mkdirp-classic: 0.5.3
       napi-build-utils: 2.0.0
-      node-abi: 3.75.0
+      node-abi: 3.85.0
       pump: 3.0.3
       rc: 1.2.8
       simple-get: 4.0.1
-      tar-fs: 2.1.3
+      tar-fs: 2.1.4
       tunnel-agent: 0.6.0
 
   prelude-ls@1.2.1: {}
@@ -12998,10 +14463,22 @@ snapshots:
 
   prismjs@1.30.0: {}
 
+  probe.gl@3.6.0:
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@probe.gl/env': 3.6.0
+      '@probe.gl/log': 3.6.0
+      '@probe.gl/stats': 3.6.0
+
   process-nextick-args@2.0.1: {}
 
   progress@2.0.3: {}
 
+  proj4@2.8.1:
+    dependencies:
+      mgrs: 1.0.0
+      wkt-parser: 1.5.2
+
   promise.series@0.2.0: {}
 
   proto-list@1.2.4: {}
@@ -13012,7 +14489,6 @@ snapshots:
   psl@1.15.0:
     dependencies:
       punycode: 2.3.1
-    optional: true
 
   pump@3.0.3:
     dependencies:
@@ -13031,6 +14507,8 @@ snapshots:
 
   quansync@0.2.10: {}
 
+  quansync@0.2.11: {}
+
   query-string@7.1.3:
     dependencies:
       decode-uri-component: 0.2.2
@@ -13038,8 +14516,7 @@ snapshots:
       split-on-first: 1.1.0
       strict-uri-encode: 2.0.0
 
-  querystringify@2.2.0:
-    optional: true
+  querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
 
@@ -13062,6 +14539,8 @@ snapshots:
 
   react-is@17.0.2: {}
 
+  reactive-signal@2.0.1: {}
+
   read-pkg-up@3.0.0:
     dependencies:
       find-up: 2.1.0
@@ -13158,14 +14637,15 @@ snapshots:
     dependencies:
       jsesc: 3.0.2
 
+  regl@1.7.0: {}
+
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
 
   require-main-filename@2.0.0: {}
 
-  requires-port@1.0.0:
-    optional: true
+  requires-port@1.0.0: {}
 
   resolve-dir@1.0.1:
     dependencies:
@@ -13205,6 +14685,8 @@ snapshots:
     dependencies:
       glob: 10.4.5
 
+  robust-predicates@3.0.2: {}
+
   rolldown-plugin-dts@0.13.14(rolldown@1.0.0-beta.28)(typescript@5.7.3)(vue-tsc@2.2.10(typescript@5.7.3)):
     dependencies:
       '@babel/generator': 7.28.0
@@ -13349,9 +14831,9 @@ snapshots:
       serialize-javascript: 4.0.0
       terser: 5.43.1
 
-  rollup-plugin-vue@6.0.0(@vue/compiler-sfc@3.5.17):
+  rollup-plugin-vue@6.0.0(@vue/compiler-sfc@3.5.18):
     dependencies:
-      '@vue/compiler-sfc': 3.5.17
+      '@vue/compiler-sfc': 3.5.18
       debug: 4.4.1
       hash-sum: 2.0.0
       rollup-pluginutils: 2.8.2
@@ -13392,12 +14874,21 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.44.0
       fsevents: 2.3.3
 
+  roughjs@4.6.6:
+    dependencies:
+      hachure-fill: 0.5.2
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+
   run-async@2.4.1: {}
 
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
 
+  rw@1.3.3: {}
+
   rxjs@7.8.2:
     dependencies:
       tslib: 2.8.1
@@ -13435,7 +14926,6 @@ snapshots:
   saxes@5.0.1:
     dependencies:
       xmlchars: 2.2.0
-    optional: true
 
   section-matter@1.0.0:
     dependencies:
@@ -13811,6 +15301,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  stylis@4.3.6: {}
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -13838,8 +15330,7 @@ snapshots:
       picocolors: 1.1.1
       stable: 0.1.8
 
-  symbol-tree@3.2.4:
-    optional: true
+  symbol-tree@3.2.4: {}
 
   table@6.9.0:
     dependencies:
@@ -13849,7 +15340,9 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tar-fs@2.1.3:
+  tailwind-merge@2.6.0: {}
+
+  tar-fs@2.1.4:
     dependencies:
       chownr: 1.1.4
       mkdirp-classic: 0.5.3
@@ -13866,15 +15359,15 @@ snapshots:
 
   tdesign-icons-svg@0.0.1: {}
 
-  tdesign-icons-vue-next@0.4.1(vue@3.3.9(typescript@5.7.3)):
+  tdesign-icons-vue-next@0.4.1(vue@3.3.9(typescript@5.8.3)):
     dependencies:
       '@babel/runtime': 7.27.6
-      vue: 3.3.9(typescript@5.7.3)
+      vue: 3.3.9(typescript@5.8.3)
 
-  tdesign-icons-vue-next@0.4.1(vue@3.3.9(typescript@5.8.3)):
+  tdesign-icons-vue-next@0.4.1(vue@3.5.18(typescript@5.7.3)):
     dependencies:
       '@babel/runtime': 7.27.6
-      vue: 3.3.9(typescript@5.8.3)
+      vue: 3.5.18(typescript@5.7.3)
 
   tdesign-icons-vue@0.0.8(vue@2.7.14):
     dependencies:
@@ -13888,6 +15381,13 @@ snapshots:
       classnames: 2.5.1
       vue: 2.7.14
 
+  tdesign-icons-web-components@0.3.2(omi@7.7.13):
+    dependencies:
+      '@babel/runtime': 7.27.6
+      clsx: 2.1.1
+      omi: 7.7.13
+      tailwind-merge: 2.6.0
+
   tdesign-publish-cli@0.0.12:
     dependencies:
       commander: 7.2.0
@@ -13925,6 +15425,32 @@ snapshots:
       validator: 13.15.15
       vue: 2.7.14
 
+  tdesign-web-components@1.2.6:
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@popperjs/core': 2.11.8
+      cherry-markdown: 0.10.1-alpha.0
+      class-variance-authority: 0.7.1
+      clsx: 2.1.1
+      copy-to-clipboard: 3.3.3
+      fast-json-patch: 3.1.1
+      htm: 3.1.1
+      immer: 10.1.1
+      lodash-es: 4.17.21
+      markdown-it-fence: 0.1.3
+      mermaid: 11.12.0
+      nanostores: 0.11.4
+      omi: 7.7.13
+      omi-transition: 0.1.11
+      tailwind-merge: 2.6.0
+      tdesign-icons-web-components: 0.3.2(omi@7.7.13)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - bufferutil
+      - canvas
+      - supports-color
+      - utf-8-validate
+
   temp-dir@2.0.0: {}
 
   tempfile@3.0.0:
@@ -13982,6 +15508,11 @@ snapshots:
       fdir: 6.4.6(picomatch@4.0.2)
       picomatch: 4.0.2
 
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
   tinypool@1.1.1: {}
 
   tinyrainbow@2.0.0: {}
@@ -13996,6 +15527,8 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  toggle-selection@1.0.6: {}
+
   totalist@3.0.1:
     optional: true
 
@@ -14005,7 +15538,6 @@ snapshots:
       punycode: 2.3.1
       universalify: 0.2.0
       url-parse: 1.5.10
-    optional: true
 
   tr46@0.0.3: {}
 
@@ -14016,7 +15548,6 @@ snapshots:
   tr46@3.0.0:
     dependencies:
       punycode: 2.3.1
-    optional: true
 
   trim-newlines@3.0.1: {}
 
@@ -14024,6 +15555,8 @@ snapshots:
     dependencies:
       typescript: 5.7.3
 
+  ts-dedent@2.2.0: {}
+
   ts-node@10.9.2(@types/node@20.5.1)(typescript@5.8.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
@@ -14129,6 +15662,30 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  tvision-charts-vue-next@3.3.13(dagre@0.8.5):
+    dependencies:
+      '@antv/layout': 0.3.25(dagre@0.8.5)
+      '@babel/runtime': 7.21.0
+      ml-matrix: 6.10.4
+      proj4: 2.8.1
+      tvision-charts: 3.3.13(dagre@0.8.5)
+      tvision-token: 1.0.4
+    transitivePeerDependencies:
+      - dagre
+
+  tvision-charts@3.3.13(dagre@0.8.5):
+    dependencies:
+      '@antv/layout': 0.3.25(dagre@0.8.5)
+      '@babel/runtime': 7.27.6
+      '@babel/runtime-corejs2': 7.28.3
+      '@babel/runtime-corejs3': 7.18.9
+      ml-matrix: 6.10.4
+      proj4: 2.8.1
+      tslib: 2.8.1
+      tvision-token: 1.0.4
+    transitivePeerDependencies:
+      - dagre
+
   tvision-color@1.6.0:
     dependencies:
       '@babel/runtime-corejs3': 7.18.9
@@ -14136,6 +15693,8 @@ snapshots:
       bezier-easing: 2.1.0
       chroma-js: 2.1.2
 
+  tvision-token@1.0.4: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -14233,43 +15792,38 @@ snapshots:
 
   universalify@0.1.2: {}
 
-  universalify@0.2.0:
-    optional: true
+  universalify@0.2.0: {}
 
   universalify@2.0.1: {}
 
   unorm@1.6.0: {}
 
-  unplugin-utils@0.2.4:
-    dependencies:
-      pathe: 2.0.3
-      picomatch: 4.0.2
-
-  unplugin-utils@0.3.0:
+  unplugin-utils@0.3.1:
     dependencies:
       pathe: 2.0.3
       picomatch: 4.0.3
 
-  unplugin-vue-components@29.0.0(@babel/parser@7.28.0)(vue@3.3.9(typescript@5.7.3)):
+  unplugin-vue-components@29.2.0(@babel/parser@7.28.0)(vue@3.5.18(typescript@5.7.3)):
     dependencies:
       chokidar: 3.6.0
-      debug: 4.4.1
-      local-pkg: 1.1.1
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      tinyglobby: 0.2.14
-      unplugin: 2.3.5
-      unplugin-utils: 0.2.4
-      vue: 3.3.9(typescript@5.7.3)
+      debug: 4.4.3
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      tinyglobby: 0.2.15
+      unplugin: 2.3.10
+      unplugin-utils: 0.3.1
+      vue: 3.5.18(typescript@5.7.3)
     optionalDependencies:
       '@babel/parser': 7.28.0
     transitivePeerDependencies:
       - supports-color
 
-  unplugin@2.3.5:
+  unplugin@2.3.10:
     dependencies:
+      '@jridgewell/remapping': 2.3.5
       acorn: 8.15.0
-      picomatch: 4.0.2
+      picomatch: 4.0.3
       webpack-virtual-modules: 0.6.2
 
   upath@1.2.0: {}
@@ -14288,7 +15842,6 @@ snapshots:
     dependencies:
       querystringify: 2.2.0
       requires-port: 1.0.0
-    optional: true
 
   uslug@1.0.4:
     dependencies:
@@ -14304,8 +15857,13 @@ snapshots:
       is-typed-array: 1.1.15
       which-typed-array: 1.1.19
 
+  uuid@11.1.0: {}
+
   uuid@3.4.0: {}
 
+  uuid@9.0.1:
+    optional: true
+
   v8-compile-cache-lib@3.0.1: {}
 
   v8-compile-cache@2.4.0: {}
@@ -14383,9 +15941,9 @@ snapshots:
 
   vitest-fetch-mock@0.4.5(vitest@3.2.4):
     dependencies:
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.1.2))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.2.0))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0)
 
-  vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.1.2))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0):
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.15.32)(@vitest/ui@3.2.4)(jiti@2.4.2)(jsdom@19.0.0(canvas@3.2.0))(less@4.3.0)(terser@5.43.1)(tsx@4.20.3)(yaml@2.8.0):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
@@ -14414,7 +15972,7 @@ snapshots:
       '@types/debug': 4.1.12
       '@types/node': 22.15.32
       '@vitest/ui': 3.2.4(vitest@3.2.4)
-      jsdom: 19.0.0(canvas@3.1.2)
+      jsdom: 19.0.0(canvas@3.2.0)
     transitivePeerDependencies:
       - jiti
       - less
@@ -14429,6 +15987,23 @@ snapshots:
       - tsx
       - yaml
 
+  vscode-jsonrpc@8.2.0: {}
+
+  vscode-languageserver-protocol@3.17.5:
+    dependencies:
+      vscode-jsonrpc: 8.2.0
+      vscode-languageserver-types: 3.17.5
+
+  vscode-languageserver-textdocument@1.0.12: {}
+
+  vscode-languageserver-types@3.17.5: {}
+
+  vscode-languageserver@9.0.1:
+    dependencies:
+      vscode-languageserver-protocol: 3.17.5
+
+  vscode-uri@3.0.8: {}
+
   vscode-uri@3.1.0: {}
 
   vue-component-type-helpers@2.2.10: {}
@@ -14446,15 +16021,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-router@4.5.1(vue@3.3.9(typescript@5.7.3)):
+  vue-router@4.5.1(vue@3.5.18(typescript@5.7.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.3.9(typescript@5.7.3)
+      vue: 3.5.18(typescript@5.7.3)
 
-  vue-router@4.5.1(vue@3.3.9(typescript@5.8.3)):
+  vue-router@4.5.1(vue@3.5.18(typescript@5.8.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.3.9(typescript@5.8.3)
+      vue: 3.5.18(typescript@5.8.3)
 
   vue-tsc@2.2.10(typescript@5.7.3):
     dependencies:
@@ -14467,74 +16042,82 @@ snapshots:
       '@vue/compiler-sfc': 2.7.14
       csstype: 3.1.3
 
-  vue@3.3.9(typescript@5.7.3):
+  vue@3.3.9(typescript@5.8.3):
     dependencies:
       '@vue/compiler-dom': 3.3.9
       '@vue/compiler-sfc': 3.3.9
       '@vue/runtime-dom': 3.3.9
-      '@vue/server-renderer': 3.3.9(vue@3.3.9(typescript@5.7.3))
+      '@vue/server-renderer': 3.3.9(vue@3.3.9(typescript@5.8.3))
       '@vue/shared': 3.3.9
+    optionalDependencies:
+      typescript: 5.8.3
+
+  vue@3.5.18(typescript@5.7.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.18
+      '@vue/compiler-sfc': 3.5.18
+      '@vue/runtime-dom': 3.5.18
+      '@vue/server-renderer': 3.5.18(vue@3.5.18(typescript@5.7.3))
+      '@vue/shared': 3.5.18
     optionalDependencies:
       typescript: 5.7.3
 
-  vue@3.3.9(typescript@5.8.3):
+  vue@3.5.18(typescript@5.8.3):
     dependencies:
-      '@vue/compiler-dom': 3.3.9
-      '@vue/compiler-sfc': 3.3.9
-      '@vue/runtime-dom': 3.3.9
-      '@vue/server-renderer': 3.3.9(vue@3.3.9(typescript@5.8.3))
-      '@vue/shared': 3.3.9
+      '@vue/compiler-dom': 3.5.18
+      '@vue/compiler-sfc': 3.5.18
+      '@vue/runtime-dom': 3.5.18
+      '@vue/server-renderer': 3.5.18(vue@3.5.18(typescript@5.8.3))
+      '@vue/shared': 3.5.18
     optionalDependencies:
       typescript: 5.8.3
 
   w3c-hr-time@1.0.2:
     dependencies:
       browser-process-hrtime: 1.0.0
-    optional: true
 
   w3c-xmlserializer@3.0.0:
     dependencies:
       xml-name-validator: 4.0.0
-    optional: true
 
   wcwidth@1.0.1:
     dependencies:
       defaults: 1.0.4
 
+  weakmap-polyfill@2.0.4: {}
+
   web-encoding@1.1.5:
     dependencies:
       util: 0.12.5
     optionalDependencies:
       '@zxing/text-encoding': 0.9.0
 
+  web-worker@1.5.0:
+    optional: true
+
   webidl-conversions@3.0.1: {}
 
   webidl-conversions@4.0.2: {}
 
-  webidl-conversions@7.0.0:
-    optional: true
+  webidl-conversions@7.0.0: {}
 
   webpack-virtual-modules@0.6.2: {}
 
   whatwg-encoding@2.0.0:
     dependencies:
       iconv-lite: 0.6.3
-    optional: true
 
-  whatwg-mimetype@3.0.0:
-    optional: true
+  whatwg-mimetype@3.0.0: {}
 
   whatwg-url@10.0.0:
     dependencies:
       tr46: 3.0.0
       webidl-conversions: 7.0.0
-    optional: true
 
   whatwg-url@11.0.0:
     dependencies:
       tr46: 3.0.0
       webidl-conversions: 7.0.0
-    optional: true
 
   whatwg-url@5.0.0:
     dependencies:
@@ -14603,6 +16186,8 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
+  wkt-parser@1.5.2: {}
+
   word-wrap@1.2.5: {}
 
   wordwrap@1.0.0: {}
@@ -14761,14 +16346,11 @@ snapshots:
       imurmurhash: 0.1.4
       signal-exit: 3.0.7
 
-  ws@8.18.2:
-    optional: true
+  ws@8.18.2: {}
 
-  xml-name-validator@4.0.0:
-    optional: true
+  xml-name-validator@4.0.0: {}
 
-  xmlchars@2.2.0:
-    optional: true
+  xmlchars@2.2.0: {}
 
   xtend@4.0.2: {}
 
@@ -14830,3 +16412,5 @@ snapshots:
   yn@3.1.1: {}
 
   yocto-queue@0.1.0: {}
+
+  zod@3.25.76: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index bf954de09e..748d475cf6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -62,7 +62,7 @@ catalogs:
     sortablejs: ^1.15.0
     tinycolor2: ^1.6.0
     validator: ^13.9.0
-    vue: ^3.3.9
+    vue: ^3.5.0
     vue-router: ^4.2.4
   docs:
     gray-matter: ^4.0.3
diff --git a/tsconfig.json b/tsconfig.json
index e8a5875221..262d8ec232 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,7 @@
     "target": "esnext",
     "lib": [ "esnext", "dom", "dom.iterable", "scripthost"],
     "jsx": "preserve",
+    "jsxImportSource": "vue",
 
     /* Modules */
     "module": "esnext",