@opensumi/ide-ai-native 3.8.3-next-1741850419.0 → 3.8.3-next-1741917543.0

package/src/browser/components/ChatMentionInput.tsx

@@ -1,276 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { LabelService, RecentFilesManager, useInjectable } from '@opensumi/ide-core-browser';
-import { getIcon } from '@opensumi/ide-core-browser/lib/components';
-import { URI, localize } from '@opensumi/ide-core-common';
-import { CommandService } from '@opensumi/ide-core-common/lib/command';
-import { WorkbenchEditorService } from '@opensumi/ide-editor';
-import { FileSearchServicePath, IFileSearchService } from '@opensumi/ide-file-search';
-import { IWorkspaceService } from '@opensumi/ide-workspace';
-
-import { IChatInternalService } from '../../common';
-import { ChatInternalService } from '../chat/chat.internal.service';
-import { OPEN_MCP_CONFIG_COMMAND } from '../mcp/config/mcp-config.commands';
-
-import styles from './components.module.less';
-import { MentionInput } from './mention-input/mention-input';
-import { FooterButtonPosition, FooterConfig, MentionItem, MentionType } from './mention-input/types';
-
-export interface IChatMentionInputProps {
-  onSend: (value: string, agentId?: string, command?: string, option?: { model: string; [key: string]: any }) => void;
-  onValueChange?: (value: string) => void;
-  onExpand?: (value: boolean) => void;
-  placeholder?: string;
-  enableOptions?: boolean;
-  disabled?: boolean;
-  sendBtnClassName?: string;
-  defaultHeight?: number;
-  value?: string;
-  autoFocus?: boolean;
-  theme?: string | null;
-  setTheme: (theme: string | null) => void;
-  agentId: string;
-  setAgentId: (id: string) => void;
-  defaultAgentId?: string;
-  command: string;
-  setCommand: (command: string) => void;
-}
-
-// 指令命令激活组件
-export const ChatMentionInput = (props: IChatMentionInputProps) => {
-  const { onSend, disabled = false } = props;
-
-  const [value, setValue] = useState(props.value || '');
-  const aiChatService = useInjectable<ChatInternalService>(IChatInternalService);
-  const commandService = useInjectable<CommandService>(CommandService);
-  const searchService = useInjectable<IFileSearchService>(FileSearchServicePath);
-  const recentFilesManager = useInjectable<RecentFilesManager>(RecentFilesManager);
-  const workspaceService = useInjectable<IWorkspaceService>(IWorkspaceService);
-  const editorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
-  const labelService = useInjectable<LabelService>(LabelService);
-
-  const handleShowMCPConfig = React.useCallback(() => {
-    commandService.executeCommand(OPEN_MCP_CONFIG_COMMAND.id);
-  }, [commandService]);
-
-  useEffect(() => {
-    if (props.value !== value) {
-      setValue(props.value || '');
-    }
-  }, [props.value]);
-
-  // 默认菜单项
-  const defaultMenuItems: MentionItem[] = [
-    // {
-    //   id: 'code',
-    //   type: 'code',
-    //   text: 'Code',
-    //   icon: getIcon('codebraces'),
-    //   getHighestLevelItems: () => [],
-    //   getItems: async (searchText: string) => {
-    //     const currentEditor = editorService.currentEditor;
-    //     if (!currentEditor) {
-    //       return [];
-    //     }
-    //     const currentDocumentModel = currentEditor.currentDocumentModel;
-    //     if (!currentDocumentModel) {
-    //       return [];
-    //     }
-    //     const symbols = await commandService.executeCommand('_executeFormatDocumentProvider', currentDocumentModel.uri.codeUri);
-    //     return [];
-    //   },
-    // },
-    {
-      id: MentionType.FILE,
-      type: MentionType.FILE,
-      text: 'File',
-      icon: getIcon('file'),
-      getHighestLevelItems: () => {
-        const currentEditor = editorService.currentEditor;
-        const currentUri = currentEditor?.currentUri;
-        if (!currentUri) {
-          return [];
-        }
-        return [
-          {
-            id: currentUri.codeUri.fsPath,
-            type: MentionType.FILE,
-            text: currentUri.displayName,
-            value: currentUri.codeUri.fsPath,
-            description: `(${localize('aiNative.chat.defaultContextFile')})`,
-            contextId: currentUri.codeUri.fsPath,
-            icon: labelService.getIcon(currentUri),
-          },
-        ];
-      },
-      getItems: async (searchText: string) => {
-        if (!searchText) {
-          const recentFile = await recentFilesManager.getMostRecentlyOpenedFiles();
-          return Promise.all(
-            recentFile.map(async (file) => {
-              const uri = new URI(file);
-              const relatveParentPath = (await workspaceService.asRelativePath(uri.parent))?.path;
-              return {
-                id: uri.codeUri.fsPath,
-                type: MentionType.FILE,
-                text: uri.displayName,
-                value: uri.codeUri.fsPath,
-                description: relatveParentPath || '',
-                contextId: uri.codeUri.fsPath,
-                icon: labelService.getIcon(uri),
-              };
-            }),
-          );
-        } else {
-          const rootUris = (await workspaceService.roots).map((root) => new URI(root.uri).codeUri.fsPath.toString());
-          const results = await searchService.find(searchText, {
-            rootUris,
-            useGitIgnore: true,
-            noIgnoreParent: true,
-            fuzzyMatch: true,
-            limit: 10,
-          });
-          return Promise.all(
-            results.map(async (file) => {
-              const uri = new URI(file);
-              const relatveParentPath = (await workspaceService.asRelativePath(uri.parent))?.path;
-              return {
-                id: uri.codeUri.fsPath,
-                type: MentionType.FILE,
-                text: uri.displayName,
-                value: uri.codeUri.fsPath,
-                description: relatveParentPath || '',
-                contextId: uri.codeUri.fsPath,
-                icon: labelService.getIcon(uri),
-              };
-            }),
-          );
-        }
-      },
-    },
-    {
-      id: MentionType.FOLDER,
-      type: MentionType.FOLDER,
-      text: 'Folder',
-      icon: getIcon('folder'),
-      getHighestLevelItems: () => {
-        const currentEditor = editorService.currentEditor;
-        const currentFolderUri = currentEditor?.currentUri?.parent;
-        if (!currentFolderUri) {
-          return [];
-        }
-        if (currentFolderUri.toString() === workspaceService.workspace?.uri) {
-          return [];
-        }
-        return [
-          {
-            id: currentFolderUri.codeUri.fsPath,
-            type: MentionType.FOLDER,
-            text: currentFolderUri.displayName,
-            value: currentFolderUri.codeUri.fsPath,
-            description: `(${localize('aiNative.chat.defaultContextFolder')})`,
-            contextId: currentFolderUri.codeUri.fsPath,
-            icon: getIcon('folder'),
-          },
-        ];
-      },
-      getItems: async (searchText: string) => {
-        let folders: MentionItem[] = [];
-        if (!searchText) {
-          const recentFile = await recentFilesManager.getMostRecentlyOpenedFiles();
-          const recentFolder = Array.from(new Set(recentFile.map((file) => new URI(file).parent.codeUri.fsPath)));
-          folders = await Promise.all(
-            recentFolder.map(async (folder) => {
-              const uri = new URI(folder);
-              const relativePath = await workspaceService.asRelativePath(uri);
-              return {
-                id: uri.codeUri.fsPath,
-                type: MentionType.FOLDER,
-                text: uri.displayName,
-                value: uri.codeUri.fsPath,
-                description: relativePath?.root ? relativePath.path : '',
-                contextId: uri.codeUri.fsPath,
-                icon: getIcon('folder'),
-              };
-            }),
-          );
-        } else {
-          const rootUris = (await workspaceService.roots).map((root) => new URI(root.uri).codeUri.fsPath);
-          const results = await searchService.find(searchText, {
-            rootUris,
-            useGitIgnore: true,
-            noIgnoreParent: true,
-            fuzzyMatch: true,
-            limit: 10,
-            onlyFolders: true,
-          });
-          folders = await Promise.all(
-            results.map(async (folder) => {
-              const uri = new URI(folder);
-              return {
-                id: uri.codeUri.fsPath,
-                type: MentionType.FOLDER,
-                text: uri.displayName,
-                value: uri.codeUri.fsPath,
-                description: (await workspaceService.asRelativePath(uri.parent))?.path || '',
-                contextId: uri.codeUri.fsPath,
-                icon: getIcon('folder'),
-              };
-            }),
-          );
-        }
-        return folders.filter((folder) => folder.id !== new URI(workspaceService.workspace?.uri).codeUri.fsPath);
-      },
-    },
-  ];
-
-  const defaultMentionInputFooterOptions: FooterConfig = useMemo(
-    () => ({
-      modelOptions: [
-        { label: 'QWQ 32B', value: 'qwq-32b' },
-        { label: 'DeepSeek R1', value: 'deepseek-r1' },
-      ],
-      defaultModel: 'deepseek-r1',
-      buttons: [
-        {
-          id: 'mcp-server',
-          icon: 'mcp',
-          title: 'MCP Server',
-          onClick: handleShowMCPConfig,
-          position: FooterButtonPosition.LEFT,
-        },
-      ],
-      showModelSelector: true,
-    }),
-    [handleShowMCPConfig],
-  );
-
-  const handleStop = useCallback(() => {
-    aiChatService.cancelRequest();
-  }, []);
-
-  const handleSend = useCallback(
-    async (content: string, option?: { model: string; [key: string]: any }) => {
-      if (disabled) {
-        return;
-      }
-      onSend(content, undefined, undefined, option);
-    },
-    [onSend, editorService, disabled],
-  );
-
-  return (
-    <div className={styles.chat_input_container}>
-      <MentionInput
-        mentionItems={defaultMenuItems}
-        onSend={handleSend}
-        onStop={handleStop}
-        loading={disabled}
-        labelService={labelService}
-        workspaceService={workspaceService}
-        placeholder={localize('aiNative.chat.input.placeholder.default')}
-        footerConfig={defaultMentionInputFooterOptions}
-      />
-    </div>
-  );
-};

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

@@ -1,333 +0,0 @@
-.input_container {
-  position: relative;
-  width: 100%;
-  margin: 0 auto;
-  border-radius: 4px;
-
-  .model_selector {
-    margin-right: 5px;
-    min-width: 150px;
-  }
-
-  .editor_area {
-    position: relative;
-    padding: 0 15px;
-    min-height: 42px;
-    max-height: 105px;
-  }
-
-  .editor {
-    width: 100%;
-    background-color: transparent;
-    border: none;
-    font-size: 14px;
-    line-height: 1.5;
-    outline: none;
-    resize: none;
-    min-height: 24px;
-    max-height: 120px;
-    overflow-y: auto;
-    border-radius: 4px;
-    word-break: break-word;
-
-    .mention_tag {
-      margin: 0 2px;
-      vertical-align: middle;
-    }
-  }
-
-  .editor:empty:before,
-  .editor[data-content=''] + .editor:before {
-    content: attr(data-placeholder);
-    color: var(--descriptionForeground);
-    pointer-events: none;
-    display: block;
-  }
-
-  .ai_enhance_icon {
-    border-radius: 6px;
-    padding: 2px 3px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    white-space: nowrap;
-    box-sizing: border-box;
-
-    span {
-      color: var(--design-text-foreground);
-    }
-
-    &:hover {
-      background-color: var(--badge-background);
-
-      span {
-        color: var(--badge-foreground);
-      }
-    }
-
-    > span {
-      &::before {
-        font-size: 14px;
-      }
-    }
-  }
-
-  .footer {
-    padding: 12px 15px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: row;
-
-    .left_control {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      flex-direction: row;
-      flex: 1;
-    }
-
-    .right_control {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      flex-direction: row;
-
-      .send_logo,
-      .stop_logo {
-        background-color: var(--badge-background);
-        color: var(--badge-foreground);
-        .stop_logo_icon {
-          line-height: 16px;
-          color: var(--kt-dangerButton-background);
-        }
-      }
-      .send_logo {
-        &:hover {
-          background-color: var(--kt-primaryButton-background);
-
-          .send_logo_icon {
-            color: var(--kt-primaryButton-foreground);
-          }
-        }
-      }
-    }
-  }
-
-  .send_button {
-    color: var(--icon-foreground);
-    border: none;
-    border-radius: 4px;
-    padding: 6px 12px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.2s;
-  }
-
-  .send_button:hover {
-    background-color: var(--notification-success-background);
-  }
-}
-
-.mention_panel_container {
-  position: absolute;
-  top: -20px;
-  left: 0;
-  right: 0;
-  width: 100%;
-  z-index: 1000;
-  transform: translateY(-100%);
-  display: flex;
-  justify-content: center;
-}
-
-.mention_panel {
-  background-color: var(--editor-background);
-  color: var(--editor-foreground);
-  border-radius: 6px;
-  max-height: 300px;
-  overflow-y: auto;
-  z-index: 1000;
-  padding: 8px 4px;
-  width: 100%;
-}
-
-.mention_item {
-  padding: 0 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  line-height: 22px;
-  height: 22px;
-  display: flex;
-  align-items: center;
-  transition: all 0.2s ease;
-  justify-content: space-between;
-  color: var(--foreground);
-  border-radius: 4px;
-  margin-bottom: 5px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.mention_list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.mention_item.active {
-  color: var(--kt-tree-inactiveSelectionForeground);
-  background: var(--kt-tree-inactiveSelectionBackground);
-}
-
-.mention_item:hover:not(.active) {
-  color: var(--kt-tree-inactiveSelectionForeground);
-  background: var(--kt-tree-inactiveSelectionBackground);
-}
-
-.mention_item_left {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-
-.mention_item_icon {
-  margin-right: 8px;
-  width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mention_item_text {
-  font-size: 13px;
-  margin-right: 6px;
-  display: inline;
-  white-space: pre;
-}
-
-.mention_item_description {
-  color: var(--descriptionForeground);
-  font-size: 13px;
-  display: inline;
-  flex: 1;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  margin-left: 5px;
-  text-align: right;
-}
-
-.mention_item_right {
-  color: #8b949e;
-  font-size: 12px;
-}
-
-.mention_panel_title {
-  padding: 8px 12px;
-  font-size: 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.back_button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-}
-
-.back_button:hover {
-  text-decoration: underline;
-}
-
-.mention_tag {
-  background-color: var(--chat-slashCommandBackground);
-  color: var(--chat-slashCommandForeground);
-  border-radius: 4px;
-  padding: 0 4px;
-  margin: 0 3px;
-  user-select: all;
-  cursor: default;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.mention_icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 3px;
-  font-size: 12px;
-}
-
-.empty_state {
-  padding: 5px 10px;
-  text-align: center;
-  color: var(--descriptionForeground);
-  font-size: 14px;
-}
-
-.model_selector {
-  margin-right: 5px;
-}
-
-.mcp_logo {
-  margin-right: 5px;
-}
-
-.send_logo {
-  color: var(--icon-foreground);
-  cursor: pointer;
-  margin-left: auto;
-
-  &:hover {
-    color: var(--notification-success-foreground);
-  }
-}
-
-.popover_icon {
-  // 移除 margin-left: auto
-}
-
-.loading_container {
-  display: none;
-}
-
-.loading_bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 2px;
-  width: 100%;
-  background: linear-gradient(90deg, transparent, var(--kt-primaryButton-background), transparent);
-  background-size: 200% 100%;
-  animation: loading-bar 1.5s infinite;
-  z-index: 10;
-}
-
-@keyframes loading-bar {
-  0% {
-    background-position: 100% 0;
-  }
-
-  100% {
-    background-position: -100% 0;
-  }
-}
-
-.no_results {
-  padding: 12px;
-  text-align: center;
-  color: #666;
-  font-style: italic;
-}