@opensumi/ide-ai-native 3.8.1-next-1741250387.0 → 3.8.1-next-1741251026.0

package/src/browser/chat/chat.view.tsx

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import { MessageList } from 'react-chat-elements';
 
-import {
-  AINativeConfigService,
-  getIcon,
-  useEventEffect,
-  useInjectable,
-  useUpdateOnEvent,
-} from '@opensumi/ide-core-browser';
+import { getIcon, useInjectable, useUpdateOnEvent } from '@opensumi/ide-core-browser';
 import { Popover, PopoverPosition } from '@opensumi/ide-core-browser/lib/components';
 import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
 import {
@@ -25,24 +19,15 @@ import {
   IAIReporter,
   IChatComponent,
   IChatContent,
-  MessageType,
   formatLocalize,
   localize,
   uuid,
 } from '@opensumi/ide-core-common';
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
-import { IDialogService } from '@opensumi/ide-overlay';
+import { IMessageService } from '@opensumi/ide-overlay';
 
 import 'react-chat-elements/dist/main.css';
-import {
-  AI_CHAT_VIEW_ID,
-  IChatAgentService,
-  IChatInternalService,
-  IChatMessageStructure,
-  TokenMCPServerProxyService,
-} from '../../common';
-import { LLMContextService, LLMContextServiceToken } from '../../common/llm-context';
-import { ChatAgentPromptProvider } from '../../common/prompts/context-prompt-provider';
+import { AI_CHAT_VIEW_ID, IChatAgentService, IChatInternalService, IChatMessageStructure } from '../../common';
 import { ChatContext } from '../components/ChatContext';
 import { CodeBlockWrapperInput } from '../components/ChatEditor';
 import ChatHistory, { IChatHistoryItem } from '../components/ChatHistory';
@@ -52,9 +37,7 @@ import { ChatNotify, ChatReply } from '../components/ChatReply';
 import { SlashCustomRender } from '../components/SlashCustomRender';
 import { MessageData, createMessageByAI, createMessageByUser } from '../components/utils';
 import { WelcomeMessage } from '../components/WelcomeMsg';
-import { MCPServerProxyService } from '../mcp/mcp-server-proxy.service';
-import { MCPToolsDialog } from '../mcp/mcp-tools-dialog.view';
-import { ChatViewHeaderRender, TSlashCommandCustomRender } from '../types';
+import { ChatViewHeaderRender, IMCPServerRegistry, TSlashCommandCustomRender, TokenMCPServerRegistry } from '../types';
 
 import { ChatRequestModel, ChatSlashCommandItemModel } from './chat-model';
 import { ChatProxyService } from './chat-proxy.service';
@@ -63,6 +46,7 @@ import { ChatFeatureRegistry } from './chat.feature.registry';
 import { ChatInternalService } from './chat.internal.service';
 import styles from './chat.module.less';
 import { ChatRenderRegistry } from './chat.render.registry';
+
 const SCROLL_CLASSNAME = 'chat_scroll';
 
 interface TDispatchAction {
@@ -79,12 +63,12 @@ export const AIChatView = () => {
   const chatAgentService = useInjectable<IChatAgentService>(IChatAgentService);
   const chatFeatureRegistry = useInjectable<ChatFeatureRegistry>(ChatFeatureRegistryToken);
   const chatRenderRegistry = useInjectable<ChatRenderRegistry>(ChatRenderRegistryToken);
-  const contextService = useInjectable<LLMContextService>(LLMContextServiceToken);
-  const promptProvider = useInjectable<ChatAgentPromptProvider>(ChatAgentPromptProvider);
+  const mcpServerRegistry = useInjectable<IMCPServerRegistry>(TokenMCPServerRegistry);
 
   const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
   const msgHistoryManager = aiChatService.sessionModel.history;
   const containerRef = React.useRef<HTMLDivElement>(null);
+  const autoScroll = React.useRef<boolean>(true);
   const chatInputRef = React.useRef<{ setInputValue: (v: string) => void } | null>(null);
 
   const [shortcutCommands, setShortcutCommands] = React.useState<ChatSlashCommandItemModel[]>([]);
@@ -156,8 +140,29 @@ export const AIChatView = () => {
     [],
   );
 
+  const onDidWheel = React.useCallback(
+    (e: WheelEvent) => {
+      // 向上滚动
+      if (e.deltaY < 0) {
+        autoScroll.current = false;
+      } else {
+        autoScroll.current = true;
+      }
+    },
+    [autoScroll],
+  );
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.addEventListener('wheel', onDidWheel);
+      return () => {
+        containerRef.current?.removeEventListener('wheel', onDidWheel);
+      };
+    }
+  }, [autoScroll]);
+
   const scrollToBottom = React.useCallback(() => {
-    if (containerRef && containerRef.current) {
+    if (containerRef && containerRef.current && autoScroll.current) {
       const lastElement = containerRef.current.lastElementChild;
       if (lastElement) {
         lastElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
@@ -167,7 +172,7 @@ export const AIChatView = () => {
         containerRef.current.classList.add(SCROLL_CLASSNAME);
       }
     }
-  }, [containerRef]);
+  }, [containerRef, autoScroll]);
 
   const handleDispatchMessage = React.useCallback(
     (dispatch: TDispatchAction) => {
@@ -189,7 +194,7 @@ export const AIChatView = () => {
     disposer.addDispose(
       chatApiService.onScrollToBottom(() => {
         requestAnimationFrame(() => {
-          scrollToBottom();
+          // scrollToBottom();
         });
       }),
     );
@@ -216,8 +221,9 @@ export const AIChatView = () => {
     disposer.addDispose(
       chatApiService.onChatReplyMessageLaunch((data) => {
         if (data.kind === 'content') {
-          const relationId = aiReporter.start(AIServiceType.CustomReplay, {
+          const relationId = aiReporter.start(AIServiceType.CustomReply, {
             message: data.content,
+            sessionId: aiChatService.sessionModel.sessionId,
           });
           msgHistoryManager.addAssistantMessage({
             content: data.content,
@@ -225,8 +231,9 @@ export const AIChatView = () => {
           });
           renderSimpleMarkdownReply({ chunk: data.content, relationId });
         } else {
-          const relationId = aiReporter.start(AIServiceType.CustomReplay, {
+          const relationId = aiReporter.start(AIServiceType.CustomReply, {
             message: 'component#' + data.component,
+            sessionId: aiChatService.sessionModel.sessionId,
           });
           msgHistoryManager.addAssistantMessage({
             componentId: data.component,
@@ -248,6 +255,7 @@ export const AIChatView = () => {
 
           const relationId = aiReporter.start(AIServiceType.Chat, {
             message: '',
+            sessionId: aiChatService.sessionModel.sessionId,
           });
 
           if (role === 'assistant') {
@@ -506,10 +514,7 @@ export const AIChatView = () => {
       const { message, agentId, command, reportExtra } = value;
       const { actionType, actionSource } = reportExtra || {};
 
-      const context = contextService.serialize();
-      const fullMessage = await promptProvider.provideContextPrompt(context, message);
-
-      const request = aiChatService.createRequest(fullMessage, agentId!, command);
+      const request = aiChatService.createRequest(message, agentId!, command);
       if (!request) {
         return;
       }
@@ -519,13 +524,19 @@ export const AIChatView = () => {
 
       const startTime = Date.now();
       const reportType = ChatProxyService.AGENT_ID === agentId ? AIServiceType.Chat : AIServiceType.Agent;
-      const relationId = aiReporter.start(command || reportType, {
-        message,
-        agentId,
-        userMessage: message,
-        actionType,
-        actionSource,
-      });
+
+      const relationId = aiReporter.start(
+        command || reportType,
+        {
+          agentId,
+          userMessage: message,
+          actionType,
+          actionSource,
+          sessionId: aiChatService.sessionModel.sessionId,
+        },
+        // 由于涉及 tool 调用，超时时间设置长一点
+        600 * 1000,
+      );
 
       msgHistoryManager.addUserMessage({
         content: message,
@@ -550,6 +561,12 @@ export const AIChatView = () => {
         replyStartTime: startTime,
       });
 
+      // 创建消息时，设置当前活跃的消息信息，便于toolCall打点
+      mcpServerRegistry.activeMessageInfo = {
+        messageId: msgId,
+        sessionId: aiChatService.sessionModel.sessionId,
+      };
+
       await renderReply({
         startTime,
         relationId,
@@ -735,15 +752,18 @@ export function DefaultChatViewHeader({
   handleClear: () => any;
   handleCloseChatView: () => any;
 }) {
-  const dialogService = useInjectable<IDialogService>(IDialogService);
-  const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
-  const mcpServerProxyService = useInjectable<MCPServerProxyService>(TokenMCPServerProxyService);
   const aiChatService = useInjectable<ChatInternalService>(IChatInternalService);
+  const messageService = useInjectable<IMessageService>(IMessageService);
+
   const [historyList, setHistoryList] = React.useState<IChatHistoryItem[]>([]);
   const [currentTitle, setCurrentTitle] = React.useState<string>('');
   const handleNewChat = React.useCallback(() => {
     if (aiChatService.sessionModel.history.getMessages().length > 0) {
-      aiChatService.createSessionModel();
+      try {
+        aiChatService.createSessionModel();
+      } catch (error) {
+        messageService.error(error.message);
+      }
     }
   }, [aiChatService]);
   const handleHistoryItemSelect = React.useCallback(
@@ -759,15 +779,6 @@ export function DefaultChatViewHeader({
     [aiChatService],
   );
 
-  const handleShowMCPTools = React.useCallback(async () => {
-    const tools = await mcpServerProxyService.getAllMCPTools();
-    dialogService.open({
-      message: <MCPToolsDialog tools={tools} />,
-      type: MessageType.Empty,
-      buttons: ['关闭'],
-    });
-  }, [mcpServerProxyService, dialogService]);
-
   React.useEffect(() => {
     const getHistoryList = () => {
       const currentMessages = aiChatService.sessionModel.history.getMessages();
@@ -847,23 +858,6 @@ export function DefaultChatViewHeader({
           ariaLabel={localize('aiNative.operate.clear.title')}
         />
       </Popover>
-      {aiNativeConfigService.capabilities.supportsMCP && (
-        <Popover
-          overlayClassName={styles.popover_icon}
-          id={'ai-chat-header-tools'}
-          position={PopoverPosition.left}
-          title={localize('aiNative.operate.tools.title')}
-        >
-          <EnhanceIcon
-            wrapperClassName={styles.action_btn}
-            className={getIcon('menubar-tool')}
-            onClick={handleShowMCPTools}
-            tabIndex={0}
-            role='button'
-            ariaLabel={localize('aiNative.operate.tools.title')}
-          />
-        </Popover>
-      )}
       <Popover
         overlayClassName={styles.popover_icon}
         id={'ai-chat-header-close'}

package/src/browser/components/ChatContext/index.tsx

@@ -39,7 +39,7 @@ export const ChatContext = memo(() => {
       50,
     )((files) => {
       if (files) {
-        updateAddedFiles(files);
+        updateAddedFiles([...files.attached]);
       }
     }, contextService);
 
@@ -57,7 +57,7 @@ export const ChatContext = memo(() => {
   }, []);
 
   const onDidDeselect = useCallback((uri: URI) => {
-    contextService.removeFileFromContext(uri);
+    contextService.removeFileFromContext(uri, true);
   }, []);
 
   const onDidClickFile = useCallback((uri: URI) => {

package/src/browser/components/ChatInput.tsx

@@ -1,21 +1,38 @@
 import cls from 'classnames';
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 
-import { useInjectable, useLatest } from '@opensumi/ide-core-browser';
+import { AINativeConfigService, useInjectable, useLatest } from '@opensumi/ide-core-browser';
 import { Icon, Popover, PopoverPosition, getIcon } from '@opensumi/ide-core-browser/lib/components';
 import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
 import { InteractiveInput } from '@opensumi/ide-core-browser/lib/components/ai-native/interactive-input/index';
-import { ChatAgentViewServiceToken, ChatFeatureRegistryToken, localize, runWhenIdle } from '@opensumi/ide-core-common';
+import {
+  ChatAgentViewServiceToken,
+  ChatFeatureRegistryToken,
+  MessageType,
+  localize,
+  runWhenIdle,
+} from '@opensumi/ide-core-common';
+import { CommandService } from '@opensumi/ide-core-common/lib/command';
 import { MonacoCommandRegistry } from '@opensumi/ide-editor/lib/browser/monaco-contrib/command/command.service';
-
-import { AT_SIGN_SYMBOL, IChatAgentService, SLASH_SYMBOL } from '../../common';
+import { IDialogService } from '@opensumi/ide-overlay';
+
+import {
+  AT_SIGN_SYMBOL,
+  IChatAgentService,
+  IChatInternalService,
+  SLASH_SYMBOL,
+  TokenMCPServerProxyService,
+} from '../../common';
 import { ChatAgentViewService } from '../chat/chat-agent.view.service';
 import { ChatSlashCommandItemModel } from '../chat/chat-model';
 import { ChatProxyService } from '../chat/chat-proxy.service';
 import { ChatFeatureRegistry } from '../chat/chat.feature.registry';
+import { ChatInternalService } from '../chat/chat.internal.service';
+import { OPEN_MCP_CONFIG_COMMAND } from '../mcp/config/mcp-config.commands';
+import { MCPServerProxyService } from '../mcp/mcp-server-proxy.service';
+import { MCPToolsDialog } from '../mcp/mcp-tools-dialog.view';
 import { IChatSlashCommandItem } from '../types';
 
-import { ChatContext } from './ChatContext';
 import styles from './components.module.less';
 
 const INSTRUCTION_BOTTOM = 8;
@@ -194,13 +211,30 @@ export const ChatInput = React.forwardRef((props: IChatInputProps, ref) => {
   const [showExpand, setShowExpand] = useState(false);
   const [isExpand, setIsExpand] = useState(false);
   const [placeholder, setPlaceHolder] = useState(localize('aiNative.chat.input.placeholder.default'));
-
+  const aiChatService = useInjectable<ChatInternalService>(IChatInternalService);
+  const dialogService = useInjectable<IDialogService>(IDialogService);
+  const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
+  const mcpServerProxyService = useInjectable<MCPServerProxyService>(TokenMCPServerProxyService);
   const monacoCommandRegistry = useInjectable<MonacoCommandRegistry>(MonacoCommandRegistry);
   const chatAgentService = useInjectable<IChatAgentService>(IChatAgentService);
   const chatFeatureRegistry = useInjectable<ChatFeatureRegistry>(ChatFeatureRegistryToken);
+  const commandService = useInjectable<CommandService>(CommandService);
 
   const currentAgentIdRef = useLatest(agentId);
 
+  const handleShowMCPConfig = React.useCallback(() => {
+    commandService.executeCommand(OPEN_MCP_CONFIG_COMMAND.id);
+  }, [commandService]);
+
+  const handleShowMCPTools = React.useCallback(async () => {
+    const tools = await mcpServerProxyService.getAllMCPTools();
+    dialogService.open({
+      message: <MCPToolsDialog tools={tools} />,
+      type: MessageType.Empty,
+      buttons: [localize('dialog.file.close')],
+    });
+  }, [mcpServerProxyService, dialogService]);
+
   useImperativeHandle(ref, () => ({
     setInputValue: (v: string) => {
       setValue(v);
@@ -297,6 +331,10 @@ export const ChatInput = React.forwardRef((props: IChatInputProps, ref) => {
     }
   }, []);
 
+  const handleStop = useCallback(() => {
+    aiChatService.cancelRequest();
+  }, []);
+
   const handleSend = useCallback(async () => {
     if (disabled) {
       return;
@@ -457,11 +495,48 @@ export const ChatInput = React.forwardRef((props: IChatInputProps, ref) => {
         disabled={disabled}
         className={styles.input_wrapper}
         onSend={handleSend}
+        onStop={handleStop}
         sendBtnClassName={sendBtnClassName}
         onHeightChange={handleHeightChange}
         height={inputHeight}
         popoverPosition={PopoverPosition.left}
       />
+      <div className={styles.chat_input_footer}>
+        {aiNativeConfigService.capabilities.supportsMCP && (
+          <div className={styles.mcp_desc}>
+            <Popover
+              overlayClassName={styles.popover_icon}
+              id={'ai-chat-header-mcp-server'}
+              position={PopoverPosition.left}
+              title={'MCP Server'}
+            >
+              <EnhanceIcon
+                wrapperClassName={styles.action_btn}
+                className={'codicon codicon-server'}
+                onClick={handleShowMCPConfig}
+                tabIndex={0}
+                role='button'
+                ariaLabel={'MCP Server'}
+              />
+            </Popover>
+            <Popover
+              overlayClassName={styles.popover_icon}
+              id={'ai-chat-header-tools'}
+              position={PopoverPosition.left}
+              title={localize('aiNative.operate.tools.title')}
+            >
+              <EnhanceIcon
+                wrapperClassName={styles.action_btn}
+                className={getIcon('menubar-tool')}
+                onClick={handleShowMCPTools}
+                tabIndex={0}
+                role='button'
+                ariaLabel={localize('aiNative.operate.tools.title')}
+              />
+            </Popover>
+          </div>
+        )}
+      </div>
     </div>
   );
 });

package/src/browser/components/ChatReply.tsx

@@ -235,7 +235,7 @@ export const ChatReply = (props: IChatReplyProps) => {
           if (onDone) {
             onDone();
           }
-
+          // 模型消息返回结束，上报消息（包含toolCall等全部结束）
           aiReporter.end(relationId, {
             assistantMessage: request.response.responseText,
             replytime: Date.now() - startTime,
@@ -243,6 +243,8 @@ export const ChatReply = (props: IChatReplyProps) => {
             isStop: false,
             command,
             agentId,
+            messageId: msgId,
+            sessionId: aiChatService.sessionModel.sessionId,
           });
         }
 
@@ -272,6 +274,8 @@ export const ChatReply = (props: IChatReplyProps) => {
       isStop: true,
       command,
       agentId,
+      messageId: msgId,
+      sessionId: aiChatService.sessionModel.sessionId,
     });
     aiChatService.cancelRequest();
   };
@@ -351,11 +355,7 @@ export const ChatReply = (props: IChatReplyProps) => {
   }, [request.response.followups]);
 
   if (!request.response.isComplete) {
-    return (
-      <ChatThinking message={request.response.responseText} onStop={onStop}>
-        {contentNode}
-      </ChatThinking>
-    );
+    return <ChatThinking message={request.response.responseText}>{contentNode}</ChatThinking>;
   }
 
   return (

package/src/browser/components/ChatThinking.tsx

@@ -18,14 +18,12 @@ interface ITinkingProps {
   message?: string;
   onRegenerate?: () => void;
   requestId?: string;
-  onStop?: () => void;
   thinkingText?: string;
-  showStop?: boolean;
   showRegenerate?: boolean;
 }
 
 export const ChatThinking = (props: ITinkingProps) => {
-  const { children, message, onStop, showStop = true, thinkingText } = props;
+  const { children, message, thinkingText } = props;
 
   const chatRenderRegistry = useInjectable<ChatRenderRegistry>(ChatRenderRegistryToken);
 
@@ -34,10 +32,6 @@ export const ChatThinking = (props: ITinkingProps) => {
     [chatRenderRegistry, chatRenderRegistry.chatThinkingRender],
   );
 
-  const handlePause = useCallback(async () => {
-    onStop && onStop();
-  }, []);
-
   const renderContent = useCallback(() => {
     if (!children || !message?.trim()) {
       if (CustomThinkingRender) {
@@ -61,12 +55,12 @@ export const ChatThinking = (props: ITinkingProps) => {
               {!children && <Progress loading={true} wrapperClassName={styles.ai_native_progress_wrapper} />}
             </span>
           )}
-          {showStop && (
+          {/* {showStop && (
             <div className={styles.block} onClick={handlePause} tabIndex={0} role='button'>
               <Icon className={getIcon('circle-pause')}></Icon>
               <span>{localize('aiNative.operate.stop.title')}</span>
             </div>
-          )}
+          )} */}
         </div>
       </div>
     </>

package/src/browser/components/ChatToolRender.tsx

@@ -67,13 +67,12 @@ export const ChatToolRender = (props: { value: IChatToolContent['content']; mess
     <div className={styles['chat-tool-render']}>
       <div className={styles['tool-header']} onClick={toggleExpand}>
         <div className={styles['tool-name']}>
-          <span className={cls(styles['expand-icon'], { [styles.expanded]: isExpanded })}>▶</span>
+          <Icon iconClass={`codicon codicon-triangle-${isExpanded ? 'down' : 'right'}`} />
           {label}
         </div>
         {value.state && (
           <div className={styles['tool-state']}>
             <span className={styles['state-icon']}>{stateInfo.icon}</span>
-            <span className={styles['state-label']}>{stateInfo.label}</span>
           </div>
         )}
       </div>

package/src/browser/components/WelcomeMsg.tsx

@@ -62,7 +62,7 @@ export const WelcomeMessage = () => {
   }, []);
 
   if (!welcomeMessage) {
-    return <ChatThinking showStop={false} thinkingText={localize('aiNative.chat.welcome.loading.text')} />;
+    return <ChatThinking thinkingText={localize('aiNative.chat.welcome.loading.text')} />;
   }
 
   const allSampleQuestions = React.useMemo(

package/src/browser/components/chat-history.module.less

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-between;
   font-size: 13px;
-  padding: 0 4px 0 12px;
+  padding: 0 0 0 12px;
   color: var(--editor-foreground);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -78,6 +78,7 @@
   .dm-chat-history-list {
     overflow: auto;
     max-height: 400px;
+    max-width: 400px;
     margin-top: 4px;
     font-size: 13px;
   }

package/src/browser/components/components.module.less

@@ -96,6 +96,7 @@
 .chat_input_container {
   position: relative;
   border-radius: 9px;
+  padding: 10px 0px 0px 0px;
   border: 1px solid var(--kt-input-border);
   background-color: var(--design-chatInput-background);
   &.active {
@@ -283,6 +284,8 @@
   position: relative;
   min-width: 100px;
   margin-top: 4px;
+  max-height: 300px;
+  overflow: auto;
 
   :global {
     .hljs {
@@ -505,3 +508,22 @@
     }
   }
 }
+
+.chat_input_footer {
+  padding: 0px 10px;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+
+  .model_selector {
+    display: flex;
+    font-size: 11px;
+    align-items: center;
+  }
+
+  .mcp_desc {
+    padding: 5px 0px;
+    display: flex;
+    align-items: center;
+  }
+}