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

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;
+  }
+}

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 {