@genexus/genexus-ide-ui 1.1.4 → 1.1.5

package/dist/collection/components/chat/chat-container/chat-container.js

@@ -0,0 +1,218 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GxIdeChatContainer_menuItems, _GxIdeChatContainer_componentLocale, _GxIdeChatContainer_showMenuHandler, _GxIdeChatContainer_menuExpandedChangeHandler, _GxIdeChatContainer_copyConversationHandler, _GxIdeChatContainer_deleteConversationHandler;
+import { Host, h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+import { Locale } from "../../../common/locale";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "utils/typography",
+    "chameleon/scrollbar",
+    "components/button",
+    "components/dropdown",
+    "components/icon",
+    "utils/elevation"
+];
+const COPY_ICON = getIconPath({
+    category: "system",
+    name: "copy",
+    colorType: "primary"
+});
+const DELETE_ICON = getIconPath({
+    category: "system",
+    name: "delete-outlined",
+    colorType: "primary"
+});
+const CONVERSATION_ICON = getIconPath({
+    category: "objects",
+    name: "conversational-flows"
+});
+const MORE_HORIZONTAL_ICON = getIconPath({
+    category: "system",
+    name: "more-horizontal",
+    colorType: "neutral"
+});
+export class GxIdeChatContainer {
+    constructor() {
+        _GxIdeChatContainer_menuItems.set(this, [
+            { type: "slot", id: "delete-chat-button" },
+            { type: "slot", id: "copy-chat-button" }
+        ]);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeChatContainer_componentLocale.set(this, void 0);
+        _GxIdeChatContainer_showMenuHandler.set(this, () => {
+            this.menuIsExpanded = true;
+        });
+        _GxIdeChatContainer_menuExpandedChangeHandler.set(this, (event) => {
+            this.menuIsExpanded = event.detail;
+        });
+        _GxIdeChatContainer_copyConversationHandler.set(this, () => {
+            if (this.copyConversationCallback) {
+                this.copyConversationCallback();
+                this.menuIsExpanded = false;
+            }
+        });
+        _GxIdeChatContainer_deleteConversationHandler.set(this, () => {
+            if (this.deleteConversationCallback) {
+                this.deleteConversationCallback();
+                this.menuIsExpanded = false;
+            }
+        });
+        this.displayConversationCopiedMessage = false;
+        this.menuIsExpanded = false;
+        this.chatTitle = undefined;
+        this.copyConversationCallback = undefined;
+        this.deleteConversationCallback = undefined;
+        this.displayWelcomeScreen = false;
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeChatContainer_componentLocale, await Locale.getComponentStrings(this.el), "f");
+    }
+    /**
+     * It will display a feedback message that the conversation has been copied
+     */
+    async showCopyConversationMessage() {
+        this.displayConversationCopiedMessage = true;
+        setTimeout(() => {
+            this.displayConversationCopiedMessage = false;
+        }, 2000);
+    }
+    render() {
+        const renderHeader = this.chatTitle ||
+            this.copyConversationCallback ||
+            this.deleteConversationCallback;
+        const renderButtonsGroup = this.copyConversationCallback || this.deleteConversationCallback;
+        return (h(Host, { class: {
+                "chat-container": true,
+                "with-header": !!renderHeader
+            } }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, renderHeader && (h("header", { class: "header tiny-semi-bold-l" }, this.chatTitle && this.chatTitle, renderButtonsGroup && (h("ch-action-menu-render", { class: "dropdown", blockAlign: "inside-start", inlineAlign: "inside-end", model: __classPrivateFieldGet(this, _GxIdeChatContainer_menuItems, "f"), expanded: this.menuIsExpanded, onExpandedChange: __classPrivateFieldGet(this, _GxIdeChatContainer_menuExpandedChangeHandler, "f") }, h("button", { class: "button-tertiary button-icon-only", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_showMenuHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel }, h("ch-image", { class: "icon-md", src: MORE_HORIZONTAL_ICON })), this.copyConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-copy-chat", slot: "copy-chat-button", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_copyConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel }, h("ch-image", { class: "icon-md", src: COPY_ICON }), __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").copyConversationLabel)), this.deleteConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-delete-chat", slot: "delete-chat-button", onClick: __classPrivateFieldGet(this, _GxIdeChatContainer_deleteConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel, title: __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel }, h("ch-image", { class: "icon-md", src: DELETE_ICON }), __classPrivateFieldGet(this, _GxIdeChatContainer_componentLocale, "f").clearConversationLabel)))))), h("section", { class: "ch-chat-container" }, h("slot", null), this.displayConversationCopiedMessage && (h("div", { class: "chat-container__conversation-copied" }, h("div", { class: "chat-container__conversation-copied-wrapper" }, h("ch-image", { class: "icon-md", src: CONVERSATION_ICON }), h("p", { class: "body-regular-l" }, "conversation copied"))))))));
+    }
+    static get is() { return "gx-ide-chat-container"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chat-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chat-container.css"]
+        };
+    }
+    static get assetsDirs() { return ["gx-ide-assets/chat-container"]; }
+    static get properties() {
+        return {
+            "chatTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The chat title"
+                },
+                "attribute": "chat-title",
+                "reflect": false
+            },
+            "copyConversationCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true a button for copying the conversation will be render on the header"
+                }
+            },
+            "deleteConversationCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true a button for deleting the conversation will be render on the header"
+                }
+            },
+            "displayWelcomeScreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true a the welcome screen will be rendered"
+                },
+                "attribute": "display-welcome-screen",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayConversationCopiedMessage": {},
+            "menuIsExpanded": {}
+        };
+    }
+    static get methods() {
+        return {
+            "showCopyConversationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "It will display a feedback message that the conversation has been copied",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+_GxIdeChatContainer_menuItems = new WeakMap(), _GxIdeChatContainer_componentLocale = new WeakMap(), _GxIdeChatContainer_showMenuHandler = new WeakMap(), _GxIdeChatContainer_menuExpandedChangeHandler = new WeakMap(), _GxIdeChatContainer_copyConversationHandler = new WeakMap(), _GxIdeChatContainer_deleteConversationHandler = new WeakMap();
+//# sourceMappingURL=chat-container.js.map

package/dist/collection/components/chat/chat-container/chat-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-container.js","sourceRoot":"","sources":["../../../../src/components/chat/chat-container/chat-container.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Method,\n  State\n} from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { ActionMenuModel } from \"@genexus/chameleon-controls-library\";\n\nimport { Locale } from \"../../../common/locale\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"chameleon/scrollbar\",\n  \"components/button\",\n  \"components/dropdown\",\n  \"components/icon\",\n  \"utils/elevation\"\n];\n\nconst COPY_ICON = getIconPath({\n  category: \"system\",\n  name: \"copy\",\n  colorType: \"primary\"\n});\nconst DELETE_ICON = getIconPath({\n  category: \"system\",\n  name: \"delete-outlined\",\n  colorType: \"primary\"\n});\nconst CONVERSATION_ICON = getIconPath({\n  category: \"objects\",\n  name: \"conversational-flows\"\n});\nconst MORE_HORIZONTAL_ICON = getIconPath({\n  category: \"system\",\n  name: \"more-horizontal\",\n  colorType: \"neutral\"\n});\n\n@Component({\n  tag: \"gx-ide-chat-container\",\n  styleUrl: \"chat-container.scss\",\n  shadow: false,\n  assetsDirs: [\"gx-ide-assets/chat-container\"]\n})\nexport class GxIdeChatContainer {\n  #menuItems: ActionMenuModel = [\n    { type: \"slot\", id: \"delete-chat-button\" },\n    { type: \"slot\", id: \"copy-chat-button\" }\n  ];\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeChatContainerElement;\n\n  /**\n   * Coneration Copied\n   */\n  @State() displayConversationCopiedMessage: boolean = false;\n\n  /**\n   * Displays or hides the menu\n   */\n  @State() menuIsExpanded: boolean = false;\n\n  /**\n   * The chat title\n   */\n  @Prop() readonly chatTitle?: string;\n\n  /**\n   * If true a button for copying the conversation will be render on the header\n   */\n  @Prop() readonly copyConversationCallback: () => void;\n\n  /**\n   * If true a button for deleting the conversation will be render on the header\n   */\n  @Prop() readonly deleteConversationCallback: () => void;\n\n  /**\n   * If true a the welcome screen will be rendered\n   */\n  @Prop() readonly displayWelcomeScreen: boolean = false;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  /**\n   * It will display a feedback message that the conversation has been copied\n   */\n  @Method()\n  async showCopyConversationMessage() {\n    this.displayConversationCopiedMessage = true;\n    setTimeout(() => {\n      this.displayConversationCopiedMessage = false;\n    }, 2000);\n  }\n\n  #showMenuHandler = () => {\n    this.menuIsExpanded = true;\n  };\n\n  #menuExpandedChangeHandler = (event: CustomEvent<boolean>) => {\n    this.menuIsExpanded = event.detail;\n  };\n\n  #copyConversationHandler = () => {\n    if (this.copyConversationCallback) {\n      this.copyConversationCallback();\n      this.menuIsExpanded = false;\n    }\n  };\n  #deleteConversationHandler = () => {\n    if (this.deleteConversationCallback) {\n      this.deleteConversationCallback();\n      this.menuIsExpanded = false;\n    }\n  };\n\n  render() {\n    const renderHeader =\n      this.chatTitle ||\n      this.copyConversationCallback ||\n      this.deleteConversationCallback;\n\n    const renderButtonsGroup =\n      this.copyConversationCallback || this.deleteConversationCallback;\n    return (\n      <Host\n        class={{\n          \"chat-container\": true,\n          \"with-header\": !!renderHeader\n        }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          {renderHeader && (\n            <header class=\"header tiny-semi-bold-l\">\n              {this.chatTitle && this.chatTitle}\n              {renderButtonsGroup && (\n                <ch-action-menu-render\n                  class=\"dropdown\"\n                  blockAlign=\"inside-start\"\n                  inlineAlign=\"inside-end\"\n                  model={this.#menuItems}\n                  expanded={this.menuIsExpanded}\n                  onExpandedChange={this.#menuExpandedChangeHandler}\n                >\n                  <button\n                    class=\"button-tertiary button-icon-only\"\n                    onClick={this.#showMenuHandler}\n                    type=\"button\"\n                    aria-label={this.#componentLocale.showMenuAriaLabel}\n                    title={this.#componentLocale.showMenuAriaLabel}\n                  >\n                    <ch-image\n                      class=\"icon-md\"\n                      src={MORE_HORIZONTAL_ICON}\n                    ></ch-image>\n                  </button>\n                  {this.copyConversationCallback && (\n                    <button\n                      class=\"button-tertiary button-icon-and-text button-copy-chat\"\n                      slot=\"copy-chat-button\"\n                      onClick={this.#copyConversationHandler}\n                      type=\"button\"\n                      aria-label={\n                        this.#componentLocale.copyConversationAriaLabel\n                      }\n                      title={this.#componentLocale.copyConversationAriaLabel}\n                    >\n                      <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n                      {this.#componentLocale.copyConversationLabel}\n                    </button>\n                  )}\n                  {this.deleteConversationCallback && (\n                    <button\n                      class=\"button-tertiary button-icon-and-text button-delete-chat\"\n                      slot=\"delete-chat-button\"\n                      onClick={this.#deleteConversationHandler}\n                      type=\"button\"\n                      aria-label={\n                        this.#componentLocale.deleteConversationAriaLabel\n                      }\n                      title={this.#componentLocale.deleteConversationAriaLabel}\n                    >\n                      <ch-image class=\"icon-md\" src={DELETE_ICON}></ch-image>\n                      {this.#componentLocale.clearConversationLabel}\n                    </button>\n                  )}\n                </ch-action-menu-render>\n              )}\n            </header>\n          )}\n          <section class=\"ch-chat-container\">\n            <slot></slot>\n            {this.displayConversationCopiedMessage && (\n              <div class=\"chat-container__conversation-copied\">\n                <div class=\"chat-container__conversation-copied-wrapper\">\n                  <ch-image class=\"icon-md\" src={CONVERSATION_ICON}></ch-image>\n                  <p class=\"body-regular-l\">conversation copied</p>\n                </div>\n              </div>\n            )}\n          </section>\n          {/* <footer class=\"footer elevation-1\">footer</footer> */}\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/chat/chat-container/gx-ide-assets/chat-container/langs/chat-container.lang.en.json

@@ -0,0 +1,9 @@
+{
+  "componentName": "Chat Container",
+  "showMenuAriaLabel": "Show actions",
+  "copyConversationLabel": "Copy conversation",
+  "clearConversationLabel": "Clear conversation",
+  "copyResponseAriaLabel": "Copy response",
+  "sendPromptAriaLabel": "Send prompt",
+  "stopGeneratingAnswerAriaLabel": "Stop response"
+}

package/dist/collection/components/chat/chat-container/gx-ide-assets/chat-container/langs/chat-container.lang.ja.json

@@ -0,0 +1,9 @@
+{
+  "componentName": "Chat Container",
+  "showMenuAriaLabel": "Show actions",
+  "copyConversationLabel": "Copy conversation",
+  "clearConversationLabel": "Clear conversation",
+  "copyResponseAriaLabel": "Copy response",
+  "sendPromptAriaLabel": "Send prompt",
+  "stopGeneratingAnswerAriaLabel": "Stop response"
+}

package/dist/collection/components/chat/chat-container/gx-ide-assets/chat-container/langs/chat-container.lang.zh.json

@@ -0,0 +1,9 @@
+{
+  "componentName": "Chat Container",
+  "showMenuAriaLabel": "Show actions",
+  "copyConversationLabel": "Copy conversation",
+  "clearConversationLabel": "Clear conversation",
+  "copyResponseAriaLabel": "Copy response",
+  "sendPromptAriaLabel": "Send prompt",
+  "stopGeneratingAnswerAriaLabel": "Stop response"
+}

package/dist/collection/components/chat/chat-welcome/chat-welcome.css

@@ -0,0 +1,109 @@
+:host {
+  block-size: 100%;
+}
+
+.welcome-container {
+  --opacity: 1;
+  --translate-y: 0;
+  opacity: var(--opacity);
+  transform: translateY(var(--translate-y));
+  transition: all var(--transition-duration);
+  display: flex;
+  block-size: 100%;
+  grid-template-rows: max-content max-content;
+  flex-direction: column;
+  justify-content: space-between;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-size: contain;
+}
+.welcome-container.hidden {
+  --opacity: 0;
+  --translate-y: 4px;
+}
+
+.header {
+  --opacity: 0;
+  --translate-y: 3px;
+  transition: all var(--transition-duration) var(--transition-delay) cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateY(var(--translate-y));
+  opacity: var(--opacity);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mer-spacing--md);
+  align-items: center;
+  padding: var(--mer-spacing--md);
+}
+.header--visible {
+  --opacity: 1;
+  --translate-y: 0;
+}
+.header__circle {
+  inline-size: 55px;
+  block-size: 55px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  margin-block-end: -6px;
+}
+.header__title {
+  display: grid;
+  text-align: center;
+  margin: 0;
+  text-align: center;
+  white-space: pre-line;
+  line-height: 1.3;
+  font-weight: 600;
+  font-size: var(--font-size-header-h3);
+}
+.header__greeting {
+  line-height: 1.4;
+  text-align: center;
+  font-weight: 300;
+}
+
+.suggested-prompts {
+  --opacity: 1;
+  opacity: var(--opacity);
+  transition: opacity var(--transition-duration);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mer-spacing--md);
+  list-style: none;
+  margin: 0;
+  padding: var(--mer-spacing--md);
+}
+.suggested-prompts.hidden {
+  --opacity: 0;
+}
+.suggested-prompts__button {
+  opacity: 0;
+  transform: translateX(-3px);
+  animation: fadeInSuggestedPromptButton var(--mer-timing--regular) ease forwards;
+  animation-delay: var(--delay, 0s);
+  border: 0;
+  padding: var(--mer-spacing--sm);
+  border-radius: 30px;
+  font-size: 14px;
+  font-style: oblique;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--mer-spacing--xs);
+  background-color: #22334a;
+  font-weight: 100;
+}
+.suggested-prompts__button:hover {
+  background-color: #1a2b42;
+}
+
+@keyframes fadeInSuggestedPromptButton {
+  from {
+    opacity: 0;
+    transform: translateX(-3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/dist/collection/components/chat/chat-welcome/chat-welcome.js

@@ -0,0 +1,228 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeChatWelcome_componentLocale, _GxIdeChatWelcome_animationEntrance, _GxIdeChatWelcome_sendPromptToChat, _GxIdeChatWelcome_animationExit;
+/* eslint-disable @stencil-community/strict-mutable */
+import { Host, h, getAssetPath } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+import { Locale } from "../../../common/locale";
+const HEADER_ILLUSTRATION = getAssetPath(`./gx-ide-assets/chat-welcome/images/header-illustration.svg`);
+const AI_AVATAR = getAssetPath(`./gx-ide-assets/chat-welcome/images/ai-avatar-welcome.svg`);
+const HEADER_TRANSITION_DELAY = 100;
+const HEADER_TRANSITION_DURATION = 500;
+const SUGGESTED_PROMPT_BUTTON_INTERVAL = 200;
+const SUGGESTED_PROMPT_BUTTONS_DELAY = 500;
+const WELCOME_EXIT_DURATION = 100;
+const AI_ICON = getIconPath({
+    category: "system",
+    name: "assistant",
+    colorType: "primary"
+});
+const ARROW_RIGHT_ICON = getIconPath({
+    category: "system",
+    name: "arrow-right",
+    colorType: "primary"
+});
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/chat",
+    "components/icon",
+    "utils/typography"
+];
+export class GxIdeChatWelcome {
+    constructor() {
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeChatWelcome_componentLocale.set(this, void 0);
+        _GxIdeChatWelcome_animationEntrance.set(this, () => {
+            setTimeout(() => {
+                this.showHeader = true;
+                setTimeout(() => {
+                    this.showSuggestedPrompts = true;
+                }, SUGGESTED_PROMPT_BUTTONS_DELAY);
+            }, HEADER_TRANSITION_DELAY + HEADER_TRANSITION_DURATION);
+        });
+        _GxIdeChatWelcome_sendPromptToChat.set(this, async (e) => {
+            const prompt = e.currentTarget.dataset["prommpt"];
+            await __classPrivateFieldGet(this, _GxIdeChatWelcome_animationExit, "f").call(this);
+            this.suggestedPrompRequestedCallback(prompt);
+        });
+        _GxIdeChatWelcome_animationExit.set(this, async () => {
+            this.hideWelcome = true;
+            await new Promise(resolve => setTimeout(resolve, WELCOME_EXIT_DURATION));
+        });
+        this.showHeader = false;
+        this.showSuggestedPrompts = false;
+        this.hideWelcome = false;
+        this.welcomeTitle = undefined;
+        this.welcomeGreeting = undefined;
+        this.suggestedPrompts = undefined;
+        this.suggestedPrompRequestedCallback = undefined;
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeChatWelcome_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        // Set defaults
+        if (!this.welcomeTitle) {
+            this.welcomeTitle = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").welcomeTitle;
+        }
+        if (!this.welcomeGreeting) {
+            this.welcomeGreeting = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").welcomeGreeting;
+        }
+        if (!this.suggestedPrompts) {
+            this.suggestedPrompts = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").suggestedPrompts;
+        }
+    }
+    componentDidRender() {
+        if (!this.hideWelcome) {
+            __classPrivateFieldGet(this, _GxIdeChatWelcome_animationEntrance, "f").call(this);
+        }
+    }
+    /**
+     * It will exit the wellcome screen and remove it from the dom.
+     */
+    async exitWelcome() {
+        __classPrivateFieldGet(this, _GxIdeChatWelcome_animationExit, "f").call(this);
+    }
+    render() {
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: { "welcome-container": true, "hidden": this.hideWelcome }, style: {
+                "backgroundImage": `url(${HEADER_ILLUSTRATION})`,
+                "--transition-duration": `${WELCOME_EXIT_DURATION}ms`
+            } }, h("header", { class: { "header": true, "header--visible": this.showHeader }, style: {
+                "--transition-delay": `${HEADER_TRANSITION_DELAY}ms`,
+                "--transition-duration": `${HEADER_TRANSITION_DURATION}ms`
+            } }, h("span", { class: "header__circle", style: { backgroundImage: `url(${AI_AVATAR})` } }), h("h2", { class: "header__title" }, this.welcomeTitle), h("p", { class: "header__greeting" }, this.welcomeGreeting)), this.suggestedPrompts && this.showSuggestedPrompts && (h("ul", { class: "suggested-prompts" }, this.suggestedPrompts.map((prompt, i) => (h("li", { class: "suggested-prompts__item" }, h("button", { class: {
+                "suggested-prompts__button": true
+            }, onClick: __classPrivateFieldGet(this, _GxIdeChatWelcome_sendPromptToChat, "f"), style: {
+                "--delay": `${SUGGESTED_PROMPT_BUTTON_INTERVAL * i}ms`
+            }, "data-prommpt": prompt }, h("ch-image", { src: AI_ICON, class: "icon-md" }), prompt, h("ch-image", { src: ARROW_RIGHT_ICON, class: "icon-md" }))))))))));
+    }
+    static get is() { return "gx-ide-chat-welcome"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chat-welcome.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chat-welcome.css"]
+        };
+    }
+    static get assetsDirs() { return ["gx-ide-assets/chat-welcome"]; }
+    static get properties() {
+        return {
+            "welcomeTitle": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The welcome title, if not provided, the default title will be used."
+                },
+                "attribute": "welcome-title",
+                "reflect": false
+            },
+            "welcomeGreeting": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The welcome greeting description, if not provided, the default title will be used."
+                },
+                "attribute": "welcome-greeting",
+                "reflect": false
+            },
+            "suggestedPrompts": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The suggested prompts, if not provided, the default title will be used."
+                }
+            },
+            "suggestedPrompRequestedCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\n    prompt: string\n  ) => Promise<void>",
+                    "resolved": "(prompt: string) => Promise<void>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the user clicks on a suggested prompt button"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showHeader": {},
+            "showSuggestedPrompts": {},
+            "hideWelcome": {}
+        };
+    }
+    static get methods() {
+        return {
+            "exitWelcome": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "It will exit the wellcome screen and remove it from the dom.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+_GxIdeChatWelcome_componentLocale = new WeakMap(), _GxIdeChatWelcome_animationEntrance = new WeakMap(), _GxIdeChatWelcome_sendPromptToChat = new WeakMap(), _GxIdeChatWelcome_animationExit = new WeakMap();
+//# sourceMappingURL=chat-welcome.js.map

package/dist/collection/components/chat/chat-welcome/chat-welcome.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-welcome.js","sourceRoot":"","sources":["../../../../src/components/chat/chat-welcome/chat-welcome.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @stencil-community/strict-mutable */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  getAssetPath,\n  Method\n} from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\n\nconst HEADER_ILLUSTRATION = getAssetPath(\n  `./gx-ide-assets/chat-welcome/images/header-illustration.svg`\n);\nconst AI_AVATAR = getAssetPath(\n  `./gx-ide-assets/chat-welcome/images/ai-avatar-welcome.svg`\n);\n\nconst HEADER_TRANSITION_DELAY: number = 100;\nconst HEADER_TRANSITION_DURATION: number = 500;\nconst SUGGESTED_PROMPT_BUTTON_INTERVAL: number = 200;\nconst SUGGESTED_PROMPT_BUTTONS_DELAY: number = 500;\nconst WELCOME_EXIT_DURATION: number = 100;\n\nconst AI_ICON = getIconPath({\n  category: \"system\",\n  name: \"assistant\",\n  colorType: \"primary\"\n});\nconst ARROW_RIGHT_ICON = getIconPath({\n  category: \"system\",\n  name: \"arrow-right\",\n  colorType: \"primary\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/chat\",\n  \"components/icon\",\n  \"utils/typography\"\n];\n\n@Component({\n  tag: \"gx-ide-chat-welcome\",\n  styleUrl: \"chat-welcome.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/chat-welcome\"]\n})\nexport class GxIdeChatWelcome {\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeChatWelcomeElement;\n\n  /**\n   * When true, it will display the welcome elements (title, greeting, and buttons)\n   */\n  @State() showHeader: boolean = false;\n\n  /**\n   * When true, it will display the suggested prompts buttons\n   */\n  @State() showSuggestedPrompts: boolean = false;\n\n  /**\n   * When true, it will hide entire welcome layout\n   */\n  @State() hideWelcome: boolean = false;\n\n  /**\n   * The welcome title, if not provided, the default title will be used.\n   */\n  @Prop({ mutable: true }) welcomeTitle?: string;\n\n  /**\n   * The welcome greeting description, if not provided, the default title will be used.\n   */\n  @Prop({ mutable: true }) welcomeGreeting?: string;\n\n  /**\n   * The suggested prompts, if not provided, the default title will be used.\n   */\n  @Prop({ mutable: true }) suggestedPrompts?: string[];\n\n  /**\n   * Fired when the user clicks on a suggested prompt button\n   */\n  @Prop() readonly suggestedPrompRequestedCallback: (\n    prompt: string\n  ) => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n    // Set defaults\n    if (!this.welcomeTitle) {\n      this.welcomeTitle = this.#componentLocale.welcomeTitle;\n    }\n    if (!this.welcomeGreeting) {\n      this.welcomeGreeting = this.#componentLocale.welcomeGreeting;\n    }\n    if (!this.suggestedPrompts) {\n      this.suggestedPrompts = this.#componentLocale.suggestedPrompts;\n    }\n  }\n\n  componentDidRender() {\n    if (!this.hideWelcome) {\n      this.#animationEntrance();\n    }\n  }\n\n  /**\n   * It will exit the wellcome screen and remove it from the dom.\n   */\n  @Method()\n  async exitWelcome() {\n    this.#animationExit();\n  }\n\n  #animationEntrance = () => {\n    setTimeout(() => {\n      this.showHeader = true;\n      setTimeout(() => {\n        this.showSuggestedPrompts = true;\n      }, SUGGESTED_PROMPT_BUTTONS_DELAY);\n    }, HEADER_TRANSITION_DELAY + HEADER_TRANSITION_DURATION);\n  };\n\n  #sendPromptToChat = async (e: MouseEvent) => {\n    const prompt = (e.currentTarget as HTMLButtonElement).dataset[\"prommpt\"];\n    await this.#animationExit();\n    this.suggestedPrompRequestedCallback(prompt);\n  };\n\n  #animationExit = async (): Promise<void> => {\n    this.hideWelcome = true;\n    await new Promise(resolve => setTimeout(resolve, WELCOME_EXIT_DURATION));\n  };\n\n  render() {\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div\n          class={{ \"welcome-container\": true, \"hidden\": this.hideWelcome }}\n          style={{\n            \"backgroundImage\": `url(${HEADER_ILLUSTRATION})`,\n            \"--transition-duration\": `${WELCOME_EXIT_DURATION}ms`\n          }}\n        >\n          <header\n            class={{ \"header\": true, \"header--visible\": this.showHeader }}\n            style={{\n              \"--transition-delay\": `${HEADER_TRANSITION_DELAY}ms`,\n              \"--transition-duration\": `${HEADER_TRANSITION_DURATION}ms`\n            }}\n          >\n            <span\n              class=\"header__circle\"\n              style={{ backgroundImage: `url(${AI_AVATAR})` }}\n            ></span>\n            <h2 class=\"header__title\">{this.welcomeTitle}</h2>\n            <p class=\"header__greeting\">{this.welcomeGreeting}</p>\n          </header>\n\n          {this.suggestedPrompts && this.showSuggestedPrompts && (\n            <ul class=\"suggested-prompts\">\n              {this.suggestedPrompts.map((prompt, i) => (\n                <li class=\"suggested-prompts__item\">\n                  <button\n                    class={{\n                      \"suggested-prompts__button\": true\n                    }}\n                    onClick={this.#sendPromptToChat}\n                    style={{\n                      \"--delay\": `${SUGGESTED_PROMPT_BUTTON_INTERVAL * i}ms`\n                    }}\n                    data-prommpt={prompt}\n                  >\n                    <ch-image src={AI_ICON} class=\"icon-md\"></ch-image>\n                    {prompt}\n                    <ch-image src={ARROW_RIGHT_ICON} class=\"icon-md\"></ch-image>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/chat/chat-welcome/gx-ide-assets/chat-welcome/helpers.js

@@ -0,0 +1,3 @@
+import { h } from "@stencil/core";
+export const aiIconBorder = (h("svg", { class: "header__circle-border", xmlns: "http://www.w3.org/2000/svg", width: "56", height: "55", viewBox: "0 0 56 55", fill: "none" }, h("path", { d: "M55.5 27.5C55.5 42.6878 43.1878 55 28 55C12.8122 55 0.5 42.6878 0.5 27.5C0.5 12.3122 12.8122 0 28 0C43.1878 0 55.5 12.3122 55.5 27.5ZM2.7 27.5C2.7 41.4728 14.0272 52.8 28 52.8C41.9728 52.8 53.3 41.4728 53.3 27.5C53.3 13.5272 41.9728 2.2 28 2.2C14.0272 2.2 2.7 13.5272 2.7 27.5Z", fill: "url(#paint0_linear_311_13158)", "fill-opacity": "0.9" }), h("defs", null, h("linearGradient", { id: "paint0_linear_311_13158", x1: "73.4348", y1: "9.56522", x2: "28", y2: "55", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": "#00CCFF" }), h("stop", { offset: "1", "stop-color": "#CF7AFF" })))));
+//# sourceMappingURL=helpers.js.map

package/dist/collection/components/chat/chat-welcome/gx-ide-assets/chat-welcome/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../../../../src/components/chat/chat-welcome/gx-ide-assets/chat-welcome/helpers.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,MAAM,YAAY,GAAmB,CAC1C,WACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM;IAEX,YACE,CAAC,EAAC,uRAAuR,EACzR,IAAI,EAAC,+BAA+B,kBACvB,KAAK,GAClB;IACF;QACE,sBACE,EAAE,EAAC,yBAAyB,EAC5B,EAAE,EAAC,SAAS,EACZ,EAAE,EAAC,SAAS,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,aAAa,EAAC,gBAAgB;YAE9B,0BAAiB,SAAS,GAAG;YAC7B,YAAM,MAAM,EAAC,GAAG,gBAAY,SAAS,GAAG,CACzB,CACZ,CACH,CACP,CAAC","sourcesContent":["import { h } from \"@stencil/core\";\n\nexport const aiIconBorder: SVGPathElement = (\n  <svg\n    class=\"header__circle-border\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"56\"\n    height=\"55\"\n    viewBox=\"0 0 56 55\"\n    fill=\"none\"\n  >\n    <path\n      d=\"M55.5 27.5C55.5 42.6878 43.1878 55 28 55C12.8122 55 0.5 42.6878 0.5 27.5C0.5 12.3122 12.8122 0 28 0C43.1878 0 55.5 12.3122 55.5 27.5ZM2.7 27.5C2.7 41.4728 14.0272 52.8 28 52.8C41.9728 52.8 53.3 41.4728 53.3 27.5C53.3 13.5272 41.9728 2.2 28 2.2C14.0272 2.2 2.7 13.5272 2.7 27.5Z\"\n      fill=\"url(#paint0_linear_311_13158)\"\n      fill-opacity=\"0.9\"\n    />\n    <defs>\n      <linearGradient\n        id=\"paint0_linear_311_13158\"\n        x1=\"73.4348\"\n        y1=\"9.56522\"\n        x2=\"28\"\n        y2=\"55\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stop-color=\"#00CCFF\" />\n        <stop offset=\"1\" stop-color=\"#CF7AFF\" />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n"]}