@samparkchat/sampark-web-chat 0.0.1

package/sampark/sampark-chat/components/lists/ViewParticipents.js

@@ -0,0 +1,452 @@
+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, useState, useMemo } from 'react';
+import Header from '../Headers/ChatHeader';
+import { getInitials, getProfilePicById } from '../../services/Common';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEllipsisV, faEnvelope, faSearch, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons';
+var ViewParticipentList = function (_a) {
+    var ViewParticipants = _a.ViewParticipants, setShowHideParticipantScreen = _a.setShowHideParticipantScreen, userId = _a.userId, userName = _a.userName, setViewParticipantsList = _a.setViewParticipantsList, setShowParticipantsList = _a.setShowParticipantsList, client = _a.client, joinRoomId = _a.joinRoomId, setViewParticipants = _a.setViewParticipants, userJoinedGroupRole = _a.userJoinedGroupRole, setPeerUserId = _a.setPeerUserId, setPeerUserName = _a.setPeerUserName, setUserProfilePic = _a.setUserProfilePic, setIsChatInitialized = _a.setIsChatInitialized, setShowUserList = _a.setShowUserList, setIsGroupActive = _a.setIsGroupActive, orgParticipantList = _a.orgParticipantList, onClose = _a.onClose, _b = _a.showHeader, showHeader = _b === void 0 ? true : _b, _c = _a.showActions, showActions = _c === void 0 ? true : _c;
+    var _d = useState(''), searchQuery = _d[0], setSearchQuery = _d[1];
+    var _e = useState(false), showCancelIcon = _e[0], setShowCancelIcon = _e[1];
+    var _f = useState([]), filteredParticipants = _f[0], setFilteredParticipants = _f[1];
+    var _g = useState(new Array(ViewParticipants.length).fill(false)), showMeatballTooltips = _g[0], setShowMeatballTooltips = _g[1];
+    var _h = useState(null), chatroomid = _h[0], setChatroomId = _h[1];
+    useEffect(function () {
+        setChatroomId(chatroomid);
+        // Create global CSS rules immediately
+        var globalStyleId = 'global-participants-scrollbar-hide';
+        var globalStyle = document.getElementById(globalStyleId);
+        if (!globalStyle) {
+            globalStyle = document.createElement('style');
+            globalStyle.id = globalStyleId;
+            globalStyle.textContent = "\n                .participants-scroll,\n                .participants-scroll *,\n                div[class*=\"participants-scroll\"],\n                div[class*=\"participants-scroll\"] * {\n                    scrollbar-width: none !important;\n                    -ms-overflow-style: none !important;\n                    -webkit-overflow-scrolling: touch !important;\n                }\n                .participants-scroll::-webkit-scrollbar,\n                .participants-scroll *::-webkit-scrollbar,\n                div[class*=\"participants-scroll\"]::-webkit-scrollbar,\n                div[class*=\"participants-scroll\"] *::-webkit-scrollbar {\n                    display: none !important;\n                    width: 0px !important;\n                    height: 0px !important;\n                    background: transparent !important;\n                    appearance: none !important;\n                    -webkit-appearance: none !important;\n                }\n                .participants-scroll::-webkit-scrollbar-track,\n                .participants-scroll *::-webkit-scrollbar-track,\n                div[class*=\"participants-scroll\"]::-webkit-scrollbar-track,\n                div[class*=\"participants-scroll\"] *::-webkit-scrollbar-track {\n                    display: none !important;\n                    background: transparent !important;\n                }\n                .participants-scroll::-webkit-scrollbar-thumb,\n                .participants-scroll *::-webkit-scrollbar-thumb,\n                div[class*=\"participants-scroll\"]::-webkit-scrollbar-thumb,\n                div[class*=\"participants-scroll\"] *::-webkit-scrollbar-thumb {\n                    display: none !important;\n                    background: transparent !important;\n                }\n                .participants-scroll::-webkit-scrollbar-corner,\n                .participants-scroll *::-webkit-scrollbar-corner,\n                div[class*=\"participants-scroll\"]::-webkit-scrollbar-corner,\n                div[class*=\"participants-scroll\"] *::-webkit-scrollbar-corner {\n                    display: none !important;\n                    background: transparent !important;\n                }\n                .participants-scroll::-webkit-resizer,\n                .participants-scroll *::-webkit-resizer,\n                div[class*=\"participants-scroll\"]::-webkit-resizer,\n                div[class*=\"participants-scroll\"] *::-webkit-resizer {\n                    display: none !important;\n                }\n            ";
+            document.head.appendChild(globalStyle);
+        }
+        return function () {
+            var existingStyle = document.getElementById(globalStyleId);
+            if (existingStyle && document.head.contains(existingStyle)) {
+                document.head.removeChild(existingStyle);
+            }
+        };
+    }, []);
+    var updatedParticipants = useMemo(function () { return __spreadArray([
+        { user_id: userId, user_name: "".concat(userName, " (You)"), user_role: userJoinedGroupRole }
+    ], ViewParticipants.filter(function (participant) { return participant.user_id !== userId; }), true); }, [ViewParticipants, userId, userName]);
+    useEffect(function () {
+        setFilteredParticipants(updatedParticipants);
+    }, [updatedParticipants]);
+    var handleSearch = function (query) {
+        setSearchQuery(query);
+        setShowCancelIcon(query.length > 0);
+        if (query.trim() === '') {
+            setFilteredParticipants(updatedParticipants);
+        }
+        else {
+            var filteredList = updatedParticipants.filter(function (participant) {
+                return participant.user_name.toLowerCase().includes(query.toLowerCase());
+            });
+            setFilteredParticipants(filteredList);
+        }
+    };
+    var clearSearch = function () {
+        setSearchQuery('');
+        setShowCancelIcon(false);
+        setFilteredParticipants(updatedParticipants);
+    };
+    var toggleTooltip = function (index) {
+        var newTooltips = __spreadArray([], showMeatballTooltips, true);
+        newTooltips[index] = !newTooltips[index];
+        setShowMeatballTooltips(newTooltips);
+    };
+    var handleConnectParticipant = function (selectedUser, userProfilePic) {
+        setIsGroupActive(false);
+        setPeerUserId(selectedUser.user_id);
+        setPeerUserName(selectedUser.user_name);
+        setUserProfilePic(userProfilePic);
+        setIsChatInitialized(true);
+        setShowUserList(true);
+        setShowHideParticipantScreen(false);
+        setViewParticipantsList(false);
+        setShowParticipantsList(false);
+    };
+    var handleRemoveParticipant = function (index) {
+        var confirmRemove = window.confirm('Are you sure you want to remove this participant from the group?');
+        if (confirmRemove) {
+            handleWithdrewCall(index);
+            toggleTooltip(index);
+        }
+    };
+    var handleWithdrewCall = function (index) { return __awaiter(void 0, void 0, void 0, function () {
+        var participantToRemove, leaveGroups, updatedList, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    participantToRemove = filteredParticipants[index];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, client.groupChat.updateGroupStatusByParticipant(participantToRemove.user_id, joinRoomId, 'Removed')];
+                case 2:
+                    leaveGroups = _a.sent();
+                    if (leaveGroups) {
+                        updatedList = filteredParticipants.filter(function (_, i) { return i !== index; });
+                        setViewParticipantsList(updatedList);
+                        setViewParticipants(updatedList);
+                        setFilteredParticipants(updatedList);
+                        toggleTooltip(index);
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error('Error removing participant:', error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleBackPress = function () {
+        if (onClose) {
+            onClose();
+        }
+        else {
+            setShowHideParticipantScreen(false);
+            setViewParticipantsList(false);
+            setShowParticipantsList(false);
+        }
+    };
+    var renderItem = function (item, index) {
+        var isCurrentUser = item.user_id === userId && item.user_name.includes('(You)');
+        var userProfilePic = getProfilePicById(orgParticipantList, item.user_id);
+        return (React.createElement("div", { key: item.user_id, style: styles.participantItem },
+            userProfilePic ? (React.createElement("img", { src: userProfilePic, alt: "Profile", style: styles.participantImage })) : (React.createElement("div", { style: styles.avatarPlaceholder }, getInitials(item.user_name.split(' (You)')[0]))),
+            React.createElement("div", { style: __assign(__assign({}, styles.participantName), (isCurrentUser ? styles.currentUser : {})) },
+                item.user_name.split(' (You)')[0],
+                item.user_role == 'Admin' && React.createElement("span", { style: styles.youText },
+                    " (",
+                    item.user_role,
+                    ")"),
+                isCurrentUser && React.createElement("span", { style: styles.youText }, " (You)")),
+            React.createElement("div", { style: styles.participantCheckbox }),
+            !isCurrentUser && showActions && (React.createElement("div", { style: styles.tooltipContainer },
+                React.createElement("button", { style: styles.moreIconContainer, onClick: function () { return toggleTooltip(index); } },
+                    React.createElement(FontAwesomeIcon, { icon: faEllipsisV, style: styles.moreIcon })),
+                showMeatballTooltips[index] && (React.createElement("div", { style: styles.tooltipContent },
+                    React.createElement("div", { style: styles.tooltipBackdrop, onClick: function () { return toggleTooltip(index); } }),
+                    React.createElement("div", { style: styles.tooltipMenu },
+                        React.createElement("button", { style: styles.tooltipOption, onClick: function () { return handleConnectParticipant(item, userProfilePic); } },
+                            React.createElement("div", { style: styles.tooltipRow },
+                                React.createElement(FontAwesomeIcon, { icon: faEnvelope, style: styles.tooltipIcon }),
+                                React.createElement("span", { style: styles.tooltipText }, "Message"))),
+                        React.createElement("div", { style: styles.tooltipSeparator }),
+                        userJoinedGroupRole == "Admin" && (React.createElement("button", { style: styles.tooltipOption, onClick: function () { return handleRemoveParticipant(index); } },
+                            React.createElement("div", { style: styles.tooltipRow },
+                                React.createElement(FontAwesomeIcon, { icon: faTrash, style: styles.tooltipIcon }),
+                                React.createElement("span", { style: styles.tooltipText }, "Remove")))))))))));
+    };
+    return (React.createElement("div", { style: __assign(__assign({}, styles.viewParticipantsContainer), { WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none', msOverflowStyle: 'none' }), className: "view-participants-container" },
+        showHeader && (React.createElement(Header
+        // userProfilePic={'https://www.pixelstalk.net/wp-content/uploads/2016/07/3D-Nature-Images-Free-Download.jpg'}
+        , { 
+            // userProfilePic={'https://www.pixelstalk.net/wp-content/uploads/2016/07/3D-Nature-Images-Free-Download.jpg'}
+            onclick: handleBackPress, showBackButton: true, mainHeading: 'Participants List', headingStyle: {
+                fontWeight: 'bold',
+                color: '#414141',
+                fontSize: '20px',
+                marginTop: '15px'
+            }, showActionButtons: false })),
+        !showHeader && (React.createElement("div", { style: styles.sidePanelHeader },
+            React.createElement("div", { style: styles.sidePanelTitle },
+                React.createElement("h3", { style: styles.panelHeading }, "Participants List"),
+                React.createElement("button", { onClick: handleBackPress, style: styles.closeButton }, "\u2715")))),
+        React.createElement("div", { style: styles.container },
+            React.createElement("div", { style: styles.searchContainer },
+                React.createElement(FontAwesomeIcon, { icon: faSearch, style: styles.searchIcon }),
+                React.createElement("input", { type: "text", style: styles.searchInput, placeholder: "Search...", value: searchQuery, onChange: function (e) { return handleSearch(e.target.value); } }),
+                showCancelIcon && (React.createElement("button", { style: styles.cancelButton, onClick: clearSearch },
+                    React.createElement(FontAwesomeIcon, { icon: faTimes, style: styles.cancelIcon })))),
+            React.createElement("div", { style: styles.participantCount },
+                "Total (",
+                filteredParticipants.length,
+                ")"),
+            React.createElement("div", { style: __assign(__assign({}, styles.participantsList), { scrollbarWidth: 'none', msOverflowStyle: 'none', WebkitOverflowScrolling: 'touch' }), className: "participants-scroll" }, filteredParticipants.map(function (item, index) { return renderItem(item, index); })))));
+};
+var styles = {
+    viewParticipantsContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+        overflow: 'hidden',
+    },
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+        paddingLeft: '20px',
+        paddingRight: '20px',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    participantItem: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingRight: '10px',
+        paddingTop: '15px',
+        paddingBottom: '15px',
+        borderBottom: '0.5px solid #cccccc',
+    },
+    participantImage: {
+        width: '50px',
+        height: '50px',
+        borderRadius: '25px',
+        marginRight: '17px',
+        objectFit: 'cover',
+    },
+    avatarPlaceholder: {
+        width: '50px',
+        height: '50px',
+        borderRadius: '25px',
+        marginRight: '17px',
+        backgroundColor: '#007bff',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'white',
+        fontSize: '18px',
+        fontWeight: 'bold',
+    },
+    participantName: {
+        flex: 1,
+        fontSize: '14px',
+        color: '#414141',
+    },
+    youText: {
+        color: '#000BFF',
+    },
+    adminText: {
+        color: '#000BFF',
+        marginLeft: '10px',
+    },
+    participantCheckbox: {
+        height: '25px',
+        width: '25px',
+        borderRadius: '5px',
+        marginTop: '5px',
+    },
+    currentUser: {
+        color: '#414141',
+    },
+    moreIconContainer: {
+        padding: '5px',
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+    },
+    moreIcon: {
+        width: '24px',
+        height: '24px',
+        color: '#666',
+    },
+    tooltipContainer: {
+        position: 'relative',
+    },
+    tooltipContent: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 1000,
+    },
+    tooltipBackdrop: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'transparent',
+    },
+    tooltipMenu: {
+        position: 'absolute',
+        width: '140px',
+        padding: '5px 0',
+        backgroundColor: 'white',
+        borderRadius: '20px',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.25)',
+        zIndex: 1001,
+    },
+    tooltipOption: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: '10px 15px',
+        background: 'none',
+        border: 'none',
+        width: '100%',
+        cursor: 'pointer',
+    },
+    tooltipRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+    },
+    tooltipText: {
+        marginLeft: '10px',
+        fontSize: '13px',
+        color: 'black',
+        textAlign: 'center',
+        marginTop: '2px',
+    },
+    tooltipSeparator: {
+        height: '1px',
+        backgroundColor: '#E0E0E0',
+    },
+    peerHeadingStyle: {
+        fontWeight: 'bold',
+        color: '#414141',
+        fontSize: '20px',
+        marginTop: '15px',
+    },
+    tooltipIcon: {
+        width: '20px',
+        height: '20px',
+    },
+    participantCount: {
+        color: 'black',
+        fontSize: '16px',
+        fontWeight: '500',
+        marginTop: '10px',
+        marginBottom: '10px',
+        textAlign: 'center',
+    },
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: '40px',
+        border: '1px solid #cccccc',
+        borderRadius: '8px',
+        padding: '0 10px',
+        marginTop: '20px',
+        marginBottom: '15px',
+    },
+    searchInput: {
+        flex: 1,
+        marginLeft: '5px',
+        border: 'none',
+        outline: 'none',
+        fontSize: '14px',
+    },
+    searchIcon: {
+        width: '20px',
+        height: '20px',
+        color: '#666',
+    },
+    cancelButton: {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '0',
+        marginLeft: '10px',
+    },
+    cancelIcon: {
+        width: '20px',
+        height: '20px',
+        color: '#666',
+    },
+    participantsList: {
+        marginBottom: '10px',
+        marginTop: '-15px',
+        paddingTop: '15px',
+        maxHeight: 'calc(100vh - 200px)',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+        WebkitOverflowScrolling: 'touch',
+    },
+    sidePanelHeader: {
+        padding: '16px 20px',
+        borderBottom: '1px solid #e0e0e0',
+        backgroundColor: '#f8f9fa',
+    },
+    sidePanelTitle: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    panelHeading: {
+        margin: '0',
+        fontSize: '18px',
+        fontWeight: 'bold',
+        color: '#414141',
+    },
+    closeButton: {
+        background: 'none',
+        border: 'none',
+        fontSize: '18px',
+        cursor: 'pointer',
+        padding: '4px',
+        borderRadius: '4px',
+        color: '#666',
+    },
+};
+export default ViewParticipentList;

package/sampark/sampark-chat/index.d.ts

@@ -0,0 +1,5 @@
+export { default as SamparkChatScreen } from './screens/SamparkchatScreen';
+export { default as SamparkChatProvider } from './screens/SamparkChatProvider';
+export { PeerChat } from "./sdk/client/PeerChat";
+export { GroupChat } from "./sdk/client/Groupchat";
+export { SamparkChat } from "./sdk/client/SamparkChat";

package/sampark/sampark-chat/index.js

@@ -0,0 +1,17 @@
+// import React from 'react';
+// import ReactDOM from 'react-dom/client';
+// import './index.css';
+// import App from './App';
+// import reportWebVitals from './reportWebVitals';
+// const root = ReactDOM.createRoot(
+//   document.getElementById('root') as HTMLElement
+// );
+// root.render(
+//   React.createElement(React.StrictMode, null, React.createElement(App))
+// );
+// reportWebVitals();
+export { default as SamparkChatScreen } from './screens/SamparkchatScreen';
+export { default as SamparkChatProvider } from './screens/SamparkChatProvider';
+export { PeerChat } from "./sdk/client/PeerChat";
+export { GroupChat } from "./sdk/client/Groupchat";
+export { SamparkChat } from "./sdk/client/SamparkChat";

package/sampark/sampark-chat/models/deleteModel.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface DeleteModelProps {
+    open: boolean;
+    onClose: () => void;
+    onDelete: () => void;
+}
+declare const DeleteModel: React.FC<DeleteModelProps>;
+export default DeleteModel;

package/sampark/sampark-chat/models/deleteModel.js

@@ -0,0 +1,63 @@
+import React from "react";
+var DeleteModel = function (_a) {
+    var open = _a.open, onClose = _a.onClose, onDelete = _a.onDelete;
+    if (!open)
+        return null;
+    return (React.createElement("div", { style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100vw",
+            height: "100vh",
+            background: "rgba(0,0,0,0.2)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 9999
+        } },
+        React.createElement("div", { style: {
+                background: "#fff",
+                borderRadius: 20,
+                padding: 32,
+                minWidth: 340,
+                boxShadow: "0 2px 16px rgba(0,0,0,0.15)",
+                textAlign: "center"
+            } },
+            React.createElement("div", { style: { marginBottom: 24 } },
+                React.createElement("div", { style: {
+                        background: "#f5f5f5",
+                        borderRadius: "50%",
+                        width: 100,
+                        height: 100,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        margin: "0 auto"
+                    } },
+                    React.createElement("i", { className: "fas fa-trash", style: { color: "#d32f2f", fontSize: 48 } }))),
+            React.createElement("h2", { style: { margin: "16px 0 8px 0", fontWeight: 600 } }, "Delete Conversation?"),
+            React.createElement("div", { style: { color: "#666", marginBottom: 24 } },
+                "Would you like to delete this conversation?",
+                React.createElement("br", null),
+                "This conversation will be deleted from all of your devices."),
+            React.createElement("div", { style: { display: "flex", justifyContent: "center", gap: 16 } },
+                React.createElement("button", { onClick: onClose, style: {
+                        background: "#fff",
+                        color: "#333",
+                        border: "1px solid #ddd",
+                        borderRadius: 8,
+                        padding: "10px 32px",
+                        fontWeight: 500,
+                        cursor: "pointer"
+                    } }, "Cancel"),
+                React.createElement("button", { onClick: onDelete, style: {
+                        background: "#d32f2f",
+                        color: "#fff",
+                        border: "none",
+                        borderRadius: 8,
+                        padding: "10px 32px",
+                        fontWeight: 500,
+                        cursor: "pointer"
+                    } }, "Delete")))));
+};
+export default DeleteModel;

package/sampark/sampark-chat/models/infoModal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface InfoModalProps {
+    open: boolean;
+    message: string;
+    onClose: () => void;
+}
+declare const InfoModal: React.FC<InfoModalProps>;
+export default InfoModal;

package/sampark/sampark-chat/models/infoModal.js

@@ -0,0 +1,75 @@
+import React from 'react';
+var InfoModal = function (_a) {
+    var open = _a.open, message = _a.message, onClose = _a.onClose;
+    if (!open)
+        return null;
+    return (React.createElement("div", { style: styles.overlay },
+        React.createElement("div", { style: styles.modal },
+            React.createElement("div", { style: styles.header },
+                React.createElement("span", { style: styles.title }, "Information")),
+            React.createElement("div", { style: styles.body },
+                React.createElement("span", { style: styles.message }, message)),
+            React.createElement("div", { style: styles.footer },
+                React.createElement("button", { style: styles.button, onClick: onClose }, "OK")))));
+};
+var styles = {
+    overlay: {
+        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,
+    },
+    modal: {
+        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',
+    },
+    header: {
+        marginBottom: '16px',
+        width: '100%',
+        textAlign: 'center',
+    },
+    title: {
+        fontSize: '18px',
+        fontWeight: 600,
+        color: '#333',
+    },
+    body: {
+        marginBottom: '24px',
+        width: '100%',
+        textAlign: 'center',
+    },
+    message: {
+        fontSize: '16px',
+        color: '#444',
+    },
+    footer: {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+    button: {
+        padding: '8px 24px',
+        borderRadius: '4px',
+        background: '#1976d2',
+        color: 'white',
+        border: 'none',
+        fontWeight: 500,
+        fontSize: '15px',
+        cursor: 'pointer',
+        boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
+    },
+};
+export default InfoModal;

package/sampark/sampark-chat/reportWebVitals.d.ts

@@ -0,0 +1,3 @@
+import { ReportHandler } from 'web-vitals';
+declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
+export default reportWebVitals;

package/sampark/sampark-chat/reportWebVitals.js

@@ -0,0 +1,13 @@
+var reportWebVitals = function (onPerfEntry) {
+    if (onPerfEntry && onPerfEntry instanceof Function) {
+        import('web-vitals').then(function (_a) {
+            var getCLS = _a.getCLS, getFID = _a.getFID, getFCP = _a.getFCP, getLCP = _a.getLCP, getTTFB = _a.getTTFB;
+            getCLS(onPerfEntry);
+            getFID(onPerfEntry);
+            getFCP(onPerfEntry);
+            getLCP(onPerfEntry);
+            getTTFB(onPerfEntry);
+        });
+    }
+};
+export default reportWebVitals;