From d4f6d5cbab873c1ec4fa6284a02b842da20a6e39 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 22 May 2025 17:35:12 +0530
Subject: [PATCH] refactor: update Messages and ThreadChat components to use
 Reply interface and improve data handling

---
 .../components/ui/collaboration/Messages.tsx  | 22 ++++++++-----------
 .../ui/collaboration/ThreadChat.tsx           | 16 ++++++--------
 app/src/types/collaborationTypes.d.ts         |  2 +-
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/app/src/components/ui/collaboration/Messages.tsx b/app/src/components/ui/collaboration/Messages.tsx
index b0bfae4..69f9669 100644
--- a/app/src/components/ui/collaboration/Messages.tsx
+++ b/app/src/components/ui/collaboration/Messages.tsx
@@ -3,14 +3,7 @@ import { getAvatarColor } from "../../../modules/collaboration/functions/getAvat
 import { KebabIcon } from "../../icons/ExportCommonIcons";
 
 interface MessageProps {
-  val: {
-    userName: string;
-    userId: string;
-    message: string;
-    creationTime: string;
-    idEdited: boolean;
-    modifiedTime: string;
-  };
+  val: Reply;
   i: number;
 }
 
@@ -18,22 +11,25 @@ const Messages: React.FC<MessageProps> = ({ val, i }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [openOptions, setOpenOptions] = useState(false);
   const currentUser = "1";
+
+  const UserName = "username";
+
   return (
     <>
       {isEditing ? (
         <>
           <div
             className="profile"
-            style={{ background: getAvatarColor(i, val.userName) }}
+            style={{ background: getAvatarColor(i, UserName) }}
           >
-            {val.userName[0]}
+            {UserName[0]}
           </div>
           <div className="content">
             <div className="user-details">
-              <div className="user-name">{val.userName}</div>
-              <div className="time">{val.creationTime}</div>
+              <div className="user-name">{UserName}</div>
+              <div className="time">{val.createdAt}</div>
             </div>
-            {val.userId === currentUser && (
+            {val.creatorId === currentUser && (
               <div className="more-options">
                 <button
                   className="more-options-button"
diff --git a/app/src/components/ui/collaboration/ThreadChat.tsx b/app/src/components/ui/collaboration/ThreadChat.tsx
index c1441a2..522610c 100644
--- a/app/src/components/ui/collaboration/ThreadChat.tsx
+++ b/app/src/components/ui/collaboration/ThreadChat.tsx
@@ -6,20 +6,18 @@ import { ExpandIcon } from "../../icons/SimulationIcons";
 const ThreadChat: React.FC = () => {
   const messages = [
     {
-      userName: "user 1",
-      userId: "1",
-      message: "hello, thread check",
-      creationTime: "2 hrs ago",
-      idEdited: true,
-      modifiedTime: "5 mins ago",
+      replyId: "user 1",
+      creatorId: "1",
+      createdAt: "hello, thread check",
+      lastUpdatedAt: "2 hrs ago",
+      reply: "true",
     },
     {
       userName: "user 2",
       userId: "2",
       message: "hello, thread check",
       creationTime: "2 hrs ago",
-      idEdited: true,
-      modifiedTime: "5 mins ago",
+      idEdited: "true",
     },
   ];
 
@@ -44,7 +42,7 @@ const ThreadChat: React.FC = () => {
         </div>
         <div className="messages-wrapper">
           {messages.map((val, i) => (
-            <Messages val={val} i={i} key={val.userId} />
+            <Messages val={val as Reply} i={i} key={val.userId} />
           ))}
         </div>
         <div className="send-message-wrapper">
diff --git a/app/src/types/collaborationTypes.d.ts b/app/src/types/collaborationTypes.d.ts
index 26295d5..151ee58 100644
--- a/app/src/types/collaborationTypes.d.ts
+++ b/app/src/types/collaborationTypes.d.ts
@@ -10,7 +10,7 @@ interface CommentSchema {
     replies: Reply[];
 }
 
-export interface Reply {
+interface Reply {
     replyId: string;
     creatorId: string;
     createdAt: string;