import { r as t, h as e, H as a, a as o, g as i } from "./p-9b9ccd0c.js";

import { g as n } from "./p-d42e842b.js";

import "./p-6534555e.js";

import "lit";

import "lit/directives/when.js";

import "lit/directives/if-defined.js";

import { L as s } from "./p-311eedf3.js";

const r = ".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 c = undefined && undefined.__classPrivateFieldSet || function(t, e, a, o, i) {
  if (o === "m") throw new TypeError("Private method is not writable");
  if (o === "a" && !i) throw new TypeError("Private accessor was defined without a setter");
  if (typeof e === "function" ? t !== e || !i : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return o === "a" ? i.call(t, a) : i ? i.value = a : e.set(t, a), a;
};

var l = undefined && undefined.__classPrivateFieldGet || function(t, e, a, o) {
  if (a === "a" && !o) throw new TypeError("Private accessor was defined without a getter");
  if (typeof e === "function" ? t !== e || !o : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return a === "m" ? o : a === "a" ? o.call(t) : o ? o.value : e.get(t);
};

var d, p, h, u, m, g;

const f = [ "resets/box-sizing", "utils/typography", "chameleon/scrollbar", "components/button", "components/dropdown", "components/icon", "utils/elevation" ];

const y = n({
  category: "system",
  name: "copy",
  colorType: "primary"
});

const b = n({
  category: "system",
  name: "delete-outlined",
  colorType: "primary"
});

const v = n({
  category: "objects",
  name: "conversational-flows"
});

const w = n({
  category: "system",
  name: "more-horizontal",
  colorType: "interactive"
});

const x = class {
  constructor(e) {
    t(this, e);
    d.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
        p.set(this, void 0);
    h.set(this, (() => {
      this.menuIsExpanded = true;
    }));
    u.set(this, (t => {
      this.menuIsExpanded = t.detail;
    }));
    m.set(this, (() => {
      if (this.copyConversationCallback) {
        this.copyConversationCallback();
        this.menuIsExpanded = false;
      }
    }));
    g.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() {
    c(this, p, await s.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;
    }), 2e3);
  }
  render() {
    const t = this.chatTitle || this.copyConversationCallback || this.deleteConversationCallback;
    const o = this.copyConversationCallback || this.deleteConversationCallback;
    return e(a, {
      class: {
        "chat-container": true,
        "with-header": !!t
      }
    }, e("ch-theme", {
      model: f
    }), e("section", {
      class: "section"
    }, t && e("header", {
      class: "header caption-semi-bold-l"
    }, this.chatTitle && this.chatTitle, o && e("ch-action-menu-render", {
      class: "dropdown",
      blockAlign: "inside-start",
      inlineAlign: "inside-end",
      model: l(this, d, "f"),
      expanded: this.menuIsExpanded,
      onExpandedChange: l(this, u, "f")
    }, e("button", {
      class: "button-tertiary button-icon-only",
      onClick: l(this, h, "f"),
      type: "button",
      "aria-label": l(this, p, "f").showMenuAriaLabel,
      title: l(this, p, "f").showMenuAriaLabel
    }, e("ch-image", {
      class: "icon-m",
      src: w
    })), this.copyConversationCallback && e("button", {
      class: "button-tertiary button-icon-and-text button-copy-chat",
      slot: "copy-chat-button",
      onClick: l(this, m, "f"),
      type: "button",
      "aria-label": l(this, p, "f").copyConversationAriaLabel,
      title: l(this, p, "f").copyConversationAriaLabel
    }, e("ch-image", {
      class: "icon-m",
      src: y
    }), l(this, p, "f").copyConversationLabel), this.deleteConversationCallback && e("button", {
      class: "button-tertiary button-icon-and-text button-delete-chat",
      slot: "delete-chat-button",
      onClick: l(this, g, "f"),
      type: "button",
      "aria-label": l(this, p, "f").deleteConversationAriaLabel,
      title: l(this, p, "f").deleteConversationAriaLabel
    }, e("ch-image", {
      class: "icon-m",
      src: b
    }), l(this, p, "f").clearConversationLabel))), e("section", {
      class: "ch-chat-container"
    }, e("slot", null), this.displayConversationCopiedMessage && e("div", {
      class: "chat-container__conversation-copied"
    }, e("div", {
      class: "chat-container__conversation-copied-wrapper"
    }, e("ch-image", {
      class: "icon-m",
      src: v
    }), e("p", {
      class: "body-regular-l"
    }, "conversation copied"))))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/chat-container" ];
  }
  get el() {
    return o(this);
  }
};

d = new WeakMap, p = new WeakMap, h = new WeakMap, u = new WeakMap, m = new WeakMap, 
g = new WeakMap;

x.style = r;

const k = ":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 _ = undefined && undefined.__classPrivateFieldGet || function(t, e, a, o) {
  if (a === "a" && !o) throw new TypeError("Private accessor was defined without a getter");
  if (typeof e === "function" ? t !== e || !o : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return a === "m" ? o : a === "a" ? o.call(t) : o ? o.value : e.get(t);
};

var z = undefined && undefined.__classPrivateFieldSet || function(t, e, a, o, i) {
  if (o === "m") throw new TypeError("Private method is not writable");
  if (o === "a" && !i) throw new TypeError("Private accessor was defined without a setter");
  if (typeof e === "function" ? t !== e || !i : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return o === "a" ? i.call(t, a) : i ? i.value = a : e.set(t, a), a;
};

var T, j, W, C;

const E = i(`./gx-ide-assets/chat-welcome/images/header-illustration.svg`);

const M = i(`./gx-ide-assets/chat-welcome/images/ai-avatar-welcome.svg`);

const P = 100;

const I = 500;

const $ = 200;

const X = 500;

const D = 100;

const L = n({
  category: "system",
  name: "assistant",
  colorType: "primary"
});

const A = n({
  category: "system",
  name: "arrow-right",
  colorType: "primary"
});

const B = [ "resets/box-sizing", "components/icon", "utils/typography" ];

const S = class {
  constructor(e) {
    t(this, e);
    // eslint-disable-next-line @stencil-community/own-props-must-be-private
        T.set(this, void 0);
    j.set(this, (() => {
      setTimeout((() => {
        this.showHeader = true;
        setTimeout((() => {
          this.showSuggestedPrompts = true;
        }), X);
      }), P + I);
    }));
    W.set(this, (async t => {
      const e = t.currentTarget.dataset["prommpt"];
      await _(this, C, "f").call(this);
      this.suggestedPrompRequestedCallback(e);
    }));
    C.set(this, (async () => {
      this.hideWelcome = true;
      await new Promise((t => setTimeout(t, D)));
    }));
    this.showHeader = false;
    this.showSuggestedPrompts = false;
    this.hideWelcome = false;
    this.welcomeTitle = undefined;
    this.welcomeGreeting = undefined;
    this.suggestedPrompts = undefined;
    this.suggestedPrompRequestedCallback = undefined;
  }
  async componentWillLoad() {
    z(this, T, await s.getComponentStrings(this.el), "f");
    // Set defaults
        if (!this.welcomeTitle) {
      this.welcomeTitle = _(this, T, "f").welcomeTitle;
    }
    if (!this.welcomeGreeting) {
      this.welcomeGreeting = _(this, T, "f").welcomeGreeting;
    }
    if (!this.suggestedPrompts) {
      this.suggestedPrompts = _(this, T, "f").suggestedPrompts;
    }
  }
  componentDidRender() {
    if (!this.hideWelcome) {
      _(this, j, "f").call(this);
    }
  }
  /**
     * It will exit the wellcome screen and remove it from the dom.
     */  async exitWelcome() {
    _(this, C, "f").call(this);
  }
  render() {
    return e(a, null, e("ch-theme", {
      model: B
    }), e("div", {
      class: {
        "welcome-container": true,
        hidden: this.hideWelcome
      },
      style: {
        backgroundImage: `url(${E})`,
        "--transition-duration": `${D}ms`
      }
    }, e("header", {
      class: {
        header: true,
        "header--visible": this.showHeader
      },
      style: {
        "--transition-delay": `${P}ms`,
        "--transition-duration": `${I}ms`
      }
    }, e("span", {
      class: "header__circle",
      style: {
        backgroundImage: `url(${M})`
      }
    }), e("h2", {
      class: "header__title"
    }, this.welcomeTitle), e("p", {
      class: "header__greeting"
    }, this.welcomeGreeting)), this.suggestedPrompts && this.showSuggestedPrompts && e("ul", {
      class: "suggested-prompts"
    }, this.suggestedPrompts.map(((t, a) => e("li", {
      class: "suggested-prompts__item"
    }, e("button", {
      class: {
        "suggested-prompts__button": true
      },
      onClick: _(this, W, "f"),
      style: {
        "--delay": `${$ * a}ms`
      },
      "data-prommpt": t
    }, e("ch-image", {
      src: L,
      class: "icon-m suggested-prompts__icon"
    }), t, e("ch-image", {
      src: A,
      class: "icon-m suggested-prompts__icon"
    }))))))));
  }
  static get assetsDirs() {
    return [ "gx-ide-assets/chat-welcome" ];
  }
  get el() {
    return o(this);
  }
};

T = new WeakMap, j = new WeakMap, W = new WeakMap, C = new WeakMap;

S.style = k;

export { x as gx_ide_chat_container, S as gx_ide_chat_welcome };
//# sourceMappingURL=p-189ff3d7.entry.js.map