@opensumi/ide-ai-native 3.9.1-next-1748944723.0 → 3.9.1-next-1749007675.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>
-  );
-};

package/src/browser/rules/rules.contribution.ts

@@ -1,105 +0,0 @@
-import { Autowired } from '@opensumi/di';
-import { getIcon } from '@opensumi/ide-components';
-import { ClientAppContribution } from '@opensumi/ide-core-browser';
-import { LabelService } from '@opensumi/ide-core-browser/lib/services';
-import {
-  CommandContribution,
-  CommandRegistry,
-  Domain,
-  RulesServiceToken,
-  URI,
-  localize,
-} from '@opensumi/ide-core-common';
-import {
-  BrowserEditorContribution,
-  EditorComponentRegistry,
-  EditorComponentRenderMode,
-  IResource,
-  ResourceService,
-  WorkbenchEditorService,
-} from '@opensumi/ide-editor/lib/browser/types';
-import { IconService } from '@opensumi/ide-theme/lib/browser';
-import { IWorkspaceService } from '@opensumi/ide-workspace/lib/common';
-
-import { RulesService } from './rules.service';
-import { RulesView } from './rules.view';
-
-export namespace RulesCommands {
-  export const OPEN_RULES_FILE = {
-    id: 'rules.openRulesConfig',
-    label: 'Open Rules Configuration',
-  };
-}
-
-const COMPONENTS_ID = 'opensumi-rules-viewer';
-export const RULES_COMPONENTS_SCHEME_ID = 'rules';
-
-export type IRulesResource = IResource<{ configType: string }>;
-
-@Domain(BrowserEditorContribution, CommandContribution, ClientAppContribution)
-export class RulesContribution implements BrowserEditorContribution, CommandContribution, ClientAppContribution {
-  @Autowired(IWorkspaceService)
-  protected readonly workspaceService: IWorkspaceService;
-
-  @Autowired(IconService)
-  protected readonly iconService: IconService;
-
-  @Autowired(WorkbenchEditorService)
-  protected readonly editorService: WorkbenchEditorService;
-
-  @Autowired()
-  labelService: LabelService;
-
-  @Autowired(RulesServiceToken)
-  protected readonly rulesService: RulesService;
-
-  onStart() {
-    this.rulesService.initProjectRules();
-  }
-
-  registerEditorComponent(registry: EditorComponentRegistry) {
-    registry.registerEditorComponent({
-      uid: COMPONENTS_ID,
-      scheme: RULES_COMPONENTS_SCHEME_ID,
-      component: RulesView,
-      renderMode: EditorComponentRenderMode.ONE_PER_WORKBENCH,
-    });
-
-    registry.registerEditorComponentResolver(RULES_COMPONENTS_SCHEME_ID, (resource, results) => {
-      results.push({
-        type: 'component',
-        componentId: COMPONENTS_ID,
-      });
-    });
-  }
-
-  registerResource(service: ResourceService) {
-    service.registerResourceProvider({
-      scheme: RULES_COMPONENTS_SCHEME_ID,
-      provideResource: async (uri: URI): Promise<IRulesResource> => {
-        const { configType } = uri.getParsedQuery();
-
-        return {
-          uri,
-          name: localize('ai.native.rules.title'),
-          icon: getIcon('rules'),
-          metadata: {
-            configType,
-          },
-        };
-      },
-    });
-  }
-
-  registerCommands(registry: CommandRegistry) {
-    registry.registerCommand(RulesCommands.OPEN_RULES_FILE, {
-      execute: () => {
-        const uri = new URI().withScheme(RULES_COMPONENTS_SCHEME_ID);
-        this.editorService.open(uri, {
-          preview: false,
-          focus: true,
-        });
-      },
-    });
-  }
-}

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

@@ -1,174 +0,0 @@
-.container {
-  padding: 20px;
-  color: var(--foreground);
-  textarea {
-    resize: vertical;
-    min-height: 60px;
-  }
-  input,
-  textarea {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid var(--input-border);
-    border-radius: 4px;
-    background-color: var(--input-background);
-    color: var(--input-foreground);
-    font-size: 13px;
-    font-family: var(--monaco-monospace-font);
-
-    &:focus {
-      border-color: var(--focusBorder);
-      outline: none;
-    }
-
-    &::placeholder {
-      color: var(--descriptionForeground);
-      opacity: 0.6;
-    }
-  }
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 24px;
-}
-
-.title {
-  margin: 0 0 8px 0;
-  font-size: 24px;
-  font-weight: 600;
-}
-
-.description {
-  margin: 0;
-  color: var(--descriptionForeground);
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.user_rules {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  .user_rules_header {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.project_rules {
-  margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  h3 {
-    position: relative;
-  }
-  .actionButton {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-}
-
-.project_rules_header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.project_rules_header_left {
-  display: flex;
-  flex-direction: column;
-}
-
-.actionButton {
-  padding: 8px 16px;
-  border-radius: 4px;
-  background-color: var(--button-primary-background);
-  color: var(--button-primary-foreground);
-  border: none;
-  cursor: pointer;
-  font-size: 13px;
-  .actionButtonIcon {
-    margin-right: 5px;
-  }
-
-  &:hover {
-    background-color: var(--button-primary-hover-background);
-  }
-}
-
-.project_rules_list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.rule_item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
-  background-color: var(--input-background);
-  opacity: 0.6;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.rule_item_left {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-}
-
-.rule_item_right {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-left: 16px;
-}
-
-.rule_filename {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--foreground);
-}
-
-.rule_description {
-  font-size: 12px;
-  color: var(--descriptionForeground);
-}
-
-.rule_warning {
-  font-size: 12px;
-  color: var(--editorWarning-foreground);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  &::before {
-    content: '⚠';
-    color: var(--editorWarning-foreground);
-  }
-}
-
-.rule_applies_to {
-  font-size: 12px;
-  color: var(--descriptionForeground);
-  font-family: var(--monaco-monospace-font);
-}
-
-.empty_state {
-  text-align: center;
-  padding: 32px;
-  color: var(--descriptionForeground);
-  font-style: italic;
-}