@samparkchat/sampark-web-chat 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samparkchat/sampark-web-chat",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "sampark/sampark-web-chat/index.js",
   "types": "sampark/sampark-web-chat/index.d.ts",
   "private": false,
@@ -21,6 +21,7 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "react-scripts": "5.0.1",
+    "recordrtc": "^5.6.2",
     "socket.io-client": "^4.8.0",
     "web-vitals": "^2.1.4"
   },

package/sampark/sampark-chat/App.js

@@ -15,9 +15,19 @@ function App() {
         { user_id: 'user003', user_name: 'Anuj', profile_pic: '' },
         { user_id: 'user004', user_name: 'Sachin', profile_pic: '' },
         { user_id: 'user005', user_name: 'Deepak', profile_pic: '' },
+        { user_id: 'user006', user_name: 'Raju', profile_pic: '' },
+        { user_id: 'user007', user_name: 'Ankit', profile_pic: '' },
+        { user_id: 'user008', user_name: 'Arvind', profile_pic: '' },
+        { user_id: 'user009', user_name: 'Rohan', profile_pic: '' },
+        { user_id: 'user010', user_name: 'Vishal', profile_pic: '' },
+        { user_id: 'user011', user_name: 'Vinod', profile_pic: '' },
+        { user_id: 'user012', user_name: 'Sonu', profile_pic: '' },
     ]), userList = _d[0], setUserList = _d[1];
     var appId = 'INmD4HqR1yEs6f0NRwecDZoAyc9geghk';
     var secretKey = 'ux7YMNSeFzKv6a1HA2aCDnN7Cpwlt7X1ZFiAFXiu7ZcRq8Wqb3b5agc';
+    //Staging
+    // const appId = 'FZReo0rOJX7TDH65feuZ9jysumIY9ftU';
+    // const secretKey = '1YYnT3yit6fmLpDbhKB5pooJx2QdgBo2HymZ5dMoxjLJZRY8eVBfJVK';
     var Sampark = new SamparkChat(appId, secretKey);
     var handleStartChat = function () {
         if (userId.trim() && userName.trim()) {

package/sampark/sampark-chat/components/Actions/GroupMessageActions.d.ts

@@ -11,9 +11,15 @@ interface GroupMessageActionsProps {
     onCloseMenu: () => void;
     message: string;
     position?: 'left' | 'right';
+    inline?: boolean;
     canEdit?: boolean;
     onEditClick?: () => void;
     onReplyClick?: () => void;
+    onThreadClick?: () => void;
+    allowReact?: boolean;
+    visible?: boolean;
+    canDelete?: boolean;
+    onDeleteClick?: () => void;
 }
 declare const GroupMessageActions: React.FC<GroupMessageActionsProps>;
 export default GroupMessageActions;

package/sampark/sampark-chat/components/Actions/GroupMessageActions.js

@@ -1,9 +1,25 @@
+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);
+};
 import React from 'react';
 import EmojiPicker from 'emoji-picker-react';
+import { AppIcons } from '../../theme/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 var GroupMessageActions = function (_a) {
     var _b;
-    var showEmojiPicker = _a.showEmojiPicker, showMenu = _a.showMenu, onEmojiClick = _a.onEmojiClick, onMenuClick = _a.onMenuClick, onEmojiSelect = _a.onEmojiSelect, onCloseEmojiPicker = _a.onCloseEmojiPicker, onCloseMenu = _a.onCloseMenu, message = _a.message, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.canEdit, canEdit = _d === void 0 ? false : _d, onEditClick = _a.onEditClick, onReplyClick = _a.onReplyClick;
-    var _e = React.useState(false), copied = _e[0], setCopied = _e[1];
+    var showEmojiPicker = _a.showEmojiPicker, showMenu = _a.showMenu, onEmojiClick = _a.onEmojiClick, onMenuClick = _a.onMenuClick, onEmojiSelect = _a.onEmojiSelect, onCloseEmojiPicker = _a.onCloseEmojiPicker, onCloseMenu = _a.onCloseMenu, message = _a.message, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.inline, inline = _d === void 0 ? false : _d, _e = _a.canEdit, canEdit = _e === void 0 ? false : _e, onEditClick = _a.onEditClick, onReplyClick = _a.onReplyClick, _f = _a.allowReact, allowReact = _f === void 0 ? true : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, _h = _a.canDelete, canDelete = _h === void 0 ? false : _h, onDeleteClick = _a.onDeleteClick;
+    var _j = React.useState(false), copied = _j[0], setCopied = _j[1];
+    var _k = React.useState(false), isHovered = _k[0], setIsHovered = _k[1];
+    var containerRef = React.useRef(null);
+    var _l = React.useState('above'), menuPlacement = _l[0], setMenuPlacement = _l[1];
     var handleCopy = function () {
         if (navigator && navigator.clipboard) {
             navigator.clipboard.writeText(message);
@@ -11,173 +27,199 @@ var GroupMessageActions = function (_a) {
             setTimeout(function () { return setCopied(false); }, 1200);
         }
     };
-    return (React.createElement("div", { className: "chat-message-icons", style: (_b = {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: '7px',
-                position: 'absolute'
-            },
-            _b[position === 'right' ? 'right' : 'left'] = '-60px',
-            _b.top = '50%',
-            _b.transform = 'translateY(-50%)',
-            _b.opacity = 0,
-            _b.pointerEvents = 'none',
-            _b.zIndex = 10,
-            _b.minWidth = '80px',
-            _b.transition = 'opacity 0.2s',
-            _b) },
-        React.createElement("span", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '30px',
-                height: '30px',
-                background: '#fff',
-                borderRadius: '50%',
-                boxShadow: '0 2px 8px rgba(0,0,0,0.10)',
-                border: '1px solid #eee',
-            } },
-            React.createElement("button", { style: {
-                    background: 'none',
-                    border: 'none',
-                    padding: 0,
-                    cursor: 'pointer',
-                    color: '#888',
-                    fontSize: '20px',
+    React.useEffect(function () {
+        var decidePlacement = function () {
+            try {
+                if (!containerRef.current || typeof window === 'undefined')
+                    return;
+                var rect = containerRef.current.getBoundingClientRect();
+                var spaceAbove = rect.top;
+                var spaceBelow = window.innerHeight - rect.bottom;
+                var estimatedMenuHeight = 260;
+                if (showMenu) {
+                    if (spaceAbove < estimatedMenuHeight && spaceBelow > spaceAbove) {
+                        setMenuPlacement('below');
+                    }
+                    else {
+                        setMenuPlacement('above');
+                    }
+                }
+                if (showEmojiPicker) {
+                    if (spaceAbove < estimatedMenuHeight && spaceBelow > spaceAbove) {
+                        setMenuPlacement('below');
+                    }
+                    else {
+                        setMenuPlacement('above');
+                    }
+                }
+            }
+            catch (e) {
+            }
+        };
+        decidePlacement();
+        if (showMenu || showEmojiPicker) {
+            window.addEventListener('resize', decidePlacement);
+            window.addEventListener('scroll', decidePlacement, true);
+        }
+        return function () {
+            window.removeEventListener('resize', decidePlacement);
+            window.removeEventListener('scroll', decidePlacement, true);
+        };
+    }, [showMenu, showEmojiPicker]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, "\n    @keyframes fadeInScale {\n      from { opacity: 0; transform: scale(0.98); }\n      to { opacity: 1; transform: scale(1); }\n    }\n    .message-menu-container button:hover { background: rgba(0,0,0,0.04); }\n    .message-menu-container i { width: 18px; text-align: center; }\n    .chat-message-icons span button:hover { transform: translateY(-2px); }\n    "),
+        React.createElement("div", { ref: containerRef, className: "chat-message-icons", style: (_b = {
                     display: 'flex',
+                    flexDirection: 'row',
                     alignItems: 'center',
-                    justifyContent: 'center',
-                }, onClick: onEmojiClick },
-                React.createElement("i", { className: "fas fa-smile" }))),
-        React.createElement("span", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '30px',
-                height: '30px',
-                background: '#fff',
-                borderRadius: '50%',
-                boxShadow: '0 2px 8px rgba(0,0,0,0.10)',
-                border: '1px solid #eee',
-            } },
-            React.createElement("button", { style: {
-                    background: 'none',
-                    border: 'none',
-                    padding: 0,
-                    cursor: 'pointer',
-                    color: '#888',
-                    fontSize: '20px',
+                    gap: '8px',
+                    position: 'absolute'
+                },
+                _b[position === 'right' ? 'right' : 'left'] = position === 'right' ? '-52px' : '-52px',
+                _b.top = '50%',
+                _b.transform = 'translateY(-50%)',
+                _b.opacity = visible || isHovered || showEmojiPicker || showMenu ? 1 : 0,
+                _b.pointerEvents = visible || isHovered || showEmojiPicker || showMenu ? 'auto' : 'none',
+                _b.zIndex = 10002,
+                _b.minWidth = '48px',
+                _b.transition = 'opacity 0.2s',
+                _b), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+            allowReact && (React.createElement("span", { style: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                }, onClick: onMenuClick },
-                React.createElement("i", { className: "fas fa-ellipsis-h" }))),
-        showEmojiPicker && (React.createElement("div", { className: "emoji-picker-container", style: {
-                position: 'absolute',
-                zIndex: 9999,
-                backgroundColor: 'white',
-                borderRadius: '12px',
-                boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
-                border: '1px solid #e0e0e0',
-            } },
-            React.createElement(EmojiPicker, { onEmojiClick: function (emojiData) {
-                    var _a;
-                    var emojiId = emojiData.unified; // unique
-                    var rawType = ((_a = emojiData.names) === null || _a === void 0 ? void 0 : _a[0]) || "unknown"; // no slug in type
-                    var emojiType = rawType.toLowerCase().replace(/\s+/g, "_");
-                    onEmojiSelect({ emojiId: emojiId, emojiType: emojiType });
-                }, width: 300, height: 300, previewConfig: { showPreview: false }, searchDisabled: true }))),
-        showMenu && (React.createElement("div", { className: "message-menu-container", style: {
-                position: 'absolute',
-                zIndex: 9999,
-                background: '#fff',
-                borderRadius: '16px',
-                boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
-                border: '1px solid #e0e0e0',
-                minWidth: '170px',
-                padding: '12px 0',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '2px',
-            } },
-            React.createElement("button", { style: {
-                    background: 'none',
-                    border: 'none',
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '14px',
-                    padding: '12px 24px',
-                    fontSize: '16px',
-                    color: '#444',
-                    cursor: 'pointer',
-                }, onClick: function () {
-                    onCloseMenu();
-                    onReplyClick === null || onReplyClick === void 0 ? void 0 : onReplyClick();
-                } },
-                React.createElement("i", { className: "fas fa-reply", style: { fontSize: '18px', color: '#888' } }),
-                " Reply"),
-            React.createElement("button", { style: {
-                    background: 'none',
-                    border: 'none',
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '14px',
-                    padding: '12px 24px',
-                    fontSize: '16px',
-                    color: copied ? '#007bff' : '#444',
-                    cursor: 'pointer',
-                    position: 'relative',
-                }, onClick: handleCopy },
-                React.createElement("i", { className: "fas fa-copy", style: { fontSize: '18px', color: copied ? '#007bff' : '#888' } }),
-                " ",
-                copied ? 'Copied' : 'Copy'),
-            canEdit && (React.createElement("button", { style: {
-                    background: 'none',
-                    border: 'none',
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '14px',
-                    padding: '12px 24px',
-                    fontSize: '16px',
-                    color: '#444',
-                    cursor: 'pointer',
-                }, onClick: function () {
-                    onCloseMenu();
-                    onEditClick && onEditClick();
+                    width: '30px',
+                    height: '30px',
+                    background: '#fff',
+                    borderRadius: '50%',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.10)',
+                    border: '1px solid #eee',
                 } },
-                React.createElement("i", { className: "fas fa-pencil-alt", style: { fontSize: '18px', color: '#888' } }),
-                " Edit")),
-            React.createElement("button", { style: {
-                    background: 'none',
-                    border: 'none',
-                    width: '100%',
+                React.createElement("button", { style: {
+                        background: 'none',
+                        border: 'none',
+                        padding: 0,
+                        cursor: 'pointer',
+                        color: '#888',
+                        fontSize: '20px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                        onEmojiClick();
+                    } },
+                    React.createElement("i", { className: "fas fa-smile" })))),
+            React.createElement("span", { style: {
                     display: 'flex',
                     alignItems: 'center',
-                    gap: '14px',
-                    padding: '12px 24px',
-                    fontSize: '16px',
-                    color: '#444',
-                    cursor: 'pointer',
-                } },
-                React.createElement("i", { className: "fas fa-info-circle", style: { fontSize: '18px', color: '#888' } }),
-                " Info"),
-            React.createElement("button", { style: {
-                    background: 'none',
-                    border: 'none',
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '14px',
-                    padding: '12px 24px',
-                    fontSize: '16px',
-                    color: '#444',
-                    cursor: 'pointer',
+                    justifyContent: 'center',
+                    width: '30px',
+                    height: '30px',
+                    background: '#fff',
+                    borderRadius: '50%',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.10)',
+                    border: '1px solid #eee',
                 } },
-                React.createElement("i", { className: "fas fa-trash", style: { fontSize: '18px', color: '#888' } }),
-                " Delete")))));
+                React.createElement("button", { style: {
+                        background: 'none',
+                        border: 'none',
+                        padding: 0,
+                        cursor: 'pointer',
+                        color: '#888',
+                        fontSize: '20px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, onClick: function (e) {
+                        e.stopPropagation();
+                        onMenuClick();
+                    } },
+                    React.createElement("i", { className: "fas fa-ellipsis-h" }))),
+            showEmojiPicker && allowReact && (React.createElement("div", { className: "emoji-picker-container", onClick: function (e) { return e.stopPropagation(); }, style: __assign(__assign({ position: 'absolute' }, (menuPlacement === 'above' ? { bottom: '100%', marginBottom: '8px' } : { top: '100%', marginTop: '8px' })), { zIndex: 10003, backgroundColor: 'white', borderRadius: '12px', boxShadow: '0 4px 20px rgba(0,0,0,0.15)', border: '1px solid #e0e0e0' }) },
+                React.createElement(EmojiPicker, { onEmojiClick: function (emojiData) {
+                        var _a;
+                        var emojiId = emojiData.unified; // unique
+                        var rawType = ((_a = emojiData.names) === null || _a === void 0 ? void 0 : _a[0]) || "unknown"; // no slug in type
+                        var emojiType = rawType.toLowerCase().replace(/\s+/g, "_");
+                        onEmojiSelect({ emojiId: emojiId, emojiType: emojiType });
+                    }, width: 300, height: 300, previewConfig: { showPreview: false }, searchDisabled: true }))),
+            showMenu && (React.createElement("div", { className: "message-menu-container", style: __assign(__assign({ position: 'absolute' }, (menuPlacement === 'above' ? { bottom: '100%', marginBottom: '8px' } : { top: '100%', marginTop: '8px' })), { right: position === 'right' ? '0' : 'auto', left: position === 'left' ? '0' : 'auto', zIndex: 10003, background: '#fff', borderRadius: '10px', boxShadow: '0 8px 24px rgba(0,0,0,0.10)', border: '1px solid rgba(15,23,42,0.06)', minWidth: '160px', padding: '6px 0', display: 'flex', flexDirection: 'column', gap: '0', animation: 'fadeInScale 0.12s ease-out' }) },
+                React.createElement("button", { style: {
+                        background: 'none',
+                        border: 'none',
+                        width: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px', padding: '10px 16px',
+                        fontSize: '14px', color: '#444', cursor: 'pointer',
+                    }, onClick: function () {
+                        onCloseMenu();
+                        onReplyClick === null || onReplyClick === void 0 ? void 0 : onReplyClick();
+                    } },
+                    React.createElement(FontAwesomeIcon, { icon: AppIcons.faCommentDots.icon, style: { fontSize: AppIcons.faCommentDots.size, color: AppIcons.faCommentDots.color }, "aria-hidden": true }),
+                    "Thread"),
+                React.createElement("button", { style: {
+                        background: 'none',
+                        border: 'none',
+                        width: '100%',
+                        display: 'flex',
+                        alignItems: 'center', gap: '12px',
+                        padding: '10px 16px',
+                        fontSize: '14px',
+                        color: copied ? '#007bff' : '#444',
+                        cursor: 'pointer',
+                        position: 'relative',
+                    }, onClick: handleCopy },
+                    React.createElement(FontAwesomeIcon, { icon: AppIcons.faCopy.icon, style: { fontSize: AppIcons.faCopy.size, color: AppIcons.faCopy.color }, "aria-hidden": true }),
+                    copied ? 'Copied' : 'Copy'),
+                canEdit && (React.createElement("button", { style: {
+                        background: 'none',
+                        border: 'none',
+                        width: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px',
+                        padding: '10px 16px',
+                        fontSize: '14px',
+                        color: '#444',
+                        cursor: 'pointer',
+                    }, onClick: function () {
+                        onCloseMenu();
+                        onEditClick && onEditClick();
+                    } },
+                    React.createElement(FontAwesomeIcon, { icon: AppIcons.faPenToSquare.icon, style: { fontSize: AppIcons.faPenToSquare.size, color: AppIcons.faPenToSquare.color }, "aria-hidden": true }),
+                    "Edit")),
+                React.createElement("button", { style: {
+                        background: 'none',
+                        border: 'none',
+                        width: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px',
+                        padding: '10px 16px',
+                        fontSize: '14px',
+                        color: '#444',
+                        cursor: 'pointer',
+                    } },
+                    React.createElement(FontAwesomeIcon, { icon: AppIcons.faReply.icon, style: { fontSize: AppIcons.faReply.size, color: AppIcons.faReply.color }, "aria-hidden": true }),
+                    "Reply"),
+                canDelete && (React.createElement("button", { style: {
+                        background: 'none',
+                        border: 'none',
+                        width: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '12px',
+                        padding: '10px 16px',
+                        fontSize: '14px',
+                        color: '#444',
+                        cursor: 'pointer',
+                    }, onClick: function () {
+                        onCloseMenu();
+                        onDeleteClick && onDeleteClick();
+                    } },
+                    React.createElement(FontAwesomeIcon, { icon: AppIcons.DeleteChat.icon, style: { fontSize: AppIcons.DeleteChat.size, color: AppIcons.DeleteChat.color }, "aria-hidden": true }),
+                    "Delete")))))));
 };
 export default GroupMessageActions;

package/sampark/sampark-chat/components/Actions/MessageActions.d.ts

@@ -3,6 +3,7 @@ interface MessageActionsProps {
     showEmojiPicker: boolean;
     showMenu: boolean;
     onEmojiClick: () => void;
+    allowReact?: boolean;
     onMenuClick: () => void;
     onEmojiSelect: (emoji: {
         emoji: string;
@@ -13,7 +14,9 @@ interface MessageActionsProps {
     position?: 'left' | 'right';
     canEdit?: boolean;
     onEditClick?: () => void;
-    onReplyClick?: () => void;
+    onThreadClick?: () => void;
+    canDelete?: boolean;
+    onDeleteClick?: () => void;
 }
 declare const MessageActions: React.FC<MessageActionsProps>;
 export default MessageActions;