mr-chat-bird 1.0.0

package/src/components/ChatUserList/ChatUserMessage.tsx

@@ -0,0 +1,362 @@
+"use client";
+
+import { Text, Menu, Avatar } from "@mantine/core";
+import {
+  IconBan,
+  IconDotsVertical,
+  IconLock,
+  IconTrash,
+} from "@tabler/icons-react";
+import CustomRichTextEditor from "../RichTextEditor/RichTextEditor";
+import classes from "./ChatUserList.module.css";
+import { getSocket } from "../../lib/socket";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../store/store";
+import { useEffect, useState } from "react";
+import {
+  fetchMessagesByChatId,
+  addNewMessage,
+  addUserToChatList,
+  deleteMessagesByChatId,
+} from "../../store/slices/ChatSlice";
+import DOMPurify from "dompurify";
+import { UserData } from "./ChatUserList.type";
+import { ChatScrollContainer } from "../VirtualizedList/ChatScrollContainer";
+import UserProfileDrawer from "../UserProfile/UserProfileDrawer";
+
+export function ChatUserMessage({
+  chatId,
+  enableChat,
+  senderDetails,
+  receiverDetails,
+  onChatInitialized,
+}: {
+  chatId?: string;
+  enableChat?: boolean;
+  senderDetails?: UserData;
+  receiverDetails?: UserData;
+  onChatInitialized?: (data: any) => void;
+}) {
+  const dispatch = useDispatch<any>();
+
+  const messageList: any = useSelector(
+    (state: RootState) => state.chat.messageList,
+  );
+
+  const [page, setPage] = useState(0);
+  const [scrollTrigger, setScrollTrigger] = useState(0);
+  const [showUserInfo, setShowUserInfo] = useState(false);
+
+  const messages = messageList?.rows?.data || [];
+  const isEmpty = messages.length === 0;
+
+  const loadOlderMessages = () => {
+    const hasMore = messageList?.hasMore;
+
+    if (!chatId || !hasMore) return;
+    const nextPage = page + 1;
+    dispatch(
+      fetchMessagesByChatId({
+        chatId,
+        page: nextPage,
+        userId: senderDetails?.userId,
+      }),
+    );
+    setPage(nextPage);
+  };
+
+  useEffect(() => {
+    if (chatId) {
+      setPage(0);
+      dispatch(
+        fetchMessagesByChatId({
+          chatId,
+          page: 0,
+          userId: senderDetails?.userId,
+        }),
+      );
+    }
+  }, [chatId]);
+
+  useEffect(() => {
+    if (!senderDetails?.userId) return;
+    const socket = getSocket(senderDetails?.userId || "");
+    if (!socket) return;
+
+    const handleNewMessage = (data: any) => {
+      if (data.chatId !== chatId) return;
+
+      dispatch(
+        addNewMessage({
+          id: Date.now(),
+          chatId: data.chatId,
+          message: data.message,
+          sender: data.sender,
+          recipient: data.recipient,
+          type: data.type,
+          status: data.status,
+          createdAt: data.time,
+        }),
+      );
+    };
+
+    socket.on("newmessage", handleNewMessage);
+
+    return () => {
+      socket.off("newmessage", handleNewMessage);
+    };
+  }, [chatId, senderDetails?.userId]);
+
+  const handleSendMessage = (msg: string) => {
+    const socket = getSocket(senderDetails?.userId || "");
+
+    const payload = {
+      message: msg,
+      sender: senderDetails?.userId,
+      receiver: receiverDetails?.userId,
+      type: "text",
+    };
+
+    const isNewChat = !messageList?.rows?.data?.length;
+
+    if (isNewChat) {
+      socket?.emit(
+        "initializeNewChat",
+        {
+          ...payload,
+          senderUserDetails: {
+            userId: senderDetails?.userId,
+            username: senderDetails?.username,
+            displayName: senderDetails?.displayName,
+            avatar: senderDetails?.avatar,
+          },
+          receiverUserDetails: {
+            userId: receiverDetails?.userId,
+            username: receiverDetails?.username,
+            displayName: receiverDetails?.displayName,
+            avatar: receiverDetails?.avatar,
+          },
+        },
+        (response: any) => {
+          if (response?.status === "success") {
+            const { data } = response;
+            dispatch(
+              addUserToChatList({
+                id: Date.now(),
+                chatId: data.chatId,
+                message: data.message,
+                sender: data.sender,
+                recipient: data.recipient,
+                type: data.type,
+                status: data.status,
+                createdAt: new Date(data.time).getTime(),
+                updatedAt: new Date(data.time).getTime(),
+                userId: receiverDetails?.userId,
+                username: receiverDetails?.username,
+                displayName: receiverDetails?.displayName,
+                avatar: receiverDetails?.avatar,
+              }),
+            );
+            dispatch(
+              addNewMessage({
+                id: Date.now(),
+                chatId: data.chatId,
+                message: data.message,
+                sender: data.sender,
+                recipient: data.recipient,
+                type: data.type,
+                status: data.status,
+                createdAt: Date.now(),
+              }),
+            );
+            onChatInitialized?.(data);
+          } else {
+            console.log("Failed to initialize chat", response?.error);
+          }
+        },
+      );
+      return;
+    }
+
+    socket?.emit("privatemessage", { ...payload, chatId: chatId });
+    setScrollTrigger((prev) => prev + 1);
+  };
+
+  const handleLoadOlderMessages = () => {
+    if (messageList.hasMore) {
+      loadOlderMessages();
+    }
+  };
+
+  const handleDeleteMessages = () => {
+    if (!chatId || !senderDetails?.userId) return;
+    dispatch(
+      deleteMessagesByChatId({ chatId: chatId, userId: senderDetails?.userId }),
+    );
+  };
+
+  return (
+    <div className={classes.mainArea}>
+      {/* Header */}
+      <div className={classes.chatHeader}>
+        {receiverDetails && (
+          <>
+            <div
+              className={classes.receiverInfo}
+              onClick={() => setShowUserInfo(true)}
+            >
+              {receiverDetails?.avatar ? (
+                <Avatar src={receiverDetails.avatar} size={36} radius="xl" />
+              ) : (
+                <Avatar
+                  key={
+                    receiverDetails?.displayName || receiverDetails?.username
+                  }
+                  name={
+                    receiverDetails?.displayName || receiverDetails?.username
+                  }
+                  color="initials"
+                />
+              )}
+
+              <Text fw={600} size="md">
+                {receiverDetails?.displayName || receiverDetails?.username}
+              </Text>
+            </div>
+
+            <Menu shadow="md" width={200} position="bottom-end">
+              <Menu.Target>
+                <IconDotsVertical size={20} style={{ cursor: "pointer" }} />
+              </Menu.Target>
+
+              <Menu.Dropdown>
+                <Menu.Item
+                  color="red"
+                  leftSection={<IconTrash size={16} />}
+                  onClick={handleDeleteMessages}
+                >
+                  Delete all messages
+                </Menu.Item>
+                <Menu.Item color="red" leftSection={<IconBan size={16} />}>
+                  Block
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+          </>
+        )}
+      </div>
+
+      <div className={classes.messageArea}>
+        {isEmpty ? (
+          <div className={classes.emptyState}>
+            <div className={classes.encryptionMinimal}>
+              <IconLock size={20} stroke={1.8} />
+              <Text className={classes.encryptionText} size="md">
+                End-to-end encrypted
+              </Text>
+            </div>
+          </div>
+        ) : (
+          <ChatScrollContainer
+            data={messages}
+            hasMore={messageList?.hasMore}
+            loadMore={handleLoadOlderMessages}
+            scrollToBottomTrigger={scrollTrigger}
+            renderItem={(item: any, index: number) => {
+              const isOutgoing = item?.sender === senderDetails?.userId;
+
+              const currentDate = new Date(item?.createdAt);
+              const prevItem = messages[index - 1];
+
+              const showDate =
+                index === 0 ||
+                new Date(prevItem?.createdAt).toDateString() !==
+                  currentDate.toDateString();
+
+              const today = new Date();
+              const yesterday = new Date();
+              yesterday.setDate(today.getDate() - 1);
+
+              const isToday =
+                currentDate.toDateString() === today.toDateString();
+
+              const isYesterday =
+                currentDate.toDateString() === yesterday.toDateString();
+
+              let formattedDate = "";
+
+              if (isToday) {
+                formattedDate = "Today";
+              } else if (isYesterday) {
+                formattedDate = "Yesterday";
+              } else {
+                formattedDate = currentDate.toLocaleDateString(undefined, {
+                  weekday: "short",
+                  month: "short",
+                  day: "numeric",
+                });
+              }
+
+              const time = currentDate.toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+                hour12: false,
+              });
+
+              return (
+                <div key={item?.id + "_" + index}>
+                  {showDate && (
+                    <div className={classes.dateSeparator}>{formattedDate}</div>
+                  )}
+
+                  <div
+                    style={{
+                      borderRadius:
+                        item.sender === senderDetails?.userId
+                          ? "16px 16px 1px 16px"
+                          : "16px 16px 16px 1px",
+                    }}
+                    className={`${classes.messageBubble} ${
+                      isOutgoing ? classes.outgoing : classes.incoming
+                    }`}
+                  >
+                    <div
+                      className={classes.messageContent}
+                      dangerouslySetInnerHTML={{
+                        __html: DOMPurify.sanitize(item?.message),
+                      }}
+                    />
+
+                    <div className={classes.messageTime}>{time}</div>
+                  </div>
+                </div>
+              );
+            }}
+          />
+        )}
+      </div>
+
+      {(chatId || enableChat) && (
+        <div className={classes.inputBar}>
+          <CustomRichTextEditor onSubmit={handleSendMessage} />
+        </div>
+      )}
+
+      <UserProfileDrawer
+        opened={showUserInfo}
+        onClose={() => setShowUserInfo(false)}
+        user={{
+          avatar: receiverDetails?.avatar,
+          username: receiverDetails?.username,
+          displayName: receiverDetails?.displayName,
+        }}
+        onDeleteMessages={() => {
+          handleDeleteMessages();
+        }}
+        onBlock={() => {
+          console.log("block user");
+        }}
+      />
+    </div>
+  );
+}