@genexus/genexus-ide-ui 0.0.72 → 0.0.74

package/dist/cjs/gx-ide-ai-assistant.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f9bb1815.js');
 const locale = require('./locale-c8445ea4.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}:host{display:block;height:100%;--assistant-bg-color:var(--gray-11)}:host(.assistant--success) .header::before{background-color:var(--color-primary-hover)}:host(.assistant--error) .header::before{background-color:var(--color-error-light)}.gx-ide-main-wrapper{padding:106px 10px 52px 10px;background-color:var(--gray-10);height:100%}.header{border-block-start:1px solid var(--gray-13);padding-block-start:var(--spacing-comp-03);display:flex;gap:var(--spacing-comp-02);align-items:center}.header::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(--gray-02)}.messages{display:flex;flex-direction:column;gap:var(--spacing-comp-02);list-style-type:none;padding:0}.messages .message{display:grid;grid-template-rows:0fr;transition:grid-template-rows 100ms;transition:grid-template-rows 100ms, -ms-grid-rows 100ms;}.messages .message--visible{grid-template-rows:1fr}.messages .message__outer-wrapper{overflow:hidden}.messages .message__inner-wrapper{padding:8px;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)}.messages .message__caption{font-size:var(--mc-font-size-xxs);line-height:var(--font-style-regular)}.messages .message--user .message__inner-wrapper{background-color:var(--gray-12)}.messages .message--assistant-action .message__inner-wrapper,.messages .message--assistant-error .message__inner-wrapper{font-style:italic}.messages .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)}.messages .message--assistant-in-progress .message__inner-wrapper .message__caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.messages .message--assistant-in-progress .message__inner-wrapper .animation-wrapper{flex:none}.messages .message--assistant-chat .message__inner-wrapper,.messages .message--assistant-action .message__inner-wrapper{border-inline-start-color:var(--color-primary-hover)}.messages .message--assistant-error .message__inner-wrapper{border-inline-start-color:var(--color-error-light)}@keyframes message-animation{0%{opacity:0}100%{opacity:1}}.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)}.animation-wrapper{width:60px;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}}";
+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 GxIdeTemplate = class {
   constructor(hostRef) {
@@ -13,52 +13,161 @@ const GxIdeTemplate = class {
     this.componentDidRenderFirstTime = index.createEvent(this, "componentDidRenderFirstTime", 7);
     this.renderedFirstTime = false;
     // 9.LOCAL METHODS //
-    this.renderMessage = (message) => {
+    this.evaluateAiInProgress = () => {
+      var _a;
+      if (((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+        this.messages[this.messages.length - 1].type === "assistant-in-progress") {
+        this.aIInProgress = true;
+      }
+      else {
+        this.aIInProgress = false;
+      }
+    };
+    this.evaluateAiStatus = () => {
+      var _a;
+      if (((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+        this.assistantStatus = "indeterminate";
+        return;
+      }
+      if (this.messages[this.messages.length - 1].type ===
+        "assistant-in-progress" ||
+        this.messages[this.messages.length - 1].type === "user") {
+        this.assistantStatus = "indeterminate";
+      }
+      else if (this.messages[this.messages.length - 1].type === "assistant-error") {
+        this.assistantStatus = "error";
+      }
+      else {
+        this.assistantStatus = "success";
+      }
+    };
+    this.renderMessage = (message, i) => {
       if (message.text.length > 0) {
-        return (index.h("li", { class: {
-            "message": true,
-            [`message--${[message.type]}`]: true,
-            "message--assistant": message.type !== "user",
-            "message--visible": this.showMessage
-          } }, index.h("div", { class: "message__outer-wrapper" }, index.h("div", { class: "message__inner-wrapper" }, index.h("div", { class: {
-            "message__caption": true,
-            "message__caption--in-progress": message.type === "assistant-in-progress"
-          } }, message.text), message.type === "assistant-in-progress" ? (index.h("div", { class: "animation-wrapper" }, index.h("div", { class: "dot-pulse" }))) : null))));
+        return (index.h("gx-ide-ai-message", { message: message.text, messageType: message.type, hidden: message.hidden, filterValue: this.filterValue, key: `${i.toString()}-${message.type}` }));
       }
     };
     this.textAreaInputHandler = () => {
       this.userHasTyped = true;
+      this.showFilter = false;
+      this.filterEl.value = "";
+      this.filterValue = "";
+    };
+    this.promptEnterHandler = async (prompt) => {
+      /* First remove double spaces*/
+      const promptTrimmed = prompt.detail.replace(/\s+/g, " ");
+      /* Update textarea value to get the proper height*/
+      this.textAreaEl.value = promptTrimmed;
+      setTimeout(() => {
+        /* Then save the actual height (setTimeOut required)*/
+        this.lastUserMessageHeight = this.textAreaEl.offsetHeight;
+      }, 0);
+      /* The clear the textarea*/
+      this.textAreaEl.value = "";
+      if (this.userMessageCallback && !this.aIInProgress) {
+        this.aIInProgress = true;
+        this.userMessageCallback(promptTrimmed).then(() => {
+          this.aIInProgress = false;
+        });
+      }
+    };
+    this.filterMessagesHandler = (e) => {
+      this.filterValue = e.detail.toLowerCase();
+      const filteredMessages = [...this.messages];
+      filteredMessages.forEach(message => {
+        if (message.text.toLowerCase().includes(this.filterValue)) {
+          message.hidden = false;
+        }
+        else {
+          message.hidden = true;
+        }
+      });
+      this.messages = filteredMessages;
+    };
+    this.clearMessages = () => {
+      this.messages = [];
+      this.textAreaEl.focus();
+    };
+    this.attachShortcuts = () => {
+      var _a;
+      if (((_a = this.focusShortcuts) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        const ctrlFocusIndex = this.focusShortcuts.findIndex(key => key.toLocaleLowerCase() === "ctrl");
+        const shiftFocusIndex = this.focusShortcuts.findIndex(key => key.toLocaleLowerCase() === "shift");
+        const cmdKeyIndex = this.focusShortcuts.findIndex(key => key.toLocaleLowerCase() === "cmd");
+        const keyFocus = this.focusShortcuts
+          .find(key => {
+          return (key.toLocaleLowerCase() !== "ctrl" &&
+            key.toLocaleLowerCase() !== "shift" &&
+            key.toLocaleLowerCase() !== "cmd");
+        })
+          .toLowerCase();
+        document.addEventListener("keydown", (e) => {
+          if (e.key === keyFocus && ctrlFocusIndex !== -1 && e.ctrlKey) {
+            this.textAreaEl.focus();
+            this.userHasTyped = true;
+          }
+          else if (e.key === keyFocus && shiftFocusIndex !== -1 && e.shiftKey) {
+            this.textAreaEl.focus();
+            this.userHasTyped = true;
+          }
+          else if (e.key === keyFocus && cmdKeyIndex !== -1 && e.metaKey) {
+            this.textAreaEl.focus();
+            this.userHasTyped = true;
+          }
+        });
+      }
+    };
+    this.promptArrowUpHandler = () => {
+      var _a;
+      this.userHasTyped = true;
+      const lastUserMessage = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.find(message => {
+        return message.type === "user";
+      });
+      if (lastUserMessage) {
+        if (this.lastUserMessageHeight) {
+          this.textareaShadowPart.style.height = `${this.lastUserMessageHeight}px`;
+        }
+        this.textAreaEl.value = lastUserMessage.text;
+      }
     };
-    this.promptEnterHandler = (prompt) => {
-      const promptValue = prompt.detail;
-      const userMessage = {
-        type: "user",
-        text: promptValue
-      };
-      const messagesUpdated = [...this.messages];
-      messagesUpdated.push(userMessage);
-      this.messages = messagesUpdated;
+    this.toggleFilterHandler = () => {
+      this.showFilter = !this.showFilter;
+      if (this.showFilter) {
+        this.filterEl.focus();
+      }
     };
     this.userHasTyped = false;
-    this.addingQuery = false;
-    this.showMessage = true;
-    this.messages = undefined;
+    this.aIInProgress = false;
+    this.showFilter = false;
+    this.filterValue = undefined;
+    this.messages = [];
     this.promptMaxHeight = "128px";
-    this.assistantStatus = "success";
+    this.assistantStatus = "indeterminate";
     this.focusShortcuts = undefined;
     this.userMessageCallback = undefined;
+    this.promptValue = undefined;
+    this.filter = true;
+  }
+  watchMessagesHandler() {
+    this.evaluateAiInProgress();
+    this.evaluateAiStatus();
   }
-  // 5.EVENTS (EMIT) //
   // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await locale.Locale.getComponentStrings(this.el);
+    this.evaluateAiInProgress();
+    this.evaluateAiStatus();
+    this.attachShortcuts();
+  }
+  componentDidLoad() {
+    this.textareaShadowPart =
+      this.textAreaEl.shadowRoot.querySelector("textarea");
+  }
   componentDidRender() {
     if (!this.renderedFirstTime) {
       this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
       this.renderedFirstTime = true;
     }
   }
-  async componentWillLoad() {
-    this._componentLocale = await locale.Locale.getComponentStrings(this.el);
-  }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
   /**
@@ -74,7 +183,8 @@ const GxIdeTemplate = class {
     var _a;
     if (((_a = message.text) === null || _a === void 0 ? void 0 : _a.length) > 0) {
       const messages = [...this.messages];
-      const updateInProgressMessage = messages[messages.length - 1].type === "assistant-in-progress";
+      const updateInProgressMessage = (messages === null || messages === void 0 ? void 0 : messages.length) > 0 &&
+        messages[messages.length - 1].type === "assistant-in-progress";
       if (updateInProgressMessage) {
         messages.pop();
       }
@@ -84,17 +194,35 @@ const GxIdeTemplate = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    var _a;
-    return (index.h(index.Host, { class: { [`assistant--${this.assistantStatus}`]: true } }, index.h("div", { class: "gx-ide-main-wrapper" }, index.h("header", { class: "header" }, index.h("gxg-title", { type: "title-02" }, this._componentLocale.componentName)), ((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? (index.h("ol", { class: { messages: true } }, this.messages.map(message => {
-      return this.renderMessage(message);
-    }))) : null, index.h("div", { class: {
+    var _a, _b;
+    return (index.h(index.Host, { class: {
+        [`assistant--${this.assistantStatus}`]: true,
+        "assistant--in-progress": this.aIInProgress
+      } }, index.h("div", { class: "gx-ide-main-wrapper" }, index.h("header", { class: "header" }, index.h("div", { class: "header__first-row" }, index.h("gxg-title", { type: "title-02" }, this._componentLocale.componentName), index.h("div", { class: "header__actions-wrapper" }, this.filter ? (index.h("gxg-button", { class: "header__filter-button", type: "tertiary", icon: "menus/find", onClick: this.toggleFilterHandler, disabled: this.messages.length === 0 })) : null, index.h("gxg-button", { class: "header__clear-button", type: "tertiary", icon: "bpm/delete", onClick: this.clearMessages, disabled: this.messages.length === 0 }))), this.filter ? (index.h("div", { class: {
+        "header__second-row": true,
+        "header__second-row--visible": this.showFilter
+      } }, index.h("div", { class: "filter-inner-wrapper" }, index.h("gxg-form-text", { class: "header__filter", onInput: this.filterMessagesHandler, ref: el => (this.filterEl = el) })))) : null), index.h("div", { class: {
+        "messages-wrapper": true
+      } }, ((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? (index.h("ol", { class: { messages: true } }, this.messages.map((message, i) => {
+      return this.renderMessage(message, i);
+    }))) : null), index.h("div", { class: {
         prompt: true
-      } }, index.h("gxg-form-textarea", { grow: true, class: "prompt__textarea", maxHeight: this.promptMaxHeight, placeholder: this._componentLocale.promptPlaceholder, onInput: this.textAreaInputHandler, onEnter: this.promptEnterHandler }), !this.userHasTyped ? (index.h("div", { class: {
+      } }, index.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.aIInProgress &&
+      ((_b = this.focusShortcuts) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (index.h("div", { class: {
         prompt__shortcuts: true
-      } }, index.h("span", { class: "prompt__shortcut" }, "Ctrl"), index.h("span", { class: "prompt__shortcut" }, "A"))) : null))));
+      } }, this.focusShortcuts.map((shortcut, i) => {
+      /* Up to three keys allowed*/
+      return i <= 2 ? (index.h("span", { class: "prompt__shortcut" }, shortcut)) : null;
+    }))) : null))));
   }
   static get assetsDirs() { return ["gx-ide-assets/ai-assistant"]; }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "messages": ["watchMessagesHandler"]
+  }; }
 };
 GxIdeTemplate.style = aiAssistantCss;
 

package/dist/cjs/gx-ide-ai-message.cjs.entry.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f9bb1815.js');
+const locale = require('./locale-c8445ea4.js');
+const helpers = require('./helpers-0a984c76.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 GxIdeAiMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /* The message allows to be copied*/
+    this.copyable = false;
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.evaluateMessageIsCopyable = () => {
+      this.copyable =
+        this.messageType !== "assistant-in-progress" &&
+          this.messageType !== "assistant-action";
+    };
+    this.copyMessage = () => {
+      navigator.clipboard.writeText(this.message);
+      this.showCopiedMessage = true;
+      setTimeout(() => {
+        this.showCopiedMessage = false;
+      }, 1000);
+    };
+    this.visible = false;
+    this.showCopiedMessage = false;
+    this.message = undefined;
+    this.messageType = undefined;
+    this.filterValue = undefined;
+    this.hidden = undefined;
+  }
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await locale.Locale.getComponentStrings(this.el);
+    this.evaluateMessageIsCopyable();
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      /* Without the timeout it appears instantly (no apparent transition)*/
+      this.visible = true;
+      const messagesList = this.el.parentElement;
+      messagesList.scrollTo(0, 0);
+    }, 0);
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (index.h("li", { class: {
+        "message": true,
+        "message--visible": this.visible && !this.hidden,
+        [`message--${[this.messageType]}`]: true,
+        "message--assistant": this.messageType !== "user",
+        "message--copyable": this.copyable,
+        "message--copying": this.showCopiedMessage
+      }, onClick: this.copyable && this.copyMessage }, index.h("div", { class: "message__outer-wrapper" }, index.h("div", { class: {
+        "message__inner-wrapper": true
+      } }, index.h("div", { class: {
+        "message__caption": true,
+        "message__caption--in-progress": this.messageType === "assistant-in-progress"
+      } }, this.showCopiedMessage ? (index.h("span", { class: {
+        copied: true
+      } }, index.h("gxg-icon", { color: "mercury", type: "bpm/tasks" }), this._componentLocale.copied)) : null, helpers.hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (index.h("div", { class: "animation-wrapper" }, index.h("div", { class: "dot-pulse" }))) : null))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/ai-message"]; }
+  get el() { return index.getElement(this); }
+};
+GxIdeAiMessage.style = aiMessageCss;
+
+exports.gx_ide_ai_message = GxIdeAiMessage;