beem-component 2.1.23 → 2.1.26
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/dist/components/ChatComponents/ChatBody/CallLog.js +221 -0
- package/dist/components/ChatComponents/ChatBody/chatBody.js +16 -3
- package/package.json +2 -1
- package/src/App.js +58 -9
- package/src/lib/components/ChatComponents/ChatBody/CallLog.js +238 -0
- package/src/lib/components/ChatComponents/ChatBody/chatBody.js +13 -1
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.CallPill = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _iconsMaterial = require("@mui/icons-material");
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _dateFns = require("date-fns");
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
// // CallPill.jsx
|
|
13
|
+
// import React from 'react';
|
|
14
|
+
// import styled from 'styled-components';
|
|
15
|
+
// import PhoneIcon from '@mui/icons-material/Phone';
|
|
16
|
+
|
|
17
|
+
// export const CallPill = ({ message, icon: Icon = PhoneIcon }) => {
|
|
18
|
+
// if (!message) return null; // safety check
|
|
19
|
+
// const formatDuration = (seconds) => {
|
|
20
|
+
// const mins = Math.floor(seconds / 60);
|
|
21
|
+
// const secs = seconds % 60;
|
|
22
|
+
|
|
23
|
+
// const minsPart = mins ? `${mins} min${mins > 1 ? 's' : ''}` : '';
|
|
24
|
+
// const secsPart = secs ? `${secs}s` : '';
|
|
25
|
+
|
|
26
|
+
// return [minsPart, secsPart].filter(Boolean).join(' ');
|
|
27
|
+
// };
|
|
28
|
+
|
|
29
|
+
// console.log(message);
|
|
30
|
+
// console.log('SSSSS');
|
|
31
|
+
// const label = `${message.type} • ${message.status}`;
|
|
32
|
+
// const duration = formatDuration(message.talk_duration);
|
|
33
|
+
// console.log(`${label} • ${duration}`);
|
|
34
|
+
// return (
|
|
35
|
+
// <SessionTimelineWrapper>
|
|
36
|
+
// <Container>
|
|
37
|
+
// <IconWrapper>
|
|
38
|
+
// <Icon fontSize="small" />
|
|
39
|
+
// </IconWrapper>
|
|
40
|
+
// <Text>
|
|
41
|
+
// {label} • {duration}
|
|
42
|
+
// </Text>
|
|
43
|
+
// </Container>
|
|
44
|
+
// </SessionTimelineWrapper>
|
|
45
|
+
// );
|
|
46
|
+
// };
|
|
47
|
+
// const SessionTimelineWrapper = styled.div`
|
|
48
|
+
// display: flex;
|
|
49
|
+
// flex-direction: row;
|
|
50
|
+
// justify-content: center;
|
|
51
|
+
// align-items: center;
|
|
52
|
+
// text-align: center;
|
|
53
|
+
// margin-bottom: 0.5rem;
|
|
54
|
+
// margin-top: 0.5rem;
|
|
55
|
+
// `;
|
|
56
|
+
// const Container = styled.div`
|
|
57
|
+
// display: flex;
|
|
58
|
+
// flex-direction: row;
|
|
59
|
+
// justify-content: center;
|
|
60
|
+
// align-items: center;
|
|
61
|
+
// text-align: center;
|
|
62
|
+
// /* display: inline-flex;
|
|
63
|
+
// justify-content: center;
|
|
64
|
+
// align-items: center; */
|
|
65
|
+
// gap: 6px;
|
|
66
|
+
// background: #f4f5f7;
|
|
67
|
+
// border-radius: 999px;
|
|
68
|
+
// padding: 6px 14px;
|
|
69
|
+
// font-size: 14px;
|
|
70
|
+
// color: #4a4a4a;
|
|
71
|
+
// border: 1px solid #e2e2e2;
|
|
72
|
+
// max-width: fit-content;
|
|
73
|
+
// white-space: nowrap;
|
|
74
|
+
|
|
75
|
+
// @media (max-width: 480px) {
|
|
76
|
+
// font-size: 12px;
|
|
77
|
+
// padding: 5px 10px;
|
|
78
|
+
// }
|
|
79
|
+
// `;
|
|
80
|
+
|
|
81
|
+
// const IconWrapper = styled.div`
|
|
82
|
+
// display: flex;
|
|
83
|
+
// align-items: center;
|
|
84
|
+
// `;
|
|
85
|
+
|
|
86
|
+
// const Text = styled.span`
|
|
87
|
+
// display: inline-block;
|
|
88
|
+
// overflow: hidden;
|
|
89
|
+
// text-overflow: ellipsis;
|
|
90
|
+
// `;
|
|
91
|
+
|
|
92
|
+
// // import PhoneIcon from '@mui/icons-material/Phone';
|
|
93
|
+
|
|
94
|
+
// // export default {
|
|
95
|
+
// // title: 'Components/CallPill',
|
|
96
|
+
// // component: CallPill,
|
|
97
|
+
// // argTypes: {
|
|
98
|
+
// // icon: { control: false },
|
|
99
|
+
// // },
|
|
100
|
+
// // };
|
|
101
|
+
|
|
102
|
+
// // const Template = (args) => <CallPill {...args} />;
|
|
103
|
+
|
|
104
|
+
// // export const SampleNoAnswer = Template.bind({});
|
|
105
|
+
// // SampleNoAnswer.args = {
|
|
106
|
+
// // call: {
|
|
107
|
+
// // call_id: '1764099020.52',
|
|
108
|
+
// // time_start: '2025-11-25 22:30:20',
|
|
109
|
+
// // call_from: '004',
|
|
110
|
+
// // call_to: '0782270052',
|
|
111
|
+
// // call_duration: 2,
|
|
112
|
+
// // talk_duration: 0,
|
|
113
|
+
// // src_trunk_name: '',
|
|
114
|
+
// // dst_trunk_name: 'drtest3cx',
|
|
115
|
+
// // pin_code: '',
|
|
116
|
+
// // status: 'NO ANSWER',
|
|
117
|
+
// // type: 'Outbound',
|
|
118
|
+
// // recording: '',
|
|
119
|
+
// // did_number: '',
|
|
120
|
+
// // did_name: '',
|
|
121
|
+
// // agent_ring_time: 0,
|
|
122
|
+
// // uid: '202511252230209719F',
|
|
123
|
+
// // call_note_id: '20251125223020-33142',
|
|
124
|
+
// // enb_call_note: 16,
|
|
125
|
+
// // },
|
|
126
|
+
// // icon: PhoneIcon,
|
|
127
|
+
// // };
|
|
128
|
+
|
|
129
|
+
// // export const SampleAnswered = Template.bind({});
|
|
130
|
+
// // SampleAnswered.args = {
|
|
131
|
+
// // call: {
|
|
132
|
+
// // call_id: '1764099020.52',
|
|
133
|
+
// // time_start: '2025-11-25 22:30:20',
|
|
134
|
+
// // call_from: '004',
|
|
135
|
+
// // call_to: '0782270052',
|
|
136
|
+
// // call_duration: 2,
|
|
137
|
+
// // talk_duration: 7,
|
|
138
|
+
// // src_trunk_name: '',
|
|
139
|
+
// // dst_trunk_name: 'drtest3cx',
|
|
140
|
+
// // pin_code: '',
|
|
141
|
+
// // status: 'ANSWERED',
|
|
142
|
+
// // type: 'Outbound',
|
|
143
|
+
// // recording: '',
|
|
144
|
+
// // did_number: '',
|
|
145
|
+
// // did_name: '',
|
|
146
|
+
// // agent_ring_time: 0,
|
|
147
|
+
// // uid: '202511252230209719F',
|
|
148
|
+
// // call_note_id: '20251125223020-33142',
|
|
149
|
+
// // enb_call_note: 16,
|
|
150
|
+
// // },
|
|
151
|
+
// // icon: PhoneIcon,
|
|
152
|
+
// // };
|
|
153
|
+
|
|
154
|
+
const SessionTimelineWrapper = _styledComponents.default.div.withConfig({
|
|
155
|
+
displayName: "CallLog__SessionTimelineWrapper"
|
|
156
|
+
})(["display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;margin-bottom:0.5rem;margin-top:0.5rem;"]);
|
|
157
|
+
const Container = _styledComponents.default.div.withConfig({
|
|
158
|
+
displayName: "CallLog__Container"
|
|
159
|
+
})(["display:flex;align-items:center;padding:6px 9px;border-radius:14px;font-size:0.875rem;border:0.5px solid ", ";background-color:", ";color:", ";box-shadow:0 2px 4px rgba(0,0,0,0.1);"], _ref => {
|
|
160
|
+
let {
|
|
161
|
+
status
|
|
162
|
+
} = _ref;
|
|
163
|
+
return status === 'NO ANSWER' ? '#FEE2E2' : '#e0e0e0';
|
|
164
|
+
}, _ref2 => {
|
|
165
|
+
let {
|
|
166
|
+
status
|
|
167
|
+
} = _ref2;
|
|
168
|
+
return status === 'NO ANSWER' ? '#FEF2F2' : '#f0f0f0';
|
|
169
|
+
}, _ref3 => {
|
|
170
|
+
let {
|
|
171
|
+
status
|
|
172
|
+
} = _ref3;
|
|
173
|
+
return status === 'NO ANSWER' ? 'red' : '#6A7282';
|
|
174
|
+
});
|
|
175
|
+
const IconWrapper = _styledComponents.default.span.withConfig({
|
|
176
|
+
displayName: "CallLog__IconWrapper"
|
|
177
|
+
})(["display:flex;margin-right:0.575rem;svg{color:", ";font-size:", ";@media (min-width:45.7143rem){font-size:calc(", " * 1.15);}@media (min-width:73.1429rem){font-size:calc(", " * 1.3);}}"], _ref4 => {
|
|
178
|
+
let {
|
|
179
|
+
color
|
|
180
|
+
} = _ref4;
|
|
181
|
+
return color || 'inherit';
|
|
182
|
+
}, _ref5 => {
|
|
183
|
+
let {
|
|
184
|
+
size
|
|
185
|
+
} = _ref5;
|
|
186
|
+
return size || '0.875rem';
|
|
187
|
+
}, _ref6 => {
|
|
188
|
+
let {
|
|
189
|
+
size
|
|
190
|
+
} = _ref6;
|
|
191
|
+
return size || '0.875rem';
|
|
192
|
+
}, _ref7 => {
|
|
193
|
+
let {
|
|
194
|
+
size
|
|
195
|
+
} = _ref7;
|
|
196
|
+
return size || '0.875rem';
|
|
197
|
+
});
|
|
198
|
+
const Text = _styledComponents.default.span.withConfig({
|
|
199
|
+
displayName: "CallLog__Text"
|
|
200
|
+
})(["font-size:inherit;font-weight:400;"]);
|
|
201
|
+
const CallPill = _ref8 => {
|
|
202
|
+
let {
|
|
203
|
+
message
|
|
204
|
+
} = _ref8;
|
|
205
|
+
if (!message) return null;
|
|
206
|
+
const label = message.status === 'NO ANSWER' ? 'Missed call' : 'Answered call';
|
|
207
|
+
const formatDuration = seconds => {
|
|
208
|
+
const mins = Math.floor(seconds / 60);
|
|
209
|
+
const secs = seconds % 60;
|
|
210
|
+
const minsPart = mins ? "".concat(mins, " min").concat(mins > 1 ? 's' : '') : '';
|
|
211
|
+
const secsPart = secs ? "".concat(secs, "s") : '';
|
|
212
|
+
return [minsPart, secsPart].filter(Boolean).join(' ');
|
|
213
|
+
};
|
|
214
|
+
const formattedTime = (0, _dateFns.format)(new Date(message.time_start), 'M/d/yyyy hh:mm a');
|
|
215
|
+
const Icon = message.status === 'NO ANSWER' ? _iconsMaterial.PhoneMissedOutlined : _iconsMaterial.Phone;
|
|
216
|
+
const duration = message.status === 'NO ANSWER' ? formattedTime : formatDuration(message.talk_duration);
|
|
217
|
+
return /*#__PURE__*/_react.default.createElement(SessionTimelineWrapper, null, /*#__PURE__*/_react.default.createElement(Container, {
|
|
218
|
+
status: message.status
|
|
219
|
+
}, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(Text, null, label, " \u2022 ", duration)));
|
|
220
|
+
};
|
|
221
|
+
exports.CallPill = CallPill;
|
|
@@ -20,9 +20,10 @@ var _sessionDetails = require("./sessionDetails");
|
|
|
20
20
|
var _sessionTimeline = require("./sessionTimeline");
|
|
21
21
|
var _colors = require("../../colors");
|
|
22
22
|
var _FeedPostComments = require("./FeedPostComments");
|
|
23
|
+
var _CallLog = require("./CallLog");
|
|
23
24
|
const _excluded = ["state", "file", "src", "fileName", "onDownload", "extension", "link"],
|
|
24
25
|
_excluded2 = ["state", "src", "extensions", "fileName"],
|
|
25
|
-
_excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "metadata", "isInteractive", "type", "extension"];
|
|
26
|
+
_excluded3 = ["children", "state", "displayTime", "status", "session", "src", "file", "fileName", "sessionDetails", "sessionTimeline", "feedPostComments", "agentName", "callLog", "metadata", "isInteractive", "type", "extension"];
|
|
26
27
|
/* eslint-disable react/no-array-index-key */
|
|
27
28
|
/* eslint-disable no-nested-ternary */
|
|
28
29
|
/* eslint-disable react/display-name */
|
|
@@ -646,13 +647,21 @@ BmChat.Details = _ref31 => {
|
|
|
646
647
|
sessionTimeline,
|
|
647
648
|
feedPostComments,
|
|
648
649
|
agentName,
|
|
650
|
+
callLog,
|
|
649
651
|
metadata,
|
|
650
652
|
isInteractive,
|
|
651
653
|
type,
|
|
652
654
|
extension
|
|
653
655
|
} = _ref31,
|
|
654
656
|
rest = _objectWithoutProperties(_ref31, _excluded3);
|
|
655
|
-
|
|
657
|
+
console.log({
|
|
658
|
+
type
|
|
659
|
+
});
|
|
660
|
+
console.log(children);
|
|
661
|
+
console.log(metadata);
|
|
662
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, type === 'call' && /*#__PURE__*/_react.default.createElement(_CallLog.CallPill, {
|
|
663
|
+
message: children.message
|
|
664
|
+
}), /*#__PURE__*/_react.default.createElement(Details, _extends({
|
|
656
665
|
state: state
|
|
657
666
|
}, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({
|
|
658
667
|
state,
|
|
@@ -728,7 +737,11 @@ BmChat.Details = _ref31 => {
|
|
|
728
737
|
pageNumber: 1,
|
|
729
738
|
height: "250",
|
|
730
739
|
width: "200"
|
|
731
|
-
}))) :
|
|
740
|
+
}))) :
|
|
741
|
+
// : type === 'call' ? (
|
|
742
|
+
// <CallPill message={children.message} />
|
|
743
|
+
// )
|
|
744
|
+
type !== 'call' && /*#__PURE__*/_react.default.createElement(Messages, {
|
|
732
745
|
state: state
|
|
733
746
|
}, children))), file && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
|
|
734
747
|
extension: extension,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "beem-component",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.26",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/components/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
"ajv": "^8.17.1",
|
|
52
52
|
"ajv-keywords": "^5.1.0",
|
|
53
53
|
"bootstrap": "^5.3.3",
|
|
54
|
+
"date-fns": "^4.1.0",
|
|
54
55
|
"js-file-download": "^0.4.12",
|
|
55
56
|
"lodash": "^4.17.21",
|
|
56
57
|
"node-sass": "^6.0.1",
|
package/src/App.js
CHANGED
|
@@ -666,6 +666,52 @@ const Chat = () => {
|
|
|
666
666
|
'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/081c00de-cc02-44f2-bd91-5cf3a5a73d09.jpeg',
|
|
667
667
|
},
|
|
668
668
|
},
|
|
669
|
+
{
|
|
670
|
+
id: 109370,
|
|
671
|
+
message:
|
|
672
|
+
'{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"ANSWERED","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}',
|
|
673
|
+
time: '2025-10-06T10:53:38.000Z',
|
|
674
|
+
direction: 'outbound',
|
|
675
|
+
message_type: 'call',
|
|
676
|
+
messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
|
|
677
|
+
is_live_agent: 0,
|
|
678
|
+
is_deleted: 0,
|
|
679
|
+
is_comment: 0,
|
|
680
|
+
channel: 'voice_call',
|
|
681
|
+
sent_to_vendor: 1,
|
|
682
|
+
replyMessageId: null,
|
|
683
|
+
|
|
684
|
+
agent_name: null,
|
|
685
|
+
df_agent_name: null,
|
|
686
|
+
resolve_time: null,
|
|
687
|
+
metadata: null,
|
|
688
|
+
statusDetails: {
|
|
689
|
+
statusCode: 3,
|
|
690
|
+
},
|
|
691
|
+
},
|
|
692
|
+
{
|
|
693
|
+
id: 109370,
|
|
694
|
+
message:
|
|
695
|
+
'{"call_id":"1764099020.52","time_start":"2025-11-25 22:30:20","call_from":"004","call_to":"0782270052","call_duration":2,"talk_duration":129,"src_trunk_name":"","dst_trunk_name":"drtest3cx","pin_code":"","status":"NO ANSWER","type":"Outbound","recording":"","did_number":"","did_name":"","agent_ring_time":0,"uid":"202511252230209719F","call_note_id":"20251125223020-33142","enb_call_note":16}',
|
|
696
|
+
time: '2025-10-06T10:53:38.000Z',
|
|
697
|
+
direction: 'outbound',
|
|
698
|
+
message_type: 'call',
|
|
699
|
+
messageId: '121302f4-50ca-48c3-a32a-2d570064a000',
|
|
700
|
+
is_live_agent: 0,
|
|
701
|
+
is_deleted: 0,
|
|
702
|
+
is_comment: 0,
|
|
703
|
+
channel: 'voice_call',
|
|
704
|
+
sent_to_vendor: 1,
|
|
705
|
+
replyMessageId: null,
|
|
706
|
+
|
|
707
|
+
agent_name: null,
|
|
708
|
+
df_agent_name: null,
|
|
709
|
+
resolve_time: null,
|
|
710
|
+
metadata: null,
|
|
711
|
+
statusDetails: {
|
|
712
|
+
statusCode: 3,
|
|
713
|
+
},
|
|
714
|
+
},
|
|
669
715
|
];
|
|
670
716
|
const isJson = (itemOg) => {
|
|
671
717
|
let item = itemOg;
|
|
@@ -726,6 +772,7 @@ const Chat = () => {
|
|
|
726
772
|
};
|
|
727
773
|
}
|
|
728
774
|
|
|
775
|
+
console.log(finalMessage);
|
|
729
776
|
return {
|
|
730
777
|
message: finalMessage,
|
|
731
778
|
connector,
|
|
@@ -809,16 +856,18 @@ const Chat = () => {
|
|
|
809
856
|
<>
|
|
810
857
|
<GlobalStyle />
|
|
811
858
|
|
|
812
|
-
{metaQuickReply.map((msg, idx) =>
|
|
813
|
-
msg.message_type
|
|
859
|
+
{metaQuickReply.map((msg, idx) => {
|
|
860
|
+
const isCall = msg.message_type === 'call';
|
|
861
|
+
return msg.message_type !== 'text' ? (
|
|
814
862
|
<BmChat.Details
|
|
815
863
|
key={msg.id || idx} // Prefer a stable unique id if available
|
|
816
|
-
state={msg.direction}
|
|
864
|
+
state={!isCall && msg.direction}
|
|
817
865
|
session="bot"
|
|
818
|
-
displayTime={<p>12:00pm</p>}
|
|
819
|
-
status=
|
|
866
|
+
// displayTime={!isCall && && <p>12:00pm</p>}
|
|
867
|
+
status={!isCall && 'sent'}
|
|
820
868
|
type={msg.message_type}
|
|
821
|
-
|
|
869
|
+
callLog={msg.message_type === 'call'}
|
|
870
|
+
// sessionTimeline={!isCall && && <p>12:00pm</p>}
|
|
822
871
|
style={{ margin: '-0.6% 0 0 0' }}
|
|
823
872
|
metadata={determineMetadataMessageType(msg.metadata)}
|
|
824
873
|
isInteractive={determineMetadataIsInteractive(msg.metadata)}
|
|
@@ -833,15 +882,15 @@ const Chat = () => {
|
|
|
833
882
|
displayTime={<p>12:00pm</p>}
|
|
834
883
|
status="sent"
|
|
835
884
|
type="text"
|
|
836
|
-
sessionTimeline={{ message: <p>12:00pm</p> }}
|
|
885
|
+
sessionTimeline={!isCall && { message: <p>12:00pm</p> }}
|
|
837
886
|
style={{ margin: '-0.6% 0 0 0' }}
|
|
838
887
|
metadata={determineMetadataMessageType(msg.metadata)}
|
|
839
888
|
isInteractive={determineMetadataIsInteractive(msg.metadata)}
|
|
840
889
|
>
|
|
841
890
|
<p>{msg.message}</p>
|
|
842
891
|
</BmChat.Details>
|
|
843
|
-
)
|
|
844
|
-
)}
|
|
892
|
+
);
|
|
893
|
+
})}
|
|
845
894
|
<BmCardv2 borderColor="#d62a2af" borderWidth="1.5px" contentHeight="0">
|
|
846
895
|
<BmCardv2.Header>
|
|
847
896
|
<BmCardv2.Title>Appointment Summary</BmCardv2.Title>
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
// // CallPill.jsx
|
|
2
|
+
// import React from 'react';
|
|
3
|
+
// import styled from 'styled-components';
|
|
4
|
+
// import PhoneIcon from '@mui/icons-material/Phone';
|
|
5
|
+
|
|
6
|
+
// export const CallPill = ({ message, icon: Icon = PhoneIcon }) => {
|
|
7
|
+
// if (!message) return null; // safety check
|
|
8
|
+
// const formatDuration = (seconds) => {
|
|
9
|
+
// const mins = Math.floor(seconds / 60);
|
|
10
|
+
// const secs = seconds % 60;
|
|
11
|
+
|
|
12
|
+
// const minsPart = mins ? `${mins} min${mins > 1 ? 's' : ''}` : '';
|
|
13
|
+
// const secsPart = secs ? `${secs}s` : '';
|
|
14
|
+
|
|
15
|
+
// return [minsPart, secsPart].filter(Boolean).join(' ');
|
|
16
|
+
// };
|
|
17
|
+
|
|
18
|
+
// console.log(message);
|
|
19
|
+
// console.log('SSSSS');
|
|
20
|
+
// const label = `${message.type} • ${message.status}`;
|
|
21
|
+
// const duration = formatDuration(message.talk_duration);
|
|
22
|
+
// console.log(`${label} • ${duration}`);
|
|
23
|
+
// return (
|
|
24
|
+
// <SessionTimelineWrapper>
|
|
25
|
+
// <Container>
|
|
26
|
+
// <IconWrapper>
|
|
27
|
+
// <Icon fontSize="small" />
|
|
28
|
+
// </IconWrapper>
|
|
29
|
+
// <Text>
|
|
30
|
+
// {label} • {duration}
|
|
31
|
+
// </Text>
|
|
32
|
+
// </Container>
|
|
33
|
+
// </SessionTimelineWrapper>
|
|
34
|
+
// );
|
|
35
|
+
// };
|
|
36
|
+
// const SessionTimelineWrapper = styled.div`
|
|
37
|
+
// display: flex;
|
|
38
|
+
// flex-direction: row;
|
|
39
|
+
// justify-content: center;
|
|
40
|
+
// align-items: center;
|
|
41
|
+
// text-align: center;
|
|
42
|
+
// margin-bottom: 0.5rem;
|
|
43
|
+
// margin-top: 0.5rem;
|
|
44
|
+
// `;
|
|
45
|
+
// const Container = styled.div`
|
|
46
|
+
// display: flex;
|
|
47
|
+
// flex-direction: row;
|
|
48
|
+
// justify-content: center;
|
|
49
|
+
// align-items: center;
|
|
50
|
+
// text-align: center;
|
|
51
|
+
// /* display: inline-flex;
|
|
52
|
+
// justify-content: center;
|
|
53
|
+
// align-items: center; */
|
|
54
|
+
// gap: 6px;
|
|
55
|
+
// background: #f4f5f7;
|
|
56
|
+
// border-radius: 999px;
|
|
57
|
+
// padding: 6px 14px;
|
|
58
|
+
// font-size: 14px;
|
|
59
|
+
// color: #4a4a4a;
|
|
60
|
+
// border: 1px solid #e2e2e2;
|
|
61
|
+
// max-width: fit-content;
|
|
62
|
+
// white-space: nowrap;
|
|
63
|
+
|
|
64
|
+
// @media (max-width: 480px) {
|
|
65
|
+
// font-size: 12px;
|
|
66
|
+
// padding: 5px 10px;
|
|
67
|
+
// }
|
|
68
|
+
// `;
|
|
69
|
+
|
|
70
|
+
// const IconWrapper = styled.div`
|
|
71
|
+
// display: flex;
|
|
72
|
+
// align-items: center;
|
|
73
|
+
// `;
|
|
74
|
+
|
|
75
|
+
// const Text = styled.span`
|
|
76
|
+
// display: inline-block;
|
|
77
|
+
// overflow: hidden;
|
|
78
|
+
// text-overflow: ellipsis;
|
|
79
|
+
// `;
|
|
80
|
+
|
|
81
|
+
// // import PhoneIcon from '@mui/icons-material/Phone';
|
|
82
|
+
|
|
83
|
+
// // export default {
|
|
84
|
+
// // title: 'Components/CallPill',
|
|
85
|
+
// // component: CallPill,
|
|
86
|
+
// // argTypes: {
|
|
87
|
+
// // icon: { control: false },
|
|
88
|
+
// // },
|
|
89
|
+
// // };
|
|
90
|
+
|
|
91
|
+
// // const Template = (args) => <CallPill {...args} />;
|
|
92
|
+
|
|
93
|
+
// // export const SampleNoAnswer = Template.bind({});
|
|
94
|
+
// // SampleNoAnswer.args = {
|
|
95
|
+
// // call: {
|
|
96
|
+
// // call_id: '1764099020.52',
|
|
97
|
+
// // time_start: '2025-11-25 22:30:20',
|
|
98
|
+
// // call_from: '004',
|
|
99
|
+
// // call_to: '0782270052',
|
|
100
|
+
// // call_duration: 2,
|
|
101
|
+
// // talk_duration: 0,
|
|
102
|
+
// // src_trunk_name: '',
|
|
103
|
+
// // dst_trunk_name: 'drtest3cx',
|
|
104
|
+
// // pin_code: '',
|
|
105
|
+
// // status: 'NO ANSWER',
|
|
106
|
+
// // type: 'Outbound',
|
|
107
|
+
// // recording: '',
|
|
108
|
+
// // did_number: '',
|
|
109
|
+
// // did_name: '',
|
|
110
|
+
// // agent_ring_time: 0,
|
|
111
|
+
// // uid: '202511252230209719F',
|
|
112
|
+
// // call_note_id: '20251125223020-33142',
|
|
113
|
+
// // enb_call_note: 16,
|
|
114
|
+
// // },
|
|
115
|
+
// // icon: PhoneIcon,
|
|
116
|
+
// // };
|
|
117
|
+
|
|
118
|
+
// // export const SampleAnswered = Template.bind({});
|
|
119
|
+
// // SampleAnswered.args = {
|
|
120
|
+
// // call: {
|
|
121
|
+
// // call_id: '1764099020.52',
|
|
122
|
+
// // time_start: '2025-11-25 22:30:20',
|
|
123
|
+
// // call_from: '004',
|
|
124
|
+
// // call_to: '0782270052',
|
|
125
|
+
// // call_duration: 2,
|
|
126
|
+
// // talk_duration: 7,
|
|
127
|
+
// // src_trunk_name: '',
|
|
128
|
+
// // dst_trunk_name: 'drtest3cx',
|
|
129
|
+
// // pin_code: '',
|
|
130
|
+
// // status: 'ANSWERED',
|
|
131
|
+
// // type: 'Outbound',
|
|
132
|
+
// // recording: '',
|
|
133
|
+
// // did_number: '',
|
|
134
|
+
// // did_name: '',
|
|
135
|
+
// // agent_ring_time: 0,
|
|
136
|
+
// // uid: '202511252230209719F',
|
|
137
|
+
// // call_note_id: '20251125223020-33142',
|
|
138
|
+
// // enb_call_note: 16,
|
|
139
|
+
// // },
|
|
140
|
+
// // icon: PhoneIcon,
|
|
141
|
+
// // };
|
|
142
|
+
|
|
143
|
+
import React from 'react';
|
|
144
|
+
import {
|
|
145
|
+
Phone as PhoneIcon,
|
|
146
|
+
PhoneMissedOutlined as MissedCallIcon,
|
|
147
|
+
} from '@mui/icons-material';
|
|
148
|
+
import styled from 'styled-components';
|
|
149
|
+
import { format } from 'date-fns';
|
|
150
|
+
|
|
151
|
+
const SessionTimelineWrapper = styled.div`
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: row;
|
|
154
|
+
justify-content: center;
|
|
155
|
+
align-items: center;
|
|
156
|
+
text-align: center;
|
|
157
|
+
margin-bottom: 0.5rem;
|
|
158
|
+
margin-top: 0.5rem;
|
|
159
|
+
`;
|
|
160
|
+
const Container = styled.div`
|
|
161
|
+
display: flex;
|
|
162
|
+
align-items: center;
|
|
163
|
+
|
|
164
|
+
padding: 6px 9px;
|
|
165
|
+
border-radius: 14px;
|
|
166
|
+
font-size: 0.875rem;
|
|
167
|
+
border: 0.5px solid
|
|
168
|
+
${({ status }) => (status === 'NO ANSWER' ? '#FEE2E2' : '#e0e0e0')};
|
|
169
|
+
background-color: ${({ status }) =>
|
|
170
|
+
status === 'NO ANSWER' ? '#FEF2F2' : '#f0f0f0'};
|
|
171
|
+
color: ${({ status }) => (status === 'NO ANSWER' ? 'red' : '#6A7282')};
|
|
172
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
173
|
+
`;
|
|
174
|
+
|
|
175
|
+
const IconWrapper = styled.span`
|
|
176
|
+
display: flex;
|
|
177
|
+
|
|
178
|
+
margin-right: 0.575rem;
|
|
179
|
+
|
|
180
|
+
svg {
|
|
181
|
+
color: ${({ color }) => color || 'inherit'};
|
|
182
|
+
font-size: ${({ size }) => size || '0.875rem'};
|
|
183
|
+
|
|
184
|
+
@media (min-width: 45.7143rem) {
|
|
185
|
+
font-size: calc(${({ size }) => size || '0.875rem'} * 1.15);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@media (min-width: 73.1429rem) {
|
|
189
|
+
font-size: calc(${({ size }) => size || '0.875rem'} * 1.3);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
`;
|
|
193
|
+
|
|
194
|
+
const Text = styled.span`
|
|
195
|
+
font-size: inherit;
|
|
196
|
+
font-weight: 400;
|
|
197
|
+
`;
|
|
198
|
+
|
|
199
|
+
export const CallPill = ({ message }) => {
|
|
200
|
+
if (!message) return null;
|
|
201
|
+
|
|
202
|
+
const label =
|
|
203
|
+
message.status === 'NO ANSWER' ? 'Missed call' : 'Answered call';
|
|
204
|
+
|
|
205
|
+
const formatDuration = (seconds) => {
|
|
206
|
+
const mins = Math.floor(seconds / 60);
|
|
207
|
+
const secs = seconds % 60;
|
|
208
|
+
|
|
209
|
+
const minsPart = mins ? `${mins} min${mins > 1 ? 's' : ''}` : '';
|
|
210
|
+
const secsPart = secs ? `${secs}s` : '';
|
|
211
|
+
|
|
212
|
+
return [minsPart, secsPart].filter(Boolean).join(' ');
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
const formattedTime = format(
|
|
216
|
+
new Date(message.time_start),
|
|
217
|
+
'M/d/yyyy hh:mm a'
|
|
218
|
+
);
|
|
219
|
+
|
|
220
|
+
const Icon = message.status === 'NO ANSWER' ? MissedCallIcon : PhoneIcon;
|
|
221
|
+
const duration =
|
|
222
|
+
message.status === 'NO ANSWER'
|
|
223
|
+
? formattedTime
|
|
224
|
+
: formatDuration(message.talk_duration);
|
|
225
|
+
|
|
226
|
+
return (
|
|
227
|
+
<SessionTimelineWrapper>
|
|
228
|
+
<Container status={message.status}>
|
|
229
|
+
<IconWrapper>
|
|
230
|
+
<Icon />
|
|
231
|
+
</IconWrapper>
|
|
232
|
+
<Text>
|
|
233
|
+
{label} • {duration}
|
|
234
|
+
</Text>
|
|
235
|
+
</Container>
|
|
236
|
+
</SessionTimelineWrapper>
|
|
237
|
+
);
|
|
238
|
+
};
|
|
@@ -26,6 +26,7 @@ import {
|
|
|
26
26
|
BmPrimaryGold,
|
|
27
27
|
} from '../../colors';
|
|
28
28
|
import { BmFeedPostComments } from './FeedPostComments';
|
|
29
|
+
import { CallPill } from './CallLog';
|
|
29
30
|
|
|
30
31
|
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
|
|
31
32
|
|
|
@@ -819,14 +820,19 @@ BmChat.Details = ({
|
|
|
819
820
|
sessionTimeline,
|
|
820
821
|
feedPostComments,
|
|
821
822
|
agentName,
|
|
823
|
+
callLog,
|
|
822
824
|
metadata,
|
|
823
825
|
isInteractive,
|
|
824
826
|
type,
|
|
825
827
|
extension,
|
|
826
828
|
...rest
|
|
827
829
|
}) => {
|
|
830
|
+
console.log({ type });
|
|
831
|
+
console.log(children);
|
|
832
|
+
console.log(metadata);
|
|
828
833
|
return (
|
|
829
834
|
<>
|
|
835
|
+
{type === 'call' && <CallPill message={children.message} />}
|
|
830
836
|
<Details state={state} {...rest}>
|
|
831
837
|
{/* Adding for mobile */}
|
|
832
838
|
<MessageState>
|
|
@@ -955,7 +961,12 @@ BmChat.Details = ({
|
|
|
955
961
|
</Document>
|
|
956
962
|
</>
|
|
957
963
|
) : (
|
|
958
|
-
|
|
964
|
+
// : type === 'call' ? (
|
|
965
|
+
// <CallPill message={children.message} />
|
|
966
|
+
// )
|
|
967
|
+
type !== 'call' && (
|
|
968
|
+
<Messages state={state}>{children}</Messages>
|
|
969
|
+
)
|
|
959
970
|
)}
|
|
960
971
|
</>
|
|
961
972
|
)}
|
|
@@ -1006,6 +1017,7 @@ BmChat.Details = ({
|
|
|
1006
1017
|
{sessionTimeline && (
|
|
1007
1018
|
<SessionTimeline message={sessionTimeline.message} {...rest} />
|
|
1008
1019
|
)}
|
|
1020
|
+
|
|
1009
1021
|
{sessionDetails && (
|
|
1010
1022
|
<SessionDetails
|
|
1011
1023
|
time={sessionDetails.time}
|