feat(chat): support customize thinking result component (#3702)

* feat: supportthingResult custome Render * feat: supportthingResult custome Render
opensumi · May 21, 2024 · edfcc16 · edfcc16
1 parent ec4a61a
commit edfcc16
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/packages/ai-native/src/browser/chat/chat.render.registry.ts b/packages/ai-native/src/browser/chat/chat.render.registry.ts
@@ -5,6 +5,7 @@ import {
   ChatAIRoleRender,
   ChatInputRender,
   ChatThinkingRender,
+  ChatThinkingResultRender,
   ChatUserRoleRender,
   ChatWelcomeRender,
   IChatRenderRegistry,
@@ -17,6 +18,7 @@ export class ChatRenderRegistry extends Disposable implements IChatRenderRegistr
   public chatUserRoleRender?: ChatUserRoleRender;
   public chatThinkingRender?: ChatThinkingRender;
   public chatInputRender?: ChatInputRender;
+  public chatThinkingResultRender?: ChatThinkingResultRender;
 
   registerWelcomeRender(render: ChatWelcomeRender): void {
     this.chatWelcomeRender = render;
@@ -37,4 +39,8 @@ export class ChatRenderRegistry extends Disposable implements IChatRenderRegistr
   registerInputRender(render: ChatInputRender): void {
     this.chatInputRender = render;
   }
+
+  registerThinkingResultRender(render: ChatThinkingResultRender): void {
+    this.chatThinkingResultRender = render;
+  }
 }
diff --git a/packages/ai-native/src/browser/components/ChatThinking.tsx b/packages/ai-native/src/browser/components/ChatThinking.tsx
@@ -83,6 +83,7 @@ export const ChatThinkingResult = ({
 }: ITinkingProps) => {
   const aiChatService = useInjectable<ChatInternalService>(IChatInternalService);
   const [latestRequestId, setLatestRequestId] = useState(aiChatService.latestRequestId);
+  const chatRenderRegistry = useInjectable<ChatRenderRegistry>(ChatRenderRegistryToken);
 
   useEffect(() => {
     const dispose = aiChatService.onChangeRequestId((id) => {
@@ -92,6 +93,11 @@ export const ChatThinkingResult = ({
     return () => dispose.dispose();
   }, [aiChatService]);
 
+  const CustomThinkingResultRender = useMemo(
+    () => chatRenderRegistry.chatThinkingResultRender,
+    [chatRenderRegistry, chatRenderRegistry.chatThinkingResultRender],
+  );
+
   const handleRegenerate = useCallback(() => {
     if (onRegenerate) {
       onRegenerate();
@@ -100,7 +106,11 @@ export const ChatThinkingResult = ({
 
   const renderContent = useCallback(() => {
     if (typeof hasMessage === 'boolean' ? !hasMessage : !message?.trim()) {
-      return <span>{localize('aiNative.chat.stop.immediately')}</span>;
+      const stopimmediately = localize('aiNative.chat.stop.immediately');
+      if (CustomThinkingResultRender) {
+        return <CustomThinkingResultRender thinkingResult={stopimmediately} />;
+      }
+      return <span>{stopimmediately}</span>;
     }
 
     return children;

diff --git a/packages/ai-native/src/browser/types.ts b/packages/ai-native/src/browser/types.ts
@@ -81,6 +81,7 @@ export type ChatUserRoleRender = (props: {
   command?: string;
 }) => React.ReactElement | React.JSX.Element;
 export type ChatThinkingRender = (props: { thinkingText?: string }) => React.ReactElement | React.JSX.Element;
+export type ChatThinkingResultRender = (props: { thinkingResult?: string }) => React.ReactElement | React.JSX.Element;
 export type ChatInputRender = (props: {
   onSend: (value: string, agentId?: string, command?: string) => void;
   onValueChange?: (value: string) => void;
@@ -112,6 +113,7 @@ export interface IChatRenderRegistry {
    */
   registerUserRoleRender(render: ChatUserRoleRender): void;
   registerThinkingRender(render: ChatThinkingRender): void;
+  registerThinkingResultRender(render: ChatThinkingResultRender): void;
   /**
    * 输入框渲染
    */