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

package/src/browser/ai-core.contribution.ts

@@ -59,7 +59,11 @@ import {
 } from '@opensumi/ide-core-common';
 import { DESIGN_MENU_BAR_RIGHT } from '@opensumi/ide-design';
 import { IEditor, WorkbenchEditorService } from '@opensumi/ide-editor';
-import { BrowserEditorContribution, IEditorFeatureRegistry } from '@opensumi/ide-editor/lib/browser';
+import {
+  BrowserEditorContribution,
+  EditorComponentRegistry,
+  IEditorFeatureRegistry,
+} from '@opensumi/ide-editor/lib/browser';
 import { WorkbenchEditorServiceImpl } from '@opensumi/ide-editor/lib/browser/workbench-editor.service';
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
 import { ISettingRegistry, SettingContribution } from '@opensumi/ide-preferences';
@@ -100,6 +104,7 @@ import {
   AIRightTabRenderer,
 } from './layout/tabbar.view';
 import { AIChatLogoAvatar } from './layout/view/avatar/avatar.view';
+import { BaseApplyService } from './mcp/base-apply.service';
 import {
   AINativeCoreContribution,
   IChatFeatureRegistry,
@@ -116,6 +121,7 @@ import {
 import { InlineChatEditorController } from './widget/inline-chat/inline-chat-editor.controller';
 import { InlineChatFeatureRegistry } from './widget/inline-chat/inline-chat.feature.registry';
 import { InlineChatService } from './widget/inline-chat/inline-chat.service';
+import { InlineDiffManager } from './widget/inline-diff/inline-diff-manager';
 import { InlineDiffController } from './widget/inline-diff/inline-diff.controller';
 import { InlineHintController } from './widget/inline-hint/inline-hint.controller';
 import { InlineInputController } from './widget/inline-input/inline-input.controller';
@@ -123,6 +129,8 @@ import { InlineInputService } from './widget/inline-input/inline-input.service';
 import { InlineStreamDiffService } from './widget/inline-stream-diff/inline-stream-diff.service';
 import { SumiLightBulbWidget } from './widget/light-bulb';
 
+export const INLINE_DIFF_MANAGER_WIDGET_ID = 'inline-diff-manager-widget';
+
 @Domain(
   ClientAppContribution,
   BrowserEditorContribution,
@@ -237,6 +245,9 @@ export class AINativeBrowserContribution
   @Autowired(IChatInternalService)
   private readonly chatInternalService: ChatInternalService;
 
+  @Autowired(BaseApplyService)
+  private readonly applyService: BaseApplyService;
+
   constructor() {
     this.registerFeature();
   }
@@ -524,6 +535,19 @@ export class AINativeBrowserContribution
     });
   }
 
+  registerEditorComponent(registry: EditorComponentRegistry): void {
+    registry.registerEditorSideWidget({
+      id: INLINE_DIFF_MANAGER_WIDGET_ID,
+      component: InlineDiffManager,
+      displaysOnResource: (resource) => {
+        if (this.applyService.getUriPendingCodeBlock(resource.uri)) {
+          return true;
+        }
+        return false;
+      },
+    });
+  }
+
   registerCommands(commands: CommandRegistry): void {
     commands.registerCommand(AI_INLINE_CHAT_VISIBLE, {
       execute: (value: boolean) => {

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

@@ -4,16 +4,15 @@ import { Autowired, Injectable } from '@opensumi/di';
 import {
   CancellationToken,
   ChatFeatureRegistryToken,
+  ChatMessageRole,
   ChatServiceToken,
   Disposable,
   Emitter,
-  IChatContent,
   IChatProgress,
   IDisposable,
   ILogger,
-  toDisposable,
+  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 {
@@ -26,6 +25,8 @@ import {
   IChatFollowup,
   IChatMessageStructure,
 } from '../../common';
+import { LLMContextService, LLMContextServiceToken } from '../../common/llm-context';
+import { ChatAgentPromptProvider } from '../../common/prompts/context-prompt-provider';
 import { IChatFeatureRegistry } from '../types';
 
 import { ChatService } from './chat.api.service';
@@ -36,6 +37,12 @@ export class ChatAgentService extends Disposable implements IChatAgentService {
 
   private defaultAgentId: string | undefined;
 
+  private initialUserMessageMap: Map<string, string> = new Map();
+
+  private shouldUpdateContext = false;
+
+  private contextVersion: number;
+
   private readonly _onDidChangeAgents = new Emitter<void>();
   readonly onDidChangeAgents = this._onDidChangeAgents.event;
 
@@ -45,6 +52,12 @@ export class ChatAgentService extends Disposable implements IChatAgentService {
   @Autowired(ILogger)
   logger: ILogger;
 
+  @Autowired(LLMContextServiceToken)
+  protected readonly contextService: LLMContextService;
+
+  @Autowired(ChatAgentPromptProvider)
+  protected readonly promptProvider: ChatAgentPromptProvider;
+
   @Autowired(ChatServiceToken)
   private aiChatService: ChatService;
 
@@ -54,6 +67,12 @@ export class ChatAgentService extends Disposable implements IChatAgentService {
   constructor() {
     super();
     this.addDispose(this._onDidChangeAgents);
+    this.addDispose(this.contextService.onDidContextFilesChangeEvent((event) => {
+      if (event.version !== this.contextVersion) {
+        this.contextVersion = event.version;
+        this.shouldUpdateContext = true;
+      }
+    }));
   }
 
   registerAgent(agent: IChatAgent): IDisposable {
@@ -120,6 +139,8 @@ export class ChatAgentService extends Disposable implements IChatAgentService {
     if (!data) {
       throw new Error(`No agent with id ${id}`);
     }
+
+    // system
     if (data.agent.metadata.systemPrompt) {
       history.unshift({
         role: ChatMessageRole.System,
@@ -127,10 +148,28 @@ export class ChatAgentService extends Disposable implements IChatAgentService {
       });
     }
 
+    // 发送第一条消息时携带初始 context
+    if (!this.initialUserMessageMap.has(id)) {
+      this.initialUserMessageMap.set(id, request.message);
+      const rawMessage = request.message;
+      request.message = this.provideContextMessage(rawMessage);
+    }
+
+    if (this.shouldUpdateContext) {
+      request.message = this.provideContextMessage(request.message);
+      this.shouldUpdateContext = false;
+    }
+
     const result = await data.agent.invoke(request, progress, history, token);
     return result;
   }
 
+  private provideContextMessage(message: string) {
+    const context = this.contextService.serialize();
+    const fullMessage = this.promptProvider.provideContextPrompt(context, message);
+    return fullMessage;
+  }
+
   populateChatInput(id: string, message: IChatMessageStructure) {
     this.aiChatService.sendMessage({
       ...message,

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

@@ -9,6 +9,7 @@ import {
   IStorage,
   STORAGE_NAMESPACE,
   StorageProvider,
+  debounce,
 } from '@opensumi/ide-core-common';
 import { ChatMessageRole, IChatMessage, IHistoryChatMessage } from '@opensumi/ide-core-common/lib/types/ai-native';
 
@@ -89,6 +90,7 @@ 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();
   }
@@ -100,6 +102,7 @@ export class ChatManagerService extends Disposable {
   startSession() {
     const model = new ChatModel();
     this.#sessionModels.set(model.sessionId, model);
+    this.listenSession(model);
     return model;
   }
 
@@ -196,6 +199,15 @@ 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

@@ -1,4 +1,4 @@
-import { Autowired, INJECTOR_TOKEN, Injectable, Injector } from '@opensumi/di';
+import { Injectable } from '@opensumi/di';
 import {
   Disposable,
   Emitter,
@@ -8,8 +8,6 @@ import {
   IChatProgress,
   IChatToolContent,
   IChatTreeData,
-  ILogger,
-  memoize,
   uuid,
 } from '@opensumi/ide-core-common';
 import { MarkdownString, isMarkdownString } from '@opensumi/monaco-editor-core/esm/vs/base/common/htmlContent';
@@ -274,13 +272,18 @@ export class ChatRequestModel implements IChatRequestModel {
 export class ChatModel extends Disposable implements IChatModel {
   private static requestIdPool = 0;
 
-  constructor(initParams?: { sessionId?: string; history?: MsgHistoryManager; requests?: ChatRequestModel[] }) {
+  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]));
     }
+
   }
 
   #sessionId: string;
@@ -300,9 +303,11 @@ export class ChatModel extends Disposable implements IChatModel {
   readonly history: MsgHistoryManager;
 
   addRequest(message: IChatRequestMessage): ChatRequestModel {
+    const msg = message;
+
     const requestId = `${this.sessionId}_request_${ChatModel.requestIdPool++}`;
-    const response = new ChatResponseModel(requestId, this, message.agentId);
-    const request = new ChatRequestModel(requestId, this, message, response);
+    const response = new ChatResponseModel(requestId, this, msg.agentId);
+    const request = new ChatRequestModel(requestId, this, msg, response);
 
     this.#requests.set(requestId, request);
     return request;

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

@@ -8,6 +8,7 @@ import {
   ChatServiceToken,
   Deferred,
   Disposable,
+  getOperatingSystemName,
   IAIBackService,
   IAIReporter,
   IApplicationService,
@@ -92,7 +93,7 @@ export class ChatProxyService extends Disposable {
               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>`,
+            `\n\n<user_info>\nThe user's OS is ${getOperatingSystemName()}. The absolute path of the user's workspace is ${this.appConfig.workspaceDir}.\n</user_info>`,
         },
         invoke: async (
           request: IChatAgentRequest,

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

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

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

@@ -5,7 +5,6 @@ import {
   AINativeConfigService,
   CommandService,
   getIcon,
-  useEventEffect,
   useInjectable,
   useUpdateOnEvent,
 } from '@opensumi/ide-core-browser';
@@ -42,8 +41,6 @@ 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';
@@ -82,17 +79,11 @@ 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[]>([]);
 
@@ -114,8 +105,6 @@ 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();
@@ -515,10 +504,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;
       }
@@ -667,32 +653,6 @@ 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}>
@@ -732,18 +692,6 @@ 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) =>
@@ -786,6 +734,8 @@ 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(() => {
@@ -806,6 +756,10 @@ 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({
@@ -894,23 +848,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/ChatHistory.tsx

@@ -2,10 +2,11 @@ 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;
@@ -162,22 +163,25 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
       (item: IChatHistoryItem) => (
         <div
           key={item.id}
-          className={cls('dm-chat-history-item', item.id === currentId ? 'dm-chat-history-item-selected' : '')}
+          className={cls(
+            styles['dm-chat-history-item'],
+            item.id === currentId ? styles['dm-chat-history-item-selected'] : '',
+          )}
           onClick={() => handleHistoryItemSelect(item)}
         >
-          <div className='dm-chat-history-item-content'>
+          <div className={styles['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='dm-chat-history-item-title'>
+              <span id={`dm-chat-history-item-title-${item.id}`} className={styles['dm-chat-history-item-title']}>
                 {item.title}
               </span>
             ) : (
               <Input
-                className='dm-chat-history-item-title'
+                className={styles['dm-chat-history-item-title']}
                 defaultValue={item.title}
                 ref={inputRef}
                 onPressEnter={(e: any) => {
@@ -187,7 +191,7 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
               />
             )}
           </div>
-          <div className='dm-chat-history-item-actions'>
+          <div className={styles['dm-chat-history-item-actions']}>
             {/* <EditOutlined
               title={localize('aiNative.operate.chatHistory.edit')}
               style={{ marginRight: 8 }}
@@ -198,7 +202,7 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
               }}
             /> */}
             <EnhanceIcon
-              className={cls('dm-chat-history-item-actions-delete', getIcon('delete'))}
+              className={cls(styles['dm-chat-history-item-actions-delete'], getIcon('delete'))}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -237,10 +241,10 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
             value={searchValue}
             onChange={handleSearchChange}
           />
-          <div className='dm-chat-history-list'>
+          <div className={styles['dm-chat-history-list']}>
             {groupedHistoryList.map((group) => (
               <div key={group.key} style={{ padding: '4px' }}>
-                <div className='dm-chat-history-time'>{group.key}</div>
+                <div className={styles['dm-chat-history-time']}>{group.key}</div>
                 {group.items.map(renderHistoryItem)}
               </div>
             ))}
@@ -253,11 +257,11 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
     const getPopupContainer = useCallback((triggerNode: HTMLElement) => triggerNode.parentElement!, []);
 
     return (
-      <div className={cls('dm-chat-history-header', className)}>
-        <div className='dm-chat-history-header-title'>
+      <div className={cls(styles['dm-chat-history-header'], className)}>
+        <div className={styles['dm-chat-history-header-title']}>
           <span>{title}</span>
         </div>
-        <div className='dm-chat-history-header-actions'>
+        <div className={styles['dm-chat-history-header-actions']}>
           <Popover
             id='dm-chat-history-header-actions-history'
             content={renderHistory()}
@@ -267,10 +271,12 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
             getPopupContainer={getPopupContainer}
           >
             <div
-              className='dm-chat-history-header-actions-history'
+              className={styles['dm-chat-history-header-actions-history']}
               title={localize('aiNative.operate.chatHistory.title')}
             >
-              <EnhanceIcon className={cls('dm-chat-history-header-actions-history', 'codicon codicon-history')} />
+              <EnhanceIcon
+                className={cls(styles['dm-chat-history-header-actions-history'], 'codicon codicon-history')}
+              />
             </div>
           </Popover>
           <Popover
@@ -279,7 +285,7 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
             title={localize('aiNative.operate.newChat.title')}
           >
             <EnhanceIcon
-              className={cls('dm-chat-history-header-actions-new', getIcon('plus'))}
+              className={cls(styles['dm-chat-history-header-actions-new'], getIcon('plus'))}
               onClick={handleNewChat}
             />
           </Popover>