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

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

@@ -6,6 +6,7 @@
 
   .model_selector {
     margin-right: 5px;
+    min-width: 150px;
   }
 
   .editor_area {
@@ -28,9 +29,7 @@
     word-break: break-word;
 
     .mention_tag {
-      height: 20px;
       margin: 0 2px;
-      margin-top: -3px;
       vertical-align: middle;
     }
   }
@@ -96,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);
@@ -143,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;
@@ -264,7 +254,6 @@
   display: inline;
   flex: 1;
   direction: rtl;
-  unicode-bidi: plaintext;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -352,10 +341,6 @@
   justify-content: center;
   margin-right: 3px;
   font-size: 12px;
-  &::before {
-    font-size: 12px;
-    background-size: 12px !important;
-  }
 }
 
 .empty_state {
@@ -419,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,17 +1,15 @@
 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';
-import { ExtendedModelOption, MentionSelect } from './mention-select';
 import {
   FooterButtonPosition,
   MENTION_KEYWORD,
@@ -69,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;
@@ -190,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 => {
@@ -220,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;
@@ -542,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);
@@ -624,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]);
 
@@ -785,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;
@@ -889,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);
     }
@@ -1050,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();
@@ -1141,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],
   );
 
@@ -1163,101 +1037,8 @@ export const MentionInput: React.FC<MentionInputProps> = ({
     [footerConfig.disableModelSelector],
   );
 
-  // 转换模型选项为扩展格式
-  const getExtendedModelOptions = React.useMemo((): ExtendedModelOption[] => {
-    // 如果有扩展模型选项，直接使用
-    if (footerConfig.extendedModelOptions) {
-      return footerConfig.extendedModelOptions.map((option) => ({
-        ...option,
-        selected: option.value === selectedModel,
-      }));
-    }
-
-    // 否则从基础模型选项转换
-    return (footerConfig.modelOptions || []).map((option): ExtendedModelOption => {
-      const extendedOption: ExtendedModelOption = {
-        ...option,
-      };
-
-      // 设置选中状态：如果当前模型匹配选中的模型，则标记为选中
-      extendedOption.selected = option.value === selectedModel;
-
-      return extendedOption;
-    });
-  }, [footerConfig.modelOptions, footerConfig.extendedModelOptions, selectedModel]);
-
-  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 getFileNameFromPath = (path: string) => decodeURIComponent(path.split('/').pop() || 'Unknown Rule');
-
-  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}>
-            <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}>{new URI(file.uri.toString()).displayName}</span>
-          </div>
-        ))}
-
-        {attachedFiles.folders.map((folder, index) => (
-          <div key={`folder-${index}`} className={styles.context_preview_item} data-type='folder'>
-            <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}>{new URI(folder.uri.toString()).displayName}</span>
-          </div>
-        ))}
-
-        {attachedFiles.rules.map((rule, index) => (
-          <div key={`rule-${index}`} className={styles.context_preview_item} data-type='rule'>
-            <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}>
-              {getFileNameFromPath(rule.path).replace('.mdc', '')}
-            </span>
-          </div>
-        ))}
-      </div>
-    ),
-    [handleClearContext, hasContext, attachedFiles, labelService, contextService, handleTitleClick, removeContext],
-  );
-
   return (
     <div className={styles.input_container}>
-      {renderContextPreview()}
       {mentionState.active && (
         <div className={styles.mention_panel_container}>
           <MentionPanel
@@ -1287,22 +1068,40 @@ export const MentionInput: React.FC<MentionInputProps> = ({
         <div className={styles.left_control}>
           {footerConfig.showModelSelector &&
             renderModelSelectorTip(
-              <MentionSelect
-                options={getExtendedModelOptions}
+              <Select
+                options={footerConfig.modelOptions || []}
                 value={selectedModel}
                 onChange={handleModelChange}
                 className={styles.model_selector}
                 size='small'
                 disabled={footerConfig.disableModelSelector}
-                showThinking={footerConfig.showThinking}
-                thinkingEnabled={footerConfig.thinkingEnabled}
-                onThinkingChange={footerConfig.onThinkingChange}
               />,
             )}
           {renderButtons(FooterButtonPosition.LEFT)}
         </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

@@ -46,30 +46,6 @@ export interface MentionState {
 interface ModelOption {
   label: string;
   value: string;
-  icon?: string;
-  iconClass?: string;
-  tags?: string[];
-  description?: string;
-  badge?: string;
-  badgeColor?: string;
-}
-
-export interface ExtendedModelOption extends ModelOption {
-  disabled?: boolean;
-  selected?: boolean; // 由外部控制选中状态
-}
-
-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 {
@@ -81,7 +57,6 @@ export enum MentionType {
   FILE = 'file',
   FOLDER = 'folder',
   CODE = 'code',
-  RULE = 'rule',
 }
 
 interface FooterButton {
@@ -95,14 +70,10 @@ interface FooterButton {
 
 export interface FooterConfig {
   modelOptions?: ModelOption[];
-  extendedModelOptions?: ExtendedModelOption[];
   defaultModel?: string;
   buttons?: FooterButton[];
   showModelSelector?: boolean;
   disableModelSelector?: boolean;
-  showThinking?: boolean;
-  thinkingEnabled?: boolean;
-  onThinkingChange?: (enabled: boolean) => void;
 }
 
 export interface MentionInputProps {