@genexus/mercury 0.28.6 → 0.30.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,25 @@
+import { html } from "lit";
+import { when } from "lit/directives/when.js";
+import { copyButtonClickHandler, getMessageSerializedContentAll, tokenMap } from "./utils";
+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,37 @@
+import { html } from "lit";
+import { when } from "lit/directives/when.js";
+import { copyButtonClickHandler } from "./utils";
+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,124 @@
+import { html, nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "./mer-spinner.lit.js";
+import { tokenMap } from "./utils";
+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, fileFormat) => {
+    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>
+
+        <!-- ${fileSkeleton(file, "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>
+        <!-- ${fileSkeleton(file, "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"
+        />
+        <!-- ${fileSkeleton(file, "image")} -->
+        ${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>
+        <!-- ${fileSkeleton(file, "file")} -->
+        ${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,32 @@
+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,138 @@
+/*
+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 assistantName and time
+ * @returns TemplateResult rendering the assistant message header
+ */
+const messageHeader = (messageMetaData, waiting = false) => {
+    const assistantName = messageMetaData.assistantName;
+    const assistantId = messageMetaData.assistantName
+        .toLowerCase()
+        .replace(/ /g, "-");
+    const messageTime = messageMetaData.time;
+    return html ` <div part="header assistant 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">${assistantName}</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 "any" 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 "any" 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 = {
+    assistantName: 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 * 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";export*from"./components/chat/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.28.6",
+  "version": "0.30.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,6 +43,16 @@
         "default": "./dist/register-mercury.js"
       }
     },
+    "./components/chat/render.js": {
+      "import": {
+        "types": "./dist/components/chat/render.d.ts",
+        "default": "./dist/components/chat/render.js"
+      }
+    },
+    "./components/chat/message-metadata": {
+      "types": "./dist/components/chat/types.d.ts",
+      "import": "./dist/components/chat/types.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -69,9 +79,11 @@
     "test.watch": "yarn playwright install && vitest watch"
   },
   "license": "Apache-2.0",
+  "peerDependencies": {
+    "@genexus/chameleon-controls-library": ">= 6.20.0"
+  },
   "devDependencies": {
-    "@eslint/js": "~9.26.0",
-    "@genexus/chameleon-controls-library": "~6.7.0",
+    "@genexus/chameleon-controls-library": "6.20.0",
     "@genexus/svg-sass-generator": "1.1.24",
     "@jackolope/ts-lit-plugin": "^3.1.4",
     "@types/node": "~22.10.5",