@samparkchat/sampark-web-chat 0.0.1

package/sampark/sampark-chat/screens/SamparkchatScreen.js

@@ -0,0 +1,1317 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useEffect, useRef, useState } from "react";
+import SamparkHeader from "../components/Headers/SamparkHeader";
+import DeleteModel from "../models/deleteModel";
+import GroupBottomSheet from "../components/bottomsheets/GroupBottomSheet";
+import GroupOptionBottomSheet from "../components/bottomsheets/GroupOptionBottomSheet";
+import ViewParticipents from "../components/lists/ViewParticipents";
+import InviteUserScreen from "../components/lists/ParticipantList";
+import { generatePeerRoomId, getInitials } from "../services/Common";
+import PeerChatScreen from "./PeerChatScreen";
+import GroupChatScreen from "./groupChatScreen";
+import { getTimeStampForChatsLists } from "../services/DateFormat";
+var SamparkChatScreen = function (_a) {
+    var client = _a.client, users = _a.users, userId = _a.userId, userName = _a.userName, style = _a.style, textStyle = _a.textStyle;
+    var _b = useState(false), showBottomSheet = _b[0], setShowBottomSheet = _b[1];
+    var _c = useState(false), isGroupActive = _c[0], setIsGroupActive = _c[1];
+    var _d = useState([]), messages = _d[0], setMessages = _d[1];
+    var _e = useState(''), searchTerm = _e[0], setSearchTerm = _e[1];
+    var _f = useState(false), showParticipantsList = _f[0], setShowParticipantsList = _f[1];
+    var _g = useState(""), userGroupName = _g[0], setUserGroupName = _g[1];
+    var _h = useState(""), userGroupType = _h[0], setUserGroupType = _h[1];
+    var _j = useState(''), peerUserName = _j[0], setPeerUserName = _j[1];
+    var _k = useState(''), joinRoomId = _k[0], setJoinRoomId = _k[1];
+    var _l = useState(''), userProfilePic = _l[0], setUserProfilePic = _l[1];
+    var _m = useState(''), peerUserId = _m[0], setPeerUserId = _m[1];
+    var _o = useState(false), showInputFeild = _o[0], setShowInputFeild = _o[1];
+    var _p = useState(false), showUserList = _p[0], setShowUserList = _p[1];
+    var _q = useState(false), isChatInitialized = _q[0], setIsChatInitialized = _q[1];
+    var _r = useState([]), onlineUsers = _r[0], setOnlineUsers = _r[1];
+    var _s = useState(''), userMessage = _s[0], setUserMessage = _s[1];
+    var _t = useState({}), lastMessages = _t[0], setLastMessages = _t[1];
+    var _u = useState(users), participantsList = _u[0], setParticipantsList = _u[1];
+    var _v = useState(""), userOrganizationId = _v[0], setUserOrganizationId = _v[1];
+    var joinRoomIdRef = useRef(joinRoomId);
+    var _w = useState([]), userJoinedGroups = _w[0], setUserJoinedGroups = _w[1];
+    var _x = useState(''), selectedGroupType = _x[0], setSelectedGroupType = _x[1];
+    var _y = useState([]), groupsList = _y[0], setGroupsList = _y[1];
+    var _z = useState(false), userRemovedFromGroup = _z[0], setUserRemovedFromGroup = _z[1];
+    var _0 = useState("Active"), userJoinedGroupStatus = _0[0], setUserJoinedGroupStatus = _0[1];
+    var _1 = useState(""), userJoinedGroupUpdatedAt = _1[0], setUserJoinedGroupUpdatedAt = _1[1];
+    var _2 = useState(false), showDeleteIcon = _2[0], setShowDeleteIcon = _2[1];
+    var _3 = useState(false), showDeleteModal = _3[0], setShowDeleteModal = _3[1];
+    var _4 = useState(null), groupToDelete = _4[0], setGroupToDelete = _4[1];
+    var _5 = useState(""), userJoinedGroupRole = _5[0], setUserJoinedGroupRole = _5[1];
+    var _6 = useState(''), groupName = _6[0], setGroupName = _6[1];
+    var _7 = useState([]), viewParticipants = _7[0], setViewParticipants = _7[1];
+    var _8 = useState(false), showJoinBtn = _8[0], setShowJoinBtn = _8[1];
+    var _9 = useState(false), userRemoveGroup = _9[0], setUserRemoveGroup = _9[1];
+    var _10 = useState([]), selectedParticipants = _10[0], setSelectedParticipants = _10[1];
+    var _11 = useState(false), userLeaveGroup = _11[0], setUserLeaveGroup = _11[1];
+    var _12 = useState(false), showViewParticipantList = _12[0], setViewParticipantsList = _12[1];
+    var _13 = useState(false), showGroupOptionBottomSheet = _13[0], setShowGroupOptionBottomSheet = _13[1];
+    var _14 = useState(false), showHideParticipantScreen = _14[0], setShowHideParticipantScreen = _14[1];
+    var _15 = useState(false), showSidePanel = _15[0], setShowSidePanel = _15[1];
+    var _16 = useState(null), hoveredGroupId = _16[0], setHoveredGroupId = _16[1];
+    var _17 = useState(false), showAssignAdminModal = _17[0], setShowAssignAdminModal = _17[1];
+    var _18 = useState(""), selectedNewAdmin = _18[0], setSelectedNewAdmin = _18[1];
+    useEffect(function () {
+        var handleOpenAssignAdminModal = function () {
+            setShowAssignAdminModal(true);
+        };
+        window.addEventListener('openAssignAdminModal', handleOpenAssignAdminModal);
+        return function () {
+            window.removeEventListener('openAssignAdminModal', handleOpenAssignAdminModal);
+        };
+    }, []);
+    useEffect(function () {
+        if (!isGroupActive && showParticipantsList) {
+            setShowParticipantsList(false);
+            setSelectedParticipants([]);
+        }
+    }, [isGroupActive, joinRoomId]);
+    var updateGroupsList = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var chatGroups, groupMsgPromises, updatedGroups, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    return [4 /*yield*/, client.groupChat.getRoomsByUserId(userId)];
+                case 1:
+                    chatGroups = _a.sent();
+                    groupMsgPromises = chatGroups.map(function (group) { return __awaiter(void 0, void 0, void 0, function () {
+                        var lastMessage;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, fetchLastMessageForGroup(group.room_id)];
+                                case 1:
+                                    lastMessage = _a.sent();
+                                    return [2 /*return*/, __assign(__assign({}, group), { lastMessage: lastMessage === null ? undefined : lastMessage })];
+                            }
+                        });
+                    }); });
+                    return [4 /*yield*/, Promise.all(groupMsgPromises)];
+                case 2:
+                    updatedGroups = _a.sent();
+                    setGroupsList(updatedGroups);
+                    setShowBottomSheet(false);
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error("Error fetching chat data:", error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    // useEffect(() => {
+    //   const css = `
+    //     .sampark-chat-container *::-webkit-scrollbar,
+    //     .sampark-chat-container *::-webkit-scrollbar-track,
+    //     .sampark-chat-container *::-webkit-scrollbar-thumb {
+    //       width: 0px !important;
+    //       height: 0px !important;
+    //       background: transparent !important;
+    //       display: none !important;
+    //     }
+    //     .sampark-chat-container * {
+    //       scrollbar-width: none !important;
+    //       -ms-overflow-style: none !important;
+    //     }
+    //     .sampark-chat-container div,
+    //     .sampark-chat-container ul,
+    //     .sampark-chat-container ol,
+    //     .sampark-chat-container section,
+    //     .sampark-chat-container article {
+    //       overflow-x: hidden !important;
+    //     }
+    //   `;
+    //   const styleElement = document.createElement('style');
+    //   styleElement.textContent = css;
+    //   document.head.appendChild(styleElement);
+    //   return () => {
+    //     document.head.removeChild(styleElement);
+    //   };
+    // }, []);
+    useEffect(function () {
+        joinRoomIdRef.current = joinRoomId;
+    }, [joinRoomId]);
+    useEffect(function () {
+        setShowUserList(false);
+        setIsChatInitialized(false);
+        setMessages([]);
+        if (isGroupActive) {
+            updateGroupsList();
+        }
+    }, [isGroupActive]);
+    var peerOnStatusUpdate = function (statusUpdate) {
+        console.log('Peer user status:', statusUpdate);
+        if (statusUpdate.status === "online") {
+            setOnlineUsers(function (prevOnlineUsers) { return __spreadArray(__spreadArray([], prevOnlineUsers, true), [statusUpdate.userId], false); });
+        }
+        else {
+            setOnlineUsers(function (prevOnlineUsers) { return prevOnlineUsers.filter(function (id) { return id !== statusUpdate.userId; }); });
+        }
+    };
+    useEffect(function () {
+        client.peerChat.sendOnlineStatus(userId, userName);
+        client.peerChat.peerConnectUser(function (statusUpdate) {
+            peerOnStatusUpdate(statusUpdate);
+        }, function (initialOnlineUsers) {
+            setOnlineUsers(initialOnlineUsers);
+        });
+        var handleVisibilityChange = function () {
+            if (!document.hidden && isGroupActive) {
+                updateGroupsList();
+                var refreshUserGroups = function () { return __awaiter(void 0, void 0, void 0, function () {
+                    var updatedParticipantDetails, error_2;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                _a.trys.push([0, 2, , 3]);
+                                return [4 /*yield*/, client.groupChat.getRegisteredParticipantDetails(userId)];
+                            case 1:
+                                updatedParticipantDetails = _a.sent();
+                                setUserJoinedGroups(updatedParticipantDetails.data.joined_groups);
+                                return [3 /*break*/, 3];
+                            case 2:
+                                error_2 = _a.sent();
+                                console.error("Error refreshing user groups:", error_2);
+                                return [3 /*break*/, 3];
+                            case 3: return [2 /*return*/];
+                        }
+                    });
+                }); };
+                refreshUserGroups();
+            }
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return function () {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [isGroupActive]);
+    useEffect(function () {
+        if (showSidePanel && userJoinedGroupStatus !== 'Active') {
+            setShowSidePanel(false);
+        }
+    }, [userJoinedGroupStatus, showSidePanel]);
+    useEffect(function () {
+        if (!showBottomSheet) {
+            var updatedList = users.filter(function (user) { return user.user_id !== userId.trim(); });
+            setParticipantsList(updatedList);
+        }
+        else {
+            var updatedList = users.filter(function (user) { return user.user_id !== userId.trim(); });
+            setParticipantsList(updatedList);
+        }
+    }, [showBottomSheet, users, userId]);
+    useEffect(function () {
+        try {
+            var organizationId = client.peerChat.getOrganizationId();
+            setUserOrganizationId(organizationId);
+            for (var _i = 0, participantsList_1 = participantsList; _i < participantsList_1.length; _i++) {
+                var user = participantsList_1[_i];
+                client.peerChat.registerUser(user.user_id, user.user_name);
+            }
+            var userExists = participantsList.some(function (user) { return user.user_id === userId.trim(); });
+            if (userExists) {
+                var updatedList = participantsList.filter(function (user) { return user.user_id !== userId.trim(); });
+                var fetchRegisteredUserData = function () { return __awaiter(void 0, void 0, void 0, function () {
+                    var updatedParticipantDetails;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, client.groupChat.getRegisteredParticipantDetails(userId)];
+                            case 1:
+                                updatedParticipantDetails = _a.sent();
+                                setUserJoinedGroups(updatedParticipantDetails.data.joined_groups);
+                                return [2 /*return*/];
+                        }
+                    });
+                }); };
+                fetchRegisteredUserData();
+                setParticipantsList(updatedList);
+            }
+        }
+        catch (error) {
+            console.error('Error inserting users:', error);
+        }
+    }, []);
+    var filteredUsers = participantsList.filter(function (user) { return user.user_name.toLowerCase().includes(searchTerm.toLowerCase()); });
+    var filteredGroups = groupsList && groupsList.length > 0
+        ? groupsList.filter(function (group) {
+            return group.group_name.toLowerCase().includes(searchTerm.toLowerCase());
+        })
+        : [];
+    var sortedFilteredUsers = filteredUsers.sort(function (a, b) {
+        var _a, _b;
+        var aTime = ((_a = lastMessages[a.user_id]) === null || _a === void 0 ? void 0 : _a.time) ? new Date(lastMessages[a.user_id].time).getTime() : 0;
+        var bTime = ((_b = lastMessages[b.user_id]) === null || _b === void 0 ? void 0 : _b.time) ? new Date(lastMessages[b.user_id].time).getTime() : 0;
+        return bTime - aTime;
+    });
+    var sortedFilteredGroups = filteredGroups.sort(function (a, b) {
+        var _a, _b;
+        var aTime = ((_a = a.lastMessage) === null || _a === void 0 ? void 0 : _a.time) ? new Date(a.lastMessage.time).getTime() : 0;
+        var bTime = ((_b = b.lastMessage) === null || _b === void 0 ? void 0 : _b.time) ? new Date(b.lastMessage.time).getTime() : 0;
+        return bTime - aTime;
+    });
+    var handleSearch = function (term) {
+        setSearchTerm(term);
+    };
+    var formatMessageTime = function (timestamp) { return getTimeStampForChatsLists(timestamp); };
+    var fetchLastMessageForUser = function (targetUserId) { return __awaiter(void 0, void 0, void 0, function () {
+        var chatRoomId, chatHistory, lastChat, error_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    chatRoomId = generatePeerRoomId(userOrganizationId, userId, targetUserId);
+                    return [4 /*yield*/, client.peerChat.getChatHistory(chatRoomId, 1, 1)];
+                case 1:
+                    chatHistory = _a.sent();
+                    if (chatHistory && chatHistory.chats && chatHistory.chats.length > 0) {
+                        lastChat = chatHistory.chats[0];
+                        return [2 /*return*/, {
+                                message: lastChat.chat,
+                                time: lastChat.created_at
+                            }];
+                    }
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_3 = _a.sent();
+                    console.error("Error fetching last message:", error_3);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/, null];
+            }
+        });
+    }); };
+    var fetchLastMessageForGroup = function (roomId) { return __awaiter(void 0, void 0, void 0, function () {
+        var foundGroup, status_1, updatedAt_1, chatHistory, filteredChats, lastChat, lastChat, error_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 5, , 6]);
+                    foundGroup = userJoinedGroups.find(function (group) { return group.group_id === roomId; });
+                    status_1 = foundGroup === null || foundGroup === void 0 ? void 0 : foundGroup.status;
+                    updatedAt_1 = foundGroup === null || foundGroup === void 0 ? void 0 : foundGroup.updated_at;
+                    chatHistory = void 0;
+                    if (!(status_1 === "Removed" && updatedAt_1)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, client.groupChat.getGroupChatHistory(roomId, "Active", "", 1, 50)];
+                case 1:
+                    chatHistory = _a.sent(); // Fetch more messages to find the last before removal
+                    if (chatHistory && chatHistory.chats && chatHistory.chats.length > 0) {
+                        filteredChats = chatHistory.chats.filter(function (chat) {
+                            if (!chat.created_at || !updatedAt_1)
+                                return false;
+                            return new Date(chat.created_at).getTime() <= new Date(updatedAt_1).getTime();
+                        });
+                        if (filteredChats.length > 0) {
+                            lastChat = filteredChats[filteredChats.length - 1];
+                            return [2 /*return*/, {
+                                    message: lastChat.chat,
+                                    time: lastChat.created_at
+                                }];
+                        }
+                    }
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, client.groupChat.getGroupChatHistory(roomId, "Active", "", 1, 1)];
+                case 3:
+                    chatHistory = _a.sent();
+                    if (chatHistory && chatHistory.chats && chatHistory.chats.length > 0) {
+                        lastChat = chatHistory.chats[0];
+                        return [2 /*return*/, {
+                                message: lastChat.chat,
+                                time: lastChat.created_at
+                            }];
+                    }
+                    _a.label = 4;
+                case 4: return [3 /*break*/, 6];
+                case 5:
+                    error_4 = _a.sent();
+                    console.error("Error fetching last message for group:", error_4);
+                    return [3 /*break*/, 6];
+                case 6: return [2 /*return*/, null];
+            }
+        });
+    }); };
+    var handlePress = function (user) {
+        setPeerUserId(user.user_id);
+        setPeerUserName(user.user_name);
+        setUserProfilePic(user.profile_pic);
+        setIsChatInitialized(true);
+        setShowUserList(true);
+        setShowSidePanel(false);
+    };
+    var handleGroupPress = function (user) { return __awaiter(void 0, void 0, void 0, function () {
+        var updatedParticipantDetails, foundGroup, error_5, foundGroup;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setShowDeleteIcon(false);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, client.groupChat.getRegisteredParticipantDetails(userId)];
+                case 2:
+                    updatedParticipantDetails = _a.sent();
+                    setUserJoinedGroups(updatedParticipantDetails.data.joined_groups);
+                    foundGroup = updatedParticipantDetails.data.joined_groups.find(function (group) { return group.group_id === user.room_id; });
+                    if (foundGroup) {
+                        setUserJoinedGroupStatus(foundGroup.status);
+                        setUserJoinedGroupUpdatedAt(foundGroup.updated_at);
+                        setUserJoinedGroupRole(foundGroup.user_role);
+                    }
+                    else {
+                        setUserJoinedGroupStatus("");
+                        setUserJoinedGroupUpdatedAt("");
+                        setUserJoinedGroupRole("");
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_5 = _a.sent();
+                    console.error("Error refreshing group status:", error_5);
+                    foundGroup = userJoinedGroups.find(function (group) { return group.group_id === user.room_id; });
+                    if (foundGroup) {
+                        setUserJoinedGroupStatus(foundGroup.status);
+                        setUserJoinedGroupUpdatedAt(foundGroup.updated_at);
+                        setUserJoinedGroupRole(foundGroup.user_role);
+                    }
+                    else {
+                        setUserJoinedGroupStatus("");
+                        setUserJoinedGroupUpdatedAt("");
+                        setUserJoinedGroupRole("");
+                    }
+                    return [3 /*break*/, 4];
+                case 4:
+                    setSelectedGroupType(user.type);
+                    setGroupName(user.group_name);
+                    setJoinRoomId(user.room_id);
+                    setIsChatInitialized(true);
+                    setShowInputFeild(true);
+                    setShowUserList(true);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleHeaderClick = function () {
+        if (userJoinedGroupStatus === 'Active') {
+            setShowSidePanel(true);
+        }
+        else {
+            var message = userJoinedGroupStatus === 'Removed'
+                ? "You have been removed from this group and can't view the participant list"
+                : userJoinedGroupStatus === 'Left'
+                    ? "You have left this group and can't view the participant list"
+                    : "You can't access Participant List";
+            alert(message);
+        }
+    };
+    var closeSidePanel = function () {
+        setShowSidePanel(false);
+    };
+    var handleGroupDeletePress = function (user) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setGroupToDelete(user);
+            setShowDeleteModal(true);
+            return [2 /*return*/];
+        });
+    }); };
+    var handleDeleteGroupConfirmed = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var foundGroup, userDetails, error_6;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!groupToDelete)
+                        return [2 /*return*/];
+                    foundGroup = userJoinedGroups.find(function (group) { return group.group_id === groupToDelete.room_id; });
+                    if (!((foundGroup === null || foundGroup === void 0 ? void 0 : foundGroup.status) !== "Active")) return [3 /*break*/, 5];
+                    userDetails = [{ user_id: userId, user_name: userName }];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, client.groupChat.deleteGroupByUser(groupToDelete.room_id, userDetails)];
+                case 2:
+                    _a.sent();
+                    setShowDeleteModal(false);
+                    setGroupToDelete(null);
+                    if (joinRoomId === groupToDelete.room_id) {
+                        setIsChatInitialized(false);
+                        setShowUserList(false);
+                        setJoinRoomId("");
+                        setGroupName("");
+                        setMessages([]);
+                    }
+                    updateGroupsList();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_6 = _a.sent();
+                    alert("Failed to delete group.");
+                    return [3 /*break*/, 4];
+                case 4: return [3 /*break*/, 6];
+                case 5:
+                    setShowDeleteModal(false);
+                    setGroupToDelete(null);
+                    _a.label = 6;
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleSendPress = function () {
+        if (userMessage.trim().length > 0) {
+            if (isGroupActive) {
+                client.groupChat.sendGroupMessage(joinRoomId, userMessage, userId, userName);
+                client.groupChat.sendStopTyping(joinRoomId, userId, userName);
+                setUserMessage('');
+            }
+            else {
+                client.peerChat.sendMessage(joinRoomId, userMessage, userId, userName, peerUserId, peerUserName);
+                client.peerChat.sendStopPeerTyping(joinRoomId, userId, userName);
+                setLastMessages(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[peerUserId] = {
+                        message: userMessage,
+                        time: new Date().toISOString()
+                    }, _a)));
+                });
+                setUserMessage('');
+            }
+        }
+    };
+    var handleBackPress = function () {
+        var updatedList = users.filter(function (user) { return user.user_id !== userId.trim(); });
+        setParticipantsList(updatedList);
+        setMessages([]);
+        setSelectedGroupType('');
+        setJoinRoomId('');
+        setIsChatInitialized(false);
+        setShowUserList(false);
+        setSearchTerm('');
+        setShowSidePanel(false);
+        updateGroupsList();
+    };
+    var handleGroupBackPress = function () {
+        setViewParticipants([]);
+        var updatedList = users.filter(function (user) { return user.user_id !== userId.trim(); });
+        setParticipantsList(updatedList);
+        setUserJoinedGroupStatus("");
+        setUserJoinedGroupUpdatedAt("");
+        setShowJoinBtn(false);
+        setSelectedGroupType('');
+        setJoinRoomId('');
+        setMessages([]);
+        setIsChatInitialized(false);
+        setIsGroupActive(true);
+        setShowUserList(false);
+        setSearchTerm('');
+        setUserJoinedGroupRole("");
+        setShowSidePanel(false);
+        updateGroupsList();
+    };
+    var onGroupMessageReceived = function (messageData) {
+        if (messageData.roomId == joinRoomId && !messageData.userRemoved && userJoinedGroupStatus == "Active") {
+            var newMessage_1 = {
+                user: messageData.userId,
+                message: messageData.message,
+                time: messageData.time,
+                reply: messageData.userId == userId ? true : false,
+                status: messageData.userId == userId ? 'sent' : undefined
+            };
+            setMessages(function (prevMessages) { return __spreadArray(__spreadArray([], prevMessages, true), [newMessage_1], false); });
+        }
+        else if (messageData.userRemoved && messageData.userId == userId) {
+            setUserRemovedFromGroup(true);
+            if (isGroupActive && messageData.removedRoomId == joinRoomId) {
+                handleGroupBackPress();
+            }
+        }
+    };
+    var onMessageReceived = function (messageData) {
+        if (messageData.roomId == joinRoomIdRef.current) {
+            var newMessage_2 = {
+                user: messageData.userId,
+                message: messageData.message,
+                time: messageData.time,
+                reply: messageData.userId == userId,
+                status: messageData.userId == userId ? 'sent' : undefined,
+                message_id: messageData.message_id,
+            };
+            setMessages(function (prevMessages) { return __spreadArray(__spreadArray([], prevMessages, true), [newMessage_2], false); });
+            var otherUserId_1 = messageData.userId === userId ? peerUserId : messageData.userId;
+            if (otherUserId_1) {
+                setLastMessages(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[otherUserId_1] = {
+                        message: messageData.message,
+                        time: messageData.time
+                    }, _a)));
+                });
+            }
+        }
+    };
+    useEffect(function () {
+        if (joinRoomId != '' && isGroupActive) {
+            var fetchGroupChatData = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var chatHistory, memberList, activeUsers, convertedData;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, client.groupChat.getGroupChatHistory(joinRoomId, userJoinedGroupStatus, userJoinedGroupUpdatedAt, 1, 100)];
+                        case 1:
+                            chatHistory = _a.sent();
+                            return [4 /*yield*/, client.groupChat.getParticipant(joinRoomId)];
+                        case 2:
+                            memberList = _a.sent();
+                            activeUsers = memberList.filter(function (user) { return user.status === "Active"; });
+                            setViewParticipants(activeUsers);
+                            if (chatHistory) {
+                                convertedData = chatHistory.chats.map(function (entry) { return ({
+                                    user: entry.user,
+                                    message: entry.chat,
+                                    time: entry.created_at,
+                                    reply: userId === entry.user,
+                                    status: userId === entry.user ? 'sent' : undefined
+                                }); });
+                                setMessages(convertedData);
+                            }
+                            else {
+                                setMessages([]);
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            }); };
+            fetchGroupChatData();
+            client.groupChat.JoinGroupRoom(joinRoomId, userId, userName);
+            setMessages([]);
+            client.groupChat.connect(onGroupMessageReceived);
+        }
+    }, [joinRoomId]);
+    useEffect(function () {
+        if (showParticipantsList) {
+            if (userGroupName !== '' && !userRemoveGroup) {
+                setSelectedParticipants([]);
+            }
+            if (!userRemoveGroup) {
+                if (isGroupActive && joinRoomId && userGroupName === '') {
+                    var allOrgUsers = users.filter(function (user) { return user.user_id !== userId.trim(); });
+                    var missingParticipants = allOrgUsers.filter(function (item1) {
+                        return !viewParticipants.some(function (item2) { return item2.user_id === item1.user_id; });
+                    });
+                    setParticipantsList(missingParticipants);
+                }
+                else {
+                    var allOrgUsers = users.filter(function (user) { return user.user_id !== userId.trim(); });
+                    setParticipantsList(allOrgUsers);
+                }
+            }
+            else if (userRemoveGroup) {
+                var filteredData = viewParticipants.filter(function (user) { return user.user_id !== userId; });
+                setParticipantsList(filteredData);
+            }
+        }
+        else {
+            var updatedList = users.filter(function (user) { return user.user_id !== userId.trim(); });
+            setParticipantsList(updatedList);
+        }
+    }, [showParticipantsList, userRemoveGroup, viewParticipants, users, userId, isGroupActive, joinRoomId, userGroupName]);
+    useEffect(function () {
+        var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var chatRoomId, chatHistory, convertedData, error_7;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 3, , 4]);
+                        if (!(!isGroupActive && isChatInitialized)) return [3 /*break*/, 2];
+                        chatRoomId = generatePeerRoomId(userOrganizationId, userId, peerUserId);
+                        return [4 /*yield*/, client.peerChat.getChatHistory(chatRoomId, 1, 100)];
+                    case 1:
+                        chatHistory = _a.sent();
+                        if (chatHistory) {
+                            convertedData = chatHistory.chats.map(function (entry) { return ({
+                                user: entry.user,
+                                message: entry.chat,
+                                time: entry.created_at,
+                                reply: userId === entry.user,
+                                status: userId === entry.user ? 'sent' : undefined
+                            }); });
+                            setMessages(convertedData);
+                        }
+                        else {
+                            setMessages([]);
+                        }
+                        if (chatRoomId != '' && chatRoomId) {
+                            setShowInputFeild(true);
+                            setJoinRoomId(chatRoomId);
+                            client.peerChat.joinChatSession(chatRoomId);
+                            client.peerChat.connect(onMessageReceived);
+                        }
+                        _a.label = 2;
+                    case 2: return [3 /*break*/, 4];
+                    case 3:
+                        error_7 = _a.sent();
+                        console.error("Error fetching chat data:", error_7);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        if (showUserList) {
+            fetchData();
+        }
+    }, [showUserList, joinRoomId, peerUserId]);
+    useEffect(function () {
+        if (joinRoomId !== '' && isGroupActive) {
+            var groupExists = viewParticipants.some(function (participant) { return participant.user_id === userId; });
+            if (groupExists && selectedGroupType == 'public') {
+                setShowJoinBtn(true);
+            }
+        }
+    }, [viewParticipants]);
+    useEffect(function () {
+        if (userGroupName == '' && selectedParticipants.length != 0 && userRemoveGroup) {
+            var removeParticipantIntoGroup = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var _i, selectedParticipants_1, participant, memberList, activeUsers, error_8;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 6, , 7]);
+                            _i = 0, selectedParticipants_1 = selectedParticipants;
+                            _a.label = 1;
+                        case 1:
+                            if (!(_i < selectedParticipants_1.length)) return [3 /*break*/, 4];
+                            participant = selectedParticipants_1[_i];
+                            return [4 /*yield*/, client.groupChat.updateGroupStatusByParticipant(participant.user_id, joinRoomId, 'Removed')];
+                        case 2:
+                            _a.sent();
+                            _a.label = 3;
+                        case 3:
+                            _i++;
+                            return [3 /*break*/, 1];
+                        case 4:
+                            setUserRemoveGroup(false);
+                            return [4 /*yield*/, client.groupChat.getParticipant(joinRoomId)];
+                        case 5:
+                            memberList = _a.sent();
+                            activeUsers = memberList.filter(function (user) { return user.status === "Active"; });
+                            setViewParticipants(activeUsers);
+                            return [3 /*break*/, 7];
+                        case 6:
+                            error_8 = _a.sent();
+                            console.error("Error fetching chat data:", error_8);
+                            return [3 /*break*/, 7];
+                        case 7: return [2 /*return*/];
+                    }
+                });
+            }); };
+            removeParticipantIntoGroup();
+        }
+        if (userGroupName == '' && selectedParticipants.length != 0 && !userRemoveGroup) {
+            var addParticipantIntoGroup = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var groupIdReturn, memberList, activeUsers, error_9;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 4, , 5]);
+                            return [4 /*yield*/, client.groupChat.addParticipantToGroup(joinRoomId, groupName, selectedParticipants)];
+                        case 1:
+                            groupIdReturn = _a.sent();
+                            if (!(groupIdReturn != '')) return [3 /*break*/, 3];
+                            setSelectedParticipants([]);
+                            return [4 /*yield*/, client.groupChat.getParticipant(joinRoomId)];
+                        case 2:
+                            memberList = _a.sent();
+                            activeUsers = memberList.filter(function (user) { return user.status === "Active"; });
+                            setViewParticipants(activeUsers);
+                            _a.label = 3;
+                        case 3: return [3 /*break*/, 5];
+                        case 4:
+                            error_9 = _a.sent();
+                            console.error("Error fetching chat data:", error_9);
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); };
+            addParticipantIntoGroup();
+        }
+        if (userGroupName != '' && selectedParticipants.length != 0 && !userRemoveGroup) {
+            var createGroup = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var newParticipant, updatedParticipants, groupIdReturn, fetchRegisteredUserData, resetParticipantsList, error_10;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            newParticipant = { profile_pic: "", user_id: userId, user_name: userName };
+                            updatedParticipants = __spreadArray(__spreadArray([], selectedParticipants, true), [newParticipant], false);
+                            return [4 /*yield*/, client.groupChat.createGroupChat(userId, userGroupType, userGroupName, updatedParticipants)];
+                        case 1:
+                            groupIdReturn = _a.sent();
+                            if (groupIdReturn != '') {
+                                fetchRegisteredUserData = function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    var updatedParticipantDetails;
+                                    return __generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0: return [4 /*yield*/, client.groupChat.getRegisteredParticipantDetails(userId)];
+                                            case 1:
+                                                updatedParticipantDetails = _a.sent();
+                                                setUserJoinedGroups(updatedParticipantDetails.data.joined_groups);
+                                                return [2 /*return*/];
+                                        }
+                                    });
+                                }); };
+                                fetchRegisteredUserData();
+                                setUserGroupName('');
+                                setSelectedParticipants([]);
+                                resetParticipantsList = users.filter(function (user) { return user.user_id !== userId.trim(); });
+                                setParticipantsList(resetParticipantsList);
+                            }
+                            return [3 /*break*/, 3];
+                        case 2:
+                            error_10 = _a.sent();
+                            console.error("Error fetching chat data:", error_10);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); };
+            createGroup();
+        }
+    }, [selectedParticipants]);
+    useEffect(function () {
+        if (userLeaveGroup && isGroupActive) {
+            var leaveUserFromGroup = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var leaveGroups, updatedParticipantDetails, error_11;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 4, , 5]);
+                            return [4 /*yield*/, client.groupChat.updateGroupStatusByParticipant(userId, joinRoomId, 'Left')];
+                        case 1:
+                            leaveGroups = _a.sent();
+                            if (!leaveGroups) return [3 /*break*/, 3];
+                            return [4 /*yield*/, client.groupChat.getRegisteredParticipantDetails(userId)];
+                        case 2:
+                            updatedParticipantDetails = _a.sent();
+                            setUserJoinedGroups(updatedParticipantDetails.data.joined_groups);
+                            setUserLeaveGroup(false);
+                            setShowUserList(false);
+                            _a.label = 3;
+                        case 3: return [3 /*break*/, 5];
+                        case 4:
+                            error_11 = _a.sent();
+                            console.error("Error fetching chat data:", error_11);
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); };
+            if (userJoinedGroupRole && userJoinedGroupRole.toLowerCase() === 'admin') {
+                return;
+            }
+            if (window.confirm('Are you sure you want to leave the group?')) {
+                leaveUserFromGroup();
+            }
+            else {
+                setUserLeaveGroup(false);
+            }
+        }
+    }, [userLeaveGroup]);
+    useEffect(function () {
+        if (selectedParticipants.length == 0 && !userLeaveGroup) {
+            var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var chatGroups, groupMsgPromises, updatedGroups, error_12;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 3, , 4]);
+                            return [4 /*yield*/, client.groupChat.getRoomsByUserId(userId)];
+                        case 1:
+                            chatGroups = _a.sent();
+                            groupMsgPromises = chatGroups.map(function (group) { return __awaiter(void 0, void 0, void 0, function () {
+                                var lastMessage;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, fetchLastMessageForGroup(group.room_id)];
+                                        case 1:
+                                            lastMessage = _a.sent();
+                                            return [2 /*return*/, __assign(__assign({}, group), { lastMessage: lastMessage })];
+                                    }
+                                });
+                            }); });
+                            return [4 /*yield*/, Promise.all(groupMsgPromises)];
+                        case 2:
+                            updatedGroups = _a.sent();
+                            setGroupsList(updatedGroups);
+                            setShowBottomSheet(false);
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_12 = _a.sent();
+                            console.error("Error fetching chat data:", error_12);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); };
+            fetchData();
+        }
+    }, [userId, selectedParticipants, userLeaveGroup, isGroupActive]);
+    useEffect(function () {
+        var intervalId;
+        if (isGroupActive && !showUserList) {
+            intervalId = setInterval(function () { return __awaiter(void 0, void 0, void 0, function () {
+                var chatGroups, groupMsgPromises, updatedGroups, updatedParticipantDetails, error_13;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 4, , 5]);
+                            return [4 /*yield*/, client.groupChat.getRoomsByUserId(userId)];
+                        case 1:
+                            chatGroups = _a.sent();
+                            groupMsgPromises = chatGroups.map(function (group) { return __awaiter(void 0, void 0, void 0, function () {
+                                var lastMessage;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, fetchLastMessageForGroup(group.room_id)];
+                                        case 1:
+                                            lastMessage = _a.sent();
+                                            return [2 /*return*/, __assign(__assign({}, group), { lastMessage: lastMessage })];
+                                    }
+                                });
+                            }); });
+                            return [4 /*yield*/, Promise.all(groupMsgPromises)];
+                        case 2:
+                            updatedGroups = _a.sent();
+                            setGroupsList(updatedGroups);
+                            return [4 /*yield*/, client.groupChat.getRegisteredParticipantDetails(userId)];
+                        case 3:
+                            updatedParticipantDetails = _a.sent();
+                            setUserJoinedGroups(updatedParticipantDetails.data.joined_groups);
+                            return [3 /*break*/, 5];
+                        case 4:
+                            error_13 = _a.sent();
+                            console.error("Error in periodic group refresh:", error_13);
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); }, 15000);
+        }
+        return function () {
+            if (intervalId) {
+                clearInterval(intervalId);
+            }
+        };
+    }, [isGroupActive, showUserList, userId]);
+    useEffect(function () {
+        if (userRemovedFromGroup) {
+            var fetchData = function () { return __awaiter(void 0, void 0, void 0, function () {
+                var chatGroups, error_14;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, , 3]);
+                            return [4 /*yield*/, client.groupChat.getRoomsByUserId(userId)];
+                        case 1:
+                            chatGroups = _a.sent();
+                            setGroupsList(chatGroups);
+                            setUserRemovedFromGroup(false);
+                            return [3 /*break*/, 3];
+                        case 2:
+                            error_14 = _a.sent();
+                            console.error("Error fetching chat data:", error_14);
+                            return [3 /*break*/, 3];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            }); };
+            fetchData();
+        }
+    }, [userRemovedFromGroup]);
+    useEffect(function () {
+        var fetchLastMessages = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var lastMsgPromises, results, lastMsgMap_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(userOrganizationId && participantsList.length > 0)) return [3 /*break*/, 2];
+                        lastMsgPromises = participantsList.map(function (user) { return __awaiter(void 0, void 0, void 0, function () {
+                            var lastMsg;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, fetchLastMessageForUser(user.user_id)];
+                                    case 1:
+                                        lastMsg = _a.sent();
+                                        return [2 /*return*/, { userId: user.user_id, lastMessage: lastMsg }];
+                                }
+                            });
+                        }); });
+                        return [4 /*yield*/, Promise.all(lastMsgPromises)];
+                    case 1:
+                        results = _a.sent();
+                        lastMsgMap_1 = {};
+                        results.forEach(function (_a) {
+                            var userId = _a.userId, lastMessage = _a.lastMessage;
+                            if (lastMessage) {
+                                lastMsgMap_1[userId] = lastMessage;
+                            }
+                        });
+                        setLastMessages(lastMsgMap_1);
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchLastMessages();
+    }, [participantsList, userOrganizationId]);
+    var renderItem = function (item) {
+        var isUserOnline = onlineUsers.includes(item.user_id);
+        var lastMessage = lastMessages[item.user_id];
+        var isSelected = showUserList && peerUserId === item.user_id;
+        return (React.createElement("div", { key: item.user_id, style: __assign(__assign({}, styles.userItem), { backgroundColor: isSelected ? '#e3f2fd' : 'transparent' }), onClick: function () { return handlePress(item); } },
+            React.createElement("div", { style: styles.userRow },
+                React.createElement("div", { style: styles.avatarContainer },
+                    React.createElement("div", { style: styles.avatarWrapper },
+                        item.profile_pic ? (React.createElement("img", { src: item.profile_pic, style: styles.avatar, alt: item.user_name })) : (React.createElement("div", { style: styles.avatarPlaceholder }, getInitials(item.user_name))),
+                        React.createElement("div", { style: __assign(__assign({}, styles.statusIndicator), { backgroundColor: isUserOnline ? '#4CAF50' : '#9CA3AF' }) }))),
+                React.createElement("div", { style: styles.textContainer },
+                    React.createElement("div", { style: styles.userNameRow },
+                        React.createElement("span", { style: styles.userName }, item.user_name),
+                        lastMessage && lastMessage.time && (React.createElement("span", { style: styles.timeStamp }, formatMessageTime(lastMessage.time)))),
+                    lastMessage && lastMessage.message && (React.createElement("span", { style: { fontSize: '12px', color: '#666', marginTop: '2px', flex: 1, display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, lastMessage.message))))));
+    };
+    var renderGroupItem = function (_a) {
+        var _b, _c;
+        var item = _a.item;
+        return (React.createElement("div", { style: __assign(__assign({}, styles.userItem), { cursor: 'pointer' }), onClick: function () { return handleGroupPress(item); }, onMouseEnter: function () { return setHoveredGroupId(item.room_id); }, onMouseLeave: function () { return setHoveredGroupId(null); } },
+            React.createElement("div", { style: styles.userRow },
+                React.createElement("div", { style: styles.avatarContainer },
+                    React.createElement("div", { style: styles.avatarWrapper },
+                        item.type === 'public' && (React.createElement("div", { style: __assign(__assign({}, styles.avatarPlaceholder), { backgroundColor: '#4CAF50' }) },
+                            React.createElement("i", { className: "fas fa-users", style: { color: 'white', fontSize: '16px' } }))),
+                        item.type === 'private' && (React.createElement("div", { style: __assign(__assign({}, styles.avatarPlaceholder), { backgroundColor: '#2196F3' }) },
+                            React.createElement("i", { className: "fas fa-user-friends", style: { color: 'white', fontSize: '16px' } }))),
+                        item.type === 'protected' && (React.createElement("div", { style: __assign(__assign({}, styles.avatarPlaceholder), { backgroundColor: '#FF9800' }) },
+                            React.createElement("i", { className: "fas fa-shield-alt", style: { color: 'white', fontSize: '16px' } }))))),
+                React.createElement("div", { style: styles.textContainer },
+                    React.createElement("div", { style: styles.userNameRow },
+                        React.createElement("span", { style: styles.userName }, item.group_name),
+                        hoveredGroupId === item.room_id && (function () {
+                            var foundGroup = userJoinedGroups.find(function (g) { return g.group_id === item.room_id; });
+                            if (foundGroup && foundGroup.status === 'Left') {
+                                return (React.createElement("span", { style: { cursor: 'pointer' }, onClick: function (e) { e.stopPropagation(); handleGroupDeletePress(item); } },
+                                    React.createElement("i", { className: "fas fa-trash", style: { color: '#d32f2f', fontSize: '16px' } })));
+                            }
+                            return null;
+                        })(),
+                        (!hoveredGroupId || hoveredGroupId !== item.room_id) && ((_b = item.lastMessage) === null || _b === void 0 ? void 0 : _b.time) && (React.createElement("span", { style: styles.timeStamp }, formatMessageTime(item.lastMessage.time)))),
+                    ((_c = item.lastMessage) === null || _c === void 0 ? void 0 : _c.message) && (React.createElement("div", { style: styles.lastMessageContainer },
+                        React.createElement("span", { style: styles.lastMessage }, item.lastMessage.message)))))));
+    };
+    return (React.createElement("div", { style: styles.containerStyle, className: "sampark-chat-container" },
+        React.createElement("div", { style: styles.leftPanel },
+            React.createElement(SamparkHeader, { isGroupActive: isGroupActive, setShowBottomSheet: setShowBottomSheet, onEventClick: setIsGroupActive, showMenuButton: false, searchTerm: searchTerm, onSearch: handleSearch }),
+            React.createElement("div", { style: styles.listContainer }, !isGroupActive ? (React.createElement("div", { style: styles.list }, sortedFilteredUsers.map(function (item) { return renderItem(item); }))) : (React.createElement("div", { style: styles.list }, sortedFilteredGroups.map(function (item) { return renderGroupItem({ item: item }); })))),
+            React.createElement(GroupBottomSheet, { setShowBottomSheet: setShowBottomSheet, setShowParticipantsList: setShowParticipantsList, setUserGroupName: setUserGroupName, setUserGroupType: setUserGroupType, showBottomSheet: showBottomSheet })),
+        React.createElement("div", { style: styles.rightPanel }, showUserList ? (React.createElement("div", { style: styles.chatContainer },
+            !isGroupActive && (React.createElement(PeerChatScreen, { handleBackPress: handleBackPress, handleSendPress: handleSendPress, participantsList: participantsList, peerUserId: peerUserId, peerUserName: peerUserName, setUserMessage: setUserMessage, showInputFeild: showInputFeild, userMessage: userMessage, userMessages: messages, userProfilePic: userProfilePic, client: client, peerRoomId: joinRoomId, userId: userId, userName: userName, onlineUsers: onlineUsers })),
+            isGroupActive && (React.createElement(GroupChatScreen, { groupName: groupName, handleGroupBackPress: handleGroupBackPress, handleSendPress: handleSendPress, participantsList: users, setShowGroupOptionBottomSheet: setShowGroupOptionBottomSheet, setShowHideParticipantScreen: setShowHideParticipantScreen, setShowParticipantsList: setShowParticipantsList, setUserMessage: setUserMessage, setViewParticipantsList: setViewParticipantsList, showInputFeild: showInputFeild, userJoinedGroupStatus: userJoinedGroupStatus, userMessage: userMessage, userMessages: messages, userName: userName, client: client, roomId: joinRoomId, userId: userId, GrouponlineUsers: onlineUsers, onHeaderClick: handleHeaderClick })))) : (React.createElement("div", { style: styles.welcomeContainer },
+            React.createElement("div", { style: styles.welcomeIcon },
+                React.createElement("i", { className: "fas fa-comments", style: {
+                        fontSize: '120px',
+                        color: '#e0e0e0'
+                    } })),
+            React.createElement("h2", { style: styles.welcomeTitle }, "Welcome to your Conversations"),
+            React.createElement("p", { style: styles.welcomeText }, "Select a chat from the list to start exploring your messages or begin a new conversation")))),
+        showSidePanel && isGroupActive && userJoinedGroupStatus === 'Active' && (React.createElement("div", { style: styles.sidePanel },
+            React.createElement(ViewParticipents, { ViewParticipants: viewParticipants, userId: userId, userName: userName, joinRoomId: joinRoomId, client: client, userJoinedGroupRole: userJoinedGroupRole, onClose: closeSidePanel, setPeerUserId: setPeerUserId, setPeerUserName: setPeerUserName, setUserProfilePic: setUserProfilePic, setIsChatInitialized: setIsChatInitialized, setShowUserList: setShowUserList, setIsGroupActive: setIsGroupActive, orgParticipantList: users, setViewParticipants: setViewParticipants, showViewParticipantList: true, setViewParticipantsList: setViewParticipantsList, setShowHideParticipantScreen: setShowHideParticipantScreen, setShowParticipantsList: setShowParticipantsList, showHeader: true, showActions: true }))),
+        showParticipantsList && isGroupActive && (React.createElement("div", { style: styles.sidePanel },
+            React.createElement("div", { style: styles.sidePanelHeader },
+                React.createElement("h3", { style: styles.sidePanelTitle }, userRemoveGroup ? 'Remove Participants' : 'Add Participants'),
+                React.createElement("button", { onClick: function () { return setShowParticipantsList(false); }, style: styles.sidePanelCloseButton },
+                    React.createElement("i", { className: "fas fa-times", style: styles.closeIcon }))),
+            React.createElement(InviteUserScreen, { allOrgMember: users, userId: userId, setParticipantsList: setParticipantsList, userRemoveGroup: userRemoveGroup, setSelectedParticipants: setSelectedParticipants, userList: participantsList, setShowParticipantsList: setShowParticipantsList }))),
+        isGroupActive && (React.createElement(GroupOptionBottomSheet, { userJoinedGroupRole: userJoinedGroupRole, showBottomSheet: showGroupOptionBottomSheet, setShowBottomSheet: setShowGroupOptionBottomSheet, setShowParticipantsList: setShowParticipantsList, setUserRemoveGroup: setUserRemoveGroup, setUserLeaveGroup: setUserLeaveGroup })),
+        React.createElement(DeleteModel, { open: showDeleteModal, onClose: function () { setShowDeleteModal(false); setGroupToDelete(null); }, onDelete: handleDeleteGroupConfirmed }),
+        showAssignAdminModal && (React.createElement("div", { style: { position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999 } },
+            React.createElement("div", { style: { background: 'white', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', minWidth: '320px', maxWidth: '90vw', padding: '24px', display: 'flex', flexDirection: 'column', alignItems: 'center' } },
+                React.createElement("div", { style: { marginBottom: '16px', width: '100%', textAlign: 'center' } },
+                    React.createElement("span", { style: { fontSize: '18px', fontWeight: 600, color: '#333' } }, "Assign New Admin")),
+                React.createElement("div", { style: { marginBottom: '24px', width: '100%', textAlign: 'center' } },
+                    React.createElement("span", { style: { fontSize: '16px', color: '#444' } }, "To leave the group, you must assign a new admin.")),
+                React.createElement("select", { value: selectedNewAdmin, onChange: function (e) { return setSelectedNewAdmin(e.target.value); }, style: { marginBottom: '16px', padding: '8px', fontSize: '15px', borderRadius: '4px', border: '1px solid #ccc' } },
+                    React.createElement("option", { value: "" }, "Select new admin"),
+                    viewParticipants.filter(function (u) { return u.user_id !== userId; }).map(function (u) { return (React.createElement("option", { key: u.user_id, value: u.user_id }, u.user_name)); })),
+                React.createElement("div", { style: { width: '100%', display: 'flex', justifyContent: 'center' } },
+                    React.createElement("button", { style: { padding: '8px 24px', borderRadius: '4px', background: '#1976d2', color: 'white', border: 'none', fontWeight: 500, fontSize: '15px', cursor: 'pointer', marginRight: '8px' }, disabled: !selectedNewAdmin }, "Assign & Leave"),
+                    React.createElement("button", { style: { padding: '8px 24px', borderRadius: '4px', background: '#aaa', color: 'white', border: 'none', fontWeight: 500, fontSize: '15px', cursor: 'pointer' }, onClick: function () { setShowAssignAdminModal(false); setUserLeaveGroup(false); setSelectedNewAdmin(""); } }, "Cancel")))))));
+};
+var styles = {
+    containerStyle: {
+        display: 'flex',
+        width: '100vw',
+        height: '100vh',
+        backgroundColor: '#f6f6f6',
+    },
+    leftPanel: {
+        width: '30vw',
+        height: '92vh',
+        backgroundColor: 'white',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        margin: '20px 0 20px 20px',
+        position: 'relative',
+        borderRadius: '8px',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        minWidth: '320px',
+        maxWidth: '480px',
+    },
+    rightPanel: {
+        flex: 1,
+        height: '92vh',
+        backgroundColor: 'white',
+        margin: '20px 20px 20px 10px',
+        borderRadius: '8px',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    sidePanel: {
+        width: '350px',
+        height: '92vh',
+        backgroundColor: 'white',
+        margin: '20px 20px 20px 0px',
+        borderRadius: '8px',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+    },
+    welcomeContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        padding: '40px',
+        textAlign: 'center',
+    },
+    welcomeIcon: {
+        marginBottom: '30px',
+    },
+    welcomeTitle: {
+        fontSize: '24px',
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: '16px',
+        margin: '0 0 16px 0',
+    },
+    welcomeText: {
+        fontSize: '16px',
+        color: '#666',
+        lineHeight: '1.5',
+        maxWidth: '400px',
+        margin: 0,
+    },
+    screenStyle: {
+        width: '30vw',
+        height: '92vh',
+        backgroundColor: 'white',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        margin: '20px 0 20px 20px',
+        position: 'relative',
+        borderRadius: '8px',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        minWidth: '320px',
+        maxWidth: '480px',
+    },
+    listContainer: {
+        flex: 1,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        padding: '8px',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+    },
+    list: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+    },
+    userItem: {
+        padding: '8px 12px',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        transition: 'background-color 0.2s',
+        backgroundColor: 'transparent',
+        borderBottom: '1px solid #f0f0f0',
+    },
+    userRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+    },
+    avatarContainer: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    avatarWrapper: {
+        position: 'relative',
+        display: 'inline-block',
+    },
+    avatar: {
+        width: '40px',
+        height: '40px',
+        borderRadius: '50%',
+        objectFit: 'cover',
+    },
+    avatarPlaceholder: {
+        width: '40px',
+        height: '40px',
+        borderRadius: '50%',
+        backgroundColor: '#007bff',
+        color: 'white',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '16px',
+        fontWeight: 'bold',
+    },
+    statusIndicator: {
+        position: 'absolute',
+        bottom: '1px',
+        right: '1px',
+        width: '10px',
+        height: '10px',
+        borderRadius: '50%',
+        border: '2px solid white',
+    },
+    textContainer: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    userNameRow: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '4px',
+    },
+    userName: {
+        fontSize: '15px',
+        fontWeight: '500',
+        color: '#333',
+    },
+    timeStamp: {
+        fontSize: '12px',
+        color: '#999',
+    },
+    lastMessageContainer: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    lastMessage: {
+        fontSize: '14px',
+        color: '#666',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    clickToStart: {
+        fontSize: '14px',
+        color: '#999',
+        fontStyle: 'italic',
+    },
+    chatContainer: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    sidePanelHeader: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '16px 20px',
+        borderBottom: '1px solid #e0e0e0',
+        backgroundColor: '#f8f9fa',
+        borderRadius: '8px 8px 0 0',
+    },
+    sidePanelTitle: {
+        margin: 0,
+        fontSize: '18px',
+        fontWeight: '600',
+        color: '#333',
+    },
+    sidePanelCloseButton: {
+        background: 'transparent',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '8px',
+        borderRadius: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.2s',
+    },
+    closeIcon: {
+        fontSize: '16px',
+        color: '#666',
+    },
+};
+export default SamparkChatScreen;