@opensumi/ide-ai-native 3.7.2-next-1739859371.0 → 3.7.2-next-1740013940.0

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

@@ -73,7 +73,10 @@ import {
   AI_CHAT_VIEW_ID,
   AI_MENU_BAR_DEBUG_TOOLBAR,
   ChatProxyServiceToken,
+  ISumiMCPServerBackend,
+  SumiMCPServerProxyServicePath,
 } from '../common';
+import { MCPServerDescription } from '../common/mcp-server-manager';
 
 import { ChatProxyService } from './chat/chat-proxy.service';
 import { AIChatView } from './chat/chat.view';
@@ -97,10 +100,13 @@ import {
   IChatFeatureRegistry,
   IChatRenderRegistry,
   IIntelligentCompletionsRegistry,
+  IMCPServerRegistry,
   IProblemFixProviderRegistry,
   IRenameCandidatesProviderRegistry,
   IResolveConflictRegistry,
   ITerminalProviderRegistry,
+  MCPServerContribution,
+  TokenMCPServerRegistry,
 } from './types';
 import { InlineChatEditorController } from './widget/inline-chat/inline-chat-editor.controller';
 import { InlineChatFeatureRegistry } from './widget/inline-chat/inline-chat.feature.registry';
@@ -145,6 +151,12 @@ export class AINativeBrowserContribution
   @Autowired(AINativeCoreContribution)
   private readonly contributions: ContributionProvider<AINativeCoreContribution>;
 
+  @Autowired(MCPServerContribution)
+  private readonly mcpServerContributions: ContributionProvider<MCPServerContribution>;
+
+  @Autowired(TokenMCPServerRegistry)
+  private readonly mcpServerRegistry: IMCPServerRegistry;
+
   @Autowired(InlineChatFeatureRegistryToken)
   private readonly inlineChatFeatureRegistry: InlineChatFeatureRegistry;
 
@@ -208,6 +220,9 @@ export class AINativeBrowserContribution
   @Autowired(CodeActionSingleHandler)
   private readonly codeActionSingleHandler: CodeActionSingleHandler;
 
+  @Autowired(SumiMCPServerProxyServicePath)
+  private readonly sumiMCPServerBackendProxy: ISumiMCPServerBackend;
+
   @Autowired(WorkbenchEditorService)
   private readonly workbenchEditorService: WorkbenchEditorServiceImpl;
 
@@ -279,7 +294,7 @@ export class AINativeBrowserContribution
 
   onDidStart() {
     runWhenIdle(() => {
-      const { supportsRenameSuggestions, supportsInlineChat } = this.aiNativeConfigService.capabilities;
+      const { supportsRenameSuggestions, supportsInlineChat, supportsMCP } = this.aiNativeConfigService.capabilities;
       const prefChatVisibleType = this.preferenceService.getValid(AINativeSettingSectionsId.ChatVisibleType);
 
       if (prefChatVisibleType === 'always') {
@@ -295,6 +310,19 @@ export class AINativeBrowserContribution
       if (supportsInlineChat) {
         this.codeActionSingleHandler.load();
       }
+
+      if (supportsMCP) {
+        // 初始化内置 MCP Server
+        this.sumiMCPServerBackendProxy.initBuiltinMCPServer();
+
+        // 从 preferences 获取并初始化外部 MCP Servers
+        const mcpServers = this.preferenceService.getValid<MCPServerDescription[]>(
+          AINativeSettingSectionsId.MCPServers,
+        );
+        if (mcpServers && mcpServers.length > 0) {
+          this.sumiMCPServerBackendProxy.initExternalMCPServers(mcpServers);
+        }
+      }
     });
   }
 
@@ -308,6 +336,12 @@ export class AINativeBrowserContribution
       contribution.registerTerminalProvider?.(this.terminalProviderRegistry);
       contribution.registerIntelligentCompletionFeature?.(this.intelligentCompletionsRegistry);
       contribution.registerProblemFixFeature?.(this.problemFixProviderRegistry);
+      contribution.registerChatAgentPromptProvider?.();
+    });
+
+    // 注册 Opensumi 框架提供的 MCP Server Tools 能力 (此时的 Opensumi 作为 MCP Server)
+    this.mcpServerContributions.getContributions().forEach((contribution) => {
+      contribution.registerMCPServer(this.mcpServerRegistry);
     });
   }
 
@@ -379,6 +413,48 @@ export class AINativeBrowserContribution
       });
     }
 
+    // Register language model API key settings
+    if (this.aiNativeConfigService.capabilities.supportsCustomLLMSettings) {
+      registry.registerSettingSection(AI_NATIVE_SETTING_GROUP_ID, {
+        title: localize('preference.ai.native.llm.apiSettings.title'),
+        preferences: [
+          {
+            id: AINativeSettingSectionsId.LLMModelSelection,
+            localized: 'preference.ai.native.llm.model.selection',
+          },
+          {
+            id: AINativeSettingSectionsId.DeepseekApiKey,
+            localized: 'preference.ai.native.deepseek.apiKey',
+          },
+          {
+            id: AINativeSettingSectionsId.AnthropicApiKey,
+            localized: 'preference.ai.native.anthropic.apiKey',
+          },
+          {
+            id: AINativeSettingSectionsId.OpenaiApiKey,
+            localized: 'preference.ai.native.openai.apiKey',
+          },
+          {
+            id: AINativeSettingSectionsId.OpenaiBaseURL,
+            localized: 'preference.ai.native.openai.baseURL',
+          },
+        ],
+      });
+    }
+
+    // Register MCP server settings
+    if (this.aiNativeConfigService.capabilities.supportsMCP) {
+      registry.registerSettingSection(AI_NATIVE_SETTING_GROUP_ID, {
+        title: localize('preference.ai.native.mcp.settings.title'),
+        preferences: [
+          {
+            id: AINativeSettingSectionsId.MCPServers,
+            localized: 'preference.ai.native.mcp.servers',
+          },
+        ],
+      });
+    }
+
     if (this.aiNativeConfigService.capabilities.supportsInlineChat) {
       registry.registerSettingSection(AI_NATIVE_SETTING_GROUP_ID, {
         title: localize('preference.ai.native.inlineChat.title'),

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

@@ -6,6 +6,7 @@ import {
   IChatComponent,
   IChatMarkdownContent,
   IChatProgress,
+  IChatToolContent,
   IChatTreeData,
   ILogger,
   memoize,
@@ -26,7 +27,12 @@ import {
 import { MsgHistoryManager } from '../model/msg-history-manager';
 import { IChatSlashCommandItem } from '../types';
 
-export type IChatProgressResponseContent = IChatMarkdownContent | IChatAsyncContent | IChatTreeData | IChatComponent;
+export type IChatProgressResponseContent =
+  | IChatMarkdownContent
+  | IChatAsyncContent
+  | IChatTreeData
+  | IChatComponent
+  | IChatToolContent;
 
 @Injectable({ multiple: true })
 export class ChatResponseModel extends Disposable {
@@ -81,8 +87,8 @@ export class ChatResponseModel extends Disposable {
   }
 
   updateContent(progress: IChatProgress, quiet?: boolean): void {
+    const responsePartLength = this.#responseParts.length - 1;
     if (progress.kind === 'content' || progress.kind === 'markdownContent') {
-      const responsePartLength = this.#responseParts.length - 1;
       const lastResponsePart = this.#responseParts[responsePartLength];
 
       if (!lastResponsePart || lastResponsePart.kind !== 'markdownContent') {
@@ -120,11 +126,20 @@ export class ChatResponseModel extends Disposable {
         }
         this.#updateResponseText(quiet);
       });
-    } else if (progress.kind === 'treeData') {
+    } else if (progress.kind === 'treeData' || progress.kind === 'component') {
       this.#responseParts.push(progress);
       this.#updateResponseText(quiet);
-    } else if (progress.kind === 'component') {
-      this.#responseParts.push(progress);
+    } else if (progress.kind === 'toolCall') {
+      const find = this.#responseParts.find(
+        (item) => item.kind === 'toolCall' && item.content.id === progress.content.id,
+      );
+      if (find) {
+        // @ts-ignore
+        find.content = progress.content;
+        // this.#responseParts[responsePartLength] = find;
+      } else {
+        this.#responseParts.push(progress);
+      }
       this.#updateResponseText(quiet);
     }
   }
@@ -141,6 +156,9 @@ export class ChatResponseModel extends Disposable {
         if (part.kind === 'component') {
           return '';
         }
+        if (part.kind === 'toolCall') {
+          return part.content.function.name;
+        }
         return part.content.value;
       })
       .join('\n\n');
@@ -258,7 +276,7 @@ export class ChatModel extends Disposable implements IChatModel {
 
     const { kind } = progress;
 
-    const basicKind = ['content', 'markdownContent', 'asyncContent', 'treeData', 'component'];
+    const basicKind = ['content', 'markdownContent', 'asyncContent', 'treeData', 'component', 'toolCall'];
 
     if (basicKind.includes(kind)) {
       request.response.updateContent(progress, quiet);

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

@@ -1,18 +1,23 @@
 import { Autowired, Injectable } from '@opensumi/di';
+import { PreferenceService } from '@opensumi/ide-core-browser';
 import {
   AIBackSerivcePath,
   CancellationToken,
+  ChatAgentViewServiceToken,
   ChatFeatureRegistryToken,
   ChatServiceToken,
   Deferred,
   Disposable,
   IAIBackService,
   IAIReporter,
+  IApplicationService,
   IChatProgress,
   uuid,
 } from '@opensumi/ide-core-common';
+import { AINativeSettingSectionsId } from '@opensumi/ide-core-common/lib/settings/ai-native';
 import { IChatMessage } from '@opensumi/ide-core-common/lib/types/ai-native';
 import { MonacoCommandRegistry } from '@opensumi/ide-editor/lib/browser/monaco-contrib/command/command.service';
+import { IMessageService } from '@opensumi/ide-overlay';
 import { listenReadable } from '@opensumi/ide-utils/lib/stream';
 
 import {
@@ -22,6 +27,8 @@ import {
   IChatAgentService,
   IChatAgentWelcomeMessage,
 } from '../../common';
+import { ChatToolRender } from '../components/ChatToolRender';
+import { IChatAgentViewService } from '../types';
 
 import { ChatService } from './chat.api.service';
 import { ChatFeatureRegistry } from './chat.feature.registry';
@@ -52,9 +59,27 @@ export class ChatProxyService extends Disposable {
   @Autowired(IAIReporter)
   private readonly aiReporter: IAIReporter;
 
+  @Autowired(ChatAgentViewServiceToken)
+  private readonly chatAgentViewService: IChatAgentViewService;
+
+  @Autowired(PreferenceService)
+  private readonly preferenceService: PreferenceService;
+
+  @Autowired(IApplicationService)
+  private readonly applicationService: IApplicationService;
+
+  @Autowired(IMessageService)
+  private readonly messageService: IMessageService;
+
   private chatDeferred: Deferred<void> = new Deferred<void>();
 
   public registerDefaultAgent() {
+    this.chatAgentViewService.registerChatComponent({
+      id: 'toolCall',
+      component: ChatToolRender,
+      initialProps: {},
+    });
+
     this.addDispose(
       this.chatAgentService.registerAgent({
         id: ChatProxyService.AGENT_ID,
@@ -79,12 +104,28 @@ export class ChatProxyService extends Disposable {
             }
           }
 
+          const model = this.preferenceService.get<string>(AINativeSettingSectionsId.LLMModelSelection);
+          let apiKey: string = '';
+          let baseURL: string = '';
+          if (model === 'deepseek') {
+            apiKey = this.preferenceService.get<string>(AINativeSettingSectionsId.DeepseekApiKey, '');
+          } else if (model === 'openai') {
+            apiKey = this.preferenceService.get<string>(AINativeSettingSectionsId.OpenaiApiKey, '');
+            baseURL = this.preferenceService.get<string>(AINativeSettingSectionsId.OpenaiBaseURL, '');
+          } else {
+            apiKey = this.preferenceService.get<string>(AINativeSettingSectionsId.AnthropicApiKey, '');
+          }
+
           const stream = await this.aiBackService.requestStream(
             prompt,
             {
               requestId: request.requestId,
               sessionId: request.sessionId,
               history: this.aiChatService.getHistoryMessages(),
+              clientId: this.applicationService.clientId,
+              apiKey,
+              model,
+              baseURL,
             },
             token,
           );
@@ -97,6 +138,7 @@ export class ChatProxyService extends Disposable {
               this.chatDeferred.resolve();
             },
             onError: (error) => {
+              this.messageService.error(error.message);
               this.aiReporter.end(request.sessionId + '_' + request.requestId, {
                 message: error.message,
                 success: false,

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

@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { MessageList } from 'react-chat-elements';
 
-import { getIcon, useInjectable, useUpdateOnEvent } from '@opensumi/ide-core-browser';
+import {
+  AINativeConfigService,
+  getIcon,
+  useEventEffect,
+  useInjectable,
+  useUpdateOnEvent,
+} from '@opensumi/ide-core-browser';
 import { Popover, PopoverPosition } from '@opensumi/ide-core-browser/lib/components';
 import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
 import {
@@ -18,13 +24,23 @@ import {
   IAIReporter,
   IChatComponent,
   IChatContent,
+  MessageType,
   localize,
   uuid,
 } from '@opensumi/ide-core-common';
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
+import { IDialogService } from '@opensumi/ide-overlay';
 
 import 'react-chat-elements/dist/main.css';
-import { AI_CHAT_VIEW_ID, IChatAgentService, IChatInternalService, IChatMessageStructure } from '../../common';
+import {
+  AI_CHAT_VIEW_ID,
+  IChatAgentService,
+  IChatInternalService,
+  IChatMessageStructure,
+  TokenMCPServerProxyService,
+} from '../../common';
+import { LLMContextService, LLMContextServiceToken } from '../../common/llm-context';
+import { ChatContext } from '../components/ChatContext';
 import { CodeBlockWrapperInput } from '../components/ChatEditor';
 import { ChatInput } from '../components/ChatInput';
 import { ChatMarkdown } from '../components/ChatMarkdown';
@@ -32,7 +48,9 @@ import { ChatNotify, ChatReply } from '../components/ChatReply';
 import { SlashCustomRender } from '../components/SlashCustomRender';
 import { MessageData, createMessageByAI, createMessageByUser } from '../components/utils';
 import { WelcomeMessage } from '../components/WelcomeMsg';
-import { ChatViewHeaderRender, TSlashCommandCustomRender } from '../types';
+import { MCPServerProxyService } from '../mcp/mcp-server-proxy.service';
+import { MCPToolsDialog } from '../mcp/mcp-tools-dialog.view';
+import { ChatAgentPromptProvider, ChatViewHeaderRender, TSlashCommandCustomRender } from '../types';
 
 import { ChatRequestModel, ChatSlashCommandItemModel } from './chat-model';
 import { ChatProxyService } from './chat-proxy.service';
@@ -41,7 +59,6 @@ import { ChatFeatureRegistry } from './chat.feature.registry';
 import { ChatInternalService } from './chat.internal.service';
 import styles from './chat.module.less';
 import { ChatRenderRegistry } from './chat.render.registry';
-
 const SCROLL_CLASSNAME = 'chat_scroll';
 
 interface TDispatchAction {
@@ -56,10 +73,16 @@ 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 layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
+  const mcpServerProxyService = useInjectable<MCPServerProxyService>(TokenMCPServerProxyService);
   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 [shortcutCommands, setShortcutCommands] = React.useState<ChatSlashCommandItemModel[]>([]);
 
@@ -81,6 +104,7 @@ 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);
 
   React.useEffect(() => {
     const featureSlashCommands = chatFeatureRegistry.getAllShortcutSlashCommand();
@@ -478,7 +502,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;
       }
@@ -626,6 +653,25 @@ export const AIChatView = () => {
     };
   }, [aiChatService.sessionModel]);
 
+  useEventEffect(
+    mcpServerProxyService.onChangeMCPServers,
+    () => {
+      mcpServerProxyService.getAllMCPTools().then((tools) => {
+        setMcpToolsCount(tools.length);
+      });
+    },
+    [mcpServerProxyService],
+  );
+
+  const handleShowMCPTools = React.useCallback(async () => {
+    const tools = await mcpServerProxyService.getAllMCPTools();
+    dialogService.open({
+      message: <MCPToolsDialog tools={tools} />,
+      type: MessageType.Empty,
+      buttons: ['关闭'],
+    });
+  }, [mcpServerProxyService, dialogService]);
+
   return (
     <div id={styles.ai_chat_view}>
       <div className={styles.header_container}>
@@ -643,6 +689,7 @@ export const AIChatView = () => {
             />
           </div>
           <div className={styles.chat_input_wrap}>
+            <ChatContext />
             <div className={styles.header_operate}>
               <div className={styles.header_operate_left}>
                 {shortcutCommands.map((command) => (
@@ -657,7 +704,13 @@ export const AIChatView = () => {
                   </Popover>
                 ))}
               </div>
-              <div className={styles.header_operate_right}></div>
+              <div className={styles.header_operate_right}>
+                {aiNativeConfigService.capabilities.supportsMCP && (
+                  <div className={styles.tag} onClick={handleShowMCPTools}>
+                    {`MCP Tools: ${mcpToolsCount}`}
+                  </div>
+                )}
+              </div>
             </div>
             <ChatInputWrapperRender
               onSend={(value, agentId, command) =>

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

@@ -0,0 +1,177 @@
+import cls from 'classnames';
+import { debounce } from 'lodash';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+
+import { ClickOutside } from '@opensumi/ide-components/lib/click-outside';
+import { AppConfig, LabelService } from '@opensumi/ide-core-browser';
+import { Icon, Input, Scrollbars } from '@opensumi/ide-core-browser/lib/components';
+import { RecentFilesManager } from '@opensumi/ide-core-browser/lib/quick-open/recent-files';
+import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks/injectable-hooks';
+import { FileSearchServicePath, IFileSearchService } from '@opensumi/ide-file-search/lib/common/file-search';
+import { URI } from '@opensumi/ide-utils';
+
+import { FileContext } from '../../../common/llm-context';
+
+import styles from './style.module.less';
+
+interface CandidateFileProps {
+  uri: URI;
+  active: boolean;
+  selected: boolean;
+  onDidSelect: (val: URI) => void;
+  onDidDeselect: (val: URI) => void;
+}
+
+const CandidateFile = memo(({ uri, active, selected, onDidSelect, onDidDeselect }: CandidateFileProps) => {
+  const labelService = useInjectable<LabelService>(LabelService);
+  const appConfig = useInjectable<AppConfig>(AppConfig);
+  const itemsRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (active && itemsRef.current) {
+      const scrollBehavior: ScrollIntoViewOptions = {
+        behavior: 'instant',
+        block: 'end',
+      };
+      itemsRef.current.scrollIntoView(scrollBehavior);
+    }
+  }, [active, itemsRef.current]);
+
+  return (
+    <div
+      className={cls(styles.candidate_file, active && styles.active)}
+      ref={(ele) => (itemsRef.current = ele)}
+      onClick={() => (selected ? onDidDeselect(uri) : onDidSelect(uri))}
+    >
+      <Icon iconClass={labelService.getIcon(uri)} />
+      <span className={styles.basename}>{uri.path.base}</span>
+      <span className={styles.dir}>{URI.file(appConfig.workspaceDir).relative(uri.parent)?.toString()}</span>
+      {selected && <Icon icon='check' style={{ marginLeft: 'auto', color: 'var(--editorGutter-addedBackground)' }} />}
+    </div>
+  );
+});
+
+interface ContextSelectorProps {
+  addedFiles: FileContext[];
+  onDidSelect: (val: URI) => void;
+  onDidDeselect: (val: URI) => void;
+  onDidClose: () => void;
+}
+
+export const ContextSelector = memo(({ addedFiles, onDidDeselect, onDidSelect, onDidClose }: ContextSelectorProps) => {
+  const [candidateFiles, updateCandidateFiles] = useState<URI[]>([]);
+  const [activeFile, setActiveFile] = useState<URI | null>(null);
+  const [searching, toggleSearching] = useState(false);
+  const [searchResults, updateSearchResults] = useState<URI[]>([]);
+
+  const recentFilesManager: RecentFilesManager = useInjectable(RecentFilesManager);
+  const appConfig = useInjectable<AppConfig>(AppConfig);
+  const searchService = useInjectable<IFileSearchService>(FileSearchServicePath);
+
+  const container = useRef<HTMLDivElement | null>();
+
+  useEffect(() => {
+    if (candidateFiles.length === 0) {
+      recentFilesManager.getMostRecentlyOpenedFiles().then((files) => {
+        const addedUris = addedFiles.map((val) => val.uri);
+        const recentFiles = files.filter((file) => !addedUris.includes(new URI(file))).map((file) => new URI(file));
+        updateCandidateFiles(recentFiles);
+        setActiveFile(recentFiles[0] || null);
+      });
+    }
+  }, [addedFiles]);
+
+  const onDidInput = useCallback(
+    debounce((ev) => {
+      if (ev.target.value.trim() === '') {
+        updateSearchResults([]);
+        setActiveFile(candidateFiles[0]);
+        return;
+      }
+
+      toggleSearching(true);
+      searchService
+        .find(ev.target.value, {
+          rootUris: [appConfig.workspaceDir],
+          limit: 200,
+          useGitIgnore: true,
+          noIgnoreParent: true,
+          fuzzyMatch: true,
+        })
+        .then((res) => {
+          const results = res.map((val) => new URI(val));
+          updateSearchResults(results);
+          setActiveFile(results[0]);
+        })
+        .finally(() => {
+          toggleSearching(false);
+        });
+    }, 500),
+    [],
+  );
+
+  const onDidKeyDown = useCallback(
+    (event) => {
+      const { key } = event;
+      if (key === 'Escape') {
+        onDidClose();
+        return;
+      }
+
+      if (key === 'Enter' && activeFile) {
+        onDidSelect(activeFile);
+        return;
+      }
+
+      const validKeys = ['ArrowUp', 'ArrowDown'];
+
+      if (!validKeys.includes(key)) {
+        return;
+      }
+
+      const files = searchResults.length > 0 ? searchResults : candidateFiles;
+
+      if (files.length === 0) {
+        return;
+      }
+
+      const currentIndex = files.indexOf(activeFile!);
+      const safeIndex = currentIndex === -1 ? 0 : currentIndex;
+      const lastIndex = files.length - 1;
+
+      const nextIndex =
+        key === 'ArrowUp' ? (safeIndex > 0 ? safeIndex - 1 : lastIndex) : safeIndex < lastIndex ? safeIndex + 1 : 0;
+
+      setActiveFile(files[nextIndex]);
+    },
+    [activeFile, searchResults, candidateFiles],
+  );
+
+  return (
+    <ClickOutside mouseEvents={['click', 'contextmenu']} onOutsideClick={() => onDidClose()}>
+      <div className={styles.context_selector} onKeyDown={onDidKeyDown} tabIndex={-1}>
+        <div style={{ padding: '4px' }}>
+          <Input placeholder='Search files by name' autoFocus onInput={onDidInput} />
+        </div>
+        <Scrollbars forwardedRef={(el) => (el ? (container.current = el.ref) : null)}>
+          <div className={styles.context_list}>
+            {searching && <div className={styles.context_search_layer} />}
+            <span className={styles.list_desc}>
+              {searchResults.length > 0 ? 'Search Results' : 'Recent Opened Files'}
+            </span>
+            {(searchResults.length > 0 ? searchResults : candidateFiles).map((file) => (
+              <CandidateFile
+                key={file.toString()}
+                uri={file}
+                active={activeFile === file}
+                onDidSelect={onDidSelect}
+                onDidDeselect={onDidDeselect}
+                selected={!!addedFiles.find((val) => val.uri.isEqual(file))}
+              />
+            ))}
+          </div>
+        </Scrollbars>
+      </div>
+    </ClickOutside>
+  );
+});