@genexus/mercury 0.35.0 → 0.35.1

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

@@ -1,4 +1,16 @@
-import type { ChatMessageRenderBySections, ChatSendContainerLayout } from "@genexus/chameleon-controls-library/dist/types/components/chat/types";
+import { type TemplateResult } from "lit";
+import type { ChatActionsRender, ChatCodeBlockRender, ChatContentRender, ChatMessage, ChatSendContainerLayout } from "@genexus/chameleon-controls-library/dist/types/components/chat/types";
 import "./mer-animated-dots.js";
-export declare const renderItem: ChatMessageRenderBySections;
+export declare const renderItem: {
+    readonly actions: ChatActionsRender;
+    readonly contentBefore: (message: ChatMessage) => TemplateResult;
+    readonly codeBlock: ChatCodeBlockRender;
+    readonly content: ChatContentRender;
+    readonly file: {
+        readonly audio: (file: import("@genexus/chameleon-controls-library/dist/types/components/chat/types").ChatMessageFile) => TemplateResult;
+        readonly video: (file: import("@genexus/chameleon-controls-library/dist/types/components/chat/types").ChatMessageFile) => TemplateResult;
+        readonly image: (file: import("@genexus/chameleon-controls-library/dist/types/components/chat/types").ChatMessageFile) => TemplateResult;
+        readonly file: (file: import("@genexus/chameleon-controls-library/dist/types/components/chat/types").ChatMessageFile) => TemplateResult;
+    };
+};
 export declare const sendContainerLayout: ChatSendContainerLayout;

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

@@ -36,11 +36,16 @@ import "./mer-animated-dots.js";
  * @param messageMetaData - Metadata containing agentName and time
  * @returns TemplateResult rendering the assistant message header
  */
-const messageHeader = (messageMetaData, waiting = false) => {
-    const agentName = messageMetaData?.agentName;
+const messageHeader = (message) => {
+    if (message.role === "system" || message.role === "user") {
+        return nothing; // TODO: Improve type safety in the ch-chat (nicolas-camera_globant)
+    }
+    const agentName = message.metadata?.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
+    const messageTime = message.metadata?.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>${message.role === "assistant" && message.status === "waiting"
+        ? html `<mer-animated-dots></mer-animated-dots>`
+        : nothing}</div>${messageTime
         ? html `<time datetime="${messageTime}" part="header__time assistant">${messageTime}</time>`
         : nothing}</div>`;
 };
@@ -48,11 +53,11 @@ const messageHeader = (messageMetaData, waiting = false) => {
 const customAssistantContentRender = (message, chatRef, codeBlockRender) => {
     const messageContent = getMessageContent(message);
     return message.status === "waiting"
-        ? html `${messageHeader(message.metadata, true)}<div class="assistant-loading" part="${tokenMap({
+        ? html `<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({
+        : html `<ch-markdown-viewer part="${tokenMap({
             [`assistant content ${message.id} ${message.status ?? DEFAULT_ASSISTANT_STATUS}`]: true,
             ...(message.parts ? { [message.parts]: true } : {})
         })}" .renderCode="${
@@ -61,10 +66,10 @@ const customAssistantContentRender = (message, chatRef, codeBlockRender) => {
         // 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"
+// Customized 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({
+    return html `<ch-markdown-viewer part="${tokenMap({
         [`error content ${message.id}`]: true,
         ...(message.parts ? { [message.parts]: true } : {})
     })}" .renderCode="${
@@ -88,6 +93,7 @@ const contentRenderByRole = {
 const customContentRender = (message, chatRef, codeBlockRender) => contentRenderByRole[message.role](message, chatRef, codeBlockRender);
 export const renderItem = {
     actions: customActionsRender,
+    contentBefore: messageHeader,
     codeBlock: customCodeBlockRender,
     content: customContentRender,
     file: customFileRenders

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.35.0",
+  "version": "0.35.1",
   "description": "Mercury Design System is a robust and scalable solution designed to improve product development.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",