@opensumi/ide-ai-native 2.26.9-next-1695201123.0

package/src/browser/ai-chat.contribution.ts

@@ -0,0 +1,300 @@
+import { Injectable, Autowired, INJECTOR_TOKEN, Injector } from '@opensumi/di';
+import {
+  AppConfig,
+  CommandContribution,
+  CommandRegistry,
+  ComponentContribution,
+  ComponentRegistry,
+  Domain,
+  Position,
+  URI,
+  getIcon,
+  IRange,
+  SlotRendererContribution,
+  SlotRendererRegistry,
+  SlotLocation,
+} from '@opensumi/ide-core-browser';
+import { IMenuRegistry, MenuContribution, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+import { DebugConsoleNode } from '@opensumi/ide-debug/lib/browser/tree';
+import { IEditor } from '@opensumi/ide-editor';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { ResourceService } from '@opensumi/ide-editor';
+import { IResource } from '@opensumi/ide-editor';
+import {
+  BrowserEditorContribution,
+  IEditorDocumentModelContentRegistry,
+  IEditorFeatureRegistry,
+} from '@opensumi/ide-editor/lib/browser';
+import { WorkbenchEditorServiceImpl } from '@opensumi/ide-editor/lib/browser/workbench-editor.service';
+import { IFileTreeAPI } from '@opensumi/ide-file-tree-next';
+import { ITerminalController, ITerminalGroupViewService } from '@opensumi/ide-terminal-next';
+
+import { Ai_CHAT_CONTAINER_VIEW_ID, InstructionEnum } from '../common';
+import { AI_EXPLAIN_DEBUG_COMMANDS, AI_EXPLAIN_TERMINAL_COMMANDS, AI_RUN_DEBUG_COMMANDS } from '../common/command';
+
+import { AiChatService } from './ai-chat.service';
+import { AiChatView } from './ai-chat.view';
+import { AiEditorContribution } from './ai-editor.contribution';
+import { AiDiffDocumentProvider } from './diff-widget/ai-diff-document.provider';
+import {
+  AiBottomTabRenderer,
+  AiChatTabRenderer,
+  AiLeftTabRenderer,
+  AiRightTabRenderer,
+} from './override/layout/tabbar.view';
+import { AiRunService } from './run/run.service';
+
+@Injectable()
+@Domain(
+  ComponentContribution,
+  BrowserEditorContribution,
+  MenuContribution,
+  CommandContribution,
+  SlotRendererContribution,
+)
+export class AiChatContribution
+  implements
+    ComponentContribution,
+    BrowserEditorContribution,
+    MenuContribution,
+    CommandContribution,
+    SlotRendererContribution
+{
+  @Autowired()
+  private readonly aiDiffDocumentProvider: AiDiffDocumentProvider;
+
+  @Autowired(INJECTOR_TOKEN)
+  private readonly injector: Injector;
+
+  @Autowired(AppConfig)
+  private readonly appConfig: AppConfig;
+
+  @Autowired(IFileTreeAPI)
+  private readonly fileTreeAPI: IFileTreeAPI;
+
+  @Autowired(WorkbenchEditorService)
+  private readonly editorService: WorkbenchEditorServiceImpl;
+
+  @Autowired(AiChatService)
+  protected readonly aiChatService: AiChatService;
+
+  @Autowired(ITerminalGroupViewService)
+  protected readonly view: ITerminalGroupViewService;
+
+  @Autowired(ITerminalController)
+  protected readonly terminalController: ITerminalController;
+
+  @Autowired(AiRunService)
+  protected readonly aiRunService: AiRunService;
+
+  registerComponent(registry: ComponentRegistry): void {
+    registry.register(
+      Ai_CHAT_CONTAINER_VIEW_ID,
+      {
+        component: AiChatView,
+        id: Ai_CHAT_CONTAINER_VIEW_ID,
+      },
+      {
+        containerId: Ai_CHAT_CONTAINER_VIEW_ID,
+      },
+    );
+  }
+
+  registerEditorFeature(registry: IEditorFeatureRegistry): void {
+    registry.registerEditorFeatureContribution({
+      contribute: (editor: IEditor) => {
+        const aiEditorContribution = this.injector.get(AiEditorContribution, [editor]);
+        return aiEditorContribution.contribute(editor);
+      },
+    });
+  }
+
+  registerCommands(commands: CommandRegistry): void {
+    commands.registerCommand(
+      {
+        id: 'ai.suggest.documentation',
+      },
+      {
+        execute: async (range: IRange) => {
+          const currentEditor = this.editorService.currentEditor;
+          if (!currentEditor || !range) {
+            return;
+          }
+
+          const getContent = currentEditor.monacoEditor.getModel()!.getValueInRange(range);
+
+          if (getContent) {
+            const messageWithPrompt = `基于提供的代码，需要按照以下这种格式为这段代码添加 javadoc。
+格式要求是:
+/**
+ * $\{关于这段代码的注释\}
+ * 
+ * 如果有参数，则添加 @param $\{参数信息\}。如果没有参数，则不需要添加 @param
+ * @return $\{返回类型\}
+ */
+
+代码内容是:
+${getContent}
+`;
+
+            const aiResult = await this.aiChatService.aiBackService.aiMFTCompletion(messageWithPrompt);
+            const resultContent = aiResult.data;
+
+            // 提取 markdown 里的代码
+            const regex = /```java\s*([\s\S]+?)\s*```/;
+            let code = regex.exec(resultContent)![1];
+
+            if (!code) {
+              return;
+            }
+
+            const monacoEditor = currentEditor.monacoEditor;
+
+            if (monacoEditor) {
+              const model = monacoEditor.getModel()!;
+
+              const indents = ' '.repeat(4);
+
+              const spcode = code.split('\n');
+              code = spcode.map((s, i) => (i === 0 ? s : indents + s)).join('\n');
+
+              model.pushStackElement();
+              model.pushEditOperations(
+                null,
+                [
+                  {
+                    range,
+                    text: code,
+                  },
+                ],
+                () => null,
+              );
+              model.pushStackElement();
+
+              monacoEditor.focus();
+            }
+          }
+        },
+      },
+    );
+
+    commands.registerCommand(
+      {
+        id: 'ai.chat.createNewFile',
+      },
+      {
+        execute: async (fileName) => {
+          const workspaceDir = this.appConfig.workspaceDir;
+          return await this.fileTreeAPI.createFile(URI.parse(`${workspaceDir}/${fileName}`));
+        },
+      },
+    );
+
+    commands.registerCommand(
+      {
+        id: 'ai.chat.focusLine',
+      },
+      {
+        execute: async (line: number) => {
+          line = Number(line);
+          let currentEditor = this.editorService.currentEditor;
+          if (!currentEditor) {
+            this.editorService.setCurrentGroup(this.editorService.editorGroups[0]);
+          }
+
+          currentEditor = this.editorService.currentEditor;
+
+          currentEditor?.monacoEditor.focus();
+          setTimeout(() => {
+            currentEditor?.monacoEditor.revealLineInCenter(Number(line));
+            currentEditor?.monacoEditor.setPosition(new Position(line, 0));
+          }, 0);
+        },
+      },
+    );
+
+    commands.registerCommand(
+      {
+        id: 'cloudide.command.workspace.getRuntimeConfig',
+      },
+      {
+        execute: async (key: string) => {
+          const obj = {
+            workspaceIP: '127.0.0.1',
+            workspaceDir: '/Users/mushi/Documents/workcode/opensumi/core/tools/workspace',
+            proxyHost: 'https://ide.cloudbaseapp-sanbox.cn',
+          };
+          return obj[key];
+        },
+      },
+    );
+
+    commands.registerCommand(AI_EXPLAIN_TERMINAL_COMMANDS, {
+      execute: () => {
+        const current = this.view.currentWidgetId;
+        const client = this.terminalController.findClientFromWidgetId(current);
+        if (client) {
+          const name = client.name;
+          const selectionContent = client.getSelection();
+
+          this.aiChatService.launchChatMessage({
+            message: `${InstructionEnum.aiExplainKey} @terminalSelection`,
+            prompt: `请解释一下这一段 ${name} 终端面板里的这部分内容: \`\`\`\n${selectionContent}\n\`\`\` `,
+          });
+        }
+      },
+    });
+
+    commands.registerCommand(AI_EXPLAIN_DEBUG_COMMANDS, {
+      execute: (node: DebugConsoleNode) => {
+        const description = node.description;
+        if (description) {
+          this.aiChatService.launchChatMessage({
+            message: `${InstructionEnum.aiExplainKey} @debugSelection`,
+            prompt: `我在运行并调试我的项目代码，请解释调试运行过程当中的这段日志: \`\`\`\n${description}\n\`\`\` `,
+          });
+        }
+      },
+    });
+
+    commands.registerCommand(AI_RUN_DEBUG_COMMANDS, {
+      execute: () => {
+        this.aiRunService.run();
+      },
+    });
+  }
+  // TerminalClient
+  registerMenus(menus: IMenuRegistry): void {
+    menus.registerMenuItem(MenuId.TerminalInstanceContext, {
+      command: AI_EXPLAIN_TERMINAL_COMMANDS,
+      group: '0_ai',
+    });
+
+    menus.registerMenuItem(MenuId.DebugConsoleContext, {
+      command: AI_EXPLAIN_DEBUG_COMMANDS,
+      group: '0_ai',
+    });
+  }
+
+  registerEditorDocumentModelContentProvider(registry: IEditorDocumentModelContentRegistry) {
+    registry.registerEditorDocumentModelContentProvider(this.aiDiffDocumentProvider);
+  }
+
+  registerResource(resourceService: ResourceService): void {
+    resourceService.registerResourceProvider({
+      scheme: 'AI',
+      provideResource: async (uri: URI): Promise<IResource<Partial<{ [prop: string]: any }>>> => ({
+        uri,
+        icon: getIcon('file-text'),
+        name: `AI Diff ${uri.displayName}`,
+      }),
+    });
+  }
+
+  registerRenderer(registry: SlotRendererRegistry): void {
+    registry.registerSlotRenderer(SlotLocation.left, AiLeftTabRenderer);
+    registry.registerSlotRenderer(SlotLocation.right, AiRightTabRenderer);
+    registry.registerSlotRenderer(SlotLocation.bottom, AiBottomTabRenderer);
+    registry.registerSlotRenderer(Ai_CHAT_CONTAINER_VIEW_ID, AiChatTabRenderer);
+  }
+}

package/src/browser/ai-chat.module.less

@@ -0,0 +1,174 @@
+.ai_chat_view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-top: 4px;
+
+  background-color: var(--panel-background);
+  border: 1px solid var(--sideBar-border);
+  border-radius: 12px;
+  overflow: hidden;
+
+  user-select: text;
+
+  // ai 助手头像
+  .ai_chat_avatar_icon {
+    width: 24px;
+    height: 24px;
+    background-image: radial-gradient(circle at 21% 21%, #00f6ff 0%, #9c03ff 95%);
+    border-radius: 12px;
+
+    img {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  .header_container {
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--sideBar-border);
+
+    .left {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      height: 16px;
+
+      & > * {
+        margin-right: 8px;
+      }
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+
+      span {
+        color: #666;
+      }
+
+      div:first-child {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .body_container {
+    display: flex;
+    height: calc(100% - 48px);
+
+    .left_bar {
+      display: flex;
+      flex-direction: column;
+      width: calc(100% - 40px);
+
+      // chat loading
+      .chat_loading_msg_box {
+        display: flex;
+        align-items: flex-start;
+        color: #ffffff;
+        font-size: 12px;
+        font-weight: 300;
+        margin-left: 16px;
+
+        .chat_loading_mgs_avatar {
+          height: 32px;
+          width: 32px;
+        }
+      }
+
+      // 聊天框
+      .chat_container {
+        flex: 1;
+        height: 100%;
+        overflow: auto;
+        padding-top: 10px;
+
+        .message_list {
+          .rce-mbox-left-notch,
+          .rce-mbox-right-notch {
+            display: none;
+          }
+        }
+      }
+
+      .quick_way {
+        display: flex;
+        align-items: center;
+        padding: 4px 8px;
+
+        .quick_way_item {
+          margin-right: 8px;
+          cursor: pointer;
+        }
+      }
+
+      .chat_input {
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+
+        .input_wrapper {
+          height: 40px;
+          border-radius: 8px;
+          background-color: #ffffff14;
+
+          textarea {
+            resize: none;
+          }
+        }
+
+        .send_chat_btn {
+          border-radius: 2px;
+          background-color: rgba(95, 101, 107, 0.25);
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+
+          span {
+            color: rgba(95, 101, 107, 1);
+          }
+        }
+      }
+    }
+
+    .right_bar {
+      width: 40px;
+      padding-top: 10px;
+      border-left: 1px solid #2a3344e6;
+
+      .chat_list {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 24px;
+
+        li {
+          width: 40px;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &.active_chat_bar {
+            background-color: #ffffff14;
+            border-left: 2px solid #1677ff73;
+            margin-left: -2px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/browser/ai-chat.service.ts

@@ -0,0 +1,146 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { PreferenceService } from '@opensumi/ide-core-browser';
+import { Emitter, Event } from '@opensumi/ide-core-common';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { WorkbenchEditorServiceImpl } from '@opensumi/ide-editor/lib/browser/workbench-editor.service';
+
+import { AISerivceType, AiGPTBackSerivcePath, InstructionEnum } from '../common';
+
+export interface IChatMessageStructure {
+  /**
+   * 用于 chat 面板展示
+   */
+  message: string | React.ReactNode;
+  /**
+   * 实际调用的 prompt
+   */
+  prompt?: string;
+}
+
+@Injectable()
+export class AiChatService {
+  @Autowired(AiGPTBackSerivcePath)
+  aiBackService: any;
+
+  @Autowired(PreferenceService)
+  protected preferenceService: PreferenceService;
+
+  @Autowired(WorkbenchEditorService)
+  private readonly editorService: WorkbenchEditorServiceImpl;
+
+  private readonly _onChatMessageLaunch = new Emitter<IChatMessageStructure>();
+  public readonly onChatMessageLaunch: Event<IChatMessageStructure> = this._onChatMessageLaunch.event;
+
+  private get currentEditor() {
+    return this.editorService.currentEditor;
+  }
+
+  public launchChatMessage(data: IChatMessageStructure) {
+    this._onChatMessageLaunch.fire(data);
+  }
+
+  public async switchAIService(input: string, prompt = '') {
+    let type: AISerivceType | undefined;
+    let message: string | undefined;
+
+    if (!this.currentEditor) {
+      return;
+    }
+
+    const currentUri = this.currentEditor.currentUri;
+    if (!currentUri) {
+      return;
+    }
+
+    if (input.startsWith(InstructionEnum.aiSumiKey)) {
+      type = AISerivceType.Sumi;
+      message = input.split(InstructionEnum.aiSumiKey)[1];
+
+      return { type: AISerivceType.Sumi, message };
+    }
+
+    if (input.startsWith(InstructionEnum.aiExplainKey)) {
+      message = input.split(InstructionEnum.aiExplainKey)[1];
+
+      if (!prompt) {
+        prompt = this.explainCodePrompt(message);
+      }
+
+      return { type: AISerivceType.Explain, message: prompt };
+    }
+
+    if (input.startsWith(InstructionEnum.aiRunKey)) {
+      return { type: AISerivceType.Run, message: prompt };
+    }
+
+    if (input.startsWith(InstructionEnum.aiSearchKey)) {
+      type = AISerivceType.Search;
+      message = input.split(InstructionEnum.aiSearchKey)[1];
+    } else if (input.startsWith(InstructionEnum.aiSearchCodeKey)) {
+      type = AISerivceType.SearchCode;
+      message = input.split(InstructionEnum.aiSearchCodeKey)[1];
+    } else {
+      type = AISerivceType.GPT;
+      message = input;
+    }
+
+    return { type, message };
+  }
+
+  // 解释当前文件的代码或者选中的某个代码片段的 prompt，也可以用于对选中的代码加上用户的描述进行解释
+  public explainCodePrompt(message = ''): string {
+    if (!this.currentEditor) {
+      return '';
+    }
+
+    const currentUri = this.currentEditor.currentUri;
+    if (!currentUri) {
+      return '';
+    }
+
+    const displayName = currentUri.displayName;
+    const fsPath = currentUri.codeUri.fsPath;
+    const content = this.currentEditor.monacoEditor.getValue();
+    const selectionContent =
+      this.currentEditor.monacoEditor.getModel()?.getValueInRange(this.currentEditor.monacoEditor.getSelection()!) ||
+      '';
+    let messageWithPrompt = '';
+
+    /**
+     * 分三种情况
+     * 1. 没打开任意一个文件，则提供当前文件目录树给出当前项目的解释。如果用户有 prompt，则在最后带上
+     * 2. 没选中任意代码，则解释当前打开的代码文件（文件路径、代码）
+     * 3. 选中任意代码，则带上当前文件信息（文件路径、代码）和选中片段
+     * 4. 打开当前文件，用户如果有 prompt，则在最后带上。此时如果有选中代码片段，则带上，没有则带上文件代码
+     */
+    if (!this.currentEditor || !this.currentEditor.currentUri) {
+      //
+    }
+
+    if (!selectionContent) {
+      messageWithPrompt = `这是 ${displayName} 文件, 位置是在 ${fsPath}, 代码内容是 \`\`\`\n${content}\n\`\`\`。向我解释这个代码内容的意思`;
+    }
+
+    if (selectionContent) {
+      messageWithPrompt = `这是 ${displayName} 文件, 位置是在 ${fsPath}, 代码内容是 \`\`\`\n${content}\n\`\`\`。我会给你一段代码片段，你需要给我解释这段代码片段的意思。我的代码片段是: \`\`\`\n${selectionContent}\n\`\`\` `;
+    }
+
+    if (message.trim()) {
+      if (selectionContent) {
+        messageWithPrompt = `这是 ${displayName} 文件，代码内容是 \`\`\`\n${content}\n\`\`\`。我会提供给你其中的某个代码片段以及我的问题, 你需要根据我给的代码片段来解释我的问题。我提供的代码片段是: \`\`\`\n${selectionContent}\n\`\`\`，我的问题是: "${message}" `;
+      } else {
+        messageWithPrompt = `这是 ${displayName} 文件，代码内容是 \`\`\`\n${content}\n\`\`\`。根据我提供的代码内容来回答我的问题，我的问题是: "${message}" `;
+      }
+    }
+    return messageWithPrompt;
+  }
+
+  public async messageWithGPT(input: string) {
+    const res = await this.aiBackService.aiGPTcompletionRequest(input);
+    if (res.errorCode !== 0) {
+      return res.errorMsg || '';
+    } else {
+      return res.data || '';
+    }
+  }
+}