feature/IO-3182-Phone-Number-Consent - Checkpoint

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -4,13 +4,16 @@
   height: 100%;
   width: 100%;
 }
+
 .archive-button {
   height: 20px;
   border-radius: 4px;
 }
+
 .chat-title {
   margin-bottom: 5px;
 }
+
 .messages {
   display: flex;
   flex-direction: column;
@@ -37,11 +40,13 @@
     gap: 8px;
   }
 }
-.chat-send-message-button{
+
+.chat-send-message-button {
   margin: 0.3rem;
   padding-left: 0.5rem;
-  
+
 }
+
 .message-icon {
   position: absolute;
   bottom: 0.1rem;
@@ -125,6 +130,37 @@
   }
 }
 
+.system {
+  align-items: center;
+  margin: 0.5rem 10%;
+
+  .message {
+    background-color: #f5f5f5;
+    border-radius: 10px;
+    padding: 0.5rem 1rem;
+    text-align: center;
+    font-style: italic;
+    color: #555;
+    width: fit-content;
+    max-width: 80%;
+  }
+
+  .system-label {
+    font-size: 0.75rem;
+    color: #888;
+    margin-bottom: 0.2rem;
+    display: block;
+  }
+
+  .system-date {
+    font-size: 0.75rem;
+    color: #888;
+    margin-top: 0.2rem;
+    text-align: center;
+  }
+}
+
+
 .virtuoso-container {
   flex: 1;
   overflow: auto;

client/src/components/chat-messages-list/renderMessage.jsx

@@ -7,12 +7,24 @@ import { DateTimeFormatter } from "../../utils/DateFormatter";
 
 export const renderMessage = (messages, index) => {
   const message = messages[index];
+  const isSystem = message.is_system;
+
+  // Determine message class
+  const messageClass = isSystem ? "system messages" : message.isoutbound ? "mine messages" : "yours messages";
+
+  // Tooltip content based on message type
+  const tooltipTitle = isSystem ? (
+    i18n.t("consent.text_body")
+  ) : (
+    <DateTimeFormatter>{message.created_at}</DateTimeFormatter>
+  );
 
   return (
-    <div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
+    <div key={index} className={messageClass}>
       <div className="message msgmargin">
-        <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
+        <Tooltip title={tooltipTitle}>
           <div>
+            {isSystem && <span className="system-label">System</span>}
             {/* Render images if available */}
             {message.image && message.image_path?.length > 0 && (
               <div className="message-images">
@@ -26,23 +38,31 @@ export const renderMessage = (messages, index) => {
               </div>
             )}
             {/* Render text if available */}
-            {message.text && <div>{message.text}</div>}
+            {message.text && <div className="message-text">{message.text}</div>}
+            {/* Render date for system messages */}
+            {isSystem && (
+              <div className="system-date">
+                <DateTimeFormatter>{message.created_at}</DateTimeFormatter>
+              </div>
+            )}
           </div>
         </Tooltip>
 
-        {/* Message status icons */}
-        {message.status &&
+        {/* Message status icons for non-system messages */}
+        {!isSystem &&
+          message.status &&
           (message.status === "sent" || message.status === "delivered" || message.status === "failed") && (
             <div className="message-status">
               <Icon
                 component={message.status === "sent" ? MdDone : message.status === "delivered" ? MdDoneAll : MdClose}
                 className="message-icon"
+                style={message.status === "failed" ? { color: "#ff0000" } : undefined}
               />
             </div>
           )}
       </div>
-      {/* Outbound message metadata */}
-      {message.isoutbound && (
+      {/* Outbound message metadata for non-system messages */}
+      {!isSystem && message.isoutbound && (
         <div style={{ fontSize: 10 }}>
           {i18n.t("messaging.labels.sentby", {
             by: message.userid,