feature/IO-3000-messaging-sockets-migrations2 -

- Fix Chat Icon logger error
- Fix Socket Robustness
- added additional wss status for error
- Installed ant-design icons

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,11 +1,6 @@
-import Icon from "@ant-design/icons";
-import { Tooltip } from "antd";
-import i18n from "i18next";
-import dayjs from "../../utils/day";
-import React, { useRef, useEffect } from "react";
-import { MdDone, MdDoneAll } from "react-icons/md";
+import React, { useEffect, useRef } from "react";
 import { Virtuoso } from "react-virtuoso";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { renderMessage } from "./renderMessage";
 import "./chat-message-list.styles.scss";
 
 export default function ChatMessageListComponent({ messages }) {
@@ -21,7 +16,7 @@ export default function ChatMessageListComponent({ messages }) {
         });
       }
     }, 100); // Delay of 100ms to allow rendering
-    return () => clearTimeout(timer); // Cleanup the timer on unmount
+    return () => clearTimeout(timer);
   }, [messages.length]); // Run only once on component mount
 
   // Scroll to the bottom after the new messages are rendered
@@ -37,52 +32,13 @@ export default function ChatMessageListComponent({ messages }) {
       }, 50); // Slight delay to ensure layout recalculates
     }
   }, [messages]); // Triggered when new messages are added
-  //TODO: Does this one need to come into the render of the method?
-  const renderMessage = (index) => {
-    const message = messages[index];
-    return (
-      <div key={index} className={`${message.isoutbound ? "mine messages" : "yours messages"}`}>
-        <div className="message msgmargin">
-          <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" rel="noopener noreferrer">
-                      <img alt="Received" className="message-img" src={i} />
-                    </a>
-                  </div>
-                ))}
-              <div>{message.text}</div>
-            </div>
-          </Tooltip>
-          {message.status && (
-            <div className="message-status">
-              <Icon
-                component={message.status === "sent" ? MdDone : message.status === "delivered" ? MdDoneAll : null}
-                className="message-icon"
-              />
-            </div>
-          )}
-        </div>
-        {message.isoutbound && (
-          <div style={{ fontSize: 10 }}>
-            {i18n.t("messaging.labels.sentby", {
-              by: message.userid,
-              time: dayjs(message.created_at).format("MM/DD/YYYY @ hh:mm a")
-            })}
-          </div>
-        )}
-      </div>
-    );
-  };
 
   return (
     <div className="chat">
       <Virtuoso
         ref={virtuosoRef}
         data={messages}
-        itemContent={(index) => renderMessage(index)}
+        itemContent={(index) => renderMessage(messages, index)} // Pass `messages` to renderMessage
         followOutput="smooth" // Ensure smooth scrolling when new data is appended
         style={{ height: "100%", width: "100%" }}
       />