@samparkchat/sampark-web-chat 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/sampark/sampark-chat/components/Actions/GroupMessageActions.d.ts +1 -0
- package/sampark/sampark-chat/components/Actions/GroupMessageActions.js +56 -31
- package/sampark/sampark-chat/components/Actions/MessageActions.d.ts +2 -1
- package/sampark/sampark-chat/components/Actions/MessageActions.js +161 -158
- package/sampark/sampark-chat/components/AttachmentFileSharing.js +2 -1
- package/sampark/sampark-chat/components/Headers/ChatHeader.d.ts +1 -0
- package/sampark/sampark-chat/components/Headers/ChatHeader.js +4 -4
- package/sampark/sampark-chat/components/Headers/GroupChatHeader.d.ts +1 -0
- package/sampark/sampark-chat/components/Headers/GroupChatHeader.js +3 -1
- package/sampark/sampark-chat/components/Headers/SearchHeader.d.ts +8 -0
- package/sampark/sampark-chat/components/Headers/SearchHeader.js +57 -0
- package/sampark/sampark-chat/components/ThreadConversation.d.ts +50 -0
- package/sampark/sampark-chat/components/ThreadConversation.js +293 -0
- package/sampark/sampark-chat/components/lists/ViewParticipents.d.ts +1 -0
- package/sampark/sampark-chat/components/lists/ViewParticipents.js +9 -5
- package/sampark/sampark-chat/index.d.ts +5 -0
- package/sampark/sampark-chat/index.js +5 -5
- package/sampark/sampark-chat/screens/PeerChatScreen.js +191 -172
- package/sampark/sampark-chat/screens/SamparkChatProvider.d.ts +1 -1
- package/sampark/sampark-chat/screens/SamparkchatScreen.d.ts +1 -1
- package/sampark/sampark-chat/screens/SamparkchatScreen.js +1 -1
- package/sampark/sampark-chat/screens/groupChatScreen.js +110 -107
- package/sampark/sampark-chat/theme/colors.d.ts +1 -0
- package/sampark/sampark-chat/theme/colors.js +1 -0
- package/sampark/sampark-chat/theme/fonts.d.ts +12 -0
- package/sampark/sampark-chat/theme/fonts.js +12 -1
- package/sampark/sampark-chat/theme/icons.d.ts +70 -0
- package/sampark/sampark-chat/theme/icons.js +16 -1
|
@@ -21,10 +21,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
21
21
|
import React, { useEffect, useRef, useState } from 'react';
|
|
22
22
|
import MessageActions from '../components/Actions/MessageActions';
|
|
23
23
|
import PeerChatHeader from "../components/Headers/ChatHeader";
|
|
24
|
+
import SearchHeader from '../components/Headers/SearchHeader';
|
|
24
25
|
import { getTimeFromTimestamp, getChatDateDisplay } from '../services/DateFormat';
|
|
25
26
|
import EmojiPicker from 'emoji-picker-react';
|
|
26
27
|
import { unifiedToEmoji } from '../services/Common';
|
|
27
28
|
import AttachmentFileSharing from '../components/AttachmentFileSharing';
|
|
29
|
+
import ThreadConversation from '../components/ThreadConversation';
|
|
30
|
+
import colors from '../theme/colors';
|
|
31
|
+
import fonts from '../theme/fonts';
|
|
32
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
33
|
+
import { AppIcons } from '../theme/icons';
|
|
28
34
|
var PeerChatScreen = function (_a) {
|
|
29
35
|
var participantsList = _a.participantsList, onOpenUserInfo = _a.onOpenUserInfo, onlineUsers = _a.onlineUsers, client = _a.client, peerUserId = _a.peerUserId, userProfilePic = _a.userProfilePic, handleBackPress = _a.handleBackPress, peerUserName = _a.peerUserName, userMessages = _a.userMessages, showInputFeild = _a.showInputFeild, userMessage = _a.userMessage, setUserMessage = _a.setUserMessage, handleSendPress = _a.handleSendPress, peerRoomId = _a.peerRoomId, userId = _a.userId, userName = _a.userName, handleAudioCall = _a.handleAudioCall, handleVideoCall = _a.handleVideoCall, showVideoCall = _a.showVideoCall;
|
|
30
36
|
var _b = useState(null), activeMenuMsgIdx = _b[0], setActiveMenuMsgIdx = _b[1];
|
|
@@ -35,8 +41,11 @@ var PeerChatScreen = function (_a) {
|
|
|
35
41
|
var _g = useState(null), replyTarget = _g[0], setReplyTarget = _g[1];
|
|
36
42
|
var _h = useState(null), activeEmojiPickerMsgIdx = _h[0], setActiveEmojiPickerMsgIdx = _h[1];
|
|
37
43
|
var _j = useState(false), showUserInfo = _j[0], setShowUserInfo = _j[1];
|
|
38
|
-
var _k = useState(false),
|
|
39
|
-
var _l = useState(
|
|
44
|
+
var _k = useState(false), showSearchPanel = _k[0], setShowSearchPanel = _k[1];
|
|
45
|
+
var _l = useState(false), showThreadPanel = _l[0], setShowThreadPanel = _l[1];
|
|
46
|
+
var _m = useState(null), threadMessageId = _m[0], setThreadMessageId = _m[1];
|
|
47
|
+
var _o = useState(false), showImageModal = _o[0], setShowImageModal = _o[1];
|
|
48
|
+
var _p = useState(''), selectedImageUrl = _p[0], setSelectedImageUrl = _p[1];
|
|
40
49
|
var normalizeMessages = function (arr) {
|
|
41
50
|
return (arr !== null && arr !== void 0 ? arr : []).map(function (m, i) {
|
|
42
51
|
var _a, _b, _c, _d, _e, _f;
|
|
@@ -179,7 +188,8 @@ var PeerChatScreen = function (_a) {
|
|
|
179
188
|
objectFit: 'cover',
|
|
180
189
|
cursor: 'pointer'
|
|
181
190
|
}, onClick: function () {
|
|
182
|
-
|
|
191
|
+
setSelectedImageUrl(fullImageUrl);
|
|
192
|
+
setShowImageModal(true);
|
|
183
193
|
}, onError: function (e) {
|
|
184
194
|
console.error('Failed to load image:', fileInfo.fileId);
|
|
185
195
|
e.currentTarget.style.display = 'none';
|
|
@@ -253,10 +263,10 @@ var PeerChatScreen = function (_a) {
|
|
|
253
263
|
document.removeEventListener('click', handleClickOutside);
|
|
254
264
|
};
|
|
255
265
|
}, [activeEmojiPickerMsgIdx]);
|
|
256
|
-
var
|
|
257
|
-
var
|
|
258
|
-
var
|
|
259
|
-
var
|
|
266
|
+
var _q = useState(normalizeMessages(userMessages || [])), messages = _q[0], setMessages = _q[1];
|
|
267
|
+
var _r = useState(null), typingUserPeer = _r[0], setTypingUserPeer = _r[1];
|
|
268
|
+
var _s = useState(false), showAttachmentMenu = _s[0], setShowAttachmentMenu = _s[1];
|
|
269
|
+
var _t = useState(false), showEmojiPicker = _t[0], setShowEmojiPicker = _t[1];
|
|
260
270
|
var typingTimeoutRef = useRef(null);
|
|
261
271
|
var messagesEndRef = useRef(null);
|
|
262
272
|
var scrollToBottom = function () {
|
|
@@ -388,26 +398,27 @@ var PeerChatScreen = function (_a) {
|
|
|
388
398
|
});
|
|
389
399
|
return groups;
|
|
390
400
|
};
|
|
391
|
-
return (React.createElement("div", { style: { display: 'flex', height: '100%', backgroundColor: '#f6f6f6' } },
|
|
392
|
-
React.createElement("div", { style: { display: 'flex', flexDirection: 'column', flex: showThreadPanel ? '0 0 60%' : '1', height: '100%', backgroundColor: '#f6f6f6' } },
|
|
401
|
+
return (React.createElement("div", { style: { position: 'relative', display: 'flex', height: '100%', width: '100%', boxSizing: 'border-box', backgroundColor: '#f6f6f6', overflow: 'hidden' } },
|
|
402
|
+
React.createElement("div", { style: { display: 'flex', flexDirection: 'column', flex: showThreadPanel ? '0 0 60%' : '1', height: '100%', backgroundColor: '#f6f6f6', overflowX: 'hidden' } },
|
|
393
403
|
React.createElement("div", { style: { flexShrink: 0, backgroundColor: '#fff' } },
|
|
394
|
-
React.createElement(PeerChatHeader, { onclick: handleBackPress, showVideoCall: showVideoCall, showBackButton: true, mainHeading: peerUserName, isPeerOnline: onlineUsers === null || onlineUsers === void 0 ? void 0 : onlineUsers.includes(peerUserId), onVideoCall: handleVideoCall, onAudioCall: handleAudioCall, onUserClick: onOpenUserInfo }),
|
|
404
|
+
React.createElement(PeerChatHeader, { onclick: handleBackPress, showVideoCall: showVideoCall, showBackButton: true, mainHeading: peerUserName, isPeerOnline: onlineUsers === null || onlineUsers === void 0 ? void 0 : onlineUsers.includes(peerUserId), onVideoCall: handleVideoCall, onAudioCall: handleAudioCall, onUserClick: onOpenUserInfo, onSearch: function () { return setShowSearchPanel(true); } }),
|
|
395
405
|
typingUserPeer && (React.createElement("div", { style: {
|
|
396
406
|
textAlign: 'center',
|
|
397
|
-
padding: '
|
|
398
|
-
fontSize: '
|
|
407
|
+
padding: '8px 16px',
|
|
408
|
+
fontSize: '13px',
|
|
399
409
|
color: '#666',
|
|
400
|
-
backgroundColor:
|
|
410
|
+
backgroundColor: colors.messageBackground,
|
|
411
|
+
fontFamily: fonts.content.fontFamily,
|
|
412
|
+
fontStyle: 'italic'
|
|
401
413
|
} },
|
|
402
414
|
typingUserPeer,
|
|
403
415
|
" is typing..."))),
|
|
404
416
|
React.createElement("div", { style: {
|
|
405
417
|
flex: 1,
|
|
406
418
|
overflowY: 'auto',
|
|
407
|
-
padding: '
|
|
419
|
+
padding: '8px 12px',
|
|
408
420
|
display: 'flex',
|
|
409
421
|
flexDirection: 'column',
|
|
410
|
-
gap: '8px'
|
|
411
422
|
}, className: "hide-scrollbar" },
|
|
412
423
|
messages && groupMessagesByDate(messages.filter(function (m) { return !m.replyToMessageId; })).map(function (group) { return (React.createElement(React.Fragment, { key: group.date },
|
|
413
424
|
React.createElement("div", { style: {
|
|
@@ -418,12 +429,15 @@ var PeerChatScreen = function (_a) {
|
|
|
418
429
|
React.createElement("div", { style: {
|
|
419
430
|
backgroundColor: '#e1e5e9',
|
|
420
431
|
color: '#5f6368',
|
|
421
|
-
padding: '
|
|
422
|
-
borderRadius: '
|
|
432
|
+
padding: '6px 14px',
|
|
433
|
+
borderRadius: '16px',
|
|
423
434
|
fontSize: '12px',
|
|
424
|
-
fontWeight: '500'
|
|
435
|
+
fontWeight: '500',
|
|
436
|
+
fontFamily: fonts.content.fontFamily,
|
|
437
|
+
letterSpacing: '0.1px'
|
|
425
438
|
} }, getChatDateDisplay(group.messages[0].time))),
|
|
426
439
|
group.messages.map(function (item, index) {
|
|
440
|
+
var _a, _b, _c, _d, _e, _f;
|
|
427
441
|
var globalIndex = messages.findIndex(function (m) { return m.messageId === item.messageId; });
|
|
428
442
|
var r = item.reaction;
|
|
429
443
|
return (React.createElement("div", { key: item.messageId || index, "data-message-id": item.messageId, className: "chat-message-row", style: {
|
|
@@ -431,64 +445,99 @@ var PeerChatScreen = function (_a) {
|
|
|
431
445
|
justifyContent: item.reply ? 'flex-end' : 'flex-start',
|
|
432
446
|
marginBottom: '8px',
|
|
433
447
|
position: 'relative',
|
|
448
|
+
paddingLeft: item.reply ? '5%' : '0',
|
|
449
|
+
paddingRight: item.reply ? '0' : '5%',
|
|
434
450
|
}, onMouseEnter: function (e) {
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
icons
|
|
438
|
-
|
|
451
|
+
if (e.currentTarget) {
|
|
452
|
+
var icons = e.currentTarget.querySelector('.chat-message-icons');
|
|
453
|
+
if (icons) {
|
|
454
|
+
icons.style.opacity = '1';
|
|
455
|
+
icons.style.pointerEvents = 'auto';
|
|
456
|
+
}
|
|
439
457
|
}
|
|
440
458
|
}, onMouseLeave: function (e) {
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
icons
|
|
444
|
-
|
|
459
|
+
if (e.currentTarget) {
|
|
460
|
+
var icons = e.currentTarget.querySelector('.chat-message-icons');
|
|
461
|
+
if (icons && activeEmojiPickerMsgIdx !== globalIndex && activeMenuMsgIdx !== globalIndex) {
|
|
462
|
+
icons.style.opacity = '0';
|
|
463
|
+
icons.style.pointerEvents = 'none';
|
|
464
|
+
}
|
|
445
465
|
}
|
|
446
466
|
} },
|
|
447
|
-
React.createElement("div", {
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
React.createElement("div", { style: { fontSize: '14px', lineHeight: '1.4' } }, item.messageType === 'file' && item.fileInfo ? (renderFileMessage(item.fileInfo)) : (item.message)),
|
|
458
|
-
React.createElement("div", { style: {
|
|
459
|
-
fontSize: '11px',
|
|
460
|
-
marginTop: '4px',
|
|
461
|
-
opacity: 0.7,
|
|
462
|
-
textAlign: 'right',
|
|
463
|
-
display: 'flex',
|
|
464
|
-
alignItems: 'center',
|
|
465
|
-
justifyContent: 'flex-end',
|
|
466
|
-
gap: '4px'
|
|
467
|
+
React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: item.reply ? 'flex-end' : 'flex-start', gap: 6, width: '100%' } },
|
|
468
|
+
React.createElement("div", { className: "chat-message-bubble", style: {
|
|
469
|
+
maxWidth: item.reply ? '68%' : '66%',
|
|
470
|
+
minWidth: '68px',
|
|
471
|
+
padding: '8px 12px',
|
|
472
|
+
borderRadius: '18px',
|
|
473
|
+
backgroundColor: colors.messageBackground,
|
|
474
|
+
color: '#2c2c2c',
|
|
475
|
+
wordWrap: 'break-word',
|
|
476
|
+
position: 'relative',
|
|
467
477
|
} },
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
React.createElement("button", { key: r.id, onClick: function () { if (!item.reply)
|
|
476
|
-
toggleReaction(globalIndex, r.id, r.type); }, disabled: item.reply, title: r.type, style: {
|
|
477
|
-
display: 'inline-flex',
|
|
478
|
+
React.createElement("div", { style: { fontSize: ((_a = fonts.messageitems) === null || _a === void 0 ? void 0 : _a.fontSize), lineHeight: '1.35', fontFamily: ((_b = fonts.messageitems) === null || _b === void 0 ? void 0 : _b.fontFamily) || fonts.content.fontFamily, fontWeight: (_c = fonts.messageitems) === null || _c === void 0 ? void 0 : _c.fontWeight, letterSpacing: '0.08px' } }, item.messageType === 'file' && item.fileInfo ? (renderFileMessage(item.fileInfo)) : (item.message)),
|
|
479
|
+
React.createElement("div", { style: {
|
|
480
|
+
fontSize: ((_d = fonts.TimeText) === null || _d === void 0 ? void 0 : _d.fontSize),
|
|
481
|
+
marginTop: '6px',
|
|
482
|
+
opacity: 0.75,
|
|
483
|
+
textAlign: 'right',
|
|
484
|
+
display: 'flex',
|
|
478
485
|
alignItems: 'center',
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
padding: '2px 8px',
|
|
484
|
-
borderRadius: 12,
|
|
485
|
-
fontSize: 12,
|
|
486
|
-
lineHeight: 1.2,
|
|
487
|
-
cursor: 'pointer',
|
|
488
|
-
boxShadow: '0 1px 2px rgba(0,0,0,0.06)',
|
|
486
|
+
justifyContent: 'flex-end',
|
|
487
|
+
gap: '6px',
|
|
488
|
+
fontFamily: ((_e = fonts.TimeText) === null || _e === void 0 ? void 0 : _e.fontFamily) || fonts.content.fontFamily,
|
|
489
|
+
fontWeight: (_f = fonts.TimeText) === null || _f === void 0 ? void 0 : _f.fontWeight
|
|
489
490
|
} },
|
|
490
|
-
React.createElement("span", { style: {
|
|
491
|
+
item.is_edited && (React.createElement("span", { style: {
|
|
492
|
+
fontSize: 10,
|
|
493
|
+
fontStyle: 'italic',
|
|
494
|
+
opacity: 0.6,
|
|
495
|
+
fontFamily: fonts.content.fontFamily,
|
|
496
|
+
fontWeight: 300
|
|
497
|
+
} }, "edited")),
|
|
498
|
+
getTimeFromTimestamp && getTimeFromTimestamp(item.time)),
|
|
499
|
+
r && (React.createElement("div", { style: { display: 'flex', gap: 6, marginTop: 6, justifyContent: item.reply ? 'flex-end' : 'flex-start' } },
|
|
500
|
+
React.createElement("button", { key: r.id, onClick: function () { if (!item.reply)
|
|
501
|
+
toggleReaction(globalIndex, r.id, r.type); }, disabled: item.reply, "aria-label": r.type ? "".concat(r.type, " reaction") : 'reaction', style: {
|
|
502
|
+
display: 'inline-flex',
|
|
503
|
+
alignItems: 'center',
|
|
504
|
+
gap: 6,
|
|
505
|
+
border: '1px solid ' + (item.reply ? 'rgba(255,255,255,0.35)' : colors.borderLight), background: item.reply ? 'rgba(255,255,255,0.18)' : colors.white,
|
|
506
|
+
color: '#333',
|
|
507
|
+
padding: '4px 8px',
|
|
508
|
+
borderRadius: 14,
|
|
509
|
+
fontSize: 11,
|
|
510
|
+
lineHeight: 1.2,
|
|
511
|
+
cursor: 'pointer',
|
|
512
|
+
boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
|
|
513
|
+
fontFamily: fonts.content.fontFamily,
|
|
514
|
+
transition: 'all 0.15s ease'
|
|
515
|
+
} },
|
|
516
|
+
React.createElement("span", { style: { fontSize: 14 } }, unifiedToEmoji(r.id))))),
|
|
517
|
+
React.createElement(MessageActions, { showEmojiPicker: activeEmojiPickerMsgIdx === globalIndex, showMenu: activeMenuMsgIdx === globalIndex, onEmojiClick: function () {
|
|
518
|
+
if (item.user !== userId)
|
|
519
|
+
setActiveEmojiPickerMsgIdx(globalIndex);
|
|
520
|
+
}, onMenuClick: function () { return setActiveMenuMsgIdx(globalIndex); }, onEmojiSelect: function (data) {
|
|
521
|
+
var _a;
|
|
522
|
+
if (data === null || data === void 0 ? void 0 : data.emojiId) {
|
|
523
|
+
toggleReaction(globalIndex, data.emojiId, (_a = data.emojiType) !== null && _a !== void 0 ? _a : "unknown");
|
|
524
|
+
}
|
|
525
|
+
setActiveEmojiPickerMsgIdx(null);
|
|
526
|
+
}, 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); }, allowReact: item.user !== userId, onThreadClick: function () {
|
|
527
|
+
var rt = {
|
|
528
|
+
messageId: item.messageId,
|
|
529
|
+
userId: item.user,
|
|
530
|
+
text: item.message,
|
|
531
|
+
};
|
|
532
|
+
setReplyTarget(rt);
|
|
533
|
+
setThreadMessageId(item.messageId);
|
|
534
|
+
setShowThreadPanel(true);
|
|
535
|
+
setTimeout(function () {
|
|
536
|
+
scrollToMessage(item.messageId);
|
|
537
|
+
}, 120);
|
|
538
|
+
} })),
|
|
491
539
|
(function () {
|
|
540
|
+
var _a;
|
|
492
541
|
var replyArr = repliesMap.get(item.messageId) || [];
|
|
493
542
|
var count = replyArr.length;
|
|
494
543
|
if (count === 0)
|
|
@@ -499,49 +548,34 @@ var PeerChatScreen = function (_a) {
|
|
|
499
548
|
setTimeout(function () {
|
|
500
549
|
scrollToMessage(item.messageId);
|
|
501
550
|
}, 120);
|
|
502
|
-
},
|
|
551
|
+
}, "aria-label": "".concat(count, " ").concat(count === 1 ? 'Reply' : 'Replies'), style: {
|
|
503
552
|
cursor: 'pointer',
|
|
504
|
-
marginTop:
|
|
505
|
-
display: '
|
|
553
|
+
marginTop: 6,
|
|
554
|
+
display: 'flex',
|
|
506
555
|
alignItems: 'center',
|
|
507
|
-
gap:
|
|
508
|
-
color:
|
|
509
|
-
userSelect: 'none'
|
|
556
|
+
gap: 8,
|
|
557
|
+
color: colors.muted,
|
|
558
|
+
userSelect: 'none',
|
|
559
|
+
fontFamily: fonts.content.fontFamily,
|
|
560
|
+
fontSize: 12,
|
|
561
|
+
paddingLeft: 6,
|
|
562
|
+
paddingRight: 6,
|
|
563
|
+
paddingTop: 4,
|
|
564
|
+
paddingBottom: 4,
|
|
565
|
+
borderRadius: 10,
|
|
566
|
+
background: 'transparent',
|
|
567
|
+
alignSelf: item.reply ? 'flex-end' : 'flex-start'
|
|
510
568
|
} },
|
|
511
|
-
React.createElement("svg", { width: "
|
|
512
|
-
React.createElement("path", { d: "M10 19l-7-7 7-7", stroke:
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
count === 1 ? 'Reply' : 'Replies'))));
|
|
519
|
-
})(),
|
|
520
|
-
React.createElement(MessageActions, { showEmojiPicker: activeEmojiPickerMsgIdx === index, showMenu: activeMenuMsgIdx === index, onEmojiClick: function () {
|
|
521
|
-
if (!item.reply)
|
|
522
|
-
setActiveEmojiPickerMsgIdx(globalIndex);
|
|
523
|
-
}, onMenuClick: function () { return setActiveMenuMsgIdx(globalIndex); }, onEmojiSelect: function (data) {
|
|
524
|
-
var _a;
|
|
525
|
-
if (!item.reply && (data === null || data === void 0 ? void 0 : data.emojiId)) {
|
|
526
|
-
toggleReaction(globalIndex, data.emojiId, (_a = data.emojiType) !== null && _a !== void 0 ? _a : "unknown");
|
|
527
|
-
}
|
|
528
|
-
setActiveEmojiPickerMsgIdx(null);
|
|
529
|
-
}, 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 () {
|
|
530
|
-
var rt = {
|
|
531
|
-
messageId: item.messageId,
|
|
532
|
-
userId: item.user,
|
|
533
|
-
text: item.message,
|
|
534
|
-
};
|
|
535
|
-
setReplyTarget(rt);
|
|
536
|
-
setThreadMessageId(item.messageId);
|
|
537
|
-
setShowThreadPanel(true);
|
|
538
|
-
setTimeout(function () {
|
|
539
|
-
scrollToMessage(item.messageId);
|
|
540
|
-
}, 120);
|
|
541
|
-
} }))));
|
|
569
|
+
React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { opacity: 0.9 }, "aria-hidden": true },
|
|
570
|
+
React.createElement("path", { d: "M10 19l-7-7 7-7", stroke: colors.muted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })),
|
|
571
|
+
React.createElement("div", { style: { fontFamily: (_a = fonts.messageitems) === null || _a === void 0 ? void 0 : _a.fontFamily, } },
|
|
572
|
+
count,
|
|
573
|
+
" ",
|
|
574
|
+
count === 1 ? 'Reply' : 'Replies')));
|
|
575
|
+
})())));
|
|
542
576
|
}))); }),
|
|
543
577
|
React.createElement("div", { ref: messagesEndRef })),
|
|
544
|
-
React.createElement("style", null, "\n .chat-message-row:hover .chat-message-icons {\n
|
|
578
|
+
React.createElement("style", null, "\n // .chat-message-row:hover .chat-message-icons {\n // opacity: 1 !important;\n // pointer-events: auto !important;\n // }\n \n // .chat-message-bubble:hover {\n // transform: translateY(-1px);\n // box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;\n // }\n\n // @media (max-width: 768px) {\n // .chat-message-bubble {\n // max-width: 85% !important;\n // font-size: 14px !important;\n // padding: 10px 14px !important;\n // }\n \n .chat-message-row {\n padding-left: 5% !important;\n padding-right: 5% !important;\n margin-bottom: 10px !important;\n }\n }\n\n // @media (max-width: 480px) {\n // .chat-message-bubble {\n // max-width: 90% !important;\n // font-size: 13px !important;\n // padding: 8px 12px !important;\n // }\n \n // .chat-message-row {\n // padding-left: 2% !important;\n // padding-right: 2% !important;\n // }\n }\n "),
|
|
545
579
|
showInputFeild && (React.createElement("div", { style: {
|
|
546
580
|
backgroundColor: '#f6f6f6',
|
|
547
581
|
padding: '10px',
|
|
@@ -587,16 +621,16 @@ var PeerChatScreen = function (_a) {
|
|
|
587
621
|
e.stopPropagation();
|
|
588
622
|
setShowAttachmentMenu(!showAttachmentMenu);
|
|
589
623
|
}, style: styles.inputButton },
|
|
590
|
-
React.createElement(
|
|
624
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faPlus.icon, style: { fontSize: AppIcons.faPlus.size, color: AppIcons.faPlus.color }, "aria-hidden": true })),
|
|
591
625
|
React.createElement("button", { style: styles.inputButton },
|
|
592
|
-
React.createElement(
|
|
626
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faMicrophone.icon, style: { fontSize: AppIcons.faMicrophone.size, color: AppIcons.faMicrophone.color }, "aria-hidden": true })),
|
|
593
627
|
React.createElement("button", { className: "emoji-button", onClick: function (e) {
|
|
594
628
|
e.stopPropagation();
|
|
595
629
|
setShowEmojiPicker(!showEmojiPicker);
|
|
596
630
|
setShowAttachmentMenu(false);
|
|
597
631
|
}, style: styles.inputButton },
|
|
598
|
-
React.createElement(
|
|
599
|
-
React.createElement("input", { type: "text", value: userMessage || '', onChange: function (e) { return handlePeerTextInputChange(e.target.value); }, onKeyPress: handleKeyPress, placeholder: "
|
|
632
|
+
React.createElement(FontAwesomeIcon, { icon: AppIcons.faFaceSmile.icon, style: { fontSize: AppIcons.faFaceSmile.size, color: AppIcons.faFaceSmile.color }, "aria-hidden": true })),
|
|
633
|
+
React.createElement("input", { type: "text", value: userMessage || '', onChange: function (e) { return handlePeerTextInputChange(e.target.value); }, onKeyPress: handleKeyPress, placeholder: "Type a message...", style: {
|
|
600
634
|
flex: 1,
|
|
601
635
|
height: '40px',
|
|
602
636
|
backgroundColor: 'transparent',
|
|
@@ -628,78 +662,60 @@ var PeerChatScreen = function (_a) {
|
|
|
628
662
|
setReplyTarget(null);
|
|
629
663
|
}
|
|
630
664
|
}, disabled: !(userMessage === null || userMessage === void 0 ? void 0 : userMessage.trim()), style: {
|
|
631
|
-
backgroundColor: (userMessage === null || userMessage === void 0 ? void 0 : userMessage.trim()) ?
|
|
665
|
+
backgroundColor: (userMessage === null || userMessage === void 0 ? void 0 : userMessage.trim()) ? colors.blue : colors.disabledColor,
|
|
632
666
|
border: 'none',
|
|
633
667
|
borderRadius: '50%',
|
|
634
668
|
cursor: (userMessage === null || userMessage === void 0 ? void 0 : userMessage.trim()) ? 'pointer' : 'not-allowed',
|
|
635
669
|
display: 'flex',
|
|
636
670
|
alignItems: 'center',
|
|
637
671
|
justifyContent: 'center',
|
|
638
|
-
width: '
|
|
639
|
-
height: '
|
|
640
|
-
transition: '
|
|
641
|
-
color:
|
|
642
|
-
fontSize: '16px'
|
|
672
|
+
width: '42px',
|
|
673
|
+
height: '42px',
|
|
674
|
+
transition: 'all 0.2s ease',
|
|
675
|
+
color: colors.white,
|
|
676
|
+
fontSize: '16px',
|
|
677
|
+
boxShadow: (userMessage === null || userMessage === void 0 ? void 0 : userMessage.trim()) ? '0 2px 8px rgba(0,122,255,0.3)' : 'none'
|
|
643
678
|
} },
|
|
644
679
|
React.createElement("i", { className: "fas fa-paper-plane" })))))),
|
|
645
|
-
showThreadPanel
|
|
646
|
-
|
|
647
|
-
|
|
680
|
+
React.createElement(ThreadConversation, { showThreadPanel: showThreadPanel, threadMessageId: threadMessageId, messages: messages, repliesMap: repliesMap, userId: userId, userName: userName, peerUserName: peerUserName, onCloseThread: function () {
|
|
681
|
+
setShowThreadPanel(false);
|
|
682
|
+
setThreadMessageId(null);
|
|
683
|
+
}, setReplyTarget: setReplyTarget }),
|
|
684
|
+
showSearchPanel && (React.createElement("div", null,
|
|
685
|
+
React.createElement(SearchHeader, { onClose: function () { return setShowSearchPanel(false); }, onSearch: function (q) {
|
|
686
|
+
console.log('Search query:', q);
|
|
687
|
+
} }))),
|
|
688
|
+
showImageModal && (React.createElement("div", { style: {
|
|
689
|
+
position: 'fixed',
|
|
648
690
|
top: 0,
|
|
649
|
-
|
|
650
|
-
width:
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
borderLeft: '1px solid #e6e6e6',
|
|
654
|
-
zIndex: 1100,
|
|
655
|
-
boxShadow: '-6px 0 24px rgba(0,0,0,0.06)',
|
|
691
|
+
left: 0,
|
|
692
|
+
width: '100vw',
|
|
693
|
+
height: '100vh',
|
|
694
|
+
backgroundColor: 'rgba(0,0,0,0.8)',
|
|
656
695
|
display: 'flex',
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
padding: 10,
|
|
681
|
-
borderRadius: 10,
|
|
682
|
-
background: '#f7f9fc',
|
|
683
|
-
marginBottom: 12
|
|
684
|
-
} },
|
|
685
|
-
React.createElement("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 6 } }, original.user === userId ? (userName || 'You') : (peerUserName || original.user)),
|
|
686
|
-
React.createElement("div", { style: { fontSize: 14, color: '#333' } }, original.message),
|
|
687
|
-
React.createElement("div", { style: { fontSize: 12, color: '#888', marginTop: 8 } }, getTimeFromTimestamp && getTimeFromTimestamp(original.time))));
|
|
688
|
-
})(),
|
|
689
|
-
(repliesMap.get(threadMessageId) || []).map(function (replyMsg) { return (React.createElement("div", { key: replyMsg.messageId, style: { marginBottom: 10 } },
|
|
690
|
-
React.createElement("div", { style: {
|
|
691
|
-
padding: '8px 10px',
|
|
692
|
-
borderRadius: 10,
|
|
693
|
-
background: replyMsg.reply ? '#007bff' : '#ffffff',
|
|
694
|
-
color: replyMsg.reply ? '#fff' : '#333',
|
|
695
|
-
boxShadow: '0 1px 2px rgba(0,0,0,0.04)'
|
|
696
|
-
} },
|
|
697
|
-
React.createElement("div", { style: { fontSize: 13, fontWeight: 700, marginBottom: 4 } }, replyMsg.user === userId ? (userName || 'You') : (peerUserName || replyMsg.user)),
|
|
698
|
-
React.createElement("div", { style: { fontSize: 14 } }, replyMsg.message),
|
|
699
|
-
React.createElement("div", { style: { fontSize: 11, color: '#777', marginTop: 6 } },
|
|
700
|
-
getTimeFromTimestamp && getTimeFromTimestamp(replyMsg.time),
|
|
701
|
-
replyMsg.is_edited && React.createElement("span", { style: { marginLeft: 8, fontStyle: 'italic' } }, "edited"))))); }),
|
|
702
|
-
(repliesMap.get(threadMessageId) || []).length === 0 && (React.createElement("div", { style: { color: '#777', marginTop: 12 } }, "No replies yet")))))));
|
|
696
|
+
alignItems: 'center',
|
|
697
|
+
justifyContent: 'center',
|
|
698
|
+
zIndex: 10000,
|
|
699
|
+
cursor: 'pointer'
|
|
700
|
+
}, onClick: function () { return setShowImageModal(false); } },
|
|
701
|
+
React.createElement("img", { src: selectedImageUrl, alt: "Full screen image", style: {
|
|
702
|
+
maxWidth: '90vw',
|
|
703
|
+
maxHeight: '90vh',
|
|
704
|
+
objectFit: 'contain'
|
|
705
|
+
}, onClick: function (e) { return e.stopPropagation(); } }),
|
|
706
|
+
React.createElement("button", { style: {
|
|
707
|
+
position: 'absolute',
|
|
708
|
+
top: '20px',
|
|
709
|
+
right: '20px',
|
|
710
|
+
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
711
|
+
color: 'white',
|
|
712
|
+
border: 'none',
|
|
713
|
+
borderRadius: '50%',
|
|
714
|
+
width: '40px',
|
|
715
|
+
height: '40px',
|
|
716
|
+
cursor: 'pointer',
|
|
717
|
+
fontSize: '20px'
|
|
718
|
+
}, onClick: function () { return setShowImageModal(false); } }, "\u00D7")))));
|
|
703
719
|
};
|
|
704
720
|
var styles = {
|
|
705
721
|
inputButton: {
|
|
@@ -708,7 +724,10 @@ var styles = {
|
|
|
708
724
|
cursor: 'pointer',
|
|
709
725
|
color: '#666',
|
|
710
726
|
fontSize: '18px',
|
|
711
|
-
padding: '
|
|
727
|
+
padding: '8px',
|
|
728
|
+
borderRadius: '50%',
|
|
729
|
+
transition: 'all 0.2s ease',
|
|
730
|
+
fontFamily: fonts.content.fontFamily
|
|
712
731
|
}
|
|
713
732
|
};
|
|
714
733
|
export default PeerChatScreen;
|
|
@@ -3,5 +3,5 @@ interface SamparkChatProviderProps {
|
|
|
3
3
|
children?: ReactNode;
|
|
4
4
|
client: any;
|
|
5
5
|
}
|
|
6
|
-
export declare const SamparkChatProvider: React.
|
|
6
|
+
export declare const SamparkChatProvider: ({ children, client }: SamparkChatProviderProps) => React.ReactElement;
|
|
7
7
|
export default SamparkChatProvider;
|
|
@@ -12,5 +12,5 @@ interface SamparkChatProps {
|
|
|
12
12
|
style?: React.CSSProperties;
|
|
13
13
|
textStyle?: React.CSSProperties;
|
|
14
14
|
}
|
|
15
|
-
declare const SamparkChatScreen: React.
|
|
15
|
+
declare const SamparkChatScreen: ({ client, users, userId, userName, style, textStyle }: SamparkChatProps) => React.ReactElement;
|
|
16
16
|
export default SamparkChatScreen;
|
|
@@ -2153,7 +2153,7 @@ var SamparkChatScreen = function (_a) {
|
|
|
2153
2153
|
React.createElement("h2", { style: styles.welcomeTitle }, "Welcome to your Conversations"),
|
|
2154
2154
|
React.createElement("p", { style: styles.welcomeText }, "Select a chat from the list to start exploring your messages or begin a new conversation")))),
|
|
2155
2155
|
showSidePanel && isGroupActive && userJoinedGroupStatus === 'Active' && (React.createElement("div", { style: styles.sidePanel },
|
|
2156
|
-
React.createElement(ViewParticipents, { ViewParticipants: viewParticipants, userId: userId, userName: userName, joinRoomId: joinRoomId, client: client, userJoinedGroupRole: userJoinedGroupRole, onClose: closeSidePanel, setPeerUserId: setPeerUserId, setPeerUserName: setPeerUserName, setUserProfilePic: setUserProfilePic, setIsChatInitialized: setIsChatInitialized, setShowUserList: setShowUserList, setIsGroupActive: setIsGroupActive, orgParticipantList: users, setViewParticipants: setViewParticipants, showViewParticipantList: true, setViewParticipantsList: setViewParticipantsList, setShowHideParticipantScreen: setShowHideParticipantScreen, setShowParticipantsList: setShowParticipantsList, showHeader: true, showActions: true, groupName: groupName }))),
|
|
2156
|
+
React.createElement(ViewParticipents, { ViewParticipants: viewParticipants, userId: userId, userName: userName, joinRoomId: joinRoomId, client: client, userJoinedGroupRole: userJoinedGroupRole, onClose: closeSidePanel, setPeerUserId: setPeerUserId, setPeerUserName: setPeerUserName, setUserProfilePic: setUserProfilePic, setIsChatInitialized: setIsChatInitialized, setShowUserList: setShowUserList, setIsGroupActive: setIsGroupActive, orgParticipantList: users, setViewParticipants: setViewParticipants, showViewParticipantList: true, setViewParticipantsList: setViewParticipantsList, setShowHideParticipantScreen: setShowHideParticipantScreen, setShowParticipantsList: setShowParticipantsList, showHeader: true, showActions: true, groupName: groupName, onOpenGroupOptions: function () { return setShowGroupOptionBottomSheet(true); } }))),
|
|
2157
2157
|
showParticipantsList && isGroupActive && (React.createElement("div", { style: styles.sidePanel },
|
|
2158
2158
|
React.createElement("div", { style: styles.sidePanelHeader },
|
|
2159
2159
|
React.createElement("h3", { style: fonts.buttonText }, userRemoveGroup ? 'Remove Participants' : 'Add Participants'),
|