@genexus/genexus-ide-ui 0.0.75 → 0.0.77

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,9 @@ FORM ELEMENTS
 .messages-wrapper {
   position: relative;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
+  scroll-behavior: smooth;
   /* Track */
   /* Handle */
   /* Handle on hover */
@@ -623,7 +606,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,8 @@ import { Locale } from "../../common/locale";
 export class GxIdeTemplate {
   constructor() {
     this.renderedFirstTime = false;
+    this.setFocus = true;
+    this.scrollToBottomFlag = true;
     // 9.LOCAL METHODS //
     this.evaluateAiInProgress = () => {
       var _a;
@@ -37,7 +39,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 = () => {
@@ -45,18 +47,25 @@ export class GxIdeTemplate {
       this.showFilter = false;
       this.filterEl.value = "";
       this.filterValue = "";
+      this.scrollToBottomFlag = true;
     };
     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(() => {
@@ -65,6 +74,7 @@ export class GxIdeTemplate {
       }
     };
     this.filterMessagesHandler = (e) => {
+      this.scrollToBottomFlag = false;
       this.filterValue = e.detail.toLowerCase();
       const filteredMessages = [...this.messages];
       filteredMessages.forEach(message => {
@@ -129,9 +139,24 @@ export class GxIdeTemplate {
         this.filterEl.focus();
       }
     };
+    this.promptFocusHandler = () => {
+      this.promptHasFocus = true;
+    };
+    this.promptBlurHandler = () => {
+      this.promptHasFocus = false;
+    };
+    this.scrollToBottom = () => {
+      if (this.scrollToBottomFlag) {
+        this.messagesWrapperEl.scrollTo(0, this.messagesWrapperEl.scrollHeight);
+        this.messagesWrapperEl.scrollTop =
+          this.messagesWrapperEl.scrollHeight -
+            this.messagesWrapperEl.clientHeight;
+      }
+    };
     this.userHasTyped = false;
     this.aIInProgress = false;
     this.showFilter = false;
+    this.promptHasFocus = false;
     this.filterValue = undefined;
     this.messages = [];
     this.promptMaxHeight = "128px";
@@ -141,6 +166,11 @@ export class GxIdeTemplate {
     this.promptValue = undefined;
     this.filter = true;
   }
+  watchAIInProgressHandler(aiInProgress) {
+    if (!aiInProgress) {
+      this.setFocus = true;
+    }
+  }
   watchMessagesHandler() {
     this.evaluateAiInProgress();
     this.evaluateAiStatus();
@@ -161,6 +191,16 @@ 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);
+    }
+    setTimeout(() => {
+      this.scrollToBottom();
+    }, 200);
   }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
@@ -197,14 +237,15 @@ export class GxIdeTemplate {
         "header__second-row--visible": this.showFilter
       } }, h("div", { class: "filter-inner-wrapper" }, h("gxg-form-text", { class: "header__filter", onInput: this.filterMessagesHandler, ref: el => (this.filterEl = el) })))) : null), h("div", { class: {
         "messages-wrapper": true
-      } }, ((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? (h("ol", { class: { messages: true } }, this.messages.map((message, i) => {
+      }, ref: el => (this.messagesWrapperEl = el) }, ((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? (h("ol", { class: { messages: true } }, this.messages.map((message, i) => {
       return this.renderMessage(message, i);
     }))) : null), h("div", { class: {
         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 +404,7 @@ export class GxIdeTemplate {
       "userHasTyped": {},
       "aIInProgress": {},
       "showFilter": {},
+      "promptHasFocus": {},
       "filterValue": {}
     };
   }
@@ -429,6 +471,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);
+  --user-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);
+  background-color: var(--gray-12);
+  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;
@@ -46,12 +48,7 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   /* Standard syntax */
 }
 .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);
+  background-color: var(--user-bg-color);
 }
 .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;
@@ -72,11 +68,9 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 .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);
+  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{--user-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(--gray-12);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(--user-bg-color)}.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-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]
   }]);