@opensumi/ide-ai-native 3.7.2-next-1739848467.0 → 3.7.2-next-1739945875.0

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>
+  );
+});

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

@@ -0,0 +1,135 @@
+import Collapse, { Panel } from 'rc-collapse';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+
+import 'rc-collapse/assets/index.css';
+
+import { Icon } from '@opensumi/ide-components/lib/icon/icon';
+import { Popover, getIcon } from '@opensumi/ide-core-browser/lib/components';
+import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
+import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks/injectable-hooks';
+import { AppConfig } from '@opensumi/ide-core-browser/lib/react-providers/config-provider';
+import { LabelService } from '@opensumi/ide-core-browser/lib/services/label-service';
+import { localize } from '@opensumi/ide-core-common/lib/localize';
+import { Event, URI } from '@opensumi/ide-core-common/lib/utils';
+import { WorkbenchEditorService } from '@opensumi/ide-editor/lib/browser/types';
+
+import { FileContext, LLMContextService, LLMContextServiceToken } from '../../../common/llm-context';
+
+import { ContextSelector } from './ContextSelector';
+import styles from './style.module.less';
+
+export const ChatContext = memo(() => {
+  const [addedFiles, updateAddedFiles] = useState<FileContext[]>([]);
+  const [contextOverlay, toggleContextOverlay] = useState(false);
+
+  const labelService = useInjectable<LabelService>(LabelService);
+  const appConfig = useInjectable<AppConfig>(AppConfig);
+  const workbenchEditorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
+  const contextService = useInjectable<LLMContextService>(LLMContextServiceToken);
+
+  useEffect(() => {
+    const disposable = Event.debounce(
+      contextService.onDidContextFilesChangeEvent,
+      (_, e) => e!,
+      50,
+    )((files) => {
+      if (files) {
+        updateAddedFiles(files);
+      }
+    }, contextService);
+
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  const openContextOverlay = useCallback(() => {
+    toggleContextOverlay(true);
+  }, [addedFiles]);
+
+  const onDidSelect = useCallback((uri: URI) => {
+    contextService.addFileToContext(uri, undefined, true);
+  }, []);
+
+  const onDidDeselect = useCallback((uri: URI) => {
+    contextService.removeFileFromContext(uri);
+  }, []);
+
+  const onDidClickFile = useCallback((uri: URI) => {
+    workbenchEditorService.open(uri);
+  }, []);
+
+  const onDidCleanFiles = useCallback((e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    contextService.cleanFileContext();
+  }, []);
+
+  const onDidRemoveFile = useCallback((e, uri: URI) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onDidDeselect(uri);
+  }, []);
+
+  return (
+    <div className={styles.chat_context}>
+      <Collapse
+        // @ts-ignore
+        expandIcon={({ isActive }) => (isActive ? <Icon icon='down' /> : <Icon icon='right' />)}
+        defaultActiveKey={['context-panel']}
+        onChange={() => {}}
+      >
+        <Panel
+          header={
+            <div className={styles.context_header}>
+              <h3 className={styles.chat_context_title}>Context</h3>
+              <Popover
+                overlayClassName={styles.popover_icon}
+                id={'ai-context-header-clear'}
+                title={localize('aiNative.operate.clear.title')}
+              >
+                <EnhanceIcon
+                  wrapperClassName={styles.action_btn}
+                  className={getIcon('clear')}
+                  onClick={onDidCleanFiles}
+                  tabIndex={0}
+                  role='button'
+                  ariaLabel={localize('aiNative.operate.clear.title')}
+                />
+              </Popover>
+            </div>
+          }
+          key='context-panel'
+        >
+          <div className={styles.file_list}>
+            {addedFiles.map((file) => (
+              <div className={styles.selected_item} key={file.uri.toString()} onClick={() => onDidClickFile(file.uri)}>
+                <Icon iconClass={labelService.getIcon(file.uri)} />
+                <span className={styles.basename}>
+                  {file.uri.path.base}
+                  {file.selection ? ` (${file.selection[0]}-${file.selection[1]})` : ''}
+                </span>
+                <span className={styles.dir}>
+                  {URI.file(appConfig.workspaceDir).relative(file.uri.parent)?.toString()}
+                </span>
+                <Icon icon='close' className={styles.close_icon} onClick={(e) => onDidRemoveFile(e, file.uri)} />
+              </div>
+            ))}
+          </div>
+          <div className={styles.add_context} onClick={openContextOverlay}>
+            <Icon icon='add' />
+            Add Files
+          </div>
+        </Panel>
+      </Collapse>
+      {contextOverlay && (
+        <ContextSelector
+          onDidClose={() => toggleContextOverlay(false)}
+          onDidDeselect={onDidDeselect}
+          onDidSelect={onDidSelect}
+          addedFiles={addedFiles}
+        />
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,189 @@
+.chat_context {
+  position: relative;
+  margin-bottom: 10px;
+  background-color: var(--design-chatInput-background);
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid var(--design-borderColor);
+
+  :global(.rc-collapse) {
+    background-color: transparent !important;
+    border-radius: none !important;
+    border: none !important;
+  }
+
+  :global(.rc-collapse-title) {
+    flex: 1 !important;
+    line-height: 22px;
+  }
+
+  :global(.rc-collapse-expand-icon) {
+    line-height: 1;
+  }
+
+  :global(.rc-collapse-header) {
+    padding: 0px !important;
+    line-height: 1 !important;
+  }
+
+  :global(.rc-collapse-content) {
+    padding: 0px !important;
+    background-color: transparent !important;
+  }
+
+  .context_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .chat_context_title {
+      font-weight: 600;
+      font-size: 11px;
+      margin-bottom: 0px;
+      color: var(--descriptionForeground);
+    }
+  }
+
+  .context_selector {
+    position: absolute;
+    left: 0px;
+    bottom: 40px;
+    background-color: var(--design-container-background);
+    padding: 10px;
+    width: 100%;
+    padding: 0px;
+    border-radius: 4px;
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+    box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
+      0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
+
+    .context_list {
+      font-size: 12px;
+      overflow-y: auto;
+
+      .list_desc {
+        margin: 0px 10px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        color: var(--descriptionForeground);
+      }
+
+      .candidate_file {
+        padding: 0px 10px;
+        display: flex;
+        align-items: center;
+        height: 24px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--button-hoverBackground);
+        }
+
+        .basename {
+          color: var(--foreground);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-left: 5px;
+        }
+
+        .dir {
+          color: var(--descriptionForeground);
+          margin-left: 15px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+
+      .active {
+        background-color: var(--editor-background);
+        color: var(--foreground);
+      }
+    }
+
+    .context_search_layer {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: var(--inputOption-hoverBackground);
+    }
+  }
+
+  .file_list {
+    margin-top: 5px;
+    max-height: 300px;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .selected_item {
+      display: flex;
+      align-items: center;
+      font-size: 11px;
+      margin-right: 5px;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0px 4px;
+      margin-bottom: 4px;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      .close_icon {
+        font-size: 12px !important;
+        margin-left: auto;
+      }
+
+      :global(.kt-icon) {
+        display: flex;
+        font-size: 11px;
+      }
+
+      .basename {
+        margin-left: 4px;
+        color: var(--editor-foreground);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 75%;
+
+        &:hover {
+          color: var(--badge-foreground);
+        }
+      }
+
+      .dir {
+        color: var(--descriptionForeground);
+        margin-left: 15px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .add_context {
+    display: inline-flex;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    font-size: 11px;
+    margin-right: 5px;
+    height: 24px;
+    margin-top: 10px;
+    align-items: center;
+    user-select: none;
+    transition: all 0.2s;
+    color: var(--design-text-foreground);
+    padding: 0px 5px;
+
+    &:hover {
+      border-color: var(--kt-selectOption-activeBorder);
+    }
+  }
+}

package/src/browser/components/ChatInput.tsx

@@ -15,6 +15,7 @@ import { ChatProxyService } from '../chat/chat-proxy.service';
 import { ChatFeatureRegistry } from '../chat/chat.feature.registry';
 import { IChatSlashCommandItem } from '../types';
 
+import { ChatContext } from './ChatContext';
 import styles from './components.module.less';
 
 const INSTRUCTION_BOTTOM = 8;