@genexus/genexus-ide-ui 1.0.37 → 1.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
- package/dist/cjs/gx-ide-ai-assistant.cjs.entry.js +26 -14
- package/dist/cjs/gx-ide-ai-assistant.cjs.entry.js.map +1 -1
- package/dist/cjs/gx-ide-ai-message.cjs.entry.js +42 -13
- package/dist/cjs/gx-ide-ai-message.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ai-assistant/ai-assistant.js +26 -34
- package/dist/collection/components/ai-assistant/ai-assistant.js.map +1 -1
- package/dist/collection/components/ai-assistant/ai-message.css +40 -8
- package/dist/collection/components/ai-assistant/ai-message.js +61 -16
- package/dist/collection/components/ai-assistant/ai-message.js.map +1 -1
- package/dist/components/ai-message.js +44 -15
- package/dist/components/ai-message.js.map +1 -1
- package/dist/components/gx-ide-ai-assistant.js +28 -16
- package/dist/components/gx-ide-ai-assistant.js.map +1 -1
- package/dist/esm/genexus-ide-ui.js +1 -1
- package/dist/esm/gx-ide-ai-assistant.entry.js +27 -15
- package/dist/esm/gx-ide-ai-assistant.entry.js.map +1 -1
- package/dist/esm/gx-ide-ai-message.entry.js +42 -13
- package/dist/esm/gx-ide-ai-message.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js.map +1 -1
- package/dist/genexus-ide-ui/p-6e993843.entry.js +141 -0
- package/dist/genexus-ide-ui/p-6e993843.entry.js.map +1 -0
- package/dist/genexus-ide-ui/{p-040bd0c5.entry.js → p-fdd9de33.entry.js} +63 -51
- package/dist/genexus-ide-ui/p-fdd9de33.entry.js.map +1 -0
- package/dist/types/components/ai-assistant/ai-assistant.d.ts +1 -6
- package/dist/types/components/ai-assistant/ai-message.d.ts +7 -0
- package/dist/types/components.d.ts +8 -19
- package/package.json +1 -1
- package/dist/genexus-ide-ui/p-040bd0c5.entry.js.map +0 -1
- package/dist/genexus-ide-ui/p-7cdfbdba.entry.js +0 -88
- package/dist/genexus-ide-ui/p-7cdfbdba.entry.js.map +0 -1
|
@@ -1,30 +1,53 @@
|
|
|
1
|
-
|
|
1
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
2
|
+
if (kind === "a" && !f)
|
|
3
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
4
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
5
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
6
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
7
|
+
};
|
|
8
|
+
var _GxIdeAiMessage_buttonMouseDownHandler;
|
|
2
9
|
import { h } from "@stencil/core";
|
|
3
|
-
|
|
4
|
-
/* CUSTOM IMPORTS */
|
|
10
|
+
import { getIconPath } from "@genexus/mercury";
|
|
5
11
|
import { Locale } from "../../common/locale";
|
|
6
12
|
import { hiChar } from "../../common/helpers";
|
|
13
|
+
const COPY_ICON = getIconPath({
|
|
14
|
+
category: "bpm",
|
|
15
|
+
name: "tasks",
|
|
16
|
+
colorType: "neutral"
|
|
17
|
+
});
|
|
7
18
|
export class GxIdeAiMessage {
|
|
8
19
|
constructor() {
|
|
9
20
|
this.copyable = false;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
21
|
+
this.copyMessage = () => {
|
|
22
|
+
const messageInfo = JSON.stringify({
|
|
23
|
+
messageType: this.messageType,
|
|
24
|
+
message: this.message
|
|
25
|
+
}, null, 2);
|
|
26
|
+
navigator.clipboard.writeText(messageInfo);
|
|
27
|
+
this.showCopiedMessage = true;
|
|
28
|
+
setTimeout(() => {
|
|
29
|
+
this.showCopiedMessage = false;
|
|
30
|
+
}, 1500);
|
|
31
|
+
};
|
|
32
|
+
_GxIdeAiMessage_buttonMouseDownHandler.set(this, (e) => {
|
|
33
|
+
e.preventDefault();
|
|
34
|
+
e.stopPropagation();
|
|
35
|
+
});
|
|
13
36
|
this.evaluateMessageIsCopyable = () => {
|
|
14
|
-
this.copyable =
|
|
15
|
-
|
|
16
|
-
|
|
37
|
+
this.copyable = this.messageType !== "assistant-in-progress";
|
|
38
|
+
};
|
|
39
|
+
this.evaluateCopyIcon = () => {
|
|
40
|
+
return this.copyable ? (h("button", { class: "button-tertiary button-icon-only", "aria-label": "copy", onClick: this.copyMessage, onMouseDown: __classPrivateFieldGet(this, _GxIdeAiMessage_buttonMouseDownHandler, "f") }, h("ch-image", { class: "icon-md", src: COPY_ICON }))) : null;
|
|
17
41
|
};
|
|
18
42
|
this.visible = false;
|
|
19
43
|
this.showCopiedMessage = false;
|
|
44
|
+
this.aiAssistantHostRef = undefined;
|
|
20
45
|
this.message = undefined;
|
|
21
46
|
this.messageType = undefined;
|
|
22
47
|
this.filterValue = undefined;
|
|
23
48
|
this.hidden = undefined;
|
|
24
49
|
this.translations = undefined;
|
|
25
50
|
}
|
|
26
|
-
// 5.EVENTS (EMIT) //
|
|
27
|
-
// 6.COMPONENT LIFECYCLE METHODS //
|
|
28
51
|
async componentWillLoad() {
|
|
29
52
|
this._componentLocale = await Locale.getComponentStrings(this.el);
|
|
30
53
|
this.evaluateMessageIsCopyable();
|
|
@@ -37,7 +60,6 @@ export class GxIdeAiMessage {
|
|
|
37
60
|
messagesList.scrollTo(0, 0);
|
|
38
61
|
}, 0);
|
|
39
62
|
}
|
|
40
|
-
// 10.RENDER() FUNCTION //
|
|
41
63
|
render() {
|
|
42
64
|
return (h("li", { class: {
|
|
43
65
|
"message": true,
|
|
@@ -48,17 +70,19 @@ export class GxIdeAiMessage {
|
|
|
48
70
|
"message--copying": this.showCopiedMessage
|
|
49
71
|
} }, h("div", { class: "message__outer-wrapper" }, h("div", { class: {
|
|
50
72
|
"message__inner-wrapper": true
|
|
51
|
-
} }, this.messageType === "user" ? (h("span", { class: "message__role message__role--user" }, this._componentLocale.you)) : (h("
|
|
73
|
+
} }, this.messageType === "user" ? (h("div", { class: "message__header" }, h("span", { class: "message__role message__role--user" }, h("span", { class: "message__role-description" }, this._componentLocale.you)), this.evaluateCopyIcon())) : (h("div", { class: {
|
|
74
|
+
"message__header": true,
|
|
75
|
+
"message__header--in-progress": this.messageType === "assistant-in-progress"
|
|
76
|
+
} }, h("span", { class: {
|
|
52
77
|
"message__role": this.messageType !== "assistant-in-progress",
|
|
53
78
|
"message__role--hidden": this.messageType === "assistant-in-progress",
|
|
54
79
|
"message__role--assistant": true
|
|
55
|
-
} }, this._componentLocale.assistant)), h("div", { class: {
|
|
80
|
+
} }, h("span", { class: "message__role-description" }, this._componentLocale.assistant)), this.evaluateCopyIcon())), h("div", { class: {
|
|
56
81
|
"message__caption": true,
|
|
57
82
|
"message__caption--in-progress": this.messageType === "assistant-in-progress"
|
|
58
|
-
} }, hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
|
|
83
|
+
} }, this.showCopiedMessage ? (h("span", { class: "copied" }, h("ch-image", { class: "icon-md", src: COPY_ICON }), this.translations["copied"])) : null, hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
|
|
59
84
|
}
|
|
60
85
|
static get is() { return "gx-ide-ai-message"; }
|
|
61
|
-
static get encapsulation() { return "shadow"; }
|
|
62
86
|
static get originalStyleUrls() {
|
|
63
87
|
return {
|
|
64
88
|
"$": ["ai-message.scss"]
|
|
@@ -72,6 +96,26 @@ export class GxIdeAiMessage {
|
|
|
72
96
|
static get assetsDirs() { return ["gx-ide-assets/ai-message"]; }
|
|
73
97
|
static get properties() {
|
|
74
98
|
return {
|
|
99
|
+
"aiAssistantHostRef": {
|
|
100
|
+
"type": "unknown",
|
|
101
|
+
"mutable": false,
|
|
102
|
+
"complexType": {
|
|
103
|
+
"original": "HTMLGxIdeAiAssistantElement",
|
|
104
|
+
"resolved": "HTMLGxIdeAiAssistantElement",
|
|
105
|
+
"references": {
|
|
106
|
+
"HTMLGxIdeAiAssistantElement": {
|
|
107
|
+
"location": "global",
|
|
108
|
+
"id": "global::HTMLGxIdeAiAssistantElement"
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
"required": false,
|
|
113
|
+
"optional": false,
|
|
114
|
+
"docs": {
|
|
115
|
+
"tags": [],
|
|
116
|
+
"text": "A reference to the gx-ide-ai-assistant host element"
|
|
117
|
+
}
|
|
118
|
+
},
|
|
75
119
|
"message": {
|
|
76
120
|
"type": "string",
|
|
77
121
|
"mutable": false,
|
|
@@ -177,4 +221,5 @@ export class GxIdeAiMessage {
|
|
|
177
221
|
}
|
|
178
222
|
static get elementRef() { return "el"; }
|
|
179
223
|
}
|
|
224
|
+
_GxIdeAiMessage_buttonMouseDownHandler = new WeakMap();
|
|
180
225
|
//# sourceMappingURL=ai-message.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ai-message.js","sourceRoot":"","sources":["../../../src/components/ai-assistant/ai-message.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"ai-message.js","sourceRoot":"","sources":["../../../src/components/ai-assistant/ai-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\nconst COPY_ICON = getIconPath({\n category: \"bpm\",\n name: \"tasks\",\n colorType: \"neutral\"\n});\n\n@Component({\n tag: \"gx-ide-ai-message\",\n styleUrl: \"ai-message.scss\",\n shadow: false,\n assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n /* The message allows to be copied*/\n private _componentLocale: any;\n private copyable = false;\n\n @Element() el: HTMLGxIdeAiMessageElement;\n\n /**\n * This wil display the message if true\n */\n @State() visible = false;\n\n /**\n * This wil show the user a text, indicating that the message has been copied\n */\n @State() showCopiedMessage = false;\n\n /**\n * A reference to the gx-ide-ai-assistant host element\n */\n @Prop() readonly aiAssistantHostRef: HTMLGxIdeAiAssistantElement;\n\n /**\n * The actual message\n */\n @Prop() readonly message: string;\n\n /**\n * The message type\n */\n @Prop() readonly messageType: MessageType;\n\n /**\n * The filter value\n */\n @Prop() readonly filterValue: string;\n\n /**\n * It hides the message (used for the filter)\n */\n @Prop() readonly hidden: boolean;\n\n /**\n * An object with the needed string translations.\n */\n @Prop() readonly translations: Translations;\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateMessageIsCopyable();\n }\n\n componentDidRender() {\n setTimeout(() => {\n /* Without the timeout it appears instantly (no apparent transition)*/\n this.visible = true;\n const messagesList = this.el.parentElement;\n messagesList.scrollTo(0, 0);\n }, 0);\n }\n\n private copyMessage = () => {\n const messageInfo = JSON.stringify(\n {\n messageType: this.messageType,\n message: this.message\n },\n null,\n 2\n );\n\n navigator.clipboard.writeText(messageInfo);\n this.showCopiedMessage = true;\n setTimeout(() => {\n this.showCopiedMessage = false;\n }, 1500);\n };\n\n #buttonMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n private evaluateMessageIsCopyable = () => {\n this.copyable = this.messageType !== \"assistant-in-progress\";\n };\n\n private evaluateCopyIcon = () => {\n return this.copyable ? (\n <button\n class=\"button-tertiary button-icon-only\"\n aria-label=\"copy\"\n onClick={this.copyMessage}\n onMouseDown={this.#buttonMouseDownHandler}\n >\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n </button>\n ) : null;\n };\n\n render() {\n return (\n <li\n class={{\n \"message\": true,\n \"message--visible\": this.visible && !this.hidden,\n [`message--${[this.messageType]}`]: true,\n \"message--assistant\": this.messageType !== \"user\",\n \"message--copyable\": this.copyable,\n \"message--copying\": this.showCopiedMessage\n }}\n >\n <div class=\"message__outer-wrapper\">\n <div\n class={{\n \"message__inner-wrapper\": true\n }}\n >\n {this.messageType === \"user\" ? (\n <div class=\"message__header\">\n <span class=\"message__role message__role--user\">\n <span class=\"message__role-description\">\n {this._componentLocale.you}\n </span>\n </span>\n {this.evaluateCopyIcon()}\n </div>\n ) : (\n <div\n class={{\n \"message__header\": true,\n \"message__header--in-progress\":\n this.messageType === \"assistant-in-progress\"\n }}\n >\n <span\n class={{\n \"message__role\":\n this.messageType !== \"assistant-in-progress\",\n \"message__role--hidden\":\n this.messageType === \"assistant-in-progress\",\n \"message__role--assistant\": true\n }}\n >\n <span class=\"message__role-description\">\n {this._componentLocale.assistant}\n </span>\n </span>\n {this.evaluateCopyIcon()}\n </div>\n )}\n <div\n class={{\n \"message__caption\": true,\n \"message__caption--in-progress\":\n this.messageType === \"assistant-in-progress\"\n }}\n >\n {this.showCopiedMessage ? (\n <span class=\"copied\">\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n {this.translations[\"copied\"]}\n </span>\n ) : null}\n {hiChar(this.message, this.filterValue)}\n </div>\n {this.messageType === \"assistant-in-progress\" ? (\n <div class=\"animation-wrapper\">\n <div class=\"dot-pulse\"></div>\n </div>\n ) : null}\n </div>\n </div>\n </li>\n );\n }\n}\n\nexport type Translations = {\n [key: string]: string;\n};\n"]}
|
|
@@ -1,33 +1,58 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
|
|
2
|
+
import { g as getIconPath } from './MERCURY_ASSETS.js';
|
|
2
3
|
import { L as Locale } from './locale.js';
|
|
3
4
|
import { h as hiChar } from './helpers.js';
|
|
4
5
|
|
|
5
|
-
const aiMessageCss = ":host{font-family:var(--mer-font-family--primary)}.message{color:var(--mer-color__neutral-gray--100);display:grid;grid-template-rows:0fr;transition:grid-template-rows 100ms;transition:grid-template-rows 100ms, -ms-grid-rows 100ms;}.message__outer-wrapper{overflow:hidden}.message__inner-wrapper{padding:var(--mer-spacing--sm) var(--mer-spacing--sm);border-radius:var(--mer-border__radius--sm);border-inline-start:var(--mer-border__width--md) solid transparent;background-color:var(--mer-color__neutral-gray--1200);margin-block-start:var(--mer-spacing--xs)}.
|
|
6
|
+
const aiMessageCss = ":host{font-family:var(--mer-font-family--primary)}.message{color:var(--mer-color__neutral-gray--100);display:grid;grid-template-rows:0fr;transition:grid-template-rows 100ms;transition:grid-template-rows 100ms, -ms-grid-rows 100ms;}.message__outer-wrapper{overflow:hidden}.message__inner-wrapper{padding:var(--mer-spacing--sm) var(--mer-spacing--sm);border-radius:var(--mer-border__radius--sm);border-inline-start:var(--mer-border__width--md) solid transparent;background-color:var(--mer-color__neutral-gray--1200);margin-block-start:var(--mer-spacing--xs);position:relative}.message__header{display:flex;gap:var(--mer-spacing--xs);justify-content:space-between}.message__header .icon-md{opacity:0}.message__header--in-progress{display:contents}.message__role{font-weight:var(--mer-font__weight--semi-bold);margin-block-end:var(--mer-spacing--xs);display:inline-grid;grid-template-columns:max-content 1fr;gap:8px}.message__role:before{content:\"\";display:grid;place-self:center flex-end;inline-size:4px;block-size:4px;border-radius:50%;background-color:currentcolor}.message__role-description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;padding-block-start:2px}.message__role--user{color:var(--mer-color__primary--300)}.message__role--hidden{display:none}.message__caption{font-size:var(--mer-font__size--xs);line-height:var(--mer-line-height--regular)}.message--visible{grid-template-rows:1fr}.message--copying{pointer-events:none}.message--copying span:not(.copied),.message--copying .message__caption{color:transparent;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.message--user .message__inner-wrapper{background-color:rgba(91, 167, 255, 0.08);border-color:var(--mer-border-color__primary)}.message--assistant-action .message__inner-wrapper{background-color:rgba(63, 168, 155, 0.05);border-color:var(--mer-border-color__success)}.message--assistant-chat .message__inner-wrapper{background-color:var(--mer-surface__elevation--01)}.message--assistant-in-progress{color:var(--mer-color__neutral-gray--500)}.message--assistant-in-progress .message__inner-wrapper{font-style:italic;display:grid;grid-template-columns:1fr auto;gap:var(--mer-spacing--xs)}.message--assistant-in-progress .message__inner-wrapper .message__caption{flex:1}.message--assistant-in-progress .message__inner-wrapper .animation-wrapper{flex:none}.message--assistant-error .message__inner-wrapper{background-color:rgba(251, 124, 132, 0.05);border-color:var(--mer-border-color__error)}.message--copyable:hover{filter:brightness(1.2)}.message--copyable:hover .icon-md{opacity:1}.message:last-child{margin-block-end:0}:host(:first-child) .message__inner-wrapper{margin-block-end:0}.animation-wrapper{width:45px;display:flex;align-items:center;justify-content:center}.dot-pulse{position:relative;left:-9999px;width:5px;height:5px;border-radius:2.5px;background-color:var(--mer-color__neutral-gray--400);color:var(--mer-color__neutral-gray--400);box-shadow:9999px 0 0 -5px;animation:dot-pulse 1.5s infinite linear;animation-delay:0.25s}.dot-pulse::before,.dot-pulse::after{content:\"\";display:inline-block;position:absolute;top:0;width:5px;height:5px;border-radius:2.5px;background-color:var(--mer-color__neutral-gray--400);color:var(--mer-color__neutral-gray--400)}.dot-pulse::before{box-shadow:9984px 0 0 -5px;animation:dot-pulse-before 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px;animation:dot-pulse-after 1.5s infinite linear;animation-delay:0.5s}@keyframes dot-pulse-before{0%{box-shadow:9984px 0 0 -5px}30%{box-shadow:9984px 0 0 2px}60%,100%{box-shadow:9984px 0 0 -5px}}@keyframes dot-pulse{0%{box-shadow:9999px 0 0 -5px}30%{box-shadow:9999px 0 0 2px}60%,100%{box-shadow:9999px 0 0 -5px}}@keyframes dot-pulse-after{0%{box-shadow:10014px 0 0 -5px}30%{box-shadow:10014px 0 0 2px}60%,100%{box-shadow:10014px 0 0 -5px}}.copied{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--mer-color__neutral-gray--300);display:flex;gap:var(--mer-spacing--xs);opacity:0;animation:fadeIn var(--mer-timing--regular) ease-out forwards}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}";
|
|
6
7
|
|
|
8
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
9
|
+
if (kind === "a" && !f)
|
|
10
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
11
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
12
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
13
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
14
|
+
};
|
|
15
|
+
var _GxIdeAiMessage_buttonMouseDownHandler;
|
|
16
|
+
const COPY_ICON = getIconPath({
|
|
17
|
+
category: "bpm",
|
|
18
|
+
name: "tasks",
|
|
19
|
+
colorType: "neutral"
|
|
20
|
+
});
|
|
7
21
|
const GxIdeAiMessage = /*@__PURE__*/ proxyCustomElement(class GxIdeAiMessage extends HTMLElement {
|
|
8
22
|
constructor() {
|
|
9
23
|
super();
|
|
10
24
|
this.__registerHost();
|
|
11
|
-
this.__attachShadow();
|
|
12
25
|
this.copyable = false;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
26
|
+
this.copyMessage = () => {
|
|
27
|
+
const messageInfo = JSON.stringify({
|
|
28
|
+
messageType: this.messageType,
|
|
29
|
+
message: this.message
|
|
30
|
+
}, null, 2);
|
|
31
|
+
navigator.clipboard.writeText(messageInfo);
|
|
32
|
+
this.showCopiedMessage = true;
|
|
33
|
+
setTimeout(() => {
|
|
34
|
+
this.showCopiedMessage = false;
|
|
35
|
+
}, 1500);
|
|
36
|
+
};
|
|
37
|
+
_GxIdeAiMessage_buttonMouseDownHandler.set(this, (e) => {
|
|
38
|
+
e.preventDefault();
|
|
39
|
+
e.stopPropagation();
|
|
40
|
+
});
|
|
16
41
|
this.evaluateMessageIsCopyable = () => {
|
|
17
|
-
this.copyable =
|
|
18
|
-
|
|
19
|
-
|
|
42
|
+
this.copyable = this.messageType !== "assistant-in-progress";
|
|
43
|
+
};
|
|
44
|
+
this.evaluateCopyIcon = () => {
|
|
45
|
+
return this.copyable ? (h("button", { class: "button-tertiary button-icon-only", "aria-label": "copy", onClick: this.copyMessage, onMouseDown: __classPrivateFieldGet(this, _GxIdeAiMessage_buttonMouseDownHandler, "f") }, h("ch-image", { class: "icon-md", src: COPY_ICON }))) : null;
|
|
20
46
|
};
|
|
21
47
|
this.visible = false;
|
|
22
48
|
this.showCopiedMessage = false;
|
|
49
|
+
this.aiAssistantHostRef = undefined;
|
|
23
50
|
this.message = undefined;
|
|
24
51
|
this.messageType = undefined;
|
|
25
52
|
this.filterValue = undefined;
|
|
26
53
|
this.hidden = undefined;
|
|
27
54
|
this.translations = undefined;
|
|
28
55
|
}
|
|
29
|
-
// 5.EVENTS (EMIT) //
|
|
30
|
-
// 6.COMPONENT LIFECYCLE METHODS //
|
|
31
56
|
async componentWillLoad() {
|
|
32
57
|
this._componentLocale = await Locale.getComponentStrings(this.el);
|
|
33
58
|
this.evaluateMessageIsCopyable();
|
|
@@ -40,7 +65,6 @@ const GxIdeAiMessage = /*@__PURE__*/ proxyCustomElement(class GxIdeAiMessage ext
|
|
|
40
65
|
messagesList.scrollTo(0, 0);
|
|
41
66
|
}, 0);
|
|
42
67
|
}
|
|
43
|
-
// 10.RENDER() FUNCTION //
|
|
44
68
|
render() {
|
|
45
69
|
return (h("li", { class: {
|
|
46
70
|
"message": true,
|
|
@@ -51,19 +75,23 @@ const GxIdeAiMessage = /*@__PURE__*/ proxyCustomElement(class GxIdeAiMessage ext
|
|
|
51
75
|
"message--copying": this.showCopiedMessage
|
|
52
76
|
} }, h("div", { class: "message__outer-wrapper" }, h("div", { class: {
|
|
53
77
|
"message__inner-wrapper": true
|
|
54
|
-
} }, this.messageType === "user" ? (h("span", { class: "message__role message__role--user" }, this._componentLocale.you)) : (h("
|
|
78
|
+
} }, this.messageType === "user" ? (h("div", { class: "message__header" }, h("span", { class: "message__role message__role--user" }, h("span", { class: "message__role-description" }, this._componentLocale.you)), this.evaluateCopyIcon())) : (h("div", { class: {
|
|
79
|
+
"message__header": true,
|
|
80
|
+
"message__header--in-progress": this.messageType === "assistant-in-progress"
|
|
81
|
+
} }, h("span", { class: {
|
|
55
82
|
"message__role": this.messageType !== "assistant-in-progress",
|
|
56
83
|
"message__role--hidden": this.messageType === "assistant-in-progress",
|
|
57
84
|
"message__role--assistant": true
|
|
58
|
-
} }, this._componentLocale.assistant)), h("div", { class: {
|
|
85
|
+
} }, h("span", { class: "message__role-description" }, this._componentLocale.assistant)), this.evaluateCopyIcon())), h("div", { class: {
|
|
59
86
|
"message__caption": true,
|
|
60
87
|
"message__caption--in-progress": this.messageType === "assistant-in-progress"
|
|
61
|
-
} }, hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
|
|
88
|
+
} }, this.showCopiedMessage ? (h("span", { class: "copied" }, h("ch-image", { class: "icon-md", src: COPY_ICON }), this.translations["copied"])) : null, hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
|
|
62
89
|
}
|
|
63
90
|
static get assetsDirs() { return ["gx-ide-assets/ai-message"]; }
|
|
64
91
|
get el() { return this; }
|
|
65
92
|
static get style() { return aiMessageCss; }
|
|
66
|
-
}, [
|
|
93
|
+
}, [0, "gx-ide-ai-message", {
|
|
94
|
+
"aiAssistantHostRef": [16],
|
|
67
95
|
"message": [1],
|
|
68
96
|
"messageType": [1, "message-type"],
|
|
69
97
|
"filterValue": [1, "filter-value"],
|
|
@@ -72,6 +100,7 @@ const GxIdeAiMessage = /*@__PURE__*/ proxyCustomElement(class GxIdeAiMessage ext
|
|
|
72
100
|
"visible": [32],
|
|
73
101
|
"showCopiedMessage": [32]
|
|
74
102
|
}]);
|
|
103
|
+
_GxIdeAiMessage_buttonMouseDownHandler = new WeakMap();
|
|
75
104
|
function defineCustomElement() {
|
|
76
105
|
if (typeof customElements === "undefined") {
|
|
77
106
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ai-message.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,4vHAA4vH;;MCcpwH,cAAc;;;;;QAmBjB,aAAQ,GAAG,KAAK,CAAC;;;;QAqEjB,8BAAyB,GAAG;YAClC,IAAI,CAAC,QAAQ;gBACX,IAAI,CAAC,WAAW,KAAK,uBAAuB;oBAC5C,IAAI,CAAC,WAAW,KAAK,kBAAkB,CAAC;SAC3C,CAAC;uBA9DiB,KAAK;iCAKK,KAAK;;;;;;;;;IAiClC,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,yBAAyB,EAAE,CAAC;KAClC;IAED,kBAAkB;QAChB,UAAU,CAAC;;YAET,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YAC3C,YAAY,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SAC7B,EAAE,CAAC,CAAC,CAAC;KACP;;IAgBD,MAAM;QACJ,QACE,UACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,kBAAkB,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM;gBAChD,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,IAAI;gBACxC,oBAAoB,EAAE,IAAI,CAAC,WAAW,KAAK,MAAM;gBACjD,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;aAC3C,IAED,WAAK,KAAK,EAAC,wBAAwB,IACjC,WACE,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;aAC/B,IAEA,IAAI,CAAC,WAAW,KAAK,MAAM,IAC1B,YAAM,KAAK,EAAC,mCAAmC,IAC5C,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACrB,KAEP,YACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,WAAW,KAAK,uBAAuB;gBAC7D,uBAAuB,EACrB,IAAI,CAAC,WAAW,KAAK,uBAAuB;gBAC9C,0BAA0B,EAAE,IAAI;aACjC,IAEA,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAC3B,CACR,EACD,WACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,+BAA+B,EAC7B,IAAI,CAAC,WAAW,KAAK,uBAAuB;aAC/C,IAEA,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CACnC,EACL,IAAI,CAAC,WAAW,KAAK,uBAAuB,IAC3C,WAAK,KAAK,EAAC,mBAAmB,IAC5B,WAAK,KAAK,EAAC,WAAW,GAAO,CACzB,IACJ,IAAI,CACJ,CACF,CACH,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ai-assistant/ai-message.scss?tag=gx-ide-ai-message&encapsulation=shadow","src/components/ai-assistant/ai-message.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n font-family: var(--mer-font-family--primary);\n}\n/*--- Messages ---*/\n.message {\n color: var(--mer-color__neutral-gray--100);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 100ms;\n transition: grid-template-rows 100ms, -ms-grid-rows 100ms;\n &__outer-wrapper {\n overflow: hidden;\n }\n &__inner-wrapper {\n padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n border-radius: var(--mer-border__radius--sm);\n border-inline-start: var(--mer-border__width--md) solid transparent;\n background-color: var(--mer-color__neutral-gray--1200);\n margin-block-start: var(--mer-spacing--xs);\n }\n &__role {\n display: inline-block;\n font-weight: var(--mer-font__weight--semi-bold);\n margin-block-end: var(--mer-spacing--xs);\n display: inline-grid;\n grid-template-columns: max-content max-content;\n gap: 6px;\n &:before {\n content: \"\";\n display: grid;\n place-self: center flex-end;\n inline-size: 4px;\n block-size: 4px;\n border-radius: 50%;\n background-color: currentcolor;\n }\n\n &--user {\n color: var(--mer-color__primary--300);\n }\n &--assistant {\n }\n &--hidden {\n display: none;\n }\n }\n &__caption {\n font-size: var(--mer-font__size--xs);\n line-height: var(--mer-line-height--regular);\n position: relative;\n }\n &--visible {\n grid-template-rows: 1fr;\n }\n &--copying {\n pointer-events: none;\n span:not(.copied),\n .message__caption {\n color: transparent;\n -webkit-user-select: none; /* Safari */\n -ms-user-select: none; /* IE 10 and IE 11 */\n user-select: none; /* Standard syntax */\n }\n }\n /*--- Types of messages ---*/\n &--user {\n .message__inner-wrapper {\n background-color: rgba(91, 167, 255, 0.08);\n border-color: var(--mer-border-color__primary);\n }\n }\n &--assistant-action {\n .message__inner-wrapper {\n background-color: rgba(63, 168, 155, 0.05);\n border-color: var(--mer-border-color__success);\n }\n }\n &--assistant-chat {\n .message__inner-wrapper {\n background-color: var(--mer-surface__elevation--01);\n }\n }\n &--assistant-in-progress {\n color: var(--mer-color__neutral-gray--500);\n .message__inner-wrapper {\n font-style: italic;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: var(--mer-spacing--xs);\n\n .message__caption {\n @include ellipsis;\n flex: 1;\n }\n .animation-wrapper {\n flex: none;\n }\n }\n }\n &--assistant-error {\n .message__inner-wrapper {\n background-color: rgba(251, 124, 132, 0.05);\n border-color: var(--mer-border-color__error);\n }\n }\n &--copyable {\n }\n &:last-child {\n margin-block-end: 0;\n }\n}\n:host(:first-child) {\n .message {\n &__inner-wrapper {\n margin-block-end: 0;\n }\n }\n}\n\n/*--- Dot Pulse Sweet Animation ---*/\n.animation-wrapper {\n width: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n$color: var(--mer-color__neutral-gray--400);\n.dot-pulse {\n position: relative;\n left: -9999px;\n width: 5px;\n height: 5px;\n border-radius: 2.5px;\n background-color: $color;\n color: $color;\n box-shadow: 9999px 0 0 -5px;\n animation: dot-pulse 1.5s infinite linear;\n animation-delay: 0.25s;\n &::before,\n &::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0;\n width: 5px;\n height: 5px;\n border-radius: 2.5px;\n background-color: $color;\n color: $color;\n }\n &::before {\n box-shadow: 9984px 0 0 -5px;\n animation: dot-pulse-before 1.5s infinite linear;\n animation-delay: 0s;\n }\n &::after {\n box-shadow: 10014px 0 0 -5px;\n animation: dot-pulse-after 1.5s infinite linear;\n animation-delay: 0.5s;\n }\n}\n@keyframes dot-pulse-before {\n 0% {\n box-shadow: 9984px 0 0 -5px;\n }\n 30% {\n box-shadow: 9984px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 9984px 0 0 -5px;\n }\n}\n@keyframes dot-pulse {\n 0% {\n box-shadow: 9999px 0 0 -5px;\n }\n 30% {\n box-shadow: 9999px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 9999px 0 0 -5px;\n }\n}\n@keyframes dot-pulse-after {\n 0% {\n box-shadow: 10014px 0 0 -5px;\n }\n 30% {\n box-shadow: 10014px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 10014px 0 0 -5px;\n }\n}\n\n/*--- Copy Message ---*/\n.copied {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mer-color__neutral-gray--300);\n display: flex;\n gap: var(--mer-spacing--2xs);\n}\n\n@include hiChar;\n","/* STENCIL IMPORTS */\nimport { Component, h, Prop, Element, State } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\n@Component({\n tag: \"gx-ide-ai-message\",\n styleUrl: \"ai-message.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n // 1.OWN PROPERTIES //\n\n /* The message allows to be copied*/\n private _componentLocale: any;\n private copyable = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeAiMessageElement;\n\n // 3.STATE() VARIABLES //\n\n /**\n * This wil display the message if true\n */\n @State() visible = false;\n\n /**\n * This wil show the user a text, indicating that the message has been copied\n */\n @State() showCopiedMessage = false;\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n /**\n * The actual message\n */\n @Prop() readonly message: string;\n\n /**\n * The message type\n */\n @Prop() readonly messageType: MessageType;\n\n /**\n * The filter value\n */\n @Prop() readonly filterValue: string;\n\n /**\n * It hides the message (used for the filter)\n */\n @Prop() readonly hidden: boolean;\n\n /**\n * An object with the needed string translations.\n */\n @Prop() readonly translations: Translations;\n\n // 5.EVENTS (EMIT) //\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateMessageIsCopyable();\n }\n\n componentDidRender() {\n setTimeout(() => {\n /* Without the timeout it appears instantly (no apparent transition)*/\n this.visible = true;\n const messagesList = this.el.parentElement;\n messagesList.scrollTo(0, 0);\n }, 0);\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateMessageIsCopyable = () => {\n this.copyable =\n this.messageType !== \"assistant-in-progress\" &&\n this.messageType !== \"assistant-action\";\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <li\n class={{\n \"message\": true,\n \"message--visible\": this.visible && !this.hidden,\n [`message--${[this.messageType]}`]: true,\n \"message--assistant\": this.messageType !== \"user\",\n \"message--copyable\": this.copyable,\n \"message--copying\": this.showCopiedMessage\n }}\n >\n <div class=\"message__outer-wrapper\">\n <div\n class={{\n \"message__inner-wrapper\": true\n }}\n >\n {this.messageType === \"user\" ? (\n <span class=\"message__role message__role--user\">\n {this._componentLocale.you}\n </span>\n ) : (\n <span\n class={{\n \"message__role\": this.messageType !== \"assistant-in-progress\",\n \"message__role--hidden\":\n this.messageType === \"assistant-in-progress\",\n \"message__role--assistant\": true\n }}\n >\n {this._componentLocale.assistant}\n </span>\n )}\n <div\n class={{\n \"message__caption\": true,\n \"message__caption--in-progress\":\n this.messageType === \"assistant-in-progress\"\n }}\n >\n {hiChar(this.message, this.filterValue)}\n </div>\n {this.messageType === \"assistant-in-progress\" ? (\n <div class=\"animation-wrapper\">\n <div class=\"dot-pulse\"></div>\n </div>\n ) : null}\n </div>\n </div>\n </li>\n );\n }\n}\n\nexport type Translations = {\n [key: string]: string;\n};\n"],"version":3}
|
|
1
|
+
{"file":"ai-message.js","mappings":"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","names":[],"sources":["src/components/ai-assistant/ai-message.scss?tag=gx-ide-ai-message","src/components/ai-assistant/ai-message.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n font-family: var(--mer-font-family--primary);\n}\n/*--- Messages ---*/\n.message {\n color: var(--mer-color__neutral-gray--100);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 100ms;\n transition: grid-template-rows 100ms, -ms-grid-rows 100ms;\n &__outer-wrapper {\n overflow: hidden;\n }\n &__inner-wrapper {\n padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n border-radius: var(--mer-border__radius--sm);\n border-inline-start: var(--mer-border__width--md) solid transparent;\n background-color: var(--mer-color__neutral-gray--1200);\n margin-block-start: var(--mer-spacing--xs);\n position: relative;\n }\n &__header {\n display: flex;\n gap: var(--mer-spacing--xs);\n justify-content: space-between;\n\n .icon-md {\n opacity: 0;\n }\n\n &--in-progress {\n display: contents;\n }\n }\n &__role {\n &:before {\n content: \"\";\n display: grid;\n place-self: center flex-end;\n inline-size: 4px;\n block-size: 4px;\n border-radius: 50%;\n background-color: currentcolor;\n }\n\n font-weight: var(--mer-font__weight--semi-bold);\n margin-block-end: var(--mer-spacing--xs);\n display: inline-grid;\n grid-template-columns: max-content 1fr;\n gap: 8px;\n\n &-description {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n padding-block-start: 2px;\n }\n &--user {\n color: var(--mer-color__primary--300);\n }\n &--assistant {\n }\n &--hidden {\n display: none;\n }\n }\n &__caption {\n font-size: var(--mer-font__size--xs);\n line-height: var(--mer-line-height--regular);\n }\n &--visible {\n grid-template-rows: 1fr;\n }\n &--copying {\n pointer-events: none;\n span:not(.copied),\n .message__caption {\n color: transparent;\n -webkit-user-select: none; /* Safari */\n -ms-user-select: none; /* IE 10 and IE 11 */\n user-select: none; /* Standard syntax */\n }\n }\n /*--- Types of messages ---*/\n &--user {\n .message__inner-wrapper {\n background-color: rgba(91, 167, 255, 0.08);\n border-color: var(--mer-border-color__primary);\n }\n }\n &--assistant-action {\n .message__inner-wrapper {\n background-color: rgba(63, 168, 155, 0.05);\n border-color: var(--mer-border-color__success);\n }\n }\n &--assistant-chat {\n .message__inner-wrapper {\n background-color: var(--mer-surface__elevation--01);\n }\n }\n &--assistant-in-progress {\n color: var(--mer-color__neutral-gray--500);\n .message__inner-wrapper {\n font-style: italic;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: var(--mer-spacing--xs);\n\n .message__caption {\n flex: 1;\n }\n .animation-wrapper {\n flex: none;\n }\n }\n }\n &--assistant-error {\n .message__inner-wrapper {\n background-color: rgba(251, 124, 132, 0.05);\n border-color: var(--mer-border-color__error);\n }\n }\n &--copyable {\n &:hover {\n filter: brightness(1.2);\n .icon-md {\n opacity: 1;\n }\n }\n }\n &:last-child {\n margin-block-end: 0;\n }\n}\n:host(:first-child) {\n .message {\n &__inner-wrapper {\n margin-block-end: 0;\n }\n }\n}\n\n/*--- Dot Pulse Sweet Animation ---*/\n.animation-wrapper {\n width: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n$color: var(--mer-color__neutral-gray--400);\n.dot-pulse {\n position: relative;\n left: -9999px;\n width: 5px;\n height: 5px;\n border-radius: 2.5px;\n background-color: $color;\n color: $color;\n box-shadow: 9999px 0 0 -5px;\n animation: dot-pulse 1.5s infinite linear;\n animation-delay: 0.25s;\n &::before,\n &::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0;\n width: 5px;\n height: 5px;\n border-radius: 2.5px;\n background-color: $color;\n color: $color;\n }\n &::before {\n box-shadow: 9984px 0 0 -5px;\n animation: dot-pulse-before 1.5s infinite linear;\n animation-delay: 0s;\n }\n &::after {\n box-shadow: 10014px 0 0 -5px;\n animation: dot-pulse-after 1.5s infinite linear;\n animation-delay: 0.5s;\n }\n}\n@keyframes dot-pulse-before {\n 0% {\n box-shadow: 9984px 0 0 -5px;\n }\n 30% {\n box-shadow: 9984px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 9984px 0 0 -5px;\n }\n}\n@keyframes dot-pulse {\n 0% {\n box-shadow: 9999px 0 0 -5px;\n }\n 30% {\n box-shadow: 9999px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 9999px 0 0 -5px;\n }\n}\n@keyframes dot-pulse-after {\n 0% {\n box-shadow: 10014px 0 0 -5px;\n }\n 30% {\n box-shadow: 10014px 0 0 2px;\n }\n 60%,\n 100% {\n box-shadow: 10014px 0 0 -5px;\n }\n}\n\n/*--- Copy Message ---*/\n.copied {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mer-color__neutral-gray--300);\n display: flex;\n gap: var(--mer-spacing--xs);\n opacity: 0;\n animation: fadeIn var(--mer-timing--regular) ease-out forwards;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@include hiChar;\n","import { Component, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\nconst COPY_ICON = getIconPath({\n category: \"bpm\",\n name: \"tasks\",\n colorType: \"neutral\"\n});\n\n@Component({\n tag: \"gx-ide-ai-message\",\n styleUrl: \"ai-message.scss\",\n shadow: false,\n assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n /* The message allows to be copied*/\n private _componentLocale: any;\n private copyable = false;\n\n @Element() el: HTMLGxIdeAiMessageElement;\n\n /**\n * This wil display the message if true\n */\n @State() visible = false;\n\n /**\n * This wil show the user a text, indicating that the message has been copied\n */\n @State() showCopiedMessage = false;\n\n /**\n * A reference to the gx-ide-ai-assistant host element\n */\n @Prop() readonly aiAssistantHostRef: HTMLGxIdeAiAssistantElement;\n\n /**\n * The actual message\n */\n @Prop() readonly message: string;\n\n /**\n * The message type\n */\n @Prop() readonly messageType: MessageType;\n\n /**\n * The filter value\n */\n @Prop() readonly filterValue: string;\n\n /**\n * It hides the message (used for the filter)\n */\n @Prop() readonly hidden: boolean;\n\n /**\n * An object with the needed string translations.\n */\n @Prop() readonly translations: Translations;\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateMessageIsCopyable();\n }\n\n componentDidRender() {\n setTimeout(() => {\n /* Without the timeout it appears instantly (no apparent transition)*/\n this.visible = true;\n const messagesList = this.el.parentElement;\n messagesList.scrollTo(0, 0);\n }, 0);\n }\n\n private copyMessage = () => {\n const messageInfo = JSON.stringify(\n {\n messageType: this.messageType,\n message: this.message\n },\n null,\n 2\n );\n\n navigator.clipboard.writeText(messageInfo);\n this.showCopiedMessage = true;\n setTimeout(() => {\n this.showCopiedMessage = false;\n }, 1500);\n };\n\n #buttonMouseDownHandler = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n private evaluateMessageIsCopyable = () => {\n this.copyable = this.messageType !== \"assistant-in-progress\";\n };\n\n private evaluateCopyIcon = () => {\n return this.copyable ? (\n <button\n class=\"button-tertiary button-icon-only\"\n aria-label=\"copy\"\n onClick={this.copyMessage}\n onMouseDown={this.#buttonMouseDownHandler}\n >\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n </button>\n ) : null;\n };\n\n render() {\n return (\n <li\n class={{\n \"message\": true,\n \"message--visible\": this.visible && !this.hidden,\n [`message--${[this.messageType]}`]: true,\n \"message--assistant\": this.messageType !== \"user\",\n \"message--copyable\": this.copyable,\n \"message--copying\": this.showCopiedMessage\n }}\n >\n <div class=\"message__outer-wrapper\">\n <div\n class={{\n \"message__inner-wrapper\": true\n }}\n >\n {this.messageType === \"user\" ? (\n <div class=\"message__header\">\n <span class=\"message__role message__role--user\">\n <span class=\"message__role-description\">\n {this._componentLocale.you}\n </span>\n </span>\n {this.evaluateCopyIcon()}\n </div>\n ) : (\n <div\n class={{\n \"message__header\": true,\n \"message__header--in-progress\":\n this.messageType === \"assistant-in-progress\"\n }}\n >\n <span\n class={{\n \"message__role\":\n this.messageType !== \"assistant-in-progress\",\n \"message__role--hidden\":\n this.messageType === \"assistant-in-progress\",\n \"message__role--assistant\": true\n }}\n >\n <span class=\"message__role-description\">\n {this._componentLocale.assistant}\n </span>\n </span>\n {this.evaluateCopyIcon()}\n </div>\n )}\n <div\n class={{\n \"message__caption\": true,\n \"message__caption--in-progress\":\n this.messageType === \"assistant-in-progress\"\n }}\n >\n {this.showCopiedMessage ? (\n <span class=\"copied\">\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n {this.translations[\"copied\"]}\n </span>\n ) : null}\n {hiChar(this.message, this.filterValue)}\n </div>\n {this.messageType === \"assistant-in-progress\" ? (\n <div class=\"animation-wrapper\">\n <div class=\"dot-pulse\"></div>\n </div>\n ) : null}\n </div>\n </div>\n </li>\n );\n }\n}\n\nexport type Translations = {\n [key: string]: string;\n};\n"],"version":3}
|
|
@@ -1,19 +1,29 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement,
|
|
1
|
+
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { L as Locale } from './locale.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './ai-message.js';
|
|
4
4
|
|
|
5
5
|
const aiAssistantCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{font-family:var(--mer-font-family--primary);display:block;height:100%;flex-basis:286px;flex-shrink:0;height:100%;overflow-y:auto}.gx-ide-main-wrapper{padding:0 10px 52px 10px;background-color:var(--mer-surface);height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:var(--mer-spacing--sm)}.header{padding-block-start:var(--mer-spacing--sm);display:flex;flex-direction:column}.header__actions-wrapper{display:flex;gap:var(--ai-assistant-header-actions-gap);margin-inline-start:auto}.header__first-row{display:flex;gap:var(--mer-spacing--xs);align-items:center;justify-content:space-between}.header__filter{margin-block-start:var(--mer-spacing--xs)}.header__second-row{transition:100ms grid-template-rows;display:grid;grid-template-rows:0fr}.header__second-row--visible{grid-template-rows:1fr}.header .filter-inner-wrapper{overflow:hidden}.messages-wrapper{position:relative;overflow:auto;display:flex;flex-direction:column;scroll-behavior:smooth;}.messages-wrapper::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.messages-wrapper::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.messages-wrapper::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.messages-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.messages-wrapper::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.messages{display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0}.prompt{position:relative;margin-top:auto}.prompt__textarea::part(textarea-wrapper){border:none}.prompt__textarea::part(textarea){border:none;background-color:var(--mer-color__neutral-gray--800)}.prompt__shortcuts{position:absolute;display:flex;align-items:center;gap:var(--mer-spacing--2xs);padding-inline-end:var(--mer-spacing--xs);right:0;top:0;height:100%}.prompt__shortcut{color:var(--mer-color__neutral-gray--400);font-size:var(--mer-font__size--2xs);padding:var(--mer-spacing--3xs) var(--mer-spacing--xs);background-color:var(--mer-color__neutral-gray--700);border-radius:var(--mer-border__radius--xs)}";
|
|
6
6
|
|
|
7
|
+
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
+
if (kind === "a" && !f)
|
|
9
|
+
throw new TypeError("Private accessor was defined without a getter");
|
|
10
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
11
|
+
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
12
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
13
|
+
};
|
|
14
|
+
var _GxIdeTemplate_mouseDownListener, _GxIdeTemplate_mouseUpListener;
|
|
15
|
+
const CSS_BUNDLES = [
|
|
16
|
+
"resets/box-sizing",
|
|
17
|
+
"components/icon",
|
|
18
|
+
"components/button"
|
|
19
|
+
];
|
|
7
20
|
const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate extends HTMLElement {
|
|
8
21
|
constructor() {
|
|
9
22
|
super();
|
|
10
23
|
this.__registerHost();
|
|
11
24
|
this.__attachShadow();
|
|
12
|
-
this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
|
|
13
|
-
this.renderedFirstTime = false;
|
|
14
25
|
this.setFocus = true;
|
|
15
26
|
this.scrollToBottomFlag = true;
|
|
16
|
-
// 9.LOCAL METHODS //
|
|
17
27
|
this.evaluateAiInProgress = () => {
|
|
18
28
|
var _a;
|
|
19
29
|
if (((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
@@ -44,7 +54,9 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate exten
|
|
|
44
54
|
};
|
|
45
55
|
this.renderMessage = (message, i) => {
|
|
46
56
|
if (message.text.length > 0) {
|
|
47
|
-
return (h("gx-ide-ai-message", {
|
|
57
|
+
return (h("gx-ide-ai-message", { style: {
|
|
58
|
+
"--primary-color": "lightblue"
|
|
59
|
+
}, message: message.text, messageType: message.type, hidden: message.hidden, filterValue: this.filterValue, key: `${i.toString()}-${message.type}`, translations: this._componentLocale.aiMessage, aiAssistantHostRef: this.el }));
|
|
48
60
|
}
|
|
49
61
|
};
|
|
50
62
|
this.textAreaInputHandler = () => {
|
|
@@ -161,6 +173,12 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate exten
|
|
|
161
173
|
this.messagesWrapperEl.clientHeight;
|
|
162
174
|
}
|
|
163
175
|
};
|
|
176
|
+
_GxIdeTemplate_mouseDownListener.set(this, () => {
|
|
177
|
+
this.el.removeAttribute("tabindex");
|
|
178
|
+
});
|
|
179
|
+
_GxIdeTemplate_mouseUpListener.set(this, () => {
|
|
180
|
+
this.el.setAttribute("tabindex", "0");
|
|
181
|
+
});
|
|
164
182
|
this.userHasTyped = false;
|
|
165
183
|
this.aIInProgress = false;
|
|
166
184
|
this.showFilter = false;
|
|
@@ -184,7 +202,6 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate exten
|
|
|
184
202
|
this.evaluateAiInProgress();
|
|
185
203
|
this.evaluateAiStatus();
|
|
186
204
|
}
|
|
187
|
-
// 6.COMPONENT LIFECYCLE METHODS //
|
|
188
205
|
async componentWillLoad() {
|
|
189
206
|
this._componentLocale = await Locale.getComponentStrings(this.el);
|
|
190
207
|
this.evaluateAiInProgress();
|
|
@@ -194,12 +211,10 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate exten
|
|
|
194
211
|
componentDidLoad() {
|
|
195
212
|
this.textareaShadowPart =
|
|
196
213
|
this.textAreaEl.shadowRoot.querySelector("textarea");
|
|
214
|
+
this.el.addEventListener("mousedown", __classPrivateFieldGet(this, _GxIdeTemplate_mouseDownListener, "f"));
|
|
215
|
+
this.el.addEventListener("mouseup", __classPrivateFieldGet(this, _GxIdeTemplate_mouseUpListener, "f"));
|
|
197
216
|
}
|
|
198
217
|
componentDidRender() {
|
|
199
|
-
if (!this.renderedFirstTime) {
|
|
200
|
-
this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
|
|
201
|
-
this.renderedFirstTime = true;
|
|
202
|
-
}
|
|
203
218
|
if (this.setFocus) {
|
|
204
219
|
setTimeout(() => {
|
|
205
220
|
/* Doesn't seems to work without the setTimeout */
|
|
@@ -211,14 +226,12 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate exten
|
|
|
211
226
|
this.scrollToBottom();
|
|
212
227
|
}, 200);
|
|
213
228
|
}
|
|
214
|
-
// 7.LISTENERS //
|
|
215
229
|
handleFocus(event) {
|
|
216
230
|
if (this.textAreaEl) {
|
|
217
231
|
event.preventDefault();
|
|
218
232
|
this.textAreaEl.focus();
|
|
219
233
|
}
|
|
220
234
|
}
|
|
221
|
-
// 8.PUBLIC METHODS API //
|
|
222
235
|
/**
|
|
223
236
|
* Clear the list of messages
|
|
224
237
|
*/
|
|
@@ -241,13 +254,12 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate exten
|
|
|
241
254
|
this.messages = messages;
|
|
242
255
|
}
|
|
243
256
|
}
|
|
244
|
-
// 10.RENDER() FUNCTION //
|
|
245
257
|
render() {
|
|
246
258
|
var _a, _b;
|
|
247
259
|
return (h(Host, { class: {
|
|
248
260
|
[`assistant--${this.assistantStatus}`]: true,
|
|
249
261
|
"assistant--in-progress": this.aIInProgress
|
|
250
|
-
} }, h("div", { class: "gx-ide-main-wrapper" }, h("header", { class: "header" }, h("div", { class: "header__first-row" }, h("gxg-title", { type: "title-02" }, this._componentLocale.componentName), h("div", { class: "header__actions-wrapper" }, this.filter ? (h("gxg-button", { class: "header__filter-button", type: "tertiary", icon: "menus/find", onClick: this.toggleFilterHandler, disabled: this.messages.length === 0 })) : null, h("gxg-button", { class: "header__clear-button", type: "tertiary", icon: "bpm/delete", onClick: this.clearMessages, disabled: this.messages.length === 0 }))), this.filter ? (h("div", { class: {
|
|
262
|
+
}, tabindex: "0" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("slot", null), h("header", { class: "header" }, h("div", { class: "header__first-row" }, h("gxg-title", { type: "title-02" }, this._componentLocale.componentName), h("div", { class: "header__actions-wrapper" }, this.filter ? (h("gxg-button", { class: "header__filter-button", type: "tertiary", icon: "menus/find", onClick: this.toggleFilterHandler, disabled: this.messages.length === 0 })) : null, h("gxg-button", { class: "header__clear-button", type: "tertiary", icon: "bpm/delete", onClick: this.clearMessages, disabled: this.messages.length === 0 }))), this.filter ? (h("div", { class: {
|
|
251
263
|
"header__second-row": true,
|
|
252
264
|
"header__second-row--visible": this.showFilter
|
|
253
265
|
} }, h("div", { class: "filter-inner-wrapper" }, h("gxg-form-text", { class: "header__filter", onInput: this.filterMessagesHandler, ref: el => (this.filterEl = el) })))) : null), h("div", { class: {
|
|
@@ -269,7 +281,6 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate exten
|
|
|
269
281
|
return i <= 2 ? (h("span", { class: "prompt__shortcut" }, shortcut)) : null;
|
|
270
282
|
}))) : null))));
|
|
271
283
|
}
|
|
272
|
-
static get delegatesFocus() { return true; }
|
|
273
284
|
static get assetsDirs() { return ["gx-ide-assets/ai-assistant"]; }
|
|
274
285
|
get el() { return this; }
|
|
275
286
|
static get watchers() { return {
|
|
@@ -277,7 +288,7 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate exten
|
|
|
277
288
|
"messages": ["watchMessagesHandler"]
|
|
278
289
|
}; }
|
|
279
290
|
static get style() { return aiAssistantCss; }
|
|
280
|
-
}, [
|
|
291
|
+
}, [1, "gx-ide-ai-assistant", {
|
|
281
292
|
"messages": [1040],
|
|
282
293
|
"promptMaxHeight": [1, "prompt-max-height"],
|
|
283
294
|
"assistantStatus": [1025, "assistant-status"],
|
|
@@ -297,6 +308,7 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class GxIdeTemplate exten
|
|
|
297
308
|
"aIInProgress": ["watchAIInProgressHandler"],
|
|
298
309
|
"messages": ["watchMessagesHandler"]
|
|
299
310
|
}]);
|
|
311
|
+
_GxIdeTemplate_mouseDownListener = new WeakMap(), _GxIdeTemplate_mouseUpListener = new WeakMap();
|
|
300
312
|
function defineCustomElement$1() {
|
|
301
313
|
if (typeof customElements === "undefined") {
|
|
302
314
|
return;
|