@genexus/genexus-ide-ui 1.0.37 → 1.0.38

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.
Files changed (31) hide show
  1. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  2. package/dist/cjs/gx-ide-ai-assistant.cjs.entry.js +3 -1
  3. package/dist/cjs/gx-ide-ai-assistant.cjs.entry.js.map +1 -1
  4. package/dist/cjs/gx-ide-ai-message.cjs.entry.js +26 -8
  5. package/dist/cjs/gx-ide-ai-message.cjs.entry.js.map +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/collection/components/ai-assistant/ai-assistant.js +2 -1
  8. package/dist/collection/components/ai-assistant/ai-assistant.js.map +1 -1
  9. package/dist/collection/components/ai-assistant/ai-message.css +32 -2
  10. package/dist/collection/components/ai-assistant/ai-message.js +25 -8
  11. package/dist/collection/components/ai-assistant/ai-message.js.map +1 -1
  12. package/dist/components/ai-message.js +27 -10
  13. package/dist/components/ai-message.js.map +1 -1
  14. package/dist/components/gx-ide-ai-assistant.js +3 -1
  15. package/dist/components/gx-ide-ai-assistant.js.map +1 -1
  16. package/dist/esm/genexus-ide-ui.js +1 -1
  17. package/dist/esm/gx-ide-ai-assistant.entry.js +3 -1
  18. package/dist/esm/gx-ide-ai-assistant.entry.js.map +1 -1
  19. package/dist/esm/gx-ide-ai-message.entry.js +26 -8
  20. package/dist/esm/gx-ide-ai-message.entry.js.map +1 -1
  21. package/dist/esm/loader.js +1 -1
  22. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  23. package/dist/genexus-ide-ui/p-798eb91a.entry.js +121 -0
  24. package/dist/genexus-ide-ui/p-798eb91a.entry.js.map +1 -0
  25. package/dist/genexus-ide-ui/{p-040bd0c5.entry.js → p-a7dcfedd.entry.js} +9 -5
  26. package/dist/genexus-ide-ui/p-a7dcfedd.entry.js.map +1 -0
  27. package/dist/types/components/ai-assistant/ai-message.d.ts +2 -0
  28. package/package.json +1 -1
  29. package/dist/genexus-ide-ui/p-040bd0c5.entry.js.map +0 -1
  30. package/dist/genexus-ide-ui/p-7cdfbdba.entry.js +0 -88
  31. package/dist/genexus-ide-ui/p-7cdfbdba.entry.js.map +0 -1
@@ -0,0 +1,121 @@
1
+ import { r as e, h as s, g as r } from "./p-49712340.js";
2
+
3
+ import { g as a } from "./p-b81d21d5.js";
4
+
5
+ import { L as i } from "./p-311eedf3.js";
6
+
7
+ import { h as o } from "./p-960c4988.js";
8
+
9
+ const t = ':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;pointer-events:none}.message__header .icon-md{opacity:0}.message__role{display:inline-block;font-weight:var(--mer-font__weight--semi-bold);margin-block-end:var(--mer-spacing--xs);display:inline-grid;grid-template-columns:max-content max-content;gap:6px}.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--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{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;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{cursor:pointer}.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--fast) ease-out forwards}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}';
10
+
11
+ const n = a({
12
+ category: "bpm",
13
+ name: "tasks",
14
+ colorType: "neutral"
15
+ });
16
+
17
+ const l = class {
18
+ constructor(r) {
19
+ e(this, r);
20
+ this.copyable = false;
21
+ // 7.LISTENERS //
22
+ // 8.PUBLIC METHODS API //
23
+ // 9.LOCAL METHODS //
24
+ this.copyMessage = () => {
25
+ const e = JSON.stringify({
26
+ messageType: this.messageType,
27
+ message: this.message
28
+ }, null, 2);
29
+ navigator.clipboard.writeText(e);
30
+ this.showCopiedMessage = true;
31
+ setTimeout((() => {
32
+ this.showCopiedMessage = false;
33
+ }), 1500);
34
+ };
35
+ this.evaluateMessageIsCopyable = () => {
36
+ this.copyable = this.messageType !== "assistant-in-progress";
37
+ };
38
+ this.evaluateCopyIcon = () => this.copyable ? s("ch-image", {
39
+ class: "icon-md",
40
+ src: n
41
+ }) : null;
42
+ this.visible = false;
43
+ this.showCopiedMessage = false;
44
+ this.message = undefined;
45
+ this.messageType = undefined;
46
+ this.filterValue = undefined;
47
+ this.hidden = undefined;
48
+ this.translations = undefined;
49
+ }
50
+ // 5.EVENTS (EMIT) //
51
+ // 6.COMPONENT LIFECYCLE METHODS //
52
+ async componentWillLoad() {
53
+ this._componentLocale = await i.getComponentStrings(this.el);
54
+ this.evaluateMessageIsCopyable();
55
+ }
56
+ componentDidRender() {
57
+ setTimeout((() => {
58
+ /* Without the timeout it appears instantly (no apparent transition)*/
59
+ this.visible = true;
60
+ const e = this.el.parentElement;
61
+ e.scrollTo(0, 0);
62
+ }), 0);
63
+ }
64
+ // 10.RENDER() FUNCTION //
65
+ render() {
66
+ return s("li", {
67
+ class: {
68
+ message: true,
69
+ "message--visible": this.visible && !this.hidden,
70
+ [`message--${[ this.messageType ]}`]: true,
71
+ "message--assistant": this.messageType !== "user",
72
+ "message--copyable": this.copyable,
73
+ "message--copying": this.showCopiedMessage
74
+ },
75
+ onClick: this.copyable && this.copyMessage
76
+ }, s("div", {
77
+ class: "message__outer-wrapper"
78
+ }, s("div", {
79
+ class: {
80
+ "message__inner-wrapper": true
81
+ }
82
+ }, this.messageType === "user" ? s("div", {
83
+ class: "message__header"
84
+ }, s("span", {
85
+ class: "message__role message__role--user"
86
+ }, this._componentLocale.you), this.evaluateCopyIcon()) : s("div", {
87
+ class: "message__header"
88
+ }, s("span", {
89
+ class: {
90
+ message__role: this.messageType !== "assistant-in-progress",
91
+ "message__role--hidden": this.messageType === "assistant-in-progress",
92
+ "message__role--assistant": true
93
+ }
94
+ }, this._componentLocale.assistant), this.evaluateCopyIcon()), s("div", {
95
+ class: {
96
+ message__caption: true,
97
+ "message__caption--in-progress": this.messageType === "assistant-in-progress"
98
+ }
99
+ }, this.showCopiedMessage ? s("span", {
100
+ class: "copied"
101
+ }, s("ch-image", {
102
+ class: "icon-md",
103
+ src: n
104
+ }), this.translations["copied"]) : null, o(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? s("div", {
105
+ class: "animation-wrapper"
106
+ }, s("div", {
107
+ class: "dot-pulse"
108
+ })) : null)));
109
+ }
110
+ static get assetsDirs() {
111
+ return [ "gx-ide-assets/ai-message" ];
112
+ }
113
+ get el() {
114
+ return r(this);
115
+ }
116
+ };
117
+
118
+ l.style = t;
119
+
120
+ export { l as gx_ide_ai_message };
121
+ //# sourceMappingURL=p-798eb91a.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["aiMessageCss","COPY_ICON","getIconPath","category","name","colorType","GxIdeAiMessage","this","copyable","copyMessage","messageInfo","JSON","stringify","messageType","message","navigator","clipboard","writeText","showCopiedMessage","setTimeout","evaluateMessageIsCopyable","evaluateCopyIcon","h","class","src","componentWillLoad","_componentLocale","Locale","getComponentStrings","el","componentDidRender","visible","messagesList","parentElement","scrollTo","render","hidden","onClick","you","message__role","assistant","message__caption","translations","hiChar","filterValue"],"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 pointer-events: none;\n\n .icon-md {\n opacity: 0;\n }\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 }\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 cursor: pointer;\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--fast) 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","/* STENCIL IMPORTS */\nimport { Component, h, Prop, Element, State } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { getIconPath } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\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@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 /*\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 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 private evaluateMessageIsCopyable = () => {\n this.copyable = this.messageType !== \"assistant-in-progress\";\n };\n\n private evaluateCopyIcon = () => {\n return this.copyable ? (\n <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n ) : null;\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 onClick={this.copyable && this.copyMessage}\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 {this._componentLocale.you}\n </span>\n {this.evaluateCopyIcon()}\n </div>\n ) : (\n <div class=\"message__header\">\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 {this._componentLocale.assistant}\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"],"mappings":";;;;;;;;AAAA,MAAMA,IAAe;;ACSrB,MAAMC,IAAYC,EAAY;EAC5BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;MAQAC,IAAc;;;IAmBjBC,KAAAC,WAAW;;;;QAqEXD,KAAAE,cAAc;MACpB,MAAMC,IAAcC,KAAKC,UACvB;QACEC,aAAaN,KAAKM;QAClBC,SAASP,KAAKO;SAEhB,MACA;MAGFC,UAAUC,UAAUC,UAAUP;MAC9BH,KAAKW,oBAAoB;MACzBC,YAAW;QACTZ,KAAKW,oBAAoB;AAAK,UAC7B;AAAK;IAGFX,KAAAa,4BAA4B;MAClCb,KAAKC,WAAWD,KAAKM,gBAAgB;AAAuB;IAGtDN,KAAAc,mBAAmB,MAClBd,KAAKC,WACVc,EAAA;MAAUC,OAAM;MAAUC,KAAKvB;SAC7B;mBAlFa;6BAKU;;;;;;;;;EAiC7B,uBAAMwB;IACJlB,KAAKmB,yBAAyBC,EAAOC,oBAAoBrB,KAAKsB;IAC9DtB,KAAKa;;EAGP,kBAAAU;IACEX,YAAW;;MAETZ,KAAKwB,UAAU;MACf,MAAMC,IAAezB,KAAKsB,GAAGI;MAC7BD,EAAaE,SAAS,GAAG;AAAE,QAC1B;;;EAsCL,MAAAC;IACE,OACEb,EAAA;MACEC,OAAO;QACLT,SAAW;QACX,oBAAoBP,KAAKwB,YAAYxB,KAAK6B;QAC1C,CAAC,YAAY,EAAC7B,KAAKM,kBAAiB;QACpC,sBAAsBN,KAAKM,gBAAgB;QAC3C,qBAAqBN,KAAKC;QAC1B,oBAAoBD,KAAKW;;MAE3BmB,SAAS9B,KAAKC,YAAYD,KAAKE;OAE/Ba,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAO;QACL,0BAA0B;;OAG3BhB,KAAKM,gBAAgB,SACpBS,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAMC,OAAM;OACThB,KAAKmB,iBAAiBY,MAExB/B,KAAKc,sBAGRC,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAO;QACLgB,eACEhC,KAAKM,gBAAgB;QACvB,yBACEN,KAAKM,gBAAgB;QACvB,4BAA4B;;OAG7BN,KAAKmB,iBAAiBc,YAExBjC,KAAKc,qBAGVC,EAAA;MACEC,OAAO;QACLkB,kBAAoB;QACpB,iCACElC,KAAKM,gBAAgB;;OAGxBN,KAAKW,oBACJI,EAAA;MAAMC,OAAM;OACVD,EAAA;MAAUC,OAAM;MAAUC,KAAKvB;QAC9BM,KAAKmC,aAAa,aAEnB,MACHC,EAAOpC,KAAKO,SAASP,KAAKqC,eAE5BrC,KAAKM,gBAAgB,0BACpBS,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAKC,OAAM;UAEX"}
@@ -4,7 +4,9 @@ import { L as i } from "./p-311eedf3.js";
4
4
 
5
5
  const s = ":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
- const l = class {
7
+ /* OTHER LIBRARIES IMPORTS */ const l = [ "resets/box-sizing", "components/icon" ];
8
+
9
+ const n = class {
8
10
  constructor(a) {
9
11
  e(this, a);
10
12
  this.componentDidRenderFirstTime = t(this, "componentDidRenderFirstTime", 7);
@@ -228,7 +230,9 @@ const l = class {
228
230
  [`assistant--${this.assistantStatus}`]: true,
229
231
  "assistant--in-progress": this.aIInProgress
230
232
  }
231
- }, r("div", {
233
+ }, r("ch-theme", {
234
+ model: l
235
+ }), r("div", {
232
236
  class: "gx-ide-main-wrapper"
233
237
  }, r("header", {
234
238
  class: "header"
@@ -313,7 +317,7 @@ const l = class {
313
317
  }
314
318
  };
315
319
 
316
- l.style = s;
320
+ n.style = s;
317
321
 
318
- export { l as gx_ide_ai_assistant };
319
- //# sourceMappingURL=p-040bd0c5.entry.js.map
322
+ export { n as gx_ide_ai_assistant };
323
+ //# sourceMappingURL=p-a7dcfedd.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["aiAssistantCss","CSS_BUNDLES","GxIdeTemplate","this","renderedFirstTime","setFocus","scrollToBottomFlag","evaluateAiInProgress","_a","messages","length","type","aIInProgress","evaluateAiStatus","assistantStatus","renderMessage","message","i","text","h","messageType","hidden","filterValue","key","toString","translations","_componentLocale","aiMessage","textAreaInputHandler","userHasTyped","showFilter","filterEl","value","promptEnterHandler","async","prompt","promptTrimmed","detail","replace","textAreaEl","setTimeout","lastUserMessageHeight","offsetHeight","addMessage","userMessageCallback","then","filterMessagesHandler","e","toLowerCase","filteredMessages","forEach","includes","clearMessages","focus","clearCallback","attachShortcuts","focusShortcuts","ctrlFocusIndex","findIndex","toLocaleLowerCase","shiftFocusIndex","cmdKeyIndex","keyFocus","find","document","addEventListener","ctrlKey","shiftKey","metaKey","promptArrowUpHandler","lastUserMessage","textareaShadowPart","style","height","toggleFilterHandler","promptFocusHandler","promptHasFocus","promptBlurHandler","scrollToBottom","messagesWrapperEl","scrollTo","scrollHeight","scrollTop","clientHeight","watchAIInProgressHandler","aiInProgress","watchMessagesHandler","componentWillLoad","Locale","getComponentStrings","el","componentDidLoad","shadowRoot","querySelector","componentDidRender","componentDidRenderFirstTime","emit","componentName","handleFocus","event","preventDefault","clear","updateInProgressMessage","pop","push","render","Host","class","model","filter","icon","onClick","disabled","onInput","ref","scrollable","map","ai","promptValue","maxHeight","promptMaxHeight","placeholder","processingQueryPlaceholder","promptPlaceholder","onEnter","onArrowUpPressed","onBlur","onFocus","_b","prompt__shortcuts","shortcut"],"sources":["src/components/ai-assistant/ai-assistant.scss?tag=gx-ide-ai-assistant&encapsulation=shadow","src/components/ai-assistant/ai-assistant.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n:host {\n font-family: var(--mer-font-family--primary);\n display: block;\n height: 100%;\n flex-basis: 286px;\n flex-shrink: 0;\n height: 100%;\n overflow-y: auto;\n}\n.gx-ide-main-wrapper {\n padding: 0 10px 52px 10px;\n background-color: var(--mer-surface);\n height: 100%;\n display: grid;\n grid-template-rows: auto 1fr auto;\n gap: var(--mer-spacing--sm);\n}\n\n/*--- Header ---*/\n.header {\n padding-block-start: var(--mer-spacing--sm);\n display: flex;\n flex-direction: column;\n\n &__actions-wrapper {\n display: flex;\n gap: var(--ai-assistant-header-actions-gap);\n margin-inline-start: auto;\n }\n &__first-row {\n display: flex;\n gap: var(--mer-spacing--xs);\n align-items: center;\n justify-content: space-between;\n }\n &__filter {\n margin-block-start: var(--mer-spacing--xs);\n }\n &__second-row {\n transition: 100ms grid-template-rows;\n display: grid;\n grid-template-rows: 0fr;\n\n &--visible {\n grid-template-rows: 1fr;\n }\n }\n .filter-inner-wrapper {\n overflow: hidden;\n }\n}\n\n/*--- Messages ---*/\n.messages-wrapper {\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n scroll-behavior: smooth;\n @include gxg-scrollbar();\n}\n.messages {\n display: flex;\n flex-direction: column;\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n\n/*--- Prompt ---*/\n.prompt {\n position: relative;\n margin-top: auto;\n\n &__textarea {\n &::part(textarea-wrapper) {\n border: none;\n }\n &::part(textarea) {\n border: none;\n background-color: var(--mer-color__neutral-gray--800);\n }\n }\n &__shortcuts {\n position: absolute;\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--2xs);\n padding-inline-end: var(--mer-spacing--xs);\n right: 0;\n top: 0;\n height: 100%;\n }\n &__shortcut {\n color: var(--mer-color__neutral-gray--400);\n font-size: var(--mer-font__size--2xs);\n padding: var(--mer-spacing--3xs) var(--mer-spacing--xs);\n background-color: var(--mer-color__neutral-gray--700);\n border-radius: var(--mer-border__radius--xs);\n }\n}\n","/* STENCIL IMPORTS */\nimport {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n State,\n Watch,\n Listen\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nconst CSS_BUNDLES: MercuryBundles = [\"resets/box-sizing\", \"components/icon\"];\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\n@Component({\n tag: \"gx-ide-ai-assistant\",\n styleUrl: \"ai-assistant.scss\",\n shadow: { delegatesFocus: true },\n assetsDirs: [\"gx-ide-assets/ai-assistant\"]\n})\nexport class GxIdeTemplate {\n // 1.OWN PROPERTIES //\n\n /**\n * The component hard-coded strings translations.\n */\n private _componentLocale: any;\n private renderedFirstTime = false;\n /* lastUserMessageHeight is used to set the appropriate height on the textarea, if user presses arrowUp (recover last message)*/\n private lastUserMessageHeight: number;\n private setFocus = true;\n private scrollToBottomFlag = true;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeAiAssistantElement;\n private textAreaEl!: HTMLGxgFormTextareaElement;\n private textareaShadowPart: HTMLTextAreaElement;\n private filterEl: HTMLGxgFormTextElement;\n private messagesWrapperEl!: HTMLDivElement;\n\n // 3.STATE() VARIABLES //\n\n /**\n * Flag used to hide the shortcuts\n */\n @State() userHasTyped = false;\n\n /**\n * This is true if the last message is of type 'assistant-in-progress'\n */\n @State() aIInProgress = false;\n @Watch(\"aIInProgress\")\n watchAIInProgressHandler(aiInProgress: boolean) {\n if (!aiInProgress) {\n this.setFocus = true;\n }\n }\n\n /**\n * This displays or hides the messages filter\n */\n @State() showFilter = false;\n\n /**\n * True if the prompt textbox has focus\n */\n @State() promptHasFocus = false;\n\n /**\n * The filter value\n */\n @State() filterValue: string;\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n /**\n * List of messages displayed by the component\n */\n @Prop({ mutable: true }) messages: Message[] = [];\n @Watch(\"messages\")\n watchMessagesHandler() {\n this.evaluateAiInProgress();\n this.evaluateAiStatus();\n }\n\n /**\n * The prompt textarea max-height\n */\n @Prop() readonly promptMaxHeight = \"128px\";\n\n /**\n * A temporary property to illustrate the assistant status\n */\n @Prop({ mutable: true }) assistantStatus: AiStatus = \"indeterminate\";\n\n /**\n * List of keys that make up the shortcut to focus on the component's text input\n */\n @Prop() readonly focusShortcuts: string[];\n\n /**\n * List of keys that make up the shortcut to focus on the component's text input\n */\n @Prop() readonly userMessageCallback: UserMessageCallback;\n\n /**\n * Callback that must be invoked when the conversation is cleared, using the header button.\n */\n @Prop() readonly clearCallback: () => Promise<void>;\n\n /**\n * the prompt value\n */\n @Prop() readonly promptValue: string;\n\n /**\n * If tue, it will display a filter.\n */\n @Prop() readonly filter = true;\n\n // 5.EVENTS (EMIT) //\n\n /**\n * This event is emitted once just after the component is fully loaded and the first render() occurs\n */\n @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateAiInProgress();\n this.evaluateAiStatus();\n this.attachShortcuts();\n }\n\n componentDidLoad() {\n this.textareaShadowPart =\n this.textAreaEl.shadowRoot.querySelector(\"textarea\");\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n if (this.setFocus) {\n setTimeout(() => {\n /* Doesn't seems to work without the setTimeout */\n this.textAreaEl.focus();\n this.setFocus = false;\n }, 50);\n }\n setTimeout(() => {\n this.scrollToBottom();\n }, 200);\n }\n\n // 7.LISTENERS //\n\n @Listen(\"focus\", { capture: true })\n handleFocus(event: FocusEvent) {\n if (this.textAreaEl) {\n event.preventDefault();\n this.textAreaEl.focus();\n }\n }\n\n // 8.PUBLIC METHODS API //\n\n /**\n * Clear the list of messages\n */\n @Method()\n async clear() {\n this.messages = [];\n }\n\n /**\n * Add a message. This method will be used by the host to add messages from the assistant\n */\n @Method()\n async addMessage(message: Message) {\n if (message.text?.length > 0) {\n const messages = [...this.messages];\n const updateInProgressMessage =\n messages?.length > 0 &&\n messages[messages.length - 1].type === \"assistant-in-progress\";\n if (updateInProgressMessage) {\n messages.pop();\n }\n messages.push(message);\n this.messages = messages;\n }\n }\n\n // 9.LOCAL METHODS //\n\n private evaluateAiInProgress = () => {\n if (\n this.messages?.length > 0 &&\n this.messages[this.messages.length - 1].type === \"assistant-in-progress\"\n ) {\n this.aIInProgress = true;\n } else {\n this.aIInProgress = false;\n }\n };\n\n private evaluateAiStatus = () => {\n if (this.messages?.length === 0) {\n this.assistantStatus = \"indeterminate\";\n return;\n }\n if (\n this.messages[this.messages.length - 1].type ===\n \"assistant-in-progress\" ||\n this.messages[this.messages.length - 1].type === \"user\"\n ) {\n this.assistantStatus = \"indeterminate\";\n } else if (\n this.messages[this.messages.length - 1].type === \"assistant-error\"\n ) {\n this.assistantStatus = \"error\";\n } else {\n this.assistantStatus = \"success\";\n }\n };\n\n private renderMessage = (\n message: Message,\n i: number\n ): HTMLLIElement | void => {\n if (message.text.length > 0) {\n return (\n <gx-ide-ai-message\n message={message.text}\n messageType={message.type}\n hidden={message.hidden}\n filterValue={this.filterValue}\n key={`${i.toString()}-${message.type}`}\n translations={this._componentLocale.aiMessage}\n ></gx-ide-ai-message>\n );\n }\n };\n\n private textAreaInputHandler = () => {\n this.userHasTyped = true;\n this.showFilter = false;\n this.filterEl.value = \"\";\n this.filterValue = \"\";\n this.scrollToBottomFlag = true;\n };\n\n private promptEnterHandler = async (prompt: CustomEvent<string>) => {\n /* First remove double spaces */\n const promptTrimmed = prompt.detail.replace(/\\s+/g, \" \");\n /* Update textarea value to get the proper height */\n this.textAreaEl.value = promptTrimmed;\n setTimeout(() => {\n /* Then save the actual height (setTimeOut required) */\n this.lastUserMessageHeight = this.textAreaEl.offsetHeight;\n }, 0);\n /* The clear the textarea */\n this.textAreaEl.value = \"\";\n /* Insert the user message */\n this.addMessage({\n type: \"user\",\n text: promptTrimmed\n });\n /* Call the callback */\n if (this.userMessageCallback && !this.aIInProgress) {\n this.aIInProgress = true;\n this.userMessageCallback(promptTrimmed).then(() => {\n this.aIInProgress = false;\n });\n }\n };\n\n private filterMessagesHandler = (e: CustomEvent<string>) => {\n this.scrollToBottomFlag = false;\n this.filterValue = e.detail.toLowerCase();\n const filteredMessages = [...this.messages];\n filteredMessages.forEach(message => {\n if (message.text.toLowerCase().includes(this.filterValue)) {\n message.hidden = false;\n } else {\n message.hidden = true;\n }\n });\n this.messages = filteredMessages;\n };\n\n private clearMessages = () => {\n this.messages = [];\n this.textAreaEl.focus();\n if (this.clearCallback) {\n this.clearCallback();\n }\n };\n\n private attachShortcuts = () => {\n if (this.focusShortcuts?.length > 0) {\n const ctrlFocusIndex = this.focusShortcuts.findIndex(\n key => key.toLocaleLowerCase() === \"ctrl\"\n );\n const shiftFocusIndex = this.focusShortcuts.findIndex(\n key => key.toLocaleLowerCase() === \"shift\"\n );\n const cmdKeyIndex = this.focusShortcuts.findIndex(\n key => key.toLocaleLowerCase() === \"cmd\"\n );\n const keyFocus = this.focusShortcuts\n .find(key => {\n return (\n key.toLocaleLowerCase() !== \"ctrl\" &&\n key.toLocaleLowerCase() !== \"shift\" &&\n key.toLocaleLowerCase() !== \"cmd\"\n );\n })\n .toLowerCase();\n document.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === keyFocus && ctrlFocusIndex !== -1 && e.ctrlKey) {\n this.textAreaEl.focus();\n this.userHasTyped = true;\n } else if (e.key === keyFocus && shiftFocusIndex !== -1 && e.shiftKey) {\n this.textAreaEl.focus();\n this.userHasTyped = true;\n } else if (e.key === keyFocus && cmdKeyIndex !== -1 && e.metaKey) {\n this.textAreaEl.focus();\n this.userHasTyped = true;\n }\n });\n }\n };\n\n private promptArrowUpHandler = () => {\n this.userHasTyped = true;\n const lastUserMessage = this.messages?.find(message => {\n return message.type === \"user\";\n });\n if (lastUserMessage) {\n if (this.lastUserMessageHeight) {\n this.textareaShadowPart.style.height = `${this.lastUserMessageHeight}px`;\n }\n this.textAreaEl.value = lastUserMessage.text;\n }\n };\n\n private toggleFilterHandler = () => {\n this.showFilter = !this.showFilter;\n if (this.showFilter) {\n this.filterEl.focus();\n }\n };\n\n private promptFocusHandler = () => {\n this.promptHasFocus = true;\n };\n\n private promptBlurHandler = () => {\n this.promptHasFocus = false;\n };\n\n private scrollToBottom = () => {\n if (this.scrollToBottomFlag) {\n this.messagesWrapperEl.scrollTo(0, this.messagesWrapperEl.scrollHeight);\n this.messagesWrapperEl.scrollTop =\n this.messagesWrapperEl.scrollHeight -\n this.messagesWrapperEl.clientHeight;\n }\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host\n class={{\n [`assistant--${this.assistantStatus}`]: true,\n \"assistant--in-progress\": this.aIInProgress\n }}\n >\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <div class=\"gx-ide-main-wrapper\">\n <header class=\"header\">\n <div class=\"header__first-row\">\n <gxg-title type=\"title-02\">\n {this._componentLocale.componentName}\n </gxg-title>\n <div class=\"header__actions-wrapper\">\n {this.filter ? (\n <gxg-button\n class=\"header__filter-button\"\n type=\"tertiary\"\n icon=\"menus/find\"\n onClick={this.toggleFilterHandler}\n disabled={this.messages.length === 0}\n ></gxg-button>\n ) : null}\n\n <gxg-button\n class=\"header__clear-button\"\n type=\"tertiary\"\n icon=\"bpm/delete\"\n onClick={this.clearMessages}\n disabled={this.messages.length === 0}\n ></gxg-button>\n </div>\n </div>\n {this.filter ? (\n <div\n class={{\n \"header__second-row\": true,\n \"header__second-row--visible\": this.showFilter\n }}\n >\n <div class=\"filter-inner-wrapper\">\n <gxg-form-text\n class=\"header__filter\"\n onInput={this.filterMessagesHandler as any}\n ref={el => (this.filterEl = el as HTMLGxgFormTextElement)}\n ></gxg-form-text>\n </div>\n </div>\n ) : null}\n </header>\n\n <div\n class={{\n \"messages-wrapper\": true,\n \"scrollable\": true\n }}\n ref={el => (this.messagesWrapperEl = el as HTMLDivElement)}\n >\n {this.messages?.length ? (\n <ol class={{ messages: true }}>\n {this.messages.map((message, i) => {\n return this.renderMessage(message, i);\n })}\n </ol>\n ) : null}\n </div>\n\n <div\n class={{\n prompt: true\n }}\n >\n <gxg-form-textarea\n ai\n class=\"prompt__textarea\"\n value={this.promptValue}\n maxHeight={this.promptMaxHeight}\n placeholder={\n this.aIInProgress\n ? this._componentLocale.processingQueryPlaceholder\n : this._componentLocale.promptPlaceholder\n }\n onInput={this.textAreaInputHandler}\n onEnter={this.promptEnterHandler}\n onArrowUpPressed={this.promptArrowUpHandler}\n onBlur={this.promptBlurHandler}\n onFocus={this.promptFocusHandler}\n disabled={this.aIInProgress}\n ref={el => (this.textAreaEl = el as HTMLGxgFormTextareaElement)}\n ></gxg-form-textarea>\n {!this.userHasTyped &&\n !this.aIInProgress &&\n !this.promptHasFocus &&\n this.focusShortcuts?.length > 0 ? (\n <div\n class={{\n prompt__shortcuts: true\n }}\n >\n {this.focusShortcuts.map((shortcut, i) => {\n /* Up to three keys allowed*/\n return i <= 2 ? (\n <span class=\"prompt__shortcut\">{shortcut}</span>\n ) : null;\n })}\n </div>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n\nexport type AiStatus = \"indeterminate\" | \"success\" | \"error\";\n\nexport type Message = {\n type: MessageType;\n text: string;\n hidden?: boolean;\n filterValue?: string;\n};\n\nexport type MessageType =\n | \"user\"\n | \"assistant-chat\"\n | \"assistant-action\"\n | \"assistant-in-progress\"\n | \"assistant-error\";\n\nexport type UserMessageCallback = (text: string) => Promise<void>;\n"],"mappings":"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"}
@@ -33,7 +33,9 @@ export declare class GxIdeAiMessage {
33
33
  readonly translations: Translations;
34
34
  componentWillLoad(): Promise<void>;
35
35
  componentDidRender(): void;
36
+ private copyMessage;
36
37
  private evaluateMessageIsCopyable;
38
+ private evaluateCopyIcon;
37
39
  render(): any;
38
40
  }
39
41
  export type Translations = {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genexus/genexus-ide-ui",
3
3
  "license": "Apache-2.0",
4
- "version": "1.0.37",
4
+ "version": "1.0.38",
5
5
  "description": "GeneXus IDE UI components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",
@@ -1 +0,0 @@
1
- {"version":3,"names":["aiAssistantCss","GxIdeTemplate","this","renderedFirstTime","setFocus","scrollToBottomFlag","evaluateAiInProgress","_a","messages","length","type","aIInProgress","evaluateAiStatus","assistantStatus","renderMessage","message","i","text","h","messageType","hidden","filterValue","key","toString","translations","_componentLocale","aiMessage","textAreaInputHandler","userHasTyped","showFilter","filterEl","value","promptEnterHandler","async","prompt","promptTrimmed","detail","replace","textAreaEl","setTimeout","lastUserMessageHeight","offsetHeight","addMessage","userMessageCallback","then","filterMessagesHandler","e","toLowerCase","filteredMessages","forEach","includes","clearMessages","focus","clearCallback","attachShortcuts","focusShortcuts","ctrlFocusIndex","findIndex","toLocaleLowerCase","shiftFocusIndex","cmdKeyIndex","keyFocus","find","document","addEventListener","ctrlKey","shiftKey","metaKey","promptArrowUpHandler","lastUserMessage","textareaShadowPart","style","height","toggleFilterHandler","promptFocusHandler","promptHasFocus","promptBlurHandler","scrollToBottom","messagesWrapperEl","scrollTo","scrollHeight","scrollTop","clientHeight","watchAIInProgressHandler","aiInProgress","watchMessagesHandler","componentWillLoad","Locale","getComponentStrings","el","componentDidLoad","shadowRoot","querySelector","componentDidRender","componentDidRenderFirstTime","emit","componentName","handleFocus","event","preventDefault","clear","updateInProgressMessage","pop","push","render","Host","class","filter","icon","onClick","disabled","onInput","ref","scrollable","map","ai","promptValue","maxHeight","promptMaxHeight","placeholder","processingQueryPlaceholder","promptPlaceholder","onEnter","onArrowUpPressed","onBlur","onFocus","_b","prompt__shortcuts","shortcut"],"sources":["src/components/ai-assistant/ai-assistant.scss?tag=gx-ide-ai-assistant&encapsulation=shadow","src/components/ai-assistant/ai-assistant.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n:host {\n font-family: var(--mer-font-family--primary);\n display: block;\n height: 100%;\n flex-basis: 286px;\n flex-shrink: 0;\n height: 100%;\n overflow-y: auto;\n}\n.gx-ide-main-wrapper {\n padding: 0 10px 52px 10px;\n background-color: var(--mer-surface);\n height: 100%;\n display: grid;\n grid-template-rows: auto 1fr auto;\n gap: var(--mer-spacing--sm);\n}\n\n/*--- Header ---*/\n.header {\n padding-block-start: var(--mer-spacing--sm);\n display: flex;\n flex-direction: column;\n\n &__actions-wrapper {\n display: flex;\n gap: var(--ai-assistant-header-actions-gap);\n margin-inline-start: auto;\n }\n &__first-row {\n display: flex;\n gap: var(--mer-spacing--xs);\n align-items: center;\n justify-content: space-between;\n }\n &__filter {\n margin-block-start: var(--mer-spacing--xs);\n }\n &__second-row {\n transition: 100ms grid-template-rows;\n display: grid;\n grid-template-rows: 0fr;\n\n &--visible {\n grid-template-rows: 1fr;\n }\n }\n .filter-inner-wrapper {\n overflow: hidden;\n }\n}\n\n/*--- Messages ---*/\n.messages-wrapper {\n position: relative;\n overflow: auto;\n display: flex;\n flex-direction: column;\n scroll-behavior: smooth;\n @include gxg-scrollbar();\n}\n.messages {\n display: flex;\n flex-direction: column;\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n\n/*--- Prompt ---*/\n.prompt {\n position: relative;\n margin-top: auto;\n\n &__textarea {\n &::part(textarea-wrapper) {\n border: none;\n }\n &::part(textarea) {\n border: none;\n background-color: var(--mer-color__neutral-gray--800);\n }\n }\n &__shortcuts {\n position: absolute;\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--2xs);\n padding-inline-end: var(--mer-spacing--xs);\n right: 0;\n top: 0;\n height: 100%;\n }\n &__shortcut {\n color: var(--mer-color__neutral-gray--400);\n font-size: var(--mer-font__size--2xs);\n padding: var(--mer-spacing--3xs) var(--mer-spacing--xs);\n background-color: var(--mer-color__neutral-gray--700);\n border-radius: var(--mer-border__radius--xs);\n }\n}\n","/* STENCIL IMPORTS */\nimport {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Method,\n State,\n Watch,\n Listen\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\n\n@Component({\n tag: \"gx-ide-ai-assistant\",\n styleUrl: \"ai-assistant.scss\",\n shadow: { delegatesFocus: true },\n assetsDirs: [\"gx-ide-assets/ai-assistant\"]\n})\nexport class GxIdeTemplate {\n // 1.OWN PROPERTIES //\n\n /**\n * The component hard-coded strings translations.\n */\n private _componentLocale: any;\n private renderedFirstTime = false;\n /* lastUserMessageHeight is used to set the appropriate height on the textarea, if user presses arrowUp (recover last message)*/\n private lastUserMessageHeight: number;\n private setFocus = true;\n private scrollToBottomFlag = true;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeAiAssistantElement;\n private textAreaEl!: HTMLGxgFormTextareaElement;\n private textareaShadowPart: HTMLTextAreaElement;\n private filterEl: HTMLGxgFormTextElement;\n private messagesWrapperEl!: HTMLDivElement;\n\n // 3.STATE() VARIABLES //\n\n /**\n * Flag used to hide the shortcuts\n */\n @State() userHasTyped = false;\n\n /**\n * This is true if the last message is of type 'assistant-in-progress'\n */\n @State() aIInProgress = false;\n @Watch(\"aIInProgress\")\n watchAIInProgressHandler(aiInProgress: boolean) {\n if (!aiInProgress) {\n this.setFocus = true;\n }\n }\n\n /**\n * This displays or hides the messages filter\n */\n @State() showFilter = false;\n\n /**\n * True if the prompt textbox has focus\n */\n @State() promptHasFocus = false;\n\n /**\n * The filter value\n */\n @State() filterValue: string;\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n /**\n * List of messages displayed by the component\n */\n @Prop({ mutable: true }) messages: Message[] = [];\n @Watch(\"messages\")\n watchMessagesHandler() {\n this.evaluateAiInProgress();\n this.evaluateAiStatus();\n }\n\n /**\n * The prompt textarea max-height\n */\n @Prop() readonly promptMaxHeight = \"128px\";\n\n /**\n * A temporary property to illustrate the assistant status\n */\n @Prop({ mutable: true }) assistantStatus: AiStatus = \"indeterminate\";\n\n /**\n * List of keys that make up the shortcut to focus on the component's text input\n */\n @Prop() readonly focusShortcuts: string[];\n\n /**\n * List of keys that make up the shortcut to focus on the component's text input\n */\n @Prop() readonly userMessageCallback: UserMessageCallback;\n\n /**\n * Callback that must be invoked when the conversation is cleared, using the header button.\n */\n @Prop() readonly clearCallback: () => Promise<void>;\n\n /**\n * the prompt value\n */\n @Prop() readonly promptValue: string;\n\n /**\n * If tue, it will display a filter.\n */\n @Prop() readonly filter = true;\n\n // 5.EVENTS (EMIT) //\n\n /**\n * This event is emitted once just after the component is fully loaded and the first render() occurs\n */\n @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.evaluateAiInProgress();\n this.evaluateAiStatus();\n this.attachShortcuts();\n }\n\n componentDidLoad() {\n this.textareaShadowPart =\n this.textAreaEl.shadowRoot.querySelector(\"textarea\");\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n if (this.setFocus) {\n setTimeout(() => {\n /* Doesn't seems to work without the setTimeout */\n this.textAreaEl.focus();\n this.setFocus = false;\n }, 50);\n }\n setTimeout(() => {\n this.scrollToBottom();\n }, 200);\n }\n\n // 7.LISTENERS //\n\n @Listen(\"focus\", { capture: true })\n handleFocus(event: FocusEvent) {\n if (this.textAreaEl) {\n event.preventDefault();\n this.textAreaEl.focus();\n }\n }\n\n // 8.PUBLIC METHODS API //\n\n /**\n * Clear the list of messages\n */\n @Method()\n async clear() {\n this.messages = [];\n }\n\n /**\n * Add a message. This method will be used by the host to add messages from the assistant\n */\n @Method()\n async addMessage(message: Message) {\n if (message.text?.length > 0) {\n const messages = [...this.messages];\n const updateInProgressMessage =\n messages?.length > 0 &&\n messages[messages.length - 1].type === \"assistant-in-progress\";\n if (updateInProgressMessage) {\n messages.pop();\n }\n messages.push(message);\n this.messages = messages;\n }\n }\n\n // 9.LOCAL METHODS //\n\n private evaluateAiInProgress = () => {\n if (\n this.messages?.length > 0 &&\n this.messages[this.messages.length - 1].type === \"assistant-in-progress\"\n ) {\n this.aIInProgress = true;\n } else {\n this.aIInProgress = false;\n }\n };\n\n private evaluateAiStatus = () => {\n if (this.messages?.length === 0) {\n this.assistantStatus = \"indeterminate\";\n return;\n }\n if (\n this.messages[this.messages.length - 1].type ===\n \"assistant-in-progress\" ||\n this.messages[this.messages.length - 1].type === \"user\"\n ) {\n this.assistantStatus = \"indeterminate\";\n } else if (\n this.messages[this.messages.length - 1].type === \"assistant-error\"\n ) {\n this.assistantStatus = \"error\";\n } else {\n this.assistantStatus = \"success\";\n }\n };\n\n private renderMessage = (\n message: Message,\n i: number\n ): HTMLLIElement | void => {\n if (message.text.length > 0) {\n return (\n <gx-ide-ai-message\n message={message.text}\n messageType={message.type}\n hidden={message.hidden}\n filterValue={this.filterValue}\n key={`${i.toString()}-${message.type}`}\n translations={this._componentLocale.aiMessage}\n ></gx-ide-ai-message>\n );\n }\n };\n\n private textAreaInputHandler = () => {\n this.userHasTyped = true;\n this.showFilter = false;\n this.filterEl.value = \"\";\n this.filterValue = \"\";\n this.scrollToBottomFlag = true;\n };\n\n private promptEnterHandler = async (prompt: CustomEvent<string>) => {\n /* First remove double spaces */\n const promptTrimmed = prompt.detail.replace(/\\s+/g, \" \");\n /* Update textarea value to get the proper height */\n this.textAreaEl.value = promptTrimmed;\n setTimeout(() => {\n /* Then save the actual height (setTimeOut required) */\n this.lastUserMessageHeight = this.textAreaEl.offsetHeight;\n }, 0);\n /* The clear the textarea */\n this.textAreaEl.value = \"\";\n /* Insert the user message */\n this.addMessage({\n type: \"user\",\n text: promptTrimmed\n });\n /* Call the callback */\n if (this.userMessageCallback && !this.aIInProgress) {\n this.aIInProgress = true;\n this.userMessageCallback(promptTrimmed).then(() => {\n this.aIInProgress = false;\n });\n }\n };\n\n private filterMessagesHandler = (e: CustomEvent<string>) => {\n this.scrollToBottomFlag = false;\n this.filterValue = e.detail.toLowerCase();\n const filteredMessages = [...this.messages];\n filteredMessages.forEach(message => {\n if (message.text.toLowerCase().includes(this.filterValue)) {\n message.hidden = false;\n } else {\n message.hidden = true;\n }\n });\n this.messages = filteredMessages;\n };\n\n private clearMessages = () => {\n this.messages = [];\n this.textAreaEl.focus();\n if (this.clearCallback) {\n this.clearCallback();\n }\n };\n\n private attachShortcuts = () => {\n if (this.focusShortcuts?.length > 0) {\n const ctrlFocusIndex = this.focusShortcuts.findIndex(\n key => key.toLocaleLowerCase() === \"ctrl\"\n );\n const shiftFocusIndex = this.focusShortcuts.findIndex(\n key => key.toLocaleLowerCase() === \"shift\"\n );\n const cmdKeyIndex = this.focusShortcuts.findIndex(\n key => key.toLocaleLowerCase() === \"cmd\"\n );\n const keyFocus = this.focusShortcuts\n .find(key => {\n return (\n key.toLocaleLowerCase() !== \"ctrl\" &&\n key.toLocaleLowerCase() !== \"shift\" &&\n key.toLocaleLowerCase() !== \"cmd\"\n );\n })\n .toLowerCase();\n document.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (e.key === keyFocus && ctrlFocusIndex !== -1 && e.ctrlKey) {\n this.textAreaEl.focus();\n this.userHasTyped = true;\n } else if (e.key === keyFocus && shiftFocusIndex !== -1 && e.shiftKey) {\n this.textAreaEl.focus();\n this.userHasTyped = true;\n } else if (e.key === keyFocus && cmdKeyIndex !== -1 && e.metaKey) {\n this.textAreaEl.focus();\n this.userHasTyped = true;\n }\n });\n }\n };\n\n private promptArrowUpHandler = () => {\n this.userHasTyped = true;\n const lastUserMessage = this.messages?.find(message => {\n return message.type === \"user\";\n });\n if (lastUserMessage) {\n if (this.lastUserMessageHeight) {\n this.textareaShadowPart.style.height = `${this.lastUserMessageHeight}px`;\n }\n this.textAreaEl.value = lastUserMessage.text;\n }\n };\n\n private toggleFilterHandler = () => {\n this.showFilter = !this.showFilter;\n if (this.showFilter) {\n this.filterEl.focus();\n }\n };\n\n private promptFocusHandler = () => {\n this.promptHasFocus = true;\n };\n\n private promptBlurHandler = () => {\n this.promptHasFocus = false;\n };\n\n private scrollToBottom = () => {\n if (this.scrollToBottomFlag) {\n this.messagesWrapperEl.scrollTo(0, this.messagesWrapperEl.scrollHeight);\n this.messagesWrapperEl.scrollTop =\n this.messagesWrapperEl.scrollHeight -\n this.messagesWrapperEl.clientHeight;\n }\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host\n class={{\n [`assistant--${this.assistantStatus}`]: true,\n \"assistant--in-progress\": this.aIInProgress\n }}\n >\n <div class=\"gx-ide-main-wrapper\">\n <header class=\"header\">\n <div class=\"header__first-row\">\n <gxg-title type=\"title-02\">\n {this._componentLocale.componentName}\n </gxg-title>\n <div class=\"header__actions-wrapper\">\n {this.filter ? (\n <gxg-button\n class=\"header__filter-button\"\n type=\"tertiary\"\n icon=\"menus/find\"\n onClick={this.toggleFilterHandler}\n disabled={this.messages.length === 0}\n ></gxg-button>\n ) : null}\n\n <gxg-button\n class=\"header__clear-button\"\n type=\"tertiary\"\n icon=\"bpm/delete\"\n onClick={this.clearMessages}\n disabled={this.messages.length === 0}\n ></gxg-button>\n </div>\n </div>\n {this.filter ? (\n <div\n class={{\n \"header__second-row\": true,\n \"header__second-row--visible\": this.showFilter\n }}\n >\n <div class=\"filter-inner-wrapper\">\n <gxg-form-text\n class=\"header__filter\"\n onInput={this.filterMessagesHandler as any}\n ref={el => (this.filterEl = el as HTMLGxgFormTextElement)}\n ></gxg-form-text>\n </div>\n </div>\n ) : null}\n </header>\n\n <div\n class={{\n \"messages-wrapper\": true,\n \"scrollable\": true\n }}\n ref={el => (this.messagesWrapperEl = el as HTMLDivElement)}\n >\n {this.messages?.length ? (\n <ol class={{ messages: true }}>\n {this.messages.map((message, i) => {\n return this.renderMessage(message, i);\n })}\n </ol>\n ) : null}\n </div>\n\n <div\n class={{\n prompt: true\n }}\n >\n <gxg-form-textarea\n ai\n class=\"prompt__textarea\"\n value={this.promptValue}\n maxHeight={this.promptMaxHeight}\n placeholder={\n this.aIInProgress\n ? this._componentLocale.processingQueryPlaceholder\n : this._componentLocale.promptPlaceholder\n }\n onInput={this.textAreaInputHandler}\n onEnter={this.promptEnterHandler}\n onArrowUpPressed={this.promptArrowUpHandler}\n onBlur={this.promptBlurHandler}\n onFocus={this.promptFocusHandler}\n disabled={this.aIInProgress}\n ref={el => (this.textAreaEl = el as HTMLGxgFormTextareaElement)}\n ></gxg-form-textarea>\n {!this.userHasTyped &&\n !this.aIInProgress &&\n !this.promptHasFocus &&\n this.focusShortcuts?.length > 0 ? (\n <div\n class={{\n prompt__shortcuts: true\n }}\n >\n {this.focusShortcuts.map((shortcut, i) => {\n /* Up to three keys allowed*/\n return i <= 2 ? (\n <span class=\"prompt__shortcut\">{shortcut}</span>\n ) : null;\n })}\n </div>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n\nexport type AiStatus = \"indeterminate\" | \"success\" | \"error\";\n\nexport type Message = {\n type: MessageType;\n text: string;\n hidden?: boolean;\n filterValue?: string;\n};\n\nexport type MessageType =\n | \"user\"\n | \"assistant-chat\"\n | \"assistant-action\"\n | \"assistant-in-progress\"\n | \"assistant-error\";\n\nexport type UserMessageCallback = (text: string) => Promise<void>;\n"],"mappings":"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"}
@@ -1,88 +0,0 @@
1
- import { r as e, h as s, g as r } from "./p-49712340.js";
2
-
3
- import { L as a } from "./p-311eedf3.js";
4
-
5
- import { h as o } from "./p-960c4988.js";
6
-
7
- const i = ':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)}.message__role{display:inline-block;font-weight:var(--mer-font__weight--semi-bold);margin-block-end:var(--mer-spacing--xs);display:inline-grid;grid-template-columns:max-content max-content;gap:6px}.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--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);position:relative}.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{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;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: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%;display:flex;align-items:center;justify-content:center;color:var(--mer-color__neutral-gray--300);display:flex;gap:var(--mer-spacing--2xs)}.hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}';
8
-
9
- const t = class {
10
- constructor(s) {
11
- e(this, s);
12
- this.copyable = false;
13
- // 7.LISTENERS //
14
- // 8.PUBLIC METHODS API //
15
- // 9.LOCAL METHODS //
16
- this.evaluateMessageIsCopyable = () => {
17
- this.copyable = this.messageType !== "assistant-in-progress" && this.messageType !== "assistant-action";
18
- };
19
- this.visible = false;
20
- this.showCopiedMessage = false;
21
- this.message = undefined;
22
- this.messageType = undefined;
23
- this.filterValue = undefined;
24
- this.hidden = undefined;
25
- this.translations = undefined;
26
- }
27
- // 5.EVENTS (EMIT) //
28
- // 6.COMPONENT LIFECYCLE METHODS //
29
- async componentWillLoad() {
30
- this._componentLocale = await a.getComponentStrings(this.el);
31
- this.evaluateMessageIsCopyable();
32
- }
33
- componentDidRender() {
34
- setTimeout((() => {
35
- /* Without the timeout it appears instantly (no apparent transition)*/
36
- this.visible = true;
37
- const e = this.el.parentElement;
38
- e.scrollTo(0, 0);
39
- }), 0);
40
- }
41
- // 10.RENDER() FUNCTION //
42
- render() {
43
- return s("li", {
44
- class: {
45
- message: true,
46
- "message--visible": this.visible && !this.hidden,
47
- [`message--${[ this.messageType ]}`]: true,
48
- "message--assistant": this.messageType !== "user",
49
- "message--copyable": this.copyable,
50
- "message--copying": this.showCopiedMessage
51
- }
52
- }, s("div", {
53
- class: "message__outer-wrapper"
54
- }, s("div", {
55
- class: {
56
- "message__inner-wrapper": true
57
- }
58
- }, this.messageType === "user" ? s("span", {
59
- class: "message__role message__role--user"
60
- }, this._componentLocale.you) : s("span", {
61
- class: {
62
- message__role: this.messageType !== "assistant-in-progress",
63
- "message__role--hidden": this.messageType === "assistant-in-progress",
64
- "message__role--assistant": true
65
- }
66
- }, this._componentLocale.assistant), s("div", {
67
- class: {
68
- message__caption: true,
69
- "message__caption--in-progress": this.messageType === "assistant-in-progress"
70
- }
71
- }, o(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? s("div", {
72
- class: "animation-wrapper"
73
- }, s("div", {
74
- class: "dot-pulse"
75
- })) : null)));
76
- }
77
- static get assetsDirs() {
78
- return [ "gx-ide-assets/ai-message" ];
79
- }
80
- get el() {
81
- return r(this);
82
- }
83
- };
84
-
85
- t.style = i;
86
-
87
- export { t as gx_ide_ai_message };
88
- //# sourceMappingURL=p-7cdfbdba.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["aiMessageCss","GxIdeAiMessage","this","copyable","evaluateMessageIsCopyable","messageType","componentWillLoad","_componentLocale","Locale","getComponentStrings","el","componentDidRender","setTimeout","visible","messagesList","parentElement","scrollTo","render","h","class","message","hidden","showCopiedMessage","you","message__role","assistant","message__caption","hiChar","filterValue"],"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"],"mappings":";;;;;;AAAA,MAAMA,IAAe;;MCcRC,IAAc;;;IAmBjBC,KAAAC,WAAW;;;;QAqEXD,KAAAE,4BAA4B;MAClCF,KAAKC,WACHD,KAAKG,gBAAgB,2BACrBH,KAAKG,gBAAgB;AAAkB;mBA7DxB;6BAKU;;;;;;;;;EAiC7B,uBAAMC;IACJJ,KAAKK,yBAAyBC,EAAOC,oBAAoBP,KAAKQ;IAC9DR,KAAKE;;EAGP,kBAAAO;IACEC,YAAW;;MAETV,KAAKW,UAAU;MACf,MAAMC,IAAeZ,KAAKQ,GAAGK;MAC7BD,EAAaE,SAAS,GAAG;AAAE,QAC1B;;;EAiBL,MAAAC;IACE,OACEC,EAAA;MACEC,OAAO;QACLC,SAAW;QACX,oBAAoBlB,KAAKW,YAAYX,KAAKmB;QAC1C,CAAC,YAAY,EAACnB,KAAKG,kBAAiB;QACpC,sBAAsBH,KAAKG,gBAAgB;QAC3C,qBAAqBH,KAAKC;QAC1B,oBAAoBD,KAAKoB;;OAG3BJ,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAO;QACL,0BAA0B;;OAG3BjB,KAAKG,gBAAgB,SACpBa,EAAA;MAAMC,OAAM;OACTjB,KAAKK,iBAAiBgB,OAGzBL,EAAA;MACEC,OAAO;QACLK,eAAiBtB,KAAKG,gBAAgB;QACtC,yBACEH,KAAKG,gBAAgB;QACvB,4BAA4B;;OAG7BH,KAAKK,iBAAiBkB,YAG3BP,EAAA;MACEC,OAAO;QACLO,kBAAoB;QACpB,iCACExB,KAAKG,gBAAgB;;OAGxBsB,EAAOzB,KAAKkB,SAASlB,KAAK0B,eAE5B1B,KAAKG,gBAAgB,0BACpBa,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAKC,OAAM;UAEX"}