refactor: change AIMessageContent to ContentViewProvider

.changeset/serious-chairs-help.md

@@ -0,0 +1,5 @@
+---
+'@difizen/magent-chat': patch
+---
+
+refactor: change MessageAddon & AIMessageContent to Providers

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} />
 

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,

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');