@opensumi/ide-ai-native 3.8.3-next-1741917543.0 → 3.8.3-next-1741920696.0

package/src/browser/components/mention-input/mention-item.tsx

@@ -0,0 +1,24 @@
+import cls from 'classnames';
+import * as React from 'react';
+
+import { Icon, getIcon } from '@opensumi/ide-core-browser/lib/components';
+
+import styles from './mention-input.module.less';
+import { MentionItem as MentionItemType } from './types';
+
+interface MentionItemProps {
+  item: MentionItemType;
+  isActive: boolean;
+  onClick: (item: MentionItemType) => void;
+}
+
+export const MentionItem: React.FC<MentionItemProps> = ({ item, isActive, onClick }) => (
+  <div className={`${styles.mention_item} ${isActive ? styles.active : ''}`} onClick={() => onClick(item)}>
+    <div className={styles.mention_item_left}>
+      <Icon className={cls(styles.mention_item_icon, item.icon)} />
+      <span className={styles.mention_item_text}>{item.text}</span>
+      <span className={styles.mention_item_description}>{item.description}</span>
+    </div>
+    {item.getItems && <Icon className={cls(styles.mention_item_right, getIcon('arrowright'))} />}
+  </div>
+);

package/src/browser/components/mention-input/mention-panel.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import styles from './mention-input.module.less';
+import { MentionItem } from './mention-item';
+import { MentionItem as MentionItemType, MentionPosition } from './types';
+
+interface MentionPanelProps {
+  items: MentionItemType[];
+  activeIndex: number;
+  onSelectItem: (item: MentionItemType, isTriggerByClick?: boolean) => void;
+  position: MentionPosition;
+  filter: string;
+  visible: boolean;
+  level: number;
+  loading?: boolean;
+}
+
+export const MentionPanel: React.FC<MentionPanelProps> = ({
+  items,
+  activeIndex,
+  onSelectItem,
+  position,
+  filter,
+  visible,
+  level,
+  loading = false,
+}) => {
+  const panelRef = React.useRef<HTMLDivElement>(null);
+
+  // 当活动项改变时滚动到可见区域
+  React.useEffect(() => {
+    if (visible && panelRef.current) {
+      const activeItem = panelRef.current.querySelector(`.${styles.mention_item}.${styles.active}`);
+      if (activeItem) {
+        activeItem.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, [activeIndex, visible]);
+
+  if (!visible) {
+    return null;
+  }
+
+  // 根据过滤条件筛选项目
+  const getFilteredItems = () => {
+    let filteredItems = items;
+
+    if (level === 0) {
+      // 一级菜单根据 @ 后面的文本过滤
+      if (filter && filter.length > 1) {
+        const searchText = filter.substring(1).toLowerCase();
+        filteredItems = items.filter((item) => item.text.toLowerCase().includes(searchText));
+      }
+    } else {
+      // 二级菜单根据 @file: 后面的文本过滤
+      if (filter && filter.length > 0) {
+        filteredItems = items.filter((item) => item.text.toLowerCase().includes(filter.toLowerCase()));
+      }
+    }
+
+    return filteredItems;
+  };
+
+  const filteredItems = getFilteredItems();
+
+  if (level === 0 && filteredItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <div ref={panelRef} className={styles.mention_panel} style={{ top: position.top, left: position.left }}>
+      {loading && <div className={styles.loading_bar}></div>}
+      {items.length > 0 ? (
+        <ul className={styles.mention_list}>
+          {items.map((item, index) => (
+            <MentionItem
+              key={item.id}
+              item={item}
+              isActive={index === activeIndex}
+              onClick={() => onSelectItem(item, true)}
+            />
+          ))}
+        </ul>
+      ) : (
+        <div className={styles.no_results}>{loading ? '正在搜索...' : '无匹配结果'}</div>
+      )}
+    </div>
+  );
+};

package/src/browser/components/mention-input/types.ts

@@ -0,0 +1,84 @@
+import type { LabelService } from '@opensumi/ide-core-browser';
+import type { IWorkspaceService } from '@opensumi/ide-workspace';
+
+export interface MentionItem {
+  id: string;
+  type: string;
+  text: string;
+  value?: string;
+  description?: string;
+  contextId?: string;
+  icon?: string;
+  getHighestLevelItems?: () => MentionItem[];
+  getItems?: (searchText: string) => Promise<MentionItem[]>;
+}
+
+export interface SecondLevelMenuConfig {
+  getDefaultItems: () => MentionItem[];
+  getHighestLevelItems: () => MentionItem[];
+}
+
+export interface MentionPosition {
+  top: number;
+  left: number;
+}
+
+export interface MentionState {
+  active: boolean;
+  startPos: number | null;
+  filter: string;
+  position: MentionPosition;
+  activeIndex: number;
+  level: number; // 0: 一级菜单, 1: 二级菜单
+  parentType: string | null; // 二级菜单的父类型
+  secondLevelFilter: string; // 二级菜单的筛选文本
+  inlineSearchActive: boolean; // 是否在输入框中进行二级搜索
+  inlineSearchStartPos: number | null; // 内联搜索的起始位置
+  loading: boolean; // 加载状态
+}
+
+interface ModelOption {
+  label: string;
+  value: string;
+}
+
+export enum FooterButtonPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
+export enum MentionType {
+  FILE = 'file',
+  FOLDER = 'folder',
+  CODE = 'code',
+}
+
+interface FooterButton {
+  id: string;
+  icon: string;
+  title: string;
+  onClick?: () => void;
+  position: FooterButtonPosition;
+}
+
+export interface FooterConfig {
+  modelOptions?: ModelOption[];
+  defaultModel?: string;
+  buttons?: FooterButton[];
+  showModelSelector?: boolean;
+}
+
+export interface MentionInputProps {
+  mentionItems?: MentionItem[]; // 简化为单一菜单项配置
+  onSend?: (content: string, config?: { model: string; [key: string]: any }) => void;
+  onStop?: () => void;
+  placeholder?: string;
+  loading?: boolean;
+  onSelectionChange?: (value: string) => void;
+  footerConfig?: FooterConfig; // 新增配置项
+  mentionKeyword?: string;
+  labelService?: LabelService;
+  workspaceService?: IWorkspaceService;
+}
+
+export const MENTION_KEYWORD = '@';

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

@@ -10,6 +10,7 @@ import {
   IEditorDocumentModelService,
 } from '@opensumi/ide-editor/lib/browser/doc-model/types';
 import { EditorSelectionChangeEvent } from '@opensumi/ide-editor/lib/browser/types';
+import { FileType, IFileServiceClient } from '@opensumi/ide-file-service';
 import { IMarkerService } from '@opensumi/ide-markers/lib/common/types';
 import { Range } from '@opensumi/ide-monaco';
 
@@ -26,13 +27,18 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
   @Autowired(IMarkerService)
   protected readonly markerService: IMarkerService;
 
+  @Autowired(IFileServiceClient)
+  protected readonly fileService: IFileServiceClient;
+
   private isAutoCollecting = false;
 
   private contextVersion = 0;
 
   private readonly maxAttachFilesLimit = 10;
+  private readonly maxAttachFoldersLimit = 10;
   private readonly maxViewFilesLimit = 20;
-  private readonly attachedFiles: FileContext[] = [];
+  private attachedFiles: FileContext[] = [];
+  private attachedFolders: FileContext[] = [];
   private readonly recentlyViewFiles: FileContext[] = [];
   private readonly onDidContextFilesChangeEmitter = new Emitter<{
     viewed: FileContext[];
@@ -53,6 +59,18 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
     }
   }
 
+  private addFolderToList(folder: FileContext, list: FileContext[], maxLimit: number) {
+    const existingIndex = list.findIndex((f) => f.uri.toString() === folder.uri.toString());
+    if (existingIndex > -1) {
+      list.splice(existingIndex, 1);
+    }
+
+    list.push(folder);
+    if (list.length > maxLimit) {
+      list.shift();
+    }
+  }
+
   addFileToContext(uri: URI, selection?: [number, number], isManual = false): void {
     if (!uri) {
       return;
@@ -70,12 +88,24 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
     this.notifyContextChange();
   }
 
+  addFolderToContext(uri: URI): void {
+    if (!uri) {
+      return;
+    }
+
+    const file = { uri };
+
+    this.addFolderToList(file, this.attachedFolders, this.maxAttachFoldersLimit);
+    this.notifyContextChange();
+  }
+
   private notifyContextChange(): void {
     this.onDidContextFilesChangeEmitter.fire(this.getAllContextFiles());
   }
 
   cleanFileContext() {
-    this.attachedFiles.length = 0;
+    this.attachedFiles = [];
+    this.attachedFolders = [];
     this.notifyContextChange();
   }
 
@@ -83,6 +113,7 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
     return {
       viewed: this.recentlyViewFiles,
       attached: this.attachedFiles,
+      attachedFolders: this.attachedFolders,
       version: this.contextVersion++,
     };
   }
@@ -160,16 +191,67 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
     this.dispose();
   }
 
-  serialize(): SerializedContext {
+  async serialize(): Promise<SerializedContext> {
     const files = this.getAllContextFiles();
     const workspaceRoot = URI.file(this.appConfig.workspaceDir);
 
     return {
       recentlyViewFiles: this.serializeRecentlyViewFiles(files.viewed, workspaceRoot),
       attachedFiles: this.serializeAttachedFiles(files.attached, workspaceRoot),
+      attachedFolders: await this.serializeAttachedFolders(files.attachedFolders, workspaceRoot),
     };
   }
 
+  private async serializeAttachedFolders(folders: FileContext[], workspaceRoot: URI): Promise<string[]> {
+    // 去重
+    const folderPath = Array.from(new Set(folders.map((folder) => folder.uri.toString())));
+    return Promise.all(
+      folderPath.map(async (folder) => {
+        const folderUri = new URI(folder);
+        const root = workspaceRoot.relative(folderUri)?.toString() || '/';
+        return `\`\`\`\n${root}\n${(await this.getPartiaFolderStructure(folderUri.codeUri.fsPath))
+          .map((line) => `- ${line}`)
+          .join('\n')}\n\`\`\`\n`;
+      }),
+    );
+  }
+
+  private async getPartiaFolderStructure(folder: string, level = 2): Promise<string[]> {
+    const result: string[] = [];
+    try {
+      const stat = await this.fileService.getFileStat(folder);
+
+      for (const child of stat?.children || []) {
+        const relativePath = new URI(folder).relative(new URI(child.uri))!.toString();
+
+        if (child.isSymbolicLink) {
+          // 处理软链接
+          const target = await this.fileService.getFileStat(child.realUri || child.uri);
+          if (target) {
+            result.push(`${relativePath} -> ${target} (symbolic link)`);
+          } else {
+            result.push(`${relativePath} (broken symbolic link)`);
+          }
+          continue;
+        }
+
+        if (child.type === FileType.Directory) {
+          result.push(`${relativePath}/`);
+          if (level > 1) {
+            const subDirStructure = await this.getPartiaFolderStructure(child.uri, level - 1);
+            result.push(...subDirStructure.map((subEntry) => `${relativePath}/${subEntry}`));
+          }
+        } else if (child.type === FileType.File) {
+          result.push(relativePath);
+        }
+      }
+    } catch {
+      return result;
+    }
+
+    return result;
+  }
+
   private serializeRecentlyViewFiles(files: FileContext[], workspaceRoot: URI): string[] {
     return files
       .map((file) => workspaceRoot.relative(file.uri)?.toString() || file.uri.parent.toString())

package/src/browser/mcp/config/components/mcp-config.module.less

@@ -45,34 +45,86 @@
 .serverItem {
   padding: 16px;
   border-radius: 8px;
-  background-color: var(--editorWidget-background);
-  border: 1px solid var(--border-color);
+  background-color: var(--editor-background);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   transition: all 0.2s ease;
-
+  .serverHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    .iconButton {
+      padding: 2px 5px;
+      margin-left: 5px;
+      cursor: pointer;
+      border-radius: 4px;
+      line-height: 20px;
+      font-size: 14px;
+      &:hover {
+        background-color: var(--badge-background);
+      }
+    }
+    .serverActionButton {
+      height: 24px;
+      background-color: var(--badge-background);
+      color: var(--badge-foreground);
+      span {
+        min-width: 52px;
+      }
+      &.active {
+        i {
+          color: var(--testing-iconPassed);
+        }
+      }
+      i {
+        color: var(--testing-iconErrored);
+        margin-right: 3px;
+      }
+    }
+  }
   &:hover {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-color: var(--focusBorder);
   }
 }
 
-.serverHeader {
+.serverTitleRow {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
+  gap: 8px;
+  text-indent: 12px;
 }
 
-.serverTitleRow {
+.serverActions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  flex: 1;
+  justify-content: flex-end;
 }
 
 .serverName {
   margin: 0;
   font-size: 14px;
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.serverStatusIcon {
+  border-radius: 50%;
+  width: 6px;
+  height: 6px;
+  margin-left: 12px;
+  display: inline-block;
+  &.active {
+    background-color: var(--testing-iconPassed);
+    box-shadow: 0 0 0 1px var(--testing-iconPassed);
+  }
+  &.inactive {
+    background-color: var(--testing-iconErrored);
+    box-shadow: 0 0 0 1px var(--testing-iconErrored);
+  }
 }
 
 .serverStatus,
@@ -104,26 +156,7 @@
   color: var(--notification-error-foreground);
 }
 
-.serverActions {
-  display: flex;
-  gap: 4px;
-}
-
-.iconButton {
-  padding: 4px;
-  border: none;
-  background: none;
-  color: var(--icon-foreground);
-  cursor: pointer;
-  border-radius: 4px;
-
-  &:hover {
-    background-color: var(--list-hover-background);
-  }
-}
-
 .serverDetail {
-  margin-top: 12px;
   padding: 12px;
   border-radius: 6px;
   background-color: var(--editor-background);
@@ -181,11 +214,9 @@
   display: inline-flex;
   align-items: center;
   padding: 2px 8px;
-  background-color: var(--editorWidget-background);
-  color: var(--button-secondary-foreground);
   border-radius: 12px;
   font-size: 12px;
   font-weight: 500;
   transition: all 0.2s ease;
-  border: 1px solid var(--border-color);
+  cursor: pointer;
 }

package/src/browser/mcp/config/components/mcp-config.view.tsx

@@ -1,7 +1,7 @@
 import cls from 'classnames';
 import React, { useCallback } from 'react';
 
-import { Badge } from '@opensumi/ide-components';
+import { Badge, Button, Popover, PopoverTriggerType } from '@opensumi/ide-components';
 import { AINativeSettingSectionsId, ILogger, useInjectable } from '@opensumi/ide-core-browser';
 import { PreferenceService } from '@opensumi/ide-core-browser/lib/preferences';
 import { PreferenceScope, localize } from '@opensumi/ide-core-common';
@@ -178,43 +178,60 @@ export const MCPConfigView: React.FC = () => {
           <div key={server.name} className={styles.serverItem}>
             <div className={styles.serverHeader}>
               <div className={styles.serverTitleRow}>
-                <h3 className={styles.serverName}>{server.name}</h3>
+                <h3 className={styles.serverName}>
+                  {server.name}
+                  <span
+                    className={cls(styles.serverStatusIcon, server.isStarted ? styles.active : styles.inactive)}
+                  ></span>
+                </h3>
               </div>
               <div className={styles.serverActions}>
-                {server.name !== BUILTIN_MCP_SERVER_NAME && (
-                  <button className={styles.iconButton} title='Edit' onClick={() => handleEditServer(server)}>
-                    <i className='codicon codicon-edit' />
-                  </button>
-                )}
-                <button
-                  className={styles.iconButton}
-                  title={server.isStarted ? 'Stop' : 'Start'}
-                  onClick={() => handleServerControl(server.name, !server.isStarted)}
+                <Popover
+                  id='mcp-server-action-popover'
+                  trigger={PopoverTriggerType.hover}
+                  content={
+                    server.isStarted ? localize('ai.native.mcp.disable.title') : localize('ai.native.mcp.enable.title')
+                  }
                 >
-                  <i
-                    className={`codicon ${
-                      loadingServer === server.name
-                        ? 'codicon-loading kt-icon-loading'
-                        : server.isStarted
-                        ? 'codicon-debug-stop'
-                        : 'codicon-debug-start'
-                    }`}
+                  <Button
+                    type='default'
+                    className={cls(styles.serverActionButton, server.isStarted && styles.active)}
+                    onClick={() => handleServerControl(server.name, !server.isStarted)}
+                  >
+                    <i
+                      className={`codicon ${
+                        loadingServer === server.name
+                          ? 'codicon-loading kt-icon-loading'
+                          : server.isStarted
+                          ? 'codicon-check'
+                          : 'codicon-circle'
+                      }`}
+                    />
+                    <span>{localize(server.isStarted ? 'ai.native.mcp.enabled' : 'ai.native.mcp.disabled')}</span>
+                  </Button>
+                </Popover>
+                {server.name !== BUILTIN_MCP_SERVER_NAME && (
+                  <Button
+                    type='icon'
+                    iconClass='codicon codicon-edit'
+                    className={styles.iconButton}
+                    title='Edit'
+                    onClick={() => handleEditServer(server)}
                   />
-                </button>
+                )}
+
                 {server.name !== BUILTIN_MCP_SERVER_NAME && (
-                  <button className={styles.iconButton} title='Delete' onClick={() => handleDeleteServer(server.name)}>
-                    <i className='codicon codicon-trash' />
-                  </button>
+                  <Button
+                    type='icon'
+                    iconClass='codicon codicon-trash'
+                    className={styles.iconButton}
+                    title='Delete'
+                    onClick={() => handleDeleteServer(server.name)}
+                  />
                 )}
               </div>
             </div>
             <div className={styles.serverDetail}>
-              <div className={styles.detailRow}>
-                <span className={styles.detailLabel}>Status:</span>
-                <span className={`${styles.serverStatus} ${server.isStarted ? styles.running : styles.stopped}`}>
-                  {server.isStarted ? localize('ai.native.mcp.running') : localize('ai.native.mcp.stopped')}
-                </span>
-              </div>
               {server.type && (
                 <div className={styles.detailRow}>
                   <span className={styles.detailLabel}>Type:</span>
@@ -228,9 +245,9 @@ export const MCPConfigView: React.FC = () => {
                   <span className={styles.detailLabel}>Tools:</span>
                   <span className={styles.detailContent}>
                     {server.tools.map((tool, index) => (
-                      <span key={index} className={styles.toolTag}>
-                        {tool}
-                      </span>
+                      <Badge key={index} className={styles.toolTag} title={tool.description}>
+                        {tool.name}
+                      </Badge>
                     ))}
                   </span>
                 </div>

package/src/browser/mcp/config/components/mcp-server-form.module.less

@@ -46,6 +46,9 @@
   gap: 8px;
   padding-top: 16px;
   border-top: 1px solid var(--border-color);
+  .secondaryButton {
+    opacity: 0.6;
+  }
 }
 
 .formRow {

package/src/browser/mcp/config/components/mcp-server-form.tsx

@@ -263,7 +263,7 @@ export const MCPServerForm: FC<Props> = ({ visible, initialData, onSave, onCance
         </div>
         {renderFormItems()}
         <div className={styles.formActions}>
-          <Button onClick={onCancel} type='ghost'>
+          <Button onClick={onCancel} type='primary' className={styles.secondaryButton}>
             {localize('ai.native.mcp.buttonCancel')}
           </Button>
           <Button onClick={handleSubmit} type='primary'>

package/src/common/index.ts

@@ -37,7 +37,7 @@ export const AI_CHAT_LOGO_AVATAR_ID = 'AI-Chat-Logo-Avatar';
 export const AI_MENU_BAR_DEBUG_TOOLBAR = 'AI_MENU_BAR_DEBUG_TOOLBAR';
 
 // 内置 MCP 服务器名称
-export const BUILTIN_MCP_SERVER_NAME = 'builtin';
+export const BUILTIN_MCP_SERVER_NAME = 'Builtin';
 
 /**
  * @deprecated Use {@link DESIGN_MENUBAR_CONTAINER_VIEW_ID} instead
@@ -134,7 +134,7 @@ export interface ISumiMCPServerBackend {
   initBuiltinMCPServer(enabled: boolean): void;
   initExternalMCPServers(servers: MCPServerDescription[]): void;
   getAllMCPTools(): Promise<MCPTool[]>;
-  getServers(): Promise<Array<{ name: string; isStarted: boolean }>>;
+  getServers(): Promise<Array<{ name: string; isStarted: boolean; tools: MCPTool[] }>>;
   startServer(serverName: string): Promise<void>;
   stopServer(serverName: string): Promise<void>;
   addOrUpdateServer(description: MCPServerDescription): void;

package/src/common/llm-context.ts

@@ -1,8 +1,14 @@
 import { Event, URI } from '@opensumi/ide-core-common/lib/utils';
 
 export interface LLMContextService {
+  /**
+   * 开始自动收集
+   */
   startAutoCollection(): void;
 
+  /**
+   * 停止自动收集
+   */
   stopAutoCollection(): void;
 
   /**
@@ -10,11 +16,19 @@ export interface LLMContextService {
    */
   addFileToContext(uri: URI, selection?: [number, number], isManual?: boolean): void;
 
+  /**
+   * 添加文件夹到 context 中
+   */
+  addFolderToContext(uri: URI, isManual?: boolean): void;
+
   /**
    * 清除上下文
    */
   cleanFileContext(): void;
 
+  /**
+   * 上下文文件变化事件
+   */
   onDidContextFilesChangeEvent: Event<{ viewed: FileContext[]; attached: FileContext[]; version: number }>;
 
   /**
@@ -24,7 +38,7 @@ export interface LLMContextService {
   removeFileFromContext(uri: URI, isManual?: boolean): void;
 
   /** 导出为可序列化格式 */
-  serialize(): SerializedContext;
+  serialize(): Promise<SerializedContext>;
 }
 
 export interface FileContext {
@@ -44,4 +58,5 @@ export interface AttachFileContext {
 export interface SerializedContext {
   recentlyViewFiles: string[];
   attachedFiles: Array<AttachFileContext>;
+  attachedFolders: string[];
 }