@opensumi/ide-ai-native 3.9.1-next-1749540423.0 → 3.9.1-next-1749547010.0

package/src/browser/components/ChatMentionInput.tsx

@@ -10,7 +10,13 @@ import {
   useInjectable,
 } from '@opensumi/ide-core-browser';
 import { Icon, getIcon } from '@opensumi/ide-core-browser/lib/components';
-import { AINativeSettingSectionsId, ChatFeatureRegistryToken, URI, localize } from '@opensumi/ide-core-common';
+import {
+  AINativeSettingSectionsId,
+  ChatFeatureRegistryToken,
+  RulesServiceToken,
+  URI,
+  localize,
+} from '@opensumi/ide-core-common';
 import { CommandService } from '@opensumi/ide-core-common/lib/command';
 import { defaultFilesWatcherExcludes } from '@opensumi/ide-core-common/lib/preferences/file-watch';
 import { WorkbenchEditorService } from '@opensumi/ide-editor';
@@ -18,6 +24,8 @@ import { FileSearchServicePath, IFileSearchService } from '@opensumi/ide-file-se
 import { OutlineCompositeTreeNode, OutlineTreeNode } from '@opensumi/ide-outline/lib/browser/outline-node.define';
 import { OutlineTreeService } from '@opensumi/ide-outline/lib/browser/services/outline-tree.service';
 import { IMessageService } from '@opensumi/ide-overlay';
+import { IconType } from '@opensumi/ide-theme';
+import { IconService } from '@opensumi/ide-theme/lib/browser';
 import { IWorkspaceService } from '@opensumi/ide-workspace';
 
 import { IChatInternalService } from '../../common';
@@ -25,6 +33,8 @@ import { LLMContextService } from '../../common/llm-context';
 import { ChatFeatureRegistry } from '../chat/chat.feature.registry';
 import { ChatInternalService } from '../chat/chat.internal.service';
 import { MCPConfigCommands } from '../mcp/config/mcp-config.commands';
+import { RulesCommands } from '../rules/rules.contribution';
+import { RulesService } from '../rules/rules.service';
 
 import styles from './components.module.less';
 import { MentionInput } from './mention-input/mention-input';
@@ -72,15 +82,21 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
   const workspaceService = useInjectable<IWorkspaceService>(IWorkspaceService);
   const editorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
   const labelService = useInjectable<LabelService>(LabelService);
+  const iconService = useInjectable<IconService>(IconService);
   const messageService = useInjectable<IMessageService>(IMessageService);
   const chatFeatureRegistry = useInjectable<ChatFeatureRegistry>(ChatFeatureRegistryToken);
   const outlineTreeService = useInjectable<OutlineTreeService>(OutlineTreeService);
   const prevOutlineItems = useRef<MentionItem[]>([]);
   const preferenceService = useInjectable<PreferenceService>(PreferenceService);
+  const rulesService = useInjectable<RulesService>(RulesServiceToken);
   const handleShowMCPConfig = React.useCallback(() => {
     commandService.executeCommand(MCPConfigCommands.OPEN_MCP_CONFIG.id);
   }, [commandService]);
 
+  const handleShowRules = React.useCallback(() => {
+    commandService.executeCommand(RulesCommands.OPEN_RULES_FILE.id);
+  }, [commandService]);
+
   useEffect(() => {
     if (props.value !== value) {
       setValue(props.value || '');
@@ -107,6 +123,55 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
     [outlineTreeService],
   );
 
+  // 拆分目录路径为多个层级的辅助函数
+  const expandFolderPaths = async (folderPaths: string[], workspaceRootPath: string): Promise<MentionItem[]> => {
+    const expandedPaths = new Set<string>();
+    const workspaceUri = new URI(workspaceRootPath);
+
+    // 将所有路径展开为多层级
+    for (const folderPath of folderPaths) {
+      const uri = new URI(folderPath);
+      const relativePath = await workspaceService.asRelativePath(uri);
+
+      if (relativePath?.path) {
+        const pathSegments = relativePath.path.split('/').filter(Boolean);
+
+        // 为每个层级创建路径
+        for (let i = 0; i < pathSegments.length; i++) {
+          const segmentPath = pathSegments.slice(0, i + 1).join('/');
+          const fullPath = workspaceUri.resolve(segmentPath).codeUri.fsPath;
+
+          // 避免添加工作区本身或其上级目录
+          if (fullPath !== workspaceRootPath && !workspaceRootPath.startsWith(fullPath)) {
+            expandedPaths.add(fullPath);
+          }
+        }
+      } else {
+        // 如果无法获取相对路径，直接添加（但仍要过滤工作区路径）
+        if (folderPath !== workspaceRootPath && !workspaceRootPath.startsWith(folderPath)) {
+          expandedPaths.add(folderPath);
+        }
+      }
+    }
+
+    // 转换为 MentionItem 格式
+    return Promise.all(
+      Array.from(expandedPaths).map(async (folderPath) => {
+        const uri = new URI(folderPath);
+        const relativePath = await workspaceService.asRelativePath(uri);
+        return {
+          id: uri.codeUri.fsPath,
+          type: MentionType.FOLDER,
+          text: uri.displayName,
+          value: uri.codeUri.fsPath,
+          description: relativePath?.root ? relativePath.path : '',
+          contextId: uri.codeUri.fsPath,
+          icon: getIcon('folder'),
+        };
+      }),
+    );
+  };
+
   // 默认菜单项
   const defaultMenuItems: MentionItem[] = [
     {
@@ -214,21 +279,7 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
                 .filter((folder) => folder !== workspaceService.workspace?.uri.toString() && folder !== '/'),
             ),
           );
-          folders = await Promise.all(
-            recentFolder.map(async (folder) => {
-              const uri = new URI(folder);
-              const relativePath = await workspaceService.asRelativePath(uri);
-              return {
-                id: uri.codeUri.fsPath,
-                type: MentionType.FOLDER,
-                text: uri.displayName,
-                value: uri.codeUri.fsPath,
-                description: relativePath?.root ? relativePath.path : '',
-                contextId: uri.codeUri.fsPath,
-                icon: getIcon('folder'),
-              };
-            }),
-          );
+          folders = await expandFolderPaths(recentFolder, workspaceService.workspace?.uri.toString() || '');
         } else {
           const rootUris = (await workspaceService.roots).map((root) => new URI(root.uri).codeUri.fsPath.toString());
           const files = await searchService.find(searchText, {
@@ -246,22 +297,11 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
                 .filter((folder) => folder !== workspaceService.workspace?.uri.toString()),
             ),
           );
-          return Promise.all(
-            folders.map(async (folder) => {
-              const uri = new URI(folder);
-              return {
-                id: uri.codeUri.fsPath,
-                type: MentionType.FOLDER,
-                text: uri.displayName,
-                value: uri.codeUri.fsPath,
-                description: (await workspaceService.asRelativePath(uri.parent))?.path || '',
-                contextId: uri.codeUri.fsPath,
-                icon: getIcon('folder'),
-              };
-            }),
-          );
+          return await expandFolderPaths(folders, workspaceService.workspace?.uri.toString() || '');
         }
-        return folders.filter((folder) => folder.id !== new URI(workspaceService.workspace?.uri).codeUri.fsPath);
+        return folders
+          .filter(Boolean)
+          .filter((folder) => folder.id !== new URI(workspaceService.workspace?.uri).codeUri.fsPath);
       },
     },
     {
@@ -312,13 +352,111 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
         }
       },
     },
-  ];
+    {
+      id: MentionType.RULE,
+      type: MentionType.RULE,
+      text: 'Rule',
+      icon: getIcon('rules'),
+      getHighestLevelItems: () => [],
+      getItems: async (searchText: string) => {
+        const rules = await rulesService.projectRules;
+        const mappedRules = rules.map((rule) => {
+          const uri = new URI(rule.path);
+          return {
+            id: uri.codeUri.fsPath,
+            type: MentionType.RULE,
+            text: uri.displayName,
+            value: uri.codeUri.fsPath,
+            contextId: uri.codeUri.fsPath,
+            description: rule.description,
+            icon: getIcon('rules'),
+          };
+        });
+
+        if (!searchText) {
+          return mappedRules.slice(0, 10);
+        }
+
+        const lowerSearchText = searchText.toLocaleLowerCase();
+        return mappedRules
+          .filter((rule) => rule.text.toLocaleLowerCase().includes(lowerSearchText))
+          .sort((a, b) => {
+            const aTextLower = a.text.toLocaleLowerCase();
+            const bTextLower = b.text.toLocaleLowerCase();
+            const aDescLower = a.description?.toLocaleLowerCase() || '';
+            const bDescLower = b.description?.toLocaleLowerCase() || '';
+
+            // 优先级：文件名包含搜索文本 > 描述包含搜索文本
+            const aTextMatch = aTextLower.includes(lowerSearchText);
+            const bTextMatch = bTextLower.includes(lowerSearchText);
+            const aDescMatch = aDescLower.includes(lowerSearchText);
+            const bDescMatch = bDescLower.includes(lowerSearchText);
+
+            if (aTextMatch && bTextMatch) {
+              // 如果都匹配文件名，按文件名字母序排序
+              return aTextLower.localeCompare(bTextLower);
+            }
+            if (aTextMatch && !bTextMatch) {
+              return -1;
+            }
+            if (!aTextMatch && bTextMatch) {
+              return 1;
+            }
+
+            // 如果文件名都不匹配，比较描述
+            if (aDescMatch && bDescMatch) {
+              return aTextLower.localeCompare(bTextLower);
+            }
+            if (aDescMatch && !bDescMatch) {
+              return -1;
+            }
+            if (!aDescMatch && bDescMatch) {
+              return 1;
+            }
 
+            // 如果都不匹配，按文件名字母序排序
+            return aTextLower.localeCompare(bTextLower);
+          })
+          .slice(0, 10);
+      },
+    },
+  ];
   const defaultMentionInputFooterOptions: FooterConfig = useMemo(
     () => ({
       modelOptions: [
-        { label: 'QWQ 32B', value: 'qwq-32b' },
-        { label: 'DeepSeek R1', value: 'deepseek-r1' },
+        {
+          value: 'qwen-plus-latest',
+          label: 'Qwen 3',
+          iconClass: iconService.fromIcon(
+            '',
+            'https://img.alicdn.com/imgextra/i3/O1CN01LFMrZj28YrnrzeebY_!!6000000007945-55-tps-16-16.svg',
+            IconType.Background,
+          ),
+          tags: ['思考链', '擅长代码'],
+          description: '高性能代码模型，支持思考链',
+        },
+        {
+          label: 'Claude 4 Sonnet',
+          value: 'claude_sonnet4',
+          iconClass: iconService.fromIcon(
+            '',
+            'https://img.alicdn.com/imgextra/i3/O1CN01p0mziz1Nsl40lp1HO_!!6000000001626-55-tps-92-65.svg',
+            IconType.Background,
+          ),
+          tags: ['多模态', '长上下文理解', '思考模式'],
+          description: '高性能模型，支持多模态输入',
+        },
+        {
+          label: 'DeepSeek R1',
+          value: 'DeepSeek-R1-0528',
+          iconClass: iconService.fromIcon(
+            '',
+            'https://img.alicdn.com/imgextra/i3/O1CN01ClcK2w1JwdxcbAB3a_!!6000000001093-55-tps-30-30.svg',
+            IconType.Background,
+          ),
+          tags: ['思考模式', '长上下文理解'],
+          description: '专业创作，支持多模态输入',
+        },
       ],
       defaultModel:
         props.sessionModelId || preferenceService.get<string>(AINativeSettingSectionsId.ModelID) || 'deepseek-r1',
@@ -330,6 +468,13 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
           onClick: handleShowMCPConfig,
           position: FooterButtonPosition.LEFT,
         },
+        {
+          id: 'rules',
+          icon: 'rules',
+          title: 'Rules',
+          onClick: handleShowRules,
+          position: FooterButtonPosition.LEFT,
+        },
         {
           id: 'upload-image',
           icon: 'image',
@@ -352,7 +497,7 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
       showModelSelector: true,
       disableModelSelector: props.disableModelSelector,
     }),
-    [handleShowMCPConfig, props.disableModelSelector, props.sessionModelId],
+    [iconService, handleShowMCPConfig, handleShowRules, props.disableModelSelector, props.sessionModelId],
   );
 
   const handleStop = useCallback(() => {

package/src/browser/components/ChatReply.tsx

@@ -342,10 +342,10 @@ export const ChatReply = (props: IChatReplyProps) => {
                 }}
               >
                 <Icon iconClass='codicon codicon-sparkle' />
-                {localize('aiNative.chat.thinking')}
-                {isThinking ? (
-                  <Loading />
-                ) : collapseThinkingIndexSet.has(index) ? (
+                <span style={{ marginLeft: 4 }} className={isThinking ? styles.shiny_text : ''}>
+                  {localize('aiNative.chat.thinking')}
+                </span>
+                {isThinking ? null : collapseThinkingIndexSet.has(index) ? (
                   <Icon iconClass='codicon codicon-chevron-right' />
                 ) : (
                   <Icon iconClass='codicon codicon-chevron-down' />

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

@@ -23,6 +23,7 @@
     display: flex;
     align-items: center;
     font-weight: 500;
+    width: calc(100% - 20px);
     color: var(--design-text-foreground);
   }
 
@@ -34,6 +35,30 @@
     margin-left: 5px;
     font-size: 11px;
     color: var(--descriptionForeground);
+    width: calc(100% - 36px);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    .tool_prefix {
+      color: var(--design-text-placeholderForeground);
+      margin-right: 10px;
+      flex-shrink: 0;
+    }
+
+    .tool_name {
+      opacity: 0.8;
+      font-size: 9px;
+      flex: 1;
+      text-overflow: ellipsis;
+      direction: rtl;
+      unicode-bidi: plaintext;
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-block;
+      margin-right: 10px;
+      text-align: left;
+    }
   }
 
   .expand_icon {

package/src/browser/components/ChatToolRender.tsx

@@ -7,6 +7,7 @@ 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';
@@ -21,7 +22,9 @@ export const ChatToolRender = (props: { value: IChatToolContent['content']; mess
   if (!value || !value.function || !value.id) {
     return null;
   }
-  const label = mcpServerFeatureRegistry.getMCPTool(value.function.name)?.label || value.function.name;
+  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 ToolComponent = mcpServerFeatureRegistry.getToolComponent(value.function.name);
 
@@ -72,7 +75,12 @@ 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}>{label}</span>
+          <span className={styles.tool_label}>
+            <span className={styles.tool_prefix}>Called MCP Tool</span>
+            <span className={styles.tool_name} title={label}>
+              {label}
+            </span>
+          </span>
         </div>
         {value.state && (
           <div className={styles.tool_state}>

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

@@ -524,7 +524,6 @@
     display: flex;
     font-size: 11px;
     align-items: center;
-    min-width: 150px;
   }
 
   .mcp_desc {
@@ -585,7 +584,6 @@
   .reasoning_content {
     padding: 8px 12px;
     margin-top: 4px;
-    border-left: 2px solid var(--descriptionForeground);
     color: var(--descriptionForeground);
     background: var(--design-block-background);
     border-radius: 4px;
@@ -597,8 +595,8 @@
   align-items: center;
   padding: 0 4px;
   margin: 0 2px;
-  background: var(--badge-background);
-  color: var(--badge-foreground);
+  background-color: var(--chat-slashCommandBackground);
+  color: var(--chat-slashCommandForeground);
   border-radius: 3px;
   vertical-align: middle;
   font-size: 12px;
@@ -609,10 +607,6 @@
       margin-right: 3px;
     }
   }
-  &:hover {
-    background-color: var(--chat-slashCommandBackground);
-    color: var(--chat-slashCommandForeground);
-  }
 }
 
 .attachment_text {
@@ -620,6 +614,13 @@
   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 {
@@ -672,3 +673,31 @@
   border-radius: 3px;
   overflow: hidden;
 }
+
+.shiny_text {
+  color: #b5b5b5a4; /* Adjust this color to change intensity/style */
+  background: linear-gradient(
+    120deg,
+    rgba(255, 255, 255, 0) 40%,
+    rgba(255, 255, 255, 0.8) 50%,
+    rgba(255, 255, 255, 0) 60%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  display: inline-block;
+  animation: shine 5s linear infinite;
+}
+
+@keyframes shine {
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+}
+
+.shiny_text.disabled {
+  animation: none;
+}

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

@@ -6,7 +6,6 @@
 
   .model_selector {
     margin-right: 5px;
-    min-width: 150px;
   }
 
   .editor_area {
@@ -29,7 +28,9 @@
     word-break: break-word;
 
     .mention_tag {
+      height: 20px;
       margin: 0 2px;
+      margin-top: -3px;
       vertical-align: middle;
     }
   }
@@ -95,11 +96,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 +143,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 +264,7 @@
   display: inline;
   flex: 1;
   direction: rtl;
+  unicode-bidi: plaintext;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -341,6 +352,10 @@
   justify-content: center;
   margin-right: 3px;
   font-size: 12px;
+  &::before {
+    font-size: 12px;
+    background-size: 12px !important;
+  }
 }
 
 .empty_state {
@@ -404,3 +419,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);
+  }
+}