@genexus/genexus-ide-ui 0.0.75 → 0.0.76

package/dist/collection/common/helpers.js

@@ -106,10 +106,19 @@ export const setInitialComboValue = (options) => {
     return options[0].value || options[0].id;
   }
 };
+export const escapeRegExp = (str) => {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
 export const hiChar = function (text, filterValue) {
-  /* this function highlights the character(s) that match(es) the filter value. (hi)light (Char)acters */
-  const re = new RegExp(filterValue, "gi");
-  return (h("span", { innerHTML: text.replace(re, '<span class="hiChar">$&</span>') }));
+  if (text && filterValue) {
+    /* this function highlights the character(s) that match(es) the filter value. (hi)light (Char)acters */
+    const escapedFilterValue = escapeRegExp(filterValue);
+    const re = new RegExp(escapedFilterValue, "gi");
+    return (h("span", { innerHTML: text.replace(re, '<span class="hiChar">$&</span>') }));
+  }
+  else {
+    return text;
+  }
 };
 export const closeOnOutsideClickHandler = (eventInfo, ref) => {
   if (!eventInfo.composedPath().includes(ref)) {

package/dist/collection/components/ai-assistant/ai-assistant.css

@@ -531,18 +531,6 @@ FORM ELEMENTS
   height: 100%;
   overflow-y: auto;
 }
-:host .header::before {
-  transition: 200ms background-color;
-}
-
-/*--- Assistant Status ---*/
-:host(.assistant--success) .header__first-row::before {
-  background-color: var(--ai-dot-bg-color);
-}
-
-:host(.assistant--error) .header__first-row::before {
-  background-color: var(--color-error-dark);
-}
 
 .gx-ide-main-wrapper {
   padding: 106px 10px 52px 10px;
@@ -571,14 +559,6 @@ FORM ELEMENTS
   align-items: center;
   justify-content: space-between;
 }
-.header__first-row::before {
-  content: "";
-  width: var(--spacing-comp-02);
-  height: var(--spacing-comp-02);
-  display: block;
-  border-radius: calc(var(--spacing-comp-02) / 2);
-  background-color: var(--ai-dot-bg-color);
-}
 .header__filter {
   margin-block-start: var(--spacing-comp-02);
 }
@@ -598,6 +578,8 @@ FORM ELEMENTS
 .messages-wrapper {
   position: relative;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
   /* Track */
   /* Handle */
   /* Handle on hover */
@@ -623,7 +605,7 @@ FORM ELEMENTS
 
 .messages {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   list-style-type: none;
   padding: 0;
   margin: 0;

package/dist/collection/components/ai-assistant/ai-assistant.js

@@ -6,6 +6,7 @@ import { Locale } from "../../common/locale";
 export class GxIdeTemplate {
   constructor() {
     this.renderedFirstTime = false;
+    this.setFocus = true;
     // 9.LOCAL METHODS //
     this.evaluateAiInProgress = () => {
       var _a;
@@ -37,7 +38,7 @@ export class GxIdeTemplate {
     };
     this.renderMessage = (message, i) => {
       if (message.text.length > 0) {
-        return (h("gx-ide-ai-message", { message: message.text, messageType: message.type, hidden: message.hidden, filterValue: this.filterValue, key: `${i.toString()}-${message.type}` }));
+        return (h("gx-ide-ai-message", { message: message.text, messageType: message.type, hidden: message.hidden, filterValue: this.filterValue, key: `${i.toString()}-${message.type}`, translations: this._componentLocale.aiMessage }));
       }
     };
     this.textAreaInputHandler = () => {
@@ -47,16 +48,22 @@ export class GxIdeTemplate {
       this.filterValue = "";
     };
     this.promptEnterHandler = async (prompt) => {
-      /* First remove double spaces*/
+      /* First remove double spaces */
       const promptTrimmed = prompt.detail.replace(/\s+/g, " ");
-      /* Update textarea value to get the proper height*/
+      /* Update textarea value to get the proper height */
       this.textAreaEl.value = promptTrimmed;
       setTimeout(() => {
-        /* Then save the actual height (setTimeOut required)*/
+        /* Then save the actual height (setTimeOut required) */
         this.lastUserMessageHeight = this.textAreaEl.offsetHeight;
       }, 0);
-      /* The clear the textarea*/
+      /* The clear the textarea */
       this.textAreaEl.value = "";
+      /* Insert the user message */
+      this.addMessage({
+        type: "user",
+        text: promptTrimmed
+      });
+      /* Call the callback */
       if (this.userMessageCallback && !this.aIInProgress) {
         this.aIInProgress = true;
         this.userMessageCallback(promptTrimmed).then(() => {
@@ -129,9 +136,16 @@ export class GxIdeTemplate {
         this.filterEl.focus();
       }
     };
+    this.promptFocusHandler = () => {
+      this.promptHasFocus = true;
+    };
+    this.promptBlurHandler = () => {
+      this.promptHasFocus = false;
+    };
     this.userHasTyped = false;
     this.aIInProgress = false;
     this.showFilter = false;
+    this.promptHasFocus = false;
     this.filterValue = undefined;
     this.messages = [];
     this.promptMaxHeight = "128px";
@@ -141,6 +155,11 @@ export class GxIdeTemplate {
     this.promptValue = undefined;
     this.filter = true;
   }
+  watchAIInProgressHandler(aiInProgress) {
+    if (!aiInProgress) {
+      this.setFocus = true;
+    }
+  }
   watchMessagesHandler() {
     this.evaluateAiInProgress();
     this.evaluateAiStatus();
@@ -161,6 +180,13 @@ export class GxIdeTemplate {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
       this.renderedFirstTime = true;
     }
+    if (this.setFocus) {
+      setTimeout(() => {
+        /* Doesn't seems to work without the setTimeout */
+        this.textAreaEl.focus();
+        this.setFocus = false;
+      }, 0);
+    }
   }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
@@ -203,8 +229,9 @@ export class GxIdeTemplate {
         prompt: true
       } }, h("gxg-form-textarea", { ai: true, class: "prompt__textarea", value: this.promptValue, maxHeight: this.promptMaxHeight, placeholder: this.aIInProgress
         ? this._componentLocale.processingQueryPlaceholder
-        : this._componentLocale.promptPlaceholder, onInput: this.textAreaInputHandler, onEnter: this.promptEnterHandler, onArrowUpPressed: this.promptArrowUpHandler, disabled: this.aIInProgress, ref: el => (this.textAreaEl = el) }), !this.userHasTyped &&
+        : this._componentLocale.promptPlaceholder, onInput: this.textAreaInputHandler, onEnter: this.promptEnterHandler, onArrowUpPressed: this.promptArrowUpHandler, onBlur: this.promptBlurHandler, onFocus: this.promptFocusHandler, disabled: this.aIInProgress, ref: el => (this.textAreaEl = el) }), !this.userHasTyped &&
       !this.aIInProgress &&
+      !this.promptHasFocus &&
       ((_b = this.focusShortcuts) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (h("div", { class: {
         prompt__shortcuts: true
       } }, this.focusShortcuts.map((shortcut, i) => {
@@ -363,6 +390,7 @@ export class GxIdeTemplate {
       "userHasTyped": {},
       "aIInProgress": {},
       "showFilter": {},
+      "promptHasFocus": {},
       "filterValue": {}
     };
   }
@@ -429,6 +457,9 @@ export class GxIdeTemplate {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "aIInProgress",
+        "methodName": "watchAIInProgressHandler"
+      }, {
         "propName": "messages",
         "methodName": "watchMessagesHandler"
       }];

package/dist/collection/components/ai-assistant/ai-message.css

@@ -6,7 +6,9 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 */
 /*--- Messages ---*/
 .message {
-  --ai-message-success-color: var(--color-success-dark);
+  --ai-bg-color: #242d36;
+  --ai-error-bg-color: #272124;
+  --ai-error-border-color: #a3585e;
   --ai-message-error-color: var(--color-error-dark);
   display: grid;
   grid-template-rows: 0fr;
@@ -19,11 +21,10 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 }
 .message__inner-wrapper {
   padding: var(--spacing-comp-01) var(--spacing-comp-02);
-  border-radius: var(--border-radius-xs) var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-xs);
+  border-radius: var(--border-radius-sm);
   border: var(--border-width-sm) solid transparent;
   background-color: var(--assistant-bg-color);
-  border-inline-start-width: var(--border-width-md);
-  margin-block-end: var(--spacing-comp-02);
+  margin-block-start: var(--spacing-comp-02);
 }
 .message__caption {
   font-size: var(--mc-font-size-xxs);
@@ -36,6 +37,7 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 .message--copying {
   pointer-events: none;
 }
+.message--copying span:not(.copied),
 .message--copying .message__caption {
   color: transparent;
   -webkit-user-select: none;
@@ -48,11 +50,6 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 .message--user .message__inner-wrapper {
   background-color: var(--gray-12);
 }
-.message--user .message__inner-wrapper {
-  /*override default message border radius*/
-  border-top-left-radius: var(--border-radius-sm);
-  border-bottom-left-radius: var(--border-radius-sm);
-}
 .message--assistant-action .message__inner-wrapper {
   font-style: italic;
 }
@@ -61,7 +58,6 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   display: grid;
   grid-template-columns: 1fr auto;
   gap: var(--spacing-comp-02);
-  border-inline-start-color: var(--gray-02);
 }
 .message--assistant-in-progress .message__inner-wrapper .message__caption {
   overflow: hidden;
@@ -73,10 +69,11 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   flex: none;
 }
 .message--assistant-chat .message__inner-wrapper, .message--assistant-action .message__inner-wrapper {
-  border-inline-start-color: var(--ai-message-success-color);
+  background-color: var(--ai-bg-color);
 }
 .message--assistant-error .message__inner-wrapper {
-  border-inline-start-color: var(--ai-message-error-color);
+  background-color: var(--ai-error-bg-color);
+  border-color: var(--ai-error-border-color);
 }
 .message--copyable {
   cursor: pointer;

package/dist/collection/components/ai-assistant/ai-message.js

@@ -1,9 +1,22 @@
 /* STENCIL IMPORTS */
 import { h } from "@stencil/core";
-import { Locale } from "../../common/locale";
 import { hiChar } from "../../common/helpers";
 export class GxIdeAiMessage {
   constructor() {
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE METHODS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES //
     /* The message allows to be copied*/
     this.copyable = false;
     // 7.LISTENERS //
@@ -19,7 +32,7 @@ export class GxIdeAiMessage {
       this.showCopiedMessage = true;
       setTimeout(() => {
         this.showCopiedMessage = false;
-      }, 1000);
+      }, 1500);
     };
     this.visible = false;
     this.showCopiedMessage = false;
@@ -27,11 +40,11 @@ export class GxIdeAiMessage {
     this.messageType = undefined;
     this.filterValue = undefined;
     this.hidden = undefined;
+    this.translations = undefined;
   }
   // 5.EVENTS (EMIT) //
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
-    this._componentLocale = await Locale.getComponentStrings(this.el);
     this.evaluateMessageIsCopyable();
   }
   componentDidRender() {
@@ -58,7 +71,7 @@ export class GxIdeAiMessage {
         "message__caption--in-progress": this.messageType === "assistant-in-progress"
       } }, this.showCopiedMessage ? (h("span", { class: {
         copied: true
-      } }, h("gxg-icon", { color: "mercury", type: "bpm/tasks" }), this._componentLocale.copied)) : null, hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
+      } }, h("gxg-icon", { color: "mercury", type: "bpm/tasks" }), this.translations["copied"])) : null, hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
   }
   static get is() { return "gx-ide-ai-message"; }
   static get encapsulation() { return "shadow"; }
@@ -147,6 +160,25 @@ export class GxIdeAiMessage {
         },
         "attribute": "hidden",
         "reflect": false
+      },
+      "translations": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Translations",
+          "resolved": "{ [key: string]: string; }",
+          "references": {
+            "Translations": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An object with the needed string translations."
+        }
       }
     };
   }

package/dist/collection/components/ai-assistant/gx-ide-assets/ai-assistant/langs/ai-assistant.lang.en.json

@@ -3,5 +3,7 @@
   "greeting": "✨ Greetings!, ¿How may I assist you?",
   "promptPlaceholder": "Ask anything...",
   "processingQueryPlaceholder": "Processing query...",
-  "copied": "Copied"
+  "aiMessage": {
+    "copied": "Copied"
+  }
 }

package/dist/components/ai-message.js

@@ -1,16 +1,29 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { L as Locale } from './locale.js';
 import { h as hiChar } from './helpers2.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
-const aiMessageCss = ".message{--ai-message-success-color:var(--color-success-dark);--ai-message-error-color:var(--color-error-dark);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(--spacing-comp-01) var(--spacing-comp-02);border-radius:var(--border-radius-xs) var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-xs);border:var(--border-width-sm) solid transparent;background-color:var(--assistant-bg-color);border-inline-start-width:var(--border-width-md);margin-block-end:var(--spacing-comp-02)}.message__caption{font-size:var(--mc-font-size-xxs);line-height:1.6em;position:relative}.message--visible{grid-template-rows:1fr}.message--copying{pointer-events:none}.message--copying .message__caption{color:transparent;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.message--user .message__inner-wrapper{background-color:var(--gray-12)}.message--user .message__inner-wrapper{border-top-left-radius:var(--border-radius-sm);border-bottom-left-radius:var(--border-radius-sm)}.message--assistant-action .message__inner-wrapper{font-style:italic}.message--assistant-in-progress .message__inner-wrapper{font-style:italic;display:grid;grid-template-columns:1fr auto;gap:var(--spacing-comp-02);border-inline-start-color:var(--gray-02)}.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-chat .message__inner-wrapper,.message--assistant-action .message__inner-wrapper{border-inline-start-color:var(--ai-message-success-color)}.message--assistant-error .message__inner-wrapper{border-inline-start-color:var(--ai-message-error-color)}.message--copyable{cursor:pointer}.message--copyable:hover{filter:brightness(1.2)}.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(--gray-03);color:var(--gray-03);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(--gray-03);color:var(--gray-03)}.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(--color-on-background);display:flex;gap:var(--spacing-comp-01)}.hiChar{color:var(--gx-ide-hi-char-color);font-weight:600}";
+const aiMessageCss = ".message{--ai-bg-color:#242d36;--ai-error-bg-color:#272124;--ai-error-border-color:#a3585e;--ai-message-error-color:var(--color-error-dark);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(--spacing-comp-01) var(--spacing-comp-02);border-radius:var(--border-radius-sm);border:var(--border-width-sm) solid transparent;background-color:var(--assistant-bg-color);margin-block-start:var(--spacing-comp-02)}.message__caption{font-size:var(--mc-font-size-xxs);line-height:1.6em;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:var(--gray-12)}.message--assistant-action .message__inner-wrapper{font-style:italic}.message--assistant-in-progress .message__inner-wrapper{font-style:italic;display:grid;grid-template-columns:1fr auto;gap:var(--spacing-comp-02)}.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-chat .message__inner-wrapper,.message--assistant-action .message__inner-wrapper{background-color:var(--ai-bg-color)}.message--assistant-error .message__inner-wrapper{background-color:var(--ai-error-bg-color);border-color:var(--ai-error-border-color)}.message--copyable{cursor:pointer}.message--copyable:hover{filter:brightness(1.2)}.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(--gray-03);color:var(--gray-03);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(--gray-03);color:var(--gray-03)}.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(--color-on-background);display:flex;gap:var(--spacing-comp-01)}.hiChar{color:var(--gx-ide-hi-char-color);font-weight:600}";
 
 const GxIdeAiMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE METHODS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES //
     /* The message allows to be copied*/
     this.copyable = false;
     // 7.LISTENERS //
@@ -26,7 +39,7 @@ const GxIdeAiMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.showCopiedMessage = true;
       setTimeout(() => {
         this.showCopiedMessage = false;
-      }, 1000);
+      }, 1500);
     };
     this.visible = false;
     this.showCopiedMessage = false;
@@ -34,11 +47,11 @@ const GxIdeAiMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.messageType = undefined;
     this.filterValue = undefined;
     this.hidden = undefined;
+    this.translations = undefined;
   }
   // 5.EVENTS (EMIT) //
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
-    this._componentLocale = await Locale.getComponentStrings(this.el);
     this.evaluateMessageIsCopyable();
   }
   componentDidRender() {
@@ -65,7 +78,7 @@ const GxIdeAiMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         "message__caption--in-progress": this.messageType === "assistant-in-progress"
       } }, this.showCopiedMessage ? (h("span", { class: {
         copied: true
-      } }, h("gxg-icon", { color: "mercury", type: "bpm/tasks" }), this._componentLocale.copied)) : null, hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
+      } }, h("gxg-icon", { color: "mercury", type: "bpm/tasks" }), this.translations["copied"])) : null, hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
   }
   static get assetsDirs() { return ["gx-ide-assets/ai-message"]; }
   get el() { return this; }
@@ -75,6 +88,7 @@ const GxIdeAiMessage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "messageType": [1, "message-type"],
     "filterValue": [1, "filter-value"],
     "hidden": [4],
+    "translations": [16],
     "visible": [32],
     "showCopiedMessage": [32]
   }]);

package/dist/components/gx-ide-ai-assistant.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './gxg-label2.js';
 import { d as defineCustomElement$3 } from './title2.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const aiAssistantCss = ".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}.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(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;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:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}:host{--ai-dot-bg-color:var(--color-success-dark);display:block;height:100%;--assistant-bg-color:var(--gray-11);flex-basis:286px;flex-shrink:0;height:100%;overflow-y:auto}:host .header::before{transition:200ms background-color}:host(.assistant--success) .header__first-row::before{background-color:var(--ai-dot-bg-color)}:host(.assistant--error) .header__first-row::before{background-color:var(--color-error-dark)}.gx-ide-main-wrapper{padding:106px 10px 52px 10px;background-color:var(--gray-10);height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:var(--spacing-comp-03)}.header{border-block-start:1px solid var(--gray-13);padding-block-start:var(--spacing-comp-03);display:flex;flex-direction:column}.header__actions-wrapper{display:flex;gap:var(--spacing-comp-02);margin-inline-start:auto}.header__first-row{display:flex;gap:var(--spacing-comp-02);align-items:center;justify-content:space-between}.header__first-row::before{content:\"\";width:var(--spacing-comp-02);height:var(--spacing-comp-02);display:block;border-radius:calc(var(--spacing-comp-02) / 2);background-color:var(--ai-dot-bg-color)}.header__filter{margin-block-start:var(--spacing-comp-02)}.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;cursor:initial}.messages-wrapper::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.messages-wrapper::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.messages-wrapper::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.messages-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}.messages{display:flex;flex-direction:column-reverse;list-style-type:none;padding:0;margin:0}.prompt{position:relative;margin-top:auto}.prompt__textarea::part(textarea-wrapper){border:none;background-color:var(--assistant-bg-color)}.prompt__shortcuts{position:absolute;display:flex;align-items:center;gap:var(--spacing-comp-01);padding-right:var(--spacing-comp-02);right:0;top:0;height:100%}.prompt__shortcut{padding:var(--spacing-comp-00) var(--spacing-comp-02);background-color:var(--gray-00);border-radius:var(--border-width-md)}";
+const aiAssistantCss = ".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}.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(--gray-01)}ch-grid-column:first-child{padding-inline-start:var(--gxg-container--padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gxg-container--padding) !important}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;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:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}:host{--ai-dot-bg-color:var(--color-success-dark);display:block;height:100%;--assistant-bg-color:var(--gray-11);flex-basis:286px;flex-shrink:0;height:100%;overflow-y:auto}.gx-ide-main-wrapper{padding:106px 10px 52px 10px;background-color:var(--gray-10);height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:var(--spacing-comp-03)}.header{border-block-start:1px solid var(--gray-13);padding-block-start:var(--spacing-comp-03);display:flex;flex-direction:column}.header__actions-wrapper{display:flex;gap:var(--spacing-comp-02);margin-inline-start:auto}.header__first-row{display:flex;gap:var(--spacing-comp-02);align-items:center;justify-content:space-between}.header__filter{margin-block-start:var(--spacing-comp-02)}.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;cursor:initial}.messages-wrapper::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.messages-wrapper::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.messages-wrapper::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.messages-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}.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;background-color:var(--assistant-bg-color)}.prompt__shortcuts{position:absolute;display:flex;align-items:center;gap:var(--spacing-comp-01);padding-right:var(--spacing-comp-02);right:0;top:0;height:100%}.prompt__shortcut{padding:var(--spacing-comp-00) var(--spacing-comp-02);background-color:var(--gray-00);border-radius:var(--border-width-md)}";
 
 const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,6 +19,7 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__attachShadow();
     this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
     this.renderedFirstTime = false;
+    this.setFocus = true;
     // 9.LOCAL METHODS //
     this.evaluateAiInProgress = () => {
       var _a;
@@ -50,7 +51,7 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     this.renderMessage = (message, i) => {
       if (message.text.length > 0) {
-        return (h("gx-ide-ai-message", { message: message.text, messageType: message.type, hidden: message.hidden, filterValue: this.filterValue, key: `${i.toString()}-${message.type}` }));
+        return (h("gx-ide-ai-message", { message: message.text, messageType: message.type, hidden: message.hidden, filterValue: this.filterValue, key: `${i.toString()}-${message.type}`, translations: this._componentLocale.aiMessage }));
       }
     };
     this.textAreaInputHandler = () => {
@@ -60,16 +61,22 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.filterValue = "";
     };
     this.promptEnterHandler = async (prompt) => {
-      /* First remove double spaces*/
+      /* First remove double spaces */
       const promptTrimmed = prompt.detail.replace(/\s+/g, " ");
-      /* Update textarea value to get the proper height*/
+      /* Update textarea value to get the proper height */
       this.textAreaEl.value = promptTrimmed;
       setTimeout(() => {
-        /* Then save the actual height (setTimeOut required)*/
+        /* Then save the actual height (setTimeOut required) */
         this.lastUserMessageHeight = this.textAreaEl.offsetHeight;
       }, 0);
-      /* The clear the textarea*/
+      /* The clear the textarea */
       this.textAreaEl.value = "";
+      /* Insert the user message */
+      this.addMessage({
+        type: "user",
+        text: promptTrimmed
+      });
+      /* Call the callback */
       if (this.userMessageCallback && !this.aIInProgress) {
         this.aIInProgress = true;
         this.userMessageCallback(promptTrimmed).then(() => {
@@ -142,9 +149,16 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.filterEl.focus();
       }
     };
+    this.promptFocusHandler = () => {
+      this.promptHasFocus = true;
+    };
+    this.promptBlurHandler = () => {
+      this.promptHasFocus = false;
+    };
     this.userHasTyped = false;
     this.aIInProgress = false;
     this.showFilter = false;
+    this.promptHasFocus = false;
     this.filterValue = undefined;
     this.messages = [];
     this.promptMaxHeight = "128px";
@@ -154,6 +168,11 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.promptValue = undefined;
     this.filter = true;
   }
+  watchAIInProgressHandler(aiInProgress) {
+    if (!aiInProgress) {
+      this.setFocus = true;
+    }
+  }
   watchMessagesHandler() {
     this.evaluateAiInProgress();
     this.evaluateAiStatus();
@@ -174,6 +193,13 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
       this.renderedFirstTime = true;
     }
+    if (this.setFocus) {
+      setTimeout(() => {
+        /* Doesn't seems to work without the setTimeout */
+        this.textAreaEl.focus();
+        this.setFocus = false;
+      }, 0);
+    }
   }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
@@ -216,8 +242,9 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         prompt: true
       } }, h("gxg-form-textarea", { ai: true, class: "prompt__textarea", value: this.promptValue, maxHeight: this.promptMaxHeight, placeholder: this.aIInProgress
         ? this._componentLocale.processingQueryPlaceholder
-        : this._componentLocale.promptPlaceholder, onInput: this.textAreaInputHandler, onEnter: this.promptEnterHandler, onArrowUpPressed: this.promptArrowUpHandler, disabled: this.aIInProgress, ref: el => (this.textAreaEl = el) }), !this.userHasTyped &&
+        : this._componentLocale.promptPlaceholder, onInput: this.textAreaInputHandler, onEnter: this.promptEnterHandler, onArrowUpPressed: this.promptArrowUpHandler, onBlur: this.promptBlurHandler, onFocus: this.promptFocusHandler, disabled: this.aIInProgress, ref: el => (this.textAreaEl = el) }), !this.userHasTyped &&
       !this.aIInProgress &&
+      !this.promptHasFocus &&
       ((_b = this.focusShortcuts) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (h("div", { class: {
         prompt__shortcuts: true
       } }, this.focusShortcuts.map((shortcut, i) => {
@@ -228,6 +255,7 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get assetsDirs() { return ["gx-ide-assets/ai-assistant"]; }
   get el() { return this; }
   static get watchers() { return {
+    "aIInProgress": ["watchAIInProgressHandler"],
     "messages": ["watchMessagesHandler"]
   }; }
   static get style() { return aiAssistantCss; }
@@ -242,6 +270,7 @@ const GxIdeTemplate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "userHasTyped": [32],
     "aIInProgress": [32],
     "showFilter": [32],
+    "promptHasFocus": [32],
     "filterValue": [32],
     "clear": [64],
     "addMessage": [64]

package/dist/components/helpers2.js

@@ -52,10 +52,19 @@ const setInitialComboValue = (options) => {
     return options[0].value || options[0].id;
   }
 };
+const escapeRegExp = (str) => {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
 const hiChar = function (text, filterValue) {
-  /* this function highlights the character(s) that match(es) the filter value. (hi)light (Char)acters */
-  const re = new RegExp(filterValue, "gi");
-  return (h("span", { innerHTML: text.replace(re, '<span class="hiChar">$&</span>') }));
+  if (text && filterValue) {
+    /* this function highlights the character(s) that match(es) the filter value. (hi)light (Char)acters */
+    const escapedFilterValue = escapeRegExp(filterValue);
+    const re = new RegExp(escapedFilterValue, "gi");
+    return (h("span", { innerHTML: text.replace(re, '<span class="hiChar">$&</span>') }));
+  }
+  else {
+    return text;
+  }
 };
 const closeOnOutsideClickHandler = (eventInfo, ref) => {
   if (!eventInfo.composedPath().includes(ref)) {