feat: enhance chat message component with custom content and status u…

…pdates in the header section (#1873) * feat: enhance chat message component with custom content and status updates * refactor: remove unused statusType export from ChatMessage component
momentum-design · Feb 6, 2025 · ac858bc · ac858bc
1 parent 14d438b
commit ac858bc
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/web-components/src/[sandbox]/examples/chat-message.ts b/web-components/src/[sandbox]/examples/chat-message.ts
@@ -6,10 +6,19 @@ import "@/components/icon/Icon";
 import "@/components/alert-banner/AlertBanner";
 
 export const chatMessageTemplate = html`
-  <md-chat-message title="John Doe" time="11:27AM" status="Sent">
+  <md-chat-message title="John Doe" time="11:27AM" status="Received">
+    <span slot="custom-content">
+      <md-tooltip message="Content restricted as it violates the company data security policy" placement="top">
+        <md-icon name="icon-priority_12"></md-icon>
+      </md-tooltip>
+    </span>
+
     <p slot="message">I have issue with my silencer</p>
   </md-chat-message>
   <md-chat-message self time="11:27AM" status="Failed">
+    <div slot="custom-content">
+      <md-icon name="icon-blocked_12"></md-icon>
+    </div>
     <p slot="message">Sure. I will help with that.</p>
   </md-chat-message>
   <md-chat-message

diff --git a/web-components/src/components/chat-message/ChatMessage.stories.ts b/web-components/src/components/chat-message/ChatMessage.stories.ts
@@ -7,7 +7,6 @@
  */
 
 import "@/components/chat-message/ChatMessage";
-import { statusType } from "@/components/chat-message/ChatMessage";
 import { Args, StoryObj } from "@storybook/web-components";
 import { html } from "lit-html";
 
@@ -18,7 +17,7 @@ export default {
     title: { control: "text" },
     message: { control: "text" },
     selfMode: { control: "boolean" },
-    status: { control: { type: "select" }, options: statusType }
+    status: { control: "text" }
   },
   parameters: {
     a11y: {
@@ -37,6 +36,7 @@ export const ChatMessage: StoryObj = {
   render: (args: Args) => {
     return html`
       <md-chat-message .self=${args.selfMode} title=${args.title} time="11:27AM" status=${args.status}>
+        <md-icon slot="custom-content" name="icon-chat"></md-icon>
         <p slot="message">${args.message}</p>
       </md-chat-message>
     `;

diff --git a/web-components/src/components/chat-message/ChatMessage.ts b/web-components/src/components/chat-message/ChatMessage.ts
@@ -5,8 +5,6 @@ import styles from "./scss/module.scss";
 import "@/components/avatar/Avatar";
 import { ifDefined } from "lit-html/directives/if-defined";
 
-export const statusType = ["Delivered", "Failed", "Read", "Seen", "Sent", ""] as const;
-
 export namespace ChatMessage {
   @customElementWithCheck("md-chat-message")
   export class ELEMENT extends LitElement {
@@ -15,7 +13,7 @@ export namespace ChatMessage {
     @property({ type: String }) time = "";
     @property({ type: String }) label = "Avatar";
     @property({ type: Boolean }) self = false;
-    @property({ type: String }) status: (typeof statusType)[number] = "";
+    @property({ type: String }) status = "";
 
     static get styles() {
       return [reset, styles];
@@ -38,6 +36,9 @@ export namespace ChatMessage {
               </div>
               <div class="md-chat-message_time">${this.time}</div>
               <div class="md-chat-message_status">${this.status}</div>
+              <div class="md-chat-message_custom_content">
+                <slot name="custom-content"></slot>
+              </div>
             </div>
             <div class="md-chat-message_text">
               <slot name="message"></slot>

diff --git a/web-components/src/components/chat-message/scss/chat-message.scss b/web-components/src/components/chat-message/scss/chat-message.scss
@@ -43,6 +43,9 @@
     &_status {
       margin-left: calc(#{$chat-message-indent} * 1.5);
     }
+    &_custom_content {
+      margin-left: calc(#{$chat-message-indent} * 1);
+    }
   }
 }