From 11a0abf454dbdb9c3d9021e3b0af11e7ab62bcc8 Mon Sep 17 00:00:00 2001
From: "xujingli.xjl" <xujingli.xjl@antgroup.com>
Date: Tue, 17 Dec 2024 09:34:56 +0800
Subject: [PATCH] refactor: change MessageAddon & AIMessageContent to Providers

---
 .changeset/serious-chairs-help.md             |  5 +++++
 .../components/message/ai-message.tsx         | 19 +++++++++++++++----
 .../magent-chat/src/chat-view/module.ts       | 16 +++++++++++++++-
 .../magent-chat/src/chat-view/protocol.ts     | 14 ++++++++++++++
 4 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/serious-chairs-help.md

diff --git a/.changeset/serious-chairs-help.md b/.changeset/serious-chairs-help.md
new file mode 100644
index 0000000..886ce52
--- /dev/null
+++ b/.changeset/serious-chairs-help.md
@@ -0,0 +1,5 @@
+---
+'@difizen/magent-chat': patch
+---
+
+refactor: change MessageAddon & AIMessageContent to Providers
diff --git a/web-packages/magent-chat/src/chat-view/components/message/ai-message.tsx b/web-packages/magent-chat/src/chat-view/components/message/ai-message.tsx
index 414efb4..d6c332c 100644
--- a/web-packages/magent-chat/src/chat-view/components/message/ai-message.tsx
+++ b/web-packages/magent-chat/src/chat-view/components/message/ai-message.tsx
@@ -11,7 +11,11 @@ import type {
   BaseChatMessageModel,
 } from '../../../chat-base/protocol.js';
 import { AnswerState } from '../../../chat-base/protocol.js';
-import { MesssageOpProvider } from '../../protocol.js';
+import {
+  MesssageAddonViewProvider,
+  MesssageContentViewProvider,
+  MesssageOpProvider,
+} from '../../protocol.js';
 import type { ChatView } from '../../view.js';
 
 interface AIMessageProps {
@@ -102,6 +106,9 @@ export const RecommendQuestions = (props: { message: BaseChatMessageModel }) =>
 export const AIMessageContent = (props: AIMessageProps) => {
   const item = useObserve(props.item);
   const instance = useInject<ChatView>(ViewInstance);
+  const MesssageAddonView = useInject<MesssageAddonViewProvider>(
+    MesssageAddonViewProvider,
+  );
   const Markdown = instance.Markdown;
   const content: ReactNode = item.content;
   if (!content) {
@@ -133,7 +140,7 @@ export const AIMessageContent = (props: AIMessageProps) => {
             </span>
           )}
         </div>
-        <AIMessageAddon {...props} />
+        <MesssageAddonView {...props} />
       </div>
     );
   } else {
@@ -169,7 +176,7 @@ export const AIMessageContent = (props: AIMessageProps) => {
             className="chat-message-ai-fail"
           />
         )}
-        <AIMessageAddon {...props} />
+        <MesssageAddonView {...props} />
       </div>
     );
   }
@@ -181,6 +188,9 @@ export const AIMessage = (props: AIMessageProps) => {
   const AvatarRender = instance.AvatarRender;
 
   const MesssageOp = useInject<MesssageOpProvider>(MesssageOpProvider);
+  const MesssageContentView = useInject<MesssageContentViewProvider>(
+    MesssageContentViewProvider,
+  );
 
   if (!conversation) {
     return null;
@@ -192,7 +202,8 @@ export const AIMessage = (props: AIMessageProps) => {
     <div className={classNames('chat-message-main', 'chat-message-main-ai')}>
       <AvatarRender item={item} />
       <div className={`chat-message-container`}>
-        <AIMessageContent {...props} />
+        {/* <AIMessageContent {...props} /> */}
+        <MesssageContentView {...props} />
 
         <MesssageOp item={props.item} message={props.message} />
 
diff --git a/web-packages/magent-chat/src/chat-view/module.ts b/web-packages/magent-chat/src/chat-view/module.ts
index 23fd45b..1a18e46 100644
--- a/web-packages/magent-chat/src/chat-view/module.ts
+++ b/web-packages/magent-chat/src/chat-view/module.ts
@@ -1,9 +1,15 @@
 import { ManaModule } from '@difizen/mana-app';
 
 import { ChatMessageRender } from './chat-message-render.js';
+import { AIMessageAddon, AIMessageContent } from './components/message/ai-message.js';
 import { MessageOp } from './components/message/message-op.js';
 import { DefaultChatMessageItemRenderContribution } from './default-chat-messsage-render-contribution.js';
-import { ChatMessageItemRenderContribution, MesssageOpProvider } from './protocol.js';
+import {
+  ChatMessageItemRenderContribution,
+  MesssageOpProvider,
+  MesssageContentViewProvider,
+  MesssageAddonViewProvider,
+} from './protocol.js';
 import { ChatView } from './view.js';
 
 export const ChatViewModule = ManaModule.create('magent-chat-view')
@@ -12,6 +18,14 @@ export const ChatViewModule = ManaModule.create('magent-chat-view')
       token: MesssageOpProvider,
       useValue: MessageOp,
     },
+    {
+      token: MesssageContentViewProvider,
+      useValue: AIMessageContent,
+    },
+    {
+      token: MesssageAddonViewProvider,
+      useValue: AIMessageAddon,
+    },
     ChatView,
     DefaultChatMessageItemRenderContribution,
     ChatMessageRender,
diff --git a/web-packages/magent-chat/src/chat-view/protocol.ts b/web-packages/magent-chat/src/chat-view/protocol.ts
index c309982..165ab76 100644
--- a/web-packages/magent-chat/src/chat-view/protocol.ts
+++ b/web-packages/magent-chat/src/chat-view/protocol.ts
@@ -24,3 +24,17 @@ export type MesssageOpProvider = FC<{
 }>;
 
 export const MesssageOpProvider = Symbol('MesssageOpProvider');
+
+export type MesssageContentViewProvider = FC<{
+  message: BaseChatMessageModel;
+  item: BaseChatMessageItemModel;
+}>;
+
+export const MesssageContentViewProvider = Symbol('MesssageContentViewProvider');
+
+export type MesssageAddonViewProvider = FC<{
+  message: BaseChatMessageModel;
+  item: BaseChatMessageItemModel;
+}>;
+
+export const MesssageAddonViewProvider = Symbol('MesssageAddonViewProvider');