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

package/lib/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/lib/browser/components/lineVertical.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const LineVertical: () => React.JSX.Element;
+export declare const HorizontalVertical: () => React.JSX.Element;
+//# sourceMappingURL=lineVertical.d.ts.map

package/lib/browser/components/lineVertical.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineVertical.d.ts","sourceRoot":"","sources":["../../../src/browser/components/lineVertical.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,eAAO,MAAM,YAAY,yBAAyC,CAAC;AAEnE,eAAO,MAAM,kBAAkB,yBAA+C,CAAC"}

package/lib/browser/components/lineVertical.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalVertical = exports.LineVertical = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("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',
+};
+const LineVertical = () => react_1.default.createElement("span", { style: lineStyles });
+exports.LineVertical = LineVertical;
+const HorizontalVertical = () => react_1.default.createElement("span", { style: horizontalStyles });
+exports.HorizontalVertical = HorizontalVertical;
+//# sourceMappingURL=lineVertical.js.map

package/lib/browser/components/lineVertical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineVertical.js","sourceRoot":"","sources":["../../../src/browser/components/lineVertical.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAE1B,MAAM,UAAU,GAAG;IACjB,UAAU,EAAE,gBAAgB;IAC5B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,MAAM,gBAAgB,GAAG;IACvB,eAAe,EAAE,wBAAwB;IACzC,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,KAAK;CACjB,CAAC;AAEK,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,wCAAM,KAAK,EAAE,UAAU,GAAS,CAAC;AAAtD,QAAA,YAAY,gBAA0C;AAE5D,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,wCAAM,KAAK,EAAE,gBAAgB,GAAS,CAAC;AAAlE,QAAA,kBAAkB,sBAAgD"}

package/lib/browser/content-widget/ai-content-widget.d.ts

@@ -0,0 +1,38 @@
+import { Disposable, 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';
+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;
+}
+export declare class AiContentWidget extends Disposable implements IAiContentWidget {
+    private readonly editor;
+    private configContext;
+    allowEditorOverflow?: boolean | undefined;
+    suppressMouseDown?: boolean | undefined;
+    private domNode;
+    protected options: ShowAiContentOptions | undefined;
+    private readonly _onSelectChange;
+    readonly onSelectChange: Event<string>;
+    constructor(editor: IMonacoCodeEditor);
+    dispose(): void;
+    private renderView;
+    show(options?: ShowAiContentOptions | undefined): Promise<void>;
+    setOptions(options: ShowAiContentOptions): void;
+    hide: (options?: ShowAiContentOptions | undefined) => void;
+    getId(): string;
+    layoutContentWidget(): void;
+    getDomNode(): HTMLElement;
+    getPosition(): monaco.editor.IContentWidgetPosition | null;
+}
+//# sourceMappingURL=ai-content-widget.d.ts.map

package/lib/browser/content-widget/ai-content-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-content-widget.d.ts","sourceRoot":"","sources":["../../../src/browser/content-widget/ai-content-widget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAW,KAAK,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,mDAAmD,CAAC;AAC1G,OAAO,KAAK,MAAM,MAAM,uDAAuD,CAAC;AAIhF,MAAM,WAAW,gBAAiB,SAAQ,MAAM,CAAC,MAAM,CAAC,cAAc;IACpE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,oBAAoB,GAAG,SAAS,KAAK,IAAI,CAAC;IAC3D,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,oBAAoB,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC;CAC7B;AAED,qBACa,eAAgB,SAAQ,UAAW,YAAW,gBAAgB;IAc7D,OAAO,CAAC,QAAQ,CAAC,MAAM;IAXnC,OAAO,CAAC,aAAa,CAAY;IAEjC,mBAAmB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAQ;IACjD,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAS;IAEhD,OAAO,CAAC,OAAO,CAAc;IAC7B,SAAS,CAAC,OAAO,EAAE,oBAAoB,GAAG,SAAS,CAAC;IAEpD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAyB;IACzD,SAAgB,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,CAA8B;gBAE9C,MAAM,EAAE,iBAAiB;IAO7C,OAAO,IAAI,IAAI;IAKxB,OAAO,CAAC,UAAU;IAUZ,IAAI,CAAC,OAAO,CAAC,EAAE,oBAAoB,GAAG,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC;IAcrE,UAAU,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI;IAI/C,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,oBAAoB,GAAG,SAAS,KAAK,IAAI,CAGxD;IAEF,KAAK,IAAI,MAAM;IAIf,mBAAmB,IAAI,IAAI;IAI3B,UAAU,IAAI,WAAW;IAQzB,WAAW,IAAI,MAAM,CAAC,MAAM,CAAC,sBAAsB,GAAG,IAAI;CA2B3D"}

package/lib/browser/content-widget/ai-content-widget.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiContentWidget = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const di_1 = require("@opensumi/di");
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const ide_core_common_1 = require("@opensumi/ide-core-common");
+const monaco = tslib_1.__importStar(require("@opensumi/monaco-editor-core/esm/vs/editor/editor.api"));
+const ai_inline_chat_panel_1 = require("./ai-inline-chat-panel");
+let AiContentWidget = class AiContentWidget extends ide_core_common_1.Disposable {
+    constructor(editor) {
+        super();
+        this.editor = editor;
+        this.allowEditorOverflow = true;
+        this.suppressMouseDown = false;
+        this._onSelectChange = new ide_core_common_1.Emitter();
+        this.onSelectChange = this._onSelectChange.event;
+        this.hide = () => {
+            this.options = undefined;
+            this.editor.removeContentWidget(this);
+        };
+        this.hide();
+        this.renderView();
+    }
+    dispose() {
+        this.hide();
+        super.dispose();
+    }
+    renderView() {
+        react_dom_1.default.render(react_1.default.createElement(ide_core_browser_1.ConfigProvider, { value: this.configContext },
+            react_1.default.createElement(ai_inline_chat_panel_1.AIInlineChatPanel, { selectChangeFire: this._onSelectChange })), this.getDomNode());
+        this.layoutContentWidget();
+    }
+    async show(options) {
+        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) {
+        this.options = options;
+    }
+    getId() {
+        return 'AI-Content-Widget';
+    }
+    layoutContentWidget() {
+        this.editor.layoutContentWidget(this);
+    }
+    getDomNode() {
+        if (!this.domNode) {
+            this.domNode = document.createElement('div');
+            this.domNode.classList.add(this.getId());
+        }
+        return this.domNode;
+    }
+    getPosition() {
+        var _a;
+        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, (_a = this.options) === null || _a === void 0 ? void 0 : _a.selection.startColumn),
+                preference: [
+                    monaco.editor.ContentWidgetPositionPreference.BELOW,
+                ],
+            }
+            : null;
+    }
+};
+tslib_1.__decorate([
+    (0, di_1.Autowired)(ide_core_browser_1.AppConfig),
+    tslib_1.__metadata("design:type", Object)
+], AiContentWidget.prototype, "configContext", void 0);
+AiContentWidget = tslib_1.__decorate([
+    (0, di_1.Injectable)({ multiple: true }),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], AiContentWidget);
+exports.AiContentWidget = AiContentWidget;
+//# sourceMappingURL=ai-content-widget.js.map

package/lib/browser/content-widget/ai-content-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-content-widget.js","sourceRoot":"","sources":["../../../src/browser/content-widget/ai-content-widget.tsx"],"names":[],"mappings":"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"}

package/lib/browser/content-widget/ai-inline-chat-panel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Emitter } from '@opensumi/ide-core-common';
+export declare const AIInlineChatPanel: (props: {
+    selectChangeFire: Emitter<string>;
+}) => React.JSX.Element;
+//# sourceMappingURL=ai-inline-chat-panel.d.ts.map

package/lib/browser/content-widget/ai-inline-chat-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-inline-chat-panel.d.ts","sourceRoot":"","sources":["../../../src/browser/content-widget/ai-inline-chat-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAQpD,eAAO,MAAM,iBAAiB,UAAW;IAAE,gBAAgB,EAAE,QAAQ,MAAM,CAAC,CAAA;CAAE,sBAoJ7E,CAAC"}

package/lib/browser/content-widget/ai-inline-chat-panel.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AIInlineChatPanel = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const ide_core_browser_1 = require("@opensumi/ide-core-browser");
+const ide_core_browser_2 = require("@opensumi/ide-core-browser");
+const index_1 = require("@opensumi/ide-core-browser/lib/components/index");
+const progress_bar_1 = require("@opensumi/ide-core-browser/lib/progress/progress-bar");
+const AIImprove_1 = require("../components/AIImprove");
+const AIInput_1 = require("../components/AIInput");
+const styles = tslib_1.__importStar(require("./ai-inline-chat.module.less"));
+const ai_inline_chat_service_1 = require("./ai-inline-chat.service");
+const AIInlineChatPanel = (props) => {
+    const aiInlineChatService = (0, ide_core_browser_1.useInjectable)(ai_inline_chat_service_1.AiInlineChatService);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [isDone, setIsDone] = (0, react_1.useState)(false);
+    const [currentCheckText, setCurrentCheckText] = (0, react_1.useState)('优化代码');
+    (0, react_1.useEffect)(() => {
+        const dis = aiInlineChatService.onChatStatus((status) => {
+            if (status === 1 /* EChatStatus.THINKING */) {
+                setIsLoading(true);
+                setIsDone(false);
+            }
+            else {
+                setIsLoading(false);
+            }
+            if (status === 2 /* EChatStatus.DONE */) {
+                setIsDone(true);
+            }
+            else {
+                setIsDone(false);
+            }
+            if (status === 3 /* EChatStatus.ERROR */) {
+                setIsLoading(false);
+                setIsDone(false);
+            }
+        });
+        return () => {
+            dis.dispose();
+        };
+    }, []);
+    const improveList = (0, react_1.useMemo)(() => [
+        { title: '解释代码', iconClass: (0, ide_core_browser_2.getExternalIcon)('git-pull-request') },
+        { title: '｜', iconClass: '' },
+        { title: '生成注释', iconClass: (0, ide_core_browser_2.getExternalIcon)('git-pull-request') },
+        { title: '｜', iconClass: '' },
+        { title: '优化代码', iconClass: (0, ide_core_browser_2.getExternalIcon)('git-pull-request') },
+        { title: '｜', iconClass: '' },
+        { title: '生成测试用例', iconClass: (0, ide_core_browser_2.getExternalIcon)('git-pull-request') },
+    ], []);
+    const renderHeader = (0, react_1.useMemo)(() => {
+        if (!isLoading && !isDone) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { className: styles.panel_header },
+            react_1.default.createElement("div", { className: styles.header_container },
+                react_1.default.createElement("div", { className: styles.left_side },
+                    react_1.default.createElement("span", null, "Chat")),
+                react_1.default.createElement("div", { className: styles.right_side },
+                    react_1.default.createElement(index_1.Icon, { className: (0, ide_core_browser_1.getIcon)('clear'), style: { marginRight: '8px' } }),
+                    react_1.default.createElement(index_1.Icon, { className: (0, ide_core_browser_1.getIcon)('close') }))),
+            react_1.default.createElement("span", { className: styles.progress_bar },
+                react_1.default.createElement(progress_bar_1.Progress, { loading: !isDone }))));
+    }, [isLoading, isDone]);
+    const renderResult = (0, react_1.useMemo)(() => {
+        if (!isLoading && !isDone) {
+            return null;
+        }
+        return (react_1.default.createElement("div", { className: styles.panel_result },
+            react_1.default.createElement("div", { className: styles.result_container },
+                react_1.default.createElement("div", { className: styles.title },
+                    react_1.default.createElement(index_1.Icon, null),
+                    react_1.default.createElement("span", null, currentCheckText)),
+                isDone && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", { className: styles.v_line }),
+                    react_1.default.createElement("div", { className: styles.operate },
+                        react_1.default.createElement("div", { className: styles.left_side },
+                            react_1.default.createElement(index_1.Button, { size: 'small', onClick: () => {
+                                    aiInlineChatService._onAccept.fire();
+                                } }, "\u91C7\u7EB3"),
+                            react_1.default.createElement(index_1.Button, { size: 'small', type: 'ghost', onClick: () => {
+                                    aiInlineChatService._onDiscard.fire();
+                                } }, "\u4E22\u5F03")),
+                        react_1.default.createElement("div", { className: styles.right_side },
+                            react_1.default.createElement(index_1.Button, { size: 'small' },
+                                react_1.default.createElement(index_1.Icon, { className: (0, ide_core_browser_1.getIcon)('layout') })),
+                            react_1.default.createElement("span", null, "\uFF5C"),
+                            react_1.default.createElement(index_1.Icon, { className: (0, ide_core_browser_2.getExternalIcon)('thumbsup') }),
+                            react_1.default.createElement(index_1.Icon, { className: (0, ide_core_browser_2.getExternalIcon)('thumbsdown') }))))))));
+    }, [isLoading, isDone, aiInlineChatService]);
+    return (react_1.default.createElement("div", { className: styles.ai_inline_chat_panel },
+        renderHeader,
+        renderResult,
+        react_1.default.createElement("div", { className: styles.panel_chat },
+            react_1.default.createElement("div", { className: styles.ai_shortcuts },
+                react_1.default.createElement(AIImprove_1.AIImprove, { onClick: (title) => {
+                        props.selectChangeFire.fire(title);
+                        setCurrentCheckText(title);
+                    }, lists: improveList })),
+            react_1.default.createElement("div", { className: styles.ai_content_widget_input },
+                react_1.default.createElement(AIInput_1.AiInput, { onValueChange: (value) => {
+                        props.selectChangeFire.fire(value);
+                        setCurrentCheckText(value);
+                    } })))));
+};
+exports.AIInlineChatPanel = AIInlineChatPanel;
+//# sourceMappingURL=ai-inline-chat-panel.js.map

package/lib/browser/content-widget/ai-inline-chat-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-inline-chat-panel.js","sourceRoot":"","sources":["../../../src/browser/content-widget/ai-inline-chat-panel.tsx"],"names":[],"mappings":"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"}

package/lib/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/lib/browser/content-widget/ai-inline-chat.service.d.ts

@@ -0,0 +1,23 @@
+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';
+export declare const enum EChatStatus {
+    READY = 0,
+    THINKING = 1,
+    DONE = 2,
+    ERROR = 3
+}
+export declare class AiInlineChatService {
+    aiBackService: any;
+    protected readonly commandService: CommandService;
+    protected preferenceService: PreferenceService;
+    protected extensionManagementService: ExtensionManagementService;
+    private readonly _onChatStatus;
+    readonly onChatStatus: Event<EChatStatus>;
+    readonly _onAccept: Emitter<void>;
+    readonly onAccept: Event<void>;
+    readonly _onDiscard: Emitter<void>;
+    readonly onDiscard: Event<void>;
+    launchChatMessage(message: EChatStatus): void;
+}
+//# sourceMappingURL=ai-inline-chat.service.d.ts.map