npm - @genexus/genexus-ide-ui - Versions diffs - 1.1.9 → 1.1.10 - Mend

@genexus/genexus-ide-ui 1.1.9 → 1.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/cjs/gx-ide-chat-container_2.cjs.entry.js CHANGED Viewed

@@ -118,7 +118,7 @@ const GxIdeChatContainer = class {
 _GxIdeChatContainer_menuItems = new WeakMap(), _GxIdeChatContainer_componentLocale = new WeakMap(), _GxIdeChatContainer_showMenuHandler = new WeakMap(), _GxIdeChatContainer_menuExpandedChangeHandler = new WeakMap(), _GxIdeChatContainer_copyConversationHandler = new WeakMap(), _GxIdeChatContainer_deleteConversationHandler = new WeakMap();
 GxIdeChatContainer.style = chatContainerCss;
-const chatWelcomeCss = ":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)}}";
+const chatWelcomeCss = ":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:44px;font-size:14px;font-style:oblique;cursor:pointer;display:flex;align-items:center;gap:var(--mer-spacing--xs);background-color:#22334a;font-weight:100;max-inline-size:300px}.suggested-prompts__button:hover{background-color:#1a2b42}.suggested-prompts__icon{flex-shrink:0}@keyframes fadeInSuggestedPromptButton{from{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:translateX(0)}}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -225,7 +225,7 @@ const GxIdeChatWelcome = class {
                 "suggested-prompts__button": true
             }, onClick: __classPrivateFieldGet(this, _GxIdeChatWelcome_sendPromptToChat, "f"), style: {
                 "--delay": `${SUGGESTED_PROMPT_BUTTON_INTERVAL * i}ms`
-            }, "data-prommpt": prompt }, index.h("ch-image", { src: AI_ICON, class: "icon-md" }), prompt, index.h("ch-image", { src: ARROW_RIGHT_ICON, class: "icon-md" }))))))))));
+            }, "data-prommpt": prompt }, index.h("ch-image", { src: AI_ICON, class: "icon-md suggested-prompts__icon" }), prompt, index.h("ch-image", { src: ARROW_RIGHT_ICON, class: "icon-md suggested-prompts__icon" }))))))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/chat-welcome"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/gx-ide-chat-container_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-chat-container.gx-ide-chat-welcome.entry.cjs.js","mappings":"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","names":["CSS_BUNDLES","getIconPath","__classPrivateFieldSet","Locale","h","Host","__classPrivateFieldGet","getAssetPath"],"sources":["src/components/chat/chat-container/chat-container.scss?tag=gx-ide-chat-container","src/components/chat/chat-container/chat-container.tsx","src/components/chat/chat-welcome/chat-welcome.scss?tag=gx-ide-chat-welcome&encapsulation=shadow","src/components/chat/chat-welcome/chat-welcome.tsx"],"sourcesContent":[".chat-container {\n background-color: var(\n --elevation-background-color,\n --mer-surface__elevation--01\n );\n display: grid;\n block-size: 100%;\n overflow: auto;\n grid-template-rows: 1fr;\n position: relative;\n --chat-common-border-radius: var(--mer-spacing--2xs);\n}\n\n.chat-container.with-header {\n grid-template-rows: max-content 1fr;\n}\n\n.section {\n display: contents;\n}\n\n.header {\n padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs)\n var(--mer-spacing--2xs) var(--mer-spacing--sm);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--mer-spacing--sm);\n color: var(--mer-text__bright);\n border-block-end: var(--mer-border__width--sm) solid\n var(--color-border-surface-on-elevation-01, #333d47);\n\n .button-copy-chat,\n .button-delete-chat {\n --control__border-color: transparent !important;\n }\n\n .button-delete-chat {\n &:hover {\n filter: brightness(1.3);\n }\n &:active {\n filter: brightness(0.8);\n }\n }\n}\n\n.ch-chat-container {\n overflow: auto;\n position: relative;\n display: grid;\n}\n\n// - - - - - - - - - - - - - -\n// other\n// - - - - - - - - - - - - - -\n\n.chat-container__conversation-copied {\n position: absolute;\n z-index: 1;\n inline-size: 100%;\n block-size: 100%;\n background: rgba(22, 22, 23, 0.75);\n backdrop-filter: saturate(180%) blur(20px);\n display: grid;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 32px;\n --mer-icon__box--md: 18px;\n pointer-events: none;\n overflow: hidden;\n animation: fadeIn 100ms ease-in-out forwards;\n opacity: 0;\n}\n\n.chat-container__conversation-copied-wrapper {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n position: relative;\n inset-block-start: 4px;\n opacity: 0;\n animation: liftUp var(--mer-timing--fast) ease-in-out forwards;\n animation-delay: var(--mer-timing--fast);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes liftUp {\n from {\n opacity: 0;\n inset-block-start: 4px;\n }\n to {\n opacity: 1;\n inset-block-start: 0;\n }\n}\n\n::selection {\n color: #00ccff;\n background: #22334a;\n}\n\n// The following styles shoul be moved over to Mercury\n\n.chat::part(code-block-header__copy) {\n --copy-text-opacity: 0;\n --copy-text-translate-x: 6px;\n opacity: var(--copy-text-opacity);\n pointer-events: none;\n transform: translateX(var(--copy-text-translate-x));\n transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;\n font-size: 12px;\n}\n.chat::part(code-block-header__copy-copied) {\n --copy-button-pointer-events: none !important;\n --copy-text-opacity: 1;\n --copy-text-translate-x: 0;\n}\n.chat::part(code-block-header) {\n align-items: center;\n display: flex;\n gap: 8px;\n}\n","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",":host {\n block-size: 100%;\n}\n\n$sharedPadding: var(--mer-spacing--md);\n\n.welcome-container {\n --opacity: 1;\n --translate-y: 0;\n opacity: var(--opacity);\n transform: translateY(var(--translate-y));\n transition: all var(--transition-duration);\n display: flex;\n block-size: 100%;\n grid-template-rows: max-content max-content;\n flex-direction: column;\n justify-content: space-between;\n background-repeat: no-repeat;\n background-size: cover;\n background-size: contain;\n\n &.hidden {\n --opacity: 0;\n --translate-y: 4px;\n }\n}\n\n%absolute-centered {\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n}\n\n.header {\n --opacity: 0;\n --translate-y: 3px;\n transition: all var(--transition-duration) var(--transition-delay)\n cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateY(var(--translate-y));\n opacity: var(--opacity);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n align-items: center;\n padding: $sharedPadding;\n\n &--visible {\n --opacity: 1;\n --translate-y: 0;\n }\n\n &__circle {\n $circleSize: 55px;\n inline-size: $circleSize;\n block-size: $circleSize;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin-block-end: -6px;\n }\n\n &__title {\n display: grid;\n text-align: center;\n margin: 0;\n text-align: center;\n white-space: pre-line;\n line-height: 1.3;\n font-weight: 600;\n font-size: var(--font-size-header-h3);\n }\n\n &__greeting {\n line-height: 1.4;\n text-align: center;\n font-weight: 300;\n }\n}\n\n.suggested-prompts {\n --opacity: 1;\n opacity: var(--opacity);\n transition: opacity var(--transition-duration);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n list-style: none;\n margin: 0;\n padding: $sharedPadding;\n\n &.hidden {\n --opacity: 0;\n }\n\n &__item {\n }\n\n &__button {\n opacity: 0;\n transform: translateX(-3px);\n animation: fadeInSuggestedPromptButton var(--mer-timing--regular) ease\n forwards;\n animation-delay: var(--delay, 0s);\n\n border: 0;\n padding: var(--mer-spacing--sm);\n border-radius: 30px;\n font-size: 14px; // TODO : Use a token when available\n font-style: oblique;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--xs);\n background-color: #22334a; // TODO : Use a token when available\n font-weight: 100;\n\n &:hover {\n background-color: #1a2b42;\n }\n }\n}\n\n@keyframes fadeInSuggestedPromptButton {\n from {\n opacity: 0;\n transform: translateX(-3px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","/ 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"],"version":3}
1	+ {"file":"gx-ide-chat-container.gx-ide-chat-welcome.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,urEAAurE;;;;;;;;;;;;;;;;;;;ACchtE,MAAMA,aAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,iBAAiB;IACjB,iBAAiB;CAClB,CAAC;AAEF,MAAM,SAAS,GAAGC,0BAAW,CAAC;IAC5B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AACH,MAAM,WAAW,GAAGA,0BAAW,CAAC;IAC9B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,iBAAiB;IACvB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AACH,MAAM,iBAAiB,GAAGA,0BAAW,CAAC;IACpC,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAC;AACH,MAAM,oBAAoB,GAAGA,0BAAW,CAAC;IACvC,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,iBAAiB;IACvB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;MAQU,kBAAkB;;;QAC7B,wCAA8B;YAC5B,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,oBAAoB,EAAE;YAC1C,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,kBAAkB,EAAE;SACzC,EAAC;;;;;QAMF,sDAAsB;QAiDtB,8CAAmB;YACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B,EAAC;QAEF,wDAA6B,CAAC,KAA2B;YACvD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;SACpC,EAAC;QAEF,sDAA2B;YACzB,IAAI,IAAI,CAAC,wBAAwB,EAAE;gBACjC,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,EAAC;QACF,wDAA6B;YAC3B,IAAI,IAAI,CAAC,0BAA0B,EAAE;gBACnC,IAAI,CAAC,0BAA0B,EAAE,CAAC;gBAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,EAAC;gDA7DmD,KAAK;8BAKvB,KAAK;;;;oCAoBS,KAAK;;IAEtD,MAAM,iBAAiB;QACrBC,yBAAA,IAAI,uCAAoB,MAAMC,aAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;KACnE;;;;IAMD,MAAM,2BAA2B;QAC/B,IAAI,CAAC,gCAAgC,GAAG,IAAI,CAAC;QAC7C,UAAU,CAAC;YACT,IAAI,CAAC,gCAAgC,GAAG,KAAK,CAAC;SAC/C,EAAE,IAAI,CAAC,CAAC;KACV;IAuBD,MAAM;QACJ,MAAM,YAAY,GAChB,IAAI,CAAC,SAAS;YACd,IAAI,CAAC,wBAAwB;YAC7B,IAAI,CAAC,0BAA0B,CAAC;QAElC,MAAM,kBAAkB,GACtB,IAAI,CAAC,wBAAwB,IAAI,IAAI,CAAC,0BAA0B,CAAC;QACnE,QACEC,QAACC,UAAI,IACH,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,aAAa,EAAE,CAAC,CAAC,YAAY;aAC9B,IAEDD,sBAAU,KAAK,EAAEJ,aAAW,GAAa,EACzCI,qBAAS,KAAK,EAAC,SAAS,IACrB,YAAY,KACXA,oBAAQ,KAAK,EAAC,yBAAyB,IACpC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAChC,kBAAkB,KACjBA,mCACE,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,cAAc,EACzB,WAAW,EAAC,YAAY,EACxB,KAAK,EAAEE,yBAAA,IAAI,qCAAW,EACtB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,gBAAgB,EAAEA,yBAAA,IAAI,qDAA2B,IAEjDF,oBACE,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAEE,yBAAA,IAAI,2CAAiB,EAC9B,IAAI,EAAC,QAAQ,gBACDA,yBAAA,IAAI,2CAAiB,CAAC,iBAAiB,EACnD,KAAK,EAAEA,yBAAA,IAAI,2CAAiB,CAAC,iBAAiB,IAE9CF,sBACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,oBAAoB,GACf,CACL,EACR,IAAI,CAAC,wBAAwB,KAC5BA,oBACE,KAAK,EAAC,uDAAuD,EAC7D,IAAI,EAAC,kBAAkB,EACvB,OAAO,EAAEE,yBAAA,IAAI,mDAAyB,EACtC,IAAI,EAAC,QAAQ,gBAEXA,yBAAA,IAAI,2CAAiB,CAAC,yBAAyB,EAEjD,KAAK,EAAEA,yBAAA,IAAI,2CAAiB,CAAC,yBAAyB,IAEtDF,sBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,SAAS,GAAa,EACpDE,yBAAA,IAAI,2CAAiB,CAAC,qBAAqB,CACrC,CACV,EACA,IAAI,CAAC,0BAA0B,KAC9BF,oBACE,KAAK,EAAC,yDAAyD,EAC/D,IAAI,EAAC,oBAAoB,EACzB,OAAO,EAAEE,yBAAA,IAAI,qDAA2B,EACxC,IAAI,EAAC,QAAQ,gBAEXA,yBAAA,IAAI,2CAAiB,CAAC,2BAA2B,EAEnD,KAAK,EAAEA,yBAAA,IAAI,2CAAiB,CAAC,2BAA2B,IAExDF,sBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,GAAa,EACtDE,yBAAA,IAAI,2CAAiB,CAAC,sBAAsB,CACtC,CACV,CACqB,CACzB,CACM,CACV,EACDF,qBAAS,KAAK,EAAC,mBAAmB,IAChCA,qBAAa,EACZ,IAAI,CAAC,gCAAgC,KACpCA,iBAAK,KAAK,EAAC,qCAAqC,IAC9CA,iBAAK,KAAK,EAAC,6CAA6C,IACtDA,sBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,iBAAiB,GAAa,EAC7DA,eAAG,KAAK,EAAC,gBAAgB,0BAAwB,CAC7C,CACF,CACP,CACO,CAEF,CACL,EACP;KACH;;;;;;;AC5NH,MAAM,cAAc,GAAG,mgEAAmgE;;;;;;;;;;;;;;;;;;;ACe1hE,MAAM,mBAAmB,GAAGG,kBAAY,CACtC,6DAA6D,CAC9D,CAAC;AACF,MAAM,SAAS,GAAGA,kBAAY,CAC5B,2DAA2D,CAC5D,CAAC;AAEF,MAAM,uBAAuB,GAAW,GAAG,CAAC;AAC5C,MAAM,0BAA0B,GAAW,GAAG,CAAC;AAC/C,MAAM,gCAAgC,GAAW,GAAG,CAAC;AACrD,MAAM,8BAA8B,GAAW,GAAG,CAAC;AACnD,MAAM,qBAAqB,GAAW,GAAG,CAAC;AAE1C,MAAM,OAAO,GAAGN,0BAAW,CAAC;IAC1B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AACH,MAAM,gBAAgB,GAAGA,0BAAW,CAAC;IACnC,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,aAAa;IACnB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AAEH,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,iBAAiB;IACjB,iBAAiB;IACjB,kBAAkB;CACnB,CAAC;MAQW,gBAAgB;;;;QAE3B,oDAAsB;QAsEtB,8CAAqB;YACnB,UAAU,CAAC;gBACT,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,UAAU,CAAC;oBACT,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;iBAClC,EAAE,8BAA8B,CAAC,CAAC;aACpC,EAAE,uBAAuB,GAAG,0BAA0B,CAAC,CAAC;SAC1D,EAAC;QAEF,6CAAoB,OAAO,CAAa;YACtC,MAAM,MAAM,GAAI,CAAC,CAAC,aAAmC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACzE,MAAM,uBAAA,IAAI,uCAAe,MAAnB,IAAI,CAAiB,CAAC;YAC5B,IAAI,CAAC,+BAA+B,CAAC,MAAM,CAAC,CAAC;SAC9C,EAAC;QAEF,0CAAiB;YACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,MAAM,IAAI,OAAO,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC;SAC1E,EAAC;0BAjF6B,KAAK;oCAKK,KAAK;2BAKd,KAAK;;;;;;IAwBrC,MAAM,iBAAiB;QACrB,uBAAA,IAAI,qCAAoB,MAAME,aAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;;QAGlE,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,uBAAA,IAAI,yCAAiB,CAAC,YAAY,CAAC;SACxD;QACD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,CAAC,eAAe,GAAG,uBAAA,IAAI,yCAAiB,CAAC,eAAe,CAAC;SAC9D;QACD,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,CAAC,gBAAgB,GAAG,uBAAA,IAAI,yCAAiB,CAAC,gBAAgB,CAAC;SAChE;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,uBAAA,IAAI,2CAAmB,MAAvB,IAAI,CAAqB,CAAC;SAC3B;KACF;;;;IAMD,MAAM,WAAW;QACf,uBAAA,IAAI,uCAAe,MAAnB,IAAI,CAAiB,CAAC;KACvB;IAsBD,MAAM;QACJ,QACEC,QAACC,UAAI,QACHD,sBAAU,KAAK,EAAE,WAAW,GAAa,EACzCA,iBACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,EAChE,KAAK,EAAE;gBACL,iBAAiB,EAAE,OAAO,mBAAmB,GAAG;gBAChD,uBAAuB,EAAE,GAAG,qBAAqB,IAAI;aACtD,IAEDA,oBACE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,EAC7D,KAAK,EAAE;gBACL,oBAAoB,EAAE,GAAG,uBAAuB,IAAI;gBACpD,uBAAuB,EAAE,GAAG,0BAA0B,IAAI;aAC3D,IAEDA,kBACE,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,SAAS,GAAG,EAAE,GACzC,EACRA,gBAAI,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,YAAY,CAAM,EAClDA,eAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,eAAe,CAAK,CAC/C,EAER,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,oBAAoB,KACjDA,gBAAI,KAAK,EAAC,mBAAmB,IAC1B,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,MACnCA,gBAAI,KAAK,EAAC,yBAAyB,IACjCA,oBACE,KAAK,EAAE;gBACL,2BAA2B,EAAE,IAAI;aAClC,EACD,OAAO,EAAE,uBAAA,IAAI,0CAAkB,EAC/B,KAAK,EAAE;gBACL,SAAS,EAAE,GAAG,gCAAgC,GAAG,CAAC,IAAI;aACvD,kBACa,MAAM,IAEpBA,sBACE,GAAG,EAAE,OAAO,EACZ,KAAK,EAAC,iCAAiC,GAC7B,EACX,MAAM,EACPA,sBACE,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAC,iCAAiC,GAC7B,CACL,CACN,CACN,CAAC,CACC,CACN,CACG,CACD,EACP;KACH;;;;;;;;;;","names":["CSS_BUNDLES","getIconPath","__classPrivateFieldSet","Locale","h","Host","__classPrivateFieldGet","getAssetPath"],"sources":["src/components/chat/chat-container/chat-container.scss?tag=gx-ide-chat-container","src/components/chat/chat-container/chat-container.tsx","src/components/chat/chat-welcome/chat-welcome.scss?tag=gx-ide-chat-welcome&encapsulation=shadow","src/components/chat/chat-welcome/chat-welcome.tsx"],"sourcesContent":[".chat-container {\n background-color: var(\n --elevation-background-color,\n --mer-surface__elevation--01\n );\n display: grid;\n block-size: 100%;\n overflow: auto;\n grid-template-rows: 1fr;\n position: relative;\n --chat-common-border-radius: var(--mer-spacing--2xs);\n}\n\n.chat-container.with-header {\n grid-template-rows: max-content 1fr;\n}\n\n.section {\n display: contents;\n}\n\n.header {\n padding: var(--mer-spacing--2xs) var(--mer-spacing--2xs)\n var(--mer-spacing--2xs) var(--mer-spacing--sm);\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--mer-spacing--sm);\n color: var(--mer-text__bright);\n border-block-end: var(--mer-border__width--sm) solid\n var(--color-border-surface-on-elevation-01, #333d47);\n\n .button-copy-chat,\n .button-delete-chat {\n --control__border-color: transparent !important;\n }\n\n .button-delete-chat {\n &:hover {\n filter: brightness(1.3);\n }\n &:active {\n filter: brightness(0.8);\n }\n }\n}\n\n.ch-chat-container {\n overflow: auto;\n position: relative;\n display: grid;\n}\n\n// - - - - - - - - - - - - - -\n// other\n// - - - - - - - - - - - - - -\n\n.chat-container__conversation-copied {\n position: absolute;\n z-index: 1;\n inline-size: 100%;\n block-size: 100%;\n background: rgba(22, 22, 23, 0.75);\n backdrop-filter: saturate(180%) blur(20px);\n display: grid;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 32px;\n --mer-icon__box--md: 18px;\n pointer-events: none;\n overflow: hidden;\n animation: fadeIn 100ms ease-in-out forwards;\n opacity: 0;\n}\n\n.chat-container__conversation-copied-wrapper {\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--sm);\n position: relative;\n inset-block-start: 4px;\n opacity: 0;\n animation: liftUp var(--mer-timing--fast) ease-in-out forwards;\n animation-delay: var(--mer-timing--fast);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes liftUp {\n from {\n opacity: 0;\n inset-block-start: 4px;\n }\n to {\n opacity: 1;\n inset-block-start: 0;\n }\n}\n\n::selection {\n color: #00ccff;\n background: #22334a;\n}\n\n// The following styles shoul be moved over to Mercury\n\n.chat::part(code-block-header__copy) {\n --copy-text-opacity: 0;\n --copy-text-translate-x: 6px;\n opacity: var(--copy-text-opacity);\n pointer-events: none;\n transform: translateX(var(--copy-text-translate-x));\n transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;\n font-size: 12px;\n}\n.chat::part(code-block-header__copy-copied) {\n --copy-button-pointer-events: none !important;\n --copy-text-opacity: 1;\n --copy-text-translate-x: 0;\n}\n.chat::part(code-block-header) {\n align-items: center;\n display: flex;\n gap: 8px;\n}\n","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",":host {\n block-size: 100%;\n}\n\n$sharedPadding: var(--mer-spacing--md);\n\n.welcome-container {\n --opacity: 1;\n --translate-y: 0;\n opacity: var(--opacity);\n transform: translateY(var(--translate-y));\n transition: all var(--transition-duration);\n display: flex;\n block-size: 100%;\n grid-template-rows: max-content max-content;\n flex-direction: column;\n justify-content: space-between;\n background-repeat: no-repeat;\n background-size: cover;\n background-size: contain;\n\n &.hidden {\n --opacity: 0;\n --translate-y: 4px;\n }\n}\n\n%absolute-centered {\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n}\n\n.header {\n --opacity: 0;\n --translate-y: 3px;\n transition: all var(--transition-duration) var(--transition-delay)\n cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateY(var(--translate-y));\n opacity: var(--opacity);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n align-items: center;\n padding: $sharedPadding;\n\n &--visible {\n --opacity: 1;\n --translate-y: 0;\n }\n\n &__circle {\n $circleSize: 55px;\n inline-size: $circleSize;\n block-size: $circleSize;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin-block-end: -6px;\n }\n\n &__title {\n display: grid;\n text-align: center;\n margin: 0;\n text-align: center;\n white-space: pre-line;\n line-height: 1.3;\n font-weight: 600;\n font-size: var(--font-size-header-h3);\n }\n\n &__greeting {\n line-height: 1.4;\n text-align: center;\n font-weight: 300;\n }\n}\n\n.suggested-prompts {\n --opacity: 1;\n opacity: var(--opacity);\n transition: opacity var(--transition-duration);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n list-style: none;\n margin: 0;\n padding: $sharedPadding;\n\n &.hidden {\n --opacity: 0;\n }\n\n &__item {\n }\n\n &__button {\n opacity: 0;\n transform: translateX(-3px);\n animation: fadeInSuggestedPromptButton var(--mer-timing--regular) ease\n forwards;\n animation-delay: var(--delay, 0s);\n\n border: 0;\n padding: var(--mer-spacing--sm);\n border-radius: 44px; // Works with up to a a four lines button\n font-size: 14px; // TODO : Use a token when available\n font-style: oblique;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--xs);\n background-color: #22334a; // TODO : Use a token when available\n font-weight: 100;\n max-inline-size: 300px;\n\n &:hover {\n background-color: #1a2b42;\n }\n }\n\n &__icon {\n flex-shrink: 0;\n }\n}\n\n@keyframes fadeInSuggestedPromptButton {\n from {\n opacity: 0;\n transform: translateX(-3px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","/ 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\n src={AI_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n {prompt}\n <ch-image\n src={ARROW_RIGHT_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n </button>\n </li>\n ))}\n </ul>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/gx-ide-sc-chat-container.cjs.entry.js CHANGED Viewed

@@ -374,7 +374,11 @@ const GxIdeScChatContainer = class {
         }
     }
     render() {
-        return (index.h(index.Host, null, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("gx-ide-chat-container", { chatTitle: "GeneXus Assistant", copyConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_copyConversationCallbackHandler, "f"), deleteConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_deleteConversationCallbackHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatContainerRef, el, "f")), class: "elevation-1" }, index.h("ch-chat", { callbacks: __classPrivateFieldGet(this, _GxIdeScChatContainer_chatCallbacks, "f"), class: "chat", generatingResponse: this.generatingResponse, loadingState: this.loadingState, renderItem: codeRender.mercuryChatMessageRender("components/markdown-viewer", AI_AVATAR, "Nexa"), items: this.chatItems, showAdditionalContent: this.showAdditionalContent, translations: chatTranslations, ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chChatRef, el, "f")) }, index.h("gx-ide-chat-welcome", { ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatWelcomeRef, el, "f")), slot: "empty-chat", suggestedPrompRequestedCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler, "f") }), index.h("div", { slot: "additional-content" }, "Custom content that is rendered when the chat renders content")))));
+        return (index.h(index.Host, null, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("gx-ide-chat-container", { chatTitle: "GeneXus Assistant", copyConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_copyConversationCallbackHandler, "f"), deleteConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_deleteConversationCallbackHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatContainerRef, el, "f")), class: "elevation-1" }, index.h("ch-chat", { callbacks: __classPrivateFieldGet(this, _GxIdeScChatContainer_chatCallbacks, "f"), class: "chat", generatingResponse: this.generatingResponse, loadingState: this.loadingState, renderItem: codeRender.mercuryChatMessageRender("components/markdown-viewer", AI_AVATAR, "Nexa"), items: this.chatItems, showAdditionalContent: this.showAdditionalContent, translations: chatTranslations, ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chChatRef, el, "f")) }, index.h("gx-ide-chat-welcome", { ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatWelcomeRef, el, "f")), slot: "empty-chat", suggestedPrompRequestedCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler, "f"), suggestedPrompts: [
+                "I need to represente a product entity",
+                "I want to create a Customer Tracking application. Can you help me with the architecture?",
+                "I need to create a REST API for my application"
+            ] }), index.h("div", { slot: "additional-content" }, "Custom content that is rendered when the chat renders content")))));
     }
 };
 _GxIdeScChatContainer_chatContainerRef = new WeakMap(), _GxIdeScChatContainer_chatWelcomeRef = new WeakMap(), _GxIdeScChatContainer_chChatRef = new WeakMap(), _GxIdeScChatContainer_chatCallbacks = new WeakMap(), _GxIdeScChatContainer_copyConversationCallbackHandler = new WeakMap(), _GxIdeScChatContainer_deleteConversationCallbackHandler = new WeakMap(), _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler = new WeakMap();

package/dist/cjs/gx-ide-sc-chat-container.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-sc-chat-container.entry.cjs.js","mappings":";;;;;;;;AAMA,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AAEpD,IAAI,OAAuB,CAAC;AAE5B,MAAM,2BAA2B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDnC,CAAC;AAEF,MAAM,iCAAiC,GAAG;;;;;;;;;;;CAWzC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,OAA0B,KAAK;IACpD,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACnB,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC;IAElC,OAAO,CAAC,aAAa,CAAC;QACpB,EAAE,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;QAC7B,IAAI,EAAE,WAAW;QACjB,OAAO,EAAE,WAAW;QACpB,MAAM,EAAE,SAAS;KAClB,CAAC,CAAC;IAEH,OAAO,GAAG,UAAU,CAAC;QACnB,OAAO,CAAC,iBAAiB,CACvB;YACE,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,gCAAgC;YACzC,MAAM,EAAE,SAAS;SAClB,EACD,SAAS,CACV,CAAC;QAEF,OAAO,GAAG,UAAU,CAAC;YACnB,cAAc,CAAC,OAAO,EAAE,EAAE,EAAE,2BAA2B,EAAE,SAAS,CAAC,CAAC;SACrE,EAAE,KAAK,CAAC,CAAC;KACX,EAAE,KAAK,CAAC,CAAC;AACZ,CAAC,CAAC;AAEK,MAAM,wBAAwB,GAAG,CACtC,SAA4B;IAE5B,OAAO;QACL,KAAK,EAAE,MAAM,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,EAAE,CAAC;QAC9C,aAAa,EAAE,aAAa,CAAC,SAAS,CAAC;QACvC,WAAW,EAAE,MAAM,IAAI,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,EAAE,CAAC,CAAC;QACtD,oBAAoB,EAAE;YACpB,YAAY,CAAC,OAAO,CAAC,CAAC;YAEtB,SAAS,CAAC,iBAAiB,CACzB;gBACE,IAAI,EAAE,WAAW;gBACjB,OAAO,EAAE,EAAE;gBACX,MAAM,EAAE,UAAU;aACnB,EACD,QAAQ,CACT,CAAC;YAEF,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,UAAU,CAAC,MAAM,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;SAC9D;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,cAAc,CACrB,OAA0B,EAC1B,OAAe,EACf,eAAuB,EACvB,IAA0B;IAE1B,OAAO,GAAG,UAAU,CAClB;QACE,MAAM,kBAAkB,GAAG,OAAO,IAAI,eAAe,CAAC,MAAM,CAAC;QAE7D,OAAO,CAAC,iBAAiB,CACvB;YACE,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,eAAe,CAAC,SAAS,CAAC,OAAO,GAAG,EAAE,EAAE,OAAO,CAAC;;;;;;;;;;;;;;;;YAiBzD,MAAM,EAAE,kBAAkB,GAAG,UAAU,GAAG,WAAW;SACtD,EACD,IAAI,CACL,CAAC;QAEF,IAAI,CAAC,kBAAkB,EAAE;YACvB,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,EAAE,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC;SAClE;aAAM;YACL,OAAO,CAAC,kBAAkB,GAAG,KAAK,CAAC;SACpC;KACF,EACD,OAAO,GAAG,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAC9B,CAAC;AACJ,CAAC;AAEM,MAAM,gBAAgB,GAAqB;IAChD,cAAc,EAAE;QACd,SAAS,EAAE,YAAY;QACvB,kBAAkB,EAAE,yBAAyB;QAC7C,kBAAkB,EAAE,eAAe;QACnC,WAAW,EAAE,eAAe;QAC5B,mBAAmB,EAAE,uBAAuB;QAC5C,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,SAAS;QACpB,0BAA0B,EAAE,wBAAwB;KACrD;IACD,WAAW,EAAE;QACX,SAAS,EAAE,sBAAsB;KAClC;IACD,IAAI,EAAE;QACJ,cAAc,EAAE,WAAW;QAC3B,UAAU,EAAE,mBAAmB,sBAAsB,EAAE;QACvD,WAAW,EAAE,eAAe;KAC7B;CACF,CAAC;AAe2C,KAAK,CAAC,IAAI,CACrD,EAAE,MAAM,EAAE,EAAE,EAAE,EACd,CAAC,CAAC,EAAE,KAAK,KACP,KAAK,GAAG,CAAC,KAAK,CAAC;MACX;QACE,EAAE,EAAE,UAAU,KAAK,EAAE;QACrB,IAAI,EAAE,MAAM;QACZ,OAAO,EACL,UAAU,KAAK,EAAE;YACjB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;KACtB;MACD;QACE,EAAE,EAAE,UAAU,KAAK,EAAE;QACrB,IAAI,EAAE,WAAW;QACjB,OAAO,EACL,iCAAiC;YACjC,YAAY,KAAK,IAAI;YACrB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;YACnB,UAAU,KAAK,IAAI;KACtB,EACP;AAEK,MAAM,eAAe,GAAkB;IAC5C;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,oCAAoC;QAC7C,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,UAAU;QAClB,OAAO,EACL,4EAA4E;QAC9E,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,UAAU;QAClB,OAAO,EACL,yLAAyL;QAC3L,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,OAAO;QACb,OAAO,EACL,yMAAyM;QAC3M,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,UAAU;QAClB,OAAO,EACL,+KAA+K;QACjL,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,MAAM;QACZ,OAAO,EACL,2JAA2J;QAC7J,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,UAAU;QAClB,OAAO,EACL,kLAAkL;QACpL,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,4CAA4C;KACtD;IACD;QACE,EAAE,EAAE,GAAG;QACP,IAAI,EAAE,WAAW;QACjB,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,iCAAiC;KAC3C;CACF;;AC/SD,MAAM,eAAe,GAAG,qCAAqC;;;;;;;;;;;;;;;;;;;ACa7D,MAAM,SAAS,GAAGA,kBAAY,CAC5B,mDAAmD,CACpD,CAAC;AACF,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,iBAAiB;IACjB,iBAAiB;CAClB,CAAC;MAkBW,oBAAoB;;;QAC/B,yDAAkD;QAClD,uDAA8C;QAC9C,kDAA+B;QAC/B,sDAAsC;QA6BtC,gEAAmC;YACjC,uBAAA,IAAI,8CAAkB,CAAC,2BAA2B,EAAE,CAAC;SACtD,EAAC;QAEF,kEAAqC,SAAQ,EAAC;QA+B9C,uEAA0C,OACxC,MAAc;YAEd,IAAI,sBAA8B,CAAC;YACnC,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAChD,sBAAsB;oBACpB,wjBAAwjB,CAAC;aAC5jB;iBAAM,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;gBAClD,sBAAsB;oBACpB,wdAAwd,CAAC;aAC5d;iBAAM;gBACL,sBAAsB;oBACpB,mDAAmD,CAAC;aACvD;YAED,MAAM,UAAU,GAAoB;gBAClC,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,MAAM;aAChB,CAAC;YACF,uBAAA,IAAI,uCAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAC1C,UAAU,CAAC;gBACT,uBAAA,IAAI,uCAAW,CAAC,aAAa,CAAC;oBAC5B,EAAE,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;oBAC7B,IAAI,EAAE,WAAW;oBACjB,OAAO,EAAE,WAAW;oBACpB,MAAM,EAAE,SAAS;iBAClB,CAAC,CAAC;gBACH,UAAU,CAAC;oBACT,uBAAA,IAAI,uCAAW,CAAC,iBAAiB,CAC/B;wBACE,IAAI,EAAE,WAAW;wBACjB,OAAO,EAAE,gCAAgC;wBACzC,MAAM,EAAE,SAAS;qBAClB,EACD,SAAS,CACV,CAAC;oBACF,UAAU,CAAC;wBACT,uBAAA,IAAI,uCAAW,CAAC,iBAAiB,CAC/B;4BACE,IAAI,EAAE,WAAW;4BACjB,OAAO,EAAE,qBAAqB;4BAC9B,MAAM,EAAE,SAAS;yBAClB,EACD,SAAS,CACV,CAAC;wBACF,uBAAA,IAAI,uCAAW,CAAC,iBAAiB,CAC/B;4BACE,IAAI,EAAE,WAAW;4BACjB,OAAO,EAAE,sBAAsB;4BAC/B,MAAM,EAAE,UAAU;yBACnB,EACD,SAAS,CACV,CAAC;qBACH,EAAE,IAAI,CAAC,CAAC;iBACV,EAAE,IAAI,CAAC,CAAC;aACV,EAAE,GAAG,CAAC,CAAC;SACT,EAAC;oBAlHA,iBAAiB;kCAEoB,KAAK;4BAKjB,oBAAoB;qCACL,KAAK;kCACR,KAAK;+BACT,cAAc;yBACb,EAAE;;;;;IAMtC,MAAM,WAAW;;QAEf,uBAAA,IAAI,4CAAgB,CAAC,WAAW,EAAE,CAAC;KACpC;IAQD,gBAAgB;QACd,UAAU,CAAC;YACT,IAAI,CAAC,eAAe,GAAG,sBAAsB,CAAC;SAC/C,EAAE,IAAI,CAAC,CAAC;KACV;IAED,kBAAkB;QAChB,IAAI,CAAC,uBAAA,IAAI,2CAAe,IAAI,uBAAA,IAAI,uCAAW,EAAE;YAC3C,uBAAA,IAAI,uCAAkB,wBAAwB,CAAC,uBAAA,IAAI,uCAAW,CAAC,MAAA,CAAC;SACjE;KACF;IAED,MAAM,iBAAiB;QACrB,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,EAAE;YACnC,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC;SAClC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACrB;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YAChC,IAAI,CAAC,SAAS,GAAG;gBACf;oBACE,EAAE,EAAE,GAAG;oBACP,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,UAAU;oBAClB,OAAO,EAAE,6BAA6B;oBACtC,QAAQ,EAAE,OAAO;iBAClB;aACF,CAAC;SACH;KACF;IA4DD,MAAM;QACJ,QACEC,QAACC,UAAI,QACHD,sBAAU,KAAK,EAAE,WAAW,GAAa,EACzCA,mCACE,SAAS,EAAC,mBAAmB,EAC7B,wBAAwB,EAAE,uBAAA,IAAI,6DAAiC,EAC/D,0BAA0B,EAAE,uBAAA,IAAI,+DAAmC,EACnE,GAAG,EAAE,EAAE,KACJ,uBAAA,IAAI,0CAAqB,EAAmC,MAAA,CAAC,EAEhE,KAAK,EAAC,aAAa,IAEnBA,qBACE,SAAS,EAAE,uBAAA,IAAI,2CAAe,EAC9B,KAAK,EAAC,MAAM,EACZ,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAEE,mCAAwB,CAClC,4BAA4B,EAC5B,SAAS,EACT,MAAM,CACP,EACD,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EAAE,EAAE,KAAK,uBAAA,IAAI,mCAAc,EAAuB,MAAA,CAAC,IAEtDF,iCACE,GAAG,EAAE,EAAE,KACJ,uBAAA,IAAI,wCAAmB,EAAiC,MAAA,CAAC,EAE5D,IAAI,EAAC,YAAY,EACjB,+BAA+B,EAC7B,uBAAA,IAAI,oEAAwC,GAEzB,EACvBA,iBAAK,IAAI,EAAC,oBAAoB,oEAExB,CACE,CACY,CACnB,EACP;KACH;;;;;;;","names":["getAssetPath","h","Host","mercuryChatMessageRender"],"sources":["src/showcase/chat-container/callbacks.ts","src/showcase/chat-container/chat-showcase.scss?tag=gx-ide-sc-chat-container&encapsulation=shadow","src/showcase/chat-container/chat.showcase.tsx"],"sourcesContent":["import {\n ChatInternalCallbacks,\n ChatMessage,\n ChatTranslations\n} from \"@genexus/chameleon-controls-library\";\n\nconst PROCESSING_PLACEHOLDER = \"{{ASSISTANT_NAME}}\";\n\nlet timeOut: NodeJS.Timeout;\n\nconst ASSISTANT_RESPONSE_MARKDOWN = `\n###### Code block {#code-block}\nTo create code blocks, you’ll use three backticks (\\` \\`\\`\\` \\`) or three tildes (\\`~~~\\`) on the lines before and after the code block.\n\n\\`\\`\\`\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n\nAnother way to create code blocks is to indent every line of the block by at least four spaces or one tab.\n\n <html>\n <head>\n </head>\n </html>\n\n\n###### Syntax Highlighting {#syntax-highlighting}\nThis feature allows you to add color highlighting for whatever language your code was written in.\nTo add syntax highlighting, specify a language next to the backticks before the fenced code block.\n\n\\`\\`\\`json\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n\n\\`\\`\\`javascript\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Markdown from 'react-markdown'\nimport rehypeHighlight from 'rehype-highlight'\n\nconst markdown = \\`\n# Your markdown here\n\\`\n\nReactDOM.render(\n <Markdown rehypePlugins={[rehypeHighlight]}>{markdown}</Markdown>,\n document.querySelector('#content')\n)\n\\`\\`\\`\n\n###### Horizontal Rules {#horizontal-rules}\nTo create a horizontal rule, use three or more asterisks (\\`*\\`), dashes (\\`---\\`), or underscores (\\`___\\`) on a line by themselves.\n`;\n\nconst ASSISTANT_RESPONSE_SHORT_MARKDOWN = `\n###### Code block {#code-block}\nTo create code blocks, you’ll use three backticks (\\` \\`\\`\\` \\`) or three tildes (\\`~~~\\`) on the lines before and after the code block.\n\n\\`\\`\\`json\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n`;\n\nconst sendChatToLLM = (chatRef: HTMLChChatElement) => () => {\n console.log(\"dsa\");\n chatRef.generatingResponse = true;\n\n chatRef.addNewMessage({\n id: `${new Date().getTime()}`,\n role: \"assistant\",\n content: \"Analyzing\",\n status: \"waiting\"\n });\n\n timeOut = setTimeout(() => {\n chatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Processing with Chat with LLMs\",\n status: \"waiting\"\n },\n \"replace\"\n );\n\n timeOut = setTimeout(() => {\n dummyStreaming(chatRef, 20, ASSISTANT_RESPONSE_MARKDOWN, \"replace\");\n }, 10000);\n }, 20000);\n};\n\nexport const chatCallbacksWithChatRef = (\n chChatRef: HTMLChChatElement\n): ChatInternalCallbacks => {\n return {\n clear: () => new Promise(resolve => resolve()),\n sendChatToLLM: sendChatToLLM(chChatRef),\n uploadImage: () => new Promise(resolve => resolve(\"\")),\n stopGeneratingAnswer: () => {\n clearTimeout(timeOut);\n\n chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"\",\n status: \"complete\"\n },\n \"concat\"\n );\n\n return new Promise(resolve => setTimeout(() => resolve, 10));\n }\n };\n};\n\nfunction dummyStreaming(\n chatRef: HTMLChChatElement,\n counter: number,\n stringToDisplay: string,\n mode: \"concat\" \| \"replace\"\n) {\n timeOut = setTimeout(\n () => {\n const streamingCompleted = counter >= stringToDisplay.length;\n\n chatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: stringToDisplay.substring(counter - 20, counter),\n\n // {\n // message: stringToDisplay.substring(counter - 20, counter),\n // files: streamingCompleted\n // ? [\n // {\n // url: \"https://next.genexus.ai\",\n // caption: \"Mars Exploration Contract\"\n // },\n // {\n // url: \"https://gx-chameleon.netlify.app\",\n // caption: \"Venus Exploration Contract\"\n // }\n // ]\n // : undefined\n // },\n status: streamingCompleted ? \"complete\" : \"streaming\"\n },\n mode\n );\n\n if (!streamingCompleted) {\n dummyStreaming(chatRef, counter + 20, stringToDisplay, \"concat\");\n } else {\n chatRef.generatingResponse = false;\n }\n },\n counter % 200 === 0 ? 50 : 40\n );\n}\n\nexport const chatTranslations: ChatTranslations = {\n accessibleName: {\n clearChat: \"Clear chat\",\n copyResponseButton: \"Copy assistant response\",\n downloadCodeButton: \"Download code\",\n imagePicker: \"Select images\",\n removeUploadedImage: \"Remove uploaded image\",\n sendButton: \"Send\",\n sendInput: \"Message\",\n stopGeneratingAnswerButton: \"Stop generating answer\"\n },\n placeholder: {\n sendInput: \"Ask me a question...\"\n },\n text: {\n copyCodeButton: \"Copy code\",\n processing: `Processing with ${PROCESSING_PLACEHOLDER}`,\n sourceFiles: \"Source files:\"\n }\n};\n\nexport const chatRecord: ChatMessage[] = [\n { id: \"1\", role: \"user\", content: \"Hello world\" },\n { id: \"2\", role: \"assistant\", content: ASSISTANT_RESPONSE_MARKDOWN },\n { id: \"3\", role: \"user\", content: \"Hello world 1\" },\n { id: \"4\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"5\", role: \"user\", content: \"Hello world 2\" },\n { id: \"6\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"7\", role: \"user\", content: \"Hello world 3\" },\n { id: \"8\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"9\", role: \"user\", content: \"Hello world 4\" },\n { id: \"10\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN }\n];\n\nexport const longChatRecord: ChatMessage[] = Array.from(\n { length: 40 },\n (_, index) =>\n index % 2 === 0\n ? {\n id: `index: ${index}`,\n role: \"user\",\n content:\n `index: ${index}` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n`\n }\n : {\n id: `index: ${index}`,\n role: \"assistant\",\n content:\n ASSISTANT_RESPONSE_SHORT_MARKDOWN +\n `\\nindex: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n`\n }\n);\n\nexport const codeFixerRecord: ChatMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n content: \"Please give me an example about...\",\n metadata: \"14:55\"\n },\n {\n id: \"2\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Action required example. Action required example. Action required example.\",\n metadata: \"14:56\"\n },\n {\n id: \"3\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Some fields contain missing or invalid data, which may prevent the process from completing correctly. Review your input carefully and make any necessary corrections before continuing.\",\n metadata: \"14:57\",\n parts: \"warning\"\n },\n {\n id: \"4\",\n role: \"error\",\n content:\n \"An unexpected error occurred while processing your request, and the operation couldn’t be completed.Please check your internet connection or try again later. If the problem persists, contact support.\",\n metadata: \"14:58\"\n },\n {\n id: \"5\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Your information has been saved successfully, and all changes are now reflected in your account. You can continue with the next steps or return to the dashboard at any time.\",\n metadata: \"14:59\",\n parts: \"success\"\n },\n {\n id: \"6\",\n role: \"user\",\n content:\n \"Implement the function calculate_average_grade in grades.py that takes a list of grades as input and returns the average grade as a floating-point number\",\n metadata: \"15:00\"\n },\n {\n id: \"7\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"You can provide further details or updates regarding your support ticket and its associated code. Your input here helps us better understand and address your issue effectively.\",\n metadata: \"15:01\"\n },\n {\n id: \"8\",\n role: \"assistant\",\n status: \"waiting\",\n content: \"You can provide further details or updates\"\n },\n {\n id: \"9\",\n role: \"assistant\",\n status: \"complete\",\n content: ASSISTANT_RESPONSE_SHORT_MARKDOWN\n }\n];\n",":host {\n block-size: 100%;\n display: grid;\n}\n","import {\n Component,\n Host,\n h,\n State,\n Prop,\n getAssetPath,\n Method\n} from \"@stencil/core\";\nimport { mercuryChatMessageRender } from \"../../components/chat/code-render\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst AI_AVATAR = getAssetPath(\n `./gx-ide-assets/chat-welcome/images/ai-avatar.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/elevation\",\n \"components/chat\"\n];\n\nimport {\n chatCallbacksWithChatRef,\n chatTranslations,\n codeFixerRecord\n} from \"./callbacks\";\nimport {\n ChatMessage,\n ChatInternalCallbacks\n} from \"@genexus/chameleon-controls-library\";\nimport { ChatMessageUser } from \"@genexus/chameleon-controls-library/dist/types/components/chat/types\";\n\n@Component({\n tag: \"gx-ide-sc-chat-container\",\n styleUrl: \"chat-showcase.scss\",\n shadow: true\n})\nexport class GxIdeScChatContainer {\n #chatContainerRef!: HTMLGxIdeChatContainerElement;\n #chatWelcomeRef!: HTMLGxIdeChatWelcomeElement;\n #chChatRef!: HTMLChChatElement;\n #chatCallbacks: ChatInternalCallbacks;\n\n /\n * If true, the chat items length will be 0, since this is a requirement for dipslaying the ch-chat\n * \"empty-chat\" slot that welcome screen uses to display.\n /\n @Prop() readonly mode: \"welcome\" \| \"messages-sample\" \| \"empty\" =\n \"messages-sample\";\n\n @State() generatingResponse: boolean = false;\n @State() loadingState:\n \| \"all-records-loaded\"\n \| \"initial\"\n \| \"loading\"\n \| \"more-data-to-fetch\" = \"all-records-loaded\";\n @State() showAdditionalContent: boolean = false;\n @State() conversationCopied: boolean = false;\n @State() assistantStatus: string = \"Getting Data\";\n @State() chatItems: ChatMessage[] = [];\n\n /\n It will exit the wellcome screen and remove it from the dom.\n */\n @Method()\n async exitWelcome() {\n // hand exitWelcome to gx-ide-chat-welcome\n this.#chatWelcomeRef.exitWelcome();\n }\n\n #copyConversationCallbackHandler = () => {\n this.#chatContainerRef.showCopyConversationMessage();\n };\n\n #deleteConversationCallbackHandler = () => {};\n\n componentDidLoad() {\n setTimeout(() => {\n this.assistantStatus = \"Creating Data Base..\";\n }, 1000);\n }\n\n componentDidRender() {\n if (!this.#chatCallbacks && this.#chChatRef) {\n this.#chatCallbacks = chatCallbacksWithChatRef(this.#chChatRef);\n }\n }\n\n async componentWillLoad() {\n if (this.mode === \"messages-sample\") {\n this.chatItems = codeFixerRecord;\n } else if (this.mode === \"welcome\") {\n this.chatItems = [];\n } else if (this.mode === \"empty\") {\n this.chatItems = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content: \"Hello! I am your assistant.\",\n metadata: \"14:56\"\n }\n ];\n }\n }\n #suggestedPrompRequestedCallbackHandler = async (\n prompt: string\n ): Promise<void> => {\n let assistantFinalResponse: string;\n if (prompt.toLowerCase().includes(\"transaction\")) {\n assistantFinalResponse =\n 'To create a transaction in GeneXus, start by opening your KB (Knowledge Base) and selecting \"Transaction\" from the \"New Object\" options. Give it a name and define its attributes, starting with a primary key followed by the related data fields. GeneXus will automatically infer the data structure and relationships based on how you define the attributes and their nesting. Once saved, it generates the necessary database tables and forms for inserting, updating, and deleting records. You can then run the application to test the transaction directly in your browser.';\n } else if (prompt.toLowerCase().includes(\"entity\")) {\n assistantFinalResponse =\n 'In GeneXus, creating an entity usually means defining a Transaction object that represents a real-world concept like \"Customer\" or \"Product.\" To do this, create a new Transaction, name it after the entity, and define its attributes—starting with a unique identifier (like CustomerId) and then adding other fields (like CustomerName, CustomerEmail). GeneXus treats this Transaction as an entity and uses it to generate the corresponding table and interface automatically.';\n } else {\n assistantFinalResponse =\n \"Sorry, I didn’t catch that—mind rephrasing it? 😅\";\n }\n\n const userPrompt: ChatMessageUser = {\n id: \"1\",\n role: \"user\",\n content: prompt\n };\n this.#chChatRef.addNewMessage(userPrompt);\n setTimeout(() => {\n this.#chChatRef.addNewMessage({\n id: `${new Date().getTime()}`,\n role: \"assistant\",\n content: \"Analyzing\",\n status: \"waiting\"\n });\n setTimeout(() => {\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Processing with Chat with LLMs\",\n status: \"waiting\"\n },\n \"replace\"\n );\n setTimeout(() => {\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Getting information\",\n status: \"waiting\"\n },\n \"replace\"\n );\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: assistantFinalResponse,\n status: \"complete\"\n },\n \"replace\"\n );\n }, 1500);\n }, 1500);\n }, 100);\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <gx-ide-chat-container\n chatTitle=\"GeneXus Assistant\"\n copyConversationCallback={this.#copyConversationCallbackHandler}\n deleteConversationCallback={this.#deleteConversationCallbackHandler}\n ref={el =>\n (this.#chatContainerRef = el as HTMLGxIdeChatContainerElement)\n }\n class=\"elevation-1\"\n >\n <ch-chat\n callbacks={this.#chatCallbacks}\n class=\"chat\"\n generatingResponse={this.generatingResponse}\n loadingState={this.loadingState} // \"all-records-loaded\" to display the welcome screen\n renderItem={mercuryChatMessageRender(\n \"components/markdown-viewer\",\n AI_AVATAR,\n \"Nexa\"\n )}\n items={this.chatItems} // length 0 to display the welcome screen\n showAdditionalContent={this.showAdditionalContent}\n translations={chatTranslations}\n ref={el => (this.#chChatRef = el as HTMLChChatElement)}\n >\n <gx-ide-chat-welcome\n ref={el =>\n (this.#chatWelcomeRef = el as HTMLGxIdeChatWelcomeElement)\n }\n slot=\"empty-chat\"\n suggestedPrompRequestedCallback={\n this.#suggestedPrompRequestedCallbackHandler\n }\n ></gx-ide-chat-welcome>\n <div slot=\"additional-content\">\n Custom content that is rendered when the chat renders content\n </div>\n </ch-chat>\n </gx-ide-chat-container>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"gx-ide-sc-chat-container.entry.cjs.js","mappings":"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","names":["getAssetPath","h","Host","mercuryChatMessageRender"],"sources":["src/showcase/chat-container/callbacks.ts","src/showcase/chat-container/chat-showcase.scss?tag=gx-ide-sc-chat-container&encapsulation=shadow","src/showcase/chat-container/chat.showcase.tsx"],"sourcesContent":["import {\n ChatInternalCallbacks,\n ChatMessage,\n ChatTranslations\n} from \"@genexus/chameleon-controls-library\";\n\nconst PROCESSING_PLACEHOLDER = \"{{ASSISTANT_NAME}}\";\n\nlet timeOut: NodeJS.Timeout;\n\nconst ASSISTANT_RESPONSE_MARKDOWN = `\n###### Code block {#code-block}\nTo create code blocks, you’ll use three backticks (\\` \\`\\`\\` \\`) or three tildes (\\`~~~\\`) on the lines before and after the code block.\n\n\\`\\`\\`\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n\nAnother way to create code blocks is to indent every line of the block by at least four spaces or one tab.\n\n <html>\n <head>\n </head>\n </html>\n\n\n###### Syntax Highlighting {#syntax-highlighting}\nThis feature allows you to add color highlighting for whatever language your code was written in.\nTo add syntax highlighting, specify a language next to the backticks before the fenced code block.\n\n\\`\\`\\`json\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n\n\\`\\`\\`javascript\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport Markdown from 'react-markdown'\nimport rehypeHighlight from 'rehype-highlight'\n\nconst markdown = \\`\n# Your markdown here\n\\`\n\nReactDOM.render(\n <Markdown rehypePlugins={[rehypeHighlight]}>{markdown}</Markdown>,\n document.querySelector('#content')\n)\n\\`\\`\\`\n\n###### Horizontal Rules {#horizontal-rules}\nTo create a horizontal rule, use three or more asterisks (\\`*\\`), dashes (\\`---\\`), or underscores (\\`___\\`) on a line by themselves.\n`;\n\nconst ASSISTANT_RESPONSE_SHORT_MARKDOWN = `\n###### Code block {#code-block}\nTo create code blocks, you’ll use three backticks (\\` \\`\\`\\` \\`) or three tildes (\\`~~~\\`) on the lines before and after the code block.\n\n\\`\\`\\`json\n{\n \"firstName\": \"John\",\n \"lastName\": \"Smith\",\n \"age\": 25\n}\n\\`\\`\\`\n`;\n\nconst sendChatToLLM = (chatRef: HTMLChChatElement) => () => {\n console.log(\"dsa\");\n chatRef.generatingResponse = true;\n\n chatRef.addNewMessage({\n id: `${new Date().getTime()}`,\n role: \"assistant\",\n content: \"Analyzing\",\n status: \"waiting\"\n });\n\n timeOut = setTimeout(() => {\n chatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Processing with Chat with LLMs\",\n status: \"waiting\"\n },\n \"replace\"\n );\n\n timeOut = setTimeout(() => {\n dummyStreaming(chatRef, 20, ASSISTANT_RESPONSE_MARKDOWN, \"replace\");\n }, 10000);\n }, 20000);\n};\n\nexport const chatCallbacksWithChatRef = (\n chChatRef: HTMLChChatElement\n): ChatInternalCallbacks => {\n return {\n clear: () => new Promise(resolve => resolve()),\n sendChatToLLM: sendChatToLLM(chChatRef),\n uploadImage: () => new Promise(resolve => resolve(\"\")),\n stopGeneratingAnswer: () => {\n clearTimeout(timeOut);\n\n chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"\",\n status: \"complete\"\n },\n \"concat\"\n );\n\n return new Promise(resolve => setTimeout(() => resolve, 10));\n }\n };\n};\n\nfunction dummyStreaming(\n chatRef: HTMLChChatElement,\n counter: number,\n stringToDisplay: string,\n mode: \"concat\" \| \"replace\"\n) {\n timeOut = setTimeout(\n () => {\n const streamingCompleted = counter >= stringToDisplay.length;\n\n chatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: stringToDisplay.substring(counter - 20, counter),\n\n // {\n // message: stringToDisplay.substring(counter - 20, counter),\n // files: streamingCompleted\n // ? [\n // {\n // url: \"https://next.genexus.ai\",\n // caption: \"Mars Exploration Contract\"\n // },\n // {\n // url: \"https://gx-chameleon.netlify.app\",\n // caption: \"Venus Exploration Contract\"\n // }\n // ]\n // : undefined\n // },\n status: streamingCompleted ? \"complete\" : \"streaming\"\n },\n mode\n );\n\n if (!streamingCompleted) {\n dummyStreaming(chatRef, counter + 20, stringToDisplay, \"concat\");\n } else {\n chatRef.generatingResponse = false;\n }\n },\n counter % 200 === 0 ? 50 : 40\n );\n}\n\nexport const chatTranslations: ChatTranslations = {\n accessibleName: {\n clearChat: \"Clear chat\",\n copyResponseButton: \"Copy assistant response\",\n downloadCodeButton: \"Download code\",\n imagePicker: \"Select images\",\n removeUploadedImage: \"Remove uploaded image\",\n sendButton: \"Send\",\n sendInput: \"Message\",\n stopGeneratingAnswerButton: \"Stop generating answer\"\n },\n placeholder: {\n sendInput: \"Ask me a question...\"\n },\n text: {\n copyCodeButton: \"Copy code\",\n processing: `Processing with ${PROCESSING_PLACEHOLDER}`,\n sourceFiles: \"Source files:\"\n }\n};\n\nexport const chatRecord: ChatMessage[] = [\n { id: \"1\", role: \"user\", content: \"Hello world\" },\n { id: \"2\", role: \"assistant\", content: ASSISTANT_RESPONSE_MARKDOWN },\n { id: \"3\", role: \"user\", content: \"Hello world 1\" },\n { id: \"4\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"5\", role: \"user\", content: \"Hello world 2\" },\n { id: \"6\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"7\", role: \"user\", content: \"Hello world 3\" },\n { id: \"8\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN },\n { id: \"9\", role: \"user\", content: \"Hello world 4\" },\n { id: \"10\", role: \"assistant\", content: ASSISTANT_RESPONSE_SHORT_MARKDOWN }\n];\n\nexport const longChatRecord: ChatMessage[] = Array.from(\n { length: 40 },\n (_, index) =>\n index % 2 === 0\n ? {\n id: `index: ${index}`,\n role: \"user\",\n content:\n `index: ${index}` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n`\n }\n : {\n id: `index: ${index}`,\n role: \"assistant\",\n content:\n ASSISTANT_RESPONSE_SHORT_MARKDOWN +\n `\\nindex: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n` +\n `index: ${index}\\n`\n }\n);\n\nexport const codeFixerRecord: ChatMessage[] = [\n {\n id: \"1\",\n role: \"user\",\n content: \"Please give me an example about...\",\n metadata: \"14:55\"\n },\n {\n id: \"2\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Action required example. Action required example. Action required example.\",\n metadata: \"14:56\"\n },\n {\n id: \"3\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Some fields contain missing or invalid data, which may prevent the process from completing correctly. Review your input carefully and make any necessary corrections before continuing.\",\n metadata: \"14:57\",\n parts: \"warning\"\n },\n {\n id: \"4\",\n role: \"error\",\n content:\n \"An unexpected error occurred while processing your request, and the operation couldn’t be completed.Please check your internet connection or try again later. If the problem persists, contact support.\",\n metadata: \"14:58\"\n },\n {\n id: \"5\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"Your information has been saved successfully, and all changes are now reflected in your account. You can continue with the next steps or return to the dashboard at any time.\",\n metadata: \"14:59\",\n parts: \"success\"\n },\n {\n id: \"6\",\n role: \"user\",\n content:\n \"Implement the function calculate_average_grade in grades.py that takes a list of grades as input and returns the average grade as a floating-point number\",\n metadata: \"15:00\"\n },\n {\n id: \"7\",\n role: \"assistant\",\n status: \"complete\",\n content:\n \"You can provide further details or updates regarding your support ticket and its associated code. Your input here helps us better understand and address your issue effectively.\",\n metadata: \"15:01\"\n },\n {\n id: \"8\",\n role: \"assistant\",\n status: \"waiting\",\n content: \"You can provide further details or updates\"\n },\n {\n id: \"9\",\n role: \"assistant\",\n status: \"complete\",\n content: ASSISTANT_RESPONSE_SHORT_MARKDOWN\n }\n];\n",":host {\n block-size: 100%;\n display: grid;\n}\n","import {\n Component,\n Host,\n h,\n State,\n Prop,\n getAssetPath,\n Method\n} from \"@stencil/core\";\nimport { mercuryChatMessageRender } from \"../../components/chat/code-render\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst AI_AVATAR = getAssetPath(\n `./gx-ide-assets/chat-welcome/images/ai-avatar.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/elevation\",\n \"components/chat\"\n];\n\nimport {\n chatCallbacksWithChatRef,\n chatTranslations,\n codeFixerRecord\n} from \"./callbacks\";\nimport {\n ChatMessage,\n ChatInternalCallbacks\n} from \"@genexus/chameleon-controls-library\";\nimport { ChatMessageUser } from \"@genexus/chameleon-controls-library/dist/types/components/chat/types\";\n\n@Component({\n tag: \"gx-ide-sc-chat-container\",\n styleUrl: \"chat-showcase.scss\",\n shadow: true\n})\nexport class GxIdeScChatContainer {\n #chatContainerRef!: HTMLGxIdeChatContainerElement;\n #chatWelcomeRef!: HTMLGxIdeChatWelcomeElement;\n #chChatRef!: HTMLChChatElement;\n #chatCallbacks: ChatInternalCallbacks;\n\n /\n * If true, the chat items length will be 0, since this is a requirement for dipslaying the ch-chat\n * \"empty-chat\" slot that welcome screen uses to display.\n /\n @Prop() readonly mode: \"welcome\" \| \"messages-sample\" \| \"empty\" =\n \"messages-sample\";\n\n @State() generatingResponse: boolean = false;\n @State() loadingState:\n \| \"all-records-loaded\"\n \| \"initial\"\n \| \"loading\"\n \| \"more-data-to-fetch\" = \"all-records-loaded\";\n @State() showAdditionalContent: boolean = false;\n @State() conversationCopied: boolean = false;\n @State() assistantStatus: string = \"Getting Data\";\n @State() chatItems: ChatMessage[] = [];\n\n /\n It will exit the wellcome screen and remove it from the dom.\n */\n @Method()\n async exitWelcome() {\n // hand exitWelcome to gx-ide-chat-welcome\n this.#chatWelcomeRef.exitWelcome();\n }\n\n #copyConversationCallbackHandler = () => {\n this.#chatContainerRef.showCopyConversationMessage();\n };\n\n #deleteConversationCallbackHandler = () => {};\n\n componentDidLoad() {\n setTimeout(() => {\n this.assistantStatus = \"Creating Data Base..\";\n }, 1000);\n }\n\n componentDidRender() {\n if (!this.#chatCallbacks && this.#chChatRef) {\n this.#chatCallbacks = chatCallbacksWithChatRef(this.#chChatRef);\n }\n }\n\n async componentWillLoad() {\n if (this.mode === \"messages-sample\") {\n this.chatItems = codeFixerRecord;\n } else if (this.mode === \"welcome\") {\n this.chatItems = [];\n } else if (this.mode === \"empty\") {\n this.chatItems = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content: \"Hello! I am your assistant.\",\n metadata: \"14:56\"\n }\n ];\n }\n }\n #suggestedPrompRequestedCallbackHandler = async (\n prompt: string\n ): Promise<void> => {\n let assistantFinalResponse: string;\n if (prompt.toLowerCase().includes(\"transaction\")) {\n assistantFinalResponse =\n 'To create a transaction in GeneXus, start by opening your KB (Knowledge Base) and selecting \"Transaction\" from the \"New Object\" options. Give it a name and define its attributes, starting with a primary key followed by the related data fields. GeneXus will automatically infer the data structure and relationships based on how you define the attributes and their nesting. Once saved, it generates the necessary database tables and forms for inserting, updating, and deleting records. You can then run the application to test the transaction directly in your browser.';\n } else if (prompt.toLowerCase().includes(\"entity\")) {\n assistantFinalResponse =\n 'In GeneXus, creating an entity usually means defining a Transaction object that represents a real-world concept like \"Customer\" or \"Product.\" To do this, create a new Transaction, name it after the entity, and define its attributes—starting with a unique identifier (like CustomerId) and then adding other fields (like CustomerName, CustomerEmail). GeneXus treats this Transaction as an entity and uses it to generate the corresponding table and interface automatically.';\n } else {\n assistantFinalResponse =\n \"Sorry, I didn’t catch that—mind rephrasing it? 😅\";\n }\n\n const userPrompt: ChatMessageUser = {\n id: \"1\",\n role: \"user\",\n content: prompt\n };\n this.#chChatRef.addNewMessage(userPrompt);\n setTimeout(() => {\n this.#chChatRef.addNewMessage({\n id: `${new Date().getTime()}`,\n role: \"assistant\",\n content: \"Analyzing\",\n status: \"waiting\"\n });\n setTimeout(() => {\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Processing with Chat with LLMs\",\n status: \"waiting\"\n },\n \"replace\"\n );\n setTimeout(() => {\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Getting information\",\n status: \"waiting\"\n },\n \"replace\"\n );\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: assistantFinalResponse,\n status: \"complete\"\n },\n \"replace\"\n );\n }, 1500);\n }, 1500);\n }, 100);\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <gx-ide-chat-container\n chatTitle=\"GeneXus Assistant\"\n copyConversationCallback={this.#copyConversationCallbackHandler}\n deleteConversationCallback={this.#deleteConversationCallbackHandler}\n ref={el =>\n (this.#chatContainerRef = el as HTMLGxIdeChatContainerElement)\n }\n class=\"elevation-1\"\n >\n <ch-chat\n callbacks={this.#chatCallbacks}\n class=\"chat\"\n generatingResponse={this.generatingResponse}\n loadingState={this.loadingState} // \"all-records-loaded\" to display the welcome screen\n renderItem={mercuryChatMessageRender(\n \"components/markdown-viewer\",\n AI_AVATAR,\n \"Nexa\"\n )}\n items={this.chatItems} // length 0 to display the welcome screen\n showAdditionalContent={this.showAdditionalContent}\n translations={chatTranslations}\n ref={el => (this.#chChatRef = el as HTMLChChatElement)}\n >\n <gx-ide-chat-welcome\n ref={el =>\n (this.#chatWelcomeRef = el as HTMLGxIdeChatWelcomeElement)\n }\n slot=\"empty-chat\"\n suggestedPrompRequestedCallback={\n this.#suggestedPrompRequestedCallbackHandler\n }\n suggestedPrompts={[\n \"I need to represente a product entity\",\n \"I want to create a Customer Tracking application. Can you help me with the architecture?\",\n \"I need to create a REST API for my application\"\n ]}\n ></gx-ide-chat-welcome>\n <div slot=\"additional-content\">\n Custom content that is rendered when the chat renders content\n </div>\n </ch-chat>\n </gx-ide-chat-container>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -83,7 +83,7 @@
   animation-delay: var(--delay, 0s);
   border: 0;
   padding: var(--mer-spacing--sm);
-  border-radius: 30px;
+  border-radius: 44px;
   font-size: 14px;
   font-style: oblique;
   cursor: pointer;
@@ -92,10 +92,14 @@
   gap: var(--mer-spacing--xs);
   background-color: #22334a;
   font-weight: 100;
+  max-inline-size: 300px;
 }
 .suggested-prompts__button:hover {
   background-color: #1a2b42;
 }
+.suggested-prompts__icon {
+  flex-shrink: 0;
+}
 @keyframes fadeInSuggestedPromptButton {
   from {

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

@@ -106,7 +106,7 @@ export class GxIdeChatWelcome {
                 "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" }))))))))));
+            }, "data-prommpt": prompt }, h("ch-image", { src: AI_ICON, class: "icon-md suggested-prompts__icon" }), prompt, h("ch-image", { src: ARROW_RIGHT_ICON, class: "icon-md suggested-prompts__icon" }))))))))));
     }
     static get is() { return "gx-ide-chat-welcome"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"chat-welcome.js","sourceRoot":"","sources":["../../../../src/components/chat/chat-welcome/chat-welcome.tsx"],"names":[],"mappings":"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~~gBAAU~~,GAAG,EAAE,OAAO,~~EAAE~~,KAAK,EAAC,~~SAAS~~,~~GAAY~~;~~wBAClD~~,MAAM;wBACP,~~gBAAU~~,GAAG,EAAE,gBAAgB,~~EAAE~~,KAAK,EAAC,~~SAAS~~,~~GAAY~~,~~CACrD~~,CACN,CACN,CAAC,CACC,CACN,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}
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\n src={AI_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n {prompt}\n <ch-image\n src={ARROW_RIGHT_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n </button>\n </li>\n ))}\n </ul>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/showcase/chat-container/chat.showcase.js CHANGED Viewed

@@ -127,7 +127,11 @@ export class GxIdeScChatContainer {
         }
     }
     render() {
-        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("gx-ide-chat-container", { chatTitle: "GeneXus Assistant", copyConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_copyConversationCallbackHandler, "f"), deleteConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_deleteConversationCallbackHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatContainerRef, el, "f")), class: "elevation-1" }, h("ch-chat", { callbacks: __classPrivateFieldGet(this, _GxIdeScChatContainer_chatCallbacks, "f"), class: "chat", generatingResponse: this.generatingResponse, loadingState: this.loadingState, renderItem: mercuryChatMessageRender("components/markdown-viewer", AI_AVATAR, "Nexa"), items: this.chatItems, showAdditionalContent: this.showAdditionalContent, translations: chatTranslations, ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chChatRef, el, "f")) }, h("gx-ide-chat-welcome", { ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatWelcomeRef, el, "f")), slot: "empty-chat", suggestedPrompRequestedCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler, "f") }), h("div", { slot: "additional-content" }, "Custom content that is rendered when the chat renders content")))));
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("gx-ide-chat-container", { chatTitle: "GeneXus Assistant", copyConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_copyConversationCallbackHandler, "f"), deleteConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_deleteConversationCallbackHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatContainerRef, el, "f")), class: "elevation-1" }, h("ch-chat", { callbacks: __classPrivateFieldGet(this, _GxIdeScChatContainer_chatCallbacks, "f"), class: "chat", generatingResponse: this.generatingResponse, loadingState: this.loadingState, renderItem: mercuryChatMessageRender("components/markdown-viewer", AI_AVATAR, "Nexa"), items: this.chatItems, showAdditionalContent: this.showAdditionalContent, translations: chatTranslations, ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chChatRef, el, "f")) }, h("gx-ide-chat-welcome", { ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatWelcomeRef, el, "f")), slot: "empty-chat", suggestedPrompRequestedCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler, "f"), suggestedPrompts: [
+                "I need to represente a product entity",
+                "I want to create a Customer Tracking application. Can you help me with the architecture?",
+                "I need to create a REST API for my application"
+            ] }), h("div", { slot: "additional-content" }, "Custom content that is rendered when the chat renders content")))));
     }
     static get is() { return "gx-ide-sc-chat-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/showcase/chat-container/chat.showcase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chat.showcase.js","sourceRoot":"","sources":["../../../src/showcase/chat-container/chat.showcase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n State,\n Prop,\n getAssetPath,\n Method\n} from \"@stencil/core\";\nimport { mercuryChatMessageRender } from \"../../components/chat/code-render\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst AI_AVATAR = getAssetPath(\n `./gx-ide-assets/chat-welcome/images/ai-avatar.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/elevation\",\n \"components/chat\"\n];\n\nimport {\n chatCallbacksWithChatRef,\n chatTranslations,\n codeFixerRecord\n} from \"./callbacks\";\nimport {\n ChatMessage,\n ChatInternalCallbacks\n} from \"@genexus/chameleon-controls-library\";\nimport { ChatMessageUser } from \"@genexus/chameleon-controls-library/dist/types/components/chat/types\";\n\n@Component({\n tag: \"gx-ide-sc-chat-container\",\n styleUrl: \"chat-showcase.scss\",\n shadow: true\n})\nexport class GxIdeScChatContainer {\n #chatContainerRef!: HTMLGxIdeChatContainerElement;\n #chatWelcomeRef!: HTMLGxIdeChatWelcomeElement;\n #chChatRef!: HTMLChChatElement;\n #chatCallbacks: ChatInternalCallbacks;\n\n /*\n If true, the chat items length will be 0, since this is a requirement for dipslaying the ch-chat\n * \"empty-chat\" slot that welcome screen uses to display.\n /\n @Prop() readonly mode: \"welcome\" \| \"messages-sample\" \| \"empty\" =\n \"messages-sample\";\n\n @State() generatingResponse: boolean = false;\n @State() loadingState:\n \| \"all-records-loaded\"\n \| \"initial\"\n \| \"loading\"\n \| \"more-data-to-fetch\" = \"all-records-loaded\";\n @State() showAdditionalContent: boolean = false;\n @State() conversationCopied: boolean = false;\n @State() assistantStatus: string = \"Getting Data\";\n @State() chatItems: ChatMessage[] = [];\n\n /\n It will exit the wellcome screen and remove it from the dom.\n */\n @Method()\n async exitWelcome() {\n // hand exitWelcome to gx-ide-chat-welcome\n this.#chatWelcomeRef.exitWelcome();\n }\n\n #copyConversationCallbackHandler = () => {\n this.#chatContainerRef.showCopyConversationMessage();\n };\n\n #deleteConversationCallbackHandler = () => {};\n\n componentDidLoad() {\n setTimeout(() => {\n this.assistantStatus = \"Creating Data Base..\";\n }, 1000);\n }\n\n componentDidRender() {\n if (!this.#chatCallbacks && this.#chChatRef) {\n this.#chatCallbacks = chatCallbacksWithChatRef(this.#chChatRef);\n }\n }\n\n async componentWillLoad() {\n if (this.mode === \"messages-sample\") {\n this.chatItems = codeFixerRecord;\n } else if (this.mode === \"welcome\") {\n this.chatItems = [];\n } else if (this.mode === \"empty\") {\n this.chatItems = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content: \"Hello! I am your assistant.\",\n metadata: \"14:56\"\n }\n ];\n }\n }\n #suggestedPrompRequestedCallbackHandler = async (\n prompt: string\n ): Promise<void> => {\n let assistantFinalResponse: string;\n if (prompt.toLowerCase().includes(\"transaction\")) {\n assistantFinalResponse =\n 'To create a transaction in GeneXus, start by opening your KB (Knowledge Base) and selecting \"Transaction\" from the \"New Object\" options. Give it a name and define its attributes, starting with a primary key followed by the related data fields. GeneXus will automatically infer the data structure and relationships based on how you define the attributes and their nesting. Once saved, it generates the necessary database tables and forms for inserting, updating, and deleting records. You can then run the application to test the transaction directly in your browser.';\n } else if (prompt.toLowerCase().includes(\"entity\")) {\n assistantFinalResponse =\n 'In GeneXus, creating an entity usually means defining a Transaction object that represents a real-world concept like \"Customer\" or \"Product.\" To do this, create a new Transaction, name it after the entity, and define its attributes—starting with a unique identifier (like CustomerId) and then adding other fields (like CustomerName, CustomerEmail). GeneXus treats this Transaction as an entity and uses it to generate the corresponding table and interface automatically.';\n } else {\n assistantFinalResponse =\n \"Sorry, I didn’t catch that—mind rephrasing it? 😅\";\n }\n\n const userPrompt: ChatMessageUser = {\n id: \"1\",\n role: \"user\",\n content: prompt\n };\n this.#chChatRef.addNewMessage(userPrompt);\n setTimeout(() => {\n this.#chChatRef.addNewMessage({\n id: `${new Date().getTime()}`,\n role: \"assistant\",\n content: \"Analyzing\",\n status: \"waiting\"\n });\n setTimeout(() => {\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Processing with Chat with LLMs\",\n status: \"waiting\"\n },\n \"replace\"\n );\n setTimeout(() => {\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Getting information\",\n status: \"waiting\"\n },\n \"replace\"\n );\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: assistantFinalResponse,\n status: \"complete\"\n },\n \"replace\"\n );\n }, 1500);\n }, 1500);\n }, 100);\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <gx-ide-chat-container\n chatTitle=\"GeneXus Assistant\"\n copyConversationCallback={this.#copyConversationCallbackHandler}\n deleteConversationCallback={this.#deleteConversationCallbackHandler}\n ref={el =>\n (this.#chatContainerRef = el as HTMLGxIdeChatContainerElement)\n }\n class=\"elevation-1\"\n >\n <ch-chat\n callbacks={this.#chatCallbacks}\n class=\"chat\"\n generatingResponse={this.generatingResponse}\n loadingState={this.loadingState} // \"all-records-loaded\" to display the welcome screen\n renderItem={mercuryChatMessageRender(\n \"components/markdown-viewer\",\n AI_AVATAR,\n \"Nexa\"\n )}\n items={this.chatItems} // length 0 to display the welcome screen\n showAdditionalContent={this.showAdditionalContent}\n translations={chatTranslations}\n ref={el => (this.#chChatRef = el as HTMLChChatElement)}\n >\n <gx-ide-chat-welcome\n ref={el =>\n (this.#chatWelcomeRef = el as HTMLGxIdeChatWelcomeElement)\n }\n slot=\"empty-chat\"\n suggestedPrompRequestedCallback={\n this.#suggestedPrompRequestedCallbackHandler\n }\n ></gx-ide-chat-welcome>\n <div slot=\"additional-content\">\n Custom content that is rendered when the chat renders content\n </div>\n </ch-chat>\n </gx-ide-chat-container>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"chat.showcase.js","sourceRoot":"","sources":["../../../src/showcase/chat-container/chat.showcase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n State,\n Prop,\n getAssetPath,\n Method\n} from \"@stencil/core\";\nimport { mercuryChatMessageRender } from \"../../components/chat/code-render\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst AI_AVATAR = getAssetPath(\n `./gx-ide-assets/chat-welcome/images/ai-avatar.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/elevation\",\n \"components/chat\"\n];\n\nimport {\n chatCallbacksWithChatRef,\n chatTranslations,\n codeFixerRecord\n} from \"./callbacks\";\nimport {\n ChatMessage,\n ChatInternalCallbacks\n} from \"@genexus/chameleon-controls-library\";\nimport { ChatMessageUser } from \"@genexus/chameleon-controls-library/dist/types/components/chat/types\";\n\n@Component({\n tag: \"gx-ide-sc-chat-container\",\n styleUrl: \"chat-showcase.scss\",\n shadow: true\n})\nexport class GxIdeScChatContainer {\n #chatContainerRef!: HTMLGxIdeChatContainerElement;\n #chatWelcomeRef!: HTMLGxIdeChatWelcomeElement;\n #chChatRef!: HTMLChChatElement;\n #chatCallbacks: ChatInternalCallbacks;\n\n /*\n If true, the chat items length will be 0, since this is a requirement for dipslaying the ch-chat\n * \"empty-chat\" slot that welcome screen uses to display.\n /\n @Prop() readonly mode: \"welcome\" \| \"messages-sample\" \| \"empty\" =\n \"messages-sample\";\n\n @State() generatingResponse: boolean = false;\n @State() loadingState:\n \| \"all-records-loaded\"\n \| \"initial\"\n \| \"loading\"\n \| \"more-data-to-fetch\" = \"all-records-loaded\";\n @State() showAdditionalContent: boolean = false;\n @State() conversationCopied: boolean = false;\n @State() assistantStatus: string = \"Getting Data\";\n @State() chatItems: ChatMessage[] = [];\n\n /\n It will exit the wellcome screen and remove it from the dom.\n */\n @Method()\n async exitWelcome() {\n // hand exitWelcome to gx-ide-chat-welcome\n this.#chatWelcomeRef.exitWelcome();\n }\n\n #copyConversationCallbackHandler = () => {\n this.#chatContainerRef.showCopyConversationMessage();\n };\n\n #deleteConversationCallbackHandler = () => {};\n\n componentDidLoad() {\n setTimeout(() => {\n this.assistantStatus = \"Creating Data Base..\";\n }, 1000);\n }\n\n componentDidRender() {\n if (!this.#chatCallbacks && this.#chChatRef) {\n this.#chatCallbacks = chatCallbacksWithChatRef(this.#chChatRef);\n }\n }\n\n async componentWillLoad() {\n if (this.mode === \"messages-sample\") {\n this.chatItems = codeFixerRecord;\n } else if (this.mode === \"welcome\") {\n this.chatItems = [];\n } else if (this.mode === \"empty\") {\n this.chatItems = [\n {\n id: \"1\",\n role: \"assistant\",\n status: \"complete\",\n content: \"Hello! I am your assistant.\",\n metadata: \"14:56\"\n }\n ];\n }\n }\n #suggestedPrompRequestedCallbackHandler = async (\n prompt: string\n ): Promise<void> => {\n let assistantFinalResponse: string;\n if (prompt.toLowerCase().includes(\"transaction\")) {\n assistantFinalResponse =\n 'To create a transaction in GeneXus, start by opening your KB (Knowledge Base) and selecting \"Transaction\" from the \"New Object\" options. Give it a name and define its attributes, starting with a primary key followed by the related data fields. GeneXus will automatically infer the data structure and relationships based on how you define the attributes and their nesting. Once saved, it generates the necessary database tables and forms for inserting, updating, and deleting records. You can then run the application to test the transaction directly in your browser.';\n } else if (prompt.toLowerCase().includes(\"entity\")) {\n assistantFinalResponse =\n 'In GeneXus, creating an entity usually means defining a Transaction object that represents a real-world concept like \"Customer\" or \"Product.\" To do this, create a new Transaction, name it after the entity, and define its attributes—starting with a unique identifier (like CustomerId) and then adding other fields (like CustomerName, CustomerEmail). GeneXus treats this Transaction as an entity and uses it to generate the corresponding table and interface automatically.';\n } else {\n assistantFinalResponse =\n \"Sorry, I didn’t catch that—mind rephrasing it? 😅\";\n }\n\n const userPrompt: ChatMessageUser = {\n id: \"1\",\n role: \"user\",\n content: prompt\n };\n this.#chChatRef.addNewMessage(userPrompt);\n setTimeout(() => {\n this.#chChatRef.addNewMessage({\n id: `${new Date().getTime()}`,\n role: \"assistant\",\n content: \"Analyzing\",\n status: \"waiting\"\n });\n setTimeout(() => {\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Processing with Chat with LLMs\",\n status: \"waiting\"\n },\n \"replace\"\n );\n setTimeout(() => {\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: \"Getting information\",\n status: \"waiting\"\n },\n \"replace\"\n );\n this.#chChatRef.updateLastMessage(\n {\n role: \"assistant\",\n content: assistantFinalResponse,\n status: \"complete\"\n },\n \"replace\"\n );\n }, 1500);\n }, 1500);\n }, 100);\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <gx-ide-chat-container\n chatTitle=\"GeneXus Assistant\"\n copyConversationCallback={this.#copyConversationCallbackHandler}\n deleteConversationCallback={this.#deleteConversationCallbackHandler}\n ref={el =>\n (this.#chatContainerRef = el as HTMLGxIdeChatContainerElement)\n }\n class=\"elevation-1\"\n >\n <ch-chat\n callbacks={this.#chatCallbacks}\n class=\"chat\"\n generatingResponse={this.generatingResponse}\n loadingState={this.loadingState} // \"all-records-loaded\" to display the welcome screen\n renderItem={mercuryChatMessageRender(\n \"components/markdown-viewer\",\n AI_AVATAR,\n \"Nexa\"\n )}\n items={this.chatItems} // length 0 to display the welcome screen\n showAdditionalContent={this.showAdditionalContent}\n translations={chatTranslations}\n ref={el => (this.#chChatRef = el as HTMLChChatElement)}\n >\n <gx-ide-chat-welcome\n ref={el =>\n (this.#chatWelcomeRef = el as HTMLGxIdeChatWelcomeElement)\n }\n slot=\"empty-chat\"\n suggestedPrompRequestedCallback={\n this.#suggestedPrompRequestedCallbackHandler\n }\n suggestedPrompts={[\n \"I need to represente a product entity\",\n \"I want to create a Customer Tracking application. Can you help me with the architecture?\",\n \"I need to create a REST API for my application\"\n ]}\n ></gx-ide-chat-welcome>\n <div slot=\"additional-content\">\n Custom content that is rendered when the chat renders content\n </div>\n </ch-chat>\n </gx-ide-chat-container>\n </Host>\n );\n }\n}\n"]}

package/dist/components/chat-welcome.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil
 import { g as getIconPath } from './MERCURY_ASSETS.js';
 import { L as Locale } from './locale.js';
-const chatWelcomeCss = ":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)}}";
+const chatWelcomeCss = ":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:44px;font-size:14px;font-style:oblique;cursor:pointer;display:flex;align-items:center;gap:var(--mer-spacing--xs);background-color:#22334a;font-weight:100;max-inline-size:300px}.suggested-prompts__button:hover{background-color:#1a2b42}.suggested-prompts__icon{flex-shrink:0}@keyframes fadeInSuggestedPromptButton{from{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:translateX(0)}}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -111,7 +111,7 @@ const GxIdeChatWelcome = /*@__PURE__*/ proxyCustomElement(class GxIdeChatWelcome
                 "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" }))))))))));
+            }, "data-prommpt": prompt }, h("ch-image", { src: AI_ICON, class: "icon-md suggested-prompts__icon" }), prompt, h("ch-image", { src: ARROW_RIGHT_ICON, class: "icon-md suggested-prompts__icon" }))))))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/chat-welcome"]; }
     get el() { return this; }

package/dist/components/chat-welcome.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"chat-welcome.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,s8DAAs8D;;;;;;;;;;;;;;;;;;;ACe79D,MAAM,mBAAmB,GAAG,YAAY,CACtC,6DAA6D,CAC9D,CAAC;AACF,MAAM,SAAS,GAAG,YAAY,CAC5B,2DAA2D,CAC5D,CAAC;AAEF,MAAM,uBAAuB,GAAW,GAAG,CAAC;AAC5C,MAAM,0BAA0B,GAAW,GAAG,CAAC;AAC/C,MAAM,gCAAgC,GAAW,GAAG,CAAC;AACrD,MAAM,8BAA8B,GAAW,GAAG,CAAC;AACnD,MAAM,qBAAqB,GAAW,GAAG,CAAC;AAE1C,MAAM,OAAO,GAAG,WAAW,CAAC;IAC1B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AACH,MAAM,gBAAgB,GAAG,WAAW,CAAC;IACnC,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,aAAa;IACnB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AAEH,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,iBAAiB;IACjB,iBAAiB;IACjB,kBAAkB;CACnB,CAAC;MAQW,gBAAgB;;;;;;QAE3B,oDAAsB;QAsEtB,8CAAqB;YACnB,UAAU,CAAC;gBACT,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;gBACvB,UAAU,CAAC;oBACT,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;iBAClC,EAAE,8BAA8B,CAAC,CAAC;aACpC,EAAE,uBAAuB,GAAG,0BAA0B,CAAC,CAAC;SAC1D,EAAC;QAEF,6CAAoB,OAAO,CAAa;YACtC,MAAM,MAAM,GAAI,CAAC,CAAC,aAAmC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YACzE,MAAM,uBAAA,IAAI,uCAAe,MAAnB,IAAI,CAAiB,CAAC;YAC5B,IAAI,CAAC,+BAA+B,CAAC,MAAM,CAAC,CAAC;SAC9C,EAAC;QAEF,0CAAiB;YACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,MAAM,IAAI,OAAO,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC;SAC1E,EAAC;0BAjF6B,KAAK;oCAKK,KAAK;2BAKd,KAAK;;;;;;IAwBrC,MAAM,iBAAiB;QACrB,uBAAA,IAAI,qCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;;QAGlE,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,uBAAA,IAAI,yCAAiB,CAAC,YAAY,CAAC;SACxD;QACD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,CAAC,eAAe,GAAG,uBAAA,IAAI,yCAAiB,CAAC,eAAe,CAAC;SAC9D;QACD,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,CAAC,gBAAgB,GAAG,uBAAA,IAAI,yCAAiB,CAAC,gBAAgB,CAAC;SAChE;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,uBAAA,IAAI,2CAAmB,MAAvB,IAAI,CAAqB,CAAC;SAC3B;KACF;;;;IAMD,MAAM,WAAW;QACf,uBAAA,IAAI,uCAAe,MAAnB,IAAI,CAAiB,CAAC;KACvB;IAsBD,MAAM;QACJ,QACE,EAAC,IAAI,QACH,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,WACE,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,EAChE,KAAK,EAAE;gBACL,iBAAiB,EAAE,OAAO,mBAAmB,GAAG;gBAChD,uBAAuB,EAAE,GAAG,qBAAqB,IAAI;aACtD,IAED,cACE,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,EAC7D,KAAK,EAAE;gBACL,oBAAoB,EAAE,GAAG,uBAAuB,IAAI;gBACpD,uBAAuB,EAAE,GAAG,0BAA0B,IAAI;aAC3D,IAED,YACE,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,SAAS,GAAG,EAAE,GACzC,EACR,UAAI,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,YAAY,CAAM,EAClD,SAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,eAAe,CAAK,CAC/C,EAER,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,oBAAoB,KACjD,UAAI,KAAK,EAAC,mBAAmB,IAC1B,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,MACnC,UAAI,KAAK,EAAC,yBAAyB,IACjC,cACE,KAAK,EAAE;gBACL,2BAA2B,EAAE,IAAI;aAClC,EACD,OAAO,EAAE,uBAAA,IAAI,0CAAkB,EAC/B,KAAK,EAAE;gBACL,SAAS,EAAE,GAAG,gCAAgC,GAAG,CAAC,IAAI;aACvD,kBACa,MAAM,IAEpB,gBAAU,GAAG,EAAE,OAAO,EAAE,KAAK,EAAC,SAAS,GAAY,EAClD,MAAM,EACP,gBAAU,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAC,SAAS,GAAY,CACrD,CACN,CACN,CAAC,CACC,CACN,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/chat/chat-welcome/chat-welcome.scss?tag=gx-ide-chat-welcome&encapsulation=shadow","src/components/chat/chat-welcome/chat-welcome.tsx"],"sourcesContent":[":host {\n block-size: 100%;\n}\n\n$sharedPadding: var(--mer-spacing--md);\n\n.welcome-container {\n --opacity: 1;\n --translate-y: 0;\n opacity: var(--opacity);\n transform: translateY(var(--translate-y));\n transition: all var(--transition-duration);\n display: flex;\n block-size: 100%;\n grid-template-rows: max-content max-content;\n flex-direction: column;\n justify-content: space-between;\n background-repeat: no-repeat;\n background-size: cover;\n background-size: contain;\n\n &.hidden {\n --opacity: 0;\n --translate-y: 4px;\n }\n}\n\n%absolute-centered {\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n}\n\n.header {\n --opacity: 0;\n --translate-y: 3px;\n transition: all var(--transition-duration) var(--transition-delay)\n cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateY(var(--translate-y));\n opacity: var(--opacity);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n align-items: center;\n padding: $sharedPadding;\n\n &--visible {\n --opacity: 1;\n --translate-y: 0;\n }\n\n &__circle {\n $circleSize: 55px;\n inline-size: $circleSize;\n block-size: $circleSize;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin-block-end: -6px;\n }\n\n &__title {\n display: grid;\n text-align: center;\n margin: 0;\n text-align: center;\n white-space: pre-line;\n line-height: 1.3;\n font-weight: 600;\n font-size: var(--font-size-header-h3);\n }\n\n &__greeting {\n line-height: 1.4;\n text-align: center;\n font-weight: 300;\n }\n}\n\n.suggested-prompts {\n --opacity: 1;\n opacity: var(--opacity);\n transition: opacity var(--transition-duration);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n list-style: none;\n margin: 0;\n padding: $sharedPadding;\n\n &.hidden {\n --opacity: 0;\n }\n\n &__item {\n }\n\n &__button {\n opacity: 0;\n transform: translateX(-3px);\n animation: fadeInSuggestedPromptButton var(--mer-timing--regular) ease\n forwards;\n animation-delay: var(--delay, 0s);\n\n border: 0;\n padding: var(--mer-spacing--sm);\n border-radius: 30px;\n font-size: 14px; // TODO : Use a token when available\n font-style: oblique;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--xs);\n background-color: #22334a; // TODO : Use a token when available\n font-weight: 100;\n\n &:hover {\n background-color: #1a2b42;\n }\n }\n}\n\n@keyframes fadeInSuggestedPromptButton {\n from {\n opacity: 0;\n transform: translateX(-3px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","/* 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"],"version":3}
1	+ {"file":"chat-welcome.js","mappings":"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","names":[],"sources":["src/components/chat/chat-welcome/chat-welcome.scss?tag=gx-ide-chat-welcome&encapsulation=shadow","src/components/chat/chat-welcome/chat-welcome.tsx"],"sourcesContent":[":host {\n block-size: 100%;\n}\n\n$sharedPadding: var(--mer-spacing--md);\n\n.welcome-container {\n --opacity: 1;\n --translate-y: 0;\n opacity: var(--opacity);\n transform: translateY(var(--translate-y));\n transition: all var(--transition-duration);\n display: flex;\n block-size: 100%;\n grid-template-rows: max-content max-content;\n flex-direction: column;\n justify-content: space-between;\n background-repeat: no-repeat;\n background-size: cover;\n background-size: contain;\n\n &.hidden {\n --opacity: 0;\n --translate-y: 4px;\n }\n}\n\n%absolute-centered {\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n}\n\n.header {\n --opacity: 0;\n --translate-y: 3px;\n transition: all var(--transition-duration) var(--transition-delay)\n cubic-bezier(0.4, 0, 0.2, 1);\n transform: translateY(var(--translate-y));\n opacity: var(--opacity);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n align-items: center;\n padding: $sharedPadding;\n\n &--visible {\n --opacity: 1;\n --translate-y: 0;\n }\n\n &__circle {\n $circleSize: 55px;\n inline-size: $circleSize;\n block-size: $circleSize;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n margin-block-end: -6px;\n }\n\n &__title {\n display: grid;\n text-align: center;\n margin: 0;\n text-align: center;\n white-space: pre-line;\n line-height: 1.3;\n font-weight: 600;\n font-size: var(--font-size-header-h3);\n }\n\n &__greeting {\n line-height: 1.4;\n text-align: center;\n font-weight: 300;\n }\n}\n\n.suggested-prompts {\n --opacity: 1;\n opacity: var(--opacity);\n transition: opacity var(--transition-duration);\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--md);\n list-style: none;\n margin: 0;\n padding: $sharedPadding;\n\n &.hidden {\n --opacity: 0;\n }\n\n &__item {\n }\n\n &__button {\n opacity: 0;\n transform: translateX(-3px);\n animation: fadeInSuggestedPromptButton var(--mer-timing--regular) ease\n forwards;\n animation-delay: var(--delay, 0s);\n\n border: 0;\n padding: var(--mer-spacing--sm);\n border-radius: 44px; // Works with up to a a four lines button\n font-size: 14px; // TODO : Use a token when available\n font-style: oblique;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: var(--mer-spacing--xs);\n background-color: #22334a; // TODO : Use a token when available\n font-weight: 100;\n max-inline-size: 300px;\n\n &:hover {\n background-color: #1a2b42;\n }\n }\n\n &__icon {\n flex-shrink: 0;\n }\n}\n\n@keyframes fadeInSuggestedPromptButton {\n from {\n opacity: 0;\n transform: translateX(-3px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","/* 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\n src={AI_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n {prompt}\n <ch-image\n src={ARROW_RIGHT_ICON}\n class=\"icon-md suggested-prompts__icon\"\n ></ch-image>\n </button>\n </li>\n ))}\n </ul>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/gx-ide-sc-chat-container.js CHANGED Viewed

@@ -373,7 +373,11 @@ const GxIdeScChatContainer$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeScCha
         }
     }
     render() {
-        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("gx-ide-chat-container", { chatTitle: "GeneXus Assistant", copyConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_copyConversationCallbackHandler, "f"), deleteConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_deleteConversationCallbackHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatContainerRef, el, "f")), class: "elevation-1" }, h("ch-chat", { callbacks: __classPrivateFieldGet(this, _GxIdeScChatContainer_chatCallbacks, "f"), class: "chat", generatingResponse: this.generatingResponse, loadingState: this.loadingState, renderItem: mercuryChatMessageRender("components/markdown-viewer", AI_AVATAR, "Nexa"), items: this.chatItems, showAdditionalContent: this.showAdditionalContent, translations: chatTranslations, ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chChatRef, el, "f")) }, h("gx-ide-chat-welcome", { ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatWelcomeRef, el, "f")), slot: "empty-chat", suggestedPrompRequestedCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler, "f") }), h("div", { slot: "additional-content" }, "Custom content that is rendered when the chat renders content")))));
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("gx-ide-chat-container", { chatTitle: "GeneXus Assistant", copyConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_copyConversationCallbackHandler, "f"), deleteConversationCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_deleteConversationCallbackHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatContainerRef, el, "f")), class: "elevation-1" }, h("ch-chat", { callbacks: __classPrivateFieldGet(this, _GxIdeScChatContainer_chatCallbacks, "f"), class: "chat", generatingResponse: this.generatingResponse, loadingState: this.loadingState, renderItem: mercuryChatMessageRender("components/markdown-viewer", AI_AVATAR, "Nexa"), items: this.chatItems, showAdditionalContent: this.showAdditionalContent, translations: chatTranslations, ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chChatRef, el, "f")) }, h("gx-ide-chat-welcome", { ref: el => (__classPrivateFieldSet(this, _GxIdeScChatContainer_chatWelcomeRef, el, "f")), slot: "empty-chat", suggestedPrompRequestedCallback: __classPrivateFieldGet(this, _GxIdeScChatContainer_suggestedPrompRequestedCallbackHandler, "f"), suggestedPrompts: [
+                "I need to represente a product entity",
+                "I want to create a Customer Tracking application. Can you help me with the architecture?",
+                "I need to create a REST API for my application"
+            ] }), h("div", { slot: "additional-content" }, "Custom content that is rendered when the chat renders content")))));
     }
     static get style() { return chatShowcaseCss; }
 }, [1, "gx-ide-sc-chat-container", {