@opensumi/ide-ai-native 3.8.3-next-1741747748.0 → 3.8.3-next-1741763229.0

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

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { MessageList } from 'react-chat-elements';
 
-import { AINativeConfigService, 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 {
@@ -117,6 +124,7 @@ export const AIChatView = () => {
   const editorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
   const appConfig = useInjectable<AppConfig>(AppConfig);
   const applyService = useInjectable<BaseApplyService>(BaseApplyService);
+  const labelService = useInjectable<LabelService>(LabelService);
   const [shortcutCommands, setShortcutCommands] = React.useState<ChatSlashCommandItemModel[]>([]);
 
   const [changeList, setChangeList] = React.useState<FileChange[]>(getFileChanges(applyService.getSessionCodeBlocks()));
@@ -355,6 +363,7 @@ export const AIChatView = () => {
                       text={message}
                       agentId={visibleAgentId}
                       command={command}
+                      labelService={labelService}
                     />
                   ),
                 },
@@ -460,7 +469,13 @@ 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}
+            />
           ),
         },
         styles.chat_message_code,
@@ -666,7 +681,7 @@ export const AIChatView = () => {
           llmContextService.addFileToContext(fileUri, undefined, true);
           // 获取文件内容
           // 替换占位符，后续支持自定义渲染时可替换为自定义渲染标签
-          processedContent = processedContent.replace(match, `\`File:${fileUri.displayName}\``);
+          processedContent = processedContent.replace(match, `\`<attached_file>${fileUri.displayName}\``);
         }
       }
 
@@ -678,7 +693,7 @@ export const AIChatView = () => {
           const folderUri = new URI(folderPath);
           llmContextService.addFolderToContext(folderUri);
           // 替换占位符，后续支持自定义渲染时可替换为自定义渲染标签
-          processedContent = processedContent.replace(match, `\`Folder:${folderUri.displayName}\``);
+          processedContent = processedContent.replace(match, `\`<attached_folder>${folderUri.displayName}\``);
         }
       }
       return handleAgentReply({ message: processedContent, agentId, command, reportExtra });

package/src/browser/components/ChatEditor.tsx

@@ -2,14 +2,15 @@ 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 { 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,
   IAIReporter,
+  URI,
   localize,
   runWhenIdle,
 } from '@opensumi/ide-core-common';
@@ -139,16 +140,26 @@ const CodeBlock = ({
   renderText,
   agentId = '',
   command = '',
+  labelService,
 }: {
   content?: string;
   relationId: string;
   renderText?: (t: string) => React.ReactNode;
   agentId?: string;
   command?: string;
+  labelService?: LabelService;
 }) => {
   const rgInlineCode = /`([^`]+)`/g;
   const rgBlockCode = /```([^]+?)```/g;
   const rgBlockCodeBefore = /```([^]+)?/g;
+  const rgAttachedFile = /<attached_file>(.*)/g;
+  const rgAttachedFolder = /<attached_folder>(.*)/g;
+  const renderAttachment = (text: string, isFolder = false, key: string) => (
+    <span className={styles.attachment} key={key}>
+      <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 +204,47 @@ 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)[] = [];
+
+              // 处理文件标记
+              fileMatches.forEach((match, matchIndex) => {
+                if (match.index !== undefined) {
+                  const spanText = processedText.slice(lastIndex, match.index);
+                  if (spanText) {
+                    fragments.push(<span key={`${index}-${matchIndex}`}>{spanText}</span>);
+                  }
+                  fragments.push(renderAttachment(match[1], false, `${index}-tag-${matchIndex}`));
+                  lastIndex = match.index + match[0].length;
+                }
+              });
+
+              // 处理文件夹标记
+              folderMatches.forEach((match, matchIndex) => {
+                if (match.index !== undefined) {
+                  const spanText = processedText.slice(lastIndex, match.index);
+                  if (spanText) {
+                    fragments.push(<span key={`${index}-${matchIndex}`}>{spanText}</span>);
+                  }
+                  fragments.push(renderAttachment(match[1], true, `${index}-tag-${matchIndex}`));
+                  lastIndex = match.index + match[0].length;
+                }
+              });
+
+              fragments.push(processedText.slice(lastIndex));
+              renderedContent.push(...fragments);
+            } else {
+              renderedContent.push(
+                <span className={styles.code_inline} key={index}>
+                  {text}
+                </span>,
+              );
+            }
           }
         });
       } else {
@@ -216,15 +263,23 @@ export const CodeBlockWrapper = ({
   renderText,
   relationId,
   agentId,
+  labelService,
 }: {
   text?: string;
   relationId: string;
   renderText?: (t: string) => React.ReactNode;
   agentId?: string;
+  labelService?: LabelService;
 }) => (
   <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}
+      />
     </div>
   </div>
 );
@@ -234,11 +289,13 @@ export const CodeBlockWrapperInput = ({
   relationId,
   agentId,
   command,
+  labelService,
 }: {
   text: string;
   relationId: string;
   agentId?: string;
   command?: string;
+  labelService?: LabelService;
 }) => {
   const chatFeatureRegistry = useInjectable<ChatFeatureRegistry>(ChatFeatureRegistryToken);
   const [tag, setTag] = useState<string>('');
@@ -271,7 +328,13 @@ 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}
+        />
       </div>
     </div>
   );

package/src/browser/components/ChatMentionInput.tsx

@@ -259,6 +259,7 @@ export const ChatMentionInput = React.forwardRef((props: IChatMentionInputProps)
         onSend={handleSend}
         onStop={handleStop}
         loading={disabled}
+        labelService={labelService}
         placeholder={localize('aiNative.chat.input.placeholder.default')}
         footerConfig={defaultMentionInputFooterOptions}
       />

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

@@ -566,3 +566,21 @@
     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;
+}
+
+.attachment_text {
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 12px;
+}

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

@@ -3,6 +3,7 @@
   width: 100%;
   margin: 0 auto;
   border-radius: 4px;
+
   .model_selector {
     margin-right: 5px;
   }
@@ -55,8 +56,10 @@
     span {
       color: var(--design-text-foreground);
     }
+
     &:hover {
       background-color: var(--badge-background);
+
       span {
         color: var(--badge-foreground);
       }
@@ -75,6 +78,7 @@
     justify-content: flex-start;
     align-items: center;
     flex-direction: row;
+
     .left_control {
       display: flex;
       align-items: center;
@@ -82,17 +86,21 @@
       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);
+
         &:hover {
           background-color: var(--kt-primaryButton-background);
+
           .send_logo_icon,
           .stop_logo_icon {
             color: var(--kt-primaryButton-foreground);
@@ -155,6 +163,7 @@
   color: var(--foreground);
   border-radius: 4px;
   margin-bottom: 5px;
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -242,9 +251,17 @@
   border-radius: 4px;
   padding: 0 4px;
   margin: 0 3px;
-  display: inline-block;
   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;
 }
 
 .empty_state {
@@ -296,6 +313,7 @@
   0% {
     background-position: 100% 0;
   }
+
   100% {
     background-position: -100% 0;
   }

package/src/browser/components/mention-input/mention-input.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { Popover, PopoverPosition, Select, getIcon } from '@opensumi/ide-core-browser/lib/components';
 import { EnhanceIcon } from '@opensumi/ide-core-browser/lib/components/ai-native';
+import { URI } from '@opensumi/ide-utils';
 
 import styles from './mention-input.module.less';
 import { MentionPanel } from './mention-panel';
@@ -17,6 +18,7 @@ export const MentionInput: React.FC<MentionInputProps> = ({
   loading = false,
   mentionKeyword = MENTION_KEYWORD,
   onSelectionChange,
+  labelService,
   placeholder = 'Ask anything, @ to mention',
   footerConfig = {
     buttons: [],
@@ -577,7 +579,21 @@ export const MentionInput: React.FC<MentionInputProps> = ({
         mentionTag.dataset.type = item.type;
         mentionTag.dataset.contextId = item.contextId || '';
         mentionTag.contentEditable = 'false';
-        mentionTag.textContent = mentionKeyword + item.text;
+
+        // 为 file 和 folder 类型添加图标
+        if (item.type === 'file' || item.type === 'folder') {
+          // 创建图标容器
+          const iconSpan = document.createElement('span');
+          iconSpan.className = cls(
+            styles.mention_icon,
+            item.type === 'file' ? labelService?.getIcon(new URI(item.text)) : getIcon('folder'),
+          );
+          mentionTag.appendChild(iconSpan);
+        }
+
+        // 创建文本内容容器
+        const textSpan = document.createTextNode(item.text);
+        mentionTag.appendChild(textSpan);
 
         // 创建一个范围从 @type: 开始到当前光标
         const tempRange = document.createRange();
@@ -666,7 +682,21 @@ export const MentionInput: React.FC<MentionInputProps> = ({
     mentionTag.dataset.type = item.type;
     mentionTag.dataset.contextId = item.contextId || '';
     mentionTag.contentEditable = 'false';
-    mentionTag.textContent = mentionKeyword + item.text;
+
+    // 为 file 和 folder 类型添加图标
+    if (item.type === 'file' || item.type === 'folder') {
+      // 创建图标容器
+      const iconSpan = document.createElement('span');
+      iconSpan.className = cls(
+        styles.mention_icon,
+        item.type === 'file' ? labelService?.getIcon(new URI(item.text)) : getIcon('folder'),
+      );
+      mentionTag.appendChild(iconSpan);
+    }
+
+    // 创建文本内容容器
+    const textSpan = document.createTextNode(item.text);
+    mentionTag.appendChild(textSpan);
 
     // 定位到 @ 符号的位置
     let charIndex = 0;

package/src/browser/components/mention-input/types.ts

@@ -1,3 +1,5 @@
+import type { LabelService } from '@opensumi/ide-core-browser';
+
 export interface MentionItem {
   id: string;
   type: string;
@@ -74,6 +76,7 @@ export interface MentionInputProps {
   onSelectionChange?: (value: string) => void;
   footerConfig?: FooterConfig; // 新增配置项
   mentionKeyword?: string;
+  labelService?: LabelService;
 }
 
 export const MENTION_KEYWORD = '@';

package/src/browser/context/llm-context.service.ts

@@ -209,9 +209,7 @@ export class LLMContextServiceImpl extends WithEventBus implements LLMContextSer
       folderPath.map(async (folder) => {
         const folderUri = new URI(folder);
         const root = workspaceRoot.relative(folderUri)?.toString() || '/';
-        return `# Partial Folder Structure\n\`\`\`\n${root}\n${(
-          await this.getPartiaFolderStructure(folderUri.codeUri.fsPath)
-        )
+        return `\`\`\`\n${root}\n${(await this.getPartiaFolderStructure(folderUri.codeUri.fsPath))
           .map((line) => `- ${line}`)
           .join('\n')}\n\`\`\`\n`;
       }),

package/src/common/prompts/context-prompt-provider.ts

@@ -1,5 +1,6 @@
 import { Autowired, Injectable } from '@opensumi/di';
 import { WorkbenchEditorService } from '@opensumi/ide-editor/lib/common/editor';
+import { IWorkspaceService } from '@opensumi/ide-workspace';
 
 import { SerializedContext } from '../llm-context';
 
@@ -10,7 +11,7 @@ export interface ChatAgentPromptProvider {
    * 提供上下文提示
    * @param context 上下文
    */
-  provideContextPrompt(context: SerializedContext, userMessage: string): string;
+  provideContextPrompt(context: SerializedContext, userMessage: string): Promise<string>;
 }
 
 @Injectable()
@@ -18,45 +19,131 @@ export class DefaultChatAgentPromptProvider implements ChatAgentPromptProvider {
   @Autowired(WorkbenchEditorService)
   protected readonly workbenchEditorService: WorkbenchEditorService;
 
-  provideContextPrompt(context: SerializedContext, userMessage: string): string {
+  @Autowired(IWorkspaceService)
+  protected readonly workspaceService: IWorkspaceService;
+
+  async provideContextPrompt(context: SerializedContext, userMessage: string) {
+    const currentFileInfo = await this.getCurrentFileInfo();
+
+    return this.buildPromptTemplate({
+      recentFiles: this.buildRecentFilesSection(context.recentlyViewFiles),
+      attachedFiles: this.buildAttachedFilesSection(context.attachedFiles),
+      attachedFolders: this.buildAttachedFoldersSection(context.attachedFolders),
+      currentFile: currentFileInfo,
+      userMessage,
+    });
+  }
+
+  private async getCurrentFileInfo() {
     const editor = this.workbenchEditorService.currentEditor;
     const currentModel = editor?.currentDocumentModel;
-    return `<additional_data>
-Below are some potentially helpful/relevant pieces of information for figuring out to respond
-<recently_viewed_files>
-${context.recentlyViewFiles.map((file, idx) => `    ${idx + 1}: ${file}`).join('\n')}
-</recently_viewed_files>
-<attached_files>
-${context.attachedFiles.map(
-  (file) =>
-    `
-<file_contents>
+
+    if (!currentModel?.uri) {
+      return null;
+    }
+
+    const currentPath =
+      (await this.workspaceService.asRelativePath(currentModel.uri))?.path || currentModel.uri.codeUri.fsPath;
+
+    return {
+      path: currentPath,
+      languageId: currentModel.languageId,
+      content: currentModel.getText(),
+    };
+  }
+
+  private buildPromptTemplate({
+    recentFiles,
+    attachedFiles,
+    attachedFolders,
+    currentFile,
+    userMessage,
+  }: {
+    recentFiles: string;
+    attachedFiles: string;
+    attachedFolders: string;
+    currentFile: { path: string; languageId: string; content: string } | null;
+    userMessage: string;
+  }) {
+    const sections = [
+      '<additional_data>',
+      'Below are some potentially helpful/relevant pieces of information for figuring out to respond',
+      recentFiles,
+      attachedFiles,
+      attachedFolders,
+      this.buildCurrentFileSection(currentFile),
+      '</additional_data>',
+      '<user_query>',
+      userMessage,
+      '</user_query>',
+    ].filter(Boolean);
+
+    return sections.join('\n');
+  }
+
+  private buildRecentFilesSection(files: string[]): string {
+    if (!files.length) {
+      return '';
+    }
+
+    return `<recently_viewed_files>
+${files.map((file, idx) => `    ${idx + 1}: ${file}`).join('\n')}
+</recently_viewed_files>`;
+  }
+
+  private buildAttachedFilesSection(files: { path: string; content: string; lineErrors: string[] }[]): string {
+    if (!files.length) {
+      return '';
+    }
+
+    const fileContents = files
+      .map((file) => {
+        const sections = [
+          this.buildFileContentSection(file),
+          file.lineErrors.length ? this.buildLineErrorsSection(file.lineErrors) : '',
+        ].filter(Boolean);
+
+        return sections.join('\n');
+      })
+      .filter(Boolean)
+      .join('\n');
+
+    return `<attached_files>\n${fileContents}\n</attached_files>`;
+  }
+
+  private buildFileContentSection(file: { path: string; content: string }): string {
+    return `<file_contents>
 \`\`\`${file.path}
 ${file.content}
 \`\`\`
-</file_contents>
-<linter_errors>
-${file.lineErrors.join('\n')}
-</linter_errors>
-`,
-)}
-</attached_files>
-<attached_folders>
-
-${context.attachedFolders.join('\n')}
-</attached_folders>
-${
-  currentModel
-    ? `<current_opened_file>
-\`\`\`${currentModel.languageId} ${currentModel.uri.toString()}
-${currentModel.getText()}
+</file_contents>`;
+  }
+
+  private buildLineErrorsSection(errors: string[]): string {
+    if (!errors.length) {
+      return '';
+    }
+
+    return `<linter_errors>\n${errors.join('\n')}\n</linter_errors>`;
+  }
+
+  private buildAttachedFoldersSection(folders: string[]): string {
+    if (!folders.length) {
+      return '';
+    }
+
+    return `<attached_folders>\n${folders.join('\n')}</attached_folders>`;
+  }
+
+  private buildCurrentFileSection(fileInfo: { path: string; languageId: string; content: string } | null): string {
+    if (!fileInfo) {
+      return '';
+    }
+
+    return `<current_opened_file>
+\`\`\`${fileInfo.languageId} ${fileInfo.path}
+${fileInfo.content}
 \`\`\`
-</current_opened_file>`
-    : ''
-}
-</additional_data>
-<user_query>
-${userMessage}
-</user_query>`;
+</current_opened_file>`;
   }
 }