[ch-chat] Move the header of chat messages to the contentBefore section (#669)

This allows the users to more easily add custom content in between the header and the message content

Author: ncamera

packages/mercury/src/components/chat/render.lit.ts

@@ -24,7 +24,6 @@ The chat styles are designed for a specific layout, so users must use the sendCo
 */
 
 import { html, nothing, type TemplateResult } from "lit";
-import type { MercuryChatMessageMetadata } from "./types";
 
 import type {
   ChatActionsRender,
@@ -58,13 +57,14 @@ import "./mer-animated-dots.js";
  * @param messageMetaData - Metadata containing agentName and time
  * @returns TemplateResult rendering the assistant message header
  */
-const messageHeader = (
-  messageMetaData: MercuryChatMessageMetadata | undefined,
-  waiting: boolean = false
-): TemplateResult => {
-  const agentName = messageMetaData?.agentName;
+const messageHeader = (message: ChatMessage): TemplateResult => {
+  if (message.role === "system" || message.role === "user") {
+    return nothing as never; // 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;
+  const messageTime = message.metadata?.time;
 
   return html`<div
     part="header assistant${assistantId ? ` header-${assistantId}` : ""}"
@@ -75,7 +75,9 @@ const messageHeader = (
         <div part="header__avatar-image assistant"></div>
       </div>
       <div part="header__role assistant">${agentName}</div>
-      ${waiting ? html`<mer-animated-dots></mer-animated-dots>` : nothing}
+      ${message.role === "assistant" && message.status === "waiting"
+        ? html`<mer-animated-dots></mer-animated-dots>`
+        : nothing}
     </div>
 
     ${messageTime
@@ -95,59 +97,56 @@ const customAssistantContentRender = (
   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) as never
-          }
-          .showIndicator=${message.status === "streaming"}
-          .theme=${chatRef.markdownTheme ?? undefined}
-          .value=${messageContent}
-        ></ch-markdown-viewer>`;
+    ? html`<div
+        class="assistant-loading"
+        part=${tokenMap({
+          [`assistant content waiting ${message.id}`]: true,
+          ...(message.parts ? { [message.parts]: true } : {})
+        })}
+      >
+        ${messageContent}
+      </div>`
+    : html`<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) as never
+        }
+        .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: ChatMessageByRole<"error">,
   chatRef: HTMLChChatElement,
   codeBlockRender: ChatCodeBlockRender
 ) => {
   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) as never
-      }
-      .theme=${chatRef.markdownTheme ?? undefined}
-      .value=${errorContent}
-    ></ch-markdown-viewer>`;
+  return html`<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) as never
+    }
+    .theme=${chatRef.markdownTheme ?? undefined}
+    .value=${errorContent}
+  ></ch-markdown-viewer>`;
 };
 
 // No modification. It is required to be defined.
@@ -181,8 +180,9 @@ const customContentRender: ChatContentRender = (
 ) =>
   contentRenderByRole[message.role](message as never, chatRef, codeBlockRender);
 
-export const renderItem: ChatMessageRenderBySections = {
+export const renderItem = {
   actions: customActionsRender,
+  contentBefore: messageHeader,
   codeBlock: customCodeBlockRender,
   content: customContentRender,
   file: customFileRenders