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

package/src/browser/components/ChatMentionInput.tsx

@@ -24,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';
@@ -80,6 +82,7 @@ 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);
@@ -418,12 +421,31 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
       },
     },
   ];
-
   const defaultMentionInputFooterOptions: FooterConfig = useMemo(
     () => ({
       modelOptions: [
-        { label: 'Claude 4 Sonnet', value: 'claude_sonnet4' },
-        { label: 'DeepSeek R1', value: 'deepseek-r1' },
+        {
+          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',
+          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',
@@ -464,7 +486,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/components.module.less

@@ -524,7 +524,6 @@
     display: flex;
     font-size: 11px;
     align-items: center;
-    min-width: 150px;
   }
 
   .mcp_desc {
@@ -597,8 +596,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 +608,6 @@
       margin-right: 3px;
     }
   }
-  &:hover {
-    background-color: var(--chat-slashCommandBackground);
-    color: var(--chat-slashCommandForeground);
-  }
 }
 
 .attachment_text {

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

@@ -6,7 +6,6 @@
 
   .model_selector {
     margin-right: 5px;
-    min-width: 150px;
   }
 
   .editor_area {

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

@@ -2,7 +2,7 @@ import cls from 'classnames';
 import * as React from 'react';
 
 import { getSymbolIcon, localize } from '@opensumi/ide-core-browser';
-import { Icon, Popover, PopoverPosition, Select, getIcon } from '@opensumi/ide-core-browser/lib/components';
+import { Icon, Popover, PopoverPosition, 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';
 
@@ -11,6 +11,7 @@ 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,
@@ -1162,6 +1163,29 @@ 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) {
@@ -1175,6 +1199,8 @@ export const MentionInput: React.FC<MentionInputProps> = ({
     [contextService],
   );
 
+  const getFileNameFromPath = (path: string) => decodeURIComponent(path.split('/').pop() || 'Unknown Rule');
+
   const renderContextPreview = React.useCallback(
     () => (
       <div className={styles.context_preview_container}>
@@ -1202,11 +1228,7 @@ export const MentionInput: React.FC<MentionInputProps> = ({
               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>
+            <span className={styles.context_preview_item_text}>{new URI(file.uri.toString()).displayName}</span>
           </div>
         ))}
 
@@ -1222,11 +1244,7 @@ export const MentionInput: React.FC<MentionInputProps> = ({
               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>
+            <span className={styles.context_preview_item_text}>{new URI(folder.uri.toString()).displayName}</span>
           </div>
         ))}
 
@@ -1253,23 +1271,12 @@ export const MentionInput: React.FC<MentionInputProps> = ({
               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>
+            <span className={styles.context_preview_item_text}>{getFileNameFromPath(rule.path)}</span>
           </div>
         ))}
       </div>
     ),
-    [
-      handleClearContext,
-      hasContext,
-      attachedFiles,
-      workspaceService,
-      labelService,
-      contextService,
-      handleTitleClick,
-      removeContext,
-    ],
+    [handleClearContext, hasContext, attachedFiles, labelService, contextService, handleTitleClick, removeContext],
   );
 
   return (
@@ -1304,13 +1311,16 @@ export const MentionInput: React.FC<MentionInputProps> = ({
         <div className={styles.left_control}>
           {footerConfig.showModelSelector &&
             renderModelSelectorTip(
-              <Select
-                options={footerConfig.modelOptions || []}
+              <MentionSelect
+                options={getExtendedModelOptions}
                 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)}

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

@@ -0,0 +1,297 @@
+.mention_select {
+  position: relative;
+  display: inline-block;
+
+  &.size_small {
+    .select_trigger {
+      height: 20px;
+      padding: 0 6px;
+      font-size: 12px;
+    }
+  }
+
+  &.size_medium {
+    .select_trigger {
+      height: 32px;
+      padding: 0 12px;
+      font-size: 14px;
+    }
+  }
+
+  &.size_large {
+    .select_trigger {
+      height: 40px;
+      padding: 0 16px;
+      font-size: 16px;
+    }
+  }
+
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+
+    .select_trigger {
+      cursor: not-allowed;
+      background-color: var(--input-background-disabled);
+    }
+  }
+
+  .select_trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--input-background);
+    border: 1px solid var(--input-border);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    opacity: 0.7;
+
+    &:hover:not(.disabled) {
+      opacity: 1;
+    }
+  }
+
+  .select_content {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .selected_option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .option_icon {
+    flex-shrink: 0;
+    font-size: 14px;
+  }
+
+  .option_label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .option_badge {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 10px;
+    font-size: 10px;
+    color: white;
+    background-color: var(--badge-background);
+    white-space: nowrap;
+  }
+
+  .placeholder {
+    color: var(--input-placeholder-foreground);
+  }
+
+  .dropdown_arrow {
+    margin-left: 8px;
+    transition: transform 0.2s;
+    color: var(--icon-foreground);
+
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+
+  .dropdown {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: var(--editor-background);
+    border: 1px solid var(--dropdown-border);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.05);
+    max-height: 400px;
+    min-width: 300px;
+    overflow-y: auto;
+    padding: 4px;
+    animation: dropdownFadeIn 0.15s ease-out;
+
+    // 滚动条样式
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-thumb);
+      border-radius: 3px;
+      transition: background-color 0.2s;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: var(--scrollbar-thumb-hover);
+    }
+  }
+
+  @keyframes dropdownFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .thinking_section {
+    padding: 8px 12px 4px;
+  }
+
+  .thinking_toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 0;
+    cursor: pointer;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--list-hover-background);
+    }
+  }
+
+  .thinking_icon {
+    flex-shrink: 0;
+    color: var(--icon-foreground);
+
+    &.enabled {
+      color: var(--list-active-selection-foreground);
+    }
+  }
+
+  .thinking_label {
+    font-size: 13px;
+    color: var(--foreground);
+    font-weight: 500;
+  }
+
+  .divider {
+    height: 1px;
+    background-color: var(--separator-border);
+    margin: 8px 0 4px;
+  }
+
+  // 向上展开（默认）
+  &.dropdown_up .dropdown {
+    bottom: 100%;
+    margin-bottom: 4px;
+  }
+
+  // 向下展开
+  &.dropdown_down .dropdown {
+    top: 100%;
+    margin-top: 4px;
+  }
+
+  .option {
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+    border: 1px solid transparent;
+    box-sizing: content-box;
+    margin-bottom: 4px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    &:hover:not(.disabled) {
+      border-color: var(--dropdown-border);
+    }
+
+    &.active {
+      border-color: var(--dropdown-border);
+    }
+
+    &.selected {
+      background-color: var(--dropdown-background);
+
+      &::after {
+        content: '✓';
+        position: absolute;
+        top: 50%;
+        right: 12px;
+        transform: translateY(-50%);
+        color: var(--list-active-selection-foreground);
+        font-weight: bold;
+        font-size: 14px;
+        z-index: 1;
+      }
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        transform: none;
+        box-shadow: none;
+        border-color: transparent;
+      }
+    }
+  }
+
+  .option_main {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding-right: 24px;
+  }
+
+  .option_header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .option_title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+  }
+
+  .option_description {
+    font-size: 12px;
+    color: var(--descriptionForeground);
+    line-height: 1.4;
+    margin-top: 4px;
+  }
+
+  .option_tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 6px;
+  }
+
+  .tag {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 10px;
+    font-size: 10px;
+    background-color: var(--badge-background);
+    color: var(--badge-foreground);
+    white-space: nowrap;
+  }
+
+  .status_indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+}