@opensumi/ide-ai-native 3.9.1-next-1749175927.0 → 3.9.1-next-1749181695.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,42 @@ export const ChatMentionInput = (props: IChatMentionInputProps) => {
       },
     },
   ];
-
   const defaultMentionInputFooterOptions: FooterConfig = useMemo(
     () => ({
       modelOptions: [
-        { label: 'Claude 4 Sonnet', value: 'claude_sonnet4' },
-        { 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',
@@ -464,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/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 {
@@ -679,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 {

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

@@ -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}>
@@ -1185,12 +1211,7 @@ export const MentionInput: React.FC<MentionInputProps> = ({
           {!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)}
-          >
+          <div key={`file-${index}`} className={styles.context_preview_item} data-type={MentionType.FILE}>
             <Icon
               iconClass={cls(
                 labelService?.getIcon(file.uri) || MentionType.FILE,
@@ -1202,74 +1223,36 @@ 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>
         ))}
 
         {attachedFiles.folders.map((folder, index) => (
-          <div
-            key={`folder-${index}`}
-            className={styles.context_preview_item}
-            data-type='folder'
-            onClick={() => contextService?.removeFileFromContext(folder.uri, true)}
-          >
+          <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}>
-              {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>
         ))}
 
         {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);
-                }
-              });
-            }}
-          >
+          <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}>
-              {rule.path.split('/').pop()?.replace('.mdc', '') || 'Unknown Rule'}
+              {getFileNameFromPath(rule.path).replace('.mdc', '')}
             </span>
           </div>
         ))}
       </div>
     ),
-    [
-      handleClearContext,
-      hasContext,
-      attachedFiles,
-      workspaceService,
-      labelService,
-      contextService,
-      handleTitleClick,
-      removeContext,
-    ],
+    [handleClearContext, hasContext, attachedFiles, labelService, contextService, handleTitleClick, removeContext],
   );
 
   return (
@@ -1304,13 +1287,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;
+  }
+}