beem-component 2.1.22 → 2.1.25
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/Card_v2/Card.js +38 -12
- 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 +92 -10
- package/src/lib/components/Card_v2/Card.js +29 -16
- package/src/lib/components/ChatComponents/ChatBody/CallLog.js +238 -0
- package/src/lib/components/ChatComponents/ChatBody/chatBody.js +13 -1
|
@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.BmCardv2 = void 0;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
|
-
const _excluded = ["className", "children", "borderColor", "borderWidth"];
|
|
9
|
+
const _excluded = ["className", "children", "borderColor", "borderWidth", "contentHeight"];
|
|
10
10
|
/* eslint-disable func-style */
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
12
13
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
13
14
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
14
15
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
@@ -23,10 +24,11 @@ const hexToRgba = function (hex) {
|
|
|
23
24
|
const g = parseInt(normalizedHex.slice(2, 4), 16);
|
|
24
25
|
const b = parseInt(normalizedHex.slice(4, 6), 16);
|
|
25
26
|
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
|
|
26
|
-
} catch (
|
|
27
|
+
} catch (_unused) {
|
|
27
28
|
return "rgba(0, 0, 0, ".concat(opacity, ")");
|
|
28
29
|
}
|
|
29
30
|
};
|
|
31
|
+
const CardContext = /*#__PURE__*/(0, _react.createContext)({});
|
|
30
32
|
const StyledCard = _styledComponents.default.div.withConfig({
|
|
31
33
|
displayName: "Card__StyledCard"
|
|
32
34
|
})(["background-color:var(--card,#fff);color:var(--card-foreground,#000);display:flex;flex-direction:column;gap:1.5rem;border-radius:0.75rem;border-style:solid;border-color:", ";border-width:", ";width:100%;"], _ref => {
|
|
@@ -49,25 +51,49 @@ const Title = _styledComponents.default.h4.withConfig({
|
|
|
49
51
|
const Description = _styledComponents.default.p.withConfig({
|
|
50
52
|
displayName: "Card__Description"
|
|
51
53
|
})(["color:var(--muted-foreground,#666);margin:0;"]);
|
|
52
|
-
const
|
|
53
|
-
displayName: "
|
|
54
|
-
})(["min-height:
|
|
54
|
+
const ContentWrapper = _styledComponents.default.div.withConfig({
|
|
55
|
+
displayName: "Card__ContentWrapper"
|
|
56
|
+
})(["min-height:", ";padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], _ref3 => {
|
|
57
|
+
let {
|
|
58
|
+
$contentHeight
|
|
59
|
+
} = _ref3;
|
|
60
|
+
return $contentHeight || '14.2857rem';
|
|
61
|
+
}, () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.4));
|
|
62
|
+
function Content(_ref4) {
|
|
63
|
+
let {
|
|
64
|
+
children,
|
|
65
|
+
style
|
|
66
|
+
} = _ref4;
|
|
67
|
+
const {
|
|
68
|
+
contentHeight
|
|
69
|
+
} = (0, _react.useContext)(CardContext);
|
|
70
|
+
return /*#__PURE__*/_react.default.createElement(ContentWrapper, {
|
|
71
|
+
$contentHeight: contentHeight,
|
|
72
|
+
style: style
|
|
73
|
+
}, children);
|
|
74
|
+
}
|
|
55
75
|
const Footer = _styledComponents.default.div.withConfig({
|
|
56
76
|
displayName: "Card__Footer"
|
|
57
77
|
})(["display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem 1.5rem 1.5rem;gap:1rem;@media (max-width:42.8571rem){flex-direction:column;align-items:stretch;& > *{width:100%;}}"]);
|
|
58
|
-
function CardComponent(
|
|
78
|
+
function CardComponent(_ref5) {
|
|
59
79
|
let {
|
|
60
80
|
className,
|
|
61
81
|
children,
|
|
62
82
|
borderColor,
|
|
63
|
-
borderWidth
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
83
|
+
borderWidth,
|
|
84
|
+
contentHeight
|
|
85
|
+
} = _ref5,
|
|
86
|
+
props = _objectWithoutProperties(_ref5, _excluded);
|
|
87
|
+
const contextValue = {
|
|
88
|
+
contentHeight
|
|
89
|
+
};
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement(CardContext.Provider, {
|
|
91
|
+
value: contextValue
|
|
92
|
+
}, /*#__PURE__*/_react.default.createElement(StyledCard, _extends({
|
|
67
93
|
className: className,
|
|
68
94
|
borderColor: borderColor,
|
|
69
95
|
borderWidth: borderWidth
|
|
70
|
-
}, props), children);
|
|
96
|
+
}, props), children));
|
|
71
97
|
}
|
|
72
98
|
const BmCardv2 = exports.BmCardv2 = Object.assign(CardComponent, {
|
|
73
99
|
Header,
|
|
@@ -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.25",
|
|
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
|
@@ -17,7 +17,7 @@ import React from 'react';
|
|
|
17
17
|
// import PeopleIcon from '@mui/icons-material/People';
|
|
18
18
|
// import BusinessIcon from '@mui/icons-material/Business';
|
|
19
19
|
|
|
20
|
-
import { BmChat, GlobalStyle } from './lib/components';
|
|
20
|
+
import { BmChat, GlobalStyle, BmCardv2, BmButton } from './lib/components';
|
|
21
21
|
// import AlertBox from './lib/components/Alert/Alert';
|
|
22
22
|
|
|
23
23
|
// import ProgressIndicator from './lib/components/newProgress';
|
|
@@ -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,48 @@ 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
|
+
})}
|
|
894
|
+
<BmCardv2 borderColor="#d62a2af" borderWidth="1.5px" contentHeight="0">
|
|
895
|
+
<BmCardv2.Header>
|
|
896
|
+
<BmCardv2.Title>Appointment Summary</BmCardv2.Title>
|
|
897
|
+
<BmCardv2.Description>
|
|
898
|
+
This BmCardv2 shows a quick overview of your booking.
|
|
899
|
+
</BmCardv2.Description>
|
|
900
|
+
</BmCardv2.Header>
|
|
901
|
+
<BmCardv2.Content>
|
|
902
|
+
<p>
|
|
903
|
+
<strong>Type:</strong> Consultation
|
|
904
|
+
</p>
|
|
905
|
+
<p>
|
|
906
|
+
<strong>Date:</strong> June 24, 2025
|
|
907
|
+
</p>
|
|
908
|
+
<p>
|
|
909
|
+
<strong>Doctor:</strong> Dr. Smith
|
|
910
|
+
</p>
|
|
911
|
+
</BmCardv2.Content>
|
|
912
|
+
<BmCardv2.Footer>
|
|
913
|
+
<BmButton width="100%" size="medium" variant="primary">
|
|
914
|
+
Edit
|
|
915
|
+
</BmButton>
|
|
916
|
+
<BmButton
|
|
917
|
+
borderColor="#000000"
|
|
918
|
+
width="100%"
|
|
919
|
+
size="medium"
|
|
920
|
+
variant="secondary"
|
|
921
|
+
color="#000000"
|
|
922
|
+
>
|
|
923
|
+
Cancel
|
|
924
|
+
</BmButton>
|
|
925
|
+
</BmCardv2.Footer>
|
|
926
|
+
</BmCardv2>
|
|
845
927
|
</>
|
|
846
928
|
);
|
|
847
929
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* eslint-disable func-style */
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { createContext, useContext } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
|
|
5
5
|
const hexToRgba = (hex, opacity = 0.6) => {
|
|
@@ -12,16 +12,17 @@ const hexToRgba = (hex, opacity = 0.6) => {
|
|
|
12
12
|
) {
|
|
13
13
|
throw new Error('Invalid hex');
|
|
14
14
|
}
|
|
15
|
-
|
|
16
15
|
const r = parseInt(normalizedHex.slice(0, 2), 16);
|
|
17
16
|
const g = parseInt(normalizedHex.slice(2, 4), 16);
|
|
18
17
|
const b = parseInt(normalizedHex.slice(4, 6), 16);
|
|
19
18
|
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
20
|
-
} catch
|
|
19
|
+
} catch {
|
|
21
20
|
return `rgba(0, 0, 0, ${opacity})`;
|
|
22
21
|
}
|
|
23
22
|
};
|
|
24
23
|
|
|
24
|
+
const CardContext = createContext({});
|
|
25
|
+
|
|
25
26
|
const StyledCard = styled.div`
|
|
26
27
|
background-color: var(--card, #fff);
|
|
27
28
|
color: var(--card-foreground, #000);
|
|
@@ -53,12 +54,11 @@ const Description = styled.p`
|
|
|
53
54
|
margin: 0;
|
|
54
55
|
`;
|
|
55
56
|
|
|
56
|
-
const
|
|
57
|
-
min-height:
|
|
57
|
+
const ContentWrapper = styled.div`
|
|
58
|
+
min-height: ${({ $contentHeight }) => $contentHeight || '14.2857rem'};
|
|
58
59
|
padding: 0 1.5rem;
|
|
59
60
|
max-height: calc(100vh - 28.5714rem);
|
|
60
61
|
overflow-y: auto;
|
|
61
|
-
|
|
62
62
|
scrollbar-width: thin;
|
|
63
63
|
scrollbar-color: ${() => hexToRgba('#33b1ba', 0.2)} transparent;
|
|
64
64
|
|
|
@@ -69,7 +69,7 @@ const Content = styled.div`
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
&::-webkit-scrollbar-thumb:hover {
|
|
72
|
-
background: ${() => hexToRgba('#33b1ba', 0.
|
|
72
|
+
background: ${() => hexToRgba('#33b1ba', 0.4)};
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
&:last-child {
|
|
@@ -81,6 +81,15 @@ const Content = styled.div`
|
|
|
81
81
|
}
|
|
82
82
|
`;
|
|
83
83
|
|
|
84
|
+
function Content({ children, style }) {
|
|
85
|
+
const { contentHeight } = useContext(CardContext);
|
|
86
|
+
return (
|
|
87
|
+
<ContentWrapper $contentHeight={contentHeight} style={style}>
|
|
88
|
+
{children}
|
|
89
|
+
</ContentWrapper>
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
|
|
84
93
|
const Footer = styled.div`
|
|
85
94
|
display: flex;
|
|
86
95
|
justify-content: space-between;
|
|
@@ -91,7 +100,6 @@ const Footer = styled.div`
|
|
|
91
100
|
@media (max-width: 42.8571rem) {
|
|
92
101
|
flex-direction: column;
|
|
93
102
|
align-items: stretch;
|
|
94
|
-
|
|
95
103
|
& > * {
|
|
96
104
|
width: 100%;
|
|
97
105
|
}
|
|
@@ -103,17 +111,22 @@ function CardComponent({
|
|
|
103
111
|
children,
|
|
104
112
|
borderColor,
|
|
105
113
|
borderWidth,
|
|
114
|
+
contentHeight,
|
|
106
115
|
...props
|
|
107
116
|
}) {
|
|
117
|
+
const contextValue = { contentHeight };
|
|
118
|
+
|
|
108
119
|
return (
|
|
109
|
-
<
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
120
|
+
<CardContext.Provider value={contextValue}>
|
|
121
|
+
<StyledCard
|
|
122
|
+
className={className}
|
|
123
|
+
borderColor={borderColor}
|
|
124
|
+
borderWidth={borderWidth}
|
|
125
|
+
{...props}
|
|
126
|
+
>
|
|
127
|
+
{children}
|
|
128
|
+
</StyledCard>
|
|
129
|
+
</CardContext.Provider>
|
|
117
130
|
);
|
|
118
131
|
}
|
|
119
132
|
|
|
@@ -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}
|