@opensumi/ide-ai-native 3.9.1-next-1749022986.0 → 3.9.1-next-1749023860.0

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

@@ -1,297 +0,0 @@
-.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

@@ -1,256 +0,0 @@
-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>
-  );
-};