feat: added message persistance

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,10 +1,10 @@
-import { type MessageWithState, useDevice } from "@core/stores/deviceStore.ts";
-import { Message } from "@components/PageComponents/Messages/Message.tsx";
+import { MessageItem } from "@components/PageComponents/Messages/MessageItem.tsx";
+import type { Message as Message } from "@core/stores/messageStore.ts";
 import { InboxIcon } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 
 export interface ChannelChatProps {
-  messages?: MessageWithState[];
+  messages?: Message[];
 }
 
 const EmptyState = () => (
@@ -17,8 +17,6 @@ const EmptyState = () => (
 export const ChannelChat = ({
   messages = [],
 }: ChannelChatProps) => {
-  const { nodes } = useDevice();
-
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
@@ -59,12 +57,12 @@ export const ChannelChat = ({
       >
         <div className="flex flex-col justify-end min-h-full">
           {messages?.map((message, index) => (
-            <Message
-              key={message.id}
+            <MessageItem
+              key={message.messageId + index}
               message={message}
-              sender={nodes.get(message.from)}
               lastMsgSameUser={
-                index > 0 && messages[index - 1].from === message.from
+                index > 0 &&
+                messages[index - 1].from === message.from
               }
             />
           ))}