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

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

@@ -0,0 +1,256 @@
+import cls from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { ClickOutside } from '@opensumi/ide-components/lib/click-outside';
+import { Icon, getIcon } from '@opensumi/ide-core-browser/lib/components';
+
+import styles from './mention-select.module.less';
+
+export interface ExtendedModelOption {
+  label: string;
+  value: string;
+  icon?: string;
+  iconClass?: string;
+  tags?: string[];
+  features?: string[];
+  description?: string;
+  disabled?: boolean;
+  badge?: string;
+  badgeColor?: string;
+  selected?: boolean;
+}
+
+export interface MentionSelectProps {
+  options: ExtendedModelOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  size?: 'small' | 'medium' | 'large';
+  showThinking?: boolean;
+  thinkingEnabled?: boolean;
+  onThinkingChange?: (enabled: boolean) => void;
+}
+
+const ThinkingToggle: React.FC<{
+  enabled: boolean;
+  onChange: (enabled: boolean) => void;
+}> = ({ enabled, onChange }) => (
+  <div className={styles.thinking_toggle} onClick={() => onChange(!enabled)}>
+    <Icon
+      iconClass={getIcon(enabled ? 'check' : 'circle-outline')}
+      className={cls(styles.thinking_icon, {
+        [styles.enabled]: enabled,
+      })}
+    />
+    <span className={styles.thinking_label}>Thinking</span>
+  </div>
+);
+
+export const MentionSelect: React.FC<MentionSelectProps> = ({
+  options,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  className,
+  size = 'small',
+  showThinking = false,
+  thinkingEnabled = false,
+  onThinkingChange,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [dropdownDirection, setDropdownDirection] = useState<'up' | 'down'>('up');
+  const selectRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find((option) => option.selected) || options.find((option) => option.value === value);
+
+  const handleToggle = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+      setActiveIndex(-1);
+    }
+  };
+
+  const handleSelect = (option: ExtendedModelOption) => {
+    if (!option.disabled) {
+      onChange?.(option.value);
+      setIsOpen(false);
+      setActiveIndex(-1);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+        } else if (activeIndex >= 0) {
+          handleSelect(options[activeIndex]);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setIsOpen(false);
+        setActiveIndex(-1);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+        } else {
+          setActiveIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));
+        }
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        if (isOpen) {
+          setActiveIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));
+        }
+        break;
+    }
+  };
+
+  const handleClickOutside = () => {
+    setIsOpen(false);
+    setActiveIndex(-1);
+  };
+
+  useEffect(() => {
+    if (isOpen && selectRef.current) {
+      const selectRect = selectRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const dropdownHeight = Math.min(400, options.length * 60);
+
+      const spaceAbove = selectRect.top;
+      const spaceBelow = viewportHeight - selectRect.bottom;
+
+      if (spaceAbove < dropdownHeight && spaceBelow > spaceAbove) {
+        setDropdownDirection('down');
+      } else {
+        setDropdownDirection('up');
+      }
+    }
+  }, [isOpen, options.length]);
+
+  useEffect(() => {
+    if (isOpen && activeIndex >= 0 && dropdownRef.current) {
+      const activeElement = dropdownRef.current.children[activeIndex] as HTMLElement;
+      if (activeElement) {
+        activeElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        });
+      }
+    }
+  }, [isOpen, activeIndex]);
+
+  return (
+    <ClickOutside onOutsideClick={handleClickOutside}>
+      <div
+        ref={selectRef}
+        className={cls(
+          styles.mention_select,
+          styles[`size_${size}`],
+          {
+            [styles.disabled]: disabled,
+            [styles.open]: isOpen,
+            [styles.dropdown_up]: dropdownDirection === 'up',
+            [styles.dropdown_down]: dropdownDirection === 'down',
+          },
+          className,
+        )}
+        onClick={handleToggle}
+        onKeyDown={handleKeyDown}
+        tabIndex={disabled ? -1 : 0}
+        role='combobox'
+        aria-expanded={isOpen}
+        aria-haspopup='listbox'
+      >
+        <div className={styles.select_trigger}>
+          <div className={styles.select_content}>
+            {selectedOption ? (
+              <div className={styles.selected_option}>
+                <span className={styles.option_label}>{selectedOption.label}</span>
+                {selectedOption.badge && (
+                  <span className={styles.option_badge} style={{ backgroundColor: selectedOption.badgeColor }}>
+                    {selectedOption.badge}
+                  </span>
+                )}
+              </div>
+            ) : (
+              <span className={styles.placeholder}>{placeholder}</span>
+            )}
+          </div>
+          <Icon
+            iconClass={getIcon('down-arrow')}
+            className={cls(styles.dropdown_arrow, {
+              [styles.open]: isOpen,
+            })}
+          />
+        </div>
+
+        {isOpen && (
+          <div ref={dropdownRef} className={styles.dropdown} role='listbox'>
+            {showThinking && onThinkingChange && (
+              <div className={styles.thinking_section}>
+                <ThinkingToggle enabled={thinkingEnabled} onChange={onThinkingChange} />
+                <div className={styles.divider} />
+              </div>
+            )}
+
+            {options.map((option, index) => (
+              <div
+                key={option.value}
+                className={cls(styles.option, {
+                  [styles.active]: index === activeIndex,
+                  [styles.selected]: option.selected || option.value === value,
+                  [styles.disabled]: option.disabled,
+                })}
+                onClick={() => handleSelect(option)}
+                role='option'
+                aria-selected={option.selected || option.value === value}
+              >
+                <div className={styles.option_main}>
+                  <div className={styles.option_header}>
+                    <div className={styles.option_title}>
+                      {option.icon && <Icon icon={option.icon} className={styles.option_icon} />}
+                      {option.iconClass && <Icon iconClass={option.iconClass} className={styles.option_icon} />}
+                      <span className={styles.option_label}>{option.label}</span>
+                      {option.badge && (
+                        <span className={styles.option_badge} style={{ backgroundColor: option.badgeColor }}>
+                          {option.badge}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  {option.description && <div className={styles.option_description}>{option.description}</div>}
+
+                  {option.tags && option.tags.length > 0 && (
+                    <div className={styles.option_tags}>
+                      {option.tags.map((tag, idx) => (
+                        <span key={idx} className={styles.tag}>
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </ClickOutside>
+  );
+};

package/src/browser/components/mention-input/types.ts

@@ -46,21 +46,19 @@ export interface MentionState {
 interface ModelOption {
   label: string;
   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 interface ExtendedModelOption extends ModelOption {
+  disabled?: boolean;
+  selected?: boolean; // 由外部控制选中状态
+}
+
 export enum FooterButtonPosition {
   LEFT = 'left',
   RIGHT = 'right',
@@ -89,6 +87,9 @@ export interface FooterConfig {
   buttons?: FooterButton[];
   showModelSelector?: boolean;
   disableModelSelector?: boolean;
+  showThinking?: boolean;
+  thinkingEnabled?: boolean;
+  onThinkingChange?: (enabled: boolean) => void;
 }
 
 export interface MentionInputProps {

package/src/browser/rules/rules.module.less

@@ -80,6 +80,7 @@
 }
 
 .project_rules_header_left {
+  width: 100%;
   display: flex;
   flex-direction: column;
 }

package/src/browser/rules/rules.view.tsx

@@ -37,7 +37,7 @@ export const RulesView: React.FC = () => {
     [rulesService],
   );
 
-  const getFileNameFromPath = (path: string) => path.split('/').pop() || path;
+  const getFileNameFromPath = (path: string) => decodeURIComponent(path.split('/').pop() || path);
 
   const hasWarning = (rule: ProjectRule) => !rule.description && !rule.alwaysApply && !rule.globs;