mr-chat-bird 1.0.0

package/src/components/UserProfile/UserProfileDrawer.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Avatar, Text } from "@mantine/core";
+import {
+  IconArrowLeft,
+  IconTrash,
+  IconBan,
+} from "@tabler/icons-react";
+import classes from "./UserProfileDrawer.module.css";
+
+type UserProfileDrawerProps = {
+  opened: boolean;
+  onClose: () => void;
+  user?: {
+    avatar?: string;
+    username?: string;
+    displayName?: string;
+  };
+  onDeleteMessages?: () => void;
+  onBlock?: () => void;
+};
+
+export default function UserProfileDrawer({
+  opened,
+  onClose,
+  user,
+  onDeleteMessages,
+  onBlock,
+}: UserProfileDrawerProps) {
+  const [visible, setVisible] = useState(opened);
+  const [showImagePreview, setShowImagePreview] = useState(false);
+
+  useEffect(() => {
+    if (opened) setVisible(true);
+  }, [opened]);
+
+  const handleClose = () => {
+    setVisible(false);
+    setTimeout(onClose, 250); // match animation duration
+  };
+
+  if (!opened && !visible) return null;
+
+  return (
+    <>
+      {/* Overlay */}
+      <div className={classes.overlay} onClick={handleClose}>
+        {/* Drawer */}
+        <div
+          className={`${classes.drawer} ${
+            visible ? classes.open : classes.close
+          }`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className={classes.header}>
+            <div className={classes.backBtn} onClick={handleClose}>
+              <IconArrowLeft size={20} />
+            </div>
+            <Text fw={600}>Contact info</Text>
+          </div>
+
+          {/* Profile */}
+          <div className={classes.profileSection}>
+            <Avatar
+              src={user?.avatar}
+              size={150}
+              radius="xl"
+              style={{ cursor: "pointer" }}
+              onClick={() => user?.avatar ? setShowImagePreview(true) : {}}
+            />
+
+            <Text fw={700} size="lg" mt="sm">
+              {user?.displayName}
+            </Text>
+
+            <Text size="sm" c="dimmed">
+              @{user?.username}
+            </Text>
+          </div>
+
+          {/* Actions */}
+          <div className={classes.actions}>
+            <div
+              className={`${classes.item} ${classes.itemDanger}`}
+              onClick={onDeleteMessages}
+            >
+              <IconTrash size={18} />
+              <span>Delete all messages</span>
+            </div>
+
+            <div
+              className={`${classes.item} ${classes.itemDanger}`}
+              onClick={onBlock}
+            >
+              <IconBan size={18} />
+              <span>Block</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Fullscreen Image Preview */}
+      {showImagePreview && (
+        <div
+          className={classes.imagePreview}
+          onClick={() => setShowImagePreview(false)}
+        >
+          <img src={user?.avatar} alt="profile" />
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/VirtualizedList/ChatScrollContainer.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useRef, useEffect } from "react";
+
+type Props<T> = {
+  data: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+  loadMore: any;
+  hasMore: boolean;
+  scrollToBottomTrigger?: any;
+};
+
+export function ChatScrollContainer<T>({
+  data,
+  renderItem,
+  loadMore,
+  hasMore,
+  scrollToBottomTrigger,
+}: Props<T>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isFetchingRef = useRef(false);
+  const isInitialLoadRef = useRef(true);
+  const prevLengthRef = useRef(0);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    setTimeout(() => {
+      el.scrollTop = el.scrollHeight;
+    }, 100);
+  }, [scrollToBottomTrigger]);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !data.length) return;
+
+    if (isInitialLoadRef.current) {
+      el.scrollTop = el.scrollHeight;
+      isInitialLoadRef.current = false;
+    }
+
+    prevLengthRef.current = data.length;
+  }, [data]);
+
+  const handleScroll = () => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    if (el.scrollTop < 20 && hasMore && !isFetchingRef.current) {
+      loadOlderMessages();
+    }
+  };
+
+  const loadOlderMessages = async () => {
+    const el = containerRef.current;
+    if (!el || isFetchingRef.current || !hasMore) return;
+
+    isFetchingRef.current = true;
+
+    const prevScrollHeight = el.scrollHeight;
+    const prevScrollTop = el.scrollTop;
+
+    await loadMore();
+
+    setTimeout(() => {
+      const newScrollHeight = el.scrollHeight;
+      const heightDiff = newScrollHeight - prevScrollHeight;
+
+      el.scrollTop = prevScrollTop + heightDiff;
+
+      isFetchingRef.current = false;
+    }, 0);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      onScroll={handleScroll}
+      style={{
+        overflowY: "auto",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      {data.map((item, index) => (
+        <div key={(item as any)?.id || index}>{renderItem(item, index)}</div>
+      ))}
+    </div>
+  );
+}

package/src/components/VirtualizedList/index.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Virtuoso, VirtuosoProps } from "react-virtuoso";
+
+type Props<T> = {
+  data: T[];
+  itemContent: (index: number, item: T) => React.ReactNode;
+  height?: string | number;
+  startReached?: () => void;
+  endReached?: () => void;
+} & VirtuosoProps<T, any>;
+
+export function VirtualizedList<T>({
+  data,
+  itemContent,
+  height = "100%",
+  startReached,
+  endReached,
+  ...props
+}: Props<T>) {
+  return (
+    <Virtuoso
+      style={{ height }}
+      data={data}
+      startReached={startReached}
+      endReached={endReached}
+      itemContent={(index, item) => itemContent(index, item)}
+      {...props}
+    />
+  );
+}

package/src/lib/axios.ts

@@ -0,0 +1,12 @@
+import { environment } from '../utils/environment';
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+  baseURL: environment.BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+    Authorization: environment.AUTHORIZATION
+  },
+});
+
+export default axiosInstance;

package/src/lib/socket.ts

@@ -0,0 +1,29 @@
+import { io, Socket } from "socket.io-client";
+import { environment } from "../utils/environment";
+
+let socket: Socket | null = null;
+let currentUserId: string | undefined;
+
+export const getSocket = (userId?: string): Socket | null => {
+  if (!userId) return null;
+
+  if (!socket || currentUserId !== userId) {
+    if (socket) {
+      socket.disconnect();
+      socket = null;
+    }
+
+    socket = io(environment.SOCKET_URL, {
+      autoConnect: false,
+      transports: ["websocket"],
+      auth: {
+        apiKey: environment.AUTHORIZATION,
+        userId: userId,
+      },
+    });
+
+    currentUserId = userId;
+  }
+
+  return socket;
+};

package/src/store/provider.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { Provider } from 'react-redux';
+import { store } from './store';
+
+export function ReduxProvider({ children }: { children: React.ReactNode }) {
+  return <Provider store={store}>{children}</Provider>;
+}

package/src/store/slices/ChatSlice.ts

@@ -0,0 +1,249 @@
+import { createSlice } from "@reduxjs/toolkit";
+import axios from "../../lib/axios";
+import { notifications } from "@mantine/notifications";
+
+export interface ChatUser {
+  chatId: string;
+  userId: string;
+  username: string;
+  displayName?: string;
+  avatar?: string;
+  message?: string;
+  unreadCount?: number;
+}
+
+export interface MessagedUserRows {
+  success: boolean;
+  status: boolean;
+  message: string;
+  data: ChatUser[];
+}
+
+export interface MessagedUserList {
+  hasMore: boolean;
+  rows: MessagedUserRows;
+}
+
+export interface MessagesState {
+  messagedUserList: MessagedUserList | null;
+  messageList: any;
+}
+
+const initialState: MessagesState = {
+  messagedUserList: null,
+  messageList: [],
+};
+
+export const MessagesSlice = createSlice({
+  name: "messages",
+  initialState,
+  reducers: {
+    setMessagedUserList: (state, action) => {
+      const newData = action.payload;
+
+      if (!state.messagedUserList || newData.page === 0) {
+        state.messagedUserList = newData;
+        return;
+      }
+
+      const existingList = state.messagedUserList.rows.data;
+
+      const merged = [...existingList, ...newData.rows.data];
+
+      const uniqueMap = new Map();
+
+      merged.forEach((item: any) => {
+        uniqueMap.set(item.chatId, item);
+      });
+
+      const uniqueList = Array.from(uniqueMap.values());
+
+      state.messagedUserList = {
+        ...newData,
+        rows: {
+          ...newData.rows,
+          data: uniqueList,
+        },
+      };
+    },
+    setMessageList: (state, action) => {
+      const newData = action.payload;
+
+      if (!state.messageList?.rows?.data || newData.page === 0) {
+        state.messageList = newData;
+        return;
+      }
+
+      // Merge for next pages
+      state.messageList = {
+        ...newData,
+        rows: {
+          ...newData.rows,
+          data: [
+            ...newData.rows.data, // older messages (top)
+            ...state.messageList.rows.data, // existing messages
+          ],
+        },
+      };
+    },
+    addNewMessage: (state, action) => {
+      if (!state.messageList?.rows?.data) return;
+      state.messageList.rows.data.push(action.payload);
+    },
+    addUserToChatList: (state, action) => {
+      const newUser = action.payload;
+
+      if (!state.messagedUserList) {
+        state.messagedUserList = {
+          hasMore: false,
+          rows: {
+            success: true,
+            status: true,
+            message: "",
+            data: [newUser],
+          },
+        };
+        return;
+      }
+
+      let list = state.messagedUserList.rows.data;
+
+      state.messagedUserList.rows.data = list = list.filter(
+        (item: any) => item?.chatId,
+      );
+
+      const index = list.findIndex(
+        (item: any) => item.chatId === newUser.chatId,
+      );
+
+      if (index !== -1) {
+        // ✅ Remove existing
+        const existing = list.splice(index, 1)[0];
+
+        const updatedUser = {
+          ...existing,
+          ...newUser,
+        };
+
+        list.unshift(updatedUser);
+      } else {
+        list.unshift(newUser);
+      }
+    },
+    resetMessageList: (state) => {
+      state.messageList = [];
+    },
+    updateUnreadCount: (state, action) => {
+      const { chatId, isActive } = action.payload;
+
+      const list = state.messagedUserList?.rows?.data;
+      if (!list) return;
+
+      const item = list.find((chat: any) => chat.chatId === chatId);
+      if (!item) return;
+
+      if (isActive) {
+        item.unreadCount = 0;
+      } else {
+        item.unreadCount = (item.unreadCount || 0) + 1;
+      }
+    },
+    resetUnreadCount: (state, action) => {
+      const chatId = action.payload;
+
+      const list = state.messagedUserList?.rows?.data;
+      if (!list) return;
+
+      const item = list.find((chat: any) => chat.chatId === chatId);
+      if (!item) return;
+
+      item.unreadCount = 0;
+    },
+  },
+});
+
+export const fetchMessageListByUserId =
+  (payload: { userId: number | string; page?: number }) =>
+    async (dispatch: any) => {
+      return axios
+        .get(
+          `/api/messages/userList/${payload?.userId}?page=${payload?.page || 0}`,
+        )
+        .then((response: any) => {
+          console.log("Fetched messages for userId:", response.data);
+          dispatch(setMessagedUserList(response.data));
+          return response.data;
+        })
+        .catch((err: any) => {
+          const message =
+            err?.response?.data?.message || "Failed to fetch messages";
+          notifications.show({
+            title: "Message Fetch Failed",
+            message,
+            color: "red",
+          });
+          return err;
+        });
+    };
+
+export const fetchMessagesByChatId =
+  (payload: { chatId: number | string; page?: number; userId?: number | string }) =>
+    async (dispatch: any) => {
+      return axios
+        .get(`/api/messages/${payload?.chatId}?page=${payload?.page || 0}&userId=${payload?.userId}`)
+        .then((response: any) => {
+          dispatch(setMessageList(response.data));
+          return response.data;
+        })
+        .catch((err: any) => {
+          const message =
+            err?.response?.data?.message || "Failed to fetch messages";
+          notifications.show({
+            title: "Message Fetch Failed",
+            message,
+            color: "red",
+          });
+          return err;
+        });
+    };
+
+export const resetMessages = () => async (dispatch: any) => {
+  dispatch(resetMessageList());
+};
+
+export const deleteMessagesByChatId =
+  (payload: { chatId: number | string; userId: number | string }) =>
+    async (dispatch: any) => {
+      return axios
+        .delete(`/api/messages`, { data: { chatId: payload?.chatId, userId: payload?.userId } })
+        .then((response: any) => {
+          dispatch(resetMessageList());
+          notifications.show({
+            title: "Messages Deleted",
+            message: "All messages in this chat have been deleted.",
+            color: "green",
+          });
+          return response.data;
+        })
+        .catch((err: any) => {
+          const message =
+            err?.response?.data?.message || "Failed to delete messages";
+          notifications.show({
+            title: "Message Deletion Failed",
+            message,
+            color: "red",
+          });
+          return err;
+        });
+    };
+
+export const {
+  setMessagedUserList,
+  setMessageList,
+  addNewMessage,
+  addUserToChatList,
+  resetMessageList,
+  updateUnreadCount,
+  resetUnreadCount,
+} = MessagesSlice.actions;
+export default MessagesSlice.reducer;

package/src/store/socket/index.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect } from "react";
+import { getSocket } from "../../lib/socket";
+
+interface SocketProviderProps {
+  children: React.ReactNode;
+  userId?: string;
+}
+
+export function SocketProvider({ children, userId }: SocketProviderProps) {
+  useEffect(() => {
+    if (!userId) return;
+
+    const socket = getSocket(userId);
+    if (!socket) return;
+
+    if (!socket.connected) {
+      socket.connect();
+      console.log("✅ Socket connected for:", userId);
+    }
+
+    return () => {
+      if (socket.connected) {
+        socket.disconnect();
+        console.log("Socket disconnected for:", userId);
+      }
+    };
+  }, [userId]);
+
+  return <>{children}</>;
+}

package/src/store/store.ts

@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+import chatReducer from './slices/ChatSlice';
+
+export const store = configureStore({
+  reducer: {
+    chat: chatReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/src/theme.ts

@@ -0,0 +1,84 @@
+"use client";
+
+import { createTheme, MantineColorsTuple } from "@mantine/core";
+
+const customBrand: MantineColorsTuple = [
+  "#e6f9ff",
+  "#b3ecff",
+  "#80dfff",
+  "#4dd2ff",
+  "#1ac5ff",
+  "#00b8e6",
+  "#0091b3",
+  "#006a80",
+  "#00434d",
+  "#001c1a",
+];
+
+const emerald: MantineColorsTuple = [
+  "#e6f9f2",
+  "#c0f0de",
+  "#88e4c3",
+  "#4dd6a4",
+  "#26cb90",
+  "#00bf7d",
+  "#00a36c",
+  "#008d5d",
+  "#00764d",
+  "#005f3e",
+];
+
+const ruby: MantineColorsTuple = [
+  "#ffe6e9",
+  "#fbbdc4",
+  "#f38b98",
+  "#ea576b",
+  "#e12c48",
+  "#d80a2d",
+  "#b30625",
+  "#8f041d",
+  "#6b0215",
+  "#47010e",
+];
+
+const sunset: MantineColorsTuple = [
+  "#fff1e6",
+  "#ffd7b3",
+  "#ffb380",
+  "#ff8f4d",
+  "#ff6b1a",
+  "#e65c00",
+  "#b34700",
+  "#803300",
+  "#4d1f00",
+  "#1a0a00",
+];
+
+const ocean: MantineColorsTuple = [
+  "#e6f9ff",
+  "#b3ecff",
+  "#80dfff",
+  "#4dd2ff",
+  "#1ac5ff",
+  "#00b8e6",
+  "#0091b3",
+  "#006a80",
+  "#00434d",
+  "#001c1a",
+];
+
+export const colorThemes = {
+  customBrand,
+  emerald,
+  ruby,
+  sunset,
+  ocean,
+};
+
+export const createAppTheme = (primaryColor: keyof typeof colorThemes) =>
+  createTheme({
+    primaryColor,
+    colors: {
+      ...colorThemes,
+    },
+  });

package/src/utils/environment.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  BASE_URL: 'http://localhost:4000',
+  SOCKET_URL: "http://localhost:4000",
+  AUTHORIZATION: 'hgshygsydgsydgsydgsyd'
+};

package/src/utils/helper.ts

@@ -0,0 +1,36 @@
+export const getChatDisplayTime = (
+  timestamp?: string | number | Date
+) => {
+  if (!timestamp) return "";
+
+  const msgDate = new Date(timestamp);
+
+  const today = new Date();
+  const yesterday = new Date();
+  yesterday.setDate(today.getDate() - 1);
+
+  const isToday =
+    msgDate.toDateString() === today.toDateString();
+
+  const isYesterday =
+    msgDate.toDateString() === yesterday.toDateString();
+
+  const time = msgDate.toLocaleTimeString("en-GB", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+
+  if (isToday) {
+    return time;
+  }
+
+  if (isYesterday) {
+    return "Yesterday";
+  }
+
+  return msgDate.toLocaleDateString(undefined, {
+    day: "numeric",
+    month: "short",
+  });
+};