@samparkchat/sampark-web-chat 0.0.2 → 0.0.4

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

@@ -20,6 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React, { useEffect, useRef, useState } from "react";
 import GroupChatHeader from "../components/Headers/GroupChatHeader";
+import SearchHeader from "../components/Headers/SearchHeader";
 import { getProfilePicById, getUserNameById, getInitials, unifiedToEmoji } from '../services/Common';
 import { getTimeFromTimestamp, getChatDateDisplay } from '../services/DateFormat';
 import EmojiPicker from 'emoji-picker-react';
@@ -28,6 +29,8 @@ import ReactionModal from "../components/models/ReactionModal";
 import MentionList from "../components/MentionList";
 import AttachmentGroupFileSharing from "../components/AttachmentGroupFileSharing";
 import colors from "../theme/colors";
+import ThreadConversation from "../components/ThreadConversation";
+import fonts from '../theme/fonts';
 var GroupChatScreen = function (_a) {
     var participantsList = _a.participantsList, viewParticipants = _a.viewParticipants, userMessages = _a.userMessages, userJoinedGroupStatus = _a.userJoinedGroupStatus, setShowGroupOptionBottomSheet = _a.setShowGroupOptionBottomSheet, setShowParticipantsList = _a.setShowParticipantsList, handleGroupBackPress = _a.handleGroupBackPress, groupName = _a.groupName, setShowHideParticipantScreen = _a.setShowHideParticipantScreen, setViewParticipantsList = _a.setViewParticipantsList, userMessage = _a.userMessage, setUserMessage = _a.setUserMessage, handleSendPress = _a.handleSendPress, showInputFeild = _a.showInputFeild, userName = _a.userName, roomId = _a.roomId, client = _a.client, userId = _a.userId, GrouponlineUsers = _a.GrouponlineUsers, onHeaderClick = _a.onHeaderClick, handleVideoCall = _a.handleVideoCall, handleAudioCall = _a.handleAudioCall, rejoinGroupCall = _a.rejoinGroupCall, showJoinGroupCallBtn = _a.showJoinGroupCallBtn, _b = _a.showVideoCall, showVideoCall = _b === void 0 ? false : _b;
     var _c = useState(0), scrollPosition = _c[0], setScrollPosition = _c[1];
@@ -55,6 +58,9 @@ var GroupChatScreen = function (_a) {
     var _v = useState([]), mentionedUsers = _v[0], setMentionedUsers = _v[1];
     var _w = useState(false), showThreadPanel = _w[0], setShowThreadPanel = _w[1];
     var _x = useState(null), threadMessageId = _x[0], setThreadMessageId = _x[1];
+    var _y = useState(false), showImageModal = _y[0], setShowImageModal = _y[1];
+    var _z = useState(''), selectedImageUrl = _z[0], setSelectedImageUrl = _z[1];
+    var _0 = useState(false), showSearchPanel = _0[0], setShowSearchPanel = _0[1];
     console.log("group online users", GrouponlineUsers);
     var normalizeMessages = function (arr) {
         return (arr !== null && arr !== void 0 ? arr : []).map(function (m, i) {
@@ -94,7 +100,10 @@ var GroupChatScreen = function (_a) {
                         maxHeight: '300px',
                         objectFit: 'cover',
                         cursor: 'pointer'
-                    }, onClick: function () { return window.open(fullImageUrl, '_blank'); }, onError: function (e) { e.currentTarget.style.display = 'none'; } }),
+                    }, onClick: function () {
+                        setSelectedImageUrl(fullImageUrl);
+                        setShowImageModal(true);
+                    }, onError: function (e) { e.currentTarget.style.display = 'none'; } }),
                 React.createElement("div", { style: {
                         padding: '8px',
                         fontSize: '12px',
@@ -578,7 +587,7 @@ var GroupChatScreen = function (_a) {
             React.createElement("div", { style: styles.mainContainer, className: "group-chat-container" },
                 React.createElement("div", { style: styles.container },
                     React.createElement("div", { style: styles.headerContainer(scrollPosition) },
-                        React.createElement(GroupChatHeader, { userJoinedGroupStatus: userJoinedGroupStatus, setShowGroupOptionBottomSheet: setShowGroupOptionBottomSheet, setShowParticipantsList: setShowParticipantsList, onClick: handleGroupBackPress, headingStyle: styles.headingStyle, showBackButton: true, mainHeading: groupName, setShowHideParticipantScreen: setShowHideParticipantScreen, setViewParticipantsList: setViewParticipantsList, onHeaderClick: onHeaderClick, handleVideoCall: handleVideoCall, handleAudioCall: handleAudioCall, rejoinGroupCall: rejoinGroupCall, showJoinGroupCallBtn: showJoinGroupCallBtn, showVideoCall: showVideoCall })),
+                        React.createElement(GroupChatHeader, { userJoinedGroupStatus: userJoinedGroupStatus, setShowGroupOptionBottomSheet: setShowGroupOptionBottomSheet, setShowParticipantsList: setShowParticipantsList, onClick: handleGroupBackPress, headingStyle: styles.headingStyle, showBackButton: true, mainHeading: groupName, setShowHideParticipantScreen: setShowHideParticipantScreen, setViewParticipantsList: setViewParticipantsList, onHeaderClick: onHeaderClick, onSearch: function () { return setShowSearchPanel(true); }, handleVideoCall: handleVideoCall, handleAudioCall: handleAudioCall, rejoinGroupCall: rejoinGroupCall, showJoinGroupCallBtn: showJoinGroupCallBtn, showVideoCall: showVideoCall })),
                     userJoinedGroupStatus === "Active" && typingUser && (React.createElement("div", { style: styles.typingIndicator },
                         React.createElement("span", null, "".concat(typingUser, " is typing...")))),
                     React.createElement("div", { style: styles.scrollContainer, className: "scroll-container", onScroll: handleScroll, ref: scrollViewRef },
@@ -600,6 +609,32 @@ var GroupChatScreen = function (_a) {
                                 var _a;
                                 var globalIndex = messages.findIndex(function (m) { return m.messageId === item.messageId; });
                                 var groups = groupReactions(item.reactions, userId);
+                                var actionsElement = (React.createElement(GroupMessageActions, { showEmojiPicker: activeEmojiPickerMsgIdx === globalIndex, showMenu: activeMenuMsgIdx === globalIndex, onEmojiClick: function () {
+                                        if (!item.reply)
+                                            setActiveEmojiPickerMsgIdx(globalIndex);
+                                    }, onMenuClick: function () {
+                                        setActiveMenuMsgIdx(function (prev) { return (prev === globalIndex ? null : globalIndex); });
+                                        setActiveEmojiPickerMsgIdx(null);
+                                    }, onEmojiSelect: function (data) {
+                                        var _a;
+                                        if (data === null || data === void 0 ? void 0 : data.emojiId) {
+                                            console.log("Selected emoji:", data.emojiId, "type:", data.emojiType);
+                                            toggleReaction(globalIndex, data.emojiId, (_a = data.emojiType) !== null && _a !== void 0 ? _a : "unknown");
+                                        }
+                                        setActiveEmojiPickerMsgIdx(null);
+                                    }, onCloseEmojiPicker: function () { return setActiveEmojiPickerMsgIdx(null); }, onCloseMenu: function () { return setActiveMenuMsgIdx(null); }, message: item.message, position: item.user === userId ? 'left' : 'right', canEdit: item.user === userId, onEditClick: function () { return startInlineEdit(globalIndex); }, onReplyClick: function () {
+                                        var rt = {
+                                            messageId: item.messageId,
+                                            userId: item.user,
+                                            text: item.message,
+                                        };
+                                        setReplyTarget(rt);
+                                        setThreadMessageId(item.messageId);
+                                        setShowThreadPanel(true);
+                                        setTimeout(function () {
+                                            scrollToMessage(item.messageId);
+                                        }, 120);
+                                    }, inline: true }));
                                 return (React.createElement("div", { className: "message-container", key: item.messageId || index, "data-message-id": item.messageId, style: __assign(__assign({}, styles.messageContainer), (item.reply ? styles.replyContainer : {})) },
                                     !item.reply && (React.createElement("div", { style: { position: 'relative' } },
                                         getProfilePicById(allParticipantsList, item.user) ? (React.createElement("img", { src: getProfilePicById(allParticipantsList, item.user), alt: "Profile", style: styles.avatar, onError: function (e) {
@@ -622,11 +657,14 @@ var GroupChatScreen = function (_a) {
                                                 right: '14px',
                                                 border: '2px solid white'
                                             } })))),
+                                    item.user === userId ? actionsElement : null,
                                     React.createElement("div", { style: __assign(__assign({}, styles.messageContent), (item.reply ? styles.replyMessageContent : {})) },
-                                        React.createElement("div", { style: styles.personName }, getUserNameById(allParticipantsList, item.user)),
-                                        React.createElement("div", { style: styles.message }, item.messageType === 'file' && item.fileInfo
-                                            ? renderFileMessage(item.fileInfo)
-                                            : renderMessageWithMentions(item.message, userId)),
+                                        React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+                                            item.user !== userId && (React.createElement("div", { style: styles.personNameOutside }, getUserNameById(allParticipantsList, item.user))),
+                                            React.createElement("div", { style: styles.messageContentInner },
+                                                React.createElement("div", { style: styles.message }, item.messageType === 'file' && item.fileInfo
+                                                    ? renderFileMessage(item.fileInfo)
+                                                    : renderMessageWithMentions(item.message, userId)))),
                                         React.createElement("div", { style: styles.messageFooter },
                                             React.createElement("span", { style: __assign(__assign({}, styles.time), { display: 'flex', alignItems: 'center', gap: '4px' }) },
                                                 item.is_edited && (React.createElement("span", { style: {
@@ -669,7 +707,7 @@ var GroupChatScreen = function (_a) {
                                                         justifyContent: item.reply ? 'flex-end' : 'flex-start',
                                                         flexWrap: 'wrap'
                                                     } },
-                                                    gSorted.slice(0, SHOW).map(function (g) { return (React.createElement("button", { key: g.id, onClick: function (e) { e.stopPropagation(); handleChipClick(g.id, g.type, g.mine); }, title: g.type, style: chipStyle(!!g.mine) },
+                                                    gSorted.slice(0, SHOW).map(function (g) { return (React.createElement("button", { key: g.id, onClick: function (e) { e.stopPropagation(); handleChipClick(g.id, g.type, g.mine); }, "aria-label": g.type ? "".concat(g.type, " reaction") : 'reaction', style: chipStyle(!!g.mine) },
                                                         React.createElement("span", { style: { fontSize: 14 } }, unifiedToEmoji(g.id)),
                                                         React.createElement("span", null, g.count))); }),
                                                     uniqueCount > SHOW && (React.createElement("button", { onClick: function () { return openReactionModal(globalIndex, 'all'); }, style: {
@@ -684,9 +722,10 @@ var GroupChatScreen = function (_a) {
                                                             lineHeight: 1.2,
                                                             cursor: 'pointer',
                                                             boxShadow: '0 1px 2px rgba(0,0,0,0.06)'
-                                                        }, "aria-label": "More reactions", title: "More" }, "+"))));
+                                                        }, "aria-label": "More reactions" }, "+"))));
                                             })(),
                                             item.reply && (React.createElement("span", { style: styles.tickMark }, item.status === 'sent' ? '✓' : ''))),
+                                        item.user !== userId ? actionsElement : null,
                                         (function () {
                                             var replies = repliesMap.get(item.messageId);
                                             var count = (replies === null || replies === void 0 ? void 0 : replies.length) || 0;
@@ -718,33 +757,6 @@ var GroupChatScreen = function (_a) {
                                                         " ",
                                                         count === 1 ? 'Reply' : 'Replies'))));
                                         })()),
-                                    React.createElement("div", { className: "chat-message-icons", style: __assign(__assign({ position: 'absolute', top: '40%' }, (item.reply ? { right: 70 } : { left: 120 })), { display: 'flex', gap: 5, opacity: 0, pointerEvents: 'none' }) },
-                                        React.createElement(GroupMessageActions, { showEmojiPicker: activeEmojiPickerMsgIdx === globalIndex, showMenu: activeMenuMsgIdx === globalIndex, onEmojiClick: function () {
-                                                if (!item.reply)
-                                                    setActiveEmojiPickerMsgIdx(globalIndex);
-                                            }, onMenuClick: function () {
-                                                setActiveMenuMsgIdx(function (prev) { return (prev === globalIndex ? null : globalIndex); });
-                                                setActiveEmojiPickerMsgIdx(null);
-                                            }, onEmojiSelect: function (data) {
-                                                var _a;
-                                                if (data === null || data === void 0 ? void 0 : data.emojiId) {
-                                                    console.log("Selected emoji:", data.emojiId, "type:", data.emojiType);
-                                                    toggleReaction(globalIndex, data.emojiId, (_a = data.emojiType) !== null && _a !== void 0 ? _a : "unknown");
-                                                }
-                                                setActiveEmojiPickerMsgIdx(null);
-                                            }, onCloseEmojiPicker: function () { return setActiveEmojiPickerMsgIdx(null); }, onCloseMenu: function () { return setActiveMenuMsgIdx(null); }, message: item.message, position: item.reply ? 'left' : 'right', canEdit: !!item.reply, onEditClick: function () { return startInlineEdit(globalIndex); }, onReplyClick: function () {
-                                                var rt = {
-                                                    messageId: item.messageId,
-                                                    userId: item.user,
-                                                    text: item.message,
-                                                };
-                                                setReplyTarget(rt);
-                                                setThreadMessageId(item.messageId);
-                                                setShowThreadPanel(true);
-                                                setTimeout(function () {
-                                                    scrollToMessage(item.messageId);
-                                                }, 120);
-                                            } })),
                                     reactionModal.open && reactionModal.msgIdx !== null && (React.createElement(ReactionModal, { open: reactionModal.open, onClose: closeReactionModal, reactions: (_a = messages[reactionModal.msgIdx]) === null || _a === void 0 ? void 0 : _a.reactions, participants: allParticipantsList, currentUserId: userId, tab: reactionModal.tab, onTabChange: function (t) { return setReactionModal(function (s) { return (__assign(__assign({}, s), { tab: t })); }); } }))));
                             }))); }))),
                     userJoinedGroupStatus === "Left" && (React.createElement("div", { style: styles.bottomCenterMessage },
@@ -753,7 +765,7 @@ var GroupChatScreen = function (_a) {
                         React.createElement("span", { style: styles.bottomMessageText },
                             userName,
                             " was removed from the group by the admin."))),
-                    React.createElement("style", null, "\n                    .message-container:hover .chat-message-icons {\n                     opacity: 1 !important;\n                     pointer-events: auto !important;\n                     }\n                     "),
+                    React.createElement("style", null, "\n                    .message-container:hover .chat-message-icons {\n                     opacity: 1 !important;\n                     pointer-events: auto !important;\n                     transform: translateX(0) !important;\n                     }\n                     "),
                     showInputFeild && userJoinedGroupStatus === "Active" && (React.createElement("div", { style: __assign(__assign({}, styles.inputBackground), { position: 'relative' }) },
                         isEditing && (React.createElement("div", { style: {
                                 background: '#f1f1f1',
@@ -844,64 +856,43 @@ var GroupChatScreen = function (_a) {
                                 }, onClick: (userMessage === null || userMessage === void 0 ? void 0 : userMessage.trim()) ? (isEditing ? saveInlineEdit : handleSendMessage) : function () { }, disabled: !(userMessage === null || userMessage === void 0 ? void 0 : userMessage.trim()) },
                                 React.createElement("i", { className: "fas fa-paper-plane" }))))),
                     React.createElement(MentionList, { users: viewParticipants, onUserSelect: handleMentionSelect, position: mentionPosition, searchTerm: mentionSearchTerm, visible: showMentionList, onlineUsers: GrouponlineUsers })))),
-        showThreadPanel && threadMessageId && (React.createElement("div", { style: {
-                position: 'absolute',
-                right: 0,
+        React.createElement(ThreadConversation, { showThreadPanel: showThreadPanel, threadMessageId: threadMessageId, messages: messages, repliesMap: repliesMap, userId: userId, userName: userName, allParticipantsList: allParticipantsList, getUserNameById: getUserNameById, onCloseThread: function () {
+                setShowThreadPanel(false);
+                setThreadMessageId(null);
+            }, setReplyTarget: setReplyTarget }),
+        showImageModal && (React.createElement("div", { style: {
+                position: 'fixed',
                 top: 0,
-                height: '100%',
-                width: 360,
-                maxWidth: '40%',
-                background: '#ffffff',
-                borderLeft: '1px solid #e6e6e6',
-                zIndex: 1100,
-                boxShadow: '-6px 0 24px rgba(0,0,0,0.06)',
+                left: 0,
+                width: '100vw',
+                height: '100vh',
+                backgroundColor: 'rgba(0,0,0,0.8)',
                 display: 'flex',
-                flexDirection: 'column'
-            } },
-            React.createElement("div", { style: {
-                    padding: '12px 14px',
-                    borderBottom: '1px solid #f1f1f1',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between'
-                } },
-                React.createElement("div", null,
-                    React.createElement("div", { style: { fontSize: 16, fontWeight: 700 } }, "Thread"),
-                    React.createElement("div", { style: { fontSize: 12, color: '#777' } }, "Replies to message")),
-                React.createElement("button", { onClick: function () {
-                        setShowThreadPanel(false);
-                        setThreadMessageId(null);
-                        setReplyTarget(null);
-                    }, style: { background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 18 }, "aria-label": "Close thread" }, "\u2715")),
-            React.createElement("div", { style: { padding: 12, overflowY: 'auto', flex: 1 } },
-                (function () {
-                    var original = messages.find(function (m) { return m.messageId === threadMessageId; });
-                    if (!original)
-                        return React.createElement("div", { style: { color: '#999' } }, "Original message not found");
-                    return (React.createElement("div", { style: {
-                            padding: 10,
-                            borderRadius: 10,
-                            background: '#f7f9fc',
-                            marginBottom: 12
-                        } },
-                        React.createElement("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 6 } }, getUserNameById(allParticipantsList, original.user)),
-                        React.createElement("div", { style: { fontSize: 14, color: '#333' } }, original.message),
-                        React.createElement("div", { style: { fontSize: 12, color: '#888', marginTop: 8 } }, getTimeFromTimestamp && getTimeFromTimestamp(original.time))));
-                })(),
-                (repliesMap.get(threadMessageId) || []).map(function (replyMsg) { return (React.createElement("div", { key: replyMsg.messageId, style: { marginBottom: 10 } },
-                    React.createElement("div", { style: {
-                            padding: '8px 10px',
-                            borderRadius: 10,
-                            background: replyMsg.reply ? '#007bff' : '#ffffff',
-                            color: replyMsg.reply ? '#fff' : '#333',
-                            boxShadow: '0 1px 2px rgba(0,0,0,0.04)'
-                        } },
-                        React.createElement("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 } }, getUserNameById(allParticipantsList, replyMsg.user)),
-                        React.createElement("div", { style: { fontSize: 14 } }, replyMsg.message),
-                        React.createElement("div", { style: { fontSize: 11, color: '#777', marginTop: 6 } },
-                            getTimeFromTimestamp && getTimeFromTimestamp(replyMsg.time),
-                            replyMsg.is_edited && React.createElement("span", { style: { marginLeft: 8, fontStyle: 'italic' } }, "edited"))))); }),
-                (repliesMap.get(threadMessageId) || []).length === 0 && (React.createElement("div", { style: { color: '#777', marginTop: 12 } }, "No replies yet")))))));
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 10000,
+                cursor: 'pointer'
+            }, onClick: function () { return setShowImageModal(false); } },
+            React.createElement("img", { src: selectedImageUrl, alt: "Full screen image", style: {
+                    maxWidth: '90vw',
+                    maxHeight: '90vh',
+                    objectFit: 'contain'
+                }, onClick: function (e) { return e.stopPropagation(); } }),
+            React.createElement("button", { style: {
+                    position: 'absolute',
+                    top: '20px',
+                    right: '20px',
+                    backgroundColor: 'rgba(0,0,0,0.5)',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '50%',
+                    width: '40px',
+                    height: '40px',
+                    cursor: 'pointer',
+                    fontSize: '20px'
+                }, onClick: function () { return setShowImageModal(false); } }, "\u00D7"))),
+        showSearchPanel && (React.createElement("div", null,
+            React.createElement(SearchHeader, { onClose: function () { return setShowSearchPanel(false); }, context: "group", onSearch: function (q) { console.log('Group search query:', q); } })))));
 };
 var styles = {
     container: {
@@ -974,24 +965,34 @@ var styles = {
     },
     messageContent: {
         marginLeft: '6px',
-        padding: '6px',
-        backgroundColor: 'white',
-        borderRadius: '8px',
-        maxWidth: '75%',
-        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
-        position: 'relative'
+        padding: '8px 12px',
+        backgroundColor: colors.messageBackground,
+        borderRadius: '18px',
+        maxWidth: '66%',
+        boxShadow: '0 1px 3px rgba(12,28,56,0.06)',
+        color: '#2c2c2c',
+        position: 'relative',
+        wordWrap: 'break-word',
+        display: 'inline-block',
+        flex: '0 0 auto',
+    },
+    messageContentInner: {
+        padding: '0',
+        background: 'transparent',
+        maxWidth: '100%'
     },
     replyMessageContent: {
-        backgroundColor: 'white',
+        backgroundColor: colors.messageBackground,
         alignSelf: 'flex-end',
-        maxWidth: '70%',
-        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
+        maxWidth: '68%',
+        boxShadow: '0 1px 3px rgba(12,28,56,0.06)',
         marginLeft: 'auto',
+        borderRadius: '18px',
+        padding: '8px 12px',
+        display: 'inline-block',
+        flex: '0 0 auto',
     },
-    message: {
-        fontSize: '12px',
-        wordWrap: 'break-word',
-    },
+    message: __assign(__assign({}, fonts.messageitems), { fontSize: '12px', lineHeight: '1.35', wordWrap: 'break-word', letterSpacing: '0.08px' }),
     time: {
         marginTop: '2px',
         fontSize: '10px',
@@ -1003,9 +1004,11 @@ var styles = {
     },
     personName: {
         fontSize: '12px',
-        color: '#a4d0ff',
-        marginBottom: '2px',
+        color: colors.blue,
+        marginBottom: '6px',
+        fontWeight: 600,
     },
+    personNameOutside: __assign(__assign({}, fonts.content), { fontSize: '12px', color: colors.blue, marginBottom: '6px', fontWeight: 600, paddingLeft: 2 }),
     messageFooter: {
         display: 'flex',
         flexDirection: 'row',

package/sampark/sampark-chat/theme/colors.d.ts

@@ -18,6 +18,7 @@ export type ThemeColors = {
     optionHover: string;
     disabledColor: string;
     errorBorder: string;
+    messageBackground: string;
 };
 declare const colors: ThemeColors;
 export default colors;

package/sampark/sampark-chat/theme/colors.js

@@ -18,6 +18,7 @@ var colors = {
     optionHover: '#f5f7fa',
     disabledColor: '#9CA3AF',
     errorBorder: "#e04b4b",
+    messageBackground: '#ececec'
 };
 colors.headerGradient = "linear-gradient(115deg, ".concat(colors.blue, " 0%, ").concat(colors.blueLight, " 100%)");
 colors.panelsCardInset = "inset 0 2px 8px rgba(255,255,255,0.5)";

package/sampark/sampark-chat/theme/fonts.d.ts

@@ -15,5 +15,17 @@ declare const fonts: {
         letterSpacing: string;
         color: string;
     };
+    messageitems: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    TimeText: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
 };
 export default fonts;

package/sampark/sampark-chat/theme/fonts.js

@@ -1,4 +1,3 @@
-// src/theme/fonts.ts
 import "@fontsource/poppins/400.css";
 import "@fontsource/poppins/500.css";
 import "@fontsource/poppins/600.css";
@@ -39,6 +38,18 @@ var fonts = {
         lineHeight: "1.4",
         letterSpacing: "0.2px",
         color: colors.white,
+    },
+    messageitems: {
+        fontFamily: "Poppins, sans-serif",
+        fontSize: "12px",
+        fontWeight: 'normal',
+        lineHeight: "normal",
+    },
+    TimeText: {
+        fontFamily: "Poppins, sans-serif",
+        fontSize: "8px",
+        fontWeight: 'normal',
+        lineHeight: "normal",
     }
 };
 export default fonts;

package/sampark/sampark-chat/theme/icons.d.ts

@@ -116,6 +116,41 @@ export declare const CustomIcons: {
         color: string;
         size: string;
     };
+    faPlus: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faMicrophone: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faFaceSmile: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faReply: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faPenToSquare: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faCopy: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faCommentDots: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
 };
 export declare const AppIcons: {
     Peer: {
@@ -213,5 +248,40 @@ export declare const AppIcons: {
         color: string;
         size: string;
     };
+    faPlus: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faMicrophone: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faFaceSmile: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faReply: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faPenToSquare: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faCopy: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
+    faCommentDots: {
+        icon: import("@fortawesome/fontawesome-common-types").IconDefinition;
+        color: string;
+        size: string;
+    };
 };
 export default CustomIcons;

package/sampark/sampark-chat/theme/icons.js

@@ -1,4 +1,5 @@
-import { faUser, faUsers, faUserFriends, faPhone, faSearch, faPlusCircle, faGlobe, faUserLock, faShieldAlt, faVideo, faArrowDown, faArrowUp, faArrowLeft, faPhoneSlash, faUserPlus, faUserMinus, faSignOutAlt, faTrash, faChevronDown, faXmark, faBan, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faUser, faUsers, faUserFriends, faPhone, faSearch, faPlusCircle, faGlobe, faUserLock, faShieldAlt, faVideo, faArrowDown, faArrowUp, faArrowLeft, faPhoneSlash, faUserPlus, faUserMinus, faSignOutAlt, faTrash, faChevronDown, faXmark, faBan, faTimes, faMicrophone, faFaceSmile, faReply, faPenToSquare, faCopy, faCommentDots } from "@fortawesome/free-solid-svg-icons";
 import colors from "./colors";
 export var iconPalette = {
     primary: colors.blue,
@@ -30,6 +31,13 @@ export var CustomIcons = {
     BlockUser: { icon: faBan, color: iconPalette.danger, size: "16px" },
     Cancel: { icon: faXmark, color: iconPalette.white, size: "14px" },
     BackArrow: { icon: faArrowLeft, color: iconPalette.white, size: "18px" },
+    faPlus: { icon: faPlus, color: iconPalette.muted, size: "16px" },
+    faMicrophone: { icon: faMicrophone, color: iconPalette.muted, size: "16px" },
+    faFaceSmile: { icon: faFaceSmile, color: iconPalette.muted, size: "16px" },
+    faReply: { icon: faReply, color: iconPalette.muted, size: "16px" },
+    faPenToSquare: { icon: faPenToSquare, color: iconPalette.muted, size: "16px" },
+    faCopy: { icon: faCopy, color: iconPalette.muted, size: "16px" },
+    faCommentDots: { icon: faCommentDots, color: iconPalette.muted, size: "16px" },
 };
 export var AppIcons = {
     Peer: CustomIcons.faUser,
@@ -51,5 +59,12 @@ export var AppIcons = {
     DeleteChat: CustomIcons.DeleteChat,
     ChevronDown: CustomIcons.ChevronDown,
     Cancel: CustomIcons.Cancel,
+    faPlus: CustomIcons.faPlus,
+    faMicrophone: CustomIcons.faMicrophone,
+    faFaceSmile: CustomIcons.faFaceSmile,
+    faReply: CustomIcons.faReply,
+    faPenToSquare: CustomIcons.faPenToSquare,
+    faCopy: CustomIcons.faCopy,
+    faCommentDots: CustomIcons.faCommentDots
 };
 export default CustomIcons;