@genexus/genexus-ide-ui 1.1.49 → 1.1.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "1.1.49",
+  "version": "1.1.51",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/cjs/form-validation-178cf461.js.map

@@ -1 +0,0 @@
-{"file":"form-validation-178cf461.js","mappings":";;AAGA;AAqBA;AACA,MAAM,kCAAkC,GAAG;IACzC,aAAa,EAAE,gBAAgB;IAC/B,qBAAqB,EAAE,iBAAiB;IACxC,SAAS,EAAE,aAAa;CAChB,CAAC;AAEX,MAAM,gBAAgB,GAAG,CAAC,QAAiB,EAAE,OAAoB;IAC/D,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IACrD,MAAM,UAAU,GACd,kCAAkC,CAChC,cAAiE,CAClE,CAAC;IACJ,IAAI,QAAQ,EAAE;QACZ,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KACnC;SAAM;QACL,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;KACtC;AACH,CAAC,CAAC;MAEW,gBAAgB,GAAG,CAC9B,gBAAkC,EAClC,mBAAmD;IAEnD,MAAM,0BAA0B,GAAG,IAAI,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAChE,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW;QAC9C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC;QACjC,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC;QAC3C,MAAM,gBAAgB,GAAG,0BAA0B,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAClE,IAAI,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,SAAS,EAAE;;YAE/B,gBAAgB,CAAC,aAAa,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC5D,0BAA0B,CAAC,GAAG,CAAC,QAAQ,kCAClC,gBAAgB,KACnB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,WAAW,CAAC,OAAO,IAC5B,CAAC;SACJ;KACF,CAAC,CAAC;;IAEH,OAAO,0BAA0B,CAAC;AACpC;;;;","names":[],"sources":["src/common/form-validation.ts"],"sourcesContent":["import { FormSubmitResult, ConnectionResultData } from \"../common/types\";\nimport { FormComponent } from \"@genexus/gemini/dist/types/common/interfaces\";\n\n// formSubmitValidation will be deprecated. use \"validateControls\" instead.\nexport const formSubmitValidation = (\n  result: FormSubmitResult | ConnectionResultData,\n  ref: any\n) => {\n  result.fieldErrors?.forEach(element => {\n    const key = element.key;\n    const message = element.message;\n    const hasError = element.hasError;\n\n    const reference: FormComponent = ref[`${key}El`];\n    if (reference && hasError && message.trim()) {\n      reference.validationStatus = \"error\";\n      reference.validationMessage = message;\n    } else if (reference && !hasError) {\n      reference.validationStatus = \"indeterminate\";\n      reference.validationMessage = null;\n    }\n  });\n};\n\n// TODO: Improve the way we mark components with error. We must not use error classes.\nconst formElementsErrorClassesDictionary = {\n  \"ch-checkbox\": \"checkbox-error\",\n  \"ch-combo-box-render\": \"combo-box-error\",\n  \"ch-edit\": \"input-error\"\n} as const;\n\nconst toggleErrorClass = (hasError: boolean, element: HTMLElement) => {\n  const elementTagName = element.tagName.toLowerCase();\n  const errorClass =\n    formElementsErrorClassesDictionary[\n      elementTagName as keyof typeof formElementsErrorClassesDictionary\n    ];\n  if (hasError) {\n    element.classList.add(errorClass);\n  } else {\n    element.classList.remove(errorClass);\n  }\n};\n\nexport const validateControls = (\n  formSubmitResult: FormSubmitResult,\n  validatableControls: Map<string, ControlValidation>\n): Map<string, ControlValidation> => {\n  const validatableControlsUpdated = new Map(validatableControls);\n  formSubmitResult.fieldErrors.forEach(fieldResult => {\n    const fieldKey = fieldResult.key;\n    const fieldHasError = fieldResult.hasError;\n    const controlMapRecord = validatableControlsUpdated.get(fieldKey);\n    if (controlMapRecord?.reference) {\n      // toggle class to add or remove error style\n      toggleErrorClass(fieldHasError, controlMapRecord.reference);\n      validatableControlsUpdated.set(fieldKey, {\n        ...controlMapRecord,\n        hasError: fieldHasError,\n        message: fieldResult.message\n      });\n    }\n  });\n  // return validatableControls updated.\n  return validatableControlsUpdated;\n};\n\nexport type ControlValidation = {\n  reference: HTMLElement;\n  hasError: boolean;\n  message: string;\n};\n"],"version":3}

package/dist/cjs/gx-ide-ai-assistant.cjs.entry.js

@@ -1,297 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2f1471c9.js');
-const locale = require('./locale-ff30a5f3.js');
-
-const aiAssistantCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.pill-tag{padding:1px 4px;border-radius:2px;min-inline-size:40px;text-align:center;margin-inline-end:10px;font-size:11px}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{font-family:var(--mer-font-family--primary);display:block;height:100%;flex-basis:286px;flex-shrink:0;height:100%;overflow-y:auto}.gx-ide-main-wrapper{padding:0 10px 52px 10px;background-color:var(--mer-surface);height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:var(--mer-spacing--sm)}.header{padding-block-start:var(--mer-spacing--sm);display:flex;flex-direction:column}.header__actions-wrapper{display:flex;gap:var(--ai-assistant-header-actions-gap);margin-inline-start:auto}.header__first-row{display:flex;gap:var(--mer-spacing--xs);align-items:center;justify-content:space-between}.header__filter{margin-block-start:var(--mer-spacing--xs)}.header__second-row{transition:100ms grid-template-rows;display:grid;grid-template-rows:0fr}.header__second-row--visible{grid-template-rows:1fr}.header .filter-inner-wrapper{overflow:hidden}.messages-wrapper{position:relative;overflow:auto;display:flex;flex-direction:column;scroll-behavior:smooth;}.messages-wrapper::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.messages-wrapper::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.messages-wrapper::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.messages-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.messages-wrapper::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.messages{display:flex;flex-direction:column;list-style-type:none;padding:0;margin:0}.prompt{position:relative;margin-top:auto}.prompt__textarea::part(textarea-wrapper){border:none}.prompt__textarea::part(textarea){border:none;background-color:var(--mer-color__neutral-gray--800)}.prompt__shortcuts{position:absolute;display:flex;align-items:center;gap:var(--mer-spacing--2xs);padding-inline-end:var(--mer-spacing--xs);right:0;top:0;height:100%}.prompt__shortcut{color:var(--mer-color__neutral-gray--400);font-size:var(--mer-font__size--2xs);padding:var(--mer-spacing--3xs) var(--mer-spacing--xs);background-color:var(--mer-color__neutral-gray--700);border-radius:var(--mer-border__radius--xs)}";
-
-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 _GxIdeTemplate_mouseDownListener, _GxIdeTemplate_mouseUpListener;
-const CSS_BUNDLES = [
-    "resets/box-sizing",
-    "components/icon",
-    "components/button"
-];
-const GxIdeTemplate = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.setFocus = true;
-        this.scrollToBottomFlag = true;
-        this.evaluateAiInProgress = () => {
-            var _a;
-            if (((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-                this.messages[this.messages.length - 1].type === "assistant-in-progress") {
-                this.aIInProgress = true;
-            }
-            else {
-                this.aIInProgress = false;
-            }
-        };
-        this.evaluateAiStatus = () => {
-            var _a;
-            if (((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-                this.assistantStatus = "indeterminate";
-                return;
-            }
-            if (this.messages[this.messages.length - 1].type ===
-                "assistant-in-progress" ||
-                this.messages[this.messages.length - 1].type === "user") {
-                this.assistantStatus = "indeterminate";
-            }
-            else if (this.messages[this.messages.length - 1].type === "assistant-error") {
-                this.assistantStatus = "error";
-            }
-            else {
-                this.assistantStatus = "success";
-            }
-        };
-        this.renderMessage = (message, i) => {
-            if (message.text.length > 0) {
-                return (index.h("gx-ide-ai-message", { style: {
-                        "--primary-color": "lightblue"
-                    }, message: message.text, messageType: message.type, hidden: message.hidden, filterValue: this.filterValue, key: `${i.toString()}-${message.type}`, translations: this._componentLocale.aiMessage, aiAssistantHostRef: this.el }));
-            }
-        };
-        this.textAreaInputHandler = () => {
-            this.userHasTyped = true;
-            this.showFilter = false;
-            this.filterEl.value = "";
-            this.filterValue = "";
-            this.scrollToBottomFlag = true;
-        };
-        this.promptEnterHandler = async (prompt) => {
-            /* First remove double spaces */
-            const promptTrimmed = prompt.detail.replace(/\s+/g, " ");
-            /* Update textarea value to get the proper height */
-            this.textAreaEl.value = promptTrimmed;
-            setTimeout(() => {
-                /* Then save the actual height (setTimeOut required) */
-                this.lastUserMessageHeight = this.textAreaEl.offsetHeight;
-            }, 0);
-            /* The clear the textarea */
-            this.textAreaEl.value = "";
-            /* Insert the user message */
-            this.addMessage({
-                type: "user",
-                text: promptTrimmed
-            });
-            /* Call the callback */
-            if (this.userMessageCallback && !this.aIInProgress) {
-                this.aIInProgress = true;
-                this.userMessageCallback(promptTrimmed).then(() => {
-                    this.aIInProgress = false;
-                });
-            }
-        };
-        this.filterMessagesHandler = (e) => {
-            this.scrollToBottomFlag = false;
-            this.filterValue = e.detail.toLowerCase();
-            const filteredMessages = [...this.messages];
-            filteredMessages.forEach(message => {
-                if (message.text.toLowerCase().includes(this.filterValue)) {
-                    message.hidden = false;
-                }
-                else {
-                    message.hidden = true;
-                }
-            });
-            this.messages = filteredMessages;
-        };
-        this.clearMessages = () => {
-            this.messages = [];
-            this.textAreaEl.focus();
-            if (this.clearCallback) {
-                this.clearCallback();
-            }
-        };
-        this.attachShortcuts = () => {
-            var _a;
-            if (((_a = this.focusShortcuts) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                const ctrlFocusIndex = this.focusShortcuts.findIndex(key => key.toLocaleLowerCase() === "ctrl");
-                const shiftFocusIndex = this.focusShortcuts.findIndex(key => key.toLocaleLowerCase() === "shift");
-                const cmdKeyIndex = this.focusShortcuts.findIndex(key => key.toLocaleLowerCase() === "cmd");
-                const keyFocus = this.focusShortcuts
-                    .find(key => {
-                    return (key.toLocaleLowerCase() !== "ctrl" &&
-                        key.toLocaleLowerCase() !== "shift" &&
-                        key.toLocaleLowerCase() !== "cmd");
-                })
-                    .toLowerCase();
-                document.addEventListener("keydown", (e) => {
-                    if (e.key === keyFocus && ctrlFocusIndex !== -1 && e.ctrlKey) {
-                        this.textAreaEl.focus();
-                        this.userHasTyped = true;
-                    }
-                    else if (e.key === keyFocus && shiftFocusIndex !== -1 && e.shiftKey) {
-                        this.textAreaEl.focus();
-                        this.userHasTyped = true;
-                    }
-                    else if (e.key === keyFocus && cmdKeyIndex !== -1 && e.metaKey) {
-                        this.textAreaEl.focus();
-                        this.userHasTyped = true;
-                    }
-                });
-            }
-        };
-        this.promptArrowUpHandler = () => {
-            var _a;
-            this.userHasTyped = true;
-            const lastUserMessage = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.find(message => {
-                return message.type === "user";
-            });
-            if (lastUserMessage) {
-                if (this.lastUserMessageHeight) {
-                    this.textareaShadowPart.style.height = `${this.lastUserMessageHeight}px`;
-                }
-                this.textAreaEl.value = lastUserMessage.text;
-            }
-        };
-        this.toggleFilterHandler = () => {
-            this.showFilter = !this.showFilter;
-            if (this.showFilter) {
-                this.filterEl.focus();
-            }
-        };
-        this.promptFocusHandler = () => {
-            this.promptHasFocus = true;
-        };
-        this.promptBlurHandler = () => {
-            this.promptHasFocus = false;
-        };
-        this.scrollToBottom = () => {
-            if (this.scrollToBottomFlag) {
-                this.messagesWrapperEl.scrollTo(0, this.messagesWrapperEl.scrollHeight);
-                this.messagesWrapperEl.scrollTop =
-                    this.messagesWrapperEl.scrollHeight -
-                        this.messagesWrapperEl.clientHeight;
-            }
-        };
-        _GxIdeTemplate_mouseDownListener.set(this, () => {
-            this.el.removeAttribute("tabindex");
-        });
-        _GxIdeTemplate_mouseUpListener.set(this, () => {
-            this.el.setAttribute("tabindex", "0");
-        });
-        this.userHasTyped = false;
-        this.aIInProgress = false;
-        this.showFilter = false;
-        this.promptHasFocus = false;
-        this.filterValue = undefined;
-        this.messages = [];
-        this.promptMaxHeight = "128px";
-        this.assistantStatus = "indeterminate";
-        this.focusShortcuts = undefined;
-        this.userMessageCallback = undefined;
-        this.clearCallback = undefined;
-        this.promptValue = undefined;
-        this.filter = true;
-    }
-    watchAIInProgressHandler(aiInProgress) {
-        if (!aiInProgress) {
-            this.setFocus = true;
-        }
-    }
-    watchMessagesHandler() {
-        this.evaluateAiInProgress();
-        this.evaluateAiStatus();
-    }
-    async componentWillLoad() {
-        this._componentLocale = await locale.Locale.getComponentStrings(this.el);
-        this.evaluateAiInProgress();
-        this.evaluateAiStatus();
-        this.attachShortcuts();
-    }
-    componentDidLoad() {
-        this.textareaShadowPart =
-            this.textAreaEl.shadowRoot.querySelector("textarea");
-        this.el.addEventListener("mousedown", __classPrivateFieldGet(this, _GxIdeTemplate_mouseDownListener, "f"));
-        this.el.addEventListener("mouseup", __classPrivateFieldGet(this, _GxIdeTemplate_mouseUpListener, "f"));
-    }
-    componentDidRender() {
-        if (this.setFocus) {
-            setTimeout(() => {
-                /* Doesn't seems to work without the setTimeout */
-                this.textAreaEl.focus();
-                this.setFocus = false;
-            }, 50);
-        }
-        setTimeout(() => {
-            this.scrollToBottom();
-        }, 200);
-    }
-    handleFocus(event) {
-        if (this.textAreaEl) {
-            event.preventDefault();
-            this.textAreaEl.focus();
-        }
-    }
-    /**
-     * Clear the list of messages
-     */
-    async clear() {
-        this.messages = [];
-    }
-    /**
-     * Add a message. This method will be used by the host to add messages from the assistant
-     */
-    async addMessage(message) {
-        var _a;
-        if (((_a = message.text) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            const messages = [...this.messages];
-            const updateInProgressMessage = (messages === null || messages === void 0 ? void 0 : messages.length) > 0 &&
-                messages[messages.length - 1].type === "assistant-in-progress";
-            if (updateInProgressMessage) {
-                messages.pop();
-            }
-            messages.push(message);
-            this.messages = messages;
-        }
-    }
-    render() {
-        var _a, _b;
-        return (index.h(index.Host, { class: {
-                [`assistant--${this.assistantStatus}`]: true,
-                "assistant--in-progress": this.aIInProgress
-            }, tabindex: "0" }, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("div", { class: "gx-ide-main-wrapper" }, index.h("slot", null), index.h("header", { class: "header" }, index.h("div", { class: "header__first-row" }, index.h("gxg-title", { type: "title-02" }, this._componentLocale.componentName), index.h("div", { class: "header__actions-wrapper" }, this.filter ? (index.h("gxg-button", { class: "header__filter-button", type: "tertiary", icon: "menus/find", onClick: this.toggleFilterHandler, disabled: this.messages.length === 0 })) : null, index.h("gxg-button", { class: "header__clear-button", type: "tertiary", icon: "bpm/delete", onClick: this.clearMessages, disabled: this.messages.length === 0 }))), this.filter ? (index.h("div", { class: {
-                "header__second-row": true,
-                "header__second-row--visible": this.showFilter
-            } }, index.h("div", { class: "filter-inner-wrapper" }, index.h("gxg-form-text", { class: "header__filter", onInput: this.filterMessagesHandler, ref: el => (this.filterEl = el) })))) : null), index.h("div", { class: {
-                "messages-wrapper": true,
-                "scrollable": true
-            }, ref: el => (this.messagesWrapperEl = el) }, ((_a = this.messages) === null || _a === void 0 ? void 0 : _a.length) ? (index.h("ol", { class: { messages: true } }, this.messages.map((message, i) => {
-            return this.renderMessage(message, i);
-        }))) : null), index.h("div", { class: {
-                prompt: true
-            } }, index.h("gxg-form-textarea", { ai: true, class: "prompt__textarea", value: this.promptValue, maxHeight: this.promptMaxHeight, placeholder: this.aIInProgress
-                ? this._componentLocale.processingQueryPlaceholder
-                : this._componentLocale.promptPlaceholder, onInput: this.textAreaInputHandler, onEnter: this.promptEnterHandler, onArrowUpPressed: this.promptArrowUpHandler, onBlur: this.promptBlurHandler, onFocus: this.promptFocusHandler, disabled: this.aIInProgress, ref: el => (this.textAreaEl = el) }), !this.userHasTyped &&
-            !this.aIInProgress &&
-            !this.promptHasFocus &&
-            ((_b = this.focusShortcuts) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (index.h("div", { class: {
-                prompt__shortcuts: true
-            } }, this.focusShortcuts.map((shortcut, i) => {
-            /* Up to three keys allowed*/
-            return i <= 2 ? (index.h("span", { class: "prompt__shortcut" }, shortcut)) : null;
-        }))) : null))));
-    }
-    static get assetsDirs() { return ["gx-ide-assets/ai-assistant"]; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "aIInProgress": ["watchAIInProgressHandler"],
-        "messages": ["watchMessagesHandler"]
-    }; }
-};
-_GxIdeTemplate_mouseDownListener = new WeakMap(), _GxIdeTemplate_mouseUpListener = new WeakMap();
-GxIdeTemplate.style = aiAssistantCss;
-
-exports.gx_ide_ai_assistant = GxIdeTemplate;
-
-//# sourceMappingURL=gx-ide-ai-assistant.cjs.entry.js.map

package/dist/cjs/gx-ide-ai-assistant.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"gx-ide-ai-assistant.entry.cjs.js","mappings":"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","names":["h","Locale","Host"],"sources":["src/components/ai-assistant/ai-assistant.scss?tag=gx-ide-ai-assistant&encapsulation=shadow","src/components/ai-assistant/ai-assistant.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n:host {\n  font-family: var(--mer-font-family--primary);\n  display: block;\n  height: 100%;\n  flex-basis: 286px;\n  flex-shrink: 0;\n  height: 100%;\n  overflow-y: auto;\n}\n.gx-ide-main-wrapper {\n  padding: 0 10px 52px 10px;\n  background-color: var(--mer-surface);\n  height: 100%;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  gap: var(--mer-spacing--sm);\n}\n\n/*--- Header ---*/\n.header {\n  padding-block-start: var(--mer-spacing--sm);\n  display: flex;\n  flex-direction: column;\n\n  &__actions-wrapper {\n    display: flex;\n    gap: var(--ai-assistant-header-actions-gap);\n    margin-inline-start: auto;\n  }\n  &__first-row {\n    display: flex;\n    gap: var(--mer-spacing--xs);\n    align-items: center;\n    justify-content: space-between;\n  }\n  &__filter {\n    margin-block-start: var(--mer-spacing--xs);\n  }\n  &__second-row {\n    transition: 100ms grid-template-rows;\n    display: grid;\n    grid-template-rows: 0fr;\n\n    &--visible {\n      grid-template-rows: 1fr;\n    }\n  }\n  .filter-inner-wrapper {\n    overflow: hidden;\n  }\n}\n\n/*--- Messages ---*/\n.messages-wrapper {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  @include gxg-scrollbar();\n}\n.messages {\n  display: flex;\n  flex-direction: column;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n}\n\n/*--- Prompt ---*/\n.prompt {\n  position: relative;\n  margin-top: auto;\n\n  &__textarea {\n    &::part(textarea-wrapper) {\n      border: none;\n    }\n    &::part(textarea) {\n      border: none;\n      background-color: var(--mer-color__neutral-gray--800);\n    }\n  }\n  &__shortcuts {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--2xs);\n    padding-inline-end: var(--mer-spacing--xs);\n    right: 0;\n    top: 0;\n    height: 100%;\n  }\n  &__shortcut {\n    color: var(--mer-color__neutral-gray--400);\n    font-size: var(--mer-font__size--2xs);\n    padding: var(--mer-spacing--3xs) var(--mer-spacing--xs);\n    background-color: var(--mer-color__neutral-gray--700);\n    border-radius: var(--mer-border__radius--xs);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Method,\n  State,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/icon\",\n  \"components/button\"\n];\n\nimport { Locale } from \"../../common/locale\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\n@Component({\n  tag: \"gx-ide-ai-assistant\",\n  styleUrl: \"ai-assistant.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/ai-assistant\"]\n})\nexport class GxIdeTemplate {\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  /* lastUserMessageHeight is used to set the appropriate height on the textarea, if user presses arrowUp (recover last message)*/\n  private lastUserMessageHeight: number;\n  private setFocus = true;\n  private scrollToBottomFlag = true;\n\n  @Element() el: HTMLGxIdeAiAssistantElement;\n  private textAreaEl!: HTMLGxgFormTextareaElement;\n  private textareaShadowPart: HTMLTextAreaElement;\n  private filterEl: HTMLGxgFormTextElement;\n  private messagesWrapperEl!: HTMLDivElement;\n\n  /**\n   * Flag used to hide the shortcuts\n   */\n  @State() userHasTyped = false;\n\n  /**\n   * This is true if the last message is of type 'assistant-in-progress'\n   */\n  @State() aIInProgress = false;\n  @Watch(\"aIInProgress\")\n  watchAIInProgressHandler(aiInProgress: boolean) {\n    if (!aiInProgress) {\n      this.setFocus = true;\n    }\n  }\n\n  /**\n   * This displays or hides the messages filter\n   */\n  @State() showFilter = false;\n\n  /**\n   * True if the prompt textbox has focus\n   */\n  @State() promptHasFocus = false;\n\n  /**\n   * The filter value\n   */\n  @State() filterValue: string;\n\n  /**\n   * List of messages displayed by the component\n   */\n  @Prop({ mutable: true }) messages: Message[] = [];\n  @Watch(\"messages\")\n  watchMessagesHandler() {\n    this.evaluateAiInProgress();\n    this.evaluateAiStatus();\n  }\n\n  /**\n   * The prompt textarea max-height\n   */\n  @Prop() readonly promptMaxHeight = \"128px\";\n\n  /**\n   * A temporary property to illustrate the assistant status\n   */\n  @Prop({ mutable: true }) assistantStatus: AiStatus = \"indeterminate\";\n\n  /**\n   * List of keys that make up the shortcut to focus on the component's text input\n   */\n  @Prop() readonly focusShortcuts: string[];\n\n  /**\n   * List of keys that make up the shortcut to focus on the component's text input\n   */\n  @Prop() readonly userMessageCallback: UserMessageCallback;\n\n  /**\n   * Callback that must be invoked when the conversation is cleared, using the header button.\n   */\n  @Prop() readonly clearCallback: () => Promise<void>;\n\n  /**\n   * the prompt value\n   */\n  @Prop() readonly promptValue: string;\n\n  /**\n   * If tue, it will display a filter.\n   */\n  @Prop() readonly filter = true;\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateAiInProgress();\n    this.evaluateAiStatus();\n    this.attachShortcuts();\n  }\n\n  componentDidLoad() {\n    this.textareaShadowPart =\n      this.textAreaEl.shadowRoot.querySelector(\"textarea\");\n    this.el.addEventListener(\"mousedown\", this.#mouseDownListener);\n    this.el.addEventListener(\"mouseup\", this.#mouseUpListener);\n  }\n\n  componentDidRender() {\n    if (this.setFocus) {\n      setTimeout(() => {\n        /* Doesn't seems to work without the setTimeout */\n        this.textAreaEl.focus();\n        this.setFocus = false;\n      }, 50);\n    }\n    setTimeout(() => {\n      this.scrollToBottom();\n    }, 200);\n  }\n\n  @Listen(\"focus\", { capture: true })\n  handleFocus(event: FocusEvent) {\n    if (this.textAreaEl) {\n      event.preventDefault();\n      this.textAreaEl.focus();\n    }\n  }\n\n  /**\n   * Clear the list of messages\n   */\n  @Method()\n  async clear() {\n    this.messages = [];\n  }\n\n  /**\n   * Add a message. This method will be used by the host to add messages from the assistant\n   */\n  @Method()\n  async addMessage(message: Message) {\n    if (message.text?.length > 0) {\n      const messages = [...this.messages];\n      const updateInProgressMessage =\n        messages?.length > 0 &&\n        messages[messages.length - 1].type === \"assistant-in-progress\";\n      if (updateInProgressMessage) {\n        messages.pop();\n      }\n      messages.push(message);\n      this.messages = messages;\n    }\n  }\n\n  private evaluateAiInProgress = () => {\n    if (\n      this.messages?.length > 0 &&\n      this.messages[this.messages.length - 1].type === \"assistant-in-progress\"\n    ) {\n      this.aIInProgress = true;\n    } else {\n      this.aIInProgress = false;\n    }\n  };\n\n  private evaluateAiStatus = () => {\n    if (this.messages?.length === 0) {\n      this.assistantStatus = \"indeterminate\";\n      return;\n    }\n    if (\n      this.messages[this.messages.length - 1].type ===\n        \"assistant-in-progress\" ||\n      this.messages[this.messages.length - 1].type === \"user\"\n    ) {\n      this.assistantStatus = \"indeterminate\";\n    } else if (\n      this.messages[this.messages.length - 1].type === \"assistant-error\"\n    ) {\n      this.assistantStatus = \"error\";\n    } else {\n      this.assistantStatus = \"success\";\n    }\n  };\n\n  private renderMessage = (\n    message: Message,\n    i: number\n  ): HTMLLIElement | void => {\n    if (message.text.length > 0) {\n      return (\n        <gx-ide-ai-message\n          style={{\n            \"--primary-color\": \"lightblue\"\n          }}\n          message={message.text}\n          messageType={message.type}\n          hidden={message.hidden}\n          filterValue={this.filterValue}\n          key={`${i.toString()}-${message.type}`}\n          translations={this._componentLocale.aiMessage}\n          aiAssistantHostRef={this.el}\n        ></gx-ide-ai-message>\n      );\n    }\n  };\n\n  private textAreaInputHandler = () => {\n    this.userHasTyped = true;\n    this.showFilter = false;\n    this.filterEl.value = \"\";\n    this.filterValue = \"\";\n    this.scrollToBottomFlag = true;\n  };\n\n  private promptEnterHandler = async (prompt: CustomEvent<string>) => {\n    /* First remove double spaces */\n    const promptTrimmed = prompt.detail.replace(/\\s+/g, \" \");\n    /* Update textarea value to get the proper height */\n    this.textAreaEl.value = promptTrimmed;\n    setTimeout(() => {\n      /* Then save the actual height (setTimeOut required) */\n      this.lastUserMessageHeight = this.textAreaEl.offsetHeight;\n    }, 0);\n    /* The clear the textarea */\n    this.textAreaEl.value = \"\";\n    /* Insert the user message */\n    this.addMessage({\n      type: \"user\",\n      text: promptTrimmed\n    });\n    /* Call the callback */\n    if (this.userMessageCallback && !this.aIInProgress) {\n      this.aIInProgress = true;\n      this.userMessageCallback(promptTrimmed).then(() => {\n        this.aIInProgress = false;\n      });\n    }\n  };\n\n  private filterMessagesHandler = (e: CustomEvent<string>) => {\n    this.scrollToBottomFlag = false;\n    this.filterValue = e.detail.toLowerCase();\n    const filteredMessages = [...this.messages];\n    filteredMessages.forEach(message => {\n      if (message.text.toLowerCase().includes(this.filterValue)) {\n        message.hidden = false;\n      } else {\n        message.hidden = true;\n      }\n    });\n    this.messages = filteredMessages;\n  };\n\n  private clearMessages = () => {\n    this.messages = [];\n    this.textAreaEl.focus();\n    if (this.clearCallback) {\n      this.clearCallback();\n    }\n  };\n\n  private attachShortcuts = () => {\n    if (this.focusShortcuts?.length > 0) {\n      const ctrlFocusIndex = this.focusShortcuts.findIndex(\n        key => key.toLocaleLowerCase() === \"ctrl\"\n      );\n      const shiftFocusIndex = this.focusShortcuts.findIndex(\n        key => key.toLocaleLowerCase() === \"shift\"\n      );\n      const cmdKeyIndex = this.focusShortcuts.findIndex(\n        key => key.toLocaleLowerCase() === \"cmd\"\n      );\n      const keyFocus = this.focusShortcuts\n        .find(key => {\n          return (\n            key.toLocaleLowerCase() !== \"ctrl\" &&\n            key.toLocaleLowerCase() !== \"shift\" &&\n            key.toLocaleLowerCase() !== \"cmd\"\n          );\n        })\n        .toLowerCase();\n      document.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === keyFocus && ctrlFocusIndex !== -1 && e.ctrlKey) {\n          this.textAreaEl.focus();\n          this.userHasTyped = true;\n        } else if (e.key === keyFocus && shiftFocusIndex !== -1 && e.shiftKey) {\n          this.textAreaEl.focus();\n          this.userHasTyped = true;\n        } else if (e.key === keyFocus && cmdKeyIndex !== -1 && e.metaKey) {\n          this.textAreaEl.focus();\n          this.userHasTyped = true;\n        }\n      });\n    }\n  };\n\n  private promptArrowUpHandler = () => {\n    this.userHasTyped = true;\n    const lastUserMessage = this.messages?.find(message => {\n      return message.type === \"user\";\n    });\n    if (lastUserMessage) {\n      if (this.lastUserMessageHeight) {\n        this.textareaShadowPart.style.height = `${this.lastUserMessageHeight}px`;\n      }\n      this.textAreaEl.value = lastUserMessage.text;\n    }\n  };\n\n  private toggleFilterHandler = () => {\n    this.showFilter = !this.showFilter;\n    if (this.showFilter) {\n      this.filterEl.focus();\n    }\n  };\n\n  private promptFocusHandler = () => {\n    this.promptHasFocus = true;\n  };\n\n  private promptBlurHandler = () => {\n    this.promptHasFocus = false;\n  };\n\n  private scrollToBottom = () => {\n    if (this.scrollToBottomFlag) {\n      this.messagesWrapperEl.scrollTo(0, this.messagesWrapperEl.scrollHeight);\n      this.messagesWrapperEl.scrollTop =\n        this.messagesWrapperEl.scrollHeight -\n        this.messagesWrapperEl.clientHeight;\n    }\n  };\n\n  #mouseDownListener = () => {\n    this.el.removeAttribute(\"tabindex\");\n  };\n\n  #mouseUpListener = () => {\n    this.el.setAttribute(\"tabindex\", \"0\");\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`assistant--${this.assistantStatus}`]: true,\n          \"assistant--in-progress\": this.aIInProgress\n        }}\n        tabindex=\"0\"\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"gx-ide-main-wrapper\">\n          <slot></slot>\n          <header class=\"header\">\n            <div class=\"header__first-row\">\n              <gxg-title type=\"title-02\">\n                {this._componentLocale.componentName}\n              </gxg-title>\n              <div class=\"header__actions-wrapper\">\n                {this.filter ? (\n                  <gxg-button\n                    class=\"header__filter-button\"\n                    type=\"tertiary\"\n                    icon=\"menus/find\"\n                    onClick={this.toggleFilterHandler}\n                    disabled={this.messages.length === 0}\n                  ></gxg-button>\n                ) : null}\n\n                <gxg-button\n                  class=\"header__clear-button\"\n                  type=\"tertiary\"\n                  icon=\"bpm/delete\"\n                  onClick={this.clearMessages}\n                  disabled={this.messages.length === 0}\n                ></gxg-button>\n              </div>\n            </div>\n            {this.filter ? (\n              <div\n                class={{\n                  \"header__second-row\": true,\n                  \"header__second-row--visible\": this.showFilter\n                }}\n              >\n                <div class=\"filter-inner-wrapper\">\n                  <gxg-form-text\n                    class=\"header__filter\"\n                    onInput={this.filterMessagesHandler as any}\n                    ref={el => (this.filterEl = el as HTMLGxgFormTextElement)}\n                  ></gxg-form-text>\n                </div>\n              </div>\n            ) : null}\n          </header>\n\n          <div\n            class={{\n              \"messages-wrapper\": true,\n              \"scrollable\": true\n            }}\n            ref={el => (this.messagesWrapperEl = el as HTMLDivElement)}\n          >\n            {this.messages?.length ? (\n              <ol class={{ messages: true }}>\n                {this.messages.map((message, i) => {\n                  return this.renderMessage(message, i);\n                })}\n              </ol>\n            ) : null}\n          </div>\n\n          <div\n            class={{\n              prompt: true\n            }}\n          >\n            <gxg-form-textarea\n              ai\n              class=\"prompt__textarea\"\n              value={this.promptValue}\n              maxHeight={this.promptMaxHeight}\n              placeholder={\n                this.aIInProgress\n                  ? this._componentLocale.processingQueryPlaceholder\n                  : this._componentLocale.promptPlaceholder\n              }\n              onInput={this.textAreaInputHandler}\n              onEnter={this.promptEnterHandler}\n              onArrowUpPressed={this.promptArrowUpHandler}\n              onBlur={this.promptBlurHandler}\n              onFocus={this.promptFocusHandler}\n              disabled={this.aIInProgress}\n              ref={el => (this.textAreaEl = el as HTMLGxgFormTextareaElement)}\n            ></gxg-form-textarea>\n            {!this.userHasTyped &&\n            !this.aIInProgress &&\n            !this.promptHasFocus &&\n            this.focusShortcuts?.length > 0 ? (\n              <div\n                class={{\n                  prompt__shortcuts: true\n                }}\n              >\n                {this.focusShortcuts.map((shortcut, i) => {\n                  /* Up to three keys allowed*/\n                  return i <= 2 ? (\n                    <span class=\"prompt__shortcut\">{shortcut}</span>\n                  ) : null;\n                })}\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type AiStatus = \"indeterminate\" | \"success\" | \"error\";\n\nexport type Message = {\n  type: MessageType;\n  text: string;\n  hidden?: boolean;\n  filterValue?: string;\n};\n\nexport type MessageType =\n  | \"user\"\n  | \"assistant-chat\"\n  | \"assistant-action\"\n  | \"assistant-in-progress\"\n  | \"assistant-error\";\n\nexport type UserMessageCallback = (text: string) => Promise<void>;\n"],"version":3}

package/dist/cjs/gx-ide-ai-message.cjs.entry.js

@@ -1,97 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-2f1471c9.js');
-const MERCURY_ASSETS = require('./MERCURY_ASSETS-f14e91ff.js');
-const locale = require('./locale-ff30a5f3.js');
-const helpers = require('./helpers-21c9cd02.js');
-
-const aiMessageCss = ":host{font-family:var(--mer-font-family--primary)}.message{color:var(--mer-color__neutral-gray--100);display:grid;grid-template-rows:0fr;transition:grid-template-rows 100ms;transition:grid-template-rows 100ms, -ms-grid-rows 100ms;}.message__outer-wrapper{overflow:hidden}.message__inner-wrapper{padding:var(--mer-spacing--sm) var(--mer-spacing--sm);border-radius:var(--mer-border__radius--sm);border-inline-start:var(--mer-border__width--md) solid transparent;background-color:var(--mer-color__neutral-gray--1200);margin-block-start:var(--mer-spacing--xs);position:relative}.message__header{display:flex;gap:var(--mer-spacing--xs);justify-content:space-between}.message__header .icon-md{opacity:0}.message__header--in-progress{display:contents}.message__role{font-weight:var(--mer-font__weight--semi-bold);margin-block-end:var(--mer-spacing--xs);display:inline-grid;grid-template-columns:max-content 1fr;gap:8px}.message__role:before{content:\"\";display:grid;place-self:center flex-end;inline-size:4px;block-size:4px;border-radius:50%;background-color:currentcolor}.message__role-description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;padding-block-start:2px}.message__role--user{color:var(--mer-color__primary--300)}.message__role--hidden{display:none}.message__caption{font-size:var(--mer-font__size--xs);line-height:var(--mer-line-height--regular)}.message--visible{grid-template-rows:1fr}.message--copying{pointer-events:none}.message--copying span:not(.copied),.message--copying .message__caption{color:transparent;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.message--user .message__inner-wrapper{background-color:rgba(91, 167, 255, 0.08);border-color:var(--mer-border-color__primary)}.message--assistant-action .message__inner-wrapper{background-color:rgba(63, 168, 155, 0.05);border-color:var(--mer-border-color__success)}.message--assistant-chat .message__inner-wrapper{background-color:var(--mer-surface__elevation--01)}.message--assistant-in-progress{color:var(--mer-color__neutral-gray--500)}.message--assistant-in-progress .message__inner-wrapper{font-style:italic;display:grid;grid-template-columns:1fr auto;gap:var(--mer-spacing--xs)}.message--assistant-in-progress .message__inner-wrapper .message__caption{flex:1}.message--assistant-in-progress .message__inner-wrapper .animation-wrapper{flex:none}.message--assistant-error .message__inner-wrapper{background-color:rgba(251, 124, 132, 0.05);border-color:var(--mer-border-color__error)}.message--copyable:hover{filter:brightness(1.2)}.message--copyable:hover .icon-md{opacity:1}.message:last-child{margin-block-end:0}:host(:first-child) .message__inner-wrapper{margin-block-end:0}.animation-wrapper{width:45px;display:flex;align-items:center;justify-content:center}.dot-pulse{position:relative;left:-9999px;width:5px;height:5px;border-radius:2.5px;background-color:var(--mer-color__neutral-gray--400);color:var(--mer-color__neutral-gray--400);box-shadow:9999px 0 0 -5px;animation:dot-pulse 1.5s infinite linear;animation-delay:0.25s}.dot-pulse::before,.dot-pulse::after{content:\"\";display:inline-block;position:absolute;top:0;width:5px;height:5px;border-radius:2.5px;background-color:var(--mer-color__neutral-gray--400);color:var(--mer-color__neutral-gray--400)}.dot-pulse::before{box-shadow:9984px 0 0 -5px;animation:dot-pulse-before 1.5s infinite linear;animation-delay:0s}.dot-pulse::after{box-shadow:10014px 0 0 -5px;animation:dot-pulse-after 1.5s infinite linear;animation-delay:0.5s}@keyframes dot-pulse-before{0%{box-shadow:9984px 0 0 -5px}30%{box-shadow:9984px 0 0 2px}60%,100%{box-shadow:9984px 0 0 -5px}}@keyframes dot-pulse{0%{box-shadow:9999px 0 0 -5px}30%{box-shadow:9999px 0 0 2px}60%,100%{box-shadow:9999px 0 0 -5px}}@keyframes dot-pulse-after{0%{box-shadow:10014px 0 0 -5px}30%{box-shadow:10014px 0 0 2px}60%,100%{box-shadow:10014px 0 0 -5px}}.copied{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--mer-color__neutral-gray--300);display:flex;gap:var(--mer-spacing--xs);opacity:0;animation:fadeIn var(--mer-timing--regular) ease-out forwards}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}";
-
-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 _GxIdeAiMessage_buttonMouseDownHandler;
-const COPY_ICON = MERCURY_ASSETS.getIconPath({
-    category: "bpm",
-    name: "tasks",
-    colorType: "neutral"
-});
-const GxIdeAiMessage = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.copyable = false;
-        this.copyMessage = () => {
-            navigator.clipboard.writeText(this.message);
-            this.showCopiedMessage = true;
-            setTimeout(() => {
-                this.showCopiedMessage = false;
-            }, 1500);
-        };
-        _GxIdeAiMessage_buttonMouseDownHandler.set(this, (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        });
-        this.evaluateMessageIsCopyable = () => {
-            this.copyable = this.messageType !== "assistant-in-progress";
-        };
-        this.evaluateCopyIcon = () => {
-            return this.copyable ? (index.h("button", { class: "button-tertiary button-icon-only", "aria-label": "copy", onClick: this.copyMessage, onMouseDown: __classPrivateFieldGet(this, _GxIdeAiMessage_buttonMouseDownHandler, "f") }, index.h("ch-image", { class: "icon-md", src: COPY_ICON }))) : null;
-        };
-        this.visible = false;
-        this.showCopiedMessage = false;
-        this.aiAssistantHostRef = undefined;
-        this.message = undefined;
-        this.messageType = undefined;
-        this.filterValue = undefined;
-        this.hidden = undefined;
-        this.translations = undefined;
-    }
-    async componentWillLoad() {
-        this._componentLocale = await locale.Locale.getComponentStrings(this.el);
-        this.evaluateMessageIsCopyable();
-    }
-    componentDidRender() {
-        setTimeout(() => {
-            /* Without the timeout it appears instantly (no apparent transition)*/
-            this.visible = true;
-            const messagesList = this.el.parentElement;
-            messagesList.scrollTo(0, 0);
-        }, 0);
-    }
-    render() {
-        return (index.h("li", { class: {
-                "message": true,
-                "message--visible": this.visible && !this.hidden,
-                [`message--${[this.messageType]}`]: true,
-                "message--assistant": this.messageType !== "user",
-                "message--copyable": this.copyable,
-                "message--copying": this.showCopiedMessage
-            } }, index.h("div", { class: "message__outer-wrapper" }, index.h("div", { class: {
-                "message__inner-wrapper": true
-            } }, this.messageType === "user" ? (index.h("div", { class: "message__header" }, index.h("span", { class: "message__role message__role--user" }, index.h("span", { class: "message__role-description" }, this._componentLocale.you)), this.evaluateCopyIcon())) : (index.h("div", { class: {
-                "message__header": true,
-                "message__header--in-progress": this.messageType === "assistant-in-progress"
-            } }, index.h("span", { class: {
-                "message__role": this.messageType !== "assistant-in-progress",
-                "message__role--hidden": this.messageType === "assistant-in-progress",
-                "message__role--assistant": true
-            } }, index.h("span", { class: "message__role-description" }, this._componentLocale.assistant)), this.evaluateCopyIcon())), index.h("div", { class: {
-                "message__caption": true,
-                "message__caption--in-progress": this.messageType === "assistant-in-progress"
-            } }, this.showCopiedMessage ? (index.h("span", { class: "copied" }, index.h("ch-image", { class: "icon-md", src: COPY_ICON }), this.translations["copied"])) : null, helpers.hiChar(this.message, this.filterValue)), this.messageType === "assistant-in-progress" ? (index.h("div", { class: "animation-wrapper" }, index.h("div", { class: "dot-pulse" }))) : null))));
-    }
-    static get assetsDirs() { return ["gx-ide-assets/ai-message"]; }
-    get el() { return index.getElement(this); }
-};
-_GxIdeAiMessage_buttonMouseDownHandler = new WeakMap();
-GxIdeAiMessage.style = aiMessageCss;
-
-exports.gx_ide_ai_message = GxIdeAiMessage;
-
-//# sourceMappingURL=gx-ide-ai-message.cjs.entry.js.map

package/dist/cjs/gx-ide-ai-message.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"gx-ide-ai-message.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,YAAY,GAAG,grIAAgrI;;;;;;;;;;ACQrsI,MAAM,SAAS,GAAGA,0BAAW,CAAC;IAC5B,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,OAAO;IACb,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;MAQU,cAAc;;;QAGjB,aAAQ,GAAG,KAAK,CAAC;QA0DjB,gBAAW,GAAG;YACpB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC5C,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,UAAU,CAAC;gBACT,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;aAChC,EAAE,IAAI,CAAC,CAAC;SACV,CAAC;QAEF,iDAA0B,CAAC,CAAa;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;SACrB,EAAC;QAEM,8BAAyB,GAAG;YAClC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAK,uBAAuB,CAAC;SAC9D,CAAC;QAEM,qBAAgB,GAAG;YACzB,OAAO,IAAI,CAAC,QAAQ,IAClBC,oBACE,KAAK,EAAC,kCAAkC,gBAC7B,MAAM,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,uBAAA,IAAI,8CAAwB,IAEzCA,sBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,SAAS,GAAa,CAC9C,IACP,IAAI,CAAC;SACV,CAAC;uBA/EiB,KAAK;iCAKK,KAAK;;;;;;;;IAgClC,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,MAAMC,aAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,yBAAyB,EAAE,CAAC;KAClC;IAED,kBAAkB;QAChB,UAAU,CAAC;;YAET,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YAC3C,YAAY,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SAC7B,EAAE,CAAC,CAAC,CAAC;KACP;IAgCD,MAAM;QACJ,QACED,gBACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,kBAAkB,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM;gBAChD,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,IAAI;gBACxC,oBAAoB,EAAE,IAAI,CAAC,WAAW,KAAK,MAAM;gBACjD,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;aAC3C,IAEDA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,iBACE,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;aAC/B,IAEA,IAAI,CAAC,WAAW,KAAK,MAAM,IAC1BA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,kBAAM,KAAK,EAAC,mCAAmC,IAC7CA,kBAAM,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACrB,CACF,EACN,IAAI,CAAC,gBAAgB,EAAE,CACpB,KAENA,iBACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,8BAA8B,EAC5B,IAAI,CAAC,WAAW,KAAK,uBAAuB;aAC/C,IAEDA,kBACE,KAAK,EAAE;gBACL,eAAe,EACb,IAAI,CAAC,WAAW,KAAK,uBAAuB;gBAC9C,uBAAuB,EACrB,IAAI,CAAC,WAAW,KAAK,uBAAuB;gBAC9C,0BAA0B,EAAE,IAAI;aACjC,IAEDA,kBAAM,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAC3B,CACF,EACN,IAAI,CAAC,gBAAgB,EAAE,CACpB,CACP,EACDA,iBACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,+BAA+B,EAC7B,IAAI,CAAC,WAAW,KAAK,uBAAuB;aAC/C,IAEA,IAAI,CAAC,iBAAiB,IACrBA,kBAAM,KAAK,EAAC,QAAQ,IAClBA,sBAAU,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,SAAS,GAAa,EACpD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CACvB,IACL,IAAI,EACPE,cAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CACnC,EACL,IAAI,CAAC,WAAW,KAAK,uBAAuB,IAC3CF,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,iBAAK,KAAK,EAAC,WAAW,GAAO,CACzB,IACJ,IAAI,CACJ,CACF,CACH,EACL;KACH;;;;;;;;;","names":["getIconPath","h","Locale","hiChar"],"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"],"version":3}