@opensumi/ide-ai-native 3.7.2-next-1740066619.0 → 3.7.2-next-1740323956.0

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

@@ -27,6 +27,12 @@ export class ChatInternalService extends Disposable {
   private readonly _onChangeSession = new Emitter<string>();
   public readonly onChangeSession: Event<string> = this._onChangeSession.event;
 
+  private readonly _onCancelRequest = new Emitter<void>();
+  public readonly onCancelRequest: Event<void> = this._onCancelRequest.event;
+
+  private readonly _onRegenerateRequest = new Emitter<void>();
+  public readonly onRegenerateRequest: Event<void> = this._onRegenerateRequest.event;
+
   private _latestRequestId: string;
   public get latestRequestId(): string {
     return this._latestRequestId;
@@ -52,11 +58,16 @@ export class ChatInternalService extends Disposable {
   }
 
   sendRequest(request: ChatRequestModel, regenerate = false) {
-    return this.chatManagerService.sendRequest(this.#sessionModel.sessionId, request, regenerate);
+    const result = this.chatManagerService.sendRequest(this.#sessionModel.sessionId, request, regenerate);
+    if (regenerate) {
+      this._onRegenerateRequest.fire();
+    }
+    return result;
   }
 
   cancelRequest() {
     this.chatManagerService.cancelRequest(this.#sessionModel.sessionId);
+    this._onCancelRequest.fire();
   }
 
   clearSessionModel() {

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

@@ -40,6 +40,7 @@ import {
   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 { ChatInput } from '../components/ChatInput';
@@ -50,7 +51,7 @@ import { MessageData, createMessageByAI, createMessageByUser } from '../componen
 import { WelcomeMessage } from '../components/WelcomeMsg';
 import { MCPServerProxyService } from '../mcp/mcp-server-proxy.service';
 import { MCPToolsDialog } from '../mcp/mcp-tools-dialog.view';
-import { ChatAgentPromptProvider, ChatViewHeaderRender, TSlashCommandCustomRender } from '../types';
+import { ChatViewHeaderRender, TSlashCommandCustomRender } from '../types';
 
 import { ChatRequestModel, ChatSlashCommandItemModel } from './chat-model';
 import { ChatProxyService } from './chat-proxy.service';

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

@@ -18,6 +18,11 @@ import { FileContext, LLMContextService, LLMContextServiceToken } from '../../..
 import { ContextSelector } from './ContextSelector';
 import styles from './style.module.less';
 
+const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
+const getRealHeight = (node) => ({ height: node.scrollHeight, opacity: 1 });
+const getCurrentHeight = (node) => ({ height: node.offsetHeight });
+const skipOpacityTransition = (_, event) => (event as TransitionEvent).propertyName === 'height';
+
 export const ChatContext = memo(() => {
   const [addedFiles, updateAddedFiles] = useState<FileContext[]>([]);
   const [contextOverlay, toggleContextOverlay] = useState(false);
@@ -76,13 +81,24 @@ export const ChatContext = memo(() => {
       <Collapse
         // @ts-ignore
         expandIcon={({ isActive }) => (isActive ? <Icon icon='down' /> : <Icon icon='right' />)}
-        defaultActiveKey={['context-panel']}
-        onChange={() => {}}
+        openMotion={{
+          motionName: 'rc-collapse-motion',
+          onEnterStart: getCollapsedHeight,
+          onEnterActive: getRealHeight,
+          onLeaveStart: getCurrentHeight,
+          onLeaveActive: getCollapsedHeight,
+          onEnterEnd: skipOpacityTransition,
+          onLeaveEnd: skipOpacityTransition,
+          motionDeadline: 100,
+          leavedClassName: styles.collapse_hide,
+        }}
       >
         <Panel
           header={
             <div className={styles.context_header}>
-              <h3 className={styles.chat_context_title}>Context</h3>
+              <h3 className={styles.chat_context_title}>
+                Context {addedFiles.length > 0 ? ` (${addedFiles.length} files)` : ''}
+              </h3>
               <Popover
                 overlayClassName={styles.popover_icon}
                 id={'ai-context-header-clear'}

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

@@ -5,6 +5,7 @@
   padding: 10px;
   border-radius: 4px;
   border: 1px solid var(--design-borderColor);
+  user-select: none;
 
   :global(.rc-collapse) {
     background-color: transparent !important;
@@ -19,6 +20,16 @@
 
   :global(.rc-collapse-expand-icon) {
     line-height: 1;
+
+    :global(.kt-icon) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .collapse_hide {
+    display: none;
   }
 
   :global(.rc-collapse-header) {
@@ -63,6 +74,7 @@
     .context_list {
       font-size: 12px;
       overflow-y: auto;
+      user-select: none;
 
       .list_desc {
         margin: 0px 10px;

package/src/browser/components/ChatEditor.tsx

@@ -31,9 +31,10 @@ interface Props {
   language?: string;
   agentId?: string;
   command?: string;
+  hideInsert?: boolean;
 }
 export const CodeEditorWithHighlight = (props: Props) => {
-  const { input, language, relationId, agentId, command } = props;
+  const { input, language, relationId, agentId, command, hideInsert } = props;
   const ref = React.useRef<HTMLDivElement | null>(null);
   const monacoCommandRegistry = useInjectable<MonacoCommandRegistry>(MonacoCommandRegistry);
   const clipboardService = useInjectable<IClipboardService>(IClipboardService);
@@ -101,15 +102,17 @@ export const CodeEditorWithHighlight = (props: Props) => {
   return (
     <div className={styles.monaco_wrapper}>
       <div className={styles.action_toolbar}>
-        <Popover id={`ai-chat-inser-${useUUID}`} title={localize('aiNative.chat.code.insert')}>
-          <EnhanceIcon
-            className={getIcon('insert')}
-            onClick={() => handleInsert()}
-            tabIndex={0}
-            role='button'
-            ariaLabel={localize('aiNative.chat.code.insert')}
-          />
-        </Popover>
+        {!hideInsert && (
+          <Popover id={`ai-chat-inser-${useUUID}`} title={localize('aiNative.chat.code.insert')}>
+            <EnhanceIcon
+              className={getIcon('insert')}
+              onClick={() => handleInsert()}
+              tabIndex={0}
+              role='button'
+              ariaLabel={localize('aiNative.chat.code.insert')}
+            />
+          </Popover>
+        )}
         <Popover
           id={`ai-chat-copy-${useUUID}`}
           title={localize(isCoping ? 'aiNative.chat.code.copy.success' : 'aiNative.chat.code.copy')}

package/src/browser/components/ChatMarkdown.tsx

@@ -17,6 +17,7 @@ interface MarkdownProps {
   className?: string;
   fillInIncompleteTokens?: boolean; // 补齐不完整的 token，如代码块或表格
   markedOptions?: IMarkedOptions;
+  hideInsert?: boolean;
 }
 
 export const ChatMarkdown = (props: MarkdownProps) => {
@@ -42,13 +43,14 @@ export const ChatMarkdown = (props: MarkdownProps) => {
         <div className={styles.code}>
           <ConfigProvider value={appConfig}>
             <div className={styles.code_block}>
-              <div className={styles.code_language}>{language}</div>
+              <div className={cls(styles.code_language, 'language-badge')}>{language}</div>
               <CodeEditorWithHighlight
                 input={code as string}
                 language={language}
                 relationId={props.relationId || ''}
                 agentId={props.agentId}
                 command={props.command}
+                hideInsert={props.hideInsert}
               />
             </div>
           </ConfigProvider>

package/src/browser/components/ChatReply.tsx

@@ -149,8 +149,8 @@ const TreeRenderer = (props: { treeData: IChatResponseProgressFileTreeData }) =>
   );
 };
 
-const ToolCallRender = (props: { toolCall: IChatToolContent['content'] }) => {
-  const { toolCall } = props;
+const ToolCallRender = (props: { toolCall: IChatToolContent['content']; messageId?: string }) => {
+  const { toolCall, messageId } = props;
   const chatAgentViewService = useInjectable<IChatAgentViewService>(ChatAgentViewServiceToken);
   const [node, setNode] = useState<React.JSX.Element | null>(null);
 
@@ -158,7 +158,7 @@ const ToolCallRender = (props: { toolCall: IChatToolContent['content'] }) => {
     const config = chatAgentViewService.getChatComponent('toolCall');
     if (config) {
       const { component: Component, initialProps } = config;
-      setNode(<Component {...initialProps} value={toolCall} />);
+      setNode(<Component {...initialProps} value={toolCall} messageId={messageId} />);
       return;
     }
     setNode(
@@ -169,14 +169,14 @@ const ToolCallRender = (props: { toolCall: IChatToolContent['content'] }) => {
     );
     const deferred = chatAgentViewService.getChatComponentDeferred('toolCall')!;
     deferred.promise.then(({ component: Component, initialProps }) => {
-      setNode(<Component {...initialProps} value={toolCall} />);
+      setNode(<Component {...initialProps} value={toolCall} messageId={messageId} />);
     });
   }, [toolCall.state]);
 
   return node;
 };
 
-const ComponentRender = (props: { component: string; value?: unknown }) => {
+const ComponentRender = (props: { component: string; value?: unknown; messageId?: string }) => {
   const chatAgentViewService = useInjectable<IChatAgentViewService>(ChatAgentViewServiceToken);
   const [node, setNode] = useState<React.JSX.Element | null>(null);
 
@@ -184,7 +184,7 @@ const ComponentRender = (props: { component: string; value?: unknown }) => {
     const config = chatAgentViewService.getChatComponent(props.component);
     if (config) {
       const { component: Component, initialProps } = config;
-      setNode(<Component {...initialProps} value={props.value} />);
+      setNode(<Component {...initialProps} value={props.value} messageId={props.messageId} />);
       return;
     }
     setNode(
@@ -224,7 +224,6 @@ export const ChatReply = (props: IChatReplyProps) => {
   const chatApiService = useInjectable<ChatService>(ChatServiceToken);
   const chatAgentService = useInjectable<IChatAgentService>(IChatAgentService);
   const chatRenderRegistry = useInjectable<ChatRenderRegistry>(ChatRenderRegistryToken);
-
   useEffect(() => {
     const disposableCollection = new DisposableCollection();
 
@@ -298,12 +297,6 @@ export const ChatReply = (props: IChatReplyProps) => {
     </div>
   );
 
-  const renderComponent = (componentId: string, value: unknown) => (
-    <ComponentRender component={componentId} value={value} />
-  );
-
-  const renderToolCall = (toolCall: IChatToolContent['content']) => <ToolCallRender toolCall={toolCall} />;
-
   const contentNode = React.useMemo(
     () =>
       request.response.responseContents.map((item, index) => {
@@ -313,9 +306,9 @@ export const ChatReply = (props: IChatReplyProps) => {
         } else if (item.kind === 'treeData') {
           node = renderTreeData(item.treeData);
         } else if (item.kind === 'component') {
-          node = renderComponent(item.component, item.value);
+          node = <ComponentRender component={item.component} value={item.value} messageId={msgId} />;
         } else if (item.kind === 'toolCall') {
-          node = renderToolCall(item.content);
+          node = <ToolCallRender toolCall={item.content} messageId={msgId} />;
         } else {
           node = renderMarkdown(item.content);
         }

package/src/browser/components/ChatToolRender.tsx

@@ -1,20 +1,27 @@
 import cls from 'classnames';
 import React, { useState } from 'react';
 
+import { useInjectable } from '@opensumi/ide-core-browser';
 import { Icon } from '@opensumi/ide-core-browser/lib/components';
 import { Loading } from '@opensumi/ide-core-browser/lib/components/ai-native';
 import { IChatToolContent, uuid } from '@opensumi/ide-core-common';
 
+import { IMCPServerRegistry, TokenMCPServerRegistry } from '../types';
+
 import { CodeEditorWithHighlight } from './ChatEditor';
 import styles from './ChatToolRender.module.less';
 
-export const ChatToolRender = (props: { value: IChatToolContent['content'] }) => {
-  const { value } = props;
+export const ChatToolRender = (props: { value: IChatToolContent['content']; messageId?: string }) => {
+  const { value, messageId } = props;
   const [isExpanded, setIsExpanded] = useState(false);
+  const mcpServerFeatureRegistry = useInjectable<IMCPServerRegistry>(TokenMCPServerRegistry);
 
   if (!value || !value.function || !value.id) {
     return null;
   }
+  const label = mcpServerFeatureRegistry.getMCPTool(value.function.name)?.label || value.function.name;
+
+  const ToolComponent = mcpServerFeatureRegistry.getToolComponent(value.function.name);
 
   const getStateInfo = (state?: string): { label: string; icon: React.ReactNode } => {
     switch (state) {
@@ -22,11 +29,22 @@ export const ChatToolRender = (props: { value: IChatToolContent['content'] }) =>
       case 'streaming':
         return { label: 'Generating', icon: <Loading /> };
       case 'complete':
-        return { label: 'Complete', icon: <Icon iconClass="codicon codicon-check" /> };
+        return { label: 'Complete', icon: <Icon iconClass='codicon codicon-check' /> };
       case 'result':
-        return { label: 'Result Ready', icon: <Icon iconClass="codicon codicon-check-all" /> };
+        return { label: 'Result Ready', icon: <Icon iconClass='codicon codicon-check-all' /> };
       default:
-        return { label: state || 'Unknown', icon: <Icon iconClass="codicon codicon-question" /> };
+        return { label: state || 'Unknown', icon: <Icon iconClass='codicon codicon-question' /> };
+    }
+  };
+  const getParsedArgs = () => {
+    try {
+      // TODO: 流式输出中function_call的参数还不完整，需要等待complete状态
+      if (value.state !== 'complete' && value.state !== 'result') {
+        return {};
+      }
+      return JSON.parse(value.function?.arguments || '{}');
+    } catch (error) {
+      return {};
     }
   };
 
@@ -36,12 +54,21 @@ export const ChatToolRender = (props: { value: IChatToolContent['content'] }) =>
 
   const stateInfo = getStateInfo(value.state);
 
-  return (
+  return ToolComponent && (value.state === 'complete' || value.state === 'result') ? (
+    <ToolComponent
+      state={value.state}
+      args={getParsedArgs()}
+      result={value.result}
+      index={value.index}
+      messageId={messageId}
+      toolCallId={value.id}
+    />
+  ) : (
     <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>
-          {value?.function?.name}
+          {label}
         </div>
         {value.state && (
           <div className={styles['tool-state']}>
@@ -54,21 +81,13 @@ export const ChatToolRender = (props: { value: IChatToolContent['content'] }) =>
         {value?.function?.arguments && (
           <div className={styles['tool-arguments']}>
             <div className={styles['section-label']}>Arguments</div>
-            <CodeEditorWithHighlight
-              input={value?.function?.arguments}
-              language={'json'}
-              relationId={uuid(4)}
-            />
+            <CodeEditorWithHighlight input={value?.function?.arguments} language={'json'} relationId={uuid(4)} />
           </div>
         )}
         {value?.result && (
           <div className={styles['tool-result']}>
             <div className={styles['section-label']}>Result</div>
-            <CodeEditorWithHighlight
-              input={value.result}
-              language={'json'}
-              relationId={uuid(4)}
-            />
+            <CodeEditorWithHighlight input={value.result} language={'json'} relationId={uuid(4)} />
           </div>
         )}
       </div>

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

@@ -253,7 +253,7 @@
   .editor {
     border-radius: 8px;
     font-size: 12px;
-    padding: 32px 8px 8px 8px;
+    padding: 28px 8px 8px 8px;
     line-height: 18px;
     &::-webkit-scrollbar {
       width: auto;
@@ -265,7 +265,7 @@
     display: flex;
     position: absolute;
     right: 8px;
-    top: 6px;
+    top: 2px;
     z-index: 100;
     height: 20px;
     align-items: center;
@@ -300,6 +300,7 @@
     background-color: var(--design-language-background);
     border-radius: 8px 0px 8px 0;
     color: var(--design-text-foreground);
+    font-size: 12px;
   }
 }
 

package/src/browser/context/llm-context.service.ts

@@ -27,32 +27,40 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
 
   private isAutoCollecting = false;
 
-  private contextFiles: Map<string, FileContext> = new Map();
+  private contextFiles: FileContext[] = [];
+
+  private maxFiles: number = 10; // 上下文的最大长度限制
 
   private onDidContextFilesChangeEmitter = new Emitter<FileContext[]>();
   onDidContextFilesChangeEvent = this.onDidContextFilesChangeEmitter.event;
 
   addFileToContext(uri: URI, selection?: [number, number], isManual = true): void {
-    this.contextFiles.set(uri.toString(), {
-      uri,
-      selection,
-      isManual,
-    });
+    this.removeFileFromContext(uri);
+
+    this.contextFiles.push({ uri, selection, isManual });
+
+    if (this.contextFiles.length > this.maxFiles) {
+      this.contextFiles.shift();
+    }
+
     this.onDidContextFilesChangeEmitter.fire(this.getAllContextFiles());
   }
 
   cleanFileContext() {
-    this.contextFiles.clear();
+    this.contextFiles = [];
     this.onDidContextFilesChangeEmitter.fire(this.getAllContextFiles());
   }
 
   private getAllContextFiles() {
-    return Array.from(this.contextFiles.values());
+    return [...this.contextFiles];
   }
 
   removeFileFromContext(uri: URI): void {
-    this.contextFiles.delete(uri.toString());
-    this.onDidContextFilesChangeEmitter.fire(this.getAllContextFiles());
+    const index = this.contextFiles.findIndex((file) => file.uri.toString() === uri.toString());
+    if (index > -1) {
+      this.contextFiles.splice(index, 1);
+      this.onDidContextFilesChangeEmitter.fire(this.getAllContextFiles());
+    }
   }
 
   startAutoCollection(): void {
@@ -65,18 +73,16 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
   }
 
   private startAutoCollectionInternal(): void {
-    // 文件打开
     this.disposables.push(
       this.eventBus.on(EditorDocumentModelCreationEvent, (event) => {
         if (event.payload.uri.scheme !== 'file') {
           return;
         }
-        // TODO: 是否自动添加文件到上下文？
+        // FIXME: 暂时不自动添加
         // this.addFileToContext(event.payload.uri);
       }),
     );
 
-    // 删除
     this.disposables.push(
       this.eventBus.on(EditorDocumentModelRemovalEvent, (event) => {
         if (event.payload.scheme !== 'file') {
@@ -85,16 +91,15 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
       }),
     );
 
-    // 保存
     this.disposables.push(
       this.eventBus.on(EditorDocumentModelSavedEvent, (event) => {
         if (event.payload.scheme !== 'file') {
           return;
         }
+        // TODO: 保存文件的逻辑
       }),
     );
 
-    // 光标选中
     this.disposables.push(
       this.eventBus.on(EditorSelectionChangeEvent, (event) => {
         if (event.payload.selections.length > 0) {
@@ -102,9 +107,9 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
             event.payload.selections[0].selectionStartLineNumber,
             event.payload.selections[0].positionLineNumber,
           ].sort() as [number, number];
+
           if (selection[0] === selection[1]) {
-            // TODO: 是否自动添加文件到上下文？
-            // this.addFileToContext(event.payload.editorUri, undefined);
+            this.addFileToContext(event.payload.editorUri, undefined);
           } else {
             this.addFileToContext(
               event.payload.editorUri,
@@ -124,8 +129,15 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
     const files = this.getAllContextFiles();
     const recentlyViewFiles = files
       .filter((v) => !v.selection)
-      .map((file) => URI.file(this.appConfig.workspaceDir).relative(file.uri)!.toString())
+      .map((file) => {
+        const relativePath = URI.file(this.appConfig.workspaceDir).relative(file.uri);
+        if (relativePath) {
+          return relativePath.toString();
+        }
+        return file.uri.parent.toString();
+      })
       .filter(Boolean);
+
     const attachedFiles = files
       .filter((v) => v.selection)
       .map((file) => {

package/src/browser/index.ts

@@ -30,6 +30,7 @@ import {
 } from '../common';
 import { LLMContextServiceToken } from '../common/llm-context';
 import { MCPServerManager, MCPServerManagerPath } from '../common/mcp-server-manager';
+import { ChatAgentPromptProvider, DefaultChatAgentPromptProvider } from '../common/prompts/context-prompt-provider';
 
 import { AINativeBrowserContribution } from './ai-core.contribution';
 import { ChatAgentService } from './chat/chat-agent.service';
@@ -57,16 +58,13 @@ import { LanguageParserService } from './languages/service';
 import { MCPServerProxyService } from './mcp/mcp-server-proxy.service';
 import { MCPServerRegistry } from './mcp/mcp-server.feature.registry';
 import { CreateNewFileWithTextTool } from './mcp/tools/createNewFileWithText';
-import { FindFilesByNameSubstringTool } from './mcp/tools/findFilesByNameSubstring';
-import { GetCurrentFilePathTool } from './mcp/tools/getCurrentFilePath';
+import { EditFileTool } from './mcp/tools/editFile';
+import { FileSearchTool } from './mcp/tools/fileSearch';
 import { GetDiagnosticsByPathTool } from './mcp/tools/getDiagnosticsByPath';
-import { GetFileTextByPathTool } from './mcp/tools/getFileTextByPath';
 import { GetOpenEditorFileDiagnosticsTool } from './mcp/tools/getOpenEditorFileDiagnostics';
-import { GetOpenEditorFileTextTool } from './mcp/tools/getOpenEditorFileText';
-import { GetSelectedTextTool } from './mcp/tools/getSelectedText';
+import { GrepSearchTool } from './mcp/tools/grepSearch';
 import { ListDirTool } from './mcp/tools/listDir';
 import { ReadFileTool } from './mcp/tools/readFile';
-import { ReplaceOpenEditorFileByDiffPreviewerTool } from './mcp/tools/replaceOpenEditorFileByDiffPreviewer';
 import { RunTerminalCommandTool } from './mcp/tools/runTerminalCmd';
 import { AINativePreferencesContribution } from './preferences';
 import { AINativeCoreContribution, MCPServerContribution, TokenMCPServerRegistry } from './types';
@@ -97,16 +95,13 @@ export class AINativeModule extends BrowserModule {
     // MCP Server Contributions START
     ListDirTool,
     ReadFileTool,
+    EditFileTool,
     CreateNewFileWithTextTool,
-    GetSelectedTextTool,
     GetOpenEditorFileDiagnosticsTool,
-    GetOpenEditorFileTextTool,
-    GetFileTextByPathTool,
-    GetCurrentFilePathTool,
-    FindFilesByNameSubstringTool,
+    FileSearchTool,
+    GrepSearchTool,
     GetDiagnosticsByPathTool,
     RunTerminalCommandTool,
-    ReplaceOpenEditorFileByDiffPreviewerTool,
     // MCP Server Contributions END
 
     // Context Service
@@ -196,6 +191,10 @@ export class AINativeModule extends BrowserModule {
       token: InlineDiffService,
       useClass: InlineDiffService,
     },
+    {
+      token: ChatAgentPromptProvider,
+      useClass: DefaultChatAgentPromptProvider,
+    },
   ];
 
   backServices = [