IO-1365 Update Messaging Issues.

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,4 +1,5 @@
 import Icon from "@ant-design/icons";
+import { Tooltip } from "antd";
 import i18n from "i18next";
 import moment from "moment";
 import React, { useEffect, useRef } from "react";
@@ -9,6 +10,7 @@ import {
   CellMeasurerCache,
   List,
 } from "react-virtualized";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
 import "./chat-message-list.styles.scss";
 
 export default function ChatMessageListComponent({ messages }) {
@@ -85,17 +87,22 @@ export default function ChatMessageListComponent({ messages }) {
 
 const MessageRender = (message) => {
   return (
-    <div>
-      {message.image_path &&
-        message.image_path.map((i, idx) => (
-          <div key={idx} style={{ display: "flex", justifyContent: "center" }}>
-            <a href={i} target="__blank">
-              <img alt="Received" className="message-img" src={i} />
-            </a>
-          </div>
-        ))}
-      <div>{message.text}</div>
-    </div>
+    <Tooltip title={DateTimeFormatter({ children: message.created_at })}>
+      <div>
+        {message.image_path &&
+          message.image_path.map((i, idx) => (
+            <div
+              key={idx}
+              style={{ display: "flex", justifyContent: "center" }}
+            >
+              <a href={i} target="__blank">
+                <img alt="Received" className="message-img" src={i} />
+              </a>
+            </div>
+          ))}
+        <div>{message.text}</div>
+      </div>
+    </Tooltip>
   );
 };