@opensumi/ide-ai-native 3.9.1-next-1748593694.0 → 3.9.1-next-1748943529.0

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

@@ -29,7 +29,9 @@
     word-break: break-word;
 
     .mention_tag {
+      height: 20px;
       margin: 0 2px;
+      margin-top: -3px;
       vertical-align: middle;
     }
   }
@@ -95,11 +97,13 @@
       .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);
@@ -140,31 +144,38 @@
   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;
@@ -254,6 +265,7 @@
   display: inline;
   flex: 1;
   direction: rtl;
+  unicode-bidi: plaintext;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -341,6 +353,10 @@
   justify-content: center;
   margin-right: 3px;
   font-size: 12px;
+  &::before {
+    font-size: 12px;
+    background-size: 12px !important;
+  }
 }
 
 .empty_state {
@@ -404,3 +420,152 @@
   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,12 +1,13 @@
 import cls from 'classnames';
 import * as React from 'react';
 
-import { formatLocalize, getSymbolIcon, localize } from '@opensumi/ide-core-browser';
+import { 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';
@@ -67,11 +68,22 @@ 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;
@@ -177,14 +189,14 @@ export const MentionInput: React.FC<MentionInputProps> = ({
   }, [debouncedSecondLevelFilter, mentionState.level, mentionState.parentType]);
 
   React.useEffect(() => {
-    const disposable = contextService?.onDidContextFilesChangeEvent(({ attached, attachedFolders }) => {
-      setAttachedFiles({ files: attached, folders: attachedFolders });
+    const disposable = contextService?.onDidContextFilesChangeEvent(({ attached, attachedFolders, attachedRules }) => {
+      setAttachedFiles({ files: attached, folders: attachedFolders, rules: attachedRules });
     });
 
     return () => {
       disposable?.dispose();
     };
-  }, [contextService]);
+  }, []);
 
   // 获取光标位置
   const getCursorPosition = (element: HTMLElement): number => {
@@ -207,6 +219,45 @@ 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;
@@ -490,7 +541,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 === 'file' && items[i].type.startsWith('image/')) {
+      if (items[i].kind === MentionType.FILE && items[i].type.startsWith('image/')) {
         const file = items[i].getAsFile();
         if (file) {
           imageFiles.push(file);
@@ -572,6 +623,16 @@ 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]);
 
@@ -723,6 +784,11 @@ 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;
@@ -822,12 +888,12 @@ export const MentionInput: React.FC<MentionInputProps> = ({
     mentionTag.contentEditable = 'false';
 
     // 为 file 和 folder 类型添加图标
-    if (item.type === 'file' || item.type === 'folder') {
+    if (item.type === MentionType.FILE || item.type === 'folder') {
       // 创建图标容器
       const iconSpan = document.createElement('span');
       iconSpan.className = cls(
         styles.mention_icon,
-        item.type === 'file' ? labelService?.getIcon(new URI(item.text)) : getIcon('folder'),
+        item.type === MentionType.FILE ? labelService?.getIcon(new URI(item.text)) : getIcon('folder'),
       );
       mentionTag.appendChild(iconSpan);
     }
@@ -983,6 +1049,65 @@ 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();
@@ -1015,7 +1140,7 @@ export const MentionInput: React.FC<MentionInputProps> = ({
   );
 
   const hasContext = React.useMemo(
-    () => attachedFiles.files.length > 0 || attachedFiles.folders.length > 0,
+    () => attachedFiles.files.length > 0 || attachedFiles.folders.length > 0 || attachedFiles.rules.length > 0,
     [attachedFiles],
   );
 
@@ -1037,8 +1162,119 @@ 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
@@ -1081,27 +1317,6 @@ 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,6 +48,19 @@ 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',
@@ -57,6 +70,7 @@ export enum MentionType {
   FILE = 'file',
   FOLDER = 'folder',
   CODE = 'code',
+  RULE = 'rule',
 }
 
 interface FooterButton {
@@ -70,6 +84,7 @@ interface FooterButton {
 
 export interface FooterConfig {
   modelOptions?: ModelOption[];
+  extendedModelOptions?: ExtendedModelOption[];
   defaultModel?: string;
   buttons?: FooterButton[];
   showModelSelector?: boolean;