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

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

@@ -0,0 +1,261 @@
+// 进度条
+.thinking_container {
+  position: relative;
+
+  .stop {
+    position: absolute;
+    bottom: -39px;
+    width: 100%;
+    padding-top: 12px;
+
+    .block {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.65);
+      cursor: pointer;
+    }
+  }
+}
+
+.chat_input_container {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background-color: #1b232b;
+  box-shadow: 0 -1px 12px 0 rgba(0, 0, 0, 0.12), 0 -1px 3px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0 0 0 12px;
+
+  .block {
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: 6px;
+    padding: 4px;
+    width: fit-content;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .name {
+      margin-left: 4px;
+    }
+  }
+
+  .header_operate {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .block {
+      margin-right: 8px;
+    }
+  }
+
+  .instruction_options_container {
+    position: absolute;
+    width: calc(100% - 32px);
+    background-color: #171c25;
+    border: 1px solid #363940;
+    box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.15), 0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36);
+    border-radius: 8px;
+    bottom: 61px;
+    z-index: 1000;
+
+    .options {
+      ul {
+        margin: 0;
+        padding: 0;
+        padding: 4px 0;
+
+        li {
+          display: flex;
+          align-items: center;
+          padding: 8px 16px;
+          font-size: 14px;
+          cursor: pointer;
+
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.08);
+          }
+
+          .block {
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+
+    .commonly_used {
+      border-top: 1px solid #363940;
+      padding: 12px 16px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .input_wrapper {
+    min-height: 40px;
+    max-height: 160px;
+    border-radius: 8px;
+    background-color: #ffffff14;
+    padding: 9px 12px;
+    font-size: 14px;
+    position: relative;
+
+    :global {
+      .kt-input-addon-after {
+        align-items: flex-end;
+      }
+
+      .kt-input-addon-before {
+        margin-right: 0;
+      }
+    }
+
+    textarea {
+      resize: none;
+    }
+
+    .slash_widget_block {
+      position: absolute;
+      background-color: #34414b;
+      color: #40a6ff;
+      border-radius: 3px;
+      padding: 1px 2px;
+      z-index: 1;
+      top: 9.5px;
+    }
+
+    .send_chat_btn {
+      border-radius: 2px;
+      background-color: rgba(95, 101, 107, 0.25);
+      width: 24px;
+      height: 22px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+
+      &.active {
+        background-color: rgba(60, 141, 255, 1);
+
+        span {
+          color: #fff;
+        }
+      }
+
+      span {
+        color: rgba(95, 101, 107, 1);
+      }
+    }
+  }
+}
+
+// chat 面板的代码展示部分
+.ai_chat_code_wrapper {
+  position: relative;
+  width: 100%;
+
+  .render_text {
+    white-space: pre-wrap;
+
+    span.code_inline {
+      display: inline;
+      color: #d7ba7d;
+
+      &::after {
+        content: none;
+      }
+    }
+
+    .code_block {
+      .monaco_wrapper {
+        position: relative;
+
+        &:hover {
+          .action_toolbar {
+            display: flex;
+          }
+        }
+
+        .editor {
+          border-radius: 8px;
+          border: 1px solid #ffffff1a;
+          overflow: hidden;
+        }
+
+        .action_toolbar {
+          display: none;
+          position: absolute;
+          right: 0;
+          top: 0;
+          background-color: #151b21;
+          border-radius: 6px 6px 0 6px;
+          z-index: 100;
+          top: -15px;
+          height: 30px;
+          border: 1px solid #ffffff1a;
+          align-items: center;
+          overflow: hidden;
+
+          :global {
+            .kt-popover {
+              height: inherit;
+            }
+          }
+
+          span {
+            width: 30px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+              background-color: rgba(255, 255, 255, 0.08);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.ai_chat_more_actions_container {
+  position: relative;
+
+  .ai_chat_message {
+  }
+
+  .more_actions {
+    position: absolute;
+    z-index: 1000;
+    bottom: -36px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 16px;
+
+    &::after {
+      content: initial;
+    }
+
+    .side {
+      display: flex;
+      align-items: center;
+      justify-items: right;
+      height: inherit;
+
+      span {
+        margin-right: 6px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.ai_native_input_container {
+  height: 32px;
+}

package/src/browser/components/lineVertical.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const lineStyles = {
+  borderLeft: '1px solid #666',
+  height: '100%',
+  width: '1px',
+  display: 'block',
+};
+
+const horizontalStyles = {
+  backgroundColor: 'rgba(255,255,255,0.08)',
+  width: '100%',
+  height: '1px',
+  minHeight: '1px',
+};
+
+export const LineVertical = () => <span style={lineStyles}></span>;
+
+export const HorizontalVertical = () => <span style={horizontalStyles}></span>;

package/src/browser/content-widget/ai-content-widget.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { AppConfig, ConfigProvider } from '@opensumi/ide-core-browser';
+import { Disposable, Emitter, Event } from '@opensumi/ide-core-common';
+import type { ICodeEditor as IMonacoCodeEditor } from '@opensumi/ide-monaco/lib/browser/monaco-api/types';
+import * as monaco from '@opensumi/monaco-editor-core/esm/vs/editor/editor.api';
+
+import { AIInlineChatPanel } from './ai-inline-chat-panel';
+
+export interface IAiContentWidget extends monaco.editor.IContentWidget {
+  show: (options?: ShowAiContentOptions | undefined) => void;
+  hide: (options?: ShowAiContentOptions | undefined) => void;
+}
+
+export interface ShowAiContentOptions {
+  /**
+   * 选中区域
+   */
+  selection?: monaco.Range;
+
+  /**
+   * 行列
+   */
+  position?: monaco.IPosition;
+}
+
+@Injectable({ multiple: true })
+export class AiContentWidget extends Disposable implements IAiContentWidget {
+
+  @Autowired(AppConfig)
+  private configContext: AppConfig;
+
+  allowEditorOverflow?: boolean | undefined = true;
+  suppressMouseDown?: boolean | undefined = false;
+
+  private domNode: HTMLElement;
+  protected options: ShowAiContentOptions | undefined;
+
+  private readonly _onSelectChange = new Emitter<string>();
+  public readonly onSelectChange: Event<string> = this._onSelectChange.event;
+
+  constructor(private readonly editor: IMonacoCodeEditor) {
+    super();
+
+    this.hide();
+    this.renderView();
+  }
+
+  override dispose(): void {
+    this.hide();
+    super.dispose();
+  }
+
+  private renderView(): void {
+    ReactDOM.render(
+      <ConfigProvider value={this.configContext}>
+        <AIInlineChatPanel selectChangeFire={this._onSelectChange} />
+      </ConfigProvider>,
+      this.getDomNode(),
+    );
+    this.layoutContentWidget();
+  }
+
+  async show(options?: ShowAiContentOptions | undefined): Promise<void> {
+    if (!options) {
+      return;
+    }
+
+    if (this.options && this.options.selection && this.options.selection.equalsRange(options.selection!)) {
+      return;
+    }
+
+    this.options = options;
+
+    this.editor.addContentWidget(this);
+  }
+
+  setOptions(options: ShowAiContentOptions): void {
+    this.options = options;
+  }
+
+  hide: (options?: ShowAiContentOptions | undefined) => void = () => {
+    this.options = undefined;
+    this.editor.removeContentWidget(this);
+  };
+
+  getId(): string {
+    return 'AI-Content-Widget';
+  }
+
+  layoutContentWidget(): void {
+    this.editor.layoutContentWidget(this);
+  }
+
+  getDomNode(): HTMLElement {
+    if (!this.domNode) {
+      this.domNode = document.createElement('div');
+      this.domNode.classList.add(this.getId());
+    }
+    return this.domNode;
+  }
+
+  getPosition(): monaco.editor.IContentWidgetPosition | null {
+    if (!this.options) {
+      return null;
+    }
+
+    const { position, selection } = this.options;
+
+    if (position) {
+      return {
+        position,
+        preference: [
+          monaco.editor.ContentWidgetPositionPreference.BELOW,
+        ],
+      };
+    }
+
+    const endPosition = selection && selection.getEndPosition();
+    return endPosition
+      ? {
+          // @ts-ignore
+          position: new monaco.Position(endPosition.lineNumber, this.options?.selection.startColumn),
+          preference: [
+            monaco.editor.ContentWidgetPositionPreference.BELOW,
+          ],
+        }
+      : null;
+  }
+}

package/src/browser/content-widget/ai-inline-chat-panel.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { getIcon, useInjectable } from '@opensumi/ide-core-browser';
+import { getExternalIcon } from '@opensumi/ide-core-browser';
+import { Button, Icon } from '@opensumi/ide-core-browser/lib/components/index';
+import { Progress } from '@opensumi/ide-core-browser/lib/progress/progress-bar';
+import { Emitter } from '@opensumi/ide-core-common';
+
+import { AIImprove } from '../components/AIImprove';
+import { AiInput } from '../components/AIInput';
+
+import * as styles from './ai-inline-chat.module.less';
+import { AiInlineChatService, EChatStatus } from './ai-inline-chat.service';
+
+export const AIInlineChatPanel = (props: { selectChangeFire: Emitter<string> }) => {
+  const aiInlineChatService: AiInlineChatService = useInjectable(AiInlineChatService);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isDone, setIsDone] = useState<boolean>(false);
+  const [currentCheckText, setCurrentCheckText] = useState<string>('优化代码');
+
+  useEffect(() => {
+    const dis = aiInlineChatService.onChatStatus((status) => {
+      if (status === EChatStatus.THINKING) {
+        setIsLoading(true);
+        setIsDone(false);
+      } else {
+        setIsLoading(false);
+      }
+
+      if (status === EChatStatus.DONE) {
+        setIsDone(true);
+      } else {
+        setIsDone(false);
+      }
+
+      if (status === EChatStatus.ERROR) {
+        setIsLoading(false);
+        setIsDone(false);
+      }
+    });
+
+    return () => {
+      dis.dispose();
+    };
+  }, []);
+
+  const improveList = useMemo(
+    () => [
+      { title: '解释代码', iconClass: getExternalIcon('git-pull-request') },
+      { title: '｜', iconClass: '' },
+      { title: '生成注释', iconClass: getExternalIcon('git-pull-request') },
+      { title: '｜', iconClass: '' },
+      { title: '优化代码', iconClass: getExternalIcon('git-pull-request') },
+      { title: '｜', iconClass: '' },
+      { title: '生成测试用例', iconClass: getExternalIcon('git-pull-request') },
+    ],
+    [],
+  );
+
+  const renderHeader = useMemo(() => {
+    if (!isLoading && !isDone) {
+      return null;
+    }
+
+    return (
+      <div className={styles.panel_header}>
+        <div className={styles.header_container}>
+          <div className={styles.left_side}>
+            <span>Chat</span>
+          </div>
+          <div className={styles.right_side}>
+            <Icon className={getIcon('clear')} style={{ marginRight: '8px' }} />
+            <Icon className={getIcon('close')} />
+          </div>
+        </div>
+        {/* 进度条 */}
+        <span className={styles.progress_bar}>
+          <Progress loading={!isDone} />
+        </span>
+      </div>
+    );
+  }, [isLoading, isDone]);
+
+  const renderResult = useMemo(() => {
+    if (!isLoading && !isDone) {
+      return null;
+    }
+
+    return (
+      <div className={styles.panel_result}>
+        <div className={styles.result_container}>
+          <div className={styles.title}>
+            <Icon />
+            <span>{currentCheckText}</span>
+          </div>
+          {isDone && (
+            <>
+              <span className={styles.v_line}></span>
+              <div className={styles.operate}>
+                <div className={styles.left_side}>
+                  <Button
+                    size={'small'}
+                    onClick={() => {
+                      aiInlineChatService._onAccept.fire();
+                    }}
+                  >
+                    采纳
+                  </Button>
+                  <Button
+                    size={'small'}
+                    type={'ghost'}
+                    onClick={() => {
+                      aiInlineChatService._onDiscard.fire();
+                    }}
+                  >
+                    丢弃
+                  </Button>
+                </div>
+                <div className={styles.right_side}>
+                  <Button size={'small'}>
+                    <Icon className={getIcon('layout')} />
+                  </Button>
+                  <span>｜</span>
+                  <Icon className={getExternalIcon('thumbsup')} />
+                  <Icon className={getExternalIcon('thumbsdown')} />
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }, [isLoading, isDone, aiInlineChatService]);
+
+  return (
+    <div className={styles.ai_inline_chat_panel}>
+      {/* header */}
+      {renderHeader}
+      {/* result */}
+      {renderResult}
+      {/* chat */}
+      <div className={styles.panel_chat}>
+        <div className={styles.ai_shortcuts}>
+          <AIImprove
+            onClick={(title) => {
+              props.selectChangeFire.fire(title);
+              setCurrentCheckText(title);
+            }}
+            lists={improveList}
+          />
+        </div>
+        <div className={styles.ai_content_widget_input}>
+          <AiInput
+            onValueChange={(value) => {
+              props.selectChangeFire.fire(value);
+              setCurrentCheckText(value);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/browser/content-widget/ai-inline-chat.module.less

@@ -0,0 +1,81 @@
+.ai_inline_chat_panel {
+  box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+  padding: 12px 16px;
+  background-color: rgba(23, 28, 37, 1);
+  border: 1px solid rgba(54, 57, 64, 1);
+
+  .ai_shortcuts {
+    margin-bottom: 12px;
+  }
+
+  .panel_header {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+    margin: 0 -16px 12px -16px;
+
+    .progress_bar {
+      position: relative;
+      height: 1px;
+      width: 100%;
+      display: inherit;
+
+      .bar {
+        background: linear-gradient(to right, rgba(22, 119, 255, 1), rgba(22, 238, 255, 1));
+      }
+    }
+
+    .header_container {
+      margin: 0 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+  }
+
+  .panel_result {
+    margin-bottom: 16px;
+
+    .result_container {
+      border-radius: 8px;
+      background-color: rgba(255, 255, 255, 0.04);
+      padding: 12px;
+
+      button {
+        border-radius: 6px;
+      }
+
+      .v_line {
+        height: 1px;
+        display: block;
+        width: 100%;
+        background-color: rgba(233, 233, 233, 0.08);
+        margin: 12px 0 12px 0;
+      }
+
+      .line {
+        width: 1px;
+        display: block;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 0.12);
+      }
+
+      .operate {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .left_side {
+          button:first-child {
+            margin-right: 8px;
+          }
+        }
+
+        .right_side {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+}

package/src/browser/content-widget/ai-inline-chat.service.ts

@@ -0,0 +1,46 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { PreferenceService } from '@opensumi/ide-core-browser';
+import { Emitter, Event, CommandService } from '@opensumi/ide-core-common';
+import { ExtensionManagementService } from '@opensumi/ide-extension/lib/browser/extension-management.service';
+
+import { AiGPTBackSerivcePath } from '../../common/index';
+
+export const enum EChatStatus {
+  READY,
+  THINKING,
+  DONE,
+  ERROR
+}
+
+@Injectable({ multiple: false })
+export class AiInlineChatService {
+
+  @Autowired(AiGPTBackSerivcePath)
+  aiBackService: any;
+
+  @Autowired(CommandService)
+  protected readonly commandService: CommandService;
+
+  @Autowired(PreferenceService)
+  protected preferenceService: PreferenceService;
+
+  @Autowired()
+  protected extensionManagementService: ExtensionManagementService;
+
+  private readonly _onChatStatus = new Emitter<EChatStatus>();
+  public readonly onChatStatus: Event<EChatStatus> = this._onChatStatus.event;
+
+  // 采纳
+  public readonly _onAccept = new Emitter<void>();
+  public readonly onAccept: Event<void> = this._onAccept.event;
+
+  // 丢弃
+  public readonly _onDiscard = new Emitter<void>();
+  public readonly onDiscard: Event<void> = this._onDiscard.event;
+
+  public launchChatMessage(message: EChatStatus) {
+    setTimeout(() => {
+      this._onChatStatus.fire(message);
+    });
+  }
+}