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

package/src/browser/components/ChatMentionInput.tsx

@@ -0,0 +1,276 @@
+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/ChatThinking.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useInjectable } from '@opensumi/ide-core-browser';
-import { Icon, getIcon } from '@opensumi/ide-core-browser/lib/components';
 import { EnhanceIcon, Thumbs } from '@opensumi/ide-core-browser/lib/components/ai-native';
 import { Progress } from '@opensumi/ide-core-browser/lib/progress/progress-bar';
 import { ChatRenderRegistryToken, isUndefined, localize } from '@opensumi/ide-core-common';
@@ -13,7 +12,7 @@ import { ChatRenderRegistry } from '../chat/chat.render.registry';
 import styles from './components.module.less';
 
 interface ITinkingProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | string | React.ReactNode[];
   hasMessage?: boolean;
   message?: string;
   onRegenerate?: () => void;
@@ -32,8 +31,15 @@ export const ChatThinking = (props: ITinkingProps) => {
     [chatRenderRegistry, chatRenderRegistry.chatThinkingRender],
   );
 
+  const isEmptyChildren = useMemo(() => {
+    if (Array.isArray(children)) {
+      return children.length === 0;
+    }
+    return !children;
+  }, [children]);
+
   const renderContent = useCallback(() => {
-    if (!children) {
+    if (isEmptyChildren) {
       if (CustomThinkingRender) {
         return <CustomThinkingRender thinkingText={thinkingText} />;
       }
@@ -52,7 +58,7 @@ export const ChatThinking = (props: ITinkingProps) => {
           {!CustomThinkingRender && (
             <span className={styles.progress_bar}>
               {/* 保持动画效果一致 */}
-              {!children && <Progress loading={true} wrapperClassName={styles.ai_native_progress_wrapper} />}
+              {isEmptyChildren && <Progress loading={true} wrapperClassName={styles.ai_native_progress_wrapper} />}
             </span>
           )}
           {/* {showStop && (

package/src/browser/components/change-list.module.less

@@ -103,6 +103,8 @@
 .fileStats {
   font-size: 12px;
   display: flex;
+  flex: 1;
+  justify-content: flex-end;
   align-items: center;
   gap: 4px;
 }

package/src/browser/components/{ChatContext → chat-context}/index.tsx

@@ -15,7 +15,7 @@ import { WorkbenchEditorService } from '@opensumi/ide-editor/lib/browser/types';
 
 import { FileContext, LLMContextService, LLMContextServiceToken } from '../../../common/llm-context';
 
-import { ContextSelector } from './ContextSelector';
+import { ContextSelector } from './context-selector';
 import styles from './style.module.less';
 
 const getCollapsedHeight = () => ({ height: 0, opacity: 0 });

package/src/browser/components/chat-history.module.less

@@ -1,4 +1,4 @@
-.dm-chat-history-header {
+.chat_history_header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -8,7 +8,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  .dm-chat-history-header-title {
+  .chat_history_header_title {
     opacity: 0.6;
     display: flex;
     align-items: center;
@@ -22,22 +22,34 @@
     }
   }
 
-  .dm-chat-history-header-actions {
+  .chat_history_header_actions {
     display: flex;
     align-items: center;
     font-size: 12px;
 
-    .dm-chat-history-header-actions-history {
+    .chat_history_header_actions_history {
       cursor: pointer;
     }
 
-    .dm-chat-history-header-actions-new {
+    .chat_history_header_actions_new {
       margin-left: 2px;
       cursor: pointer;
     }
 
-    .kt-popover-title {
-      margin-bottom: 8px;
+    :global {
+      .kt-popover-title {
+        margin-bottom: 8px;
+      }
+      .kt-popover-content {
+        background-color: var(--editor-background);
+        color: var(--editor-foreground);
+      }
+      .kt-popover-arrow {
+        border-bottom-color: var(--editor-background);
+      }
+      .kt-popover {
+        opacity: 1;
+      }
     }
   }
 
@@ -75,7 +87,12 @@
     }
   }
 
-  .dm-chat-history-list {
+  .chat_history_search {
+    width: 100%;
+    border-radius: 4px;
+  }
+
+  .chat_history_list {
     overflow: auto;
     max-height: 400px;
     width: 300px;
@@ -83,12 +100,12 @@
     font-size: 13px;
   }
 
-  .dm-chat-history-time {
+  .chat_history_time {
     opacity: 0.6;
     padding-left: 4px;
   }
 
-  .dm-chat-history-item {
+  .chat_history_item {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -97,7 +114,7 @@
     margin-top: 2px;
     border-radius: 3px;
 
-    .dm-chat-history-item-content {
+    .chat_history_item_content {
       display: flex;
       align-items: center;
       width: 100%;
@@ -105,28 +122,28 @@
       height: 24px;
     }
 
-    .dm-chat-history-item-title {
+    .chat_history_item_title {
       overflow: hidden;
       text-overflow: ellipsis;
       display: inline-block;
       white-space: nowrap;
     }
 
-    .dm-chat-history-item-actions {
+    .chat_history_item_actions {
       display: none;
     }
 
-    .dm-chat-history-item-selected {
+    .chat_history_item_selected {
       background: var(--textPreformat-background);
     }
 
     &:hover {
       background: var(--textPreformat-background);
 
-      .dm-chat-history-item-actions {
+      .chat_history_item_actions {
         display: block;
       }
-      .dm-chat-history-item-content {
+      .chat_history_item_content {
         max-width: calc(100% - 50px);
       }
     }

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

@@ -4,9 +4,9 @@
   height: 100%;
   .stop {
     position: absolute;
-    bottom: -38px;
+    bottom: -15px;
     padding-top: 12px;
-    left: -8px;
+    left: -9px;
     width: 105%;
   }
 
@@ -453,7 +453,13 @@
   h3,
   h4,
   h5 {
-    color: #fff;
+    color: var(--foreground);
+  }
+
+  hr {
+    border-bottom: 0;
+    opacity: 0.3;
+    border-color: var(--descriptionForeground);
   }
 
   p {
@@ -519,6 +525,7 @@
     display: flex;
     font-size: 11px;
     align-items: center;
+    min-width: 150px;
   }
 
   .mcp_desc {
@@ -565,3 +572,32 @@
     color: var(--descriptionForeground);
   }
 }
+
+.attachment {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 4px;
+  margin: 0 2px;
+  background: var(--badge-background);
+  color: var(--badge-foreground);
+  border-radius: 3px;
+  vertical-align: middle;
+  font-size: 12px;
+  cursor: pointer;
+  :global {
+    .kt-icon {
+      font-size: 12px;
+      margin-right: 3px;
+    }
+  }
+  &:hover {
+    background-color: var(--chat-slashCommandBackground);
+    color: var(--chat-slashCommandForeground);
+  }
+}
+
+.attachment_text {
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 12px;
+}