@samparkchat/sampark-web-chat 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samparkchat/sampark-web-chat",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "sampark/sampark-web-chat/index.js",
   "types": "sampark/sampark-web-chat/index.d.ts",
   "private": false,

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

@@ -11,6 +11,7 @@ interface GroupMessageActionsProps {
     onCloseMenu: () => void;
     message: string;
     position?: 'left' | 'right';
+    inline?: boolean;
     canEdit?: boolean;
     onEditClick?: () => void;
     onReplyClick?: () => void;

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

@@ -1,9 +1,21 @@
+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';
 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;
+    var _f = React.useState(false), copied = _f[0], setCopied = _f[1];
+    var _g = React.useState(false), isHovered = _g[0], setIsHovered = _g[1];
     var handleCopy = function () {
         if (navigator && navigator.clipboard) {
             navigator.clipboard.writeText(message);
@@ -11,22 +23,30 @@ 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) },
+    var baseStyle = {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '7px',
+        opacity: isHovered || showEmojiPicker || showMenu ? 1 : 0,
+        pointerEvents: 'auto',
+        zIndex: 10,
+        minWidth: '80px',
+        transition: 'opacity 0.15s, transform 0.12s',
+    };
+    var inlineStyle = inline ? {
+        position: 'relative',
+        marginLeft: 10,
+        top: 'auto',
+        transform: 'translateY(0)'
+    } : (_b = {
+            position: 'absolute'
+        },
+        _b[position === 'right' ? 'right' : 'left'] = '-60px',
+        _b.top = '50%',
+        _b.transform = 'translateY(-50%)',
+        _b);
+    return (React.createElement("div", { className: "chat-message-icons", style: __assign(__assign({}, baseStyle), inlineStyle), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
         React.createElement("span", { style: {
                 display: 'flex',
                 alignItems: 'center',
@@ -48,7 +68,10 @@ var GroupMessageActions = function (_a) {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                }, onClick: onEmojiClick },
+                }, onClick: function (e) {
+                    e.stopPropagation();
+                    onEmojiClick();
+                } },
                 React.createElement("i", { className: "fas fa-smile" }))),
         React.createElement("span", { style: {
                 display: 'flex',
@@ -71,10 +94,15 @@ var GroupMessageActions = function (_a) {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                }, onClick: onMenuClick },
+                }, onClick: function (e) {
+                    e.stopPropagation();
+                    onMenuClick();
+                } },
                 React.createElement("i", { className: "fas fa-ellipsis-h" }))),
-        showEmojiPicker && (React.createElement("div", { className: "emoji-picker-container", style: {
+        showEmojiPicker && (React.createElement("div", { className: "emoji-picker-container", onClick: function (e) { return e.stopPropagation(); }, style: {
                 position: 'absolute',
+                bottom: '100%',
+                marginBottom: '8px',
                 zIndex: 9999,
                 backgroundColor: 'white',
                 borderRadius: '12px',
@@ -92,11 +120,11 @@ var GroupMessageActions = function (_a) {
                 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',
+                borderRadius: '14px',
+                boxShadow: '0 8px 30px rgba(16,24,40,0.12)',
+                border: '1px solid rgba(16,24,40,0.06)',
+                minWidth: '190px',
+                padding: '8px 0',
                 display: 'flex',
                 flexDirection: 'column',
                 gap: '2px',
@@ -107,11 +135,8 @@ var GroupMessageActions = function (_a) {
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
-                    gap: '14px',
-                    padding: '12px 24px',
-                    fontSize: '16px',
-                    color: '#444',
-                    cursor: 'pointer',
+                    gap: '14px', padding: '12px 24px',
+                    fontSize: '16px', color: '#444', cursor: 'pointer',
                 }, onClick: function () {
                     onCloseMenu();
                     onReplyClick === null || onReplyClick === void 0 ? void 0 : onReplyClick();

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,7 @@ interface MessageActionsProps {
     position?: 'left' | 'right';
     canEdit?: boolean;
     onEditClick?: () => void;
-    onReplyClick?: () => void;
+    onThreadClick?: () => void;
 }
 declare const MessageActions: React.FC<MessageActionsProps>;
 export default MessageActions;

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import EmojiPicker from 'emoji-picker-react';
+import { AppIcons } from '../../theme/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 var MessageActions = 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.canEdit, canEdit = _d === void 0 ? false : _d, _e = _a.allowReact, allowReact = _e === void 0 ? true : _e, onEditClick = _a.onEditClick, onThreadClick = _a.onThreadClick;
+    var _f = React.useState(false), copied = _f[0], setCopied = _f[1];
+    var _g = React.useState(false), isHovered = _g[0], setIsHovered = _g[1];
     var handleCopy = function () {
         if (navigator && navigator.clipboard) {
             navigator.clipboard.writeText(message);
@@ -11,173 +14,173 @@ var MessageActions = 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',
+    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", { 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' ? '-64px' : '-64px',
+                _b.top = '50%',
+                _b.transform = 'translateY(-50%)',
+                _b.opacity = isHovered || showEmojiPicker || showMenu ? 1 : 0,
+                _b.pointerEvents = 'auto',
+                _b.zIndex = 10,
+                _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();
+                    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-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%',
+                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',
-                }, onClick: function () {
-                    onCloseMenu();
-                    onEditClick && onEditClick();
+                    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-pencil-alt", style: { fontSize: '18px', color: '#888' } }),
-                " Edit")),
-            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',
+                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: {
+                    position: 'absolute',
+                    bottom: '100%',
+                    marginBottom: '8px',
+                    zIndex: 9999,
+                    backgroundColor: 'white',
+                    borderRadius: '12px',
+                    boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
+                    border: '1px solid #e0e0e0',
                 } },
-                React.createElement("i", { className: "fas fa-info-circle", style: { fontSize: '18px', color: '#888' } }),
-                " Info"),
-            React.createElement("button", { style: {
-                    background: 'none',
-                    border: 'none',
-                    width: '100%',
+                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',
+                    bottom: '100%',
+                    right: position === 'right' ? '0' : 'auto',
+                    left: position === 'left' ? '0' : 'auto',
+                    marginBottom: '8px',
+                    zIndex: 9999,
+                    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',
-                    alignItems: 'center',
-                    gap: '14px',
-                    padding: '12px 24px',
-                    fontSize: '16px',
-                    color: '#444',
-                    cursor: 'pointer',
+                    flexDirection: 'column',
+                    gap: '0',
+                    animation: 'fadeInScale 0.12s ease-out'
                 } },
-                React.createElement("i", { className: "fas fa-trash", style: { fontSize: '18px', color: '#888' } }),
-                " Delete")))));
+                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();
+                        onThreadClick === null || onThreadClick === void 0 ? void 0 : onThreadClick();
+                    } },
+                    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"))))));
 };
 export default MessageActions;

package/sampark/sampark-chat/components/AttachmentFileSharing.js

@@ -35,6 +35,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React, { useRef } from 'react';
+import colors from '../theme/colors';
 var AttachmentFileSharing = function (_a) {
     var isVisible = _a.isVisible, onClose = _a.onClose, onAttachImage = _a.onAttachImage, onAttachVideo = _a.onAttachVideo, onAttachAudio = _a.onAttachAudio, onAttachFile = _a.onAttachFile, client = _a.client, roomId = _a.roomId, userId = _a.userId, userName = _a.userName, _b = _a.uploadSource, uploadSource = _b === void 0 ? 'peer_chat' : _b, onFileUpload = _a.onFileUpload;
     var imageInputRef = useRef(null);
@@ -112,7 +113,7 @@ var AttachmentFileSharing = function (_a) {
         attachmentIcon: {
             width: '32px',
             height: '32px',
-            backgroundColor: '#6c5ce7',
+            background: colors.headerGradient,
             borderRadius: '8px',
             display: 'flex',
             alignItems: 'center',

package/sampark/sampark-chat/components/Headers/ChatHeader.d.ts

@@ -11,6 +11,7 @@ type PeerChatHeaderProps = {
     onAudioCall?: () => void;
     onUserClick?: () => void;
     showVideoCall?: boolean;
+    onSearch?: () => void;
 };
 declare const PeerChatHeader: React.FC<PeerChatHeaderProps>;
 export default PeerChatHeader;

package/sampark/sampark-chat/components/Headers/ChatHeader.js

@@ -16,7 +16,7 @@ import CustomIcons from "../../theme/icons";
 import colors from "../../theme/colors";
 import fonts from "../../theme/fonts";
 var PeerChatHeader = function (_a) {
-    var userProfilePic = _a.userProfilePic, onclick = _a.onclick, _b = _a.showBackButton, showBackButton = _b === void 0 ? true : _b, mainHeading = _a.mainHeading, _c = _a.headingStyle, headingStyle = _c === void 0 ? {} : _c, isPeerOnline = _a.isPeerOnline, _d = _a.showActionButtons, showActionButtons = _d === void 0 ? true : _d, onVideoCall = _a.onVideoCall, onAudioCall = _a.onAudioCall, onUserClick = _a.onUserClick, _e = _a.showVideoCall, showVideoCall = _e === void 0 ? false : _e;
+    var userProfilePic = _a.userProfilePic, onclick = _a.onclick, _b = _a.showBackButton, showBackButton = _b === void 0 ? true : _b, mainHeading = _a.mainHeading, _c = _a.headingStyle, headingStyle = _c === void 0 ? {} : _c, isPeerOnline = _a.isPeerOnline, _d = _a.showActionButtons, showActionButtons = _d === void 0 ? true : _d, onVideoCall = _a.onVideoCall, onAudioCall = _a.onAudioCall, onUserClick = _a.onUserClick, _e = _a.showVideoCall, showVideoCall = _e === void 0 ? false : _e, onSearch = _a.onSearch;
     return (React.createElement("div", { style: styles.headerContainer },
         showBackButton && (React.createElement("button", { onClick: onclick, style: styles.backButton },
             React.createElement(FontAwesomeIcon, { icon: CustomIcons.BackArrow.icon, style: { fontSize: CustomIcons.BackArrow.size, color: CustomIcons.BackArrow.color } }))),
@@ -33,11 +33,11 @@ var PeerChatHeader = function (_a) {
                     mainHeading),
                 React.createElement("span", { style: __assign(__assign({}, styles.onlineStatus), { color: isPeerOnline ? colors.onlineColor : colors.disabledColor }) }))),
         showActionButtons && (React.createElement("div", { style: styles.actionButtons },
-            React.createElement("button", { disabled: !isPeerOnline || showVideoCall, style: __assign(__assign({}, styles.actionButton), { opacity: (!isPeerOnline || showVideoCall) ? 0.5 : 1 }), title: "Call", onClick: onAudioCall },
+            React.createElement("button", { disabled: !isPeerOnline || showVideoCall, style: __assign(__assign({}, styles.actionButton), { opacity: (!isPeerOnline || showVideoCall) ? 0.5 : 1 }), "aria-label": "Call", onClick: onAudioCall },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faPhone.icon, style: { fontSize: CustomIcons.faPhone.size, color: colors.white } })),
-            React.createElement("button", { disabled: !isPeerOnline || showVideoCall, style: __assign(__assign({}, styles.actionButton), { opacity: (!isPeerOnline || showVideoCall) ? 0.5 : 1 }), title: "Video Call", onClick: onVideoCall },
+            React.createElement("button", { disabled: !isPeerOnline || showVideoCall, style: __assign(__assign({}, styles.actionButton), { opacity: (!isPeerOnline || showVideoCall) ? 0.5 : 1 }), "aria-label": "Video Call", onClick: onVideoCall },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faVideo.icon, style: { fontSize: CustomIcons.faVideo.size, color: colors.white } })),
-            React.createElement("button", { style: styles.actionButton, title: "Search" },
+            React.createElement("button", { style: styles.actionButton, "aria-label": "Search", onClick: onSearch },
                 React.createElement(FontAwesomeIcon, { icon: CustomIcons.faSearch.icon, style: { fontSize: CustomIcons.faSearch.size, color: colors.white } }))))));
 };
 var styles = {

package/sampark/sampark-chat/components/Headers/GroupChatHeader.d.ts

@@ -8,6 +8,7 @@ type props = {
     setShowHideParticipantScreen: (value: boolean) => void;
     setViewParticipantsList: any;
     setShowGroupOptionBottomSheet: (value: boolean) => void;
+    onSearch?: () => void;
     userJoinedGroupStatus: string;
     groupType?: string;
     participantsCount?: number;

package/sampark/sampark-chat/components/Headers/GroupChatHeader.js

@@ -50,7 +50,7 @@ import InfoModal from '../../models/infoModal';
 import colors from '../../theme/colors';
 import fonts from '../../theme/fonts';
 var GroupChatHeader = function (_a) {
-    var onClick = _a.onClick, showBackButton = _a.showBackButton, mainHeading = _a.mainHeading, setShowParticipantsList = _a.setShowParticipantsList, headingStyle = _a.headingStyle, setShowHideParticipantScreen = _a.setShowHideParticipantScreen, setViewParticipantsList = _a.setViewParticipantsList, setShowGroupOptionBottomSheet = _a.setShowGroupOptionBottomSheet, userJoinedGroupStatus = _a.userJoinedGroupStatus, _b = _a.groupType, groupType = _b === void 0 ? 'public' : _b, _c = _a.participantsCount, participantsCount = _c === void 0 ? 0 : _c, onHeaderClick = _a.onHeaderClick, handleVideoCall = _a.handleVideoCall, handleAudioCall = _a.handleAudioCall, rejoinGroupCall = _a.rejoinGroupCall, _d = _a.showJoinGroupCallBtn, showJoinGroupCallBtn = _d === void 0 ? false : _d, _e = _a.showVideoCall, showVideoCall = _e === void 0 ? false : _e;
+    var onClick = _a.onClick, showBackButton = _a.showBackButton, mainHeading = _a.mainHeading, setShowParticipantsList = _a.setShowParticipantsList, headingStyle = _a.headingStyle, setShowHideParticipantScreen = _a.setShowHideParticipantScreen, setViewParticipantsList = _a.setViewParticipantsList, setShowGroupOptionBottomSheet = _a.setShowGroupOptionBottomSheet, onSearch = _a.onSearch, userJoinedGroupStatus = _a.userJoinedGroupStatus, _b = _a.groupType, groupType = _b === void 0 ? 'public' : _b, _c = _a.participantsCount, participantsCount = _c === void 0 ? 0 : _c, onHeaderClick = _a.onHeaderClick, handleVideoCall = _a.handleVideoCall, handleAudioCall = _a.handleAudioCall, rejoinGroupCall = _a.rejoinGroupCall, _d = _a.showJoinGroupCallBtn, showJoinGroupCallBtn = _d === void 0 ? false : _d, _e = _a.showVideoCall, showVideoCall = _e === void 0 ? false : _e;
     var _f = React.useState(false), showInfoModal = _f[0], setShowInfoModal = _f[1];
     var _g = React.useState(""), infoModalMessage = _g[0], setInfoModalMessage = _g[1];
     var handleOpenPress = function () {
@@ -115,6 +115,8 @@ var GroupChatHeader = function (_a) {
                     React.createElement("i", { className: "fas fa-video", style: styles.actionIcon })),
                 showJoinGroupCallBtn && React.createElement("button", { style: __assign(__assign({}, styles.actionButton), { opacity: showVideoCall ? 0.5 : 1 }), disabled: showVideoCall, onClick: rejoinGroupCall },
                     React.createElement("i", { className: "fas fa-video", style: { color: 'red', fontSize: '20px' } })),
+                React.createElement("button", { onClick: function () { return onSearch && onSearch(); }, style: styles.actionButton, "aria-label": "Search" },
+                    React.createElement("i", { className: "fas fa-search", style: styles.actionIcon })),
                 React.createElement("button", { onClick: handleOpenPress, style: styles.actionButton },
                     React.createElement("i", { className: "fas fa-ellipsis-v", style: styles.actionIcon }))))),
         React.createElement(InfoModal, { open: showInfoModal, message: infoModalMessage, onClose: function () { return setShowInfoModal(false); } })));

package/sampark/sampark-chat/components/Headers/SearchHeader.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type SearchHeaderProps = {
+    onClose: () => void;
+    onSearch?: (q: string) => void;
+    context?: 'group' | 'peer';
+};
+declare const SearchHeader: React.FC<SearchHeaderProps>;
+export default SearchHeader;