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

package/src/browser/chat/chat.view.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { MessageList } from 'react-chat-elements';
 
-import { AppConfig, getIcon, useInjectable, useUpdateOnEvent } from '@opensumi/ide-core-browser';
+import {
+  AINativeConfigService,
+  AppConfig,
+  LabelService,
+  getIcon,
+  useInjectable,
+  useUpdateOnEvent,
+} from '@opensumi/ide-core-browser';
 import { Popover, PopoverPosition } from '@opensumi/ide-core-browser/lib/components';
 import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
 import {
@@ -14,6 +21,7 @@ import {
   ChatMessageRole,
   ChatRenderRegistryToken,
   ChatServiceToken,
+  CommandService,
   Disposable,
   DisposableCollection,
   IAIReporter,
@@ -28,16 +36,19 @@ import {
 import { WorkbenchEditorService } from '@opensumi/ide-editor';
 import { IMainLayoutService } from '@opensumi/ide-main-layout';
 import { IMessageService } from '@opensumi/ide-overlay';
-
 import 'react-chat-elements/dist/main.css';
+import { IWorkspaceService } from '@opensumi/ide-workspace';
+
 import { AI_CHAT_VIEW_ID, IChatAgentService, IChatInternalService, IChatMessageStructure } from '../../common';
+import { LLMContextService, LLMContextServiceToken } from '../../common/llm-context';
 import { CodeBlockData } from '../../common/types';
+import { cleanAttachedTextWrapper } from '../../common/utils';
 import { FileChange, FileListDisplay } from '../components/ChangeList';
-import { ChatContext } from '../components/ChatContext';
 import { CodeBlockWrapperInput } from '../components/ChatEditor';
 import ChatHistory, { IChatHistoryItem } from '../components/ChatHistory';
 import { ChatInput } from '../components/ChatInput';
 import { ChatMarkdown } from '../components/ChatMarkdown';
+import { ChatMentionInput } from '../components/ChatMentionInput';
 import { ChatNotify, ChatReply } from '../components/ChatReply';
 import { SlashCustomRender } from '../components/SlashCustomRender';
 import { MessageData, createMessageByAI, createMessageByUser } from '../components/utils';
@@ -105,6 +116,8 @@ export const AIChatView = () => {
   const chatFeatureRegistry = useInjectable<ChatFeatureRegistry>(ChatFeatureRegistryToken);
   const chatRenderRegistry = useInjectable<ChatRenderRegistry>(ChatRenderRegistryToken);
   const mcpServerRegistry = useInjectable<IMCPServerRegistry>(TokenMCPServerRegistry);
+  const aiNativeConfigService = useInjectable<AINativeConfigService>(AINativeConfigService);
+  const llmContextService = useInjectable<LLMContextService>(LLMContextServiceToken);
 
   const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
   const msgHistoryManager = aiChatService.sessionModel.history;
@@ -114,6 +127,9 @@ export const AIChatView = () => {
   const editorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
   const appConfig = useInjectable<AppConfig>(AppConfig);
   const applyService = useInjectable<BaseApplyService>(BaseApplyService);
+  const labelService = useInjectable<LabelService>(LabelService);
+  const workspaceService = useInjectable<IWorkspaceService>(IWorkspaceService);
+  const commandService = useInjectable<CommandService>(CommandService);
   const [shortcutCommands, setShortcutCommands] = React.useState<ChatSlashCommandItemModel[]>([]);
 
   const [changeList, setChangeList] = React.useState<FileChange[]>(getFileChanges(applyService.getSessionCodeBlocks()));
@@ -184,6 +200,9 @@ export const AIChatView = () => {
     if (chatRenderRegistry.chatInputRender) {
       return chatRenderRegistry.chatInputRender;
     }
+    if (aiNativeConfigService.capabilities.supportsMCP) {
+      return ChatMentionInput;
+    }
     return ChatInput;
   }, [chatRenderRegistry.chatInputRender]);
 
@@ -262,7 +281,7 @@ export const AIChatView = () => {
           if (loading) {
             return;
           }
-          await handleSend(message);
+          await handleSend(message.message, message.agentId, message.command);
         } else {
           if (message.agentId) {
             setAgentId(message.agentId);
@@ -349,6 +368,9 @@ export const AIChatView = () => {
                       text={message}
                       agentId={visibleAgentId}
                       command={command}
+                      labelService={labelService}
+                      workspaceService={workspaceService}
+                      commandService={commandService}
                     />
                   ),
                 },
@@ -454,7 +476,15 @@ export const AIChatView = () => {
           text: ChatUserRoleRender ? (
             <ChatUserRoleRender content={message} agentId={visibleAgentId} command={command} />
           ) : (
-            <CodeBlockWrapperInput relationId={relationId} text={message} agentId={visibleAgentId} command={command} />
+            <CodeBlockWrapperInput
+              labelService={labelService}
+              relationId={relationId}
+              text={message}
+              agentId={visibleAgentId}
+              command={command}
+              workspaceService={workspaceService}
+              commandService={commandService}
+            />
           ),
         },
         styles.chat_message_code,
@@ -634,15 +664,50 @@ export const AIChatView = () => {
         msgId,
       });
     },
-    [chatRenderRegistry, chatRenderRegistry.chatUserRoleRender, msgHistoryManager, scrollToBottom],
+    [chatRenderRegistry, chatRenderRegistry.chatUserRoleRender, msgHistoryManager, scrollToBottom, loading],
   );
 
   const handleSend = React.useCallback(
-    async (value: IChatMessageStructure) => {
-      const { message, command, reportExtra } = value;
+    async (message: string, agentId?: string, command?: string) => {
+      const reportExtra = {
+        actionSource: ActionSourceEnum.Chat,
+        actionType: ActionTypeEnum.Send,
+      };
+      agentId = agentId ? agentId : ChatProxyService.AGENT_ID;
+      // 提取并替换 {{@file:xxx}} 中的文件内容
+      let processedContent = message;
+      const filePattern = /\{\{@file:(.*?)\}\}/g;
+      const fileMatches = message.match(filePattern);
+      let isCleanContext = false;
+      if (fileMatches) {
+        for (const match of fileMatches) {
+          const filePath = match.replace(/\{\{@file:(.*?)\}\}/, '$1');
+          if (filePath && !isCleanContext) {
+            isCleanContext = true;
+            llmContextService.cleanFileContext();
+          }
+          const fileUri = new URI(filePath);
+          llmContextService.addFileToContext(fileUri, undefined, true);
+          const relativePath = (await workspaceService.asRelativePath(fileUri))?.path || fileUri.displayName;
+          // 获取文件内容
+          // 替换占位符，后续支持自定义渲染时可替换为自定义渲染标签
+          processedContent = processedContent.replace(match, `\`<attached_file>${relativePath}\``);
+        }
+      }
 
-      const agentId = value.agentId ? value.agentId : ChatProxyService.AGENT_ID;
-      return handleAgentReply({ message, agentId, command, reportExtra });
+      const folderPattern = /\{\{@folder:(.*?)\}\}/g;
+      const folderMatches = processedContent.match(folderPattern);
+      if (folderMatches) {
+        for (const match of folderMatches) {
+          const folderPath = match.replace(/\{\{@folder:(.*?)\}\}/, '$1');
+          const folderUri = new URI(folderPath);
+          llmContextService.addFolderToContext(folderUri);
+          const relativePath = (await workspaceService.asRelativePath(folderUri))?.path || folderUri.displayName;
+          // 替换占位符，后续支持自定义渲染时可替换为自定义渲染标签
+          processedContent = processedContent.replace(match, `\`<attached_folder>${relativePath}\``);
+        }
+      }
+      return handleAgentReply({ message: processedContent, agentId, command, reportExtra });
     },
     [handleAgentReply],
   );
@@ -759,7 +824,6 @@ export const AIChatView = () => {
             </div>
           ) : null}
           <div className={styles.chat_input_wrap}>
-            <ChatContext />
             <div className={styles.header_operate}>
               <div className={styles.header_operate_left}>
                 {shortcutCommands.map((command) => (
@@ -790,17 +854,7 @@ export const AIChatView = () => {
               />
             )}
             <ChatInputWrapperRender
-              onSend={(value, agentId, command) =>
-                handleSend({
-                  message: value,
-                  agentId,
-                  command,
-                  reportExtra: {
-                    actionSource: ActionSourceEnum.Chat,
-                    actionType: ActionTypeEnum.Send,
-                  },
-                })
-              }
+              onSend={handleSend}
               disabled={loading}
               enableOptions={true}
               theme={theme}
@@ -857,12 +911,15 @@ export function DefaultChatViewHeader({
     const getHistoryList = () => {
       const currentMessages = aiChatService.sessionModel.history.getMessages();
       const latestUserMessage = currentMessages.findLast((m) => m.role === ChatMessageRole.User);
-      setCurrentTitle(latestUserMessage ? latestUserMessage.content.slice(0, MAX_TITLE_LENGTH) : '');
+      setCurrentTitle(
+        latestUserMessage ? cleanAttachedTextWrapper(latestUserMessage.content).slice(0, MAX_TITLE_LENGTH) : '',
+      );
       setHistoryList(
         aiChatService.getSessions().map((session) => {
           const history = session.history;
           const messages = history.getMessages();
-          const title = messages.length > 0 ? messages[0].content.slice(0, MAX_TITLE_LENGTH) : '';
+          const title =
+            messages.length > 0 ? cleanAttachedTextWrapper(messages[0].content).slice(0, MAX_TITLE_LENGTH) : '';
           const updatedAt = messages.length > 0 ? messages[messages.length - 1].replyStartTime || 0 : 0;
           // const loading = session.requests[session.requests.length - 1]?.response.isComplete;
           return {

package/src/browser/components/ChatEditor.tsx

@@ -2,14 +2,24 @@ import capitalize from 'lodash/capitalize';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Highlight from 'react-highlight';
 
-import { IClipboardService, getIcon, useInjectable, uuid } from '@opensumi/ide-core-browser';
-import { Popover } from '@opensumi/ide-core-browser/lib/components';
+import {
+  EDITOR_COMMANDS,
+  FILE_COMMANDS,
+  IClipboardService,
+  LabelService,
+  getIcon,
+  useInjectable,
+  uuid,
+} from '@opensumi/ide-core-browser';
+import { Icon, Popover } from '@opensumi/ide-core-browser/lib/components';
 import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
 import {
   ActionSourceEnum,
   ActionTypeEnum,
   ChatFeatureRegistryToken,
+  CommandService,
   IAIReporter,
+  URI,
   localize,
   runWhenIdle,
 } from '@opensumi/ide-core-common';
@@ -22,6 +32,9 @@ import { ChatFeatureRegistry } from '../chat/chat.feature.registry';
 
 import styles from './components.module.less';
 import { highLightLanguageSupport } from './highLight';
+import { MentionType } from './mention-input/types';
+
+import type { IWorkspaceService } from '@opensumi/ide-workspace';
 
 import './highlightTheme.less';
 
@@ -139,16 +152,56 @@ const CodeBlock = ({
   renderText,
   agentId = '',
   command = '',
+  labelService,
+  commandService,
+  workspaceService,
 }: {
   content?: string;
   relationId: string;
   renderText?: (t: string) => React.ReactNode;
   agentId?: string;
   command?: string;
+  labelService?: LabelService;
+  commandService?: CommandService;
+  workspaceService?: IWorkspaceService;
 }) => {
   const rgInlineCode = /`([^`]+)`/g;
   const rgBlockCode = /```([^]+?)```/g;
   const rgBlockCodeBefore = /```([^]+)?/g;
+  const rgAttachedFile = /<attached_file>(.*)/g;
+  const rgAttachedFolder = /<attached_folder>(.*)/g;
+  const handleAttachmentClick = useCallback(
+    async (text: string, type: MentionType) => {
+      const roots = await workspaceService?.roots;
+      let uri;
+      if (!roots) {
+        return;
+      }
+      for (const root of roots) {
+        uri = new URI(root.uri).resolve(text);
+        try {
+          await commandService?.executeCommand(FILE_COMMANDS.REVEAL_IN_EXPLORER.id, uri);
+          if (type === MentionType.FILE) {
+            await commandService?.executeCommand(EDITOR_COMMANDS.OPEN_RESOURCE.id, uri);
+          }
+          break;
+        } catch {
+          continue;
+        }
+      }
+    },
+    [commandService, workspaceService],
+  );
+  const renderAttachment = (text: string, isFolder = false, key: string) => (
+    <span
+      className={styles.attachment}
+      key={key}
+      onClick={() => handleAttachmentClick(text, isFolder ? MentionType.FOLDER : MentionType.FILE)}
+    >
+      <Icon iconClass={isFolder ? getIcon('folder') : labelService?.getIcon(new URI(text || 'file'))} />
+      <span className={styles.attachment_text}>{text}</span>
+    </span>
+  );
 
   const renderCodeEditor = (content: string) => {
     const language = content.split('\n')[0].trim().toLowerCase();
@@ -193,11 +246,49 @@ const CodeBlock = ({
               renderedContent.push(text);
             }
           } else {
-            renderedContent.push(
-              <span className={styles.code_inline} key={index}>
-                {text}
-              </span>,
-            );
+            // 处理文件和文件夹标记
+            const processedText = text;
+            const fileMatches = [...text.matchAll(rgAttachedFile)];
+            const folderMatches = [...text.matchAll(rgAttachedFolder)];
+            if (fileMatches.length || folderMatches.length) {
+              let lastIndex = 0;
+              const fragments: (string | React.ReactNode)[] = [];
+
+              // 通用处理函数
+              const processMatches = (matches: RegExpMatchArray[], isFolder: boolean) => {
+                matches.forEach((match, matchIndex) => {
+                  if (match.index !== undefined) {
+                    const spanText = processedText.slice(lastIndex, match.index);
+                    if (spanText) {
+                      fragments.push(
+                        <span key={`${index}-${matchIndex}-${isFolder ? 'folder' : 'file'}`}>{spanText}</span>,
+                      );
+                    }
+                    fragments.push(
+                      renderAttachment(
+                        match[1],
+                        isFolder,
+                        `${index}-tag-${matchIndex}-${isFolder ? 'folder' : 'file'}`,
+                      ),
+                    );
+                    lastIndex = match.index + match[0].length;
+                  }
+                });
+              };
+
+              // 处理文件标记
+              processMatches(fileMatches, false);
+              processMatches(folderMatches, true);
+
+              fragments.push(processedText.slice(lastIndex));
+              renderedContent.push(...fragments);
+            } else {
+              renderedContent.push(
+                <span className={styles.code_inline} key={index}>
+                  {text}
+                </span>,
+              );
+            }
           }
         });
       } else {
@@ -216,15 +307,29 @@ export const CodeBlockWrapper = ({
   renderText,
   relationId,
   agentId,
+  labelService,
+  commandService,
+  workspaceService,
 }: {
   text?: string;
   relationId: string;
   renderText?: (t: string) => React.ReactNode;
   agentId?: string;
+  labelService?: LabelService;
+  commandService?: CommandService;
+  workspaceService?: IWorkspaceService;
 }) => (
   <div className={styles.ai_chat_code_wrapper}>
     <div className={styles.render_text}>
-      <CodeBlock content={text} renderText={renderText} relationId={relationId} agentId={agentId} />
+      <CodeBlock
+        content={text}
+        labelService={labelService}
+        renderText={renderText}
+        relationId={relationId}
+        agentId={agentId}
+        commandService={commandService}
+        workspaceService={workspaceService}
+      />
     </div>
   </div>
 );
@@ -234,11 +339,17 @@ export const CodeBlockWrapperInput = ({
   relationId,
   agentId,
   command,
+  labelService,
+  workspaceService,
+  commandService,
 }: {
   text: string;
   relationId: string;
   agentId?: string;
   command?: string;
+  labelService?: LabelService;
+  workspaceService?: IWorkspaceService;
+  commandService?: CommandService;
 }) => {
   const chatFeatureRegistry = useInjectable<ChatFeatureRegistry>(ChatFeatureRegistryToken);
   const [tag, setTag] = useState<string>('');
@@ -271,7 +382,15 @@ export const CodeBlockWrapperInput = ({
           </div>
         )}
         {command && <div className={styles.tag}>/ {command}</div>}
-        <CodeBlock content={txt} relationId={relationId} agentId={agentId} command={command} />
+        <CodeBlock
+          content={txt}
+          labelService={labelService}
+          relationId={relationId}
+          agentId={agentId}
+          command={command}
+          workspaceService={workspaceService}
+          commandService={commandService}
+        />
       </div>
     </div>
   );

package/src/browser/components/ChatHistory.tsx

@@ -163,25 +163,22 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
       (item: IChatHistoryItem) => (
         <div
           key={item.id}
-          className={cls(
-            styles['dm-chat-history-item'],
-            item.id === currentId ? styles['dm-chat-history-item-selected'] : '',
-          )}
+          className={cls(styles.chat_history_item, item.id === currentId ? styles.chat_history_item_selected : '')}
           onClick={() => handleHistoryItemSelect(item)}
         >
-          <div className={styles['dm-chat-history-item-content']}>
+          <div className={styles.chat_history_item_content}>
             {item.loading ? (
               <Loading />
             ) : (
               <Icon icon='message' style={{ width: '16px', height: '16px', marginRight: 4 }} />
             )}
             {!historyTitleEditable?.[item.id] ? (
-              <span id={`dm-chat-history-item-title-${item.id}`} className={styles['dm-chat-history-item-title']}>
+              <span id={`chat-history-item-title-${item.id}`} className={styles.chat_history_item_title}>
                 {item.title}
               </span>
             ) : (
               <Input
-                className={styles['dm-chat-history-item-title']}
+                className={styles.chat_history_item_title}
                 defaultValue={item.title}
                 ref={inputRef}
                 onPressEnter={(e: any) => {
@@ -191,18 +188,9 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
               />
             )}
           </div>
-          <div className={styles['dm-chat-history-item-actions']}>
-            {/* <EditOutlined
-              title={localize('aiNative.operate.chatHistory.edit')}
-              style={{ marginRight: 8 }}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleTitleEdit(item);
-              }}
-            /> */}
+          <div className={styles.chat_history_item_actions}>
             <EnhanceIcon
-              className={cls(styles['dm-chat-history-item-actions-delete'], getIcon('delete'))}
+              className={cls(styles.chat_history_item_actions_delete, getIcon('delete'))}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -237,14 +225,14 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
         <div>
           <Input
             placeholder={localize('aiNative.operate.chatHistory.searchPlaceholder')}
-            style={{ width: '100%', maxWidth: '100%' }}
+            className={styles.chat_history_search}
             value={searchValue}
             onChange={handleSearchChange}
           />
-          <div className={styles['dm-chat-history-list']}>
+          <div className={styles.chat_history_list}>
             {groupedHistoryList.map((group) => (
               <div key={group.key} style={{ padding: '4px' }}>
-                <div className={styles['dm-chat-history-time']}>{group.key}</div>
+                <div className={styles.chat_history_time}>{group.key}</div>
                 {group.items.map(renderHistoryItem)}
               </div>
             ))}
@@ -257,13 +245,13 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
     const getPopupContainer = useCallback((triggerNode: HTMLElement) => triggerNode.parentElement!, []);
 
     return (
-      <div className={cls(styles['dm-chat-history-header'], className)}>
-        <div className={styles['dm-chat-history-header-title']}>
+      <div className={cls(styles.chat_history_header, className)}>
+        <div className={styles.chat_history_header_title}>
           <span>{title}</span>
         </div>
-        <div className={styles['dm-chat-history-header-actions']}>
+        <div className={styles.chat_history_header_actions}>
           <Popover
-            id='dm-chat-history-header-actions-history'
+            id='chat-history-header-actions-history'
             content={renderHistory()}
             trigger={PopoverTriggerType.click}
             position={PopoverPosition.bottomRight}
@@ -271,12 +259,10 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
             getPopupContainer={getPopupContainer}
           >
             <div
-              className={styles['dm-chat-history-header-actions-history']}
+              className={styles.chat_history_header_actions_history}
               title={localize('aiNative.operate.chatHistory.title')}
             >
-              <EnhanceIcon
-                className={cls(styles['dm-chat-history-header-actions-history'], 'codicon codicon-history')}
-              />
+              <EnhanceIcon className={cls(styles.chat_history_header_actions_history, 'codicon codicon-history')} />
             </div>
           </Popover>
           <Popover
@@ -285,7 +271,7 @@ const ChatHistory: FC<IChatHistoryProps> = memo(
             title={localize('aiNative.operate.newChat.title')}
           >
             <EnhanceIcon
-              className={cls(styles['dm-chat-history-header-actions-new'], getIcon('plus'))}
+              className={cls(styles.chat_history_header_actions_new, getIcon('plus'))}
               onClick={handleNewChat}
             />
           </Popover>