import { r as registerInstance, h, H as Host, a as getElement, g as getAssetPath } from './index-b153bfd0.js';
import { g as getIconPath } from './assets-manager-7d6fc08f.js';
import './mer-animated-dots-7cbae6ef.js';
import 'lit';
import 'lit/directives/when.js';
import 'lit/directives/if-defined.js';
import { L as Locale } from './locale-e5107fad.js';

const chatContainerCss = ".chat-container{background-color:var(--elevation-background-color, --color-accent-surface-elevation-1);display:grid;block-size:100%;overflow:auto;grid-template-rows:1fr;position:relative;--chat-common-border-radius:4px}.chat-container.with-header{grid-template-rows:max-content 1fr}.section{display:contents}.header{padding:4px 4px 4px 12px;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-gap-l);color:var(--color-text-neutral-default);border-block-end:1px solid var(--color-border-surface-on-elevation-1)}.header .button-copy-chat,.header .button-delete-chat{--control-border-color:transparent !important}.header .button-delete-chat:hover{filter:brightness(1.3)}.header .button-delete-chat:active{filter:brightness(0.8)}.ch-chat-container{overflow:auto;position:relative;display:grid}.chat-container__conversation-copied{position:absolute;z-index:1;inline-size:100%;block-size:100%;background:var(--color-accent-neutral-black);opacity:0.75;backdrop-filter:saturate(180%) blur(20px);display:grid;align-items:center;justify-content:center;text-align:center;padding:var(--spacing-padding-xxxl);pointer-events:none;overflow:hidden;animation:fadeIn 100ms ease-in-out forwards;opacity:0}.chat-container__conversation-copied-wrapper{display:flex;align-items:center;gap:var(--spacing-gap-l);position:relative;inset-block-start:4px;opacity:0;animation:liftUp var(--timing-fast) ease-in-out forwards;animation-delay:var(--timing-fast)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes liftUp{from{opacity:0;inset-block-start:4px}to{opacity:1;inset-block-start:0}}.chat::part(code-block-header__copy){--copy-text-opacity:0;--copy-text-translate-x:8px;opacity:var(--copy-text-opacity);pointer-events:none;transform:translateX(var(--copy-text-translate-x));transition:opacity 100ms ease-in-out, transform 100ms ease-in-out;font-size:var(--font-size-body-s)}.chat::part(code-block-header__copy-copied){--copy-button-pointer-events:none !important;--copy-text-opacity:1;--copy-text-translate-x:0}.chat::part(code-block-header){align-items:center;display:flex;gap:var(--spacing-gap-m)}";

var __classPrivateFieldSet$1 = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m")
        throw new TypeError("Private method is not writable");
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet$1 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _GxIdeChatContainer_menuItems, _GxIdeChatContainer_componentLocale, _GxIdeChatContainer_showMenuHandler, _GxIdeChatContainer_menuExpandedChangeHandler, _GxIdeChatContainer_copyConversationHandler, _GxIdeChatContainer_deleteConversationHandler;
const CSS_BUNDLES$1 = [
    "resets/box-sizing",
    "utils/typography",
    "chameleon/scrollbar",
    "components/button",
    "components/dropdown",
    "components/icon",
    "utils/elevation"
];
const COPY_ICON = getIconPath({
    category: "system",
    name: "copy",
    colorType: "primary"
});
const DELETE_ICON = getIconPath({
    category: "system",
    name: "delete-outlined",
    colorType: "primary"
});
const CONVERSATION_ICON = getIconPath({
    category: "objects",
    name: "conversational-flows"
});
const MORE_HORIZONTAL_ICON = getIconPath({
    category: "system",
    name: "more-horizontal",
    colorType: "interactive"
});
const GxIdeChatContainer = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        _GxIdeChatContainer_menuItems.set(this, [
            { type: "slot", id: "delete-chat-button" },
            { type: "slot", id: "copy-chat-button" }
        ]);
        /**
         * The component hard-coded strings translations.
         */
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdeChatContainer_componentLocale.set(this, void 0);
        _GxIdeChatContainer_showMenuHandler.set(this, () => {
            this.menuIsExpanded = true;
        });
        _GxIdeChatContainer_menuExpandedChangeHandler.set(this, (event) => {
            this.menuIsExpanded = event.detail;
        });
        _GxIdeChatContainer_copyConversationHandler.set(this, () => {
            if (this.copyConversationCallback) {
                this.copyConversationCallback();
                this.menuIsExpanded = false;
            }
        });
        _GxIdeChatContainer_deleteConversationHandler.set(this, () => {
            if (this.deleteConversationCallback) {
                this.deleteConversationCallback();
                this.menuIsExpanded = false;
            }
        });
        this.displayConversationCopiedMessage = false;
        this.menuIsExpanded = false;
        this.chatTitle = undefined;
        this.copyConversationCallback = undefined;
        this.deleteConversationCallback = undefined;
        this.displayWelcomeScreen = false;
    }
    async componentWillLoad() {
        __classPrivateFieldSet$1(this, _GxIdeChatContainer_componentLocale, await Locale.getComponentStrings(this.el), "f");
    }
    /**
     * It will display a feedback message that the conversation has been copied
     */
    async showCopyConversationMessage() {
        this.displayConversationCopiedMessage = true;
        setTimeout(() => {
            this.displayConversationCopiedMessage = false;
        }, 2000);
    }
    render() {
        const renderHeader = this.chatTitle ||
            this.copyConversationCallback ||
            this.deleteConversationCallback;
        const renderButtonsGroup = this.copyConversationCallback || this.deleteConversationCallback;
        return (h(Host, { class: {
                "chat-container": true,
                "with-header": !!renderHeader
            } }, h("ch-theme", { model: CSS_BUNDLES$1 }), h("section", { class: "section" }, renderHeader && (h("header", { class: "header caption-semi-bold-l" }, this.chatTitle && this.chatTitle, renderButtonsGroup && (h("ch-action-menu-render", { class: "dropdown", blockAlign: "inside-start", inlineAlign: "inside-end", model: __classPrivateFieldGet$1(this, _GxIdeChatContainer_menuItems, "f"), expanded: this.menuIsExpanded, onExpandedChange: __classPrivateFieldGet$1(this, _GxIdeChatContainer_menuExpandedChangeHandler, "f") }, h("button", { class: "button-tertiary button-icon-only", onClick: __classPrivateFieldGet$1(this, _GxIdeChatContainer_showMenuHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet$1(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel, title: __classPrivateFieldGet$1(this, _GxIdeChatContainer_componentLocale, "f").showMenuAriaLabel }, h("ch-image", { class: "icon-m", src: MORE_HORIZONTAL_ICON })), this.copyConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-copy-chat", slot: "copy-chat-button", onClick: __classPrivateFieldGet$1(this, _GxIdeChatContainer_copyConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet$1(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel, title: __classPrivateFieldGet$1(this, _GxIdeChatContainer_componentLocale, "f").copyConversationAriaLabel }, h("ch-image", { class: "icon-m", src: COPY_ICON }), __classPrivateFieldGet$1(this, _GxIdeChatContainer_componentLocale, "f").copyConversationLabel)), this.deleteConversationCallback && (h("button", { class: "button-tertiary button-icon-and-text button-delete-chat", slot: "delete-chat-button", onClick: __classPrivateFieldGet$1(this, _GxIdeChatContainer_deleteConversationHandler, "f"), type: "button", "aria-label": __classPrivateFieldGet$1(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel, title: __classPrivateFieldGet$1(this, _GxIdeChatContainer_componentLocale, "f").deleteConversationAriaLabel }, h("ch-image", { class: "icon-m", src: DELETE_ICON }), __classPrivateFieldGet$1(this, _GxIdeChatContainer_componentLocale, "f").clearConversationLabel)))))), h("section", { class: "ch-chat-container" }, h("slot", null), this.displayConversationCopiedMessage && (h("div", { class: "chat-container__conversation-copied" }, h("div", { class: "chat-container__conversation-copied-wrapper" }, h("ch-image", { class: "icon-m", src: CONVERSATION_ICON }), h("p", { class: "body-regular-l" }, "conversation copied"))))))));
    }
    static get assetsDirs() { return ["gx-ide-assets/chat-container"]; }
    get el() { return getElement(this); }
};
_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(--spacing-gap-xl);align-items:center;padding:16px}.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:calc(8px * -1)}.header__title{display:grid;text-align:center;margin:0;text-align:center;white-space:pre-line;line-height:var(--line-height-regular);font-weight:var(--font-style-semi-bold);font-size:var(--font-size-header-h3)}.header__greeting{line-height:var(--line-height-relaxed);text-align:center;font-weight:var(--font-style-regular)}.suggested-prompts{--opacity:1;opacity:var(--opacity);transition:opacity var(--transition-duration);display:flex;flex-direction:column;gap:var(--spacing-gap-xl);list-style:none;margin:0;padding:16px}.suggested-prompts.hidden{--opacity:0}.suggested-prompts__button{opacity:0;transform:translateX(-3px);animation:fadeInSuggestedPromptButton var(--timing-regular) ease forwards;animation-delay:var(--delay, 0s);padding:var(--spacing-padding-l);border-radius:44px;font-style:oblique;cursor:pointer;display:flex;align-items:center;gap:var(--spacing-gap-m);max-inline-size:300px;background-color:var(--color-component-button-suggestion-accent-default);color:var(--color-text-neutral-default);border:1px solid var(--color-component-button-suggestion-border-default)}.suggested-prompts__button:hover{background-color:var(--color-component-button-suggestion-accent-hover);border-color:var(--color-component-button-suggestion-border-hover);color:var(--color-text-primary-hover)}.suggested-prompts__button:active{background-color:var(--color-component-button-suggestion-accent-pressed);border-color:var(--color-component-button-suggestion-border-pressed);color:var(--color-text-neutral-pressed)}.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)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m")
        throw new TypeError("Private method is not writable");
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _GxIdeChatWelcome_componentLocale, _GxIdeChatWelcome_animationEntrance, _GxIdeChatWelcome_sendPromptToChat, _GxIdeChatWelcome_animationExit;
const HEADER_ILLUSTRATION = getAssetPath(`./gx-ide-assets/chat-welcome/images/header-illustration.svg`);
const AI_AVATAR = getAssetPath(`./gx-ide-assets/chat-welcome/images/ai-avatar-welcome.svg`);
const HEADER_TRANSITION_DELAY = 100;
const HEADER_TRANSITION_DURATION = 500;
const SUGGESTED_PROMPT_BUTTON_INTERVAL = 200;
const SUGGESTED_PROMPT_BUTTONS_DELAY = 500;
const WELCOME_EXIT_DURATION = 100;
const AI_ICON = getIconPath({
    category: "system",
    name: "assistant",
    colorType: "primary"
});
const ARROW_RIGHT_ICON = getIconPath({
    category: "system",
    name: "arrow-right",
    colorType: "primary"
});
const CSS_BUNDLES = [
    "resets/box-sizing",
    "components/icon",
    "utils/typography"
];
const GxIdeChatWelcome = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        // eslint-disable-next-line @stencil-community/own-props-must-be-private
        _GxIdeChatWelcome_componentLocale.set(this, void 0);
        _GxIdeChatWelcome_animationEntrance.set(this, () => {
            setTimeout(() => {
                this.showHeader = true;
                setTimeout(() => {
                    this.showSuggestedPrompts = true;
                }, SUGGESTED_PROMPT_BUTTONS_DELAY);
            }, HEADER_TRANSITION_DELAY + HEADER_TRANSITION_DURATION);
        });
        _GxIdeChatWelcome_sendPromptToChat.set(this, async (e) => {
            const prompt = e.currentTarget.dataset["prommpt"];
            await __classPrivateFieldGet(this, _GxIdeChatWelcome_animationExit, "f").call(this);
            this.suggestedPrompRequestedCallback(prompt);
        });
        _GxIdeChatWelcome_animationExit.set(this, async () => {
            this.hideWelcome = true;
            await new Promise(resolve => setTimeout(resolve, WELCOME_EXIT_DURATION));
        });
        this.showHeader = false;
        this.showSuggestedPrompts = false;
        this.hideWelcome = false;
        this.welcomeTitle = undefined;
        this.welcomeGreeting = undefined;
        this.suggestedPrompts = undefined;
        this.suggestedPrompRequestedCallback = undefined;
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeChatWelcome_componentLocale, await Locale.getComponentStrings(this.el), "f");
        // Set defaults
        if (!this.welcomeTitle) {
            this.welcomeTitle = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").welcomeTitle;
        }
        if (!this.welcomeGreeting) {
            this.welcomeGreeting = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").welcomeGreeting;
        }
        if (!this.suggestedPrompts) {
            this.suggestedPrompts = __classPrivateFieldGet(this, _GxIdeChatWelcome_componentLocale, "f").suggestedPrompts;
        }
    }
    componentDidRender() {
        if (!this.hideWelcome) {
            __classPrivateFieldGet(this, _GxIdeChatWelcome_animationEntrance, "f").call(this);
        }
    }
    /**
     * It will exit the wellcome screen and remove it from the dom.
     */
    async exitWelcome() {
        __classPrivateFieldGet(this, _GxIdeChatWelcome_animationExit, "f").call(this);
    }
    render() {
        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: { "welcome-container": true, "hidden": this.hideWelcome }, style: {
                "backgroundImage": `url(${HEADER_ILLUSTRATION})`,
                "--transition-duration": `${WELCOME_EXIT_DURATION}ms`
            } }, h("header", { class: { "header": true, "header--visible": this.showHeader }, style: {
                "--transition-delay": `${HEADER_TRANSITION_DELAY}ms`,
                "--transition-duration": `${HEADER_TRANSITION_DURATION}ms`
            } }, h("span", { class: "header__circle", style: { backgroundImage: `url(${AI_AVATAR})` } }), h("h2", { class: "header__title" }, this.welcomeTitle), h("p", { class: "header__greeting" }, this.welcomeGreeting)), this.suggestedPrompts && this.showSuggestedPrompts && (h("ul", { class: "suggested-prompts" }, this.suggestedPrompts.map((prompt, i) => (h("li", { class: "suggested-prompts__item" }, h("button", { class: {
                "suggested-prompts__button": true
            }, onClick: __classPrivateFieldGet(this, _GxIdeChatWelcome_sendPromptToChat, "f"), style: {
                "--delay": `${SUGGESTED_PROMPT_BUTTON_INTERVAL * i}ms`
            }, "data-prommpt": prompt }, h("ch-image", { src: AI_ICON, class: "icon-m suggested-prompts__icon" }), prompt, h("ch-image", { src: ARROW_RIGHT_ICON, class: "icon-m suggested-prompts__icon" }))))))))));
    }
    static get assetsDirs() { return ["gx-ide-assets/chat-welcome"]; }
    get el() { return getElement(this); }
};
_GxIdeChatWelcome_componentLocale = new WeakMap(), _GxIdeChatWelcome_animationEntrance = new WeakMap(), _GxIdeChatWelcome_sendPromptToChat = new WeakMap(), _GxIdeChatWelcome_animationExit = new WeakMap();
GxIdeChatWelcome.style = chatWelcomeCss;

export { GxIdeChatContainer as gx_ide_chat_container, GxIdeChatWelcome as gx_ide_chat_welcome };

//# sourceMappingURL=gx-ide-chat-container_2.entry.js.map