mr-chat-bird 1.0.0

package/src/components/ChatUserList/ChatUserList.tsx

@@ -0,0 +1,434 @@
+"use client";
+
+import {
+  Text,
+  Modal,
+  Button,
+  ActionIcon,
+  Autocomplete,
+  Group,
+  Avatar,
+  Divider,
+} from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
+import classes from "./ChatUserList.module.css";
+import { ChatUserMessage } from "./ChatUserMessage";
+import {
+  addUserToChatList,
+  fetchMessageListByUserId,
+  resetMessageList,
+  setMessagedUserList,
+} from "../../store/slices/ChatSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../store/store";
+import { useEffect, useState } from "react";
+import { getSocket } from "../../lib/socket";
+import users from "./users_list.json";
+import { VirtualizedList } from "../VirtualizedList";
+import DOMPurify from "dompurify";
+import { UserData, UserOption } from "./ChatUserList.type";
+import { getChatDisplayTime } from "../../utils/helper";
+
+export function ChatUserList() {
+  const [opened, { open, close }] = useDisclosure(false);
+
+  const dispatch = useDispatch<any>();
+  const chatList: any = useSelector(
+    (state: RootState) => state.chat.messagedUserList,
+  );
+
+  const [page, setPage] = useState(0);
+  const [chatId, setChatId] = useState<string>("");
+  const [enableChat, setEnableChat] = useState(false);
+  const [receiverSearchValue, setReceiverSearchValue] = useState("");
+  const [receiverDetails, setReceiverDetails] = useState<any>();
+  const [receiverUserDetails, setReceiverUserDetails] =
+    useState<UserData | null>();
+
+  // Temp
+  const [senderSearchValue, setSenderSearchValue] = useState("");
+  const [senderDetails, setSenderDetails] = useState<any>("");
+  const [senderUserDetails, setSenderUserDetails] = useState<any>();
+
+  useEffect(() => {
+    if (senderUserDetails) {
+      setSenderDetails(senderUserDetails);
+    }
+  }, [senderUserDetails]);
+
+  useEffect(() => {
+    if (!senderUserDetails) return;
+    dispatch(
+      fetchMessageListByUserId({ userId: senderUserDetails.userId, page: 0 }),
+    );
+  }, [senderUserDetails]);
+
+  const handleStartChat = () => {
+    if (!receiverUserDetails?.userId) return;
+
+    const existingChat = chatList?.rows?.data?.find(
+      (item: any) => item.userId === receiverUserDetails.userId,
+    );
+
+    if (existingChat) {
+      handleJoinChat(existingChat);
+      close();
+      setReceiverSearchValue("");
+      return;
+    }
+
+    dispatch(
+      addUserToChatList({
+        userId: receiverUserDetails?.userId,
+        username: receiverUserDetails?.username,
+        displayName: receiverUserDetails?.displayName,
+        avatar: receiverUserDetails?.avatar,
+      }),
+    );
+    setReceiverDetails(receiverUserDetails);
+    close();
+    setReceiverSearchValue("");
+    dispatch(resetMessageList());
+    setChatId("");
+    setEnableChat(true);
+  };
+
+  useEffect(() => {
+    if (!senderDetails?.userId) return;
+
+    const socket = getSocket(senderDetails.userId);
+    if (!socket) return;
+
+    if (!socket.connected) {
+      socket.connect();
+    }
+  }, [senderDetails?.userId]);
+
+  useEffect(() => {
+    if (!senderUserDetails?.userId) return;
+    const socket = getSocket(senderDetails.userId);
+    if (!socket) return;
+
+    const handleNewChat = (data: any) => {
+      if (data.sender === senderUserDetails.userId) return;
+      dispatch(
+        addUserToChatList({
+          message: data.message,
+          chatId: data.chatId,
+          userId: data.sender,
+          username: data.userDetails.username,
+          displayName: data.userDetails.displayName,
+          avatar: data.userDetails.avatar,
+        }),
+      );
+    };
+
+    socket.on("newChat", handleNewChat);
+
+    return () => {
+      socket.off("newChat", handleNewChat);
+    };
+  }, [senderDetails.userId]);
+
+  useEffect(() => {
+    if (!senderDetails?.userId) return;
+    const socket = getSocket(senderDetails?.userId || "");
+    if (!socket) return;
+
+    const handleUpdatePreviewMessage = (data: any) => {
+      if (!chatList?.rows?.data) return;
+
+      const updatedList = chatList.rows.data.map((item: any) => {
+        if (item.chatId === data.chatId) {
+          const isActive = data.chatId === chatId;
+
+          return {
+            ...item,
+            message: data.message,
+            updatedAt: new Date().toISOString(),
+            unreadCount: isActive ? 0 : (item.unreadCount || 0) + 1,
+          };
+        }
+        return item;
+      });
+
+      const index = updatedList.findIndex(
+        (item: any) => item.chatId === data.chatId,
+      );
+
+      if (index !== -1) {
+        const updatedItem = updatedList.splice(index, 1)[0];
+        updatedList.unshift(updatedItem);
+      }
+
+      console.log("Updated", updatedList, data);
+
+      dispatch(
+        setMessagedUserList({
+          ...chatList,
+          rows: {
+            ...chatList.rows,
+            data: updatedList,
+          },
+        }),
+      );
+    };
+
+    socket.on("newMessageNotification", handleUpdatePreviewMessage);
+
+    return () => {
+      socket.off("newMessageNotification", handleUpdatePreviewMessage);
+    };
+  }, [chatList, senderDetails?.userId]);
+
+  const loadMoreChats = () => {
+    if (!chatList?.hasMore) return;
+
+    const nextPage = page + 1;
+    setPage(nextPage);
+
+    dispatch(
+      fetchMessageListByUserId({
+        userId: senderUserDetails.userId,
+        page: nextPage,
+      }),
+    );
+  };
+
+  const handleJoinChat = (item: any) => {
+    const socket = getSocket(senderDetails.userId);
+    if (!socket) return;
+    setReceiverDetails({
+      userId: item.userId,
+      username: item.username,
+      displayName: item.displayName,
+      avatar: item.avatar,
+    });
+    socket.emit("joinChat", {
+      chatId: item.chatId,
+    });
+    setChatId(item?.chatId || "");
+    dispatch(resetMessageList());
+    const updatedList = chatList.rows.data.map((chat: any) =>
+      chat.chatId === item.chatId ? { ...chat, unreadCount: 0 } : chat,
+    );
+
+    dispatch(
+      setMessagedUserList({
+        ...chatList,
+        rows: {
+          ...chatList.rows,
+          data: updatedList,
+        },
+      }),
+    );
+  };
+
+  const stripHtml = (html: string) => {
+    const div = document.createElement("div");
+    div.innerHTML = html;
+    return div.textContent || "";
+  };
+
+  const userOptions = users.map((user) => ({
+    value: user.username,
+    label: user.displayName || user.username,
+    user,
+  }));
+
+  return (
+    <div className={classes.chatWrapper}>
+      <Modal
+        opened={opened}
+        onClose={() => {
+          close();
+          setReceiverSearchValue("");
+        }}
+        title="Find User"
+        centered
+        withCloseButton
+      >
+        <Autocomplete
+          mb={12}
+          label="Sender"
+          placeholder="Type username..."
+          limit={20}
+          data={userOptions}
+          value={senderSearchValue}
+          onChange={setSenderSearchValue}
+          onOptionSubmit={(val) => {
+            const selected = users.find((u) => u.username === val);
+            if (selected) {
+              setSenderSearchValue("");
+              setSenderUserDetails(selected);
+            }
+          }}
+          renderOption={({ option }) => {
+            const user = (option as UserOption).user;
+            return (
+              <Group gap="sm">
+                <Avatar src={user.avatar} size={36} radius="xl" />
+                <div>
+                  <Text size="sm">{user.displayName || user.username}</Text>
+                  {user.displayName && (
+                    <Text size="xs" opacity={0.5}>
+                      @{user.username}
+                    </Text>
+                  )}
+                </div>
+              </Group>
+            );
+          }}
+        />
+
+        <Autocomplete
+          mb={12}
+          label="Receiver"
+          placeholder="Type username..."
+          limit={20}
+          data={userOptions}
+          value={receiverSearchValue}
+          onChange={setReceiverSearchValue}
+          onOptionSubmit={(val) => {
+            const selected = users.find((u) => u.username === val);
+            if (selected) {
+              setReceiverSearchValue("");
+              setReceiverUserDetails(selected);
+            }
+          }}
+          renderOption={({ option }) => {
+            const user = (option as UserOption).user;
+            return (
+              <Group gap="sm">
+                <Avatar src={user.avatar} size={36} radius="xl" />
+                <div>
+                  <Text size="sm">{user.displayName || user.username}</Text>
+                  {user.displayName && (
+                    <Text size="xs" opacity={0.5}>
+                      @{user.username}
+                    </Text>
+                  )}
+                </div>
+              </Group>
+            );
+          }}
+        />
+
+        <Button
+          fullWidth
+          onClick={handleStartChat}
+          disabled={!Boolean(receiverUserDetails?.username)}
+        >
+          Start Chat
+        </Button>
+      </Modal>
+
+      <div className={classes.chatContainer}>
+        <div className={classes.sidebar}>
+          <div className={classes.sidebarTop}>
+            <div className={classes.topBar}>
+              <Text size="lg" fw={600}>
+                MrChat
+              </Text>
+              <div className={classes.topActions}>
+                <ActionIcon
+                  variant="subtle"
+                  onClick={() => {
+                    setReceiverUserDetails(null);
+                    open();
+                  }}
+                  radius="lg"
+                >
+                  <IconPlus size={20} stroke={3} />
+                </ActionIcon>
+              </div>
+            </div>
+          </div>
+          <Text size="xs" c="dimmed" mt="sm" mb="xs" ml={12}>
+            All Messages
+          </Text>
+          {/* Scrollable DM list */}
+          <div className={classes.scrollWrapper}>
+            <VirtualizedList
+              data={chatList?.rows?.data || []}
+              endReached={loadMoreChats}
+              itemContent={(_, item: any) => {
+                const isActive = item.chatId === chatId;
+
+                return (
+                  <div
+                    className={`${classes.chatItem} ${
+                      isActive ? classes.activeChatItem : ""
+                    }`}
+                    onClick={() => {
+                      if (isActive) return;
+                      handleJoinChat(item);
+                    }}
+                  >
+                    {item.avatar ? (
+                      <Avatar src={item.avatar} size={36} radius="xl" />
+                    ) : (
+                      <Avatar
+                        key={item.displayName || item.username}
+                        name={item.displayName || item.username}
+                        color="initials"
+                      />
+                    )}
+
+                    <div className={classes.chatInfo}>
+                      <Text className={classes.chatLabelItem} truncate>
+                        {item.displayName || item.username}
+                      </Text>
+                      {item.unreadCount > 0 && (
+                        <div className={classes.unreadBadge}>
+                          {item.unreadCount || 10}
+                        </div>
+                      )}
+
+                      <div className={classes.messagePreview}>
+                        <Text
+                          truncate
+                          size="xs"
+                          c="dimmed"
+                          style={{ maxWidth: 150 }}
+                          className={classes.messagePreviewContent}
+                        >
+                          {stripHtml(DOMPurify.sanitize(item.message))}
+                        </Text>
+                        <Text
+                          size="xs"
+                          c="dimmed"
+                          className={classes.messagePreviewTime}
+                        >
+                          {getChatDisplayTime(item.updatedAt || item.createdAt)}
+                        </Text>
+                      </div>
+                    </div>
+                  </div>
+                );
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Main chat area */}
+        <ChatUserMessage
+          chatId={chatId}
+          enableChat={enableChat}
+          senderDetails={senderDetails}
+          receiverDetails={receiverDetails}
+          onChatInitialized={(data: any) => {
+            handleJoinChat({
+              chatId: data.chatId,
+              userId: receiverDetails?.userId,
+              username: receiverDetails?.username,
+              displayName: receiverDetails?.displayName,
+              avatar: receiverDetails?.avatar,
+            });
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/ChatUserList/ChatUserList.type.tsx

@@ -0,0 +1,12 @@
+export type UserOption = {
+  value: string;
+  label?: string;
+  user: UserData;
+};
+
+export type UserData = {
+  userId: string;
+  username: string;
+  displayName?: string;
+  avatar?: string;
+};