@genexus/mercury 0.29.0 → 0.31.0

package/dist/bundles/css/utils/layout.css

@@ -1 +1 @@
-.layout{--spacing-body-block-start: var(--mer-spacing--md);--spacing-body-block-end: var(--mer-spacing--md);--spacing-body-inline-start: var(--mer-spacing--lg);--spacing-body-inline-end: var(--mer-spacing--lg);display:grid;gap:var(--mer-spacing--md)}.layout__panel{display:grid}.layout--cols-1{grid-template-rows:1fr;grid-template-columns:1fr}.layout--cols-2{grid-template-rows:1fr;grid-template-columns:repeat(2, 1fr)}.layout--cols-3{grid-template-rows:1fr;grid-template-columns:repeat(3, 1fr)}.layout--cols-4{grid-template-rows:1fr;grid-template-columns:repeat(4, 1fr)}.layout--cols-1-2{grid-template-rows:1fr;grid-template-columns:1fr 2fr}.layout--cols-2-1{grid-template-rows:1fr;grid-template-columns:2fr 1fr}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.control-footer,.control-footer-with-border{--control-footer-justify-content: end;padding-block-start:var(--mer-spacing--xs);display:flex;justify-content:var(--control-footer-justify-content);align-items:center}.control-footer-start{--control-footer-justify-content: start}.control-footer-center{--control-footer-justify-content: center}.control-footer-space-between{--control-footer-justify-content: space-between}.control-footer-with-border{border-block-start:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01)}.control-header,.control-header-with-border{padding-block-end:var(--mer-spacing--md)}.control-header-with-border{border-block-end:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01)}
+@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.layout{--spacing-body-block-start: var(--mer-spacing--md);--spacing-body-block-end: var(--mer-spacing--md);--spacing-body-inline-start: var(--mer-spacing--lg);--spacing-body-inline-end: var(--mer-spacing--lg);display:grid;gap:var(--mer-spacing--md)}.layout__panel{display:grid}.layout--cols-1{grid-template-rows:1fr;grid-template-columns:1fr}.layout--cols-2{grid-template-rows:1fr;grid-template-columns:repeat(2, 1fr)}.layout--cols-3{grid-template-rows:1fr;grid-template-columns:repeat(3, 1fr)}.layout--cols-4{grid-template-rows:1fr;grid-template-columns:repeat(4, 1fr)}.layout--cols-1-2{grid-template-rows:1fr;grid-template-columns:1fr 2fr}.layout--cols-2-1{grid-template-rows:1fr;grid-template-columns:2fr 1fr}.control-footer,.control-footer-with-border{--control-footer-justify-content: end;padding-block-start:var(--mer-spacing--xs);display:flex;justify-content:var(--control-footer-justify-content);align-items:center}.control-footer-start{--control-footer-justify-content: start}.control-footer-center{--control-footer-justify-content: center}.control-footer-space-between{--control-footer-justify-content: space-between}.control-footer-with-border{border-block-start:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01)}.control-header,.control-header-with-border{padding-block-end:var(--mer-spacing--md)}.control-header-with-border{border-block-end:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01)}

package/dist/components/chat/actions.lit.d.ts

@@ -0,0 +1,2 @@
+import type { ChatActionsRender } from "@genexus/chameleon-controls-library/dist/types/components/chat/types";
+export declare const customActionsRender: ChatActionsRender;

package/dist/components/chat/actions.lit.js

@@ -0,0 +1,18 @@
+import { html } from "lit";
+import { when } from "lit/directives/when.js";
+import { copyButtonClickHandler, getMessageSerializedContentAll, tokenMap } from "./utils.js";
+const copyClickHandler = (event, message) => {
+    // We use the whole message to support copying the files and/or sources
+    const messageSerializedContentAll = getMessageSerializedContentAll(message);
+    copyButtonClickHandler(event, messageSerializedContentAll);
+};
+export const customActionsRender = (message, chatRef) => {
+    const { accessibleName } = chatRef.translations;
+    const conditionToRender1 = message.role === "assistant" &&
+        (message.status === "complete" || !message.status);
+    const conditionToRender2 = message.role === "error";
+    return when(conditionToRender1 || conditionToRender2, () => html `<div part="actions-container"><button aria-label="${accessibleName.copyMessageContent}" part="${tokenMap({
+        [`action-button action-copy-message ${message.id}`]: true,
+        ...(message.parts ? { [message.parts]: true } : {})
+    })}" type="button" @click="${(e) => copyClickHandler(e, message)}"></button></div>`);
+};

package/dist/components/chat/code-block.lit.d.ts

@@ -0,0 +1,2 @@
+import type { ChatCodeBlockRender } from "@genexus/chameleon-controls-library/dist/types/components/chat/types";
+export declare const customCodeBlockRender: ChatCodeBlockRender;

package/dist/components/chat/code-block.lit.js

@@ -0,0 +1,9 @@
+import { html } from "lit";
+import { when } from "lit/directives/when.js";
+import { copyButtonClickHandler } from "./utils.js";
+const downloadCodeBlockCallback = (plainText, language, downloadCodeBlock) => () => downloadCodeBlock(plainText, language);
+export const customCodeBlockRender = (chatRef) => (options) => {
+    const { accessibleName, text } = chatRef.translations;
+    const downloadCb = chatRef.callbacks?.downloadCodeBlock;
+    return html `<div part="code-block"><div part="code-block__header"><span part="code-block__header-caption">${options.language}</span><div part="code-block__header-actions"><button class="button-copy-code" aria-label="${text.copyCodeButton}" part="code-block__button--icon-only code-block__copy-code-button" type="button" @click="${(e) => copyButtonClickHandler(e, options.plainText)}"></button> ${when(downloadCb, () => html `<button aria-label="${accessibleName.downloadCodeButton}" part="code-block__button--icon-only code-block__download-code-button" @click="${downloadCodeBlockCallback(options.plainText, options.language, downloadCb)}"></button>`)}</div></div><ch-code .language="${options.language}" .lastNestedChildClass="${options.lastNestedChildClass}" part="code-block__content" .showIndicator="${options.showIndicator}" .value="${options.plainText}"></ch-code></div>`;
+};

package/dist/components/chat/file.lit.d.ts

@@ -0,0 +1,9 @@
+import type { ChatMessageFile } from "@genexus/chameleon-controls-library/dist/types/components/chat/types";
+import { type TemplateResult } from "lit";
+import "./mer-spinner.lit.js";
+export declare const customFileRenders: {
+    readonly audio: (file: ChatMessageFile) => TemplateResult;
+    readonly video: (file: ChatMessageFile) => TemplateResult;
+    readonly image: (file: ChatMessageFile) => TemplateResult;
+    readonly file: (file: ChatMessageFile) => TemplateResult;
+};

package/dist/components/chat/file.lit.js

@@ -0,0 +1,71 @@
+import { html, nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "./mer-spinner.lit.js";
+import { tokenMap } from "./utils.js";
+const DEFAULT_FILE_UPLOAD_STATE = "uploaded";
+// /**
+//  * Returns a skeleton element shown while a file is being uploaded.
+//  *
+//  * In Mercury, the loading state is visually represented in the footer,
+//  * so this skeleton is currently unused. However, it is recommended to keep
+//  * this function in the file in case the design changes and a visual loader
+//  * inside the file container becomes necessary again.
+//  *
+//  * @param file - The file object containing metadata and upload state.
+//  * @param fileFormat - The format type of the file (e.g., text, image, etc.).
+//  * @returns A TemplateResult with the skeleton element or `nothing` if not loading.
+//  */
+// const fileSkeleton = (
+//   file: ChatMessageFile,
+//   fileFormat: keyof ChMimeTypeFormatMap
+// ): TemplateResult | typeof nothing => {
+//   return file.uploadState === "in-progress"
+//     ? html`<div
+//         part=${tokenMap({
+//           [`file-skeleton format-${fileFormat} ${file.mimeType} ${
+//             file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE
+//           }`]: true,
+//           [file.extension!]: !!file.extension,
+//           [file.parts!]: !!file.parts
+//         })}
+//       ></div>`
+//     : nothing;
+// };
+const fileFooter = (file, fileFormat) => {
+    return html `<div class="elevation-1" part="${tokenMap({
+        [`file-footer format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
+        [file.extension]: !!file.extension,
+        [file.parts]: !!file.parts
+    })}"><span class="body-regular-xs" part="file-caption">${file.caption}${file.extension && "." + file.extension.toLowerCase()} </span>${file.uploadState === "in-progress"
+        ? html `<mer-spinner></mer-spinner>`
+        : nothing}</div>`;
+};
+const getFileContainerParts = (file, fileFormat) => {
+    return tokenMap({
+        [`file-container format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
+        [file.extension]: !!file.extension,
+        [file.parts]: !!file.parts
+    });
+};
+const getFileParts = (file, fileFormat) => tokenMap({
+    [`file format-${fileFormat} ${file.mimeType} ${file.uploadState ?? DEFAULT_FILE_UPLOAD_STATE}`]: true,
+    [file.extension]: !!file.extension,
+    [file.parts]: !!file.parts
+});
+// TODO: Improve accessibility by exposing progress or spin states while
+// uploading
+export const customFileRenders = {
+    audio: (file) => {
+        return html `<li class="file-container" part="${getFileContainerParts(file, "audio")}"><audio aria-label="${ifDefined(file.accessibleName)}" part="${getFileParts(file, "audio")}" src="${ifDefined(file.uploadState === "in-progress" ? undefined : file.url)}" controls></audio>${fileFooter(file, "audio")}</li>`;
+    },
+    video: (file) => {
+        return html `<li class="file-container" part="${getFileContainerParts(file, "video")}"><video aria-label="${ifDefined(file.accessibleName)}" part="${getFileParts(file, "video")}" src="${ifDefined(file.uploadState === "in-progress" ? undefined : file.url)}" controls></video>${fileFooter(file, "video")}</li>`;
+    },
+    image: (file) => {
+        return html `<li class="file-container" part="${getFileContainerParts(file, "image")}"><img aria-label="${ifDefined(file.accessibleName)}" part="${getFileParts(file, "image")}" src="${file.url}" alt="${file.alternativeText ?? file.accessibleName ?? ""}" loading="lazy"> ${fileFooter(file, "image")}</li>`;
+    },
+    file: (file) => {
+        const disabledWhileUploading = file.uploadState === "in-progress";
+        return html `<li class="file-container" part="${getFileContainerParts(file, "file")}"><a aria-label="${ifDefined(file.accessibleName)}" role="${disabledWhileUploading ? "link" : nothing}" aria-disabled="${disabledWhileUploading ? "true" : nothing}" part="${getFileParts(file, "file")}" href="${disabledWhileUploading ? nothing : file.url}" target="_blank"></a> ${fileFooter(file, "file")}</li>`;
+    }
+};

package/dist/components/chat/mer-animated-dots.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from "lit";
+export declare class MerAnimatedDots extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mer-animated-dots": MerAnimatedDots;
+    }
+}

package/dist/components/chat/mer-animated-dots.js

@@ -0,0 +1,60 @@
+import { LitElement, css, html } from "lit";
+const DOT_SELECTOR = "dot";
+export class MerAnimatedDots extends LitElement {
+    static styles = css `
+    :host {
+      --dot-size: 5px;
+      --dot-initial-opacity: 0;
+      --dot-initial-scale: 0.5;
+      --animation-duration: 0.4s;
+      display: inline-flex;
+      gap: calc(var(--dot-size) / 1.15);
+    }
+
+    .dot {
+      display: inline-block;
+      inline-size: var(--dot-size);
+      block-size: var(--dot-size);
+      border-radius: calc(var(--dot-size) / 2);
+      opacity: var(--dot-initial-opacity);
+      transform: scale(var(--dot-initial-scale));
+      animation: animateDot var(--animation-duration) ease-in-out infinite alternate;
+    }
+    .dot:first-child {
+      background-color: var(
+        --chat-avatar-waiting-dot-1-color,
+        var(--mer-color__chat-awaiting-dot-1)
+      );
+    }
+    .dot:nth-child(2) {
+      animation-delay: calc(var(--animation-duration) / 3);
+      background-color: var(
+        --chat-avatar-waiting-dot-2-color,
+        var(--mer-color__chat-awaiting-dot-2)
+      );
+    }
+    .dot:nth-child(3) {
+      animation-delay: calc(var(--animation-duration) / 1.5);
+      background-color: var(
+        --chat-avatar-waiting-dot-3-color,
+        var(--mer-color__chat-awaiting-dot-3)
+      );
+    }
+
+    @keyframes animateDot {
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  `;
+    // Render the UI as a function of component state
+    render() {
+        return html `<div class=${DOT_SELECTOR} part="dot dot-1"></div>
+      <div class=${DOT_SELECTOR} part="dot dot-2"></div>
+      <div class=${DOT_SELECTOR} part="dot dot-3"></div>`;
+    }
+}
+if (!customElements.get("mer-animated-dots")) {
+    customElements.define("mer-animated-dots", MerAnimatedDots);
+}

package/dist/components/chat/mer-spinner.lit.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from "lit";
+export declare class MerSpinner extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "mer-spinner": MerSpinner;
+    }
+}

package/dist/components/chat/mer-spinner.lit.js

@@ -0,0 +1,10 @@
+import { LitElement, css, html } from "lit";
+export class MerSpinner extends LitElement {
+    static styles = css `:host{--spinner-size:var(--mer-spacing--md);--spinner-color:var(--mer-color__primary--300);--track-color:var(--mer-color__tinted-primary--50);--border-thinness:7;inline-size:var(--spinner-size);block-size:var(--spinner-size);border:calc(var(--spinner-size)/ var(--border-thinness)) solid var(--track-color);border-block-start:calc(var(--spinner-size)/ var(--border-thinness)) solid var(--spinner-color);border-radius:50%;animation:spin var(--mer-timing--regular,1s) linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}`;
+    render() {
+        return html ``;
+    }
+}
+if (!customElements.get("mer-spinner")) {
+    customElements.define("mer-spinner", MerSpinner);
+}

package/dist/components/chat/render.lit.d.ts

@@ -0,0 +1,4 @@
+import type { ChatMessageRenderBySections, ChatSendContainerLayout } from "@genexus/chameleon-controls-library/dist/types/components/chat/types";
+import "./mer-animated-dots.js";
+export declare const renderItem: ChatMessageRenderBySections;
+export declare const sendContainerLayout: ChatSendContainerLayout;

package/dist/components/chat/render.lit.js

@@ -0,0 +1,104 @@
+/*
+README:
+This file contains two utilities:
+
+1) [Sections for customitizing the ch-chat renderItem]
+The following sections are being customized at the time of writting:
+- actions: customActionsRender,
+- codeBlock: customCodeBlockRender,
+- content: customContentRender
+
+What for?
+
+- actions: In order to be able to customize the copy button, by adding a part
+"copying" when the user copies the message. This additional part allows changing
+the current button icon of "copy" to a "checked" icon.
+- codeBlock: Same reason as "actions" section.
+- content: Mercury includes a "header" section for the assistant message. This
+header includes an avatar, the assistant name, and optionally the message time.
+This header requires custom markup, and for this reason this section has to be
+customized.
+
+2) [Configuration for the ch-chat sendContainerLayout property]
+The chat styles are designed for a specific layout, so users must use the sendContainerLayout provided by Mercury. Customizing it is not supported.
+*/
+import { html, nothing } from "lit";
+// Side effect to define the animation for "waiting" messages.
+import { customActionsRender } from "./actions.lit.js";
+import { customCodeBlockRender } from "./code-block.lit.js";
+import { customFileRenders } from "./file.lit.js";
+import { DEFAULT_ASSISTANT_STATUS, getMessageContent, tokenMap } from "./utils.js";
+import "./mer-animated-dots.js";
+// 1) [Sections for customitizing the ch-chat renderItem.]
+/**
+ * Mercury section that includes the assistant the assistant name, and an optional message time.
+ *
+ * @param messageMetaData - Metadata containing agentName and time
+ * @returns TemplateResult rendering the assistant message header
+ */
+const messageHeader = (messageMetaData, waiting = false) => {
+    const agentName = messageMetaData?.agentName;
+    const assistantId = agentName?.toLowerCase().replace(/ /g, "-");
+    const messageTime = messageMetaData?.time;
+    return html `<div part="header assistant${assistantId ? ` header-${assistantId}` : ""}"><div part="header__start assistant"><div part="header__avatar-container assistant"><div part="header__avatar-border assistant"></div><div part="header__avatar-image assistant"></div></div><div part="header__role assistant">${agentName}</div>${waiting ? html `<mer-animated-dots></mer-animated-dots>` : nothing}</div>${messageTime
+        ? html `<time datetime="${messageTime}" part="header__time assistant">${messageTime}</time>`
+        : nothing}</div>`;
+};
+// customzied in order to add the custom "messageHeader"
+const customAssistantContentRender = (message, chatRef, codeBlockRender) => {
+    const messageContent = getMessageContent(message);
+    return message.status === "waiting"
+        ? html `${messageHeader(message.metadata, true)}<div class="assistant-loading" part="${tokenMap({
+            [`assistant content waiting ${message.id}`]: true,
+            ...(message.parts ? { [message.parts]: true } : {})
+        })}">${messageContent}</div>`
+        : html `${messageHeader(message.metadata)}<ch-markdown-viewer part="${tokenMap({
+            [`assistant content ${message.id} ${message.status ?? DEFAULT_ASSISTANT_STATUS}`]: true,
+            ...(message.parts ? { [message.parts]: true } : {})
+        })}" .renderCode="${
+        // WA: Define codeBlockRender as "never" to avoid types incompatibility:
+        // codeBlockRender returns TemplateResult and renderCode expects TemplateResult | undefined
+        // In Chameleon this type mismatch does not happens. TODO: Evaluate a solution in Chameleon.
+        codeBlockRender(chatRef)}" .showIndicator="${message.status === "streaming"}" .theme="${chatRef.markdownTheme ?? undefined}" .value="${messageContent}"></ch-markdown-viewer>`;
+};
+// customzied in order to add the custom "messageHeader"
+const customErrorContentRender = (message, chatRef, codeBlockRender) => {
+    const errorContent = getMessageContent(message);
+    return html `${messageHeader(message.metadata)}<ch-markdown-viewer part="${tokenMap({
+        [`error content ${message.id}`]: true,
+        ...(message.parts ? { [message.parts]: true } : {})
+    })}" .renderCode="${
+    // WA: Define codeBlockRender as "never" to avoid types incompatibility:
+    // codeBlockRender returns TemplateResult and renderCode expects TemplateResult | undefined
+    // In Chameleon this type mismatch does not happens. TODO: Evaluate a solution in Chameleon.
+    codeBlockRender(chatRef)}" .theme="${chatRef.markdownTheme ?? undefined}" .value="${errorContent}"></ch-markdown-viewer>`;
+};
+// No modification. It is required to be defined.
+const defaultSystemContentRender = () => "string | TemplateResult";
+// No modification. It is required to be defined.
+const defaultUserContentRender = (messageModel) => getMessageContent(messageModel) ?? "";
+const contentRenderByRole = {
+    // TODO: Check if each contentRender can be optional, since it may be not me required to implement
+    // a custom render for each type of content. ie.: Mercury does not requres to customize "system" and "user"
+    assistant: customAssistantContentRender,
+    error: customErrorContentRender,
+    system: defaultSystemContentRender, // No modification
+    user: defaultUserContentRender // No modification
+};
+const customContentRender = (message, chatRef, codeBlockRender) => contentRenderByRole[message.role](message, chatRef, codeBlockRender);
+export const renderItem = {
+    actions: customActionsRender,
+    codeBlock: customCodeBlockRender,
+    content: customContentRender,
+    file: customFileRenders
+};
+// 2) [Configuration for the ch-chat sendContainerLayout property]
+export const sendContainerLayout = {
+    sendInputAfter: [
+        "attach-files-button",
+        "live-audio-button",
+        "send-button",
+        "chat-attached-files-viewer"
+    ],
+    sendContainerAfter: ["live-audio-container"]
+};

package/dist/components/chat/types.d.ts

@@ -0,0 +1,4 @@
+export type MercuryChatMessageMetadata = {
+    agentName: string;
+    time?: string;
+};

package/dist/components/chat/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/chat/utils.d.ts

@@ -0,0 +1,23 @@
+import type { ChatMessageNoId } from "@genexus/chameleon-controls-library/dist/types/components/chat/types";
+export declare const getMessageSerializedContentAll: (message: ChatMessageNoId) => string;
+export declare const getMessageContent: (message: ChatMessageNoId) => string | undefined;
+/**
+ * Converts an object mapping token keys to booleans into a space-separated
+ * string containing the token keys that map to truthy values.
+ * @example
+ *   part={tokenMap({
+ *     header: true,
+ *     disabled: this.disabled,
+ *     selected: this.selected,
+ *     [levelPart]: canShowLines,
+ *     "expand-button":
+ *       canShowLines && !this.leaf && this.expandableButton !== "no"
+ *   })}
+ */
+export declare const tokenMap: (tokens: {
+    [key: string]: boolean;
+}) => string;
+export declare const copyToTheClipboard: (text: string) => Promise<void>;
+export declare const copy: (text: string) => () => void;
+export declare const copyButtonClickHandler: (event: Event, text: string) => void;
+export declare const DEFAULT_ASSISTANT_STATUS = "complete";

package/dist/components/chat/utils.js

@@ -0,0 +1,54 @@
+// TODO: The functions on this file are a WA until Chameleon 7 is released and we can reuse
+// the existing functions from Chameleon. At the moment, we have to copy paste the functions
+// because in Chameleon 6 we can import them.
+// The following utils were copied from Chamelmeon (src/components/chat/utils.ts or src/common/utils.ts)
+export const getMessageSerializedContentAll = (message) => typeof message.content === "string"
+    ? message.content
+    : JSON.stringify(message.content, undefined, 2);
+export const getMessageContent = (message) => typeof message.content === "string"
+    ? message.content
+    : message.content.message;
+/**
+ * Converts an object mapping token keys to booleans into a space-separated
+ * string containing the token keys that map to truthy values.
+ * @example
+ *   part={tokenMap({
+ *     header: true,
+ *     disabled: this.disabled,
+ *     selected: this.selected,
+ *     [levelPart]: canShowLines,
+ *     "expand-button":
+ *       canShowLines && !this.leaf && this.expandableButton !== "no"
+ *   })}
+ */
+export const tokenMap = (tokens) => {
+    const keys = Object.keys(tokens);
+    let result = "";
+    for (let index = 0; index < keys.length; index++) {
+        const tokenKey = keys[index];
+        const tokenValue = tokens[tokenKey];
+        if (tokenValue) {
+            result += result === "" ? tokenKey : ` ${tokenKey}`;
+        }
+    }
+    return result;
+};
+export const copyToTheClipboard = (text) => navigator.clipboard.writeText(text);
+export const copy = (text) => () => {
+    copyToTheClipboard(text);
+};
+export const copyButtonClickHandler = (event, text) => {
+    copyToTheClipboard(text);
+    const button = event.currentTarget;
+    if (button) {
+        const buttonOriginalParts = button.getAttribute("part");
+        const buttonWithCopyingParts = `${buttonOriginalParts} copying`;
+        button.setAttribute("disabled", "disabled");
+        button.setAttribute("part", buttonWithCopyingParts);
+        setTimeout(() => {
+            button.removeAttribute("disabled");
+            button.setAttribute("part", buttonOriginalParts || "");
+        }, 1500);
+    }
+};
+export const DEFAULT_ASSISTANT_STATUS = "complete";

package/dist/index.d.ts

@@ -2,3 +2,5 @@ export * from "./assets-manager.js";
 export * from "./bundles.js";
 export * from "./register-mercury.js";
 export * from "./types.js";
+export * from "./components/chat/render.lit.js";
+export type * from "./components/chat/types";

package/dist/index.js

@@ -1 +1 @@
-"use strict";export*from"./assets-manager.js";export*from"./bundles.js";export*from"./register-mercury.js";export*from"./types.js";
+"use strict";export*from"./assets-manager.js";export*from"./bundles.js";export*from"./register-mercury.js";export*from"./types.js";export*from"./components/chat/render.lit.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "description": "Mercury Design System is a robust and scalable solution designed to improve product development.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -43,11 +43,19 @@
         "default": "./dist/register-mercury.js"
       }
     },
+    "./components/chat/render.js": {
+      "types": "./dist/components/chat/render.lit.d.ts",
+      "default": "./dist/components/chat/render.lit.js"
+    },
+    "./components/chat/message-metadata": {
+      "types": "./dist/components/chat/types.d.ts",
+      "import": "./dist/components/chat/types.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "yarn build.js && yarn icons-svg && yarn icons-sass && yarn build.scss && yarn copy-tasks",
-    "build.js": "tsc && esbuild dist/*.js --allow-overwrite --minify --outdir=dist --log-level=silent && esbuild dist/assets/*.js --allow-overwrite --minify --outdir=dist/assets --log-level=silent",
+    "build.js": "tsc && node minify-literals.js && esbuild dist/*.js --allow-overwrite --minify --outdir=dist --log-level=silent && esbuild dist/assets/*.js --allow-overwrite --minify --outdir=dist/assets --log-level=silent",
     "build-no-svg": "yarn build.js && yarn build.scss && yarn copy-tasks",
     "build.scss": "yarn build.scss.base && yarn build.scss.bundles",
     "build.scss.base": "scss-bundle -e ./src/icons/_generated/categories.scss -o src/icons/_generated/categories-bundled.scss --logLevel=silent",
@@ -69,9 +77,11 @@
     "test.watch": "yarn playwright install && vitest watch"
   },
   "license": "Apache-2.0",
+  "peerDependencies": {
+    "@genexus/chameleon-controls-library": ">= 6.22.1"
+  },
   "devDependencies": {
-    "@eslint/js": "~9.26.0",
-    "@genexus/chameleon-controls-library": "~6.7.0",
+    "@genexus/chameleon-controls-library": "6.22.1",
     "@genexus/svg-sass-generator": "1.1.24",
     "@jackolope/ts-lit-plugin": "^3.1.4",
     "@types/node": "~22.10.5",
@@ -82,9 +92,10 @@
     "@vitest/ui": "~3.1.1",
     "chokidar": "^3.6.0",
     "chokidar-cli": "^3.0.0",
-    "esbuild": "0.25.0",
+    "esbuild": "~0.25.8",
     "eslint": "~9.26.0",
     "globals": "~16.1.0",
+    "minify-html-literals": "~1.3.5",
     "playwright": "*",
     "prettier": "~3.5.3",
     "sass": "~1.86.3",