@opensumi/ide-ai-native 3.9.1-next-1749175927.0 → 3.9.1-next-1749196667.0

package/src/browser/components/ChatToolRender.tsx

@@ -7,7 +7,6 @@ import { Loading } from '@opensumi/ide-core-browser/lib/components/ai-native';
 import { IChatToolContent, uuid } from '@opensumi/ide-core-common';
 import { localize } from '@opensumi/ide-core-common/lib/localize';
 
-import { TOOL_NAME_SEPARATOR } from '../../common/utils';
 import { IMCPServerRegistry, TokenMCPServerRegistry } from '../types';
 
 import { CodeEditorWithHighlight } from './ChatEditor';
@@ -22,9 +21,7 @@ export const ChatToolRender = (props: { value: IChatToolContent['content']; mess
   if (!value || !value.function || !value.id) {
     return null;
   }
-  const toolName = mcpServerFeatureRegistry.getMCPTool(value.function.name)?.label || value.function.name;
-  const parts = toolName.split(TOOL_NAME_SEPARATOR);
-  const label = parts.length >= 3 ? parts[2] : toolName;
+  const label = mcpServerFeatureRegistry.getMCPTool(value.function.name)?.label || value.function.name;
 
   const ToolComponent = mcpServerFeatureRegistry.getToolComponent(value.function.name);
 
@@ -75,12 +72,7 @@ export const ChatToolRender = (props: { value: IChatToolContent['content']; mess
         <div className={styles.tool_name}>
           <Icon iconClass={`codicon codicon-chevron-${isExpanded ? 'down' : 'right'}`} />
           <Icon size='small' iconClass={cls('codicon codicon-tools', styles.tool_icon)} />
-          <span className={styles.tool_label}>
-            <span className={styles.tool_prefix}>Called MCP Tool</span>
-            <span className={styles.tool_name} title={label}>
-              {label}
-            </span>
-          </span>
+          <span className={styles.tool_label}>{label}</span>
         </div>
         {value.state && (
           <div className={styles.tool_state}>

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

@@ -620,13 +620,6 @@
   vertical-align: middle;
   font-size: 12px;
   word-break: break-all;
-  max-width: 100px;
-  text-overflow: ellipsis;
-  direction: rtl;
-  unicode-bidi: plaintext;
-  overflow: hidden;
-  white-space: nowrap;
-  display: inline-block;
 }
 
 .thumbnail_container {

package/src/browser/components/mention-input/mention-input.module.less

@@ -29,9 +29,7 @@
     word-break: break-word;
 
     .mention_tag {
-      height: 20px;
       margin: 0 2px;
-      margin-top: -3px;
       vertical-align: middle;
     }
   }
@@ -97,13 +95,11 @@
       .stop_logo {
         background-color: var(--badge-background);
         color: var(--badge-foreground);
-
         .stop_logo_icon {
           line-height: 16px;
           color: var(--kt-dangerButton-background);
         }
       }
-
       .send_logo {
         &:hover {
           background-color: var(--kt-primaryButton-background);
@@ -144,38 +140,31 @@
   display: flex;
   justify-content: center;
 }
-
 .context_container {
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-
   .context_icon {
     flex-grow: 0;
     flex-shrink: 0;
-
     :global(.kt-icon) {
       font-size: 12px;
     }
-
     :global(.kticon-close) {
       display: none;
     }
   }
-
   &:hover {
     .context_icon {
       :global(.kticon-close) {
         display: block;
       }
-
       :global(.kticon-out-link) {
         display: none;
       }
     }
   }
-
   .context_description {
     flex: 1;
     margin-left: 3px;
@@ -265,7 +254,6 @@
   display: inline;
   flex: 1;
   direction: rtl;
-  unicode-bidi: plaintext;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -353,10 +341,6 @@
   justify-content: center;
   margin-right: 3px;
   font-size: 12px;
-  &::before {
-    font-size: 12px;
-    background-size: 12px !important;
-  }
 }
 
 .empty_state {
@@ -420,152 +404,3 @@
   color: #666;
   font-style: italic;
 }
-
-.context_preview_container {
-  background-color: var(--kt-editorWidget-background);
-  border: 1px solid var(--kt-editorWidget-border);
-  margin: 0 16px;
-  animation: slideIn 0.3s ease-out;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  align-items: flex-start;
-  margin-bottom: 3px;
-  width: calc(100% - 32px);
-}
-
-.context_preview_title {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px 3px;
-  height: 18px;
-  width: auto;
-  box-sizing: border-box;
-  border-radius: 4px;
-  border: 1px solid color-mix(in srgb, var(--editor-foreground) 10%, transparent);
-  outline: none;
-  flex-shrink: 0;
-  color: var(--descriptionForeground);
-  font-size: 11px;
-
-  &::before {
-    content: '@';
-    margin-right: 4px;
-  }
-  &.has_context {
-    width: 18px;
-    &::before {
-      content: '@';
-      margin-right: 0;
-    }
-  }
-
-  &:hover {
-    color: var(--badge-foreground);
-  }
-}
-
-.context_preview_item {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 2px 4px;
-  height: 18px;
-  width: auto;
-  min-width: fit-content;
-  max-width: 300px;
-  box-sizing: border-box;
-  border-radius: 4px;
-  border: 1px solid color-mix(in srgb, var(--badge-background) 30%, transparent);
-  outline: none;
-  flex: 0 1 auto;
-  margin-left: 3px;
-
-  .icon {
-    width: 12px !important;
-    height: 12px !important;
-    line-height: 12px !important;
-    margin-right: 2px;
-    flex-shrink: 0;
-  }
-
-  .close_icon {
-    margin-right: 2px;
-    display: none !important;
-    width: 12px !important;
-    height: 12px !important;
-    line-height: 12px !important;
-    flex-shrink: 0;
-    opacity: 0.8;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  &:hover {
-    opacity: 1;
-    .icon {
-      display: none;
-    }
-    .close_icon {
-      display: inline-block !important;
-      font-size: 12px !important;
-    }
-  }
-}
-
-.context_preview_item_icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  opacity: 0.8;
-  &::before {
-    background-position: 2px !important;
-    font-size: 12px;
-    background-size: 11px !important;
-  }
-}
-
-.context_preview_item_text {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--descriptionForeground);
-  white-space: nowrap;
-  font-weight: 400;
-  line-height: 1.2;
-  font-size: 11px;
-  max-width: 200px;
-}
-
-.context_preview_item_remove {
-  cursor: pointer;
-  opacity: 0.5;
-  font-size: 12px;
-  margin-left: 4px;
-  padding: 2px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: all 0.2s ease;
-  width: 16px;
-  height: 16px;
-
-  &:hover {
-    opacity: 1;
-    background-color: var(--kt-dangerButton-background);
-    color: var(--kt-dangerButton-foreground);
-    transform: scale(1.1);
-  }
-
-  &:active {
-    transform: scale(0.9);
-  }
-}

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

@@ -1,13 +1,12 @@
 import cls from 'classnames';
 import * as React from 'react';
 
-import { getSymbolIcon, localize } from '@opensumi/ide-core-browser';
+import { formatLocalize, getSymbolIcon, localize } from '@opensumi/ide-core-browser';
 import { Icon, Popover, PopoverPosition, Select, getIcon } from '@opensumi/ide-core-browser/lib/components';
 import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
 import { URI } from '@opensumi/ide-utils';
 
 import { FileContext } from '../../../common/llm-context';
-import { ProjectRule } from '../../../common/types';
 
 import styles from './mention-input.module.less';
 import { MentionPanel } from './mention-panel';
@@ -68,22 +67,11 @@ export const MentionInput: React.FC<MentionInputProps> = ({
   const [attachedFiles, setAttachedFiles] = React.useState<{
     files: FileContext[];
     folders: FileContext[];
-    rules: ProjectRule[];
   }>({
     files: [],
     folders: [],
-    rules: [],
   });
 
-  // 添加用于跟踪 mention_tag 的状态
-  const prevMentionTagsRef = React.useRef<
-    Array<{
-      id: string;
-      type: string;
-      contextId: string;
-    }>
-  >([]);
-
   const getCurrentItems = (): MentionItem[] => {
     if (mentionState.level === 0) {
       return mentionItems;
@@ -189,14 +177,14 @@ export const MentionInput: React.FC<MentionInputProps> = ({
   }, [debouncedSecondLevelFilter, mentionState.level, mentionState.parentType]);
 
   React.useEffect(() => {
-    const disposable = contextService?.onDidContextFilesChangeEvent(({ attached, attachedFolders, attachedRules }) => {
-      setAttachedFiles({ files: attached, folders: attachedFolders, rules: attachedRules });
+    const disposable = contextService?.onDidContextFilesChangeEvent(({ attached, attachedFolders }) => {
+      setAttachedFiles({ files: attached, folders: attachedFolders });
     });
 
     return () => {
       disposable?.dispose();
     };
-  }, []);
+  }, [contextService]);
 
   // 获取光标位置
   const getCursorPosition = (element: HTMLElement): number => {
@@ -219,45 +207,6 @@ export const MentionInput: React.FC<MentionInputProps> = ({
       setHistoryIndex(-1);
     }
 
-    // 检测 mention_tag 的删除
-    if (editorRef.current) {
-      const currentMentionTags = Array.from(editorRef.current.querySelectorAll(`.${styles.mention_tag}`)).map(
-        (tag) => ({
-          id: tag.getAttribute('data-id') || '',
-          type: tag.getAttribute('data-type') || '',
-          contextId: tag.getAttribute('data-context-id') || '',
-        }),
-      );
-
-      // 找出被删除的 mention_tag
-      const deletedTags = prevMentionTagsRef.current.filter(
-        (prevTag) =>
-          !currentMentionTags.some(
-            (currentTag) =>
-              currentTag.id === prevTag.id &&
-              currentTag.type === prevTag.type &&
-              currentTag.contextId === prevTag.contextId,
-          ),
-      );
-
-      // 清理被删除的 mention_tag 对应的 context
-      deletedTags.forEach((deletedTag) => {
-        if (deletedTag.contextId) {
-          const uri = new URI(deletedTag.contextId);
-          if (deletedTag.type === MentionType.FILE) {
-            removeContext(MentionType.FILE, uri);
-          } else if (deletedTag.type === MentionType.FOLDER) {
-            removeContext(MentionType.FOLDER, uri);
-          } else if (deletedTag.type === MentionType.RULE) {
-            removeContext(MentionType.RULE, uri);
-          }
-        }
-      });
-
-      // 更新 mention_tag 状态
-      prevMentionTagsRef.current = currentMentionTags;
-    }
-
     const selection = window.getSelection();
     if (!selection || !selection.rangeCount || !editorRef.current) {
       return;
@@ -541,7 +490,7 @@ export const MentionInput: React.FC<MentionInputProps> = ({
     const imageFiles: File[] = [];
     // eslint-disable-next-line @typescript-eslint/prefer-for-of
     for (let i = 0; i < items.length; i++) {
-      if (items[i].kind === MentionType.FILE && items[i].type.startsWith('image/')) {
+      if (items[i].kind === 'file' && items[i].type.startsWith('image/')) {
         const file = items[i].getAsFile();
         if (file) {
           imageFiles.push(file);
@@ -623,16 +572,6 @@ export const MentionInput: React.FC<MentionInputProps> = ({
       if (placeholder && !editorRef.current.textContent) {
         editorRef.current.setAttribute('data-placeholder', placeholder);
       }
-
-      // 初始化 mention_tag 状态
-      const initialMentionTags = Array.from(editorRef.current.querySelectorAll(`.${styles.mention_tag}`)).map(
-        (tag) => ({
-          id: tag.getAttribute('data-id') || '',
-          type: tag.getAttribute('data-type') || '',
-          contextId: tag.getAttribute('data-context-id') || '',
-        }),
-      );
-      prevMentionTagsRef.current = initialMentionTags;
     }
   }, [placeholder]);
 
@@ -784,11 +723,6 @@ export const MentionInput: React.FC<MentionInputProps> = ({
               true,
             );
           }
-        } else if (item.type === MentionType.RULE) {
-          const iconSpan = document.createElement('span');
-          iconSpan.className = cls(styles.mention_icon, getIcon('rules'));
-          mentionTag.appendChild(iconSpan);
-          contextService?.addRuleToContext(new URI(item.contextId), true);
         }
         const workspace = workspaceService?.workspace;
         let relativePath = item.text;
@@ -888,12 +822,12 @@ export const MentionInput: React.FC<MentionInputProps> = ({
     mentionTag.contentEditable = 'false';
 
     // 为 file 和 folder 类型添加图标
-    if (item.type === MentionType.FILE || item.type === 'folder') {
+    if (item.type === 'file' || item.type === 'folder') {
       // 创建图标容器
       const iconSpan = document.createElement('span');
       iconSpan.className = cls(
         styles.mention_icon,
-        item.type === MentionType.FILE ? labelService?.getIcon(new URI(item.text)) : getIcon('folder'),
+        item.type === 'file' ? labelService?.getIcon(new URI(item.text)) : getIcon('folder'),
       );
       mentionTag.appendChild(iconSpan);
     }
@@ -1049,65 +983,6 @@ export const MentionInput: React.FC<MentionInputProps> = ({
     contextService?.cleanFileContext();
   }, [contextService]);
 
-  const handleTitleClick = React.useCallback(() => {
-    if (!editorRef.current) {
-      return;
-    }
-
-    // 聚焦输入框
-    editorRef.current.focus();
-
-    // 获取当前光标位置
-    const selection = window.getSelection();
-    if (!selection) {
-      return;
-    }
-
-    // 在当前位置插入 @ 符号
-    const range = document.createRange();
-
-    // 如果编辑器为空，直接插入
-    if (!editorRef.current.textContent || editorRef.current.textContent.trim() === '') {
-      editorRef.current.innerHTML = '@';
-      range.setStart(editorRef.current.firstChild || editorRef.current, 1);
-      range.setEnd(editorRef.current.firstChild || editorRef.current, 1);
-    } else {
-      // 当输入框有内容时，总是在末尾插入 @ 符号
-      const textNode = document.createTextNode(' @');
-
-      // 移动到编辑器末尾
-      range.selectNodeContents(editorRef.current);
-      range.collapse(false); // 移动到末尾
-
-      // 在末尾插入空格和 @ 符号
-      range.insertNode(textNode);
-      range.setStartAfter(textNode);
-      range.setEndAfter(textNode);
-    }
-
-    // 设置新的光标位置
-    selection.removeAllRanges();
-    selection.addRange(range);
-
-    // 获取插入后的光标位置
-    const newCursorPos = getCursorPosition(editorRef.current);
-
-    // 激活菜单状态
-    setMentionState({
-      active: true,
-      startPos: newCursorPos,
-      filter: '@',
-      position: { top: 0, left: 0 },
-      activeIndex: 0,
-      level: 0,
-      parentType: null,
-      secondLevelFilter: '',
-      inlineSearchActive: false,
-      inlineSearchStartPos: null,
-      loading: false,
-    });
-  }, []);
-
   const handleStop = React.useCallback(() => {
     if (onStop) {
       onStop();
@@ -1140,7 +1015,7 @@ export const MentionInput: React.FC<MentionInputProps> = ({
   );
 
   const hasContext = React.useMemo(
-    () => attachedFiles.files.length > 0 || attachedFiles.folders.length > 0 || attachedFiles.rules.length > 0,
+    () => attachedFiles.files.length > 0 || attachedFiles.folders.length > 0,
     [attachedFiles],
   );
 
@@ -1162,119 +1037,8 @@ export const MentionInput: React.FC<MentionInputProps> = ({
     [footerConfig.disableModelSelector],
   );
 
-  const removeContext = React.useCallback(
-    (type: MentionType, uri: URI) => {
-      if (type === MentionType.FILE) {
-        contextService?.removeFileFromContext(uri, true);
-      } else if (type === MentionType.FOLDER) {
-        contextService?.removeFolderFromContext(uri);
-      } else if (type === MentionType.RULE) {
-        contextService?.removeRuleFromContext(uri);
-      }
-    },
-    [contextService],
-  );
-
-  const renderContextPreview = React.useCallback(
-    () => (
-      <div className={styles.context_preview_container}>
-        <span
-          className={cls(styles.context_preview_title, hasContext && styles.has_context)}
-          onClick={handleTitleClick}
-        >
-          {!hasContext ? localize('aiNative.chat.context.title') : ''}
-        </span>
-        {attachedFiles.files.map((file, index) => (
-          <div
-            key={`file-${index}`}
-            className={styles.context_preview_item}
-            data-type={MentionType.FILE}
-            onClick={() => contextService?.removeFileFromContext(file.uri, true)}
-          >
-            <Icon
-              iconClass={cls(
-                labelService?.getIcon(file.uri) || MentionType.FILE,
-                styles.context_preview_item_icon,
-                styles.icon,
-              )}
-            />
-            <Icon
-              iconClass={cls(styles.close_icon, getIcon('close'))}
-              onClick={() => removeContext(MentionType.FILE, file.uri)}
-            />
-            <span className={styles.context_preview_item_text}>
-              {workspaceService?.workspace
-                ? file.uri.toString().replace(workspaceService.workspace.uri.toString(), '').slice(1)
-                : file.uri.toString()}
-            </span>
-          </div>
-        ))}
-
-        {attachedFiles.folders.map((folder, index) => (
-          <div
-            key={`folder-${index}`}
-            className={styles.context_preview_item}
-            data-type='folder'
-            onClick={() => contextService?.removeFileFromContext(folder.uri, true)}
-          >
-            <Icon iconClass={cls(getIcon('folder'), styles.context_preview_item_icon, styles.icon)} />
-            <Icon
-              iconClass={cls(styles.close_icon, getIcon('close'))}
-              onClick={() => removeContext(MentionType.FOLDER, folder.uri)}
-            />
-            <span className={styles.context_preview_item_text}>
-              {workspaceService?.workspace
-                ? folder.uri.toString().replace(workspaceService.workspace.uri.toString(), '').slice(1)
-                : folder.uri.toString()}
-            </span>
-          </div>
-        ))}
-
-        {attachedFiles.rules.map((rule, index) => (
-          <div
-            key={`rule-${index}`}
-            className={styles.context_preview_item}
-            data-type='rule'
-            onClick={() => {
-              // 由于没有专门的删除规则方法，我们重新构建规则列表
-              contextService?.cleanFileContext();
-              // 重新添加除了当前要删除的规则之外的所有上下文
-              attachedFiles.files.forEach((file) => contextService?.addFileToContext(file.uri, file.selection, true));
-              attachedFiles.folders.forEach((folder) => contextService?.addFolderToContext(folder.uri, true));
-              attachedFiles.rules.forEach((r, i) => {
-                if (i !== index) {
-                  contextService?.addRuleToContext(new URI(r.path), true);
-                }
-              });
-            }}
-          >
-            <Icon iconClass={cls(getIcon('rules'), styles.context_preview_item_icon, styles.icon)} />
-            <Icon
-              iconClass={cls(styles.close_icon, getIcon('close'))}
-              onClick={() => removeContext(MentionType.RULE, new URI(rule.path))}
-            />
-            <span className={styles.context_preview_item_text}>
-              {rule.path.split('/').pop()?.replace('.mdc', '') || 'Unknown Rule'}
-            </span>
-          </div>
-        ))}
-      </div>
-    ),
-    [
-      handleClearContext,
-      hasContext,
-      attachedFiles,
-      workspaceService,
-      labelService,
-      contextService,
-      handleTitleClick,
-      removeContext,
-    ],
-  );
-
   return (
     <div className={styles.input_container}>
-      {renderContextPreview()}
       {mentionState.active && (
         <div className={styles.mention_panel_container}>
           <MentionPanel
@@ -1317,6 +1081,27 @@ export const MentionInput: React.FC<MentionInputProps> = ({
         </div>
         <div className={styles.right_control}>
           {renderButtons(FooterButtonPosition.RIGHT)}
+          {hasContext && (
+            <Popover
+              overlayClassName={styles.popover_icon}
+              id={'ai-chat-clear-context'}
+              position={PopoverPosition.top}
+              content={localize('aiNative.chat.context.clear')}
+            >
+              <div className={styles.context_container} onClick={handleClearContext}>
+                <div className={styles.context_icon}>
+                  <Icon icon='out-link' />
+                  <Icon icon='close' />
+                </div>
+                <div className={styles.context_description}>
+                  {formatLocalize(
+                    'aiNative.chat.context.description',
+                    attachedFiles.files.length + attachedFiles.folders.length,
+                  )}
+                </div>
+              </div>
+            </Popover>
+          )}
           <Popover
             overlayClassName={styles.popover_icon}
             id={'ai-chat-send'}

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

@@ -48,19 +48,6 @@ interface ModelOption {
   value: string;
 }
 
-export interface ExtendedModelOption {
-  label: string;
-  value: string;
-  icon?: string;
-  iconClass?: string;
-  tags?: string[];
-  features?: string[];
-  description?: string;
-  disabled?: boolean;
-  badge?: string;
-  badgeColor?: string;
-}
-
 export enum FooterButtonPosition {
   LEFT = 'left',
   RIGHT = 'right',
@@ -70,7 +57,6 @@ export enum MentionType {
   FILE = 'file',
   FOLDER = 'folder',
   CODE = 'code',
-  RULE = 'rule',
 }
 
 interface FooterButton {
@@ -84,7 +70,6 @@ interface FooterButton {
 
 export interface FooterConfig {
   modelOptions?: ModelOption[];
-  extendedModelOptions?: ExtendedModelOption[];
   defaultModel?: string;
   buttons?: FooterButton[];
   showModelSelector?: boolean;