@genexus/genexus-ide-ui 1.1.4 → 1.1.6

package/dist/genexus-ide-ui/{p-5687fdb7.entry.js → p-ecba870e.entry.js}

@@ -1,8 +1,6 @@
 import { r as e, h as s, a as r } from "./p-25a9f1d7.js";
 
-import { g as a } from "./p-6e4208d8.js";
-
-import "./p-5ac47c69.js";
+import { g as a } from "./p-ede7bd20.js";
 
 import { L as i } from "./p-311eedf3.js";
 
@@ -16,9 +14,9 @@ var n = undefined && undefined.__classPrivateFieldGet || function(e, s, r, a) {
   return r === "m" ? a : r === "a" ? a.call(e) : a ? a.value : s.get(e);
 };
 
-var p;
+var l;
 
-const l = a({
+const p = a({
   category: "bpm",
   name: "tasks",
   colorType: "neutral"
@@ -35,7 +33,7 @@ const d = class {
         this.showCopiedMessage = false;
       }), 1500);
     };
-    p.set(this, (e => {
+    l.set(this, (e => {
       e.preventDefault();
       e.stopPropagation();
     }));
@@ -46,10 +44,10 @@ const d = class {
       class: "button-tertiary button-icon-only",
       "aria-label": "copy",
       onClick: this.copyMessage,
-      onMouseDown: n(this, p, "f")
+      onMouseDown: n(this, l, "f")
     }, s("ch-image", {
       class: "icon-md",
-      src: l
+      src: p
     })) : null;
     this.visible = false;
     this.showCopiedMessage = false;
@@ -116,7 +114,7 @@ const d = class {
       class: "copied"
     }, s("ch-image", {
       class: "icon-md",
-      src: l
+      src: p
     }), this.translations["copied"]) : null, o(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? s("div", {
       class: "animation-wrapper"
     }, s("div", {
@@ -131,9 +129,9 @@ const d = class {
   }
 };
 
-p = new WeakMap;
+l = new WeakMap;
 
 d.style = t;
 
 export { d as gx_ide_ai_message };
-//# sourceMappingURL=p-5687fdb7.entry.js.map
+//# sourceMappingURL=p-ecba870e.entry.js.map

package/dist/genexus-ide-ui/{p-5687fdb7.entry.js.map → p-ecba870e.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["aiMessageCss","COPY_ICON","getIconPath","category","name","colorType","GxIdeAiMessage","this","copyable","copyMessage","navigator","clipboard","writeText","message","showCopiedMessage","setTimeout","_GxIdeAiMessage_buttonMouseDownHandler","set","e","preventDefault","stopPropagation","evaluateMessageIsCopyable","messageType","evaluateCopyIcon","h","class","onClick","onMouseDown","__classPrivateFieldGet","src","componentWillLoad","_componentLocale","Locale","getComponentStrings","el","componentDidRender","visible","messagesList","parentElement","scrollTo","render","hidden","you","message__header","message__role","assistant","message__caption","translations","hiChar","filterValue"],"sources":["src/components/ai-assistant/ai-message.scss?tag=gx-ide-ai-message","src/components/ai-assistant/ai-message.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  font-family: var(--mer-font-family--primary);\n}\n/*--- Messages ---*/\n.message {\n  color: var(--mer-color__neutral-gray--100);\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 100ms;\n  transition: grid-template-rows 100ms, -ms-grid-rows 100ms;\n  &__outer-wrapper {\n    overflow: hidden;\n  }\n  &__inner-wrapper {\n    padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n    border-radius: var(--mer-border__radius--sm);\n    border-inline-start: var(--mer-border__width--md) solid transparent;\n    background-color: var(--mer-color__neutral-gray--1200);\n    margin-block-start: var(--mer-spacing--xs);\n    position: relative;\n  }\n  &__header {\n    display: flex;\n    gap: var(--mer-spacing--xs);\n    justify-content: space-between;\n\n    .icon-md {\n      opacity: 0;\n    }\n\n    &--in-progress {\n      display: contents;\n    }\n  }\n  &__role {\n    &:before {\n      content: \"\";\n      display: grid;\n      place-self: center flex-end;\n      inline-size: 4px;\n      block-size: 4px;\n      border-radius: 50%;\n      background-color: currentcolor;\n    }\n\n    font-weight: var(--mer-font__weight--semi-bold);\n    margin-block-end: var(--mer-spacing--xs);\n    display: inline-grid;\n    grid-template-columns: max-content 1fr;\n    gap: 8px;\n\n    &-description {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: inline-block;\n      padding-block-start: 2px;\n    }\n    &--user {\n      color: var(--mer-color__primary--300);\n    }\n    &--assistant {\n    }\n    &--hidden {\n      display: none;\n    }\n  }\n  &__caption {\n    font-size: var(--mer-font__size--xs);\n    line-height: var(--mer-line-height--regular);\n  }\n  &--visible {\n    grid-template-rows: 1fr;\n  }\n  &--copying {\n    pointer-events: none;\n    span:not(.copied),\n    .message__caption {\n      color: transparent;\n      -webkit-user-select: none; /* Safari */\n      -ms-user-select: none; /* IE 10 and IE 11 */\n      user-select: none; /* Standard syntax */\n    }\n  }\n  /*--- Types of messages ---*/\n  &--user {\n    .message__inner-wrapper {\n      background-color: rgba(91, 167, 255, 0.08);\n      border-color: var(--mer-border-color__primary);\n    }\n  }\n  &--assistant-action {\n    .message__inner-wrapper {\n      background-color: rgba(63, 168, 155, 0.05);\n      border-color: var(--mer-border-color__success);\n    }\n  }\n  &--assistant-chat {\n    .message__inner-wrapper {\n      background-color: var(--mer-surface__elevation--01);\n    }\n  }\n  &--assistant-in-progress {\n    color: var(--mer-color__neutral-gray--500);\n    .message__inner-wrapper {\n      font-style: italic;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      gap: var(--mer-spacing--xs);\n\n      .message__caption {\n        flex: 1;\n      }\n      .animation-wrapper {\n        flex: none;\n      }\n    }\n  }\n  &--assistant-error {\n    .message__inner-wrapper {\n      background-color: rgba(251, 124, 132, 0.05);\n      border-color: var(--mer-border-color__error);\n    }\n  }\n  &--copyable {\n    &:hover {\n      filter: brightness(1.2);\n      .icon-md {\n        opacity: 1;\n      }\n    }\n  }\n  &:last-child {\n    margin-block-end: 0;\n  }\n}\n:host(:first-child) {\n  .message {\n    &__inner-wrapper {\n      margin-block-end: 0;\n    }\n  }\n}\n\n/*--- Dot Pulse Sweet Animation ---*/\n.animation-wrapper {\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n$color: var(--mer-color__neutral-gray--400);\n.dot-pulse {\n  position: relative;\n  left: -9999px;\n  width: 5px;\n  height: 5px;\n  border-radius: 2.5px;\n  background-color: $color;\n  color: $color;\n  box-shadow: 9999px 0 0 -5px;\n  animation: dot-pulse 1.5s infinite linear;\n  animation-delay: 0.25s;\n  &::before,\n  &::after {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    width: 5px;\n    height: 5px;\n    border-radius: 2.5px;\n    background-color: $color;\n    color: $color;\n  }\n  &::before {\n    box-shadow: 9984px 0 0 -5px;\n    animation: dot-pulse-before 1.5s infinite linear;\n    animation-delay: 0s;\n  }\n  &::after {\n    box-shadow: 10014px 0 0 -5px;\n    animation: dot-pulse-after 1.5s infinite linear;\n    animation-delay: 0.5s;\n  }\n}\n@keyframes dot-pulse-before {\n  0% {\n    box-shadow: 9984px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 9984px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 9984px 0 0 -5px;\n  }\n}\n@keyframes dot-pulse {\n  0% {\n    box-shadow: 9999px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 9999px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 9999px 0 0 -5px;\n  }\n}\n@keyframes dot-pulse-after {\n  0% {\n    box-shadow: 10014px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 10014px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 10014px 0 0 -5px;\n  }\n}\n\n/*--- Copy Message ---*/\n.copied {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mer-color__neutral-gray--300);\n  display: flex;\n  gap: var(--mer-spacing--xs);\n  opacity: 0;\n  animation: fadeIn var(--mer-timing--regular) ease-out forwards;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@include hiChar;\n","import { Component, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\nconst COPY_ICON = getIconPath({\n  category: \"bpm\",\n  name: \"tasks\",\n  colorType: \"neutral\"\n});\n\n@Component({\n  tag: \"gx-ide-ai-message\",\n  styleUrl: \"ai-message.scss\",\n  shadow: false,\n  assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n  /* The message allows to be copied*/\n  private _componentLocale: any;\n  private copyable = false;\n\n  @Element() el: HTMLGxIdeAiMessageElement;\n\n  /**\n   * This wil display the message if true\n   */\n  @State() visible = false;\n\n  /**\n   * This wil show the user a text, indicating that the message has been copied\n   */\n  @State() showCopiedMessage = false;\n\n  /**\n   * A reference to the gx-ide-ai-assistant host element\n   */\n  @Prop() readonly aiAssistantHostRef: HTMLGxIdeAiAssistantElement;\n\n  /**\n   * The actual message\n   */\n  @Prop() readonly message: string;\n\n  /**\n   * The message type\n   */\n  @Prop() readonly messageType: MessageType;\n\n  /**\n   * The filter value\n   */\n  @Prop() readonly filterValue: string;\n\n  /**\n   * It hides the message (used for the filter)\n   */\n  @Prop() readonly hidden: boolean;\n\n  /**\n   * An object with the needed string translations.\n   */\n  @Prop() readonly translations: Translations;\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateMessageIsCopyable();\n  }\n\n  componentDidRender() {\n    setTimeout(() => {\n      /* Without the timeout it appears instantly (no apparent transition)*/\n      this.visible = true;\n      const messagesList = this.el.parentElement;\n      messagesList.scrollTo(0, 0);\n    }, 0);\n  }\n\n  private copyMessage = () => {\n    navigator.clipboard.writeText(this.message);\n    this.showCopiedMessage = true;\n    setTimeout(() => {\n      this.showCopiedMessage = false;\n    }, 1500);\n  };\n\n  #buttonMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  private evaluateMessageIsCopyable = () => {\n    this.copyable = this.messageType !== \"assistant-in-progress\";\n  };\n\n  private evaluateCopyIcon = () => {\n    return this.copyable ? (\n      <button\n        class=\"button-tertiary button-icon-only\"\n        aria-label=\"copy\"\n        onClick={this.copyMessage}\n        onMouseDown={this.#buttonMouseDownHandler}\n      >\n        <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n      </button>\n    ) : null;\n  };\n\n  render() {\n    return (\n      <li\n        class={{\n          \"message\": true,\n          \"message--visible\": this.visible && !this.hidden,\n          [`message--${[this.messageType]}`]: true,\n          \"message--assistant\": this.messageType !== \"user\",\n          \"message--copyable\": this.copyable,\n          \"message--copying\": this.showCopiedMessage\n        }}\n      >\n        <div class=\"message__outer-wrapper\">\n          <div\n            class={{\n              \"message__inner-wrapper\": true\n            }}\n          >\n            {this.messageType === \"user\" ? (\n              <div class=\"message__header\">\n                <span class=\"message__role message__role--user\">\n                  <span class=\"message__role-description\">\n                    {this._componentLocale.you}\n                  </span>\n                </span>\n                {this.evaluateCopyIcon()}\n              </div>\n            ) : (\n              <div\n                class={{\n                  \"message__header\": true,\n                  \"message__header--in-progress\":\n                    this.messageType === \"assistant-in-progress\"\n                }}\n              >\n                <span\n                  class={{\n                    \"message__role\":\n                      this.messageType !== \"assistant-in-progress\",\n                    \"message__role--hidden\":\n                      this.messageType === \"assistant-in-progress\",\n                    \"message__role--assistant\": true\n                  }}\n                >\n                  <span class=\"message__role-description\">\n                    {this._componentLocale.assistant}\n                  </span>\n                </span>\n                {this.evaluateCopyIcon()}\n              </div>\n            )}\n            <div\n              class={{\n                \"message__caption\": true,\n                \"message__caption--in-progress\":\n                  this.messageType === \"assistant-in-progress\"\n              }}\n            >\n              {this.showCopiedMessage ? (\n                <span class=\"copied\">\n                  <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n                  {this.translations[\"copied\"]}\n                </span>\n              ) : null}\n              {hiChar(this.message, this.filterValue)}\n            </div>\n            {this.messageType === \"assistant-in-progress\" ? (\n              <div class=\"animation-wrapper\">\n                <div class=\"dot-pulse\"></div>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </li>\n    );\n  }\n}\n\nexport type Translations = {\n  [key: string]: string;\n};\n"],"mappings":";;;;;;;;;;AAAA,MAAMA,IAAe;;;;;;;;;;ACQrB,MAAMC,IAAYC,EAAY;EAC5BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;MASAC,IAAc;;;IAGjBC,KAAAC,WAAW;IA0DXD,KAAAE,cAAc;MACpBC,UAAUC,UAAUC,UAAUL,KAAKM;MACnCN,KAAKO,oBAAoB;MACzBC,YAAW;QACTR,KAAKO,oBAAoB;AAAK,UAC7B;AAAK;IAGVE,EAAAC,IAAAV,OAA2BW;MACzBA,EAAEC;MACFD,EAAEE;AAAiB;IAGbb,KAAAc,4BAA4B;MAClCd,KAAKC,WAAWD,KAAKe,gBAAgB;AAAuB;IAGtDf,KAAAgB,mBAAmB,MAClBhB,KAAKC,WACVgB,EAAA;MACEC,OAAM;MAAkC,cAC7B;MACXC,SAASnB,KAAKE;MACdkB,aAAaC,EAAArB,MAAIS,GAAA;OAEjBQ,EAAA;MAAUC,OAAM;MAAUI,KAAK5B;UAE/B;mBA9Ea;6BAKU;;;;;;;;EAgC7B,uBAAM6B;IACJvB,KAAKwB,yBAAyBC,EAAOC,oBAAoB1B,KAAK2B;IAC9D3B,KAAKc;;EAGP,kBAAAc;IACEpB,YAAW;;MAETR,KAAK6B,UAAU;MACf,MAAMC,IAAe9B,KAAK2B,GAAGI;MAC7BD,EAAaE,SAAS,GAAG;AAAE,QAC1B;;EAiCL,MAAAC;IACE,OACEhB,EAAA;MACEC,OAAO;QACLZ,SAAW;QACX,oBAAoBN,KAAK6B,YAAY7B,KAAKkC;QAC1C,CAAC,YAAY,EAAClC,KAAKe,kBAAiB;QACpC,sBAAsBf,KAAKe,gBAAgB;QAC3C,qBAAqBf,KAAKC;QAC1B,oBAAoBD,KAAKO;;OAG3BU,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAO;QACL,0BAA0B;;OAG3BlB,KAAKe,gBAAgB,SACpBE,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAMC,OAAM;OACVD,EAAA;MAAMC,OAAM;OACTlB,KAAKwB,iBAAiBW,OAG1BnC,KAAKgB,sBAGRC,EAAA;MACEC,OAAO;QACLkB,iBAAmB;QACnB,gCACEpC,KAAKe,gBAAgB;;OAGzBE,EAAA;MACEC,OAAO;QACLmB,eACErC,KAAKe,gBAAgB;QACvB,yBACEf,KAAKe,gBAAgB;QACvB,4BAA4B;;OAG9BE,EAAA;MAAMC,OAAM;OACTlB,KAAKwB,iBAAiBc,aAG1BtC,KAAKgB,qBAGVC,EAAA;MACEC,OAAO;QACLqB,kBAAoB;QACpB,iCACEvC,KAAKe,gBAAgB;;OAGxBf,KAAKO,oBACJU,EAAA;MAAMC,OAAM;OACVD,EAAA;MAAUC,OAAM;MAAUI,KAAK5B;QAC9BM,KAAKwC,aAAa,aAEnB,MACHC,EAAOzC,KAAKM,SAASN,KAAK0C,eAE5B1C,KAAKe,gBAAgB,0BACpBE,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAKC,OAAM;UAEX"}
+{"version":3,"names":["aiMessageCss","COPY_ICON","getIconPath","category","name","colorType","GxIdeAiMessage","this","copyable","copyMessage","navigator","clipboard","writeText","message","showCopiedMessage","setTimeout","_GxIdeAiMessage_buttonMouseDownHandler","set","e","preventDefault","stopPropagation","evaluateMessageIsCopyable","messageType","evaluateCopyIcon","h","class","onClick","onMouseDown","__classPrivateFieldGet","src","componentWillLoad","_componentLocale","Locale","getComponentStrings","el","componentDidRender","visible","messagesList","parentElement","scrollTo","render","hidden","you","message__header","message__role","assistant","message__caption","translations","hiChar","filterValue"],"sources":["src/components/ai-assistant/ai-message.scss?tag=gx-ide-ai-message","src/components/ai-assistant/ai-message.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  font-family: var(--mer-font-family--primary);\n}\n/*--- Messages ---*/\n.message {\n  color: var(--mer-color__neutral-gray--100);\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 100ms;\n  transition: grid-template-rows 100ms, -ms-grid-rows 100ms;\n  &__outer-wrapper {\n    overflow: hidden;\n  }\n  &__inner-wrapper {\n    padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n    border-radius: var(--mer-border__radius--sm);\n    border-inline-start: var(--mer-border__width--md) solid transparent;\n    background-color: var(--mer-color__neutral-gray--1200);\n    margin-block-start: var(--mer-spacing--xs);\n    position: relative;\n  }\n  &__header {\n    display: flex;\n    gap: var(--mer-spacing--xs);\n    justify-content: space-between;\n\n    .icon-md {\n      opacity: 0;\n    }\n\n    &--in-progress {\n      display: contents;\n    }\n  }\n  &__role {\n    &:before {\n      content: \"\";\n      display: grid;\n      place-self: center flex-end;\n      inline-size: 4px;\n      block-size: 4px;\n      border-radius: 50%;\n      background-color: currentcolor;\n    }\n\n    font-weight: var(--mer-font__weight--semi-bold);\n    margin-block-end: var(--mer-spacing--xs);\n    display: inline-grid;\n    grid-template-columns: max-content 1fr;\n    gap: 8px;\n\n    &-description {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: inline-block;\n      padding-block-start: 2px;\n    }\n    &--user {\n      color: var(--mer-color__primary--300);\n    }\n    &--assistant {\n    }\n    &--hidden {\n      display: none;\n    }\n  }\n  &__caption {\n    font-size: var(--mer-font__size--xs);\n    line-height: var(--mer-line-height--regular);\n  }\n  &--visible {\n    grid-template-rows: 1fr;\n  }\n  &--copying {\n    pointer-events: none;\n    span:not(.copied),\n    .message__caption {\n      color: transparent;\n      -webkit-user-select: none; /* Safari */\n      -ms-user-select: none; /* IE 10 and IE 11 */\n      user-select: none; /* Standard syntax */\n    }\n  }\n  /*--- Types of messages ---*/\n  &--user {\n    .message__inner-wrapper {\n      background-color: rgba(91, 167, 255, 0.08);\n      border-color: var(--mer-border-color__primary);\n    }\n  }\n  &--assistant-action {\n    .message__inner-wrapper {\n      background-color: rgba(63, 168, 155, 0.05);\n      border-color: var(--mer-border-color__success);\n    }\n  }\n  &--assistant-chat {\n    .message__inner-wrapper {\n      background-color: var(--mer-surface__elevation--01);\n    }\n  }\n  &--assistant-in-progress {\n    color: var(--mer-color__neutral-gray--500);\n    .message__inner-wrapper {\n      font-style: italic;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      gap: var(--mer-spacing--xs);\n\n      .message__caption {\n        flex: 1;\n      }\n      .animation-wrapper {\n        flex: none;\n      }\n    }\n  }\n  &--assistant-error {\n    .message__inner-wrapper {\n      background-color: rgba(251, 124, 132, 0.05);\n      border-color: var(--mer-border-color__error);\n    }\n  }\n  &--copyable {\n    &:hover {\n      filter: brightness(1.2);\n      .icon-md {\n        opacity: 1;\n      }\n    }\n  }\n  &:last-child {\n    margin-block-end: 0;\n  }\n}\n:host(:first-child) {\n  .message {\n    &__inner-wrapper {\n      margin-block-end: 0;\n    }\n  }\n}\n\n/*--- Dot Pulse Sweet Animation ---*/\n.animation-wrapper {\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n$color: var(--mer-color__neutral-gray--400);\n.dot-pulse {\n  position: relative;\n  left: -9999px;\n  width: 5px;\n  height: 5px;\n  border-radius: 2.5px;\n  background-color: $color;\n  color: $color;\n  box-shadow: 9999px 0 0 -5px;\n  animation: dot-pulse 1.5s infinite linear;\n  animation-delay: 0.25s;\n  &::before,\n  &::after {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    width: 5px;\n    height: 5px;\n    border-radius: 2.5px;\n    background-color: $color;\n    color: $color;\n  }\n  &::before {\n    box-shadow: 9984px 0 0 -5px;\n    animation: dot-pulse-before 1.5s infinite linear;\n    animation-delay: 0s;\n  }\n  &::after {\n    box-shadow: 10014px 0 0 -5px;\n    animation: dot-pulse-after 1.5s infinite linear;\n    animation-delay: 0.5s;\n  }\n}\n@keyframes dot-pulse-before {\n  0% {\n    box-shadow: 9984px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 9984px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 9984px 0 0 -5px;\n  }\n}\n@keyframes dot-pulse {\n  0% {\n    box-shadow: 9999px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 9999px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 9999px 0 0 -5px;\n  }\n}\n@keyframes dot-pulse-after {\n  0% {\n    box-shadow: 10014px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 10014px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 10014px 0 0 -5px;\n  }\n}\n\n/*--- Copy Message ---*/\n.copied {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mer-color__neutral-gray--300);\n  display: flex;\n  gap: var(--mer-spacing--xs);\n  opacity: 0;\n  animation: fadeIn var(--mer-timing--regular) ease-out forwards;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@include hiChar;\n","import { Component, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\nconst COPY_ICON = getIconPath({\n  category: \"bpm\",\n  name: \"tasks\",\n  colorType: \"neutral\"\n});\n\n@Component({\n  tag: \"gx-ide-ai-message\",\n  styleUrl: \"ai-message.scss\",\n  shadow: false,\n  assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n  /* The message allows to be copied*/\n  private _componentLocale: any;\n  private copyable = false;\n\n  @Element() el: HTMLGxIdeAiMessageElement;\n\n  /**\n   * This wil display the message if true\n   */\n  @State() visible = false;\n\n  /**\n   * This wil show the user a text, indicating that the message has been copied\n   */\n  @State() showCopiedMessage = false;\n\n  /**\n   * A reference to the gx-ide-ai-assistant host element\n   */\n  @Prop() readonly aiAssistantHostRef: HTMLGxIdeAiAssistantElement;\n\n  /**\n   * The actual message\n   */\n  @Prop() readonly message: string;\n\n  /**\n   * The message type\n   */\n  @Prop() readonly messageType: MessageType;\n\n  /**\n   * The filter value\n   */\n  @Prop() readonly filterValue: string;\n\n  /**\n   * It hides the message (used for the filter)\n   */\n  @Prop() readonly hidden: boolean;\n\n  /**\n   * An object with the needed string translations.\n   */\n  @Prop() readonly translations: Translations;\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateMessageIsCopyable();\n  }\n\n  componentDidRender() {\n    setTimeout(() => {\n      /* Without the timeout it appears instantly (no apparent transition)*/\n      this.visible = true;\n      const messagesList = this.el.parentElement;\n      messagesList.scrollTo(0, 0);\n    }, 0);\n  }\n\n  private copyMessage = () => {\n    navigator.clipboard.writeText(this.message);\n    this.showCopiedMessage = true;\n    setTimeout(() => {\n      this.showCopiedMessage = false;\n    }, 1500);\n  };\n\n  #buttonMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  private evaluateMessageIsCopyable = () => {\n    this.copyable = this.messageType !== \"assistant-in-progress\";\n  };\n\n  private evaluateCopyIcon = () => {\n    return this.copyable ? (\n      <button\n        class=\"button-tertiary button-icon-only\"\n        aria-label=\"copy\"\n        onClick={this.copyMessage}\n        onMouseDown={this.#buttonMouseDownHandler}\n      >\n        <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n      </button>\n    ) : null;\n  };\n\n  render() {\n    return (\n      <li\n        class={{\n          \"message\": true,\n          \"message--visible\": this.visible && !this.hidden,\n          [`message--${[this.messageType]}`]: true,\n          \"message--assistant\": this.messageType !== \"user\",\n          \"message--copyable\": this.copyable,\n          \"message--copying\": this.showCopiedMessage\n        }}\n      >\n        <div class=\"message__outer-wrapper\">\n          <div\n            class={{\n              \"message__inner-wrapper\": true\n            }}\n          >\n            {this.messageType === \"user\" ? (\n              <div class=\"message__header\">\n                <span class=\"message__role message__role--user\">\n                  <span class=\"message__role-description\">\n                    {this._componentLocale.you}\n                  </span>\n                </span>\n                {this.evaluateCopyIcon()}\n              </div>\n            ) : (\n              <div\n                class={{\n                  \"message__header\": true,\n                  \"message__header--in-progress\":\n                    this.messageType === \"assistant-in-progress\"\n                }}\n              >\n                <span\n                  class={{\n                    \"message__role\":\n                      this.messageType !== \"assistant-in-progress\",\n                    \"message__role--hidden\":\n                      this.messageType === \"assistant-in-progress\",\n                    \"message__role--assistant\": true\n                  }}\n                >\n                  <span class=\"message__role-description\">\n                    {this._componentLocale.assistant}\n                  </span>\n                </span>\n                {this.evaluateCopyIcon()}\n              </div>\n            )}\n            <div\n              class={{\n                \"message__caption\": true,\n                \"message__caption--in-progress\":\n                  this.messageType === \"assistant-in-progress\"\n              }}\n            >\n              {this.showCopiedMessage ? (\n                <span class=\"copied\">\n                  <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n                  {this.translations[\"copied\"]}\n                </span>\n              ) : null}\n              {hiChar(this.message, this.filterValue)}\n            </div>\n            {this.messageType === \"assistant-in-progress\" ? (\n              <div class=\"animation-wrapper\">\n                <div class=\"dot-pulse\"></div>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </li>\n    );\n  }\n}\n\nexport type Translations = {\n  [key: string]: string;\n};\n"],"mappings":";;;;;;;;AAAA,MAAMA,IAAe;;;;;;;;;;ACQrB,MAAMC,IAAYC,EAAY;EAC5BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;MASAC,IAAc;;;IAGjBC,KAAAC,WAAW;IA0DXD,KAAAE,cAAc;MACpBC,UAAUC,UAAUC,UAAUL,KAAKM;MACnCN,KAAKO,oBAAoB;MACzBC,YAAW;QACTR,KAAKO,oBAAoB;AAAK,UAC7B;AAAK;IAGVE,EAAAC,IAAAV,OAA2BW;MACzBA,EAAEC;MACFD,EAAEE;AAAiB;IAGbb,KAAAc,4BAA4B;MAClCd,KAAKC,WAAWD,KAAKe,gBAAgB;AAAuB;IAGtDf,KAAAgB,mBAAmB,MAClBhB,KAAKC,WACVgB,EAAA;MACEC,OAAM;MAAkC,cAC7B;MACXC,SAASnB,KAAKE;MACdkB,aAAaC,EAAArB,MAAIS,GAAA;OAEjBQ,EAAA;MAAUC,OAAM;MAAUI,KAAK5B;UAE/B;mBA9Ea;6BAKU;;;;;;;;EAgC7B,uBAAM6B;IACJvB,KAAKwB,yBAAyBC,EAAOC,oBAAoB1B,KAAK2B;IAC9D3B,KAAKc;;EAGP,kBAAAc;IACEpB,YAAW;;MAETR,KAAK6B,UAAU;MACf,MAAMC,IAAe9B,KAAK2B,GAAGI;MAC7BD,EAAaE,SAAS,GAAG;AAAE,QAC1B;;EAiCL,MAAAC;IACE,OACEhB,EAAA;MACEC,OAAO;QACLZ,SAAW;QACX,oBAAoBN,KAAK6B,YAAY7B,KAAKkC;QAC1C,CAAC,YAAY,EAAClC,KAAKe,kBAAiB;QACpC,sBAAsBf,KAAKe,gBAAgB;QAC3C,qBAAqBf,KAAKC;QAC1B,oBAAoBD,KAAKO;;OAG3BU,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAO;QACL,0BAA0B;;OAG3BlB,KAAKe,gBAAgB,SACpBE,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAMC,OAAM;OACVD,EAAA;MAAMC,OAAM;OACTlB,KAAKwB,iBAAiBW,OAG1BnC,KAAKgB,sBAGRC,EAAA;MACEC,OAAO;QACLkB,iBAAmB;QACnB,gCACEpC,KAAKe,gBAAgB;;OAGzBE,EAAA;MACEC,OAAO;QACLmB,eACErC,KAAKe,gBAAgB;QACvB,yBACEf,KAAKe,gBAAgB;QACvB,4BAA4B;;OAG9BE,EAAA;MAAMC,OAAM;OACTlB,KAAKwB,iBAAiBc,aAG1BtC,KAAKgB,qBAGVC,EAAA;MACEC,OAAO;QACLqB,kBAAoB;QACpB,iCACEvC,KAAKe,gBAAgB;;OAGxBf,KAAKO,oBACJU,EAAA;MAAMC,OAAM;OACVD,EAAA;MAAUC,OAAM;MAAUI,KAAK5B;QAC9BM,KAAKwC,aAAa,aAEnB,MACHC,EAAOzC,KAAKM,SAASN,KAAK0C,eAE5B1C,KAAKe,gBAAgB,0BACpBE,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAKC,OAAM;UAEX"}