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

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

@@ -0,0 +1,202 @@
+import React, { CSSProperties, useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { AppConfig, URI, useInjectable } from '@opensumi/ide-core-browser';
+import { ConfigProvider } from '@opensumi/ide-core-browser';
+import { EditorCollectionService } from '@opensumi/ide-editor';
+import { getSimpleEditorOptions } from '@opensumi/ide-editor';
+import { ICodeEditor, IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser/index';
+import { monaco } from '@opensumi/ide-monaco/lib/browser/monaco-api';
+import { IDiffEditorOptions } from '@opensumi/ide-monaco/lib/browser/monaco-api/editor';
+import { ZoneWidget } from '@opensumi/monaco-editor-core/esm/vs/editor/contrib/zoneWidget/browser/zoneWidget';
+
+const diffEditorOptions: IDiffEditorOptions = {
+  scrollBeyondLastLine: false,
+  scrollbar: {
+    verticalScrollbarSize: 14,
+    horizontal: 'auto',
+    useShadows: true,
+    verticalHasArrows: false,
+    horizontalHasArrows: false,
+    alwaysConsumeMouseWheel: false,
+  },
+  fixedOverflowWidgets: true,
+  readOnly: true,
+  minimap: {
+    enabled: false,
+  },
+  enableSplitViewResizing: true,
+  renderOverviewRuler: true,
+  ignoreTrimWhitespace: false,
+  renderSideBySide: true,
+  lineNumbers: 'on',
+  glyphMargin: false,
+};
+
+const CodeContentProvider = React.memo(((props: { dto: { answerValue } | undefined; onMaxLincCount: (n) => void }) => {
+  const { dto, onMaxLincCount } = props;
+  const documentModelService: IEditorDocumentModelService = useInjectable(IEditorDocumentModelService);
+  const editorCollectionService: EditorCollectionService = useInjectable(EditorCollectionService);
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!dto) {
+      return;
+    }
+
+    let codeEditor: ICodeEditor;
+
+    const random = Math.random() * 10;
+    const originUri = URI.parse(`AI://origin${random}`);
+
+    Promise.all([
+      documentModelService.createModelReference(originUri),
+    ]).then((data) => {
+      const [original] = data;
+      if (!original) {
+        return;
+      }
+
+      const { answerValue } = dto!;
+
+      codeEditor = editorCollectionService.createCodeEditor(editorRef.current!, {
+        ...getSimpleEditorOptions(),
+        ...diffEditorOptions,
+      });
+
+      const originalModel = original.instance.getMonacoModel();
+
+      originalModel.setMode('java');
+
+      originalModel.setValue(answerValue);
+
+      codeEditor.monacoEditor.setModel(originalModel);
+      codeEditor.monacoEditor.updateOptions({ readOnly: true });
+
+      if (onMaxLincCount) {
+        const { monacoEditor }  = codeEditor;
+
+        const contentHeight = monacoEditor.getContentHeight();
+        const lineCount = contentHeight / monacoEditor.getOption(monaco.editor.EditorOption.lineHeight);
+
+        onMaxLincCount(lineCount);
+      }
+    });
+
+    return () => {
+      if (codeEditor) {
+        codeEditor.dispose();
+      }
+    };
+  }, [dto]);
+
+  return <div ref={editorRef} style={{ height: 'inherit', width:'100%', border:'1px solid #6666' }}></div>;
+}));
+
+const styles: CSSProperties = {
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  backgroundColor: 'rgba(38, 79, 120, 0.25)',
+};
+
+@Injectable({ multiple: true })
+export class AiCodeWidget extends ZoneWidget {
+  @Autowired(AppConfig)
+  private configContext: AppConfig;
+
+  private recordLine: number;
+
+  private answerValue: string;
+  private headUri: URI;
+
+  protected applyClass(): void {}
+  protected applyStyle(): void {}
+
+  protected _fillContainer(container: HTMLElement): void {
+    this.setCssClass('ai_code-widget');
+
+    ReactDOM.render(
+      <ConfigProvider value={this.configContext}>
+          <div style={styles}>
+          {
+            this.headUri &&
+            <div className={'ai_code_head'} style={{
+              display: 'flex',
+              alignItems: 'center',
+              width: '100%',
+              whiteSpace: 'nowrap',
+              padding: '3px 16px',
+            }}>
+              <span style={{
+                color: 'white',
+                marginRight: '10px',
+              }}>{this.headUri.displayName}</span>
+              <span>{this.headUri.codeUri.fsPath.replace(this.configContext.workspaceDir, '')}</span>
+            </div>
+          }
+            <CodeContentProvider dto={{ answerValue: this.answerValue }} onMaxLincCount={(n) => {
+              if (n) {
+                this._relayout(n);
+              }
+            }}/>
+          </div>
+      </ConfigProvider>,
+      container,
+    );
+  }
+
+  constructor(editor: ICodeEditor, answerValue: string, headUri: string) {
+    // @ts-ignore
+    super(editor, {
+      showArrow: false,
+      showFrame: false,
+      arrowColor: undefined,
+      frameColor: undefined,
+      // 这里有个小坑，如果不开启这个配置，那么在调用 show 函数的时候会自动对焦并滚动到对应 range，导致在编辑 result 视图中代码时光标总是滚动在最后一个 widget 上
+      keepEditorSelection: true,
+    });
+
+    this.answerValue = answerValue;
+    this.headUri = URI.parse(headUri);
+  }
+
+  // 覆写 revealLine 函数，使其在 show 的时候编辑器不会定位到对应位置
+  protected override revealLine(lineNumber: number, isLastLine: boolean): void {
+    // not implement
+  }
+
+  public getRecordLine(): number {
+    return this.recordLine;
+  }
+
+  public setContainerStyle(style: { [key in string]: string }): void {
+    const keys = Object.keys(style);
+    for (const key of keys) {
+      if (Object.prototype.hasOwnProperty.call(this.container?.style, key)) {
+        this.container!.style[key] = style[key];
+      }
+    }
+  }
+
+  public addClassName(type: string): this {
+    this.setCssClass(type);
+    return this;
+  }
+
+  public showByLine(line: number, lineNumber = 20): void {
+    this.recordLine = line;
+    super.hide();
+    super.show(
+      {
+        startLineNumber: line,
+        startColumn: 0,
+        endLineNumber: line,
+        endColumn: Number.MAX_SAFE_INTEGER,
+      },
+      lineNumber,
+    );
+  }
+}

package/src/browser/components/AIImprove.tsx

@@ -0,0 +1,45 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { getExternalIcon, getIcon } from '@opensumi/ide-core-browser';
+import { Icon } from '@opensumi/ide-core-browser/lib/components/index';
+
+export const AIImprove = (props: { onClick?: (title: string) => void; lists?: { title: string; iconClass: string }[] }) => {
+  const { onClick, lists } = props;
+
+  const handleClick = useCallback(
+    (title) => {
+      if (onClick) {
+        onClick(title);
+      }
+    },
+    [onClick],
+  );
+
+  const useLists = useMemo(() => {
+    if (lists && lists.length > 0) {
+      return lists;
+    }
+    return [
+      { title: '采纳', iconClass: getExternalIcon('git-pull-request') },
+      { title: '|', iconClass: ''},
+      { title: '丢弃', iconClass:  getExternalIcon('clear-all')},
+      { title: '|', iconClass: ''},
+      { title: '优化', iconClass: getExternalIcon('wand')},
+      { title: '|', iconClass: ''},
+      { title: '更多指令', iconClass: getIcon('more')},
+    ];
+  }, [lists]);
+
+  return (
+    <ul style={{ display: 'flex', alignItems: 'center', paddingLeft: '0', margin: '6px 0 6px 0' }}>
+      {useLists.map(({ title, iconClass }) => (
+        <li style={{ marginRight: '6px', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+          {iconClass && <Icon className={iconClass} style={{marginRight: '6px'}}></Icon>}
+          <span onClick={() => handleClick(title)}>
+            {title}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+};

package/src/browser/components/AIInput.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback, useState } from 'react';
+
+import { getIcon } from '@opensumi/ide-core-browser';
+import { Icon, Input } from '@opensumi/ide-core-browser/lib/components/index';
+
+import * as styles from './components.module.less';
+
+export const AiInput = ({ onValueChange }) => {
+  const [value, setValue] = useState<string>();
+
+  const handleChange = (newValue: string) => {
+    setValue(newValue);
+  };
+
+  const emitterValueChange = useCallback(() => {
+    if (onValueChange) {
+      onValueChange(value);
+    }
+  }, [value]);
+
+  return (
+    <Input
+      className={styles.ai_native_input_container}
+      placeholder={'可以问我任何问题，或键入主题 "/"'}
+      value={value}
+      onValueChange={handleChange}
+      addonAfter={<Icon className={getIcon('right')} onClick={() => emitterValueChange()} />}
+    />
+  );
+};

package/src/browser/components/ChatEditor.tsx

@@ -0,0 +1,129 @@
+import React, { useMemo } from 'react';
+
+import {
+  Schemes,
+  URI,
+  getIcon,
+  useInjectable,
+  uuid,
+} from '@opensumi/ide-core-browser';
+import { Icon, Popover } from '@opensumi/ide-core-browser/lib/components';
+import { getSimpleEditorOptions, ICodeEditor } from '@opensumi/ide-editor';
+import { EditorCollectionService } from '@opensumi/ide-editor';
+import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser/index';
+import { TextmateService } from '@opensumi/ide-editor/lib/browser/monaco-contrib/tokenizer/textmate.service';
+
+import * as styles from './components.module.less';
+
+const ChatEditor = ({ input, language }) => {
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  const editorCollectionService = useInjectable<EditorCollectionService>(EditorCollectionService);
+  const documentService = useInjectable<IEditorDocumentModelService>(IEditorDocumentModelService);
+  const textmateTokenizer = useInjectable<TextmateService>(TextmateService);
+
+  const useUUID = useMemo(() => uuid(12), [ref, ref.current]);
+
+  const createEditor = async (container: HTMLElement): Promise<ICodeEditor> => {
+    const codeEditor: ICodeEditor = await editorCollectionService.createCodeEditor(container!, {
+      ...getSimpleEditorOptions(),
+      readOnly: true,
+      lineNumbers: 'off',
+      selectOnLineNumbers: true,
+      scrollBeyondLastLine: false,
+      lineDecorationsWidth: 8,
+      dragAndDrop: false,
+      padding: { top: 8, bottom: 8 },
+      mouseWheelZoom: false,
+      scrollbar: {
+        alwaysConsumeMouseWheel: false,
+      },
+      wordWrap: 'off',
+      ariaLabel: 'Code block',
+      automaticLayout: true,
+    });
+
+    const docModel = await documentService.createModelReference(
+      new URI(`ai/chat/editor/${useUUID}`).withScheme(Schemes.walkThroughSnippet),
+    );
+
+    const model = docModel.instance.getMonacoModel();
+    model.updateOptions({ tabSize: 2 });
+    codeEditor.monacoEditor.setModel(model);
+    codeEditor.monacoEditor.getModel()?.setMode(language);
+
+    return codeEditor;
+  };
+
+  React.useEffect(() => {
+    if (ref && ref.current) {
+      textmateTokenizer.activateLanguage(language).then(async () => {
+        const codeEditor = await createEditor(ref.current!);
+        if (codeEditor) {
+          codeEditor.monacoEditor.setValue(input);
+          requestAnimationFrame(() => {
+            ref.current!.style.height = codeEditor.monacoEditor.getContentHeight() + 2 + 'px';
+          });
+        }
+      });
+    }
+  }, [ref.current]);
+
+  return (
+    <div className={styles.monaco_wrapper}>
+      <div className={styles.action_toolbar}>
+        <Popover id={`ai-chat-inser-${useUUID}`} title='插入代码'>
+          <Icon className={getIcon('openfile')} />
+        </Popover>
+        <Popover id={`ai-chat-copy-${useUUID}`} title='复制代码'>
+          <Icon className={getIcon('file-copy')} />
+        </Popover>
+      </div>
+      <div ref={ref} className={styles.editor}></div>
+    </div>
+  );
+};
+
+export const CodeBlockWrapper = ({ text }: { text: string }) => {
+  const renderText = (content) => {
+    const regexInlineCode = /`([^`]+)`/g;
+    const regexBlockCode = /```([^`]+)```/g;
+
+    return content.split(regexBlockCode).map((block: string, index) => {
+      if (index % 2 === 0) {
+        // 文本内容
+        return block.split(regexInlineCode).map((inline, index) => {
+          if (index % 2 === 0) {
+            // 非代码内容
+            return inline;
+          } else {
+            // 用 <span> 包裹代码行
+            return (
+              <span className={styles.code_inline} key={index}>
+                {inline}
+              </span>
+            );
+          }
+        });
+      } else {
+        // 通常第一个换行前的字符就是 language，比如 ```typescript
+        const language = block.split('\n')[0] || 'plaintext';
+
+        // 并去掉第一个 \n 前面的字符
+        block = block.replace(/.*?\n/, '');
+        block = block.trim();
+
+        return (
+          <div className={styles.code_block}>
+            <ChatEditor input={block} language={language} />
+          </div>
+        );
+      }
+    });
+  };
+
+  return (
+    <div className={styles.ai_chat_code_wrapper}>
+      <div className={styles.render_text}>{renderText(text)}</div>
+    </div>
+  );
+};

package/src/browser/components/ChatInput.tsx

@@ -0,0 +1,199 @@
+import cls from 'classnames';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { getExternalIcon } from '@opensumi/ide-core-browser';
+import { Icon, Input, getIcon } from '@opensumi/ide-core-browser/lib/components';
+
+import { InstructionEnum } from '../../common';
+
+import * as styles from './components.module.less';
+
+interface IBlockProps {
+  icon: string;
+  name?: string;
+}
+
+const Block = ({ icon, name }: IBlockProps) => (
+  <div className={styles.block}>
+    <Icon className={icon} />
+    {name && <span className={styles.name}>{name}</span>}
+  </div>
+);
+
+// 指令列表
+const optionsList: IBlockProps[] = [
+  {
+    icon: getIcon('search'),
+    name: InstructionEnum.aiSearchKey,
+  },
+  {
+    icon: getExternalIcon('code'),
+    name: InstructionEnum.aiSearchCodeKey,
+  },
+  {
+    icon: getIcon('edit'),
+    name: InstructionEnum.aiExplainKey,
+  },
+  {
+    icon: getIcon('smile'),
+    name: InstructionEnum.aiSumiKey,
+  },
+];
+
+// 指令命令激活组件
+const InstructionOptions = ({ onClick, bottom }) => {
+  const [commonlyUsed, setCommonlyUsed] = useState<IBlockProps[]>([]);
+  const [options, setOptions] = useState<IBlockProps[]>([]);
+
+  useEffect(() => {
+    setOptions(optionsList);
+
+    setCommonlyUsed([
+      {
+        icon: getIcon('delete'),
+        name: '聊天',
+      },
+    ]);
+  }, []);
+
+  const handleClick = useCallback(
+    (name: string | undefined) => {
+      if (onClick) {
+        onClick(name || '');
+      }
+    },
+    [onClick],
+  );
+
+  return (
+    <div className={styles.instruction_options_container} style={{ bottom: bottom + 'px' }}>
+      <div className={styles.options}>
+        <ul>
+          {options.map(({ icon, name }) => (
+            <li key={name} onClick={() => handleClick(name)}>
+              <Block icon={icon} />
+              <span>{name}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+      {commonlyUsed.length > 0 && (
+        <div className={styles.commonly_used}>
+          <span>常用指令：</span>
+          {commonlyUsed.map(({ icon, name }, i) => (
+            <Block key={i} icon={icon} name={name} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export interface IChatInputProps {
+  onSend: (value: string) => void;
+}
+
+// 指令命令激活组件
+export const ChatInput = ({ onSend }: IChatInputProps) => {
+  const [value, setValue] = useState('');
+  const [isShowOptions, setIsShowOptions] = useState<boolean>(false);
+  const [wrapperHeight, setWrapperHeight] = useState<number>(40);
+  const [slashWidget, setSlashWidget] = useState('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (value.length === 1 && value.startsWith('/')) {
+      setIsShowOptions(true);
+    } else {
+      setIsShowOptions(false);
+    }
+
+    // 自适应高度
+    if (inputRef && inputRef.current) {
+      inputRef.current.style.height = 0 + 'px';
+
+      const scrollHeight = inputRef.current.scrollHeight;
+      inputRef.current.style.height = Math.min(scrollHeight, 140) + 'px';
+
+      setWrapperHeight(scrollHeight + 20);
+    }
+
+    // 设置 slash widget 块
+    const regex = /\/(\w+)\s/;
+    const match = value.match(regex);
+    if (match) {
+      const keyword = match[0];
+      if (optionsList.find(({ name }) => name === keyword)) {
+        setSlashWidget(keyword);
+      }
+    } else {
+      setSlashWidget('');
+    }
+  }, [inputRef, value]);
+
+  const handleInputChange = useCallback((value: string) => setValue(value), []);
+
+  const handleSend = useCallback(() => {
+    if (onSend) {
+      onSend(value);
+      setValue('');
+    }
+  }, [onSend, value]);
+
+  const acquireOptionsCheck = useCallback(
+    (value: string) => {
+      if (value) {
+        setValue(value);
+        setIsShowOptions(false);
+
+        if (inputRef && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    },
+    [inputRef],
+  );
+
+  const optionsBottomPosition = useMemo(() => Math.min(181, Math.max(61, 21 + wrapperHeight)), [wrapperHeight]);
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
+      if (!event.shiftKey) {
+        event.preventDefault();
+        handleSend();
+      }
+    }
+  };
+
+  return (
+    <div className={styles.chat_input_container}>
+      {isShowOptions && <InstructionOptions onClick={acquireOptionsCheck} bottom={optionsBottomPosition} />}
+      {/* <div className={styles.header_operate}>
+        <Block icon={getIcon('add-comments')} name={'新对话'} />
+        <Icon className={getExternalIcon('history')} />
+      </div> */}
+      <Input
+        ref={inputRef}
+        placeholder={'可以问我任何问题，或键入主题 "/"'}
+        wrapperStyle={{ height: wrapperHeight + 'px' }}
+        value={value}
+        type={'textarea'}
+        onKeyDown={handleKeyDown}
+        onValueChange={handleInputChange}
+        className={styles.input_wrapper}
+        addonBefore={
+          slashWidget && (
+            <div className={styles.slash_widget_block}>
+              <span>{slashWidget}</span>
+            </div>
+          )
+        }
+        addonAfter={
+          <div className={cls(styles.send_chat_btn, value.length && styles.active)} onClick={() => handleSend()}>
+            <Icon className={getIcon('right')} />
+          </div>
+        }
+      />
+    </div>
+  );
+};

package/src/browser/components/ChatMoreActions.tsx

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+
+import { getExternalIcon, uuid } from '@opensumi/ide-core-browser';
+import { Icon, Popover } from '@opensumi/ide-core-browser/lib/components';
+
+import * as styles from './components.module.less';
+import { LineVertical } from './lineVertical';
+
+export const ChatMoreActions = ({ children }) => {
+
+  const useUUID = useMemo(() => uuid(12), []);
+
+  return (
+    <div className={styles.ai_chat_more_actions_container}>
+      <div className={styles.ai_chat_message}>{children}</div>
+      <div className={styles.more_actions}>
+        <div className={styles.side}>
+          <Icon className={getExternalIcon('history')} />
+          <span>重新生成</span>
+        </div>
+        <div className={styles.side}>
+          <Popover id={`ai-chat-thumbsup-${useUUID}`} title='赞'>
+            <Icon className={getExternalIcon('thumbsup')} />
+          </Popover>
+          <LineVertical />
+          <Popover id={`ai-chat-thumbsdown-${useUUID}`} title='踩'>
+            <Icon className={getExternalIcon('thumbsdown')} />
+          </Popover>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/browser/components/Thinking.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Icon, getIcon } from '@opensumi/ide-core-browser/lib/components';
+import { Progress } from '@opensumi/ide-core-browser/lib/progress/progress-bar';
+
+import * as styles from './components.module.less';
+
+export const Thinking = () => (
+  <div className={styles.thinking_container}>
+    <div className={styles.content}>
+      <span>Thinking...</span>
+    </div>
+    <div className={styles.stop}>
+      <span className={styles.progress_bar}>
+        <Progress loading={true} />
+      </span>
+      <div className={styles.block}>
+        <Icon className={getIcon('pause')}></Icon>
+        <span>停止</span>
+      </div>
+    </div>
+  </div>
+);