refactor(chat): migrate to scoped web components

packages/pro-components/chat/attachments/index.ts

@@ -1,5 +1,5 @@
-import 'tdesign-web-components/lib/attachments';
-import type { TdAttachmentsProps } from 'tdesign-web-components';
+import '@tdesign/web-components-chat/attachments';
+import type { TdAttachmentsProps } from '@tdesign/web-components-chat/attachments';
 import type { DefineComponent } from 'vue';
 import { omiVueify } from 'omi-vueify';
 // 附件

packages/pro-components/chat/chat-engine/_example/headless-eventbus.vue

@@ -74,11 +74,12 @@
 <script setup lang="ts">
 import { ref, onBeforeUnmount } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
-import ChatEngine, {
+import {
+  ChatEngine,
   ChatEngineEventType,
   type SSEChunkData,
   type AIMessageContent,
-} from 'tdesign-web-components/lib/chat-engine';
+} from '@tdesign/web-components-chat/chat-engine';
 
 /**
  * Headless 事件总线示例

packages/pro-components/chat/chat-engine/chat-engine.md

@@ -267,4 +267,3 @@ onUnmounted(() => {
 | 状态订阅 | ✅ 内置 `subscribeKey` + `agentState` | ❌ 需自行实现 |
 | 可移植性 | ✅ 配置可跨项目复用 | ❌ 与业务代码耦合 |
 | 错误边界 | ✅ 内置保护 | ❌ 需自行添加 |
-

packages/pro-components/chat/chat-engine/components/activity/render.tsx

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h } from 'vue';
-import type { ActivityData } from 'tdesign-web-components';
+import type { ActivityData } from '@tdesign/web-components-chat/chat-engine';
 import type { ActivityComponentProps } from './types';
 import { activityRegistry, ACTIVITY_REGISTERED_EVENT, ACTIVITY_EVENT_DETAIL_KEY } from './registry';
 import { ComponentErrorBoundary, useRegistrationListener } from '../shared';

packages/pro-components/chat/chat-engine/components/toolcall/render.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watch, h, type Ref } from 'vue';
-import { AGUIEventType, type ToolCall } from 'tdesign-web-components/lib/chat-engine';
+import { AGUIEventType, type ToolCall } from '@tdesign/web-components-chat/chat-engine';
 import { isNonInteractiveConfig, type ToolcallComponentProps } from './types';
 import { agentToolcallRegistry, TOOLCALL_REGISTERED_EVENT, TOOLCALL_EVENT_DETAIL_KEY } from './registry';
 import { ComponentErrorBoundary, useRegistrationListener } from '../shared';

packages/pro-components/chat/chat-engine/hooks/useAgentState.ts

@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted, computed, provide, inject, watch, type Ref, type InjectionKey } from 'vue';
-import { stateManager } from 'tdesign-web-components/lib/chat-engine';
+import { stateManager } from '@tdesign/web-components-chat/chat-engine';
 
 /**
  * 状态订阅相关类型定义

packages/pro-components/chat/chat-engine/hooks/useChat.ts

@@ -1,15 +1,26 @@
-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';
+import { onMounted, onUnmounted, ref, watch, type Ref } from 'vue';
+import {
+  ChatEngine,
+  type ChatMessagesData,
+  type ChatServiceConfig,
+  type ChatStatus,
+} from '@tdesign/web-components-chat/chat-engine';
+import type { TdChatProps } from '@tdesign/web-components-chat/chatbot';
+
+export interface UseChatReturn {
+  chatEngine: Ref<InstanceType<typeof ChatEngine> | null>;
+  messages: Ref<ChatMessagesData[]>;
+  status: Ref<ChatStatus>;
+}
 
 export const useChat = (options: {
   defaultMessages: TdChatProps['defaultMessages'];
   chatServiceConfig: ChatServiceConfig;
-}) => {
+}): UseChatReturn => {
   const messages: Ref<ChatMessagesData[]> = ref([]);
   const status: Ref<ChatStatus> = ref('idle');
-  const chatEngineRef = ref<ChatEngine | null>(null);
+  // 若 ChatEngine 内部状态包含冻结对象，可改用 shallowRef，避免 Vue 深层代理实例触发 Proxy invariant 错误。
+  const chatEngineRef: Ref<InstanceType<typeof ChatEngine> | null> = ref(null);
   const msgSubscribeRef = ref<(() => void) | null>(null);
   const prevInitialMessages = ref<ChatMessagesData[]>([]);
 

packages/pro-components/chat/chat-engine/index.ts

@@ -2,4 +2,4 @@ export * from './hooks/index';
 export * from './components/toolcall';
 export * from './components/provider';
 export * from './components/activity';
-export * from 'tdesign-web-components/lib/chat-engine';
+export * from '@tdesign/web-components-chat/chat-engine';

packages/pro-components/chat/chat-loading/index.ts

@@ -1,7 +1,7 @@
 // import _ChatLoading from './chat-loading';
 // export default _ChatLoading;
-import { TdChatLoadingProps } from 'tdesign-web-components';
-import 'tdesign-web-components/lib/chat-loading';
+import '@tdesign/web-components-chat/chat-loading';
+import type { TdChatLoadingProps } from '@tdesign/web-components-chat/chat-loading';
 import type { DefineComponent } from 'vue';
 import { omiVueify } from 'omi-vueify';
 // 附件

packages/pro-components/chat/chat-markdown/index.ts

@@ -1,7 +1,7 @@
-import 'tdesign-web-components/lib/chat-message/content/markdown-content';
+import '@tdesign/web-components-chat/chat-message';
 import type { DefineComponent } from 'vue';
 import { omiVueify } from 'omi-vueify';
-import type { TdChatMarkdownContentProps } from 'tdesign-web-components/lib/chat-message/content/markdown-content';
+import type { TdChatMarkdownContentProps } from '@tdesign/web-components-chat/chat-message';
 
 // Markdown内容
 export const ChatMarkdown = omiVueify('t-chat-md-content', {

packages/pro-components/chat/chat-message/chat-message-props.ts

@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 import { TdChatItemProps } from '../type';
-import type { TdChatMessageProps } from 'tdesign-web-components';
+import type { TdChatMessageProps } from '@tdesign/web-components-chat/chat-message';
 import { PropType } from 'vue';
 import type { TNode } from 'tdesign-vue-next';
 

packages/pro-components/chat/chat-message/chat-message.tsx

@@ -1,8 +1,8 @@
 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 type { TdChatMessageProps } from '@tdesign/web-components-chat/chat-message';
+// 封装 @tdesign/web-components-chat 的 chat-message
+import '@tdesign/web-components-chat/chat-message';
 import { omiVueify } from 'omi-vueify';
 import props from './chat-message-props';
 import { useTNodeJSX } from '@tdesign/shared-hooks';

packages/pro-components/chat/chat-thinking/chat-thinking-props.ts

@@ -1,4 +1,4 @@
-import type { TdChatThinkContentProps } from 'tdesign-web-components/lib/chat-message/content/thinking-content';
+import type { TdChatThinkContentProps } from '@tdesign/web-components-chat/chat-message';
 import { PropType } from 'vue';
 import type { TNode } from 'tdesign-vue-next';
 

packages/pro-components/chat/chat-thinking/chat-thinking.tsx

@@ -1,8 +1,8 @@
 import { defineComponent } from 'vue';
 import type { DefineComponent } from 'vue';
-import type { TdChatThinkContentProps } from 'tdesign-web-components/lib/chat-message/content/thinking-content';
-// 封装tdesign-web-components 的 chat-thinking-content
-import 'tdesign-web-components/lib/chat-message/content/thinking-content';
+import type { TdChatThinkContentProps } from '@tdesign/web-components-chat/chat-message';
+// 封装 @tdesign/web-components-chat 的 chat-thinking-content
+import '@tdesign/web-components-chat/chat-message';
 import { omiVueify } from 'omi-vueify';
 import props from './chat-thinking-props';
 import { useTNodeJSX } from '@tdesign/shared-hooks';

packages/pro-components/chat/chatbot/_example/sender-config.vue

@@ -27,9 +27,9 @@
 import { computed, ref } from 'vue';
 import { type SSEChunkData, type AIMessageContent, type ChatServiceConfig } from '@tdesign-vue-next/chat';
 import { MessagePlugin } from 'tdesign-vue-next';
-import { type TdChatbotApi } from 'tdesign-web-components/lib/chatbot/type';
-import { type TdChatSenderActionName } from 'tdesign-web-components/lib/chat-sender/type';
-import { type TdAttachmentItem } from 'tdesign-web-components/lib/filecard/type';
+import { type TdAttachmentItem } from '@tdesign/web-components-chat/filecard';
+import { type TdChatSenderActionName } from '@tdesign/web-components-chat/chat-sender';
+import { type TdChatbotApi } from '@tdesign/web-components-chat/chatbot';
 
 /**
  * 输入配置示例

packages/pro-components/chat/chatbot/index.ts

@@ -1,12 +1,13 @@
-import 'tdesign-web-components/lib/chatbot';
+import '@tdesign/web-components-chat/chat-message';
+import '@tdesign/web-components-chat/chatbot';
 import type { DefineComponent } from 'vue';
 import { omiVueify } from 'omi-vueify';
 import type {
   TdChatListProps,
   TdChatProps,
   TdChatSearchContentProps,
   TdChatSuggestionContentProps,
-} from 'tdesign-web-components';
+} from '@tdesign/web-components-chat';
 
 export const Chatbot = omiVueify('t-chatbot', {
   // TODO: 这里可以补充TdChatbotApi里需要暴露出来的方法（ref实例上的方法）

packages/pro-components/chat/index.ts

@@ -32,10 +32,9 @@ 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';
+import '@tdesign/web-components-chat/style/index.css';
+import '@tdesign/web-components-chat/chat-message';
+import { TdMarkdownEngine } from '@tdesign/web-components-chat/chat-message';
 
 export * from './type';
 
@@ -104,12 +103,12 @@ export {
   getMessageContentForCopy,
   isAIMessage,
   isToolCallContent,
-} from 'tdesign-web-components/lib/chat-engine';
+} from '@tdesign/web-components-chat/chat-engine';
 
 export type {
   SSEChunkData,
   AIMessageContent,
   ChatRequestParams,
   ChatMessagesData,
   ChatServiceConfig,
-} from 'tdesign-web-components/lib/chat-engine';
+} from '@tdesign/web-components-chat/chat-engine';

packages/pro-components/chat/type.ts

@@ -8,7 +8,13 @@ import { AvatarProps } from 'tdesign-vue-next';
 import { TextareaProps } from 'tdesign-vue-next';
 import { CollapsePanelProps } from 'tdesign-vue-next';
 import { TNode } from 'tdesign-vue-next';
-import { AIMessageContent, ChatMessageRole, ChatMessageStatus, UserMessageContent } from 'tdesign-web-components';
+import type {
+  AIMessageContent,
+  ChatMessageRole,
+  ChatMessageStatus,
+  UserMessageContent,
+} from '@tdesign/web-components-chat/chat-engine';
+import type { UploadActionType } from '@tdesign/web-components-chat/chat-sender';
 
 export interface TdChatProps {
   /**
@@ -457,8 +463,6 @@ export interface TdChatReasoning {
   collapsed?: boolean;
 }
 
-export type UploadActionType = 'uploadAttachment' | 'uploadImage';
-
 export interface UploadActionConfig {
   /**
    * 动作名称，标识上传类型
@@ -487,8 +491,49 @@ export interface UploadActionConfig {
   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';
+export type {
+  TdChatSenderAction,
+  TdChatSenderActionName,
+  TdChatSenderApi,
+  TdChatSenderParams,
+  TdChatSenderUploadProps,
+  UploadActionType,
+} from '@tdesign/web-components-chat/chat-sender';
+export type { TdAttachmentItem, TdFileCardProps } from '@tdesign/web-components-chat/filecard';
+export type {
+  TdChatAttachmentContentProps,
+  TdChatContentMDOptions,
+  TdChatContentMDPluginConfig,
+  TdChatContentMDPresetConfig,
+  TdChatContentMDPresetPlugin,
+  TdChatMarkdownContentProps,
+  TdChatMessageAction,
+  TdChatMessageActionData,
+  TdChatMessageActionDataMap,
+  TdChatMessageActionHandlers,
+  TdChatMessageActionName,
+  TdChatMessageProps,
+  TdChatMessageVariant,
+  TdChatSearchContentProps,
+  TdChatSuggestionContentProps,
+  TdChatThinkContentProps,
+} from '@tdesign/web-components-chat/chat-message';
+export type {
+  BackBottomParams,
+  FetchSSEOptions,
+  Layout,
+  MetaData,
+  ModelRoleEnum,
+  ScrollPosition,
+  SSEEvent,
+  TdChatbotApi,
+  TdChatCodeProps,
+  TdChatInjectCSS,
+  TdChatListApi,
+  TdChatListProps,
+  TdChatListScrollToOptions,
+  TdChatMessageActionEvent,
+  TdChatMessageConfig,
+  TdChatMessageConfigItem,
+} from '@tdesign/web-components-chat/chatbot';
+export type { TdChatActionData, TdChatActionItem, TdChatActionsName } from '@tdesign/web-components-chat/chat-action';

packages/tdesign-vue-next-chat/package.json

@@ -36,6 +36,8 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "catalog:deps",
+    "@tdesign/web-components": "https://pkg.pr.new/TDesignOteam/tdesign-web-components/@tdesign/web-components@a5cf310872cb2828d309db9461d09ac8f00662e2",
+    "@tdesign/web-components-chat": "https://pkg.pr.new/TDesignOteam/tdesign-web-components/@tdesign/web-components-chat@a5cf310872cb2828d309db9461d09ac8f00662e2",
     "@types/lodash-es": "catalog:types",
     "clipboard": "catalog:deps",
     "highlight.js": "catalog:deps",
@@ -44,7 +46,6 @@
     "marked-highlight": "catalog:docs",
     "tdesign-icons-vue-next": "catalog:tdesign",
     "tdesign-vue-next": "workspace:^",
-    "tdesign-web-components": "1.3.1-alpha.14",
     "omi-vueify": "^0.0.12"
   },
   "devDependencies": {

packages/tdesign-vue-next-chat/site/src/components/stackblitz/content.js

@@ -86,7 +86,10 @@ export const packageJSONContent = JSON.stringify(
       vite: catalogs.bundle.vite,
       '@vitejs/plugin-vue': catalogs.bundle['@vitejs/plugin-vue'],
       '@vitejs/plugin-vue-jsx': catalogs.bundle['@vitejs/plugin-vue-jsx'],
-      'tdesign-web-components': '1.3.1-alpha.10',
+      '@tdesign/web-components':
+        'https://pkg.pr.new/TDesignOteam/tdesign-web-components/@tdesign/web-components@a5cf310872cb2828d309db9461d09ac8f00662e2',
+      '@tdesign/web-components-chat':
+        'https://pkg.pr.new/TDesignOteam/tdesign-web-components/@tdesign/web-components-chat@a5cf310872cb2828d309db9461d09ac8f00662e2',
       'omi-vueify': '^0.0.12',
       'tvision-charts-vue-next': '^3.3.13',
       'highlight.js': '^11.11.1',