@opensumi/ide-ai-native 3.8.1-next-1740726474.0 → 3.8.1-next-1740735952.0

package/src/browser/chat/chat-manager.service.ts

@@ -9,13 +9,10 @@ import {
   IStorage,
   STORAGE_NAMESPACE,
   StorageProvider,
-  debounce,
 } from '@opensumi/ide-core-common';
 import { ChatMessageRole, IChatMessage, IHistoryChatMessage } from '@opensumi/ide-core-common/lib/types/ai-native';
 
 import { IChatAgentService, IChatFollowup, IChatRequestMessage, IChatResponseErrorDetails } from '../../common';
-import { LLMContextService, LLMContextServiceToken } from '../../common/llm-context';
-import { ChatAgentPromptProvider } from '../../common/prompts/context-prompt-provider';
 import { MsgHistoryManager } from '../model/msg-history-manager';
 
 import { ChatModel, ChatRequestModel, ChatResponseModel, IChatProgressResponseContent } from './chat-model';
@@ -52,12 +49,6 @@ export class ChatManagerService extends Disposable {
   @Autowired(StorageProvider)
   private storageProvider: StorageProvider;
 
-  @Autowired(ChatAgentPromptProvider)
-  protected readonly promptProvider: ChatAgentPromptProvider;
-
-  @Autowired(LLMContextServiceToken)
-  protected readonly contextService: LLMContextService;
-
   private _chatStorage: IStorage;
 
   protected fromJSON(data: ISessionModel[]) {
@@ -98,7 +89,6 @@ export class ChatManagerService extends Disposable {
     const savedSessions = this.fromJSON(sessionsModelData);
     savedSessions.forEach((session) => {
       this.#sessionModels.set(session.sessionId, session);
-      this.listenSession(session);
     });
     await this.storageInitEmitter.fireAndAwait();
   }
@@ -108,20 +98,11 @@ export class ChatManagerService extends Disposable {
   }
 
   startSession() {
-    const model = new ChatModel({
-      provideContext: this.provideContextPrompt.bind(this),
-    });
+    const model = new ChatModel();
     this.#sessionModels.set(model.sessionId, model);
-    this.listenSession(model);
     return model;
   }
 
-  private provideContextPrompt(message: string) {
-    const context = this.contextService.serialize();
-    const fullMessage = this.promptProvider.provideContextPrompt(context, message);
-    return fullMessage;
-  }
-
   getSession(sessionId: string): ChatModel | undefined {
     return this.#sessionModels.get(sessionId);
   }
@@ -215,15 +196,6 @@ export class ChatManagerService extends Disposable {
     }
   }
 
-  protected listenSession(session: ChatModel) {
-    this.addDispose(
-      session.history.onMessageAdditionalChange(() => {
-        this.saveSessions();
-      }),
-    );
-  }
-
-  @debounce(1000)
   protected saveSessions() {
     this._chatStorage.set('sessionModels', this.getSessions());
   }

package/src/browser/chat/chat-model.ts

@@ -274,22 +274,13 @@ export class ChatRequestModel implements IChatRequestModel {
 export class ChatModel extends Disposable implements IChatModel {
   private static requestIdPool = 0;
 
-  private provideContextPrompt?: (string) => string;
-
-  constructor(initParams?: {
-    sessionId?: string;
-    history?: MsgHistoryManager;
-    requests?: ChatRequestModel[];
-    provideContext?: (msg: string) => string;
-  }) {
+  constructor(initParams?: { sessionId?: string; history?: MsgHistoryManager; requests?: ChatRequestModel[] }) {
     super();
     this.#sessionId = initParams?.sessionId ?? uuid();
     this.history = initParams?.history ?? new MsgHistoryManager();
     if (initParams?.requests) {
       this.#requests = new Map(initParams.requests.map((r) => [r.requestId, r]));
     }
-
-    this.provideContextPrompt = initParams?.provideContext;
   }
 
   #sessionId: string;
@@ -309,15 +300,9 @@ export class ChatModel extends Disposable implements IChatModel {
   readonly history: MsgHistoryManager;
 
   addRequest(message: IChatRequestMessage): ChatRequestModel {
-    const msg = message;
-    // first msg
-    if (this.provideContextPrompt) {
-      msg.prompt = this.provideContextPrompt(msg.prompt);
-    }
-
     const requestId = `${this.sessionId}_request_${ChatModel.requestIdPool++}`;
-    const response = new ChatResponseModel(requestId, this, msg.agentId);
-    const request = new ChatRequestModel(requestId, this, msg, response);
+    const response = new ChatResponseModel(requestId, this, message.agentId);
+    const request = new ChatRequestModel(requestId, this, message, response);
 
     this.#requests.set(requestId, request);
     return request;

package/src/browser/chat/chat.internal.service.ts

@@ -94,10 +94,6 @@ export class ChatInternalService extends Disposable {
     return this.chatManagerService.getSessions();
   }
 
-  getSession(sessionId: string) {
-    return this.chatManagerService.getSession(sessionId);
-  }
-
   activateSession(sessionId: string) {
     const targetSession = this.chatManagerService.getSession(sessionId);
     if (!targetSession) {

package/src/browser/chat/chat.module.less

@@ -279,6 +279,7 @@
   }
 }
 
+
 .chat_tips_container {
   display: flex;
   align-items: center;
@@ -289,6 +290,6 @@
 }
 
 .chat_history {
-  width: calc(100% - 40px);
+  width: calc(100% - 60px);
   color: var(--design-text-foreground);
 }

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

@@ -5,6 +5,7 @@ import {
   AINativeConfigService,
   CommandService,
   getIcon,
+  useEventEffect,
   useInjectable,
   useUpdateOnEvent,
 } from '@opensumi/ide-core-browser';
@@ -41,6 +42,8 @@ import {
   IChatMessageStructure,
   TokenMCPServerProxyService,
 } from '../../common';
+import { LLMContextService, LLMContextServiceToken } from '../../common/llm-context';
+import { ChatAgentPromptProvider } from '../../common/prompts/context-prompt-provider';
 import { ChatContext } from '../components/ChatContext';
 import { CodeBlockWrapperInput } from '../components/ChatEditor';
 import ChatHistory, { IChatHistoryItem } from '../components/ChatHistory';
@@ -79,11 +82,17 @@ 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 mcpServerProxyService = useInjectable<MCPServerProxyService>(TokenMCPServerProxyService);
 
   const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
   const msgHistoryManager = aiChatService.sessionModel.history;
   const containerRef = React.useRef<HTMLDivElement>(null);
   const chatInputRef = React.useRef<{ setInputValue: (v: string) => void } | null>(null);
+  const dialogService = useInjectable<IDialogService>(IDialogService);
+  const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
+  const commandService = useInjectable<CommandService>(CommandService);
 
   const [shortcutCommands, setShortcutCommands] = React.useState<ChatSlashCommandItemModel[]>([]);
 
@@ -105,6 +114,8 @@ export const AIChatView = () => {
   const [defaultAgentId, setDefaultAgentId] = React.useState<string>('');
   const [command, setCommand] = React.useState('');
   const [theme, setTheme] = React.useState<string | null>(null);
+  const [mcpToolsCount, setMcpToolsCount] = React.useState<number>(0);
+  const [mcpServersCount, setMcpServersCount] = React.useState<number>(0);
 
   React.useEffect(() => {
     const featureSlashCommands = chatFeatureRegistry.getAllShortcutSlashCommand();
@@ -504,7 +515,10 @@ export const AIChatView = () => {
       const { message, agentId, command, reportExtra } = value;
       const { actionType, actionSource } = reportExtra || {};
 
-      const request = aiChatService.createRequest(message, agentId!, command);
+      const context = contextService.serialize();
+      const fullMessage = await promptProvider.provideContextPrompt(context, message);
+
+      const request = aiChatService.createRequest(fullMessage, agentId!, command);
       if (!request) {
         return;
       }
@@ -653,6 +667,32 @@ export const AIChatView = () => {
     };
   }, [aiChatService.sessionModel]);
 
+  useEventEffect(
+    mcpServerProxyService.onChangeMCPServers,
+    () => {
+      mcpServerProxyService.getAllMCPTools().then((tools) => {
+        setMcpToolsCount(tools.length);
+      });
+      mcpServerProxyService.$getServers().then((servers) => {
+        setMcpServersCount(servers.length);
+      });
+    },
+    [mcpServerProxyService],
+  );
+
+  const handleShowMCPTools = React.useCallback(async () => {
+    const tools = await mcpServerProxyService.getAllMCPTools();
+    dialogService.open({
+      message: <MCPToolsDialog tools={tools} />,
+      type: MessageType.Empty,
+      buttons: ['关闭'],
+    });
+  }, [mcpServerProxyService, dialogService]);
+
+  const handleShowMCPConfig = React.useCallback(() => {
+    commandService.executeCommand(OPEN_MCP_CONFIG_COMMAND.id);
+  }, [commandService]);
+
   return (
     <div id={styles.ai_chat_view}>
       <div className={styles.header_container}>
@@ -692,6 +732,18 @@ export const AIChatView = () => {
                   </Popover>
                 ))}
               </div>
+              <div className={styles.header_operate_right}>
+                {aiNativeConfigService.capabilities.supportsMCP && (
+                  <>
+                    <div className={styles.tag} onClick={handleShowMCPConfig}>
+                      {`MCP Servers: ${mcpServersCount}`}
+                    </div>
+                    <div className={styles.tag} onClick={handleShowMCPTools}>
+                      {`MCP Tools: ${mcpToolsCount}`}
+                    </div>
+                  </>
+                )}
+              </div>
             </div>
             <ChatInputWrapperRender
               onSend={(value, agentId, command) =>
@@ -734,8 +786,6 @@ export function DefaultChatViewHeader({
   const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
   const mcpServerProxyService = useInjectable<MCPServerProxyService>(TokenMCPServerProxyService);
   const aiChatService = useInjectable<ChatInternalService>(IChatInternalService);
-  const commandService = useInjectable<CommandService>(CommandService);
-
   const [historyList, setHistoryList] = React.useState<IChatHistoryItem[]>([]);
   const [currentTitle, setCurrentTitle] = React.useState<string>('');
   const handleNewChat = React.useCallback(() => {
@@ -756,10 +806,6 @@ export function DefaultChatViewHeader({
     [aiChatService],
   );
 
-  const handleShowMCPConfig = React.useCallback(() => {
-    commandService.executeCommand(OPEN_MCP_CONFIG_COMMAND.id);
-  }, [commandService]);
-
   const handleShowMCPTools = React.useCallback(async () => {
     const tools = await mcpServerProxyService.getAllMCPTools();
     dialogService.open({
@@ -848,6 +894,23 @@ 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.attached]);
+        updateAddedFiles(files);
       }
     }, contextService);
 
@@ -57,7 +57,7 @@ export const ChatContext = memo(() => {
   }, []);
 
   const onDidDeselect = useCallback((uri: URI) => {
-    contextService.removeFileFromContext(uri, true);
+    contextService.removeFileFromContext(uri);
   }, []);
 
   const onDidClickFile = useCallback((uri: URI) => {

package/src/browser/components/ChatHistory.tsx

@@ -2,11 +2,10 @@ import cls from 'classnames';
 import React, { FC, memo, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Icon, Input, Loading, Popover, PopoverPosition, PopoverTriggerType, getIcon } from '@opensumi/ide-components';
+import './chat-history.css';
 import { localize } from '@opensumi/ide-core-browser';
 import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
 
-import styles from './chat-history.module.less';
-
 export interface IChatHistoryItem {
   id: string;
   title: string;
@@ -163,25 +162,22 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
       (item: IChatHistoryItem) => (
         <div
           key={item.id}
-          className={cls(
-            styles['dm-chat-history-item'],
-            item.id === currentId ? styles['dm-chat-history-item-selected'] : '',
-          )}
+          className={cls('dm-chat-history-item', item.id === currentId ? 'dm-chat-history-item-selected' : '')}
           onClick={() => handleHistoryItemSelect(item)}
         >
-          <div className={styles['dm-chat-history-item-content']}>
+          <div className='dm-chat-history-item-content'>
             {item.loading ? (
               <Loading />
             ) : (
               <Icon icon='message' style={{ width: '16px', height: '16px', marginRight: 4 }} />
             )}
             {!historyTitleEditable?.[item.id] ? (
-              <span id={`dm-chat-history-item-title-${item.id}`} className={styles['dm-chat-history-item-title']}>
+              <span id={`dm-chat-history-item-title-${item.id}`} className='dm-chat-history-item-title'>
                 {item.title}
               </span>
             ) : (
               <Input
-                className={styles['dm-chat-history-item-title']}
+                className='dm-chat-history-item-title'
                 defaultValue={item.title}
                 ref={inputRef}
                 onPressEnter={(e: any) => {
@@ -191,7 +187,7 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
               />
             )}
           </div>
-          <div className={styles['dm-chat-history-item-actions']}>
+          <div className='dm-chat-history-item-actions'>
             {/* <EditOutlined
               title={localize('aiNative.operate.chatHistory.edit')}
               style={{ marginRight: 8 }}
@@ -202,7 +198,7 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
               }}
             /> */}
             <EnhanceIcon
-              className={cls(styles['dm-chat-history-item-actions-delete'], getIcon('delete'))}
+              className={cls('dm-chat-history-item-actions-delete', getIcon('delete'))}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -241,10 +237,10 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
             value={searchValue}
             onChange={handleSearchChange}
           />
-          <div className={styles['dm-chat-history-list']}>
+          <div className='dm-chat-history-list'>
             {groupedHistoryList.map((group) => (
               <div key={group.key} style={{ padding: '4px' }}>
-                <div className={styles['dm-chat-history-time']}>{group.key}</div>
+                <div className='dm-chat-history-time'>{group.key}</div>
                 {group.items.map(renderHistoryItem)}
               </div>
             ))}
@@ -257,11 +253,11 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
     const getPopupContainer = useCallback((triggerNode: HTMLElement) => triggerNode.parentElement!, []);
 
     return (
-      <div className={cls(styles['dm-chat-history-header'], className)}>
-        <div className={styles['dm-chat-history-header-title']}>
+      <div className={cls('dm-chat-history-header', className)}>
+        <div className='dm-chat-history-header-title'>
           <span>{title}</span>
         </div>
-        <div className={styles['dm-chat-history-header-actions']}>
+        <div className='dm-chat-history-header-actions'>
           <Popover
             id='dm-chat-history-header-actions-history'
             content={renderHistory()}
@@ -271,12 +267,10 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
             getPopupContainer={getPopupContainer}
           >
             <div
-              className={styles['dm-chat-history-header-actions-history']}
+              className='dm-chat-history-header-actions-history'
               title={localize('aiNative.operate.chatHistory.title')}
             >
-              <EnhanceIcon
-                className={cls(styles['dm-chat-history-header-actions-history'], 'codicon codicon-history')}
-              />
+              <EnhanceIcon className={cls('dm-chat-history-header-actions-history', 'codicon codicon-history')} />
             </div>
           </Popover>
           <Popover
@@ -285,7 +279,7 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
             title={localize('aiNative.operate.newChat.title')}
           >
             <EnhanceIcon
-              className={cls(styles['dm-chat-history-header-actions-new'], getIcon('plus'))}
+              className={cls('dm-chat-history-header-actions-new', getIcon('plus'))}
               onClick={handleNewChat}
             />
           </Popover>

package/src/browser/components/ChatInput.tsx

@@ -1,31 +1,21 @@
 import cls from 'classnames';
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 
-import { AINativeConfigService, useInjectable, useLatest } from '@opensumi/ide-core-browser';
+import { 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,
-  MessageType,
-  localize,
-  runWhenIdle,
-} from '@opensumi/ide-core-common';
-import { CommandService } from '@opensumi/ide-core-common/lib/command';
+import { ChatAgentViewServiceToken, ChatFeatureRegistryToken, localize, runWhenIdle } from '@opensumi/ide-core-common';
 import { MonacoCommandRegistry } from '@opensumi/ide-editor/lib/browser/monaco-contrib/command/command.service';
-import { IDialogService } from '@opensumi/ide-overlay';
 
-import { AT_SIGN_SYMBOL, IChatAgentService, SLASH_SYMBOL, TokenMCPServerProxyService } from '../../common';
+import { AT_SIGN_SYMBOL, IChatAgentService, SLASH_SYMBOL } 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 { 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;
@@ -205,29 +195,12 @@ export const ChatInput = React.forwardRef((props: IChatInputProps, ref) => {
   const [isExpand, setIsExpand] = useState(false);
   const [placeholder, setPlaceHolder] = useState(localize('aiNative.chat.input.placeholder.default'));
 
-  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: ['关闭'],
-    });
-  }, [mcpServerProxyService, dialogService]);
-
   useImperativeHandle(ref, () => ({
     setInputValue: (v: string) => {
       setValue(v);
@@ -489,42 +462,6 @@ export const ChatInput = React.forwardRef((props: IChatInputProps, ref) => {
         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/ChatToolRender.tsx

@@ -67,12 +67,13 @@ 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']}>
-          <Icon iconClass={`codicon codicon-triangle-${isExpanded ? 'down' : 'right'}`} />
+          <span className={cls(styles['expand-icon'], { [styles.expanded]: isExpanded })}>▶</span>
           {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/{chat-history.module.less → chat-history.css}

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-between;
   font-size: 13px;
-  padding: 0 0 0 12px;
+  padding: 0 4px 0 12px;
   color: var(--editor-foreground);
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -96,7 +96,6 @@
 .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 {
@@ -506,22 +505,3 @@
     }
   }
 }
-
-.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;
-  }
-}