@opensumi/ide-ai-native 3.7.2-next-1740448398.0 → 3.7.2-next-1741226843.0

package/src/browser/components/ChatContext/ContextSelector.tsx

@@ -1,177 +0,0 @@
-import cls from 'classnames';
-import { debounce } from 'lodash';
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
-
-import { ClickOutside } from '@opensumi/ide-components/lib/click-outside';
-import { AppConfig, LabelService } from '@opensumi/ide-core-browser';
-import { Icon, Input, Scrollbars } from '@opensumi/ide-core-browser/lib/components';
-import { RecentFilesManager } from '@opensumi/ide-core-browser/lib/quick-open/recent-files';
-import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks/injectable-hooks';
-import { FileSearchServicePath, IFileSearchService } from '@opensumi/ide-file-search/lib/common/file-search';
-import { URI } from '@opensumi/ide-utils';
-
-import { FileContext } from '../../../common/llm-context';
-
-import styles from './style.module.less';
-
-interface CandidateFileProps {
-  uri: URI;
-  active: boolean;
-  selected: boolean;
-  onDidSelect: (val: URI) => void;
-  onDidDeselect: (val: URI) => void;
-}
-
-const CandidateFile = memo(({ uri, active, selected, onDidSelect, onDidDeselect }: CandidateFileProps) => {
-  const labelService = useInjectable<LabelService>(LabelService);
-  const appConfig = useInjectable<AppConfig>(AppConfig);
-  const itemsRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (active && itemsRef.current) {
-      const scrollBehavior: ScrollIntoViewOptions = {
-        behavior: 'instant',
-        block: 'end',
-      };
-      itemsRef.current.scrollIntoView(scrollBehavior);
-    }
-  }, [active, itemsRef.current]);
-
-  return (
-    <div
-      className={cls(styles.candidate_file, active && styles.active)}
-      ref={(ele) => (itemsRef.current = ele)}
-      onClick={() => (selected ? onDidDeselect(uri) : onDidSelect(uri))}
-    >
-      <Icon iconClass={labelService.getIcon(uri)} />
-      <span className={styles.basename}>{uri.path.base}</span>
-      <span className={styles.dir}>{URI.file(appConfig.workspaceDir).relative(uri.parent)?.toString()}</span>
-      {selected && <Icon icon='check' style={{ marginLeft: 'auto', color: 'var(--editorGutter-addedBackground)' }} />}
-    </div>
-  );
-});
-
-interface ContextSelectorProps {
-  addedFiles: FileContext[];
-  onDidSelect: (val: URI) => void;
-  onDidDeselect: (val: URI) => void;
-  onDidClose: () => void;
-}
-
-export const ContextSelector = memo(({ addedFiles, onDidDeselect, onDidSelect, onDidClose }: ContextSelectorProps) => {
-  const [candidateFiles, updateCandidateFiles] = useState<URI[]>([]);
-  const [activeFile, setActiveFile] = useState<URI | null>(null);
-  const [searching, toggleSearching] = useState(false);
-  const [searchResults, updateSearchResults] = useState<URI[]>([]);
-
-  const recentFilesManager: RecentFilesManager = useInjectable(RecentFilesManager);
-  const appConfig = useInjectable<AppConfig>(AppConfig);
-  const searchService = useInjectable<IFileSearchService>(FileSearchServicePath);
-
-  const container = useRef<HTMLDivElement | null>();
-
-  useEffect(() => {
-    if (candidateFiles.length === 0) {
-      recentFilesManager.getMostRecentlyOpenedFiles().then((files) => {
-        const addedUris = addedFiles.map((val) => val.uri);
-        const recentFiles = files.filter((file) => !addedUris.includes(new URI(file))).map((file) => new URI(file));
-        updateCandidateFiles(recentFiles);
-        setActiveFile(recentFiles[0] || null);
-      });
-    }
-  }, [addedFiles]);
-
-  const onDidInput = useCallback(
-    debounce((ev) => {
-      if (ev.target.value.trim() === '') {
-        updateSearchResults([]);
-        setActiveFile(candidateFiles[0]);
-        return;
-      }
-
-      toggleSearching(true);
-      searchService
-        .find(ev.target.value, {
-          rootUris: [appConfig.workspaceDir],
-          limit: 200,
-          useGitIgnore: true,
-          noIgnoreParent: true,
-          fuzzyMatch: true,
-        })
-        .then((res) => {
-          const results = res.map((val) => new URI(val));
-          updateSearchResults(results);
-          setActiveFile(results[0]);
-        })
-        .finally(() => {
-          toggleSearching(false);
-        });
-    }, 500),
-    [],
-  );
-
-  const onDidKeyDown = useCallback(
-    (event) => {
-      const { key } = event;
-      if (key === 'Escape') {
-        onDidClose();
-        return;
-      }
-
-      if (key === 'Enter' && activeFile) {
-        onDidSelect(activeFile);
-        return;
-      }
-
-      const validKeys = ['ArrowUp', 'ArrowDown'];
-
-      if (!validKeys.includes(key)) {
-        return;
-      }
-
-      const files = searchResults.length > 0 ? searchResults : candidateFiles;
-
-      if (files.length === 0) {
-        return;
-      }
-
-      const currentIndex = files.indexOf(activeFile!);
-      const safeIndex = currentIndex === -1 ? 0 : currentIndex;
-      const lastIndex = files.length - 1;
-
-      const nextIndex =
-        key === 'ArrowUp' ? (safeIndex > 0 ? safeIndex - 1 : lastIndex) : safeIndex < lastIndex ? safeIndex + 1 : 0;
-
-      setActiveFile(files[nextIndex]);
-    },
-    [activeFile, searchResults, candidateFiles],
-  );
-
-  return (
-    <ClickOutside mouseEvents={['click', 'contextmenu']} onOutsideClick={() => onDidClose()}>
-      <div className={styles.context_selector} onKeyDown={onDidKeyDown} tabIndex={-1}>
-        <div style={{ padding: '4px' }}>
-          <Input placeholder='Search files by name' autoFocus onInput={onDidInput} />
-        </div>
-        <Scrollbars forwardedRef={(el) => (el ? (container.current = el.ref) : null)}>
-          <div className={styles.context_list}>
-            {searching && <div className={styles.context_search_layer} />}
-            <span className={styles.list_desc}>
-              {searchResults.length > 0 ? 'Search Results' : 'Recent Opened Files'}
-            </span>
-            {(searchResults.length > 0 ? searchResults : candidateFiles).map((file) => (
-              <CandidateFile
-                key={file.toString()}
-                uri={file}
-                active={activeFile === file}
-                onDidSelect={onDidSelect}
-                onDidDeselect={onDidDeselect}
-                selected={!!addedFiles.find((val) => val.uri.isEqual(file))}
-              />
-            ))}
-          </div>
-        </Scrollbars>
-      </div>
-    </ClickOutside>
-  );
-});

package/src/browser/components/ChatContext/index.tsx

@@ -1,151 +0,0 @@
-import Collapse, { Panel } from 'rc-collapse';
-import React, { memo, useCallback, useEffect, useState } from 'react';
-
-import 'rc-collapse/assets/index.css';
-
-import { Icon } from '@opensumi/ide-components/lib/icon/icon';
-import { Popover, getIcon } from '@opensumi/ide-core-browser/lib/components';
-import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
-import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks/injectable-hooks';
-import { AppConfig } from '@opensumi/ide-core-browser/lib/react-providers/config-provider';
-import { LabelService } from '@opensumi/ide-core-browser/lib/services/label-service';
-import { localize } from '@opensumi/ide-core-common/lib/localize';
-import { Event, URI } from '@opensumi/ide-core-common/lib/utils';
-import { WorkbenchEditorService } from '@opensumi/ide-editor/lib/browser/types';
-
-import { FileContext, LLMContextService, LLMContextServiceToken } from '../../../common/llm-context';
-
-import { ContextSelector } from './ContextSelector';
-import styles from './style.module.less';
-
-const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
-const getRealHeight = (node) => ({ height: node.scrollHeight, opacity: 1 });
-const getCurrentHeight = (node) => ({ height: node.offsetHeight });
-const skipOpacityTransition = (_, event) => (event as TransitionEvent).propertyName === 'height';
-
-export const ChatContext = memo(() => {
-  const [addedFiles, updateAddedFiles] = useState<FileContext[]>([]);
-  const [contextOverlay, toggleContextOverlay] = useState(false);
-
-  const labelService = useInjectable<LabelService>(LabelService);
-  const appConfig = useInjectable<AppConfig>(AppConfig);
-  const workbenchEditorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
-  const contextService = useInjectable<LLMContextService>(LLMContextServiceToken);
-
-  useEffect(() => {
-    const disposable = Event.debounce(
-      contextService.onDidContextFilesChangeEvent,
-      (_, e) => e!,
-      50,
-    )((files) => {
-      if (files) {
-        updateAddedFiles(files.attached);
-      }
-    }, contextService);
-
-    return () => {
-      disposable.dispose();
-    };
-  }, []);
-
-  const openContextOverlay = useCallback(() => {
-    toggleContextOverlay(true);
-  }, [addedFiles]);
-
-  const onDidSelect = useCallback((uri: URI) => {
-    contextService.addFileToContext(uri, undefined, true);
-  }, []);
-
-  const onDidDeselect = useCallback((uri: URI) => {
-    contextService.removeFileFromContext(uri);
-  }, []);
-
-  const onDidClickFile = useCallback((uri: URI) => {
-    workbenchEditorService.open(uri);
-  }, []);
-
-  const onDidCleanFiles = useCallback((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    contextService.cleanFileContext();
-  }, []);
-
-  const onDidRemoveFile = useCallback((e, uri: URI) => {
-    e.stopPropagation();
-    e.preventDefault();
-    onDidDeselect(uri);
-  }, []);
-
-  return (
-    <div className={styles.chat_context}>
-      <Collapse
-        // @ts-ignore
-        expandIcon={({ isActive }) => (isActive ? <Icon icon='down' /> : <Icon icon='right' />)}
-        openMotion={{
-          motionName: 'rc-collapse-motion',
-          onEnterStart: getCollapsedHeight,
-          onEnterActive: getRealHeight,
-          onLeaveStart: getCurrentHeight,
-          onLeaveActive: getCollapsedHeight,
-          onEnterEnd: skipOpacityTransition,
-          onLeaveEnd: skipOpacityTransition,
-          motionDeadline: 100,
-          leavedClassName: styles.collapse_hide,
-        }}
-      >
-        <Panel
-          header={
-            <div className={styles.context_header}>
-              <h3 className={styles.chat_context_title}>
-                Context {addedFiles.length > 0 ? ` (${addedFiles.length} files)` : ''}
-              </h3>
-              <Popover
-                overlayClassName={styles.popover_icon}
-                id={'ai-context-header-clear'}
-                title={localize('aiNative.operate.clear.title')}
-              >
-                <EnhanceIcon
-                  wrapperClassName={styles.action_btn}
-                  className={getIcon('clear')}
-                  onClick={onDidCleanFiles}
-                  tabIndex={0}
-                  role='button'
-                  ariaLabel={localize('aiNative.operate.clear.title')}
-                />
-              </Popover>
-            </div>
-          }
-          key='context-panel'
-        >
-          <div className={styles.file_list}>
-            {addedFiles.map((file) => (
-              <div className={styles.selected_item} key={file.uri.toString()} onClick={() => onDidClickFile(file.uri)}>
-                <Icon iconClass={labelService.getIcon(file.uri)} />
-                <span className={styles.basename}>
-                  {file.uri.path.base}
-                  {file.selection ? ` (${file.selection[0]}-${file.selection[1]})` : ''}
-                </span>
-                <span className={styles.dir}>
-                  {URI.file(appConfig.workspaceDir).relative(file.uri.parent)?.toString()}
-                </span>
-                <Icon icon='close' className={styles.close_icon} onClick={(e) => onDidRemoveFile(e, file.uri)} />
-              </div>
-            ))}
-          </div>
-          <div className={styles.add_context} onClick={openContextOverlay}>
-            <Icon icon='add' />
-            Add Files
-          </div>
-        </Panel>
-      </Collapse>
-      {contextOverlay && (
-        <ContextSelector
-          onDidClose={() => toggleContextOverlay(false)}
-          onDidDeselect={onDidDeselect}
-          onDidSelect={onDidSelect}
-          addedFiles={addedFiles}
-        />
-      )}
-    </div>
-  );
-});

package/src/browser/components/ChatContext/style.module.less

@@ -1,201 +0,0 @@
-.chat_context {
-  position: relative;
-  margin-bottom: 10px;
-  background-color: var(--design-chatInput-background);
-  padding: 10px;
-  border-radius: 4px;
-  border: 1px solid var(--design-borderColor);
-  user-select: none;
-
-  :global(.rc-collapse) {
-    background-color: transparent !important;
-    border-radius: none !important;
-    border: none !important;
-  }
-
-  :global(.rc-collapse-title) {
-    flex: 1 !important;
-    line-height: 22px;
-  }
-
-  :global(.rc-collapse-expand-icon) {
-    line-height: 1;
-
-    :global(.kt-icon) {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
-  .collapse_hide {
-    display: none;
-  }
-
-  :global(.rc-collapse-header) {
-    padding: 0px !important;
-    line-height: 1 !important;
-  }
-
-  :global(.rc-collapse-content) {
-    padding: 0px !important;
-    background-color: transparent !important;
-  }
-
-  .context_header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .chat_context_title {
-      font-weight: 600;
-      font-size: 11px;
-      margin-bottom: 0px;
-      color: var(--descriptionForeground);
-    }
-  }
-
-  .context_selector {
-    position: absolute;
-    left: 0px;
-    bottom: 40px;
-    background-color: var(--design-container-background);
-    padding: 10px;
-    width: 100%;
-    padding: 0px;
-    border-radius: 4px;
-    height: 350px;
-    display: flex;
-    flex-direction: column;
-    user-select: none;
-    box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
-      0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
-
-    .context_list {
-      font-size: 12px;
-      overflow-y: auto;
-      user-select: none;
-
-      .list_desc {
-        margin: 0px 10px;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        font-weight: bold;
-        color: var(--descriptionForeground);
-      }
-
-      .candidate_file {
-        padding: 0px 10px;
-        display: flex;
-        align-items: center;
-        height: 24px;
-        cursor: pointer;
-
-        &:hover {
-          background-color: var(--button-hoverBackground);
-        }
-
-        .basename {
-          color: var(--foreground);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          margin-left: 5px;
-        }
-
-        .dir {
-          color: var(--descriptionForeground);
-          margin-left: 15px;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-      }
-
-      .active {
-        background-color: var(--editor-background);
-        color: var(--foreground);
-      }
-    }
-
-    .context_search_layer {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-color: var(--inputOption-hoverBackground);
-    }
-  }
-
-  .file_list {
-    margin-top: 5px;
-    max-height: 300px;
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    .selected_item {
-      display: flex;
-      align-items: center;
-      font-size: 11px;
-      margin-right: 5px;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding: 0px 4px;
-      margin-bottom: 4px;
-      cursor: pointer;
-      transition: all 0.2s;
-
-      .close_icon {
-        font-size: 12px !important;
-        margin-left: auto;
-      }
-
-      :global(.kt-icon) {
-        display: flex;
-        font-size: 11px;
-      }
-
-      .basename {
-        margin-left: 4px;
-        color: var(--editor-foreground);
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        width: 75%;
-
-        &:hover {
-          color: var(--badge-foreground);
-        }
-      }
-
-      .dir {
-        color: var(--descriptionForeground);
-        margin-left: 15px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .add_context {
-    display: inline-flex;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: 4px;
-    font-size: 11px;
-    margin-right: 5px;
-    height: 24px;
-    margin-top: 10px;
-    align-items: center;
-    user-select: none;
-    transition: all 0.2s;
-    color: var(--design-text-foreground);
-    padding: 0px 5px;
-
-    &:hover {
-      border-color: var(--kt-selectOption-activeBorder);
-    }
-  }
-}