feat: support edit_file tool

jest.setup.jsdom.js

@@ -94,16 +94,24 @@ Object.defineProperty(window, 'matchMedia', {
 Object.defineProperty(window, 'crypto', {
   writable: true,
   value: {
-    randomUUID: () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-      const r = Math.random() * 16 | 0;
-      const v = c === 'x' ? r : (r & 0x3 | 0x8);
-      return v.toString(16);
-    }),
+    randomUUID: () =>
+      'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      }),
     getRandomValues: (array) => {
-      if (!(array instanceof Int8Array || array instanceof Uint8Array ||
-            array instanceof Int16Array || array instanceof Uint16Array ||
-            array instanceof Int32Array || array instanceof Uint32Array ||
-            array instanceof Uint8ClampedArray)) {
+      if (
+        !(
+          array instanceof Int8Array ||
+          array instanceof Uint8Array ||
+          array instanceof Int16Array ||
+          array instanceof Uint16Array ||
+          array instanceof Int32Array ||
+          array instanceof Uint32Array ||
+          array instanceof Uint8ClampedArray
+        )
+      ) {
         throw new TypeError('Expected a TypedArray');
       }
       for (let i = 0; i < array.length; i++) {

packages/ai-native/src/browser/ai-core.contribution.ts

@@ -409,6 +409,10 @@ export class AINativeBrowserContribution
             id: AINativeSettingSectionsId.CodeEditsTyping,
             localized: 'preference.ai.native.codeEdits.typing',
           },
+          {
+            id: AINativeSettingSectionsId.SystemPrompt,
+            localized: 'preference.ai.native.chat.system.prompt',
+          },
         ],
       });
     }

packages/ai-native/src/browser/chat/chat-agent.service.ts

@@ -13,6 +13,7 @@ import {
   ILogger,
   toDisposable,
 } from '@opensumi/ide-core-common';
+import { ChatMessageRole } from '@opensumi/ide-core-common';
 import { IChatMessage } from '@opensumi/ide-core-common/lib/types/ai-native';
 
 import {
@@ -119,6 +120,12 @@ export class ChatAgentService extends Disposable implements IChatAgentService {
     if (!data) {
       throw new Error(`No agent with id ${id}`);
     }
+    if (data.agent.metadata.systemPrompt) {
+      history.unshift({
+        role: ChatMessageRole.System,
+        content: data.agent.metadata.systemPrompt,
+      });
+    }
 
     const result = await data.agent.invoke(request, progress, history, token);
     return result;

packages/ai-native/src/browser/chat/chat-model.ts

@@ -34,7 +34,6 @@ export type IChatProgressResponseContent =
   | IChatComponent
   | IChatToolContent;
 
-@Injectable({ multiple: true })
 export class ChatResponseModel extends Disposable {
   #responseParts: IChatProgressResponseContent[] = [];
   get responseParts() {
@@ -218,7 +217,6 @@ export class ChatResponseModel extends Disposable {
   }
 }
 
-@Injectable({ multiple: true })
 export class ChatRequestModel implements IChatRequestModel {
   #requestId: string;
   public get requestId(): string {

packages/ai-native/src/browser/chat/chat-proxy.service.ts

@@ -1,5 +1,5 @@
 import { Autowired, Injectable } from '@opensumi/di';
-import { PreferenceService } from '@opensumi/ide-core-browser';
+import { AppConfig, PreferenceService } from '@opensumi/ide-core-browser';
 import {
   AIBackSerivcePath,
   CancellationToken,
@@ -71,6 +71,9 @@ export class ChatProxyService extends Disposable {
   @Autowired(IMessageService)
   private readonly messageService: IMessageService;
 
+  @Autowired(AppConfig)
+  private readonly appConfig: AppConfig;
+
   private chatDeferred: Deferred<void> = new Deferred<void>();
 
   public registerDefaultAgent() {
@@ -83,7 +86,14 @@ export class ChatProxyService extends Disposable {
     this.addDispose(
       this.chatAgentService.registerAgent({
         id: ChatProxyService.AGENT_ID,
-        metadata: {},
+        metadata: {
+          systemPrompt:
+            this.preferenceService.get<string>(
+              AINativeSettingSectionsId.SystemPrompt,
+              'You are a powerful AI coding assistant working in OpenSumi, a top IDE framework. You collaborate with a USER to solve coding tasks, which may involve creating, modifying, or debugging code, or answering questions. When the USER sends a message, relevant context (e.g., open files, cursor position, edit history, linter errors) may be attached. Use this information as needed.\n\n<tool_calling>\nYou have access to tools to assist with tasks. Follow these rules:\n1. Always adhere to the tool call schema and provide all required parameters.\n2. Only use tools explicitly provided; ignore unavailable ones.\n3. Avoid mentioning tool names to the USER (e.g., say "I will edit your file" instead of "I need to use the edit_file tool").\n4. Only call tools when necessary; respond directly if the task is general or you already know the answer.\n5. Explain to the USER why you’re using a tool before calling it.\n</tool_calling>\n\n<making_code_changes>\nWhen modifying code:\n1. Use code edit tools instead of outputting code unless explicitly requested.\n2. Limit tool calls to one per turn.\n3. Ensure generated code is immediately executable by including necessary imports, dependencies, and endpoints.\n4. For new projects, create a dependency management file (e.g., requirements.txt) and a README.\n5. For web apps, design a modern, user-friendly UI.\n6. Avoid generating non-textual or excessively long code.\n7. Read file contents before editing, unless appending a small change or creating a new file.\n8. Fix introduced linter errors if possible, but stop after 3 attempts and ask the USER for guidance.\n9. Reapply reasonable code edits if they weren’t followed initially.\n</making_code_changes>\n\nUse the appropriate tools to fulfill the USER’s request, ensuring all required parameters are provided or inferred from context.',
+            ) +
+            `\n\n<user_info>\nThe user's OS version is ${this.applicationService.frontendOS}. The absolute path of the user's workspace is ${this.appConfig.workspaceDir}.\n</user_info>`,
+        },
         invoke: async (
           request: IChatAgentRequest,
           progress: (part: IChatProgress) => void,

packages/ai-native/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() {

packages/ai-native/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')}

packages/ai-native/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, 'langauge-badge')}>{language}</div>
               <CodeEditorWithHighlight
                 input={code as string}
                 language={language}
                 relationId={props.relationId || ''}
                 agentId={props.agentId}
                 command={props.command}
+                hideInsert={props.hideInsert}
               />
             </div>
           </ConfigProvider>

packages/ai-native/src/browser/components/ChatReply.tsx

@@ -149,16 +149,16 @@ 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);
 
   useEffect(() => {
     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,22 +169,22 @@ 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);
 
   useEffect(() => {
     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);
         }

packages/ai-native/src/browser/components/ChatToolRender.tsx

@@ -1,32 +1,50 @@
 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) {
       case 'streaming-start':
       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,12 @@ export const ChatToolRender = (props: { value: IChatToolContent['content'] }) =>
 
   const stateInfo = getStateInfo(value.state);
 
-  return (
-    <div className={styles['chat-tool-render']}>
+  return [
+    <div className={styles['chat-tool-render']} key='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,24 +72,27 @@ 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>
-    </div>
-  );
+    </div>,
+    ToolComponent && (
+      <ToolComponent
+        key='tool-component'
+        state={value.state}
+        args={getParsedArgs()}
+        result={value.result}
+        index={value.index}
+        messageId={messageId}
+        toolCallId={value.id}
+      />
+    ),
+  ];
 };