@genexus/genexus-ide-ui 0.0.73 → 0.0.74

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0aa3977d.js';
 import { L as Locale } from './locale-e183487a.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) {
@@ -9,52 +9,161 @@ const GxIdeTemplate = class {
     this.componentDidRenderFirstTime = 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 (h("li", { class: {
-            "message": true,
-            [`message--${[message.type]}`]: true,
-            "message--assistant": message.type !== "user",
-            "message--visible": this.showMessage
-          } }, h("div", { class: "message__outer-wrapper" }, h("div", { class: "message__inner-wrapper" }, h("div", { class: {
-            "message__caption": true,
-            "message__caption--in-progress": message.type === "assistant-in-progress"
-          } }, message.text), message.type === "assistant-in-progress" ? (h("div", { class: "animation-wrapper" }, h("div", { class: "dot-pulse" }))) : null))));
+        return (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) => {
-      const promptValue = prompt.detail;
-      if (this.userMessageCallback && !this.processingUserMessage) {
-        this.processingUserMessage = true;
-        this.userMessageCallback(promptValue).then(() => {
-          this.processingUserMessage = false;
+      /* 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.toggleFilterHandler = () => {
+      this.showFilter = !this.showFilter;
+      if (this.showFilter) {
+        this.filterEl.focus();
+      }
+    };
     this.userHasTyped = false;
-    this.addingQuery = false;
-    this.showMessage = true;
-    this.processingUserMessage = false;
-    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.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.getComponentStrings(this.el);
-  }
   // 7.LISTENERS //
   // 8.PUBLIC METHODS API //
   /**
@@ -70,7 +179,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();
       }
@@ -80,17 +190,35 @@ const GxIdeTemplate = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    var _a;
-    return (h(Host, { class: { [`assistant--${this.assistantStatus}`]: true } }, h("div", { class: "gx-ide-main-wrapper" }, h("header", { class: "header" }, h("gxg-title", { type: "title-02" }, this._componentLocale.componentName)), ((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? (h("ol", { class: { messages: true } }, this.messages.map(message => {
-      return this.renderMessage(message);
-    }))) : null, h("div", { class: {
+    var _a, _b;
+    return (h(Host, { class: {
+        [`assistant--${this.assistantStatus}`]: true,
+        "assistant--in-progress": this.aIInProgress
+      } }, h("div", { class: "gx-ide-main-wrapper" }, h("header", { class: "header" }, h("div", { class: "header__first-row" }, h("gxg-title", { type: "title-02" }, this._componentLocale.componentName), h("div", { class: "header__actions-wrapper" }, this.filter ? (h("gxg-button", { class: "header__filter-button", type: "tertiary", icon: "menus/find", onClick: this.toggleFilterHandler, disabled: this.messages.length === 0 })) : null, h("gxg-button", { class: "header__clear-button", type: "tertiary", icon: "bpm/delete", onClick: this.clearMessages, disabled: this.messages.length === 0 }))), this.filter ? (h("div", { class: {
+        "header__second-row": true,
+        "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) => {
+      return this.renderMessage(message, i);
+    }))) : null), h("div", { class: {
         prompt: true
-      } }, h("gxg-form-textarea", { grow: true, class: "prompt__textarea", maxHeight: this.promptMaxHeight, placeholder: this._componentLocale.promptPlaceholder, onInput: this.textAreaInputHandler, onEnter: this.promptEnterHandler, disabled: this.processingUserMessage }), !this.userHasTyped ? (h("div", { class: {
+      } }, 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 ? (h("div", { class: {
         prompt__shortcuts: true
-      } }, h("span", { class: "prompt__shortcut" }, "Ctrl"), h("span", { class: "prompt__shortcut" }, "A"))) : null))));
+      } }, this.focusShortcuts.map((shortcut, i) => {
+      /* Up to three keys allowed*/
+      return i <= 2 ? (h("span", { class: "prompt__shortcut" }, shortcut)) : null;
+    }))) : null))));
   }
   static get assetsDirs() { return ["gx-ide-assets/ai-assistant"]; }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "messages": ["watchMessagesHandler"]
+  }; }
 };
 GxIdeTemplate.style = aiAssistantCss;
 

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

@@ -0,0 +1,71 @@
+import { r as registerInstance, h, g as getElement } from './index-0aa3977d.js';
+import { L as Locale } from './locale-e183487a.js';
+import { h as hiChar } from './helpers-91494352.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) {
+    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.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 (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 }, h("div", { class: "message__outer-wrapper" }, h("div", { class: {
+        "message__inner-wrapper": true
+      } }, h("div", { class: {
+        "message__caption": true,
+        "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))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/ai-message"]; }
+  get el() { return getElement(this); }
+};
+GxIdeAiMessage.style = aiMessageCss;
+
+export { GxIdeAiMessage as gx_ide_ai_message };

package/dist/esm/gx-ide-container_3.entry.js

@@ -0,0 +1,247 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-0aa3977d.js';
+import { s as state } from './store-eca88b9a.js';
+
+const containerCss = ":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{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block;height:100%;box-sizing:border-box}.container{display:grid;height:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box}.heading,.content,.footer,.footer-above{padding:var(--gxg-container--padding)}.container--padding-s{--gxg-container--padding:var(--spacing-comp-02)}.container--padding-m{--gxg-container--padding:var(--spacing-comp-03)}.container--padding-l{--gxg-container--padding:var(--spacing-comp-04)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.container--overflow-hidden-y{overflow-y:hidden}.heading{display:flex;flex-direction:column;gap:var(--gxg-container--padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.heading--inactive{color:var(--gxg-color--disabled)}.heading--padding-top{padding:var(--gxg-container--padding) 0 0 0}.heading--slimmer{padding-top:var(--spacing-comp-02);padding-bottom:var(--spacing-comp-02)}.heading--form-text-height .heading__title{min-height:var(--gxg-form-text-height);justify-content:center}.heading--flex-row{flex-direction:row;align-items:center;justify-content:center}.content{overflow-x:auto;display:flex;flex-direction:column;gap:var(--gx-ide-form-items-gap);box-sizing:border-box;cursor:initial}.content::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.content::-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}.content::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}.content--no-padding{padding:0}.content--no-border-top{border-top:none}.content--flex{display:flex}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.content--border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--only-content{grid-template-rows:1fr}.container--no-header:not(.container--only-content){grid-template-rows:1fr auto}.container--no-footer:not(.container--only-content){grid-template-rows:auto 1fr}.footer-above{border-top:1px solid var(--gx-ide-container-border-color)}.footer-above--no-border-top{border-top:0}.footer-above--slimmer{padding-top:var(--spacing-comp-02);padding-bottom:var(--spacing-comp-02)}.footer-above--no-padding{padding:0}.footer{display:flex;gap:var(--gxg-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gxg-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}.footer--slimmer{padding-top:var(--spacing-comp-02);padding-bottom:var(--spacing-comp-02)}.footer--subtle-shadow{box-shadow:rgba(var(--color-shadow--rgb), 0.1) 0px 4px 16px, rgba(var(--color-shadow--rgb), 0.05) 0px 8px 32px}";
+
+const GxIdeContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.headingClasses = () => {
+      var _a;
+      return {
+        "heading": true,
+        "heading--inactive": this.inactiveTitle,
+        "heading--slimmer": this.titleType === "secondary",
+        "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
+        [`heading--justify-${this.headingJustify}`]: true,
+        "heading--no-padding": this.noHeadingPadding,
+        "heading--padding-top": this.headingPaddingTop && ((_a = this.containerTitle) === null || _a === void 0 ? void 0 : _a.length) > 0,
+        "heading--form-text-height": this.titleHeightAsInput,
+        "heading--flex-row": this.flexRow
+      };
+    };
+    this.contentClasses = () => {
+      return {
+        "content": true,
+        "content--flex": this.flexContent,
+        "content--no-padding": this.noContentPadding,
+        "content--no-gap": this.noContentGap,
+        "content--no-border-top": this.noContentBorderTop,
+        "content--border-end": this.contentBorderEnd,
+        [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
+        [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
+      };
+    };
+    this.aboveFooter = () => {
+      return this.hasAboveFooterSlot ? (h("footer", { class: {
+          "footer-above": true,
+          "footer-above--no-border-top": this.noBorderAboveFooter,
+          "footer-above--no-padding": this.noAboveFooterPadding,
+          "footer-above--slimmer": this.slimmerFooter
+        } }, h("slot", { name: "footer-above" }))) : null;
+    };
+    this.footer = () => {
+      return this.hasFooterSlot ? (h("footer", { class: {
+          "footer": true,
+          "footer--no-border": this.hasOnlyFooter ||
+            !this.hasSlottedContent ||
+            this.noBorderFooter,
+          [`footer--justify-${this.footerJustify}`]: true,
+          [`footer--justify-${this.footerJustify}`]: true,
+          "footer--no-padding": this.noFooterPadding,
+          "footer--slimmer": this.slimmerFooter,
+          "footer--subtle-shadow": this.footerSubtleShadow
+        } }, h("div", { class: "footer__start" }, h("slot", { name: "footer-start" })), h("div", { class: "footer__end" }, h("slot", { name: "footer-end" })))) : null;
+    };
+    this.inactiveTitle = false;
+    this.containerTitle = undefined;
+    this.titleType = "primary";
+    this.displayBorder = false;
+    this.displayBorderTop = false;
+    this.displayBorderEnd = false;
+    this.displayBorderBottom = false;
+    this.displayBorderStart = false;
+    this.sectionsPadding = "m";
+    this.titleAlignment = "center";
+    this.noHeadingBorder = false;
+    this.noHeadingPadding = false;
+    this.headingPaddingTop = false;
+    this.headingJustify = "center";
+    this.titleHeightAsInput = false;
+    this.flexRow = false;
+    this.flexContent = false;
+    this.noContentBorderTop = false;
+    this.noContentPadding = false;
+    this.noContentGap = false;
+    this.alignItems = undefined;
+    this.justifyContent = undefined;
+    this.contentBorderEnd = false;
+    this.slimmerAboveFooter = false;
+    this.noAboveFooterPadding = false;
+    this.noBorderAboveFooter = false;
+    this.slimmerFooter = false;
+    this.noFooterPadding = false;
+    this.footerJustify = "end";
+    this.noBorderFooter = false;
+    this.footerSubtleShadow = false;
+    this.hasHeaderSlot = false;
+    this.hasSlottedContent = false;
+    this.hasFooterSlot = false;
+    this.hasAboveFooterSlot = false;
+    this.hasOnlyHeading = false;
+    this.hasOnlyContent = false;
+    this.hasOnlyFooter = false;
+  }
+  // 4.PUBLIC PROPERTY API //
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  componentWillLoad() {
+    this.evaluateSlots();
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
+  evaluateSlots() {
+    // header
+    const headerSlot = this.el.querySelectorAll(':scope > [slot="header"]');
+    if (headerSlot.length) {
+      this.hasHeaderSlot = true;
+    }
+    // content
+    const slottedContent = this.el.querySelectorAll(":scope >  :not([slot])");
+    if (slottedContent.length) {
+      this.hasSlottedContent = true;
+    }
+    // footer
+    const footerAboveSlot = this.el.querySelectorAll(':scope >  [slot="footer-above"]');
+    const footerStartSlot = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
+    const footerEndSlot = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
+    if (footerStartSlot.length || footerEndSlot.length) {
+      this.hasFooterSlot = true;
+    }
+    if (footerAboveSlot.length) {
+      this.hasAboveFooterSlot = true;
+    }
+  }
+  evaluateSections() {
+    // has only heading
+    if (!this.hasSlottedContent &&
+      !this.hasFooterSlot &&
+      !this.hasAboveFooterSlot) {
+      this.hasOnlyHeading = true;
+    }
+    // has only content
+    if (this.hasSlottedContent &&
+      !this.containerTitle &&
+      !this.hasHeaderSlot &&
+      !this.hasAboveFooterSlot &&
+      !this.hasFooterSlot) {
+      this.hasOnlyContent = true;
+    }
+    // has only footer
+    if (!this.hasSlottedContent &&
+      !this.containerTitle &&
+      !this.hasAboveFooterSlot) {
+      this.hasOnlyFooter = true;
+    }
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    this.evaluateSections();
+    const result = [
+      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gx-ide-title", { class: "heading__title", type: this.titleType, alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
+      this.hasSlottedContent ? (h("div", { class: this.contentClasses(), part: "content" }, h("slot", null))) : null,
+      this.aboveFooter(),
+      this.footer()
+    ];
+    return (h(Host, null, h("div", { class: {
+        "container": true,
+        [`container--padding-${this.sectionsPadding}`]: true,
+        "container--display-border": this.displayBorder,
+        "container--display-border-top": this.displayBorderTop,
+        "container--display-border-end": this.displayBorderEnd,
+        "container--display-border-bottom": this.displayBorderBottom,
+        "container--display-border-start": this.displayBorderStart,
+        "container--overflow-hidden-y": this.footerSubtleShadow,
+        "container--only-content": this.hasOnlyContent,
+        "container--no-header": !this.hasHeaderSlot && !this.containerTitle,
+        "container--no-footer": !this.hasFooterSlot
+      } }, result)));
+  }
+  get el() { return getElement(this); }
+};
+GxIdeContainer.style = containerCss;
+
+const titleCss$1 = ":host{--gx-ide-title-padding:var(--gx-ide-container--padding, --spacing-comp-03);display:flex;flex-direction:column;color:var(--gx-ide-component-text-color);font-family:var(--font-family-primary);line-height:1.6em;background-color:transparent;padding:0}:host(.alignment--start){align-items:start}:host(.alignment--center){align-items:center}:host(.alignment--start){text-align:start}:host([padding]){padding:var(--gx-ide-title-padding)}:host([no-padding-bottom]){padding-bottom:0}:host([border]){border-bottom:1px solid var(--gx-ide-container-border-color)}:host(.title-type--secondary){color:var(--gray-06)}";
+
+const GxIdeTitle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.titleCaption = undefined;
+    this.type = "primary";
+    this.alignment = "start";
+    this.padding = false;
+    this.noPaddingBottom = false;
+    this.border = false;
+  }
+  componentWillLoad() {
+    if (this.type === "primary") {
+      this.geminiType = "title-04";
+    }
+    else if (this.type === "secondary") {
+      this.geminiType = "title-05";
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        [`alignment--${this.alignment}`]: true,
+        [`title-type--${this.type}`]: true
+      } }, h("gxg-title", { type: this.geminiType }, h("slot", null))));
+  }
+};
+GxIdeTitle.style = titleCss$1;
+
+const titleCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}: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 h1,:host h2,:host h3,:host h4,:host h5{margin:0;color:inherit;background-color:transparent}:host([alignment=start]) h1,:host([alignment=start]) h2,:host([alignment=start]) h3,:host([alignment=start]) h4,:host([alignment=start]) h5{text-align:start}:host([alignment=center]) h1,:host([alignment=center]) h2,:host([alignment=center]) h3,:host([alignment=center]) h4,:host([alignment=center]) h5{text-align:center}:host([alignment=end]) h1,:host([alignment=end]) h2,:host([alignment=end]) h3,:host([alignment=end]) h4,:host([alignment=end]) h5{text-align:end}:host(.large) .gxg-title-01{font-size:var(--font-size-xl)}:host(.large) .gxg-title-02{font-size:var(--font-size-lg)}:host(.large) .gxg-title-03{font-size:var(--font-size-lg)}:host(.large) .gxg-title-04{font-size:var(--font-size-xl)}:host(.large) .gxg-title-05{font-size:var(--font-size-lg)}";
+
+const GxgTitle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Title type
+     */
+    this.type = "title-01";
+    /**
+     * Title type
+     */
+    this.alignment = "start";
+  }
+  titleType() {
+    let title;
+    switch (this.type) {
+      case "title-01":
+        title = (h("h1", { class: "gxg-title-01", part: "title" }, h("slot", null)));
+        break;
+      case "title-02":
+        title = (h("h2", { class: "gxg-title-02", part: "title" }, h("slot", null)));
+        break;
+      case "title-03":
+        title = (h("h3", { class: "gxg-title-03", part: "title" }, h("slot", null)));
+        break;
+      case "title-04":
+        title = (h("h4", { class: "gxg-title-04", part: "title" }, h("slot", null)));
+        break;
+      case "title-05":
+        title = (h("h5", { class: "gxg-title-05", part: "title" }, h("slot", null)));
+        break;
+      default:
+        title = (h("h1", { class: "gxg-title-06", part: "title" }, h("slot", null)));
+    }
+    return title;
+  }
+  render() {
+    return h(Host, { class: { large: state.large } }, this.titleType(), " ");
+  }
+};
+GxgTitle.style = titleCss;
+
+export { GxIdeContainer as gx_ide_container, GxIdeTitle as gx_ide_title, GxgTitle as gxg_title };