pager-widget 0.0.1 → 0.0.2
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/App.jsx +2277 -987
- package/contentEditable.js +142 -0
- package/dist/lib.js +173 -191
- package/fontStyles.js +41 -0
- package/md/assistant_md.js +43 -29
- package/package.json +4 -3
- package/useMessages.js +285 -0
- package/useScale.js +4 -2
- package/dist/lib.css +0 -1
package/App.jsx
CHANGED
|
@@ -1,57 +1,73 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useState } from "react";
|
|
2
|
-
import styled from "styled-components";
|
|
3
|
-
import { ScaleSizeProvider } from "./useScale";
|
|
4
|
-
import useWidgetService from "./useWidgetService";
|
|
5
|
-
import { formatTimeAMPM } from "./lib";
|
|
6
1
|
import AssistantMd, {
|
|
7
2
|
evalNormalOrJoinText,
|
|
8
3
|
parseUrlAndString,
|
|
9
4
|
} from "./md/assistant_md";
|
|
5
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
6
|
+
import { ScaleSizeProvider, useScaleContext } from "./useScale";
|
|
7
|
+
|
|
8
|
+
import autosize from "autosize";
|
|
9
|
+
// import ContentEditable from './contentEditable'
|
|
10
|
+
// import autosize from "autosize";
|
|
10
11
|
import { convertToMDText } from "./md/md_format_converter";
|
|
12
|
+
import { formatTimeAMPM } from "./lib";
|
|
13
|
+
import styled from "styled-components";
|
|
14
|
+
import useWidgetService from "./useWidgetService";
|
|
15
|
+
|
|
16
|
+
const switchSize = (size, small, medium, large) => {
|
|
17
|
+
// console.log(size, "tested");
|
|
18
|
+
|
|
19
|
+
switch (size) {
|
|
20
|
+
case 'small':
|
|
21
|
+
return small;
|
|
22
|
+
case 'medium':
|
|
23
|
+
return medium;
|
|
24
|
+
case 'large':
|
|
25
|
+
return large;
|
|
26
|
+
default:
|
|
27
|
+
return small
|
|
28
|
+
}
|
|
29
|
+
}
|
|
11
30
|
|
|
12
31
|
const WidgetPreview = styled.div`
|
|
13
|
-
|
|
32
|
+
|
|
33
|
+
@media (min-width: 2160px) {
|
|
34
|
+
width: ${(props) => switchSize(props.size, "480px", "540px", "680px")};
|
|
35
|
+
right: 4.5rem;
|
|
36
|
+
bottom: 4.5rem;
|
|
37
|
+
}
|
|
38
|
+
@media (min-width: 2560px) {
|
|
39
|
+
width ${(props) => switchSize(props.size, "720px", "840px", "920px")};
|
|
40
|
+
right: 5.5rem;
|
|
41
|
+
bottom: 6.5rem;
|
|
42
|
+
}
|
|
43
|
+
@media (min-width: 3840px) {
|
|
44
|
+
width ${(props) => switchSize(props.size, "1080px", "1200px", "1360px")};
|
|
45
|
+
right: 6.5rem;
|
|
46
|
+
bottom: 7.5rem;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (max-width: 1920px) {
|
|
50
|
+
width: ${(props) => switchSize(props.size, "540px", "600px", "680px")};
|
|
51
|
+
}
|
|
52
|
+
@media (max-width: 1680px) {
|
|
53
|
+
width: ${(props) => switchSize(props.size, "460px", "540px", "560px")};
|
|
54
|
+
}
|
|
55
|
+
@media (max-width: 1280px) {
|
|
56
|
+
width: ${(props) => switchSize(props.size, "360px", "420px", "460px")};
|
|
57
|
+
right: 3rem;
|
|
58
|
+
bottom: 3rem;
|
|
59
|
+
}
|
|
60
|
+
width: 680px;
|
|
14
61
|
height: auto;
|
|
15
62
|
float: left;
|
|
16
63
|
position: fixed;
|
|
17
|
-
right:
|
|
18
|
-
bottom:
|
|
64
|
+
right: 3.5rem;
|
|
65
|
+
bottom: 3.5rem;
|
|
19
66
|
background: #f6f8fa 0% 0% no-repeat padding-box;
|
|
20
67
|
box-shadow: 0px 15px 30px #00000040;
|
|
21
68
|
border-radius: 16px;
|
|
22
69
|
box-sizing: border-box;
|
|
23
|
-
font-family:
|
|
24
|
-
`;
|
|
25
|
-
const WidgeBgWrapper = styled.div`
|
|
26
|
-
width: 100%;
|
|
27
|
-
float: left;
|
|
28
|
-
height: 100%;
|
|
29
|
-
border-radius: 20px;
|
|
30
|
-
display: flex;
|
|
31
|
-
flex-direction: column;
|
|
32
|
-
padding: 10px 15px 15px 15px;
|
|
33
|
-
align-items: center;
|
|
34
|
-
position: relative;
|
|
35
|
-
margin-top: 0px;
|
|
36
|
-
|
|
37
|
-
@media (max-width: 1500px) {
|
|
38
|
-
}
|
|
39
|
-
@media (max-width: 1370px) {
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.widget_header_top {
|
|
43
|
-
margin-top: 40px;
|
|
44
|
-
@media (max-width: 1736px) {
|
|
45
|
-
margin-top: 10px;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
@media (max-width: 1600px) {
|
|
49
|
-
margin-top: 20px;
|
|
50
|
-
}
|
|
51
|
-
@media (max-width: 1500px) {
|
|
52
|
-
margin-top: 0px;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
70
|
+
font-family: "Open Sans", sans-serif;
|
|
55
71
|
`;
|
|
56
72
|
const FormHeader = styled.div`
|
|
57
73
|
display: flex;
|
|
@@ -59,15 +75,33 @@ const FormHeader = styled.div`
|
|
|
59
75
|
width: 100%;
|
|
60
76
|
float: left;
|
|
61
77
|
font-family: 'Gordita-Medium', 'Open Sans', sans-serif;;
|
|
62
|
-
font-size:
|
|
78
|
+
font-size: ${(props) => switchSize(props.size, "15px", "20px", "24px")};
|
|
63
79
|
color: #000;
|
|
64
|
-
// max-width: max-content;
|
|
65
80
|
margin-right: 12px;
|
|
66
81
|
margin-bottom: 0px;
|
|
67
82
|
justify-content: space-between;
|
|
68
83
|
max-width: none;
|
|
69
|
-
|
|
70
|
-
|
|
84
|
+
|
|
85
|
+
@media (min-width: 2160px) {
|
|
86
|
+
font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
|
|
87
|
+
margin-bottom: 3px;
|
|
88
|
+
}
|
|
89
|
+
@media (min-width: 2560px) {
|
|
90
|
+
font-size: ${(props) => switchSize(props.size, "20px", "24px", "30px")};
|
|
91
|
+
}
|
|
92
|
+
@media (min-width: 3840px) {
|
|
93
|
+
font-size: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@media (max-width: 1920px) {
|
|
97
|
+
font-size: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
|
|
98
|
+
}
|
|
99
|
+
@media (max-width: 1680px) {
|
|
100
|
+
font-size: ${(props) => switchSize(props.size, "15px", "18px", "18px")};
|
|
101
|
+
}
|
|
102
|
+
@media (max-width: 1280px) {
|
|
103
|
+
font-size: ${(props) => switchSize(props.size, "10px", "12px", "15px")};
|
|
104
|
+
}
|
|
71
105
|
|
|
72
106
|
.target.customTip{
|
|
73
107
|
width: 12px;
|
|
@@ -85,24 +119,9 @@ const FormHeader = styled.div`
|
|
|
85
119
|
}
|
|
86
120
|
`;
|
|
87
121
|
const ChatWrapper = styled.div`
|
|
88
|
-
// width: 100%;
|
|
89
|
-
// float: left;
|
|
90
|
-
// background: #f4f4f4;
|
|
91
|
-
// height: 100%;
|
|
92
|
-
// position: relative;
|
|
93
|
-
// right: 50px;
|
|
94
|
-
// background: #F6F8FA 0% 0% no-repeat padding-box;
|
|
95
|
-
// box-shadow: 0px 15px 30px #00000040;
|
|
96
|
-
// border-radius: 16px;
|
|
97
|
-
|
|
98
|
-
// @media (max-width: 1600px) {
|
|
99
|
-
// height: 100%;
|
|
100
|
-
// width: 600px;
|
|
101
|
-
// }
|
|
102
122
|
box-sizing: border-box;
|
|
103
123
|
|
|
104
124
|
.widget_footer_box{
|
|
105
|
-
|
|
106
125
|
.widget_footer{
|
|
107
126
|
display: flex;
|
|
108
127
|
position: relative;
|
|
@@ -115,52 +134,150 @@ const ChatWrapper = styled.div`
|
|
|
115
134
|
|
|
116
135
|
p{
|
|
117
136
|
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;;
|
|
118
|
-
font-size:
|
|
137
|
+
font-size: 13px;
|
|
119
138
|
color: #555555;
|
|
120
139
|
margin: 0;
|
|
140
|
+
align-items: center;
|
|
141
|
+
display: flex;
|
|
142
|
+
gap: 0 2.5px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
span{
|
|
146
|
+
position: relative;
|
|
147
|
+
bottom: 2px;
|
|
148
|
+
padding-right: 1px;
|
|
121
149
|
}
|
|
122
150
|
|
|
123
151
|
svg{
|
|
124
|
-
|
|
125
|
-
|
|
152
|
+
width: 14px;
|
|
153
|
+
height: 12px;
|
|
126
154
|
}
|
|
127
155
|
}
|
|
128
156
|
}
|
|
129
157
|
}
|
|
158
|
+
|
|
159
|
+
.tryit_bot_typing{
|
|
160
|
+
position: relative;
|
|
161
|
+
font-size: 14px;
|
|
162
|
+
color: #555;
|
|
163
|
+
width: 100%;
|
|
164
|
+
padding-left: 16px;
|
|
165
|
+
display: flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
top: 6px;
|
|
168
|
+
|
|
169
|
+
@media (min-width: 2160px) {
|
|
170
|
+
font-size: 26px;
|
|
171
|
+
}
|
|
172
|
+
@media (min-width: 2560px) {
|
|
173
|
+
font-size: 30px;
|
|
174
|
+
}
|
|
175
|
+
@media (min-width: 3840px) {
|
|
176
|
+
font-size: 34px;
|
|
177
|
+
padding-left: 20px;
|
|
178
|
+
margin: 16px 0;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
span{
|
|
182
|
+
position:relative;
|
|
183
|
+
top: 2px;
|
|
184
|
+
margin-left:10px;
|
|
185
|
+
.snippet{
|
|
186
|
+
width: 100%;
|
|
187
|
+
display: flex;
|
|
188
|
+
justify-content: center;
|
|
189
|
+
}
|
|
190
|
+
.dot-flashing {
|
|
191
|
+
position: relative;
|
|
192
|
+
width: 4px;
|
|
193
|
+
height: 4px;
|
|
194
|
+
border-radius: 5px;
|
|
195
|
+
background-color: #000;
|
|
196
|
+
color: #333;
|
|
197
|
+
animation: dotFlashing 1s infinite linear alternate;
|
|
198
|
+
animation-delay: .3s;
|
|
199
|
+
left:5px;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.dot-flashing::before, .dot-flashing::after {
|
|
203
|
+
content: '';
|
|
204
|
+
display: inline-block;
|
|
205
|
+
position: absolute;
|
|
206
|
+
top: 0;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.dot-flashing::before {
|
|
210
|
+
left: -7px;
|
|
211
|
+
width: 4px;
|
|
212
|
+
height: 4px;
|
|
213
|
+
border-radius: 5px;
|
|
214
|
+
background-color: #000;
|
|
215
|
+
color: #333;
|
|
216
|
+
animation: dotFlashing 1s infinite alternate;
|
|
217
|
+
animation-delay: 0s;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.dot-flashing::after {
|
|
221
|
+
left: 7px;
|
|
222
|
+
width: 4px;
|
|
223
|
+
height: 4px;
|
|
224
|
+
border-radius: 5px;
|
|
225
|
+
background-color: #000;
|
|
226
|
+
color: #333;
|
|
227
|
+
animation: dotFlashing 1s infinite alternate;
|
|
228
|
+
animation-delay: 1s;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
@keyframes dotFlashing {
|
|
232
|
+
0% {
|
|
233
|
+
background-color: #333;
|
|
234
|
+
}
|
|
235
|
+
50%,
|
|
236
|
+
100% {
|
|
237
|
+
background-color: #999;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
130
242
|
|
|
131
243
|
`;
|
|
132
244
|
const ChatContentWrapper = styled.div`
|
|
245
|
+
|
|
246
|
+
@media (min-width: 2160px) {
|
|
247
|
+
height: ${(props) => switchSize(props.size, "calc(100vh - 60vh)", "calc(100vh - 56vh)", "calc(100vh - 44vh)")};
|
|
248
|
+
}
|
|
249
|
+
@media (min-width: 2560px) {
|
|
250
|
+
height: ${(props) => switchSize(props.size, "calc(100vh - 47.4vh)", "calc(100vh - 41.6vh)", "calc(100vh - 33.9vh)")};
|
|
251
|
+
}
|
|
252
|
+
@media (min-width: 3840px) {
|
|
253
|
+
height: ${(props) => switchSize(props.size, "calc(100vh - 48vh)", "calc(100vh - 43vh)", "calc(100vh - 38vh)")};
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
@media (max-width: 1920px) {
|
|
257
|
+
height: ${(props) => switchSize(props.size, "calc(100vh - 44.8vh)", "calc(100vh - 37.4vh)", "calc(100vh - 28vh)")};
|
|
258
|
+
}
|
|
259
|
+
@media (max-width: 1680px) {
|
|
260
|
+
height: ${(props) => switchSize(props.size, "calc(100vh - 45vh)", "calc(100vh - 37.4vh)", "calc(100vh - 31.5vh)")};
|
|
261
|
+
}
|
|
262
|
+
@media (max-width: 1440px) {
|
|
263
|
+
height: ${(props) => switchSize(props.size, "calc(100vh - 44.8vh)", "calc(100vh - 37.4vh)", "calc(100vh - 31.5vh)")};
|
|
264
|
+
}
|
|
265
|
+
@media (max-width: 1280px) {
|
|
266
|
+
height: ${(props) => switchSize(props.size, "calc(100vh - 53.3vh)", "calc(100vh - 48vh)", "calc(100vh - 42vh)")};
|
|
267
|
+
}
|
|
268
|
+
height: calc(100vh - 28vh);
|
|
133
269
|
width: 100%;
|
|
134
270
|
float: left;
|
|
135
|
-
padding:
|
|
271
|
+
padding: 12px 20px 20px 15px;
|
|
136
272
|
display: block;
|
|
137
|
-
// flex-direction: column;
|
|
138
|
-
// height: 100%;
|
|
139
273
|
overflow-y: scroll;
|
|
140
274
|
background: #F6F8FA;
|
|
141
|
-
height: calc(100vh - 48vh);
|
|
142
275
|
overflow-x: hidden;
|
|
143
276
|
box-sizing: border-box;
|
|
144
277
|
background-position: center;
|
|
145
278
|
background-size: contain;
|
|
146
279
|
background-image: url("https://workativ-asssistant-widget-images.s3.amazonaws.com/widget_bg.svg");
|
|
147
|
-
|
|
148
|
-
// @media (max-width: 1736px) {
|
|
149
|
-
// height: calc(100vh - 390px);
|
|
150
|
-
// padding: 15px;
|
|
151
|
-
// }
|
|
152
|
-
// @media (max-width: 1650px) {
|
|
153
|
-
// height: calc(100vh - 405px);
|
|
154
|
-
// padding: 10px;
|
|
155
|
-
// }
|
|
156
|
-
// @media (max-width: 1500px) {
|
|
157
|
-
// height: calc(100vh - 382px);
|
|
158
|
-
// padding: 10px;
|
|
159
|
-
// }
|
|
160
|
-
|
|
161
|
-
// @media (max-width: 1600px) {
|
|
162
|
-
|
|
163
|
-
// }
|
|
280
|
+
background-repeat: no-repeat;
|
|
164
281
|
}
|
|
165
282
|
`;
|
|
166
283
|
const AssistantChat = styled.div`
|
|
@@ -171,232 +288,234 @@ const AssistantChat = styled.div`
|
|
|
171
288
|
justify-content: flex-start;
|
|
172
289
|
flex-direction: column;
|
|
173
290
|
position: relative;
|
|
174
|
-
margin-bottom:
|
|
291
|
+
margin-bottom: 12px;
|
|
292
|
+
|
|
293
|
+
@media (min-width: 2160px) {
|
|
175
294
|
|
|
176
|
-
.tryit_cards_top_right {
|
|
177
|
-
position: relative;
|
|
178
|
-
width: 100%;
|
|
179
|
-
float: left;
|
|
180
|
-
padding-left: 0;
|
|
181
|
-
height: 100%;
|
|
182
|
-
display: flex;
|
|
183
|
-
flex-wrap: wrap;
|
|
184
|
-
align-items: flex-start;
|
|
185
|
-
flex-direction: column;
|
|
186
|
-
justify-content: space-between;
|
|
187
|
-
padding: 0 4px;
|
|
188
|
-
}
|
|
189
|
-
.timestamp {
|
|
190
|
-
color: #888;
|
|
191
|
-
font-size: 14px;
|
|
192
|
-
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
193
|
-
}
|
|
194
|
-
.tryit_cards .timestamp {
|
|
195
|
-
// position: absolute;
|
|
196
|
-
// right: 0;
|
|
197
|
-
// top: -5px;
|
|
198
|
-
}
|
|
199
|
-
.tryit_cards h4 {
|
|
200
|
-
font-size: 16px;
|
|
201
|
-
margin-top: 0px;
|
|
202
|
-
margin-bottom: 4px;
|
|
203
|
-
font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
204
|
-
width: 100%;
|
|
205
|
-
color: #fff;
|
|
206
|
-
}
|
|
207
|
-
.tryit_cards .tryit_cards_top_right p {
|
|
208
|
-
font-size: 14px;
|
|
209
|
-
color: #fff;
|
|
210
|
-
max-width: 100%;
|
|
211
|
-
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
212
|
-
margin: 0 0 8px 0;
|
|
213
295
|
}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
// padding: 0px;
|
|
217
|
-
// background: #ffffff 0% 0% no-repeat padding-box;
|
|
218
|
-
// box-shadow: 0px 3px 6px #00000029;
|
|
219
|
-
// border-radius: 10px;
|
|
296
|
+
@media (min-width: 2560px) {
|
|
297
|
+
|
|
220
298
|
}
|
|
221
|
-
|
|
222
|
-
|
|
299
|
+
@media (min-width: 3840px) {
|
|
300
|
+
margin-bottom: 30px;
|
|
223
301
|
}
|
|
224
|
-
.tryit_wrapper_card {
|
|
225
|
-
width: 89%;
|
|
226
|
-
margin-left: 20px;
|
|
227
|
-
margin-top: 18px;
|
|
228
|
-
border: none !important;
|
|
229
|
-
|
|
230
|
-
.adaptive_tail_icon {
|
|
231
|
-
position: absolute;
|
|
232
|
-
}
|
|
233
|
-
.adaptive_tail_icon svg {
|
|
234
|
-
width: 6px;
|
|
235
|
-
height: 6px;
|
|
236
|
-
top: 0px;
|
|
237
|
-
margin-left: -5px;
|
|
238
|
-
position: absolute;
|
|
239
|
-
}
|
|
240
302
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
303
|
+
// .tryit_cards_top_right {
|
|
304
|
+
// position: relative;
|
|
305
|
+
// width: 78%;
|
|
306
|
+
// float: left;
|
|
307
|
+
// padding-left: 0;
|
|
308
|
+
// height: 100%;
|
|
309
|
+
// display: flex;
|
|
310
|
+
// flex-wrap: wrap;
|
|
311
|
+
// align-items: center;
|
|
312
|
+
// padding: 0 4px;
|
|
313
|
+
// min-height: 54px;
|
|
314
|
+
// }
|
|
315
|
+
// .timestamp {
|
|
316
|
+
// color: #888;
|
|
317
|
+
// font-size: 10px;
|
|
318
|
+
// font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
319
|
+
// }
|
|
320
|
+
|
|
321
|
+
// .tryit_cards h4 {
|
|
322
|
+
// font-size: 13px;
|
|
323
|
+
// margin-top: 10px;
|
|
324
|
+
// margin-bottom: 0px;
|
|
325
|
+
// font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
326
|
+
// width: 100%;
|
|
327
|
+
// color: #fff;
|
|
328
|
+
|
|
329
|
+
// @media (max-width: 1280px) {
|
|
330
|
+
// font-size: 11px;
|
|
331
|
+
// }
|
|
332
|
+
// }
|
|
333
|
+
// .tryit_cards .tryit_cards_top_right p {
|
|
334
|
+
// font-size: 12px;
|
|
335
|
+
// color: #fff;
|
|
336
|
+
// max-width: 100%;
|
|
337
|
+
// font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
338
|
+
// margin: 0 0 8px 0;
|
|
339
|
+
|
|
340
|
+
// @media (max-width: 1280px) {
|
|
341
|
+
// font-size: 10px;
|
|
342
|
+
// }
|
|
343
|
+
// }
|
|
344
|
+
// .tryit_ticket_details_wrapper button {
|
|
345
|
+
// min-height: 28px;
|
|
346
|
+
// }
|
|
347
|
+
// .tryit_wrapper_card {
|
|
348
|
+
// width: 90%;
|
|
349
|
+
// margin-left: 12px;
|
|
350
|
+
// margin-top: 12px;
|
|
351
|
+
// border: none !important;
|
|
352
|
+
|
|
353
|
+
// .adaptive_tail_icon {
|
|
354
|
+
// position: absolute;
|
|
355
|
+
// }
|
|
356
|
+
// .adaptive_tail_icon svg {
|
|
357
|
+
// width: 6px;
|
|
358
|
+
// height: 6px;
|
|
359
|
+
// top: 0px;
|
|
360
|
+
// margin-left: -5px;
|
|
361
|
+
// position: absolute;
|
|
362
|
+
// }
|
|
251
363
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
364
|
+
// .tryit_cards {
|
|
365
|
+
// margin-top: 0px;
|
|
366
|
+
// width: 98.2%;
|
|
367
|
+
// min-height : 200px;
|
|
368
|
+
// background: #FFFFFF 0% 0% no-repeat padding-box ;
|
|
369
|
+
// box-shadow: 0px 3px 6px #00000029 !important;
|
|
370
|
+
// border-radius: 10px;
|
|
371
|
+
// padding: 12px 30px 12px 0px;
|
|
372
|
+
// float: left;
|
|
373
|
+
|
|
374
|
+
// .widget_title {
|
|
375
|
+
// padding-left : 22px;
|
|
376
|
+
// }
|
|
377
|
+
|
|
378
|
+
// .tryit_ticket_wrapper{
|
|
379
|
+
// padding: 16px 0px 0 16px;
|
|
380
|
+
// box-shadow: none;
|
|
381
|
+
// width: 95.5%;
|
|
382
|
+
// max-height: 164px;
|
|
383
|
+
// overflow-y: scroll;
|
|
384
|
+
// background: #fff;
|
|
385
|
+
// border-radius: 0px 10px 10px 10px;
|
|
386
|
+
// float: left;
|
|
261
387
|
|
|
262
388
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
389
|
+
// .tryit_ticket_details_wrapper{
|
|
390
|
+
// grid-template-columns: auto;
|
|
391
|
+
|
|
392
|
+
// .tryit_ticket_details{
|
|
393
|
+
// .tryit_ticket_colun{
|
|
394
|
+
// width: auto;
|
|
395
|
+
// }
|
|
396
|
+
// }
|
|
397
|
+
// }
|
|
398
|
+
// div:nth-child(3) h6{
|
|
399
|
+
// width: 35%;
|
|
400
|
+
// }
|
|
401
|
+
// .tryit_ticket_details span{
|
|
402
|
+
// position: relative;
|
|
403
|
+
// bottom: 0px;
|
|
404
|
+
// }
|
|
405
|
+
// }
|
|
280
406
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
407
|
+
// .widget_title{
|
|
408
|
+
// gap: 0 8px;
|
|
409
|
+
// align-items: center;
|
|
410
|
+
// margin-bottom: 2px;
|
|
411
|
+
// display: flex;
|
|
286
412
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
413
|
+
// h6{
|
|
414
|
+
// font-size: 13px;
|
|
415
|
+
// font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
416
|
+
// color: #333;
|
|
417
|
+
// margin: 0;
|
|
418
|
+
// }
|
|
419
|
+
// }
|
|
420
|
+
// }
|
|
421
|
+
// .tryit_cards .tryit_cards_wrapper {
|
|
422
|
+
// width: 99%;
|
|
423
|
+
// float: left;
|
|
424
|
+
// background: #fff;
|
|
425
|
+
// border-top: none;
|
|
426
|
+
// border-bottom-right-radius: 10px;
|
|
427
|
+
// border-bottom-left-radius: 12px;
|
|
428
|
+
// border: 1px solid #c8c8c8;
|
|
429
|
+
// }
|
|
430
|
+
|
|
431
|
+
// .tryit_ticket_wrapper.tryit_button_wrapper {
|
|
432
|
+
// padding-top: 0px;
|
|
433
|
+
// display: flex;
|
|
434
|
+
// justify-content: flex-start;
|
|
435
|
+
// flex-direction: row;
|
|
436
|
+
// flex-wrap: wrap;
|
|
437
|
+
// gap: 0 8px;
|
|
438
|
+
// margin-bottom: 12px;
|
|
439
|
+
// padding-bottom: 6px;
|
|
440
|
+
// }
|
|
313
441
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
442
|
+
// .tryit_button_wrapper .tryit_ticket_details_wrapper {
|
|
443
|
+
// left: inherit;
|
|
444
|
+
// width: max-content;
|
|
445
|
+
// width: 100%;
|
|
446
|
+
|
|
447
|
+
// button {
|
|
448
|
+
// margin-top: 0px;
|
|
449
|
+
// min-width: unset;
|
|
450
|
+
// width: 100%;
|
|
451
|
+
// max-width: 100%;
|
|
452
|
+
// margin-right: 0px;
|
|
453
|
+
// margin-bottom: 6px;
|
|
454
|
+
// :hover {
|
|
455
|
+
// box-shadow: 0px 3px 5px #00000029;
|
|
456
|
+
// }
|
|
457
|
+
// }
|
|
458
|
+
// }
|
|
459
|
+
// }
|
|
326
460
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
461
|
+
// .tryit_ticket_details_wrapper .tryit_ticket_details {
|
|
462
|
+
// // margin-bottom: 10px;
|
|
463
|
+
// flex-direction: row;
|
|
464
|
+
// gap: 0 8px;
|
|
465
|
+
// align-items: baseline;
|
|
466
|
+
// display: flex;
|
|
467
|
+
// margin-bottom: 10px;
|
|
468
|
+
// }
|
|
469
|
+
// .tryit_ticket_wrapper h6 {
|
|
470
|
+
// font-size: 12px;
|
|
471
|
+
// width: 35%;
|
|
472
|
+
// margin: 0;
|
|
473
|
+
// font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
474
|
+
// }
|
|
475
|
+
// .tryit_ticket_wrapper p{
|
|
476
|
+
// font-size: 12px;
|
|
477
|
+
// line-height: normal;
|
|
478
|
+
// position: relative;
|
|
479
|
+
// bottom: 1px;
|
|
480
|
+
// width: 60%;
|
|
481
|
+
// font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
482
|
+
// margin: 0;
|
|
483
|
+
// word-break: break-word;
|
|
484
|
+
// }
|
|
342
485
|
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
486
|
+
// .tryit_ticket_wrapper p:first-child{
|
|
487
|
+
// bottom: 3px;
|
|
488
|
+
// }
|
|
489
|
+
`;
|
|
490
|
+
const LogoSize = styled.div`
|
|
491
|
+
width: 40px;
|
|
492
|
+
height: 40px;
|
|
493
|
+
float: left;
|
|
494
|
+
background: #fff;
|
|
495
|
+
border-radius: 50px;
|
|
496
|
+
padding: 2px;
|
|
497
|
+
position: relative;
|
|
498
|
+
display: flex;
|
|
499
|
+
justify-content: center;
|
|
500
|
+
align-items: center;
|
|
347
501
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
max-width: 100%;
|
|
353
|
-
margin-right: 0px;
|
|
354
|
-
margin-bottom: 6px;
|
|
355
|
-
:hover {
|
|
356
|
-
box-shadow: 0px 3px 5px #00000029;
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
// ${ChatMessage} {
|
|
362
|
-
// width: 75%;
|
|
363
|
-
// background: #ffffff 0% 0% no-repeat padding-box;
|
|
364
|
-
// box-shadow: 0px 3px 5px #00000029;
|
|
365
|
-
// border-radius: 0px 10px 10px 10px;
|
|
366
|
-
// }
|
|
367
|
-
.tryit_ticket_details_wrapper .tryit_ticket_details {
|
|
368
|
-
// margin-bottom: 10px;
|
|
369
|
-
flex-direction: row;
|
|
370
|
-
gap: 0 8px;
|
|
371
|
-
align-items: baseline;
|
|
372
|
-
display: flex;
|
|
373
|
-
margin-bottom: 14px;
|
|
374
|
-
}
|
|
375
|
-
.tryit_ticket_wrapper h6 {
|
|
376
|
-
font-size: 14px;
|
|
377
|
-
width: 35%;
|
|
378
|
-
margin: 0;
|
|
379
|
-
font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
380
|
-
}
|
|
381
|
-
.tryit_ticket_wrapper p{
|
|
382
|
-
font-size: 14px;
|
|
383
|
-
line-height: normal;
|
|
384
|
-
position: relative;
|
|
385
|
-
bottom: 1px;
|
|
386
|
-
width: 60%;
|
|
387
|
-
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
388
|
-
margin: 0;
|
|
502
|
+
img {
|
|
503
|
+
width: 36px;
|
|
504
|
+
height: 36px;
|
|
505
|
+
border-radius: 50%;
|
|
389
506
|
}
|
|
390
|
-
|
|
391
|
-
|
|
507
|
+
|
|
508
|
+
svg {
|
|
509
|
+
width: 48px;
|
|
510
|
+
height: 48px;
|
|
392
511
|
}
|
|
393
512
|
`;
|
|
394
513
|
const ChatHeader = styled.div`
|
|
395
514
|
width: 100%;
|
|
396
|
-
height:
|
|
515
|
+
height: 76px;
|
|
397
516
|
display: flex;
|
|
398
517
|
align-items: center;
|
|
399
|
-
padding:0 22px;
|
|
518
|
+
padding: 0 12px 0 22px;
|
|
400
519
|
background: #FFD15C;
|
|
401
520
|
border-top-left-radius: 10px;
|
|
402
521
|
border-top-right-radius: 10px;
|
|
@@ -404,39 +523,86 @@ const ChatHeader = styled.div`
|
|
|
404
523
|
background-size: contain;
|
|
405
524
|
justify-content: space-between;
|
|
406
525
|
box-sizing: border-box;
|
|
407
|
-
// background: ${(props) =>
|
|
408
|
-
props.background ? props.background : "#00887a"};
|
|
409
|
-
|
|
410
526
|
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
527
|
+
@media (min-width: 2160px) {
|
|
528
|
+
height: ${(props) => switchSize(props.size, "86px", "96px", "110px")};
|
|
529
|
+
}
|
|
530
|
+
@media (min-width: 2560px) {
|
|
531
|
+
height: ${(props) => switchSize(props.size, "120px", "138px", "152px")};
|
|
532
|
+
gap: 0px 10px;
|
|
533
|
+
padding: 0 22px 0 26px;
|
|
534
|
+
}
|
|
535
|
+
@media (min-width: 3840px) {
|
|
536
|
+
height: ${(props) => switchSize(props.size, "180px", "198px", "224px")};
|
|
537
|
+
padding: 0 24px 0 28px;
|
|
538
|
+
border-top-left-radius: 20px;
|
|
539
|
+
border-top-right-radius: 20px;
|
|
540
|
+
}
|
|
423
541
|
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
542
|
+
@media (max-width: 1920px) {
|
|
543
|
+
height: ${(props) => switchSize(props.size, "90px", "99px", "112px")};
|
|
544
|
+
}
|
|
545
|
+
@media (max-width: 1680px) {
|
|
546
|
+
height: ${(props) => switchSize(props.size, "76px", "89px", "92px")};
|
|
547
|
+
}
|
|
548
|
+
@media (max-width: 1280px) {
|
|
549
|
+
height: ${(props) => switchSize(props.size, "60px", "69px", "76px")};
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
${LogoSize}{
|
|
553
|
+
@media (min-width: 2160px) {
|
|
554
|
+
width: ${(props) => switchSize(props.size, "52px", "56px", "60px")};
|
|
555
|
+
height: ${(props) => switchSize(props.size, "52px", "58px", "60px")};
|
|
556
|
+
}
|
|
557
|
+
@media (min-width: 2560px) {
|
|
558
|
+
width: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
|
|
559
|
+
height: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
|
|
560
|
+
}
|
|
561
|
+
@media (min-width: 3840px) {
|
|
562
|
+
width: ${(props) => switchSize(props.size, "92px", "104px", "116px")};
|
|
563
|
+
height: ${(props) => switchSize(props.size, "92px", "104px", "116px")};
|
|
564
|
+
}
|
|
429
565
|
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
566
|
+
@media (max-width: 1920px) {
|
|
567
|
+
width: ${(props) => switchSize(props.size, "46px", "52px", "58px")};
|
|
568
|
+
height: ${(props) => switchSize(props.size, "46px", "52px", "58px")};
|
|
569
|
+
}
|
|
570
|
+
@media (max-width: 1680px) {
|
|
571
|
+
width: ${(props) => switchSize(props.size, "40px", "46px", "48px")};
|
|
572
|
+
height: ${(props) => switchSize(props.size, "40px", "46px", "48px")};
|
|
573
|
+
}
|
|
574
|
+
@media (max-width: 1280px) {
|
|
575
|
+
width: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
576
|
+
height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
577
|
+
}
|
|
436
578
|
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
579
|
+
img{
|
|
580
|
+
@media (min-width: 2160px) {
|
|
581
|
+
width: ${(props) => switchSize(props.size, "46px", "52px", "54px")};
|
|
582
|
+
height: ${(props) => switchSize(props.size, "46px", "52px", "53px")};
|
|
583
|
+
}
|
|
584
|
+
@media (min-width: 2560px) {
|
|
585
|
+
width: ${(props) => switchSize(props.size, "54px", "60px", "70px")};
|
|
586
|
+
height: ${(props) => switchSize(props.size, "54px", "60px", "70px")};
|
|
587
|
+
}
|
|
588
|
+
@media (min-width: 3840px) {
|
|
589
|
+
width: ${(props) => switchSize(props.size, "80px", "92px", "96px")};
|
|
590
|
+
height: ${(props) => switchSize(props.size, "80px", "92px", "96px")};
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
@media (max-width: 1920px) {
|
|
594
|
+
width: ${(props) => switchSize(props.size, "40px", "46px", "48px")};
|
|
595
|
+
height: ${(props) => switchSize(props.size, "40px", "46px", "48px")};
|
|
596
|
+
}
|
|
597
|
+
@media (max-width: 1680px) {
|
|
598
|
+
width: ${(props) => switchSize(props.size, "35px", "40px", "42px")};
|
|
599
|
+
height: ${(props) => switchSize(props.size, "35px", "40px", "42px")};
|
|
600
|
+
}
|
|
601
|
+
@media (max-width: 1280px) {
|
|
602
|
+
width: ${(props) => switchSize(props.size, "27px", "30px", "35px")};
|
|
603
|
+
height: ${(props) => switchSize(props.size, "27px", "30px", "35px")};
|
|
604
|
+
}
|
|
605
|
+
}
|
|
440
606
|
}
|
|
441
607
|
`;
|
|
442
608
|
const ContentHeaderLeft = styled.div`
|
|
@@ -452,11 +618,85 @@ const ContentHeaderRight = styled.div`
|
|
|
452
618
|
justify-content: flex-end;
|
|
453
619
|
align-items: center;
|
|
454
620
|
span:first-child {
|
|
455
|
-
margin-right:
|
|
621
|
+
margin-right: 6px;
|
|
622
|
+
|
|
623
|
+
@media (min-width: 3840px) {
|
|
624
|
+
margin-right: 12px;
|
|
625
|
+
}
|
|
626
|
+
@media (max-width: 1920px) {
|
|
627
|
+
margin-right: 8px;
|
|
628
|
+
}
|
|
629
|
+
@media (max-width: 1280px) {
|
|
630
|
+
margin-right: 12px;
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
.restart, .close_section{
|
|
634
|
+
|
|
635
|
+
@media (min-width: 2160px) {
|
|
636
|
+
width: ${(props) => switchSize(props.size, "30px", "32px", "36px")};
|
|
637
|
+
height: ${(props) => switchSize(props.size, "30px", "32px", "36px")};
|
|
638
|
+
}
|
|
639
|
+
@media (min-width: 2560px) {
|
|
640
|
+
width: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
|
|
641
|
+
height: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
|
|
642
|
+
}
|
|
643
|
+
@media (min-width: 3840px) {
|
|
644
|
+
width: ${(props) => switchSize(props.size, "52px", "58px", "66px")};
|
|
645
|
+
height: ${(props) => switchSize(props.size, "53px", "58px", "66px")};
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
@media (max-width: 1920px) {
|
|
649
|
+
width: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
|
|
650
|
+
height: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
|
|
651
|
+
}
|
|
652
|
+
@media (max-width: 1680px) {
|
|
653
|
+
width: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
|
|
654
|
+
height: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
|
|
655
|
+
}
|
|
656
|
+
@media (max-width: 1280px) {
|
|
657
|
+
width: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
|
|
658
|
+
height: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
svg{
|
|
662
|
+
|
|
663
|
+
@media (min-width: 2160px) {
|
|
664
|
+
width: ${(props) => switchSize(props.size, "26px", "30px", "34px")};
|
|
665
|
+
height: ${(props) => switchSize(props.size, "26px", "30px", "34px")};
|
|
666
|
+
}
|
|
667
|
+
@media (min-width: 2560px) {
|
|
668
|
+
width: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
|
|
669
|
+
height: ${(props) => switchSize(props.size, "36px", "40px", "44px")};
|
|
670
|
+
}
|
|
671
|
+
@media (min-width: 3840px) {
|
|
672
|
+
width: ${(props) => switchSize(props.size, "52px", "58px", "66px")};
|
|
673
|
+
height: ${(props) => switchSize(props.size, "53px", "58px", "66px")};
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
@media (max-width: 1920px) {
|
|
677
|
+
width: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
|
|
678
|
+
height: ${(props) => switchSize(props.size, "26px", "29px", "33px")};
|
|
679
|
+
}
|
|
680
|
+
@media (max-width: 1680px) {
|
|
681
|
+
width: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
|
|
682
|
+
height: ${(props) => switchSize(props.size, "22px", "26px", "28px")};
|
|
683
|
+
}
|
|
684
|
+
@media (max-width: 1280px) {
|
|
685
|
+
width: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
|
|
686
|
+
height: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.close_section{
|
|
692
|
+
label{
|
|
693
|
+
right: -8px;
|
|
694
|
+
min-width: 65px;
|
|
695
|
+
}
|
|
456
696
|
}
|
|
457
697
|
`;
|
|
458
698
|
const ContentHeader = styled.div`
|
|
459
|
-
width:
|
|
699
|
+
width: 89%;
|
|
460
700
|
display: flex;
|
|
461
701
|
flex-direction: column;
|
|
462
702
|
padding-left: 0px;
|
|
@@ -464,10 +704,29 @@ const ContentHeader = styled.div`
|
|
|
464
704
|
justify-content: space-between;
|
|
465
705
|
flex-direction: row;
|
|
466
706
|
|
|
707
|
+
@media (min-width: 2160px) {
|
|
708
|
+
width: 88%;
|
|
709
|
+
}
|
|
710
|
+
@media (min-width: 2560px) {
|
|
711
|
+
width: 91.5%;
|
|
712
|
+
}
|
|
713
|
+
@media (min-width: 3840px) {
|
|
714
|
+
width: 89.5%;
|
|
715
|
+
}
|
|
716
|
+
|
|
467
717
|
span {
|
|
468
718
|
position: relative;
|
|
469
|
-
width:
|
|
470
|
-
height:
|
|
719
|
+
width: 20px;
|
|
720
|
+
height: 20px;
|
|
721
|
+
|
|
722
|
+
@media (min-width: 2160px) {
|
|
723
|
+
width: 28px;
|
|
724
|
+
height: 28px;
|
|
725
|
+
}
|
|
726
|
+
@media (min-width: 2560px) {
|
|
727
|
+
width: 28px;
|
|
728
|
+
height: 28px;
|
|
729
|
+
}
|
|
471
730
|
}
|
|
472
731
|
|
|
473
732
|
svg {
|
|
@@ -477,238 +736,852 @@ const ContentHeader = styled.div`
|
|
|
477
736
|
}
|
|
478
737
|
`;
|
|
479
738
|
const Paragraph = styled.p`
|
|
480
|
-
font-family:
|
|
481
|
-
font-size: 14px;
|
|
739
|
+
font-family: "Gordita-Regular", "Open Sans", sans-serif;
|
|
482
740
|
margin: 0;
|
|
483
741
|
width: 100%;
|
|
484
742
|
color: #000;
|
|
485
743
|
text-overflow: ellipsis;
|
|
486
744
|
white-space: nowrap;
|
|
487
745
|
overflow: hidden;
|
|
746
|
+
// font-size: 13px;
|
|
747
|
+
|
|
748
|
+
@media (min-width: 2160px) {
|
|
749
|
+
font-size: ${(props) => switchSize(props.size, "15px", "16px", "18px")};
|
|
750
|
+
}
|
|
751
|
+
@media (min-width: 2560px) {
|
|
752
|
+
font-size: ${(props) => switchSize(props.size, "18px", "22px", "26px")};
|
|
753
|
+
}
|
|
754
|
+
@media (min-width: 3840px) {
|
|
755
|
+
font-size: ${(props) => switchSize(props.size, "30px", "32px", "36px")};
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
@media (max-width: 1920px) {
|
|
759
|
+
font-size: ${(props) => switchSize(props.size, "15px", "16px", "18px")};
|
|
760
|
+
}
|
|
761
|
+
@media (max-width: 1680px) {
|
|
762
|
+
font-size: ${(props) => switchSize(props.size, "13px", "14px", "15px")};
|
|
763
|
+
}
|
|
764
|
+
@media (max-width: 1280px) {
|
|
765
|
+
font-size: ${(props) => switchSize(props.size, "9px", "11px", "13px")};
|
|
766
|
+
margin-left: 3px;
|
|
767
|
+
}
|
|
768
|
+
`;
|
|
769
|
+
const ChatMessage = styled.div`
|
|
770
|
+
width: 85%;
|
|
771
|
+
max-width: max-content;
|
|
772
|
+
padding: 12px 10px 8px 16px !important;
|
|
773
|
+
margin-left: 14px;
|
|
774
|
+
margin-top: 14px;
|
|
775
|
+
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
776
|
+
white-space: pre-wrap;
|
|
777
|
+
box-sizing: border-box;
|
|
778
|
+
word-break: break-word;
|
|
779
|
+
border-radius: 0px 6px 6px 6px;
|
|
780
|
+
color: #333;
|
|
781
|
+
position: relative;
|
|
782
|
+
background: #ffffff 0% 0% no-repeat padding-box;
|
|
783
|
+
box-shadow: 0px 3px 5px #00000029;
|
|
784
|
+
border-radius: 0px 10px 10px 10px;
|
|
785
|
+
// font-size: 13px;
|
|
786
|
+
|
|
787
|
+
@media (min-width: 2160px) {
|
|
788
|
+
font-size: ${(props) => switchSize(props.size, "17px", "19px", "22px")};
|
|
789
|
+
padding: ${(props) => switchSize(props.size, "12px 10px 8px 16px !important", "12px 10px 8px 28px !important", "12px 10px 8px 20px !important")};
|
|
790
|
+
margin-left: ${(props) => switchSize(props.size, "22px", "22px", "26px")};
|
|
791
|
+
margin-top: ${(props) => switchSize(props.size, "32px", "34px", "40px")};
|
|
792
|
+
}
|
|
793
|
+
@media (min-width: 2560px) {
|
|
794
|
+
font-size: ${(props) => switchSize(props.size, "20px", "22px", "26px")};
|
|
795
|
+
padding: ${(props) => switchSize(props.size, "20px 28px 16px 16px !important", "20px 28px 16px 26px !important", "20px 28px 16px 26px !important")};
|
|
796
|
+
margin-left: ${(props) => switchSize(props.size, "22px", "24px", "30px")};
|
|
797
|
+
margin-top: ${(props) => switchSize(props.size, "30px", "36px", "45px")};
|
|
798
|
+
}
|
|
799
|
+
@media (min-width: 3840px) {
|
|
800
|
+
font-size: ${(props) => switchSize(props.size, "30px", "34px", "36px")};
|
|
801
|
+
padding: ${(props) => switchSize(props.size, "24px 38px 16px 42px !important", "24px 38px 16px 42px !important", "24px 38px 16px 42px !important")};
|
|
802
|
+
margin-left: ${(props) => switchSize(props.size, "26px", "30px", "36px")};
|
|
803
|
+
margin-top: ${(props) => switchSize(props.size, "45px", "50px", "60px")};
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
@media (max-width: 1920px) {
|
|
807
|
+
font-size: ${(props) => switchSize(props.size, "15px", "17px", "18px")};
|
|
808
|
+
padding: ${(props) => switchSize(props.size, "12px 10px 8px 28px !important", "12px 10px 8px 28px !important", "12px 10px 8px 20px !important")};
|
|
809
|
+
margin-left: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
|
|
810
|
+
margin-top: ${(props) => switchSize(props.size, "32px", "34px", "34px")};
|
|
811
|
+
}
|
|
812
|
+
@media (max-width: 1680px) {
|
|
813
|
+
font-size: ${(props) => switchSize(props.size, "13px", "15px", "15px")};
|
|
814
|
+
padding: ${(props) => switchSize(props.size, "12px 10px 8px 18px !important", "12px 10px 8px 20px !important", "12px 10px 8px 22px !important")};
|
|
815
|
+
margin-left: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
|
|
816
|
+
margin-top: ${(props) => switchSize(props.size, "26px", "26px", "26px")};
|
|
817
|
+
}
|
|
818
|
+
@media (max-width: 1280px) {
|
|
819
|
+
font-size: ${(props) => switchSize(props.size, "10px", "11px", "13px")};
|
|
820
|
+
padding: ${(props) => switchSize(props.size, "12px 10px 8px 16px !important", "12px 10px 8px 16px !important", "12px 10px 8px 16px !important")};
|
|
821
|
+
margin-left: ${(props) => switchSize(props.size, "16px", "16px", "16px")};
|
|
822
|
+
margin-top: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
svg {
|
|
826
|
+
width: 6px;
|
|
827
|
+
height: 6px;
|
|
828
|
+
top: 0px;
|
|
829
|
+
left: -6px;
|
|
830
|
+
position: absolute;
|
|
831
|
+
color: #fff;
|
|
832
|
+
}
|
|
833
|
+
@media (max-width: 1736px) {
|
|
834
|
+
padding: 8px;
|
|
835
|
+
}
|
|
836
|
+
@media (max-width: 1600px) {
|
|
837
|
+
padding: 5px 8px;
|
|
838
|
+
}
|
|
839
|
+
.timestamp {
|
|
840
|
+
color: #888;
|
|
841
|
+
// font-size: 10px;
|
|
842
|
+
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
843
|
+
position: relative;
|
|
844
|
+
bottom: 0px;
|
|
845
|
+
text-transform: uppercase;
|
|
846
|
+
|
|
847
|
+
@media (min-width: 2160px) {
|
|
848
|
+
font-size: ${(props) => switchSize(props.size, "16px", "19px", "21px")};
|
|
849
|
+
}
|
|
850
|
+
@media (min-width: 2560px) {
|
|
851
|
+
font-size: ${(props) => switchSize(props.size, "14px", "16px", "20px")};
|
|
852
|
+
}
|
|
853
|
+
@media (min-width: 3840px) {
|
|
854
|
+
font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
@media (max-width: 1920px) {
|
|
858
|
+
font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
|
|
859
|
+
}
|
|
860
|
+
@media (max-width: 1680px) {
|
|
861
|
+
font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
|
|
862
|
+
}
|
|
863
|
+
@media (max-width: 1280px) {
|
|
864
|
+
font-size: ${(props) => switchSize(props.size, "7px", "8px", "10px")};
|
|
865
|
+
}
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
.widget_title{
|
|
869
|
+
gap: 0 8px;
|
|
870
|
+
align-items: center;
|
|
871
|
+
margin-bottom: 2px;
|
|
872
|
+
display: flex;
|
|
873
|
+
margin-bottom: 4px;
|
|
874
|
+
|
|
875
|
+
h6{
|
|
876
|
+
// font-size: 13px;
|
|
877
|
+
font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
878
|
+
color: #333;
|
|
879
|
+
margin: 0;
|
|
880
|
+
|
|
881
|
+
|
|
882
|
+
@media (min-width: 2160px) {
|
|
883
|
+
font-size: ${(props) => switchSize(props.size, "16px", "18px", "22px")};
|
|
884
|
+
}
|
|
885
|
+
@media (min-width: 2560px) {
|
|
886
|
+
font-size: ${(props) => switchSize(props.size, "16px", "18px", "24px")};
|
|
887
|
+
}
|
|
888
|
+
@media (min-width: 3840px) {
|
|
889
|
+
font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
@media (max-width: 1920px) {
|
|
893
|
+
font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
|
|
894
|
+
}
|
|
895
|
+
@media (max-width: 1680px) {
|
|
896
|
+
font-size: ${(props) => switchSize(props.size, "12px", "14px", "14px")};
|
|
897
|
+
}
|
|
898
|
+
@media (max-width: 1280px) {
|
|
899
|
+
font-size: ${(props) => switchSize(props.size, "8px", "9px", "12px")};
|
|
900
|
+
}
|
|
901
|
+
}
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
.chatAssistant_one{
|
|
905
|
+
h6{
|
|
906
|
+
font-size: 16px;
|
|
907
|
+
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
908
|
+
color: #555;
|
|
909
|
+
margin: 16px 0 0;
|
|
910
|
+
font-style: italic;
|
|
911
|
+
}
|
|
912
|
+
ol{
|
|
913
|
+
margin: 0;
|
|
914
|
+
padding: 4px 0 0 2px;
|
|
915
|
+
list-style: none;
|
|
916
|
+
li{
|
|
917
|
+
color: #1D48EB;
|
|
918
|
+
font-size: 16px;
|
|
919
|
+
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
920
|
+
margin-bottom: 4px;
|
|
921
|
+
a{
|
|
922
|
+
text-decoration: none;
|
|
923
|
+
cursor: pointer;
|
|
924
|
+
:hover{
|
|
925
|
+
text-decoration: underline;
|
|
926
|
+
}
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
}
|
|
930
|
+
p{
|
|
931
|
+
margin: 6px 0 0;
|
|
932
|
+
}
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
.wid_message{
|
|
936
|
+
font-size: 16px;
|
|
937
|
+
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
938
|
+
}
|
|
488
939
|
`;
|
|
489
940
|
const MessageBox = styled.div`
|
|
490
941
|
width: 100%;
|
|
491
942
|
float: left;
|
|
492
943
|
display: flex;
|
|
944
|
+
|
|
493
945
|
${LogoSize} {
|
|
494
946
|
position: absolute;
|
|
495
947
|
z-index: 1;
|
|
496
|
-
width:
|
|
497
|
-
height:
|
|
948
|
+
// width: 20px;
|
|
949
|
+
// height: 20px;
|
|
498
950
|
border: 1px solid #cecece;
|
|
951
|
+
|
|
952
|
+
@media (min-width: 2160px) {
|
|
953
|
+
width: ${(props) => switchSize(props.size, "36px", "42px", "46px")};
|
|
954
|
+
height: ${(props) => switchSize(props.size, "36px", "42px", "46px")};
|
|
955
|
+
}
|
|
956
|
+
@media (min-width: 2560px) {
|
|
957
|
+
width: ${(props) => switchSize(props.size, "40px", "48px", "56px")};
|
|
958
|
+
height: ${(props) => switchSize(props.size, "40px", "48px", "56px")};
|
|
959
|
+
}
|
|
960
|
+
@media (min-width: 3840px) {
|
|
961
|
+
width: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
|
|
962
|
+
height: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
@media (max-width: 1920px) {
|
|
966
|
+
width: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
967
|
+
height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
968
|
+
}
|
|
969
|
+
@media (max-width: 1680px) {
|
|
970
|
+
width: ${(props) => switchSize(props.size, "28px", "32px", "34px")};
|
|
971
|
+
height: ${(props) => switchSize(props.size, "28px", "32px", "34px")};
|
|
972
|
+
}
|
|
973
|
+
@media (max-width: 1280px) {
|
|
974
|
+
width: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
|
|
975
|
+
height: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
|
|
976
|
+
}
|
|
977
|
+
|
|
499
978
|
img {
|
|
500
|
-
width:
|
|
501
|
-
height:
|
|
979
|
+
// width: 24px;
|
|
980
|
+
// height: 24px;
|
|
981
|
+
|
|
982
|
+
@media (min-width: 2160px) {
|
|
983
|
+
width: ${(props) => switchSize(props.size, "32px", "40px", "44px")};
|
|
984
|
+
height: ${(props) => switchSize(props.size, "32px", "40px", "44px")};
|
|
985
|
+
}
|
|
986
|
+
@media (min-width: 2560px) {
|
|
987
|
+
width: ${(props) => switchSize(props.size, "36px", "44px", "52px")};
|
|
988
|
+
height: ${(props) => switchSize(props.size, "36px", "44px", "52px")};
|
|
989
|
+
}
|
|
990
|
+
@media (min-width: 3840px) {
|
|
991
|
+
width: ${(props) => switchSize(props.size, "64px", "68px", "76px")};
|
|
992
|
+
height: ${(props) => switchSize(props.size, "64px", "68px", "76px")};
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
@media (max-width: 1920px) {
|
|
996
|
+
width: ${(props) => switchSize(props.size, "32px", "34px", "38px")};
|
|
997
|
+
height: ${(props) => switchSize(props.size, "32px", "34px", "38px")};
|
|
998
|
+
}
|
|
999
|
+
@media (max-width: 1680px) {
|
|
1000
|
+
width: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
|
|
1001
|
+
height: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
|
|
1002
|
+
}
|
|
1003
|
+
@media (max-width: 1280px) {
|
|
1004
|
+
width: ${(props) => switchSize(props.size, "18px", "22px", "26px")};
|
|
1005
|
+
height: ${(props) => switchSize(props.size, "18px", "22px", "26px")};
|
|
1006
|
+
}
|
|
502
1007
|
}
|
|
503
1008
|
svg {
|
|
504
|
-
width:
|
|
505
|
-
height:
|
|
1009
|
+
width: 18px;
|
|
1010
|
+
height: 18px;
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
|
|
1014
|
+
.left_arrow {
|
|
1015
|
+
transform: rotate(180deg);
|
|
1016
|
+
}
|
|
1017
|
+
|
|
1018
|
+
.arrows {
|
|
1019
|
+
display : flex;
|
|
1020
|
+
align-items: center;
|
|
1021
|
+
margin-top: 28px;
|
|
1022
|
+
img {
|
|
1023
|
+
width: 16px;
|
|
1024
|
+
height: 32px;
|
|
1025
|
+
cursor: pointer;
|
|
1026
|
+
|
|
1027
|
+
@media (min-width: 2160px) {
|
|
1028
|
+
width: 22px;
|
|
1029
|
+
height: 44px;
|
|
1030
|
+
}
|
|
1031
|
+
@media (min-width: 2560px) {
|
|
1032
|
+
width: 27px;
|
|
1033
|
+
height: 54px;
|
|
1034
|
+
}
|
|
1035
|
+
@media (min-width: 3840px) {
|
|
1036
|
+
width: 32px;
|
|
1037
|
+
height: 64px;
|
|
1038
|
+
}
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
.carousal_wrapper {
|
|
1043
|
+
display : flex;
|
|
1044
|
+
@media (max-width: 1920px) {
|
|
1045
|
+
position: relative;
|
|
1046
|
+
left: 10px;
|
|
1047
|
+
}
|
|
1048
|
+
@media (max-width: 1680px) {
|
|
1049
|
+
position: relative;
|
|
1050
|
+
left: 0px;
|
|
1051
|
+
}
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
.carousal_container {
|
|
1055
|
+
margin-left: auto;
|
|
1056
|
+
margin-right: auto;
|
|
1057
|
+
overflow: hidden;
|
|
1058
|
+
list-style: none;
|
|
1059
|
+
padding: 0;
|
|
1060
|
+
z-index: 1;
|
|
1061
|
+
|
|
1062
|
+
.widget_arrows {
|
|
1063
|
+
display: flex;
|
|
1064
|
+
align-items: center;
|
|
1065
|
+
position: absolute;
|
|
1066
|
+
width: 458px;
|
|
1067
|
+
justify-content: space-between;
|
|
1068
|
+
float: left;
|
|
1069
|
+
left: -20px;
|
|
1070
|
+
top: 44%;
|
|
1071
|
+
|
|
1072
|
+
div:first-child {
|
|
1073
|
+
transform: rotate(180deg);
|
|
1074
|
+
}
|
|
1075
|
+
div:last-child {
|
|
1076
|
+
position: relative;
|
|
1077
|
+
right: 0px;
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
img {
|
|
1081
|
+
width: 16px;
|
|
1082
|
+
height: 32px;
|
|
1083
|
+
}
|
|
1084
|
+
}
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
.carousal_slide_container {
|
|
1088
|
+
position: relative;
|
|
1089
|
+
width: 100%;
|
|
1090
|
+
height: 100%;
|
|
1091
|
+
z-index: 1;
|
|
1092
|
+
display: flex;
|
|
1093
|
+
transition-property: transform;
|
|
1094
|
+
box-sizing: content-box;
|
|
1095
|
+
transition-duration: 300ms;
|
|
1096
|
+
|
|
1097
|
+
.tryit_cards {
|
|
1098
|
+
width: 97%;
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
.slide,
|
|
1102
|
+
.carousal_slide_container {
|
|
1103
|
+
transform: translate3d(0px, 0, 0);
|
|
1104
|
+
}
|
|
1105
|
+
|
|
1106
|
+
.slide {
|
|
1107
|
+
border-radius: 10px;
|
|
1108
|
+
width: 100%;
|
|
1109
|
+
float: left;
|
|
1110
|
+
flex-shrink: 0;
|
|
1111
|
+
position: relative;
|
|
1112
|
+
transition-property: transform;
|
|
1113
|
+
transform: translateZ(0);
|
|
1114
|
+
backface-visibility: hidden;
|
|
1115
|
+
display: flex;
|
|
1116
|
+
flex-direction: column;
|
|
1117
|
+
margin-top: 5px;
|
|
1118
|
+
box-sizing: border-box;
|
|
1119
|
+
overflow: hidden;
|
|
1120
|
+
}
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
.carousal_box_section {
|
|
1124
|
+
position: relative;
|
|
1125
|
+
width: 100%;
|
|
1126
|
+
|
|
1127
|
+
@media (min-width: 2160px) {
|
|
1128
|
+
width: ${(props) => switchSize(props.size, "94.1%", "96%", "98.1%")};
|
|
1129
|
+
}
|
|
1130
|
+
@media (min-width: 2560px) {
|
|
1131
|
+
width: ${(props) => switchSize(props.size, "94.1%", "96%", "98%")};
|
|
1132
|
+
}
|
|
1133
|
+
@media (min-width: 3840px) {
|
|
1134
|
+
width: ${(props) => switchSize(props.size, "97%", "100%", "100%")};
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
@media (max-width: 1920px) {
|
|
1138
|
+
left: 3px;
|
|
1139
|
+
}
|
|
1140
|
+
@media (max-width: 1680px) {
|
|
1141
|
+
left: 1px;
|
|
1142
|
+
}
|
|
1143
|
+
@media (max-width: 1280px) {
|
|
1144
|
+
left: 0px;
|
|
1145
|
+
}
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
.adaptive_card_box {
|
|
1149
|
+
width: 99.7%;
|
|
1150
|
+
flex-direction: row-reverse;
|
|
1151
|
+
display: flex;
|
|
1152
|
+
background: transparent linear-gradient(180deg, #444444 0%, #222222 100%) 0% 0% no-repeat padding-box;
|
|
1153
|
+
justify-content: space-evenly;
|
|
1154
|
+
border-radius: 10px 11px 0 0;
|
|
1155
|
+
align-items: center;
|
|
1156
|
+
|
|
1157
|
+
@media (min-width: 2160px) {
|
|
1158
|
+
gap: ${(props) => switchSize(props.size, "4%", "6%", "6%")};
|
|
1159
|
+
height: ${(props) => switchSize(props.size, "76px", "84px", "90px")};
|
|
1160
|
+
border-radius: ${(props) => switchSize(props.size, "10px 12px 0 0;", "12px 14px 0 0;", "16px 18px 0 0;")};
|
|
1161
|
+
}
|
|
1162
|
+
@media (min-width: 2560px) {
|
|
1163
|
+
gap: ${(props) => switchSize(props.size, "4%", "6%", "6%")};
|
|
1164
|
+
height: ${(props) => switchSize(props.size, "80px", "100px", "110px")};
|
|
1165
|
+
border-radius: ${(props) => switchSize(props.size, "16px 18px 0 0;", "20px 22px 0 0;", "20px 22px 0 0;")};
|
|
1166
|
+
}
|
|
1167
|
+
@media (min-width: 3840px) {
|
|
1168
|
+
gap: ${(props) => switchSize(props.size, "8%", "10%", "10%")};
|
|
1169
|
+
height: ${(props) => switchSize(props.size, "100px", "116px", "124px")};
|
|
1170
|
+
border-radius: ${(props) => switchSize(props.size, "16px 18px 0 0;", "20px 22px 0 0;", "20px 22px 0 0;")};
|
|
1171
|
+
}
|
|
1172
|
+
|
|
1173
|
+
.tryit_cards_top_left{
|
|
1174
|
+
width: 28px;
|
|
1175
|
+
height: 24px;
|
|
1176
|
+
margin-right: 0;
|
|
1177
|
+
position: relative;
|
|
1178
|
+
float: left;
|
|
1179
|
+
border: 1px solid rgb(225, 225, 225);
|
|
1180
|
+
display: flex;
|
|
1181
|
+
align-items: center;
|
|
1182
|
+
background: #fff;
|
|
1183
|
+
justify-content: center;
|
|
1184
|
+
border-radius: 50%;
|
|
1185
|
+
|
|
1186
|
+
@media (min-width: 2160px) {
|
|
1187
|
+
width: 36px;
|
|
1188
|
+
height: 28px;
|
|
1189
|
+
}
|
|
1190
|
+
@media (min-width: 2560px) {
|
|
1191
|
+
width: 46px;
|
|
1192
|
+
height: 38px;
|
|
1193
|
+
}
|
|
1194
|
+
@media (min-width: 3840px) {
|
|
1195
|
+
width: 56px;
|
|
1196
|
+
height: 48px;
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
img{
|
|
1200
|
+
max-width: 100%;
|
|
1201
|
+
height: auto;
|
|
1202
|
+
border-radius: 50%;
|
|
1203
|
+
}
|
|
1204
|
+
}
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
.chat_adaptiveCard_section{
|
|
1208
|
+
margin: 10px 10px 10px 16px;
|
|
1209
|
+
width: 100%;
|
|
1210
|
+
float: left;
|
|
1211
|
+
position: relative;
|
|
1212
|
+
|
|
1213
|
+
@media (max-width: 1280px) {
|
|
1214
|
+
margin: 4px 10px 10px 16px;
|
|
1215
|
+
}
|
|
1216
|
+
}
|
|
1217
|
+
|
|
1218
|
+
.tryit_cards_top_right {
|
|
1219
|
+
position: relative;
|
|
1220
|
+
width: 78%;
|
|
1221
|
+
float: left;
|
|
1222
|
+
padding-left: 0;
|
|
1223
|
+
height: 100%;
|
|
1224
|
+
display: flex;
|
|
1225
|
+
flex-wrap: wrap;
|
|
1226
|
+
align-items: center;
|
|
1227
|
+
padding: 0 4px;
|
|
1228
|
+
min-height: 54px;
|
|
1229
|
+
|
|
1230
|
+
@media (min-width: 2160px) {
|
|
1231
|
+
width: 74%;
|
|
1232
|
+
}
|
|
1233
|
+
|
|
1234
|
+
}
|
|
1235
|
+
|
|
1236
|
+
.timestamp {
|
|
1237
|
+
color: #888;
|
|
1238
|
+
font-size: 10px;
|
|
1239
|
+
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
1240
|
+
|
|
1241
|
+
|
|
1242
|
+
@media (min-width: 2160px) {
|
|
1243
|
+
font-size: ${(props) => switchSize(props.size, "12px", "12px", "16px")};
|
|
1244
|
+
}
|
|
1245
|
+
@media (min-width: 2560px) {
|
|
1246
|
+
font-size: ${(props) => switchSize(props.size, "16px", "16px", "20px")};
|
|
1247
|
+
}
|
|
1248
|
+
@media (min-width: 3840px) {
|
|
1249
|
+
font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
@media (max-width: 1920px) {
|
|
1253
|
+
font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
|
|
1254
|
+
}
|
|
1255
|
+
@media (max-width: 1600px) {
|
|
1256
|
+
font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
|
|
1257
|
+
}
|
|
1258
|
+
@media (max-width: 1280px) {
|
|
1259
|
+
font-size: ${(props) => switchSize(props.size, "8px", "8px", "10px")};
|
|
506
1260
|
}
|
|
507
1261
|
}
|
|
1262
|
+
|
|
1263
|
+
.tryit_cards h4 {
|
|
1264
|
+
font-size: 13px;
|
|
1265
|
+
margin-top: 10px;
|
|
1266
|
+
margin-bottom: 0px;
|
|
1267
|
+
font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
1268
|
+
width: 100%;
|
|
1269
|
+
color: #fff;
|
|
1270
|
+
|
|
1271
|
+
@media (min-width: 2160px) {
|
|
1272
|
+
font-size: ${(props) => switchSize(props.size, "16px", "16px", "21px")};
|
|
1273
|
+
}
|
|
1274
|
+
@media (min-width: 2560px) {
|
|
1275
|
+
font-size: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
|
|
1276
|
+
}
|
|
1277
|
+
@media (min-width: 3840px) {
|
|
1278
|
+
font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
|
|
1279
|
+
margin-top: 16px;
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
@media (max-width: 1920px) {
|
|
1283
|
+
font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
|
|
1284
|
+
}
|
|
1285
|
+
@media (max-width: 1600px) {
|
|
1286
|
+
font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
|
|
1287
|
+
}
|
|
1288
|
+
@media (max-width: 1280px) {
|
|
1289
|
+
font-size: ${(props) => switchSize(props.size, "8px", "8px", "11px")};
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
}
|
|
1293
|
+
|
|
1294
|
+
.tryit_cards .tryit_cards_top_right p {
|
|
1295
|
+
font-size: 12px;
|
|
1296
|
+
color: #fff;
|
|
1297
|
+
max-width: 100%;
|
|
1298
|
+
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
1299
|
+
margin: 0 0 8px 0;
|
|
1300
|
+
display: flex;
|
|
1301
|
+
|
|
1302
|
+
@media (min-width: 2160px) {
|
|
1303
|
+
font-size: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
|
|
1304
|
+
}
|
|
1305
|
+
@media (min-width: 2560px) {
|
|
1306
|
+
font-size: ${(props) => switchSize(props.size, "18px", "20px", "22px")};
|
|
1307
|
+
}
|
|
1308
|
+
@media (min-width: 3840px) {
|
|
1309
|
+
font-size: ${(props) => switchSize(props.size, "24px", "24px", "24px")};
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
a{
|
|
1313
|
+
color: #fff;
|
|
1314
|
+
text-decoration: none;
|
|
1315
|
+
}
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1318
|
+
.tryit_ticket_details_wrapper button {
|
|
1319
|
+
min-height: 28px;
|
|
1320
|
+
}
|
|
1321
|
+
|
|
1322
|
+
.tryit_wrapper_card {
|
|
1323
|
+
width: 90%;
|
|
1324
|
+
margin-left: 12px;
|
|
1325
|
+
margin-top: 12px;
|
|
1326
|
+
border: none !important;
|
|
1327
|
+
|
|
1328
|
+
@media (min-width: 2160px) {
|
|
1329
|
+
margin-left: ${(props) => switchSize(props.size, "28px", "28px", "28px")};
|
|
1330
|
+
margin-top: ${(props) => switchSize(props.size, "34px", "34px", "34px")};
|
|
1331
|
+
}
|
|
1332
|
+
@media (min-width: 2560px) {
|
|
1333
|
+
margin-left: ${(props) => switchSize(props.size, "20px", "25px", "20px")};
|
|
1334
|
+
margin-top: ${(props) => switchSize(props.size, "30px", "45px", "30px")};
|
|
1335
|
+
}
|
|
1336
|
+
@media (min-width: 3840px) {
|
|
1337
|
+
margin-left: ${(props) => switchSize(props.size, "30px", "44px", "44px")};
|
|
1338
|
+
margin-top: ${(props) => switchSize(props.size, "56px", "56px", "56px")};
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
@media (max-width: 1920px) {
|
|
1342
|
+
margin-left: ${(props) => switchSize(props.size, "22px", "22px", "22px")};
|
|
1343
|
+
margin-top: ${(props) => switchSize(props.size, "28px", "28px", "28px")};
|
|
1344
|
+
}
|
|
1345
|
+
@media (max-width: 1680px) {
|
|
1346
|
+
margin-left: ${(props) => switchSize(props.size, "14px", "18px", "18px")};
|
|
1347
|
+
margin-top: ${(props) => switchSize(props.size, "22px", "28px", "28px")};
|
|
1348
|
+
}
|
|
1349
|
+
@media (max-width: 1280px) {
|
|
1350
|
+
margin-left: ${(props) => switchSize(props.size, "10px", "10px", "10px")};
|
|
1351
|
+
margin-top: ${(props) => switchSize(props.size, "15px", "15px", "15px")};
|
|
1352
|
+
}
|
|
1353
|
+
|
|
1354
|
+
@media (max-width: 1280px){
|
|
1355
|
+
margin-left: 16px;
|
|
1356
|
+
margin-top: 22px;
|
|
1357
|
+
}
|
|
1358
|
+
|
|
1359
|
+
.adaptive_tail_icon {
|
|
1360
|
+
position: absolute;
|
|
1361
|
+
}
|
|
1362
|
+
.adaptive_tail_icon svg {
|
|
1363
|
+
width: 6px;
|
|
1364
|
+
height: 6px;
|
|
1365
|
+
top: 0px;
|
|
1366
|
+
margin-left: -5px;
|
|
1367
|
+
position: absolute;
|
|
1368
|
+
}
|
|
1369
|
+
|
|
1370
|
+
.tryit_cards {
|
|
1371
|
+
margin-top: 0px;
|
|
1372
|
+
width: 98.2%;
|
|
1373
|
+
min-height : 200px;
|
|
1374
|
+
background: #FFFFFF 0% 0% no-repeat padding-box ;
|
|
1375
|
+
box-shadow: 0px 3px 6px #00000029 !important;
|
|
1376
|
+
border-radius: 10px;
|
|
1377
|
+
padding: 12px 30px 12px 0px;
|
|
1378
|
+
float: left;
|
|
1379
|
+
|
|
1380
|
+
@media (min-width: 2160px) {
|
|
1381
|
+
padding: ${(props) => switchSize(props.size, "12px 30px 12px 0px", "12px 30px 12px 0px", "12px 36px 12px 2px")};
|
|
1382
|
+
width: 99%;
|
|
1383
|
+
}
|
|
1384
|
+
@media (min-width: 2560px) {
|
|
1385
|
+
padding: ${(props) => switchSize(props.size, "12px 30px 12px 0px", "12px 30px 12px 0px", "24px 44px 24px 20px")};
|
|
1386
|
+
}
|
|
1387
|
+
@media (min-width: 3840px) {
|
|
1388
|
+
padding: ${(props) => switchSize(props.size, "24px 50px 24px 25px", "24px 50px 24px 25px", "24px 50px 24px 25px")};
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
.widget_title {
|
|
1392
|
+
padding-left : 22px;
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
.tryit_ticket_wrapper{
|
|
1396
|
+
padding: 16px 0px 0 16px;
|
|
1397
|
+
box-shadow: none;
|
|
1398
|
+
width: 95.5%;
|
|
1399
|
+
max-height: 164px;
|
|
1400
|
+
overflow-y: scroll;
|
|
1401
|
+
background: #fff;
|
|
1402
|
+
border-radius: 0px 10px 10px 10px;
|
|
1403
|
+
float: left;
|
|
1404
|
+
|
|
1405
|
+
@media (min-width: 2160px) {
|
|
1406
|
+
max-height: ${(props) => switchSize(props.size, "186px", "190px", "230px")};
|
|
1407
|
+
}
|
|
1408
|
+
@media (min-width: 2560px) {
|
|
1409
|
+
max-height: ${(props) => switchSize(props.size, "186px", "190px", "230px")};
|
|
1410
|
+
}
|
|
1411
|
+
@media (min-width: 3840px) {
|
|
1412
|
+
max-height: ${(props) => switchSize(props.size, "280px", "328px", "328px")};
|
|
1413
|
+
}
|
|
1414
|
+
|
|
1415
|
+
|
|
1416
|
+
.tryit_ticket_details_wrapper{
|
|
1417
|
+
grid-template-columns: auto;
|
|
1418
|
+
|
|
1419
|
+
.tryit_ticket_details{
|
|
1420
|
+
.tryit_ticket_colun{
|
|
1421
|
+
width: auto;
|
|
1422
|
+
}
|
|
1423
|
+
}
|
|
1424
|
+
}
|
|
1425
|
+
div:nth-child(3) h6{
|
|
1426
|
+
width: 35%;
|
|
1427
|
+
}
|
|
1428
|
+
.tryit_ticket_details span{
|
|
1429
|
+
position: relative;
|
|
1430
|
+
bottom: 0px;
|
|
1431
|
+
}
|
|
1432
|
+
}
|
|
1433
|
+
|
|
1434
|
+
.widget_title{
|
|
1435
|
+
gap: 0 8px;
|
|
1436
|
+
align-items: center;
|
|
1437
|
+
margin-bottom: 2px;
|
|
1438
|
+
display: flex;
|
|
1439
|
+
|
|
1440
|
+
h6{
|
|
1441
|
+
font-size: 13px;
|
|
1442
|
+
font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
1443
|
+
color: #333;
|
|
1444
|
+
margin: 0;
|
|
508
1445
|
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
1446
|
+
@media (min-width: 2160px) {
|
|
1447
|
+
font-size: ${(props) => switchSize(props.size, "16px", "18px", "22px")};
|
|
1448
|
+
}
|
|
1449
|
+
@media (min-width: 2560px) {
|
|
1450
|
+
font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
|
|
1451
|
+
}
|
|
1452
|
+
@media (min-width: 3840px) {
|
|
1453
|
+
font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
|
|
1454
|
+
}
|
|
516
1455
|
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
1456
|
+
@media (max-width: 1920px) {
|
|
1457
|
+
font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
|
|
1458
|
+
}
|
|
1459
|
+
@media (max-width: 1600px) {
|
|
1460
|
+
font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
|
|
1461
|
+
}
|
|
1462
|
+
@media (max-width: 1280px) {
|
|
1463
|
+
font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
|
|
1464
|
+
}
|
|
1465
|
+
}
|
|
1466
|
+
}
|
|
1467
|
+
}
|
|
1468
|
+
.tryit_cards .tryit_cards_wrapper {
|
|
1469
|
+
width: 99%;
|
|
523
1470
|
float: left;
|
|
524
|
-
|
|
525
|
-
top:
|
|
1471
|
+
background: #fff;
|
|
1472
|
+
border-top: none;
|
|
1473
|
+
border-bottom-right-radius: 10px;
|
|
1474
|
+
border-bottom-left-radius: 12px;
|
|
1475
|
+
border: 1px solid #c8c8c8;
|
|
526
1476
|
|
|
527
|
-
|
|
528
|
-
|
|
1477
|
+
@media (min-width: 2160px) {
|
|
1478
|
+
font-size: ${(props) => switchSize(props.size, "20px", "21px", "22px")};
|
|
529
1479
|
}
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
1480
|
+
@media (min-width: 2560px) {
|
|
1481
|
+
font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
|
|
1482
|
+
width: 99.4%;
|
|
533
1483
|
}
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
width: 16px;
|
|
537
|
-
height: 32px;
|
|
1484
|
+
@media (min-width: 3840px) {
|
|
1485
|
+
width: 99.3%;
|
|
538
1486
|
}
|
|
539
1487
|
}
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
position: relative;
|
|
544
|
-
width: 100%;
|
|
545
|
-
height: 100%;
|
|
546
|
-
z-index: 1;
|
|
1488
|
+
|
|
1489
|
+
.tryit_ticket_wrapper.tryit_button_wrapper {
|
|
1490
|
+
padding-top: 0px;
|
|
547
1491
|
display: flex;
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
}
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
.slide,
|
|
558
|
-
.carousal_slide_container {
|
|
559
|
-
transform: translate3d(0px, 0, 0);
|
|
1492
|
+
justify-content: flex-start;
|
|
1493
|
+
flex-direction: row;
|
|
1494
|
+
flex-wrap: wrap;
|
|
1495
|
+
gap: 0 8px;
|
|
1496
|
+
margin-bottom: 12px;
|
|
1497
|
+
padding-bottom: 6px;
|
|
560
1498
|
}
|
|
561
1499
|
|
|
562
|
-
.
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
padding: 0px 12px 8px 0;
|
|
1500
|
+
.tryit_button_wrapper .tryit_ticket_details_wrapper {
|
|
1501
|
+
left: inherit;
|
|
1502
|
+
width: max-content;
|
|
566
1503
|
width: 100%;
|
|
567
|
-
max-height: 320px;
|
|
568
|
-
float: left;
|
|
569
|
-
flex-shrink: 0;
|
|
570
|
-
position: relative;
|
|
571
|
-
transition-property: transform;
|
|
572
|
-
transform: translateZ(0);
|
|
573
|
-
backface-visibility: hidden;
|
|
574
|
-
// overflow-y: scroll;
|
|
575
|
-
display: flex;
|
|
576
|
-
// justify-content: space-between;
|
|
577
|
-
flex-direction: column;
|
|
578
|
-
overflow-x: hidden;
|
|
579
|
-
margin-top: 5px;
|
|
580
|
-
box-sizing: border-box;
|
|
581
|
-
left: 2px;
|
|
582
|
-
overflow: hidden;
|
|
583
|
-
}
|
|
584
1504
|
|
|
585
|
-
|
|
586
|
-
|
|
1505
|
+
button {
|
|
1506
|
+
margin-top: 0px;
|
|
1507
|
+
min-width: unset;
|
|
1508
|
+
width: 100%;
|
|
1509
|
+
max-width: 100%;
|
|
1510
|
+
margin-right: 0px;
|
|
1511
|
+
margin-bottom: 6px;
|
|
1512
|
+
:hover {
|
|
1513
|
+
box-shadow: 0px 3px 5px #00000029;
|
|
1514
|
+
}
|
|
1515
|
+
}
|
|
587
1516
|
}
|
|
588
1517
|
}
|
|
589
1518
|
|
|
590
|
-
.
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
width: 98%;
|
|
1519
|
+
.tryit_ticket_details_wrapper .tryit_ticket_details {
|
|
1520
|
+
flex-direction: row;
|
|
1521
|
+
gap: 0 8px;
|
|
1522
|
+
align-items: baseline;
|
|
1523
|
+
display: flex;
|
|
1524
|
+
margin-bottom: 10px;
|
|
597
1525
|
}
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
width:
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
border:none;
|
|
604
|
-
padding: 0 12px 12px 0px;
|
|
605
|
-
display: flex;
|
|
606
|
-
align-items: flex-start;
|
|
607
|
-
border-top-right-radius: .375rem;
|
|
608
|
-
// background: ${(props) => props.background}!important;
|
|
609
|
-
flex-direction: column;
|
|
610
|
-
background: #FFFFFF 0% 0% no-repeat padding-box;
|
|
611
|
-
box-shadow: 0px 3px 6px #00000029;
|
|
612
|
-
border-radius: 10px;
|
|
613
|
-
margin-top: 4px;
|
|
614
|
-
|
|
615
|
-
.tryit_cards_left{
|
|
616
|
-
width: 100%;
|
|
617
|
-
float: left;
|
|
618
|
-
// box-shadow: 0px 3px 6px #00000029;
|
|
619
|
-
border-radius: 0px 10px 10px 10px;
|
|
620
|
-
}
|
|
621
|
-
`;
|
|
622
|
-
const ChatMessage = styled.div`
|
|
623
|
-
width: 85%;
|
|
624
|
-
max-width: max-content;
|
|
625
|
-
padding: 18px 26px 10px 22px !important;
|
|
626
|
-
margin-left: 20px;
|
|
627
|
-
font-size: 18px;
|
|
628
|
-
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
629
|
-
white-space: pre-wrap;
|
|
630
|
-
box-sizing: border-box;
|
|
631
|
-
word-break: break-word;
|
|
632
|
-
border-radius: 0px 6px 6px 6px;
|
|
633
|
-
color: #333;
|
|
634
|
-
position: relative;
|
|
635
|
-
// background: ${(props) => props.background}!important;
|
|
636
|
-
margin-top: 18px;
|
|
637
|
-
background: #ffffff 0% 0% no-repeat padding-box;
|
|
638
|
-
box-shadow: 0px 3px 5px #00000029;
|
|
639
|
-
border-radius: 0px 10px 10px 10px;
|
|
1526
|
+
.tryit_ticket_wrapper h6 {
|
|
1527
|
+
font-size: 12px;
|
|
1528
|
+
width: 35%;
|
|
1529
|
+
margin: 0;
|
|
1530
|
+
font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
|
|
640
1531
|
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
1532
|
+
@media (min-width: 2160px) {
|
|
1533
|
+
font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
|
|
1534
|
+
}
|
|
1535
|
+
@media (min-width: 2560px) {
|
|
1536
|
+
font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
|
|
1537
|
+
}
|
|
1538
|
+
@media (min-width: 3840px) {
|
|
1539
|
+
font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
@media (max-width: 1920px) {
|
|
1543
|
+
font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
|
|
1544
|
+
}
|
|
1545
|
+
@media (max-width: 1600px) {
|
|
1546
|
+
font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
|
|
1547
|
+
}
|
|
1548
|
+
@media (max-width: 1280px) {
|
|
1549
|
+
font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
|
|
1550
|
+
}
|
|
654
1551
|
}
|
|
655
|
-
.
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
1552
|
+
.tryit_ticket_wrapper p{
|
|
1553
|
+
font-size: 12px;
|
|
1554
|
+
line-height: normal;
|
|
659
1555
|
position: relative;
|
|
660
|
-
bottom:
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
align-items: center;
|
|
666
|
-
margin-bottom: 2px;
|
|
667
|
-
display: flex;
|
|
668
|
-
margin-bottom: 4px;
|
|
1556
|
+
bottom: 1px;
|
|
1557
|
+
width: 60%;
|
|
1558
|
+
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
1559
|
+
margin: 0;
|
|
1560
|
+
word-break: break-word;
|
|
669
1561
|
|
|
670
|
-
|
|
671
|
-
font-size: 16px;
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
1562
|
+
@media (min-width: 2160px) {
|
|
1563
|
+
font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
|
|
1564
|
+
}
|
|
1565
|
+
@media (min-width: 2560px) {
|
|
1566
|
+
font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
|
|
1567
|
+
}
|
|
1568
|
+
@media (min-width: 3840px) {
|
|
1569
|
+
font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
|
|
675
1570
|
}
|
|
676
|
-
}
|
|
677
1571
|
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
font-size: 16px;
|
|
681
|
-
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
682
|
-
color: #555;
|
|
683
|
-
margin: 16px 0 0;
|
|
684
|
-
font-style: italic;
|
|
1572
|
+
@media (max-width: 1920px) {
|
|
1573
|
+
font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
|
|
685
1574
|
}
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
padding: 4px 0 0 2px;
|
|
689
|
-
list-style: none;
|
|
690
|
-
li{
|
|
691
|
-
color: #1D48EB;
|
|
692
|
-
font-size: 16px;
|
|
693
|
-
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
694
|
-
margin-bottom: 4px;
|
|
695
|
-
a{
|
|
696
|
-
text-decoration: none;
|
|
697
|
-
cursor: pointer;
|
|
698
|
-
:hover{
|
|
699
|
-
text-decoration: underline;
|
|
700
|
-
}
|
|
701
|
-
}
|
|
702
|
-
}
|
|
1575
|
+
@media (max-width: 1600px) {
|
|
1576
|
+
font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
|
|
703
1577
|
}
|
|
704
|
-
|
|
705
|
-
|
|
1578
|
+
@media (max-width: 1280px) {
|
|
1579
|
+
font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
|
|
706
1580
|
}
|
|
707
1581
|
}
|
|
708
1582
|
|
|
709
|
-
.
|
|
710
|
-
|
|
711
|
-
font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
|
|
1583
|
+
.tryit_ticket_wrapper p:first-child{
|
|
1584
|
+
bottom: 3px;
|
|
712
1585
|
}
|
|
713
1586
|
`;
|
|
714
1587
|
const UserChat = styled.div`
|
|
@@ -716,7 +1589,7 @@ const UserChat = styled.div`
|
|
|
716
1589
|
float: left;
|
|
717
1590
|
display: flex;
|
|
718
1591
|
align-items: center;
|
|
719
|
-
margin:
|
|
1592
|
+
margin-bottom: 12px;
|
|
720
1593
|
place-self: flex-end;
|
|
721
1594
|
position: relative;
|
|
722
1595
|
|
|
@@ -732,29 +1605,150 @@ const UserChat = styled.div`
|
|
|
732
1605
|
margin-bottom: 0px;
|
|
733
1606
|
}
|
|
734
1607
|
${LogoSize} {
|
|
1608
|
+
|
|
1609
|
+
@media (min-width: 2160px) {
|
|
1610
|
+
width: ${(props) => switchSize(props.size, "38px", "42px", "46px")};
|
|
1611
|
+
height: ${(props) => switchSize(props.size, "38px", "42px", "46px")};
|
|
1612
|
+
}
|
|
1613
|
+
@media (min-width: 2560px) {
|
|
1614
|
+
width: ${(props) => switchSize(props.size, "40px", "48px", "56px")};
|
|
1615
|
+
height: ${(props) => switchSize(props.size, "40px", "48px", "56px")};
|
|
1616
|
+
}
|
|
1617
|
+
@media (min-width: 3840px) {
|
|
1618
|
+
width: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
|
|
1619
|
+
height: ${(props) => switchSize(props.size, "64px", "72px", "80px")};
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
@media (max-width: 1920px) {
|
|
1623
|
+
width: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
1624
|
+
height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
1625
|
+
}
|
|
1626
|
+
@media (max-width: 1680px) {
|
|
1627
|
+
width: ${(props) => switchSize(props.size, "28px", "32px", "34px")};
|
|
1628
|
+
height: ${(props) => switchSize(props.size, "28px", "32px", "34px")};
|
|
1629
|
+
}
|
|
1630
|
+
@media (max-width: 1280px) {
|
|
1631
|
+
width: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
|
|
1632
|
+
height: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
|
|
1633
|
+
}
|
|
735
1634
|
svg {
|
|
736
|
-
width:
|
|
737
|
-
height:
|
|
1635
|
+
// width: 18px;
|
|
1636
|
+
// height: 18px;
|
|
738
1637
|
top: 0px;
|
|
739
1638
|
left: inherit;
|
|
740
1639
|
position: relative;
|
|
741
1640
|
right: 0px;
|
|
742
1641
|
fill: #617b98;
|
|
1642
|
+
|
|
1643
|
+
@media (min-width: 2160px) {
|
|
1644
|
+
width: ${(props) => switchSize(props.size, "22px", "24px", "26px")};
|
|
1645
|
+
height: ${(props) => switchSize(props.size, "22px", "24px", "26px")};
|
|
1646
|
+
}
|
|
1647
|
+
@media (min-width: 2560px) {
|
|
1648
|
+
width: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
|
|
1649
|
+
height: ${(props) => switchSize(props.size, "20px", "24px", "28px")};
|
|
1650
|
+
}
|
|
1651
|
+
@media (min-width: 3840px) {
|
|
1652
|
+
width: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
1653
|
+
height: ${(props) => switchSize(props.size, "32px", "36px", "40px")};
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
@media (max-width: 1920px) {
|
|
1657
|
+
width: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
|
|
1658
|
+
height: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
|
|
1659
|
+
}
|
|
1660
|
+
@media (max-width: 1680px) {
|
|
1661
|
+
width: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
|
|
1662
|
+
height: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
|
|
1663
|
+
}
|
|
1664
|
+
@media (max-width: 1280px) {
|
|
1665
|
+
width: ${(props) => switchSize(props.size, "10px", "12px", "14px")};
|
|
1666
|
+
height: ${(props) => switchSize(props.size, "10px", "12px", "14px")};
|
|
1667
|
+
}
|
|
743
1668
|
}
|
|
744
1669
|
}
|
|
745
1670
|
${ChatMessage} {
|
|
746
1671
|
margin-left: 0px;
|
|
747
|
-
margin-right:
|
|
748
|
-
padding: 12px 18px !important;
|
|
749
|
-
// box-shadow: 0px 3px 5px #00000029;
|
|
750
|
-
// border-radius: 10px 0px 10px 10px;
|
|
751
|
-
// background: ${(props) => props.background}!important;
|
|
752
|
-
|
|
1672
|
+
margin-right: 14px;
|
|
1673
|
+
padding: 12px 18px 8px 12px !important;
|
|
753
1674
|
color: #000;
|
|
754
|
-
// border: 1px solid ${(props) => props.background};
|
|
755
1675
|
background: #F0F7FF 0% 0% no-repeat padding-box;
|
|
756
1676
|
box-shadow: 0px 3px 6px #00000029;
|
|
757
1677
|
border-radius: 10px;
|
|
1678
|
+
|
|
1679
|
+
@media (min-width: 2160px) {
|
|
1680
|
+
margin-right: ${(props) => switchSize(props.size, "16px", "18px", "24px")};
|
|
1681
|
+
margin-top: ${(props) => switchSize(props.size, "20px", "24px", "36px")};
|
|
1682
|
+
padding: ${(props) => switchSize(props.size, "12px 28px 8px 12px !important", "12px 28px 8px 12px !important", "12px 28px 8px 12px !important")};
|
|
1683
|
+
}
|
|
1684
|
+
@media (min-width: 2560px) {
|
|
1685
|
+
margin-right: ${(props) => switchSize(props.size, "20px", "24px", "32px")};
|
|
1686
|
+
margin-top: ${(props) => switchSize(props.size, "28px", "36px", "36px")};
|
|
1687
|
+
padding: ${(props) => switchSize(props.size, "12px 22px 8px 16px !important", "12px 24px 8px 18px !important", "12px 26px 8px 20px !important")};
|
|
1688
|
+
}
|
|
1689
|
+
@media (min-width: 3840px) {
|
|
1690
|
+
margin-right: ${(props) => switchSize(props.size, "30px", "34px", "40px")};
|
|
1691
|
+
margin-top: ${(props) => switchSize(props.size, "46px", "54px", "60px")};
|
|
1692
|
+
padding: ${(props) => switchSize(props.size, "12px 46px 8px 22px !important", "12px 46px 8px 22px !important", "12px 46px 8px 22px !important")};
|
|
1693
|
+
}
|
|
1694
|
+
|
|
1695
|
+
@media (max-width: 1920px) {
|
|
1696
|
+
margin-right: ${(props) => switchSize(props.size, "10px", "12px", "22px")};
|
|
1697
|
+
margin-top: ${(props) => switchSize(props.size, "14px", "18px", "30px")};
|
|
1698
|
+
padding: ${(props) => switchSize(props.size, "12px 28px 8px 12px !important", "12px 28px 8px 12px !important", "12px 28px 8px 12px !important")};
|
|
1699
|
+
}
|
|
1700
|
+
@media (max-width: 1280px) {
|
|
1701
|
+
margin-right: ${(props) => switchSize(props.size, "10px", "12px", "16px")};
|
|
1702
|
+
margin-top: ${(props) => switchSize(props.size, "14px", "18px", "18px")};
|
|
1703
|
+
padding: ${(props) => switchSize(props.size, "12px 18px 8px 12px !important", "12px 18px 8px 12px !important", "12px 18px 8px 12px !important")};
|
|
1704
|
+
}
|
|
1705
|
+
|
|
1706
|
+
.widget_title.user_chat{
|
|
1707
|
+
h6{
|
|
1708
|
+
@media (min-width: 2160px) {
|
|
1709
|
+
font-size: ${(props) => switchSize(props.size, "20px", "21px", "22px")};
|
|
1710
|
+
}
|
|
1711
|
+
@media (min-width: 2560px) {
|
|
1712
|
+
font-size: ${(props) => switchSize(props.size, "18px", "18px", "24px")};
|
|
1713
|
+
}
|
|
1714
|
+
@media (min-width: 3840px) {
|
|
1715
|
+
font-size: ${(props) => switchSize(props.size, "28px", "30px", "32px")};
|
|
1716
|
+
}
|
|
1717
|
+
|
|
1718
|
+
@media (max-width: 1920px) {
|
|
1719
|
+
font-size: ${(props) => switchSize(props.size, "14px", "15px", "16px")};
|
|
1720
|
+
}
|
|
1721
|
+
@media (max-width: 1600px) {
|
|
1722
|
+
font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
|
|
1723
|
+
}
|
|
1724
|
+
@media (max-width: 1280px) {
|
|
1725
|
+
font-size: ${(props) => switchSize(props.size, "9px", "9px", "12px")};
|
|
1726
|
+
}
|
|
1727
|
+
}
|
|
1728
|
+
|
|
1729
|
+
.timestamp{
|
|
1730
|
+
|
|
1731
|
+
@media (min-width: 2160px) {
|
|
1732
|
+
font-size: ${(props) => switchSize(props.size, "12px", "14px", "16x")};
|
|
1733
|
+
}
|
|
1734
|
+
@media (min-width: 2560px) {
|
|
1735
|
+
font-size: ${(props) => switchSize(props.size, "16px", "16px", "20px")};
|
|
1736
|
+
}
|
|
1737
|
+
@media (min-width: 3840px) {
|
|
1738
|
+
font-size: ${(props) => switchSize(props.size, "24px", "26px", "30px")};
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
@media (max-width: 1920px) {
|
|
1742
|
+
font-size: ${(props) => switchSize(props.size, "12px", "13px", "15px")};
|
|
1743
|
+
}
|
|
1744
|
+
@media (max-width: 1600px) {
|
|
1745
|
+
font-size: ${(props) => switchSize(props.size, "10px", "12px", "13px")};
|
|
1746
|
+
}
|
|
1747
|
+
@media (max-width: 1280px) {
|
|
1748
|
+
font-size: ${(props) => switchSize(props.size, "8px", "8px", "10px")};
|
|
1749
|
+
}
|
|
1750
|
+
}
|
|
1751
|
+
}
|
|
758
1752
|
}
|
|
759
1753
|
${MessageBox} {
|
|
760
1754
|
justify-content: flex-end;
|
|
@@ -769,13 +1763,13 @@ const AdaptiveHeader = styled.h4`
|
|
|
769
1763
|
const WidgetUpdateButton = styled.div`
|
|
770
1764
|
button {
|
|
771
1765
|
button {
|
|
772
|
-
min-width:
|
|
1766
|
+
min-width: 65px;
|
|
773
1767
|
max-width: max-content;
|
|
774
1768
|
height: 36px;
|
|
775
1769
|
box-shadow: 0px 3px 6px #00000029;
|
|
776
|
-
border: 1px solid #
|
|
777
|
-
border-radius:
|
|
778
|
-
background: #
|
|
1770
|
+
border: 1px solid #a0a0a0;
|
|
1771
|
+
border-radius: 8px;
|
|
1772
|
+
background: #ffffff;
|
|
779
1773
|
color: #000;
|
|
780
1774
|
outline: 0;
|
|
781
1775
|
cursor: pointer;
|
|
@@ -784,19 +1778,19 @@ const WidgetUpdateButton = styled.div`
|
|
|
784
1778
|
font-family: "Gordita-Regular";
|
|
785
1779
|
display: flex;
|
|
786
1780
|
align-items: center;
|
|
787
|
-
padding: 6px;
|
|
1781
|
+
padding: 6px 12px;
|
|
788
1782
|
:hover {
|
|
789
|
-
background: #
|
|
1783
|
+
background: #f0f7ff;
|
|
790
1784
|
color: #000;
|
|
791
|
-
border: 1px solid #
|
|
1785
|
+
border: 1px solid #f0f7ff;
|
|
792
1786
|
}
|
|
793
1787
|
:active {
|
|
794
|
-
background: #
|
|
1788
|
+
background: #f0f7ff;
|
|
795
1789
|
color: #000;
|
|
796
|
-
border: 1px solid #
|
|
1790
|
+
border: 1px solid #f0f7ff;
|
|
797
1791
|
}
|
|
798
|
-
|
|
799
|
-
span{
|
|
1792
|
+
|
|
1793
|
+
span {
|
|
800
1794
|
width: 100%;
|
|
801
1795
|
justify-content: center;
|
|
802
1796
|
height: auto;
|
|
@@ -805,22 +1799,53 @@ const WidgetUpdateButton = styled.div`
|
|
|
805
1799
|
}
|
|
806
1800
|
`;
|
|
807
1801
|
export const Button = styled.button`
|
|
808
|
-
min-width:
|
|
809
|
-
max-width:
|
|
810
|
-
height:
|
|
1802
|
+
min-width: 64px;
|
|
1803
|
+
max-width: 200px;
|
|
1804
|
+
height: 28px;
|
|
811
1805
|
box-shadow: 0px 3px 6px #00000029;
|
|
812
1806
|
border: 1px solid #a0a0a0;
|
|
813
|
-
border-radius:
|
|
1807
|
+
border-radius: 8px;
|
|
814
1808
|
background: #ffffff;
|
|
815
1809
|
color: #000;
|
|
816
1810
|
outline: 0;
|
|
817
1811
|
cursor: pointer;
|
|
818
|
-
margin-top:
|
|
819
|
-
font-size: 14px;
|
|
1812
|
+
margin-top: 4px;
|
|
820
1813
|
font-family: "Gordita-Regular";
|
|
821
|
-
display: flex;
|
|
1814
|
+
display: inline-flex;
|
|
822
1815
|
align-items: center;
|
|
823
|
-
padding: 6px;
|
|
1816
|
+
padding: 6px 12px;
|
|
1817
|
+
text-overflow: ellipsis;
|
|
1818
|
+
white-space: nowrap !important;
|
|
1819
|
+
overflow: hidden;
|
|
1820
|
+
// font-size: 12px;
|
|
1821
|
+
|
|
1822
|
+
@media (min-width: 2160px) {
|
|
1823
|
+
font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
|
|
1824
|
+
height: ${(props) => switchSize(props.size, "38px", "41px", "46px")};
|
|
1825
|
+
}
|
|
1826
|
+
@media (min-width: 2560px) {
|
|
1827
|
+
font-size: ${(props) => switchSize(props.size, "18px", "20px", "24px")};
|
|
1828
|
+
height: ${(props) => switchSize(props.size, "48px", "52px", "54px")};
|
|
1829
|
+
}
|
|
1830
|
+
@media (min-width: 3840px) {
|
|
1831
|
+
font-size: ${(props) => switchSize(props.size, "28px", "32px", "36px")};
|
|
1832
|
+
height: ${(props) => switchSize(props.size, "48px", "58px", "68px")};
|
|
1833
|
+
border-radius: 16px;
|
|
1834
|
+
}
|
|
1835
|
+
|
|
1836
|
+
@media (max-width: 1920px) {
|
|
1837
|
+
font-size: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
|
|
1838
|
+
height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
|
|
1839
|
+
}
|
|
1840
|
+
@media (max-width: 1600px) {
|
|
1841
|
+
font-size: ${(props) => switchSize(props.size, "12px", "13px", "14px")};
|
|
1842
|
+
height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
|
|
1843
|
+
}
|
|
1844
|
+
@media (max-width: 1280px) {
|
|
1845
|
+
font-size: ${(props) => switchSize(props.size, "9px", "10px", "12px")};
|
|
1846
|
+
height: ${(props) => switchSize(props.size, "32px", "35px", "40px")};
|
|
1847
|
+
}
|
|
1848
|
+
|
|
824
1849
|
:hover {
|
|
825
1850
|
background: #f0f7ff;
|
|
826
1851
|
color: #000;
|
|
@@ -836,6 +1861,11 @@ export const Button = styled.button`
|
|
|
836
1861
|
width: 100%;
|
|
837
1862
|
justify-content: center;
|
|
838
1863
|
height: auto;
|
|
1864
|
+
text-overflow: ellipsis;
|
|
1865
|
+
white-space: nowrap !important;
|
|
1866
|
+
overflow: hidden;
|
|
1867
|
+
width: 100%;
|
|
1868
|
+
padding-top: 2px;
|
|
839
1869
|
}
|
|
840
1870
|
|
|
841
1871
|
span.slack_integration {
|
|
@@ -873,73 +1903,151 @@ export const Button = styled.button`
|
|
|
873
1903
|
color: rgb(51, 51, 51);
|
|
874
1904
|
}
|
|
875
1905
|
`;
|
|
876
|
-
const
|
|
877
|
-
|
|
878
|
-
|
|
1906
|
+
const InputMessageChat = styled.div`
|
|
1907
|
+
flex-shrink: 0;
|
|
1908
|
+
max-width: 100%;
|
|
1909
|
+
background: #fff;
|
|
1910
|
+
padding: 8px 16px 4px 16px;
|
|
879
1911
|
border-top: 1px solid #e5e5e5;
|
|
880
1912
|
border-bottom: 1px solid #e5e5e5;
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
display: flex;
|
|
884
|
-
border-bottom-left-radius: 6px;
|
|
885
|
-
border-bottom-right-radius: 6px;
|
|
886
|
-
position: relative;
|
|
887
|
-
top: 0px;
|
|
888
|
-
box-sizing: border-box;
|
|
1913
|
+
border-bottom-left-radius: 10px;
|
|
1914
|
+
border-bottom-right-radius: 10px;
|
|
889
1915
|
|
|
890
|
-
|
|
1916
|
+
.widget_input_message_section{
|
|
1917
|
+
display: flex;
|
|
891
1918
|
width: 100%;
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
font-size: 18px;
|
|
896
|
-
font-family: "Gordita-Regular";
|
|
897
|
-
color: #333;
|
|
898
|
-
padding-top: 10px;
|
|
899
|
-
// border-radius: 0px 0px 10px 10px;
|
|
1919
|
+
align-items: center;
|
|
1920
|
+
justify-content: space-between;
|
|
1921
|
+
flex-wrap: nowrap;
|
|
900
1922
|
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
1923
|
+
.widget_input_message_box{
|
|
1924
|
+
width: 85%;
|
|
1925
|
+
flex-basis: 100%;
|
|
1926
|
+
|
|
905
1927
|
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
1928
|
+
textarea{
|
|
1929
|
+
border-radius: 3px;
|
|
1930
|
+
min-height: 24px;
|
|
1931
|
+
max-height: 60px;
|
|
1932
|
+
overflow: hidden auto !important;
|
|
1933
|
+
overflow-x: hidden !important;
|
|
1934
|
+
overflow-y: auto !important;
|
|
1935
|
+
padding: 12px 6px 6px 6px;
|
|
1936
|
+
position: relative;
|
|
1937
|
+
width: 95%;
|
|
1938
|
+
word-break: break-word;
|
|
1939
|
+
cursor: text;
|
|
1940
|
+
border: none;
|
|
1941
|
+
background-color: transparent;
|
|
1942
|
+
outline: none;
|
|
1943
|
+
font-family: "Gordita-Regular";
|
|
1944
|
+
// font-size: 14px !important;
|
|
1945
|
+
// margin-top: 5px;
|
|
1946
|
+
// line-height: 20px;
|
|
1947
|
+
|
|
1948
|
+
@media (min-width: 2160px) {
|
|
1949
|
+
height: ${(props) => switchSize(props.size, "28px", "40px", "52px")};
|
|
1950
|
+
margin-top: ${(props) => switchSize(props.size, "8px", "12px", "14px")};
|
|
1951
|
+
line-height: ${(props) => switchSize(props.size, "21px", "22px", "24px")};
|
|
1952
|
+
font-size: ${(props) => switchSize(props.size, "20px !important", "21px !important", "22px !important")};
|
|
1953
|
+
}
|
|
1954
|
+
@media (min-width: 2560px) {
|
|
1955
|
+
height: ${(props) => switchSize(props.size, "74px", "90px", "74px")};
|
|
1956
|
+
font-size: ${(props) => switchSize(props.size, "24px !important", "24px !important", "24px !important")};
|
|
1957
|
+
margin-top: ${(props) => switchSize(props.size, "12px", "6px", "18px")};
|
|
1958
|
+
min-height: ${(props) => switchSize(props.size, "80px", "90px", "100px")};
|
|
1959
|
+
max-height: ${(props) => switchSize(props.size, "70px", "80px", "70px")};
|
|
1960
|
+
line-height: ${(props) => switchSize(props.size, "36px", "54px", "36px")};
|
|
1961
|
+
}
|
|
1962
|
+
@media (min-width: 3840px) {
|
|
1963
|
+
height: ${(props) => switchSize(props.size, "74px", "90px", "104px !important")};
|
|
1964
|
+
min-height: ${(props) => switchSize(props.size, "74px", "90px", "110px !important")};
|
|
1965
|
+
max-height: ${(props) => switchSize(props.size, "74px", "80px", "90px !important")};
|
|
1966
|
+
margin-top: ${(props) => switchSize(props.size, "10px", "12px", "28px")};
|
|
1967
|
+
line-height: ${(props) => switchSize(props.size, "48px", "54px", "58px")};
|
|
1968
|
+
font-size: ${(props) => switchSize(props.size, "30px !important", "34px !important", "36px !important")};
|
|
1969
|
+
}
|
|
912
1970
|
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
1971
|
+
@media (max-width: 1920px) {
|
|
1972
|
+
height: ${(props) => switchSize(props.size, "37px", "40px", "52px")};
|
|
1973
|
+
margin-top: ${(props) => switchSize(props.size, "10px", "12px", "14px")};
|
|
1974
|
+
line-height: ${(props) => switchSize(props.size, "20px", "22px", "24px")};
|
|
1975
|
+
font-size: ${(props) => switchSize(props.size, "15px !important", "17px !important", "18px !important")};
|
|
1976
|
+
}
|
|
1977
|
+
@media (max-width: 1680px) {
|
|
1978
|
+
height: ${(props) => switchSize(props.size, "30px", "34px", "37px")};
|
|
1979
|
+
margin-top: ${(props) => switchSize(props.size, "4px", "6px", "8px")};
|
|
1980
|
+
font-size: ${(props) => switchSize(props.size, "12px !important", "15px !important", "15px !important")};
|
|
1981
|
+
}
|
|
1982
|
+
@media (max-width: 1280px) {
|
|
1983
|
+
font-size: ${(props) => switchSize(props.size, "9px !important", "10px !important", "12px !important")};
|
|
1984
|
+
margin-top: ${(props) => switchSize(props.size, "4px", "6px", "8px")};
|
|
1985
|
+
}
|
|
1986
|
+
|
|
1987
|
+
:empty{
|
|
1988
|
+
overflow-y: hidden;
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1991
|
+
:empty:after{
|
|
1992
|
+
display: block;
|
|
1993
|
+
content: attr(placeholder);
|
|
1994
|
+
position: relative;
|
|
1995
|
+
color: #333;
|
|
1996
|
+
background-color: transparent;
|
|
1997
|
+
cursor: text;
|
|
1998
|
+
user-select: none;
|
|
1999
|
+
line-height: 22px;
|
|
2000
|
+
height: 18px;
|
|
2001
|
+
font-size: 12px;
|
|
2002
|
+
}
|
|
2003
|
+
}
|
|
918
2004
|
}
|
|
919
|
-
}
|
|
920
|
-
|
|
921
|
-
|
|
2005
|
+
}
|
|
2006
|
+
|
|
2007
|
+
.send_icon_box {
|
|
2008
|
+
position: relative;
|
|
2009
|
+
display: flex;
|
|
2010
|
+
gap: 0 8px;
|
|
2011
|
+
align-items: center;
|
|
2012
|
+
margin-top: 5px;
|
|
2013
|
+
|
|
2014
|
+
@media (max-width: 1280px) {
|
|
2015
|
+
gap: 0 6px;
|
|
922
2016
|
}
|
|
923
2017
|
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
2018
|
+
svg {
|
|
2019
|
+
width: 18px;
|
|
2020
|
+
height: 18px;
|
|
2021
|
+
cursor: pointer;
|
|
2022
|
+
fill: #666;
|
|
2023
|
+
|
|
2024
|
+
@media (min-width: 2160px) {
|
|
2025
|
+
width: ${(props) => switchSize(props.size, "27px", "30px", "32px")};
|
|
2026
|
+
height: ${(props) => switchSize(props.size, "25px", "28px", "30px")};
|
|
929
2027
|
}
|
|
930
|
-
|
|
931
|
-
|
|
2028
|
+
@media (min-width: 2560px) {
|
|
2029
|
+
width: ${(props) => switchSize(props.size, "28px", "32px", "36px")};
|
|
2030
|
+
height: ${(props) => switchSize(props.size, "26px", "30px", "32px")};
|
|
932
2031
|
}
|
|
933
|
-
|
|
934
|
-
width:
|
|
935
|
-
height:
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
}
|
|
2032
|
+
@media (min-width: 3840px) {
|
|
2033
|
+
width: ${(props) => switchSize(props.size, "42px", "48px", "52px")};
|
|
2034
|
+
height: ${(props) => switchSize(props.size, "38px", "44px", "48px")};
|
|
2035
|
+
}
|
|
2036
|
+
|
|
2037
|
+
@media (max-width: 1920px) {
|
|
2038
|
+
width: ${(props) => switchSize(props.size, "21px", "24px", "26px")};
|
|
2039
|
+
height: ${(props) => switchSize(props.size, "19px", "22px", "24px")};
|
|
2040
|
+
}
|
|
2041
|
+
@media (max-width: 1680px) {
|
|
2042
|
+
width: ${(props) => switchSize(props.size, "18px", "21px", "22px")};
|
|
2043
|
+
height: ${(props) => switchSize(props.size, "16px", "19px", "20px")};
|
|
2044
|
+
}
|
|
2045
|
+
@media (max-width: 1280px) {
|
|
2046
|
+
width: ${(props) => switchSize(props.size, "14px", "16px", "18px")};
|
|
2047
|
+
height: ${(props) => switchSize(props.size, "13px", "15px", "16px")};
|
|
941
2048
|
}
|
|
942
2049
|
}
|
|
2050
|
+
}
|
|
943
2051
|
`;
|
|
944
2052
|
const CancelButton = styled.div`
|
|
945
2053
|
position: fixed;
|
|
@@ -948,21 +2056,59 @@ const CancelButton = styled.div`
|
|
|
948
2056
|
box-sizing: border-box;
|
|
949
2057
|
border: 0 solid #e5e7eb;
|
|
950
2058
|
|
|
951
|
-
@media (
|
|
2059
|
+
@media (min-width: 3840px) {
|
|
952
2060
|
bottom: 2rem;
|
|
953
|
-
right:
|
|
2061
|
+
right: 2.5rem;
|
|
2062
|
+
}
|
|
2063
|
+
@media (max-width: 1920px) {
|
|
2064
|
+
bottom: 0.5rem;
|
|
2065
|
+
right: 0.8rem;
|
|
2066
|
+
}
|
|
2067
|
+
@media (max-width: 1680px) {
|
|
2068
|
+
bottom: 0.5rem;
|
|
2069
|
+
right: 0.8rem;
|
|
2070
|
+
}
|
|
2071
|
+
@media (max-width: 1280px) {
|
|
2072
|
+
bottom: 0.5rem;
|
|
2073
|
+
right: 0.8rem;
|
|
2074
|
+
}
|
|
954
2075
|
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
height: 14px;
|
|
961
|
-
}
|
|
2076
|
+
.close_button{
|
|
2077
|
+
|
|
2078
|
+
@media (min-width: 2160px) {
|
|
2079
|
+
width: 54px !important;
|
|
2080
|
+
height: 54px !important;
|
|
962
2081
|
}
|
|
963
|
-
}
|
|
964
2082
|
|
|
965
|
-
|
|
2083
|
+
@media (max-width: 1920px) {
|
|
2084
|
+
width: 48px !important;
|
|
2085
|
+
height: 48px !important;
|
|
2086
|
+
}
|
|
2087
|
+
@media (max-width: 1680px) {
|
|
2088
|
+
width: 40px !important;
|
|
2089
|
+
height: 40px !important;
|
|
2090
|
+
}
|
|
2091
|
+
@media (max-width: 1280px) {
|
|
2092
|
+
width: 32px !important;
|
|
2093
|
+
height: 32px !important;
|
|
2094
|
+
}
|
|
2095
|
+
|
|
2096
|
+
border: transparent !important;
|
|
2097
|
+
|
|
2098
|
+
svg{
|
|
2099
|
+
@media (max-width: 1920px) {
|
|
2100
|
+
width: 18px !important;
|
|
2101
|
+
height: 18px !important;
|
|
2102
|
+
}
|
|
2103
|
+
@media (max-width: 1680px) {
|
|
2104
|
+
width: 15px !important;
|
|
2105
|
+
height: 15px !important;
|
|
2106
|
+
}
|
|
2107
|
+
@media (max-width: 1280px) {
|
|
2108
|
+
width: 12px !important;
|
|
2109
|
+
height: 12px !important;
|
|
2110
|
+
}
|
|
2111
|
+
}
|
|
966
2112
|
}
|
|
967
2113
|
`;
|
|
968
2114
|
const IconSpan = styled.span`
|
|
@@ -976,39 +2122,90 @@ const IconSpan = styled.span`
|
|
|
976
2122
|
justify-content: center;
|
|
977
2123
|
cursor: pointer;
|
|
978
2124
|
|
|
2125
|
+
@media (min-width: 2160px) {
|
|
2126
|
+
width: 60px;
|
|
2127
|
+
height: 60px;
|
|
2128
|
+
}
|
|
2129
|
+
@media (min-width: 2560px) {
|
|
2130
|
+
width: 70px;
|
|
2131
|
+
height: 70px;
|
|
2132
|
+
}
|
|
2133
|
+
@media (min-width: 3480px) {
|
|
2134
|
+
width: 80px;
|
|
2135
|
+
height: 80px;
|
|
2136
|
+
}
|
|
2137
|
+
|
|
2138
|
+
label{
|
|
2139
|
+
position: absolute;
|
|
2140
|
+
background: #fff;
|
|
2141
|
+
padding: 2px 4px;
|
|
2142
|
+
border-radius: 4px;
|
|
2143
|
+
top: -20px;
|
|
2144
|
+
display: none;
|
|
2145
|
+
font-size: 12px;
|
|
2146
|
+
color: #555;
|
|
2147
|
+
min-width: 80px;
|
|
2148
|
+
text-align: center;
|
|
2149
|
+
transition: .3s;
|
|
2150
|
+
}
|
|
2151
|
+
|
|
979
2152
|
svg {
|
|
980
|
-
width:
|
|
981
|
-
height:
|
|
2153
|
+
width: 14px;
|
|
2154
|
+
height: 14px;
|
|
982
2155
|
cursor: pointer;
|
|
2156
|
+
|
|
2157
|
+
@media (min-width: 2160px) {
|
|
2158
|
+
width: 24px;
|
|
2159
|
+
height: 24px;
|
|
2160
|
+
}
|
|
2161
|
+
@media (min-width: 2560px) {
|
|
2162
|
+
width: 32px;
|
|
2163
|
+
height: 32px;
|
|
2164
|
+
}
|
|
2165
|
+
@media (min-width: 3480px) {
|
|
2166
|
+
width: 38px;
|
|
2167
|
+
height: 38px;
|
|
2168
|
+
}
|
|
983
2169
|
}
|
|
2170
|
+
|
|
2171
|
+
:hover label{
|
|
2172
|
+
display: block;
|
|
2173
|
+
transition: .3s;
|
|
2174
|
+
}
|
|
2175
|
+
|
|
984
2176
|
`;
|
|
985
2177
|
const ButtonWrapper = styled.div`
|
|
986
2178
|
width: 100%;
|
|
987
2179
|
float: left;
|
|
988
2180
|
position: relative;
|
|
989
|
-
left:
|
|
2181
|
+
left: 3.5%;
|
|
990
2182
|
display: flex;
|
|
991
|
-
margin-top:
|
|
2183
|
+
margin-top: 2px;
|
|
992
2184
|
flex-wrap: wrap;
|
|
993
|
-
gap: 0
|
|
2185
|
+
gap: 0 10px;
|
|
994
2186
|
|
|
995
2187
|
button {
|
|
996
|
-
min-width:
|
|
997
|
-
max-width:
|
|
998
|
-
height:
|
|
2188
|
+
min-width: 64px;
|
|
2189
|
+
max-width: 400px;
|
|
2190
|
+
height: 28px;
|
|
999
2191
|
box-shadow: 0px 3px 6px #00000029;
|
|
1000
2192
|
border: 1px solid #A0A0A0;
|
|
1001
|
-
border-radius:
|
|
2193
|
+
border-radius: 8px;
|
|
1002
2194
|
background: #FFFFFF;
|
|
1003
2195
|
color: #000;
|
|
1004
2196
|
outline: 0;
|
|
1005
2197
|
cursor: pointer;
|
|
1006
2198
|
margin-top: 12px;
|
|
1007
|
-
font-size:
|
|
2199
|
+
font-size: 12px;
|
|
1008
2200
|
font-family: "Gordita-Regular";
|
|
1009
|
-
display: flex;
|
|
2201
|
+
display: inline-flex;
|
|
1010
2202
|
align-items: center;
|
|
1011
|
-
padding: 6px;
|
|
2203
|
+
padding: 6px 12px;
|
|
2204
|
+
|
|
2205
|
+
text-overflow: ellipsis;
|
|
2206
|
+
white-space: nowrap !important;
|
|
2207
|
+
overflow: hidden;
|
|
2208
|
+
|
|
1012
2209
|
:hover {
|
|
1013
2210
|
background: #F0F7FF;
|
|
1014
2211
|
color: #000;
|
|
@@ -1024,10 +2221,30 @@ const ButtonWrapper = styled.div`
|
|
|
1024
2221
|
width: 100%;
|
|
1025
2222
|
justify-content: center;
|
|
1026
2223
|
height: auto;
|
|
2224
|
+
text-overflow: ellipsis;
|
|
2225
|
+
white-space: nowrap !important;
|
|
2226
|
+
overflow: hidden;
|
|
2227
|
+
width: 100%;
|
|
2228
|
+
padding-top: 2px;
|
|
1027
2229
|
}
|
|
1028
2230
|
}
|
|
1029
2231
|
}
|
|
1030
2232
|
`;
|
|
2233
|
+
const style = {
|
|
2234
|
+
maxHeight: "90px",
|
|
2235
|
+
minHeight: "38px",
|
|
2236
|
+
resize: "none",
|
|
2237
|
+
padding: "9px",
|
|
2238
|
+
boxSizing: "border-box",
|
|
2239
|
+
fontSize: "13px",
|
|
2240
|
+
width: "100%",
|
|
2241
|
+
border: "none",
|
|
2242
|
+
overflow: "hidden",
|
|
2243
|
+
overflowWrap: "break-word",
|
|
2244
|
+
textAlign: "start",
|
|
2245
|
+
height: "38px",
|
|
2246
|
+
fontFamily: "Gordita-Regular"
|
|
2247
|
+
};
|
|
1031
2248
|
|
|
1032
2249
|
const App = ({
|
|
1033
2250
|
endpoint,
|
|
@@ -1039,10 +2256,12 @@ const App = ({
|
|
|
1039
2256
|
widget_size,
|
|
1040
2257
|
style,
|
|
1041
2258
|
}) => {
|
|
1042
|
-
console.log("APP :: style ::", { style });
|
|
2259
|
+
// console.log("APP :: style ::", { style });
|
|
1043
2260
|
const {
|
|
2261
|
+
connected,
|
|
1044
2262
|
messages,
|
|
1045
2263
|
sendMessage,
|
|
2264
|
+
sendFeedback,
|
|
1046
2265
|
widget,
|
|
1047
2266
|
restart,
|
|
1048
2267
|
exit,
|
|
@@ -1055,55 +2274,45 @@ const App = ({
|
|
|
1055
2274
|
newToken,
|
|
1056
2275
|
userDetails,
|
|
1057
2276
|
});
|
|
2277
|
+
console.log("connected ::: ", { connected })
|
|
2278
|
+
|
|
1058
2279
|
const [open, setOpen] = useState(openByDefault);
|
|
1059
2280
|
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
// link.href = `https://unpkg.com/${packageDetails.name}@${packageDetails.version}/dist/lib.css`;
|
|
1067
|
-
// link.rel = "stylesheet";
|
|
1068
|
-
// link.onload = () => {
|
|
1069
|
-
// setCssInstalled(true);
|
|
1070
|
-
// };
|
|
1071
|
-
// document.body.appendChild(link);
|
|
1072
|
-
// }
|
|
1073
|
-
// }, []);
|
|
2281
|
+
const containerEl = useRef(null);
|
|
2282
|
+
useEffect(() => {
|
|
2283
|
+
if (containerEl.current) {
|
|
2284
|
+
containerEl.current.scroll(0, containerEl.current.scrollHeight);
|
|
2285
|
+
}
|
|
2286
|
+
});
|
|
1074
2287
|
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
});
|
|
2288
|
+
if (!widget) {
|
|
2289
|
+
return null;
|
|
2290
|
+
}
|
|
2291
|
+
|
|
2292
|
+
console.log("scale size provider", widget_size)
|
|
1081
2293
|
|
|
1082
2294
|
return (
|
|
1083
2295
|
<ScaleSizeProvider widgetSize={widget_size}>
|
|
1084
|
-
<WidgetPreview className="widget_preview">
|
|
2296
|
+
<WidgetPreview size={widget_size} className="widget_preview">
|
|
1085
2297
|
{open ? (
|
|
1086
2298
|
<ChatWrapper className="widget_chat">
|
|
1087
2299
|
<ChatHeaderTop
|
|
1088
|
-
// backg={props.colors.accent_color}
|
|
1089
|
-
// color={props.colors.primary_color}
|
|
1090
|
-
// name={props.name}
|
|
1091
|
-
// description={props.description}
|
|
1092
|
-
// image={props.image}
|
|
1093
2300
|
widget={widget}
|
|
1094
2301
|
onClick={() => setOpen(!open)}
|
|
1095
2302
|
open={open}
|
|
1096
2303
|
restart={restart}
|
|
1097
2304
|
exit={exit}
|
|
2305
|
+
logoshape={style.logo_shape}
|
|
1098
2306
|
/>
|
|
1099
2307
|
<ChatContentWrapper
|
|
1100
|
-
|
|
2308
|
+
size={widget_size}
|
|
1101
2309
|
className="widget_chat_content"
|
|
1102
2310
|
ref={containerEl}
|
|
1103
2311
|
>
|
|
1104
2312
|
<BodyWrapper
|
|
1105
2313
|
{...{ messages }}
|
|
1106
2314
|
sendMessage={sendMessage}
|
|
2315
|
+
sendFeedback={sendFeedback}
|
|
1107
2316
|
widget={widget}
|
|
1108
2317
|
style={style}
|
|
1109
2318
|
/>
|
|
@@ -1114,40 +2323,17 @@ const App = ({
|
|
|
1114
2323
|
messages={messages}
|
|
1115
2324
|
isTypingEnd={isTypingEnd}
|
|
1116
2325
|
/>
|
|
1117
|
-
|
|
1118
|
-
<div className="widget_footer">
|
|
1119
|
-
<p>
|
|
1120
|
-
{" "}
|
|
1121
|
-
With{" "}
|
|
1122
|
-
<span>
|
|
1123
|
-
<svg
|
|
1124
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1125
|
-
x="0px"
|
|
1126
|
-
y="0px"
|
|
1127
|
-
viewBox="0 0 14 12"
|
|
1128
|
-
xmlSpace="preserve"
|
|
1129
|
-
>
|
|
1130
|
-
<path
|
|
1131
|
-
d="M7 1.5c1.2-1.6 3.5-2 5.2-.8 1.7 1.2 2.3 3.5 1.4 5.3-.5.9-1.1 1.6-1.8 2.3-1.3 1.2-2.7 2.3-4.1 3.5-.4.3-.9.3-1.3 0-1.3-1.1-2.7-2.2-4-3.3-.7-.6-1.3-1.3-1.7-2-1.1-1.8-.8-4.2.9-5.6 1.5-1.2 3.7-1.1 5.1.3l.3.3m0 8.4c1.4-1.2 2.8-2.4 4.1-3.6.3-.2.5-.5.6-.8.2-.5.3-1 .3-1.5 0-.9-.6-1.8-1.5-2-.9-.3-1.8.2-2.2 1-.2.2-.3.5-.4.7-.1.5-.5.8-.9.8s-.8-.3-.9-.7C6 3.7 6 3.7 6 3.6L5.7 3c-.4-.8-1.3-1.3-2.2-1-.9.2-1.5 1-1.6 2 0 .9.4 1.8 1.1 2.4 1.3 1.1 2.6 2.2 4 3.5"
|
|
1132
|
-
fill="#f93b02"
|
|
1133
|
-
/>
|
|
1134
|
-
</svg>
|
|
1135
|
-
</span>{" "}
|
|
1136
|
-
from Workativ
|
|
1137
|
-
</p>
|
|
1138
|
-
</div>
|
|
1139
|
-
</div>
|
|
2326
|
+
|
|
1140
2327
|
</ChatWrapper>
|
|
1141
2328
|
) : null}
|
|
1142
|
-
<
|
|
1143
|
-
// backg={props.colors.accent_color}
|
|
1144
|
-
// color={props.colors.primary_color}
|
|
2329
|
+
<WidgetMenu
|
|
1145
2330
|
onClick={() => setOpen(!open)}
|
|
1146
2331
|
widget={widget}
|
|
1147
2332
|
open={open}
|
|
1148
2333
|
logoshape={style.logo_shape}
|
|
1149
2334
|
logosize={style.logo_size.size}
|
|
1150
2335
|
logoborder={style.logo_border}
|
|
2336
|
+
widget_size={widget_size}
|
|
1151
2337
|
>
|
|
1152
2338
|
{/* <WidgetBtCloseIcon /> */}
|
|
1153
2339
|
<svg
|
|
@@ -1160,7 +2346,7 @@ const App = ({
|
|
|
1160
2346
|
<path d="M1.2 28.4c-.7 0-1.2-.5-1.2-1.2 0-.3.1-.6.3-.8L26.4.3c.5-.5 1.2-.4 1.7 0 .4.5.4 1.2 0 1.6L2 28.1c-.2.2-.5.3-.8.3z" />
|
|
1161
2347
|
<path d="M27.3 28.4c-.3 0-.6-.1-.8-.3L.3 2C-.1 1.5-.1.8.4.3.9-.1 1.6-.1 2 .3l26.1 26.1c.5.5.5 1.2 0 1.7-.2.2-.5.3-.8.3z" />
|
|
1162
2348
|
</svg>
|
|
1163
|
-
</
|
|
2349
|
+
</WidgetMenu>
|
|
1164
2350
|
</WidgetPreview>
|
|
1165
2351
|
</ScaleSizeProvider>
|
|
1166
2352
|
);
|
|
@@ -1177,17 +2363,35 @@ const Footer = ({
|
|
|
1177
2363
|
const [typing, setBotTyping] = useState(true);
|
|
1178
2364
|
|
|
1179
2365
|
const send = () => {
|
|
2366
|
+
// console.log("typedMessage in send", typedMessage)
|
|
1180
2367
|
if (typedMessage.trim()) {
|
|
1181
2368
|
sendMessage(typedMessage);
|
|
1182
2369
|
}
|
|
1183
2370
|
setTypedMessage("");
|
|
1184
2371
|
};
|
|
1185
2372
|
|
|
2373
|
+
const sendWithInput = (input) => {
|
|
2374
|
+
if (input.trim()) {
|
|
2375
|
+
sendMessage(input);
|
|
2376
|
+
}
|
|
2377
|
+
setTypedMessage("");
|
|
2378
|
+
};
|
|
2379
|
+
|
|
1186
2380
|
useEffect(() => {
|
|
1187
2381
|
setBotTyping(isTypingEnd);
|
|
1188
2382
|
}, [isTypingEnd]);
|
|
1189
2383
|
|
|
1190
2384
|
const uploadTag = useRef(null);
|
|
2385
|
+
const textareaRef = useRef(null);
|
|
2386
|
+
// console.log("TYped message", typedMessage)
|
|
2387
|
+
|
|
2388
|
+
useEffect(() => {
|
|
2389
|
+
if (textareaRef.current) {
|
|
2390
|
+
textareaRef.current.focus();
|
|
2391
|
+
autosize(textareaRef.current);
|
|
2392
|
+
}
|
|
2393
|
+
}, [textareaRef.current]);
|
|
2394
|
+
const scale = useScaleContext()
|
|
1191
2395
|
return (
|
|
1192
2396
|
<>
|
|
1193
2397
|
{typing && (
|
|
@@ -1203,50 +2407,65 @@ const Footer = ({
|
|
|
1203
2407
|
</span>
|
|
1204
2408
|
</p>
|
|
1205
2409
|
)}
|
|
1206
|
-
<
|
|
1207
|
-
<
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
e
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
2410
|
+
<InputMessageChat size={scale.widgetSize} className="widget_input_message">
|
|
2411
|
+
<div className="widget_input_message_section">
|
|
2412
|
+
<div className="widget_input_message_box">
|
|
2413
|
+
<textarea
|
|
2414
|
+
// type="text"
|
|
2415
|
+
placeholder="Write a message"
|
|
2416
|
+
value={typedMessage}
|
|
2417
|
+
onChange={(e) => setTypedMessage(e.target.value)}
|
|
2418
|
+
onKeyDown={(e) => {
|
|
2419
|
+
if (e.key === "Enter") {
|
|
2420
|
+
e.preventDefault();
|
|
2421
|
+
send();
|
|
2422
|
+
if (textareaRef.current) {
|
|
2423
|
+
textareaRef.current.style.height = "30px"
|
|
2424
|
+
textareaRef.current.style.overflow = "hidden"
|
|
2425
|
+
}
|
|
2426
|
+
}
|
|
2427
|
+
}}
|
|
2428
|
+
style={style}
|
|
2429
|
+
ref={textareaRef}
|
|
2430
|
+
rows={1}
|
|
2431
|
+
id="typemsg"
|
|
2432
|
+
wrap="hard"
|
|
2433
|
+
>
|
|
2434
|
+
</textarea>
|
|
2435
|
+
</div>
|
|
2436
|
+
<div className="send_icon_box">
|
|
2437
|
+
<span
|
|
2438
|
+
className="attachment_icon"
|
|
2439
|
+
onClick={() => {
|
|
2440
|
+
uploadTag.current && uploadTag.current.click();
|
|
2441
|
+
}}
|
|
2442
|
+
>
|
|
2443
|
+
{/* <AttachmentIcon /> */}
|
|
2444
|
+
<svg x="0px" y="0px" viewBox="0 0 24 24" xmlSpace="preserve">
|
|
2445
|
+
<path
|
|
2446
|
+
d="M4.6 22.3c-1 0-2-.4-2.7-1.1-.8-.8-1.3-1.9-1.2-3 .1-1.2.6-2.3 1.7-3.3L13.8 3.4c1.1-1.1 2.5-1.6 4-1.6s2.9.6 4 1.6c2.2 2.2 2.2 5.7 0 7.9l-10 10c-.3.3-.7.3-1 0-.3-.3-.3-.7 0-1l10-10c1.6-1.6 1.6-4.3 0-5.9-.8-.8-1.8-1.2-3-1.2-1.1 0-2.2.4-3 1.2L3.3 15.8c-.8.8-1.2 1.6-1.2 2.4 0 .7.2 1.4.8 2 1.1 1.1 3 .9 4.3-.5l9.4-9.4c.3-.3.4-.6.4-.9 0-.3-.1-.7-.4-.9-.5-.5-1.3-.5-1.8 0l-8 8c-.3.3-.7.3-1 0-.3-.3-.3-.7 0-1l8-8c1.1-1.1 2.8-1.1 3.8 0 .5.5.8 1.2.8 1.9s-.3 1.4-.8 1.9l-9.4 9.4c-1 1-2.3 1.6-3.6 1.6z"
|
|
2447
|
+
fill="fillcolor"
|
|
2448
|
+
/>
|
|
2449
|
+
</svg>
|
|
2450
|
+
</span>
|
|
2451
|
+
<span onClick={() => send()}>
|
|
2452
|
+
<input type="file" hidden ref={uploadTag} onChange={onFileUpload} />
|
|
2453
|
+
|
|
2454
|
+
{/* <WidgetSendIcon /> */}
|
|
2455
|
+
<svg x="0px" y="0px" viewBox="0 0 32 32" xmlSpace="preserve">
|
|
2456
|
+
<path d="M24 30c-.2 0-.3 0-.5-.1l-12-7c-.5-.3-.6-.9-.4-1.4.3-.5.9-.6 1.4-.4l10.8 6.3 6.1-24.6L3.2 16l5.6 3.1c.5.3.7.9.4 1.4-.3.5-.9.7-1.4.4l-7.3-4c-.3-.2-.5-.5-.5-.9s.2-.7.6-.9l30-15c.3-.2.8-.1 1.1.1.3.2.4.6.3 1l-7 28c-.1.3-.3.6-.6.7-.1.1-.3.1-.4.1z" />
|
|
2457
|
+
<path d="M12 32h-.3c-.4-.1-.7-.5-.7-1v-9c0-.6.4-1 1-1s1 .4 1 1v5.7l2.2-3.3c.3-.5.9-.6 1.4-.3.5.3.6.9.3 1.4l-4 6c-.3.3-.6.5-.9.5z" />
|
|
2458
|
+
<path d="M12 23c-.2 0-.5-.1-.7-.3-.4-.4-.4-1-.1-1.4l19-21c.4-.4 1-.4 1.4-.1.4.4.4 1 .1 1.4l-19 21c-.2.3-.4.4-.7.4z" />
|
|
2459
|
+
</svg>
|
|
2460
|
+
</span>
|
|
2461
|
+
</div>
|
|
2462
|
+
</div>
|
|
2463
|
+
</InputMessageChat >
|
|
1245
2464
|
</>
|
|
1246
2465
|
);
|
|
1247
2466
|
};
|
|
1248
2467
|
|
|
1249
|
-
const BodyWrapper = ({ messages, sendMessage, widget, style }) => {
|
|
2468
|
+
const BodyWrapper = ({ messages, sendMessage, sendFeedback, widget, style }) => {
|
|
1250
2469
|
// const isSmall = useMedia({ maxWidth: "520px" });
|
|
1251
2470
|
|
|
1252
2471
|
// const containerEl = useRef(null);
|
|
@@ -1255,7 +2474,7 @@ const BodyWrapper = ({ messages, sendMessage, widget, style }) => {
|
|
|
1255
2474
|
// containerEl.current.scroll(0, containerEl.current.scrollHeight);
|
|
1256
2475
|
// }
|
|
1257
2476
|
// });
|
|
1258
|
-
|
|
2477
|
+
console.log("Service ::messages", messages)
|
|
1259
2478
|
return (
|
|
1260
2479
|
<>
|
|
1261
2480
|
{/* <div
|
|
@@ -1271,9 +2490,11 @@ const BodyWrapper = ({ messages, sendMessage, widget, style }) => {
|
|
|
1271
2490
|
<Message
|
|
1272
2491
|
{...{ key, ...message }}
|
|
1273
2492
|
sendMessage={sendMessage}
|
|
2493
|
+
sendFeedback={sendFeedback}
|
|
1274
2494
|
widget={widget}
|
|
1275
2495
|
timestamp={message.time}
|
|
1276
2496
|
style={style}
|
|
2497
|
+
key={key}
|
|
1277
2498
|
/>
|
|
1278
2499
|
))}
|
|
1279
2500
|
{/* </div> */}
|
|
@@ -1281,13 +2502,14 @@ const BodyWrapper = ({ messages, sendMessage, widget, style }) => {
|
|
|
1281
2502
|
);
|
|
1282
2503
|
};
|
|
1283
2504
|
|
|
1284
|
-
const Message = ({ type, message, sendMessage, widget, timestamp, style }) => {
|
|
2505
|
+
const Message = ({ type, message, sendMessage, sendFeedback, widget, timestamp, style }) => {
|
|
1285
2506
|
switch (type) {
|
|
1286
2507
|
case "received":
|
|
1287
2508
|
return (
|
|
1288
2509
|
<ReceivedMessage
|
|
1289
2510
|
message={message}
|
|
1290
2511
|
sendMessage={sendMessage}
|
|
2512
|
+
sendFeedback={sendFeedback}
|
|
1291
2513
|
widget={widget}
|
|
1292
2514
|
timestamp={timestamp}
|
|
1293
2515
|
style={style}
|
|
@@ -1310,88 +2532,47 @@ const Message = ({ type, message, sendMessage, widget, timestamp, style }) => {
|
|
|
1310
2532
|
const ReceivedMessage = ({
|
|
1311
2533
|
message,
|
|
1312
2534
|
sendMessage,
|
|
2535
|
+
sendFeedback,
|
|
1313
2536
|
widget,
|
|
1314
2537
|
timestamp,
|
|
1315
2538
|
style,
|
|
1316
2539
|
}) => {
|
|
2540
|
+
console.log("message ::: ", { message })
|
|
2541
|
+
const scale = useScaleContext()
|
|
1317
2542
|
return message.output.map((output, key) => {
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
// backg={props.colors.secondary_color}
|
|
1332
|
-
>
|
|
1333
|
-
<AdaptiveCard
|
|
1334
|
-
// backg={props.colors.accent_color}
|
|
1335
|
-
// color={props.colors.primary_color}
|
|
1336
|
-
// image={props.image}
|
|
1337
|
-
key={key}
|
|
1338
|
-
output={output.output}
|
|
1339
|
-
adaptive_card={output.adaptive_card}
|
|
1340
|
-
widget={widget}
|
|
1341
|
-
timestamp={timestamp}
|
|
1342
|
-
></AdaptiveCard>
|
|
1343
|
-
</AssistantChat>
|
|
1344
|
-
);
|
|
1345
|
-
case "carousal":
|
|
1346
|
-
return (
|
|
1347
|
-
<AssistantChat
|
|
1348
|
-
className="tryit_understand_parent"
|
|
1349
|
-
// backg={props.colors.secondary_color}
|
|
1350
|
-
>
|
|
1351
|
-
<ReceivedCarousalOutput
|
|
1352
|
-
key={key}
|
|
1353
|
-
widget={widget}
|
|
1354
|
-
timestamp={timestamp}
|
|
1355
|
-
carousal={output.carousal}
|
|
1356
|
-
/>
|
|
1357
|
-
</AssistantChat>
|
|
1358
|
-
);
|
|
1359
|
-
default:
|
|
1360
|
-
return (
|
|
1361
|
-
<AssistantChat className="widget_chat_logs_box">
|
|
1362
|
-
<ChatAssistant
|
|
1363
|
-
key={key}
|
|
1364
|
-
output={output}
|
|
1365
|
-
sendMessage={sendMessage}
|
|
1366
|
-
widget={widget}
|
|
1367
|
-
timestamp={timestamp}
|
|
1368
|
-
logoshape={style.logo_shape}
|
|
1369
|
-
logosize={style.logo_size.size}
|
|
1370
|
-
logoborder={style.logo_border}
|
|
1371
|
-
/>
|
|
1372
|
-
</AssistantChat>
|
|
1373
|
-
);
|
|
1374
|
-
}
|
|
2543
|
+
return <AssistantChat className="widget_chat_logs_box" key={key}>
|
|
2544
|
+
<ChatAssistant
|
|
2545
|
+
key={key}
|
|
2546
|
+
output={output}
|
|
2547
|
+
sendMessage={sendMessage}
|
|
2548
|
+
sendFeedback={sendFeedback}
|
|
2549
|
+
widget={widget}
|
|
2550
|
+
timestamp={timestamp}
|
|
2551
|
+
logoshape={style.logo_shape}
|
|
2552
|
+
logosize={style.logo_size.size}
|
|
2553
|
+
logoborder={style.logo_border}
|
|
2554
|
+
/>
|
|
2555
|
+
</AssistantChat>
|
|
1375
2556
|
});
|
|
1376
2557
|
};
|
|
1377
2558
|
|
|
1378
2559
|
const SentMessage = (props) => {
|
|
1379
|
-
console.log(props, "propsprops");
|
|
2560
|
+
// console.log(props, "propsprops");
|
|
1380
2561
|
return (
|
|
1381
2562
|
<UserAssistant
|
|
1382
2563
|
{...props}
|
|
1383
|
-
|
|
2564
|
+
// backg={props.colors.secondary_color}
|
|
1384
2565
|
/>
|
|
1385
2566
|
);
|
|
1386
2567
|
};
|
|
1387
2568
|
|
|
1388
2569
|
const AdaptiveCard = (props) => {
|
|
1389
|
-
const { widget, timestamp } = props;
|
|
1390
|
-
const [hover, setHover] = useState(false);
|
|
1391
|
-
|
|
2570
|
+
const { widget, timestamp, logoshape } = props;
|
|
2571
|
+
// const [hover, setHover] = useState(false);
|
|
2572
|
+
const scale = useScaleContext()
|
|
1392
2573
|
return (
|
|
1393
|
-
<MessageBox className="widget_chat_adaptiveCard">
|
|
1394
|
-
<LogoSize>
|
|
2574
|
+
<MessageBox size={scale.widgetSize} className="widget_chat_adaptiveCard">
|
|
2575
|
+
<LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
|
|
1395
2576
|
<img
|
|
1396
2577
|
alt={"logo"}
|
|
1397
2578
|
src={
|
|
@@ -1402,26 +2583,12 @@ const AdaptiveCard = (props) => {
|
|
|
1402
2583
|
</LogoSize>
|
|
1403
2584
|
<div className="position-realtive tryit_wrapper_card">
|
|
1404
2585
|
<div className="tryit_cards">
|
|
1405
|
-
<div className="flex widget_title">
|
|
2586
|
+
<div className="flex widget_title single_card_message">
|
|
1406
2587
|
<h6>{widget && widget.name}</h6>
|
|
1407
2588
|
<div className="timestamp">{formatTimeAMPM(timestamp)}</div>
|
|
1408
2589
|
</div>
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
<div className="carousal_container">
|
|
1412
|
-
<div
|
|
1413
|
-
className="carousal_slide_container"
|
|
1414
|
-
style={
|
|
1415
|
-
{
|
|
1416
|
-
// transform: `translate3d(${activeSlide.transformWidth}px, 0px, 0px)`,
|
|
1417
|
-
}
|
|
1418
|
-
}
|
|
1419
|
-
>
|
|
1420
|
-
<div className="slide_container">
|
|
1421
|
-
{/* carousal slide section*/}
|
|
1422
|
-
<AdaptiveCardSingleSlide {...props} />
|
|
1423
|
-
</div>
|
|
1424
|
-
</div>
|
|
2590
|
+
<div className="chat_adaptiveCard_section">
|
|
2591
|
+
<AdaptiveCardSingleSlide {...props} />
|
|
1425
2592
|
</div>
|
|
1426
2593
|
</div>
|
|
1427
2594
|
</div>
|
|
@@ -1430,76 +2597,156 @@ const AdaptiveCard = (props) => {
|
|
|
1430
2597
|
};
|
|
1431
2598
|
|
|
1432
2599
|
const AdaptiveCardSingleSlide = ({
|
|
2600
|
+
adaptive_card: { title, logo, description, fields, buttons },
|
|
2601
|
+
logoshape,
|
|
2602
|
+
}) => {
|
|
2603
|
+
const scale = useScaleContext()
|
|
2604
|
+
return (
|
|
2605
|
+
<>
|
|
2606
|
+
<div className="adaptive_card_box">
|
|
2607
|
+
<div className="tryit_cards_top_left" style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
|
|
2608
|
+
{logo && <img src={logo} alt="logo" />}
|
|
2609
|
+
</div>
|
|
2610
|
+
<div className="tryit_cards_top_right">
|
|
2611
|
+
{/* <div className="timestamp">10:12 am</div> */}
|
|
2612
|
+
<AdaptiveHeader
|
|
2613
|
+
className="widget_chat_adaptiveHeader"
|
|
2614
|
+
// color={props.colors.primary_color}
|
|
2615
|
+
>
|
|
2616
|
+
<AssistantMd mdText={convertToMDText(title)}></AssistantMd>
|
|
2617
|
+
</AdaptiveHeader>
|
|
2618
|
+
<AdaptiveParagraph
|
|
2619
|
+
// color={props.colors.primary_color}
|
|
2620
|
+
className="widget_chat_adaptiverParagraph"
|
|
2621
|
+
>
|
|
2622
|
+
<AssistantMd mdText={convertToMDText(description)}></AssistantMd>
|
|
2623
|
+
</AdaptiveParagraph>
|
|
2624
|
+
</div>
|
|
2625
|
+
</div>
|
|
2626
|
+
<div className="tryit_cards_wrapper">
|
|
2627
|
+
<div className="tryit_cards_left">
|
|
2628
|
+
<div className="tryit_ticket_wrapper tryit_content_wrapper">
|
|
2629
|
+
<div className="tryit_ticket_details_wrapper">
|
|
2630
|
+
{fields.map(({ title, value }, key) => (
|
|
2631
|
+
<div className="tryit_ticket_details flex" key={key}>
|
|
2632
|
+
<h6>
|
|
2633
|
+
<AssistantMd
|
|
2634
|
+
mdText={convertToMDText(title)}
|
|
2635
|
+
></AssistantMd>{" "}
|
|
2636
|
+
</h6>
|
|
2637
|
+
<p className="tryit_ticket_colun">:</p>
|
|
2638
|
+
<p>
|
|
2639
|
+
<AssistantMd
|
|
2640
|
+
mdText={convertToMDText(value)}
|
|
2641
|
+
></AssistantMd>
|
|
2642
|
+
</p>
|
|
2643
|
+
</div>
|
|
2644
|
+
))}
|
|
2645
|
+
</div>
|
|
2646
|
+
</div>
|
|
2647
|
+
<div className="tryit_ticket_wrapper tryit_button_wrapper">
|
|
2648
|
+
{buttons.map(({ text, url }, key) => (
|
|
2649
|
+
<WidgetUpdateButton key={key}>
|
|
2650
|
+
<a href={evalNormalOrJoinText(convertToMDText(url))} target="_blank">
|
|
2651
|
+
<Button
|
|
2652
|
+
// onMouseEnter={() => setHover({ btn: 3 })}
|
|
2653
|
+
// onMouseLeave={() => setHover({ btn: 0 })}
|
|
2654
|
+
type="button"
|
|
2655
|
+
size={scale.widgetSize}
|
|
2656
|
+
>
|
|
2657
|
+
<AssistantMd
|
|
2658
|
+
className="widget_btn_content"
|
|
2659
|
+
mdText={convertToMDText(text)}
|
|
2660
|
+
></AssistantMd>
|
|
2661
|
+
</Button>
|
|
2662
|
+
</a>
|
|
2663
|
+
</WidgetUpdateButton>
|
|
2664
|
+
))}
|
|
2665
|
+
</div>
|
|
2666
|
+
</div>
|
|
2667
|
+
</div>
|
|
2668
|
+
</>
|
|
2669
|
+
);
|
|
2670
|
+
};
|
|
2671
|
+
|
|
2672
|
+
const AdaptiveCardcarousalSlide = ({
|
|
1433
2673
|
adaptive_card: { title, logo, description, fields, buttons },
|
|
1434
2674
|
widget,
|
|
1435
2675
|
timestamp,
|
|
1436
2676
|
currentSlideEls,
|
|
1437
2677
|
index,
|
|
2678
|
+
logoshape,
|
|
1438
2679
|
}) => {
|
|
2680
|
+
const scale = useScaleContext()
|
|
1439
2681
|
return (
|
|
1440
2682
|
<div
|
|
1441
2683
|
className="slide"
|
|
1442
2684
|
ref={(el) => currentSlideEls && (currentSlideEls.current[index] = el)}
|
|
1443
2685
|
>
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
2686
|
+
<div className="adaptive_card_box">
|
|
2687
|
+
{/* <div className="d-flex"> */}
|
|
2688
|
+
<div className="tryit_cards_top_left" style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
|
|
2689
|
+
{logo && <img src={logo} alt="logo" />}
|
|
2690
|
+
</div>
|
|
2691
|
+
<div className="tryit_cards_top_right">
|
|
2692
|
+
{/* <div className="timestamp">10:12 am</div> */}
|
|
2693
|
+
<AdaptiveHeader
|
|
2694
|
+
className="widget_chat_adaptiveHeader"
|
|
2695
|
+
// color={props.colors.primary_color}
|
|
2696
|
+
>
|
|
2697
|
+
<AssistantMd mdText={convertToMDText(title)}></AssistantMd>
|
|
2698
|
+
</AdaptiveHeader>
|
|
2699
|
+
<AdaptiveParagraph
|
|
2700
|
+
// color={props.colors.primary_color}
|
|
2701
|
+
className="widget_chat_adaptiverParagraph"
|
|
2702
|
+
>
|
|
2703
|
+
<AssistantMd mdText={convertToMDText(description)}></AssistantMd>
|
|
2704
|
+
</AdaptiveParagraph>
|
|
2705
|
+
</div>
|
|
2706
|
+
{/* </div> */}
|
|
2707
|
+
</div>
|
|
2708
|
+
<div className="tryit_cards_wrapper">
|
|
2709
|
+
<div className="tryit_cards_left">
|
|
2710
|
+
<div className="tryit_ticket_wrapper tryit_content_wrapper">
|
|
2711
|
+
<div className="tryit_ticket_details_wrapper">
|
|
2712
|
+
{fields.map(({ title, value }, key) => (
|
|
2713
|
+
<div className="tryit_ticket_details flex" key={key}>
|
|
2714
|
+
<h6>
|
|
2715
|
+
<AssistantMd
|
|
2716
|
+
mdText={convertToMDText(title)}
|
|
2717
|
+
></AssistantMd>{" "}
|
|
2718
|
+
</h6>
|
|
2719
|
+
<p className="tryit_ticket_colun">:</p>
|
|
2720
|
+
<p>
|
|
2721
|
+
<AssistantMd
|
|
2722
|
+
mdText={convertToMDText(value)}
|
|
2723
|
+
></AssistantMd>
|
|
2724
|
+
</p>
|
|
1480
2725
|
</div>
|
|
1481
|
-
|
|
1482
|
-
<div className="tryit_ticket_wrapper tryit_button_wrapper">
|
|
1483
|
-
{buttons.map(({ text, url }, key) => (
|
|
1484
|
-
<WidgetUpdateButton key={key}>
|
|
1485
|
-
<a href={url.value} target="_blank">
|
|
1486
|
-
<Button
|
|
1487
|
-
onMouseEnter={() => setHover({ btn: 3 })}
|
|
1488
|
-
onMouseLeave={() => setHover({ btn: 0 })}
|
|
1489
|
-
type="button"
|
|
1490
|
-
>
|
|
1491
|
-
<AssistantMd
|
|
1492
|
-
className="widget_btn_content"
|
|
1493
|
-
mdText={convertToMDText(text)}
|
|
1494
|
-
></AssistantMd>
|
|
1495
|
-
</Button>
|
|
1496
|
-
</a>
|
|
1497
|
-
</WidgetUpdateButton>
|
|
1498
|
-
))}
|
|
1499
|
-
</div>
|
|
2726
|
+
))}
|
|
1500
2727
|
</div>
|
|
1501
2728
|
</div>
|
|
2729
|
+
<div className="tryit_ticket_wrapper tryit_button_wrapper">
|
|
2730
|
+
{buttons.map(({ text, url }, key) => (
|
|
2731
|
+
<WidgetUpdateButton key={key}>
|
|
2732
|
+
<a href={url.value} target="_blank">
|
|
2733
|
+
<Button
|
|
2734
|
+
// onMouseEnter={() => setHover({ btn: 3 })}
|
|
2735
|
+
// onMouseLeave={() => setHover({ btn: 0 })}
|
|
2736
|
+
type="button"
|
|
2737
|
+
size={scale.widgetSize}
|
|
2738
|
+
>
|
|
2739
|
+
<AssistantMd
|
|
2740
|
+
className="widget_btn_content"
|
|
2741
|
+
mdText={convertToMDText(text)}
|
|
2742
|
+
></AssistantMd>
|
|
2743
|
+
</Button>
|
|
2744
|
+
</a>
|
|
2745
|
+
</WidgetUpdateButton>
|
|
2746
|
+
))}
|
|
2747
|
+
</div>
|
|
1502
2748
|
</div>
|
|
2749
|
+
</div>
|
|
1503
2750
|
</div>
|
|
1504
2751
|
);
|
|
1505
2752
|
};
|
|
@@ -1512,6 +2759,8 @@ const add = (x, y) => x + y;
|
|
|
1512
2759
|
const ReceivedCarousalOutput = ({
|
|
1513
2760
|
widget,
|
|
1514
2761
|
timestamp,
|
|
2762
|
+
logoshape,
|
|
2763
|
+
widget_size,
|
|
1515
2764
|
carousal: { carousal_adaptive_card: adaptive_cards },
|
|
1516
2765
|
}) => {
|
|
1517
2766
|
let [activeSlide, setActiveSlide] = useState({ index: 0, transformWidth: 0 });
|
|
@@ -1531,11 +2780,12 @@ const ReceivedCarousalOutput = ({
|
|
|
1531
2780
|
};
|
|
1532
2781
|
let slideRight = slide(addOne, minus);
|
|
1533
2782
|
let slideLeft = slide(minusOne, add);
|
|
2783
|
+
const scale = useScaleContext()
|
|
1534
2784
|
return (
|
|
1535
|
-
<MessageBox className="widget_chat_adaptiveCard slider">
|
|
1536
|
-
<LogoSize>
|
|
2785
|
+
<MessageBox size={scale.widgetSize} className="widget_chat_adaptiveCard slider">
|
|
2786
|
+
<LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
|
|
1537
2787
|
<img
|
|
1538
|
-
alt={"
|
|
2788
|
+
alt={"bot_chat_logo"}
|
|
1539
2789
|
src={
|
|
1540
2790
|
(widget && widget.logo_url) ||
|
|
1541
2791
|
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
@@ -1544,50 +2794,57 @@ const ReceivedCarousalOutput = ({
|
|
|
1544
2794
|
</LogoSize>
|
|
1545
2795
|
<div className="position-realtive tryit_wrapper_card">
|
|
1546
2796
|
<div className="tryit_cards">
|
|
1547
|
-
<div className="flex widget_title">
|
|
2797
|
+
<div className="flex widget_title slider_message">
|
|
1548
2798
|
<h6>{widget && widget.name}</h6>
|
|
1549
2799
|
<div className="timestamp">{formatTimeAMPM(timestamp)}</div>
|
|
1550
2800
|
</div>
|
|
1551
2801
|
|
|
1552
|
-
<div className="
|
|
1553
|
-
<div className="
|
|
1554
|
-
<
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
<img
|
|
1580
|
-
alt={"right_arrow"}
|
|
1581
|
-
src="https://workativ-asssistant-widget-images.s3.amazonaws.com/adaptive_card_arrow.svg"
|
|
1582
|
-
style={
|
|
1583
|
-
activeSlide.index == currentSlideEls.current.length - 1
|
|
1584
|
-
? { visibility: "hidden" }
|
|
1585
|
-
: null
|
|
1586
|
-
}
|
|
1587
|
-
/>
|
|
2802
|
+
<div className="carousal_wrapper">
|
|
2803
|
+
<div onClick={slideLeft} className="arrows left">
|
|
2804
|
+
<img
|
|
2805
|
+
alt={"left_arrow"}
|
|
2806
|
+
className="left_arrow"
|
|
2807
|
+
src="https://workativ-asssistant-widget-images.s3.amazonaws.com/adaptive_card_arrow.svg"
|
|
2808
|
+
style={
|
|
2809
|
+
activeSlide.index == 0 ? { visibility: "hidden" } : null
|
|
2810
|
+
}
|
|
2811
|
+
/>
|
|
2812
|
+
</div>
|
|
2813
|
+
<div className="carousal_box_section">
|
|
2814
|
+
<div className="carousal_container">
|
|
2815
|
+
<div
|
|
2816
|
+
className="carousal_slide_container"
|
|
2817
|
+
style={{
|
|
2818
|
+
transform: `translate3d(${activeSlide.transformWidth}px, 0px, 0px)`,
|
|
2819
|
+
}}
|
|
2820
|
+
>
|
|
2821
|
+
{adaptive_cards.map((adaptive_card, i) => (
|
|
2822
|
+
<AdaptiveCardcarousalSlide
|
|
2823
|
+
{...{ widget, timestamp, adaptive_card, logoshape }}
|
|
2824
|
+
currentSlideEls={currentSlideEls}
|
|
2825
|
+
index={i}
|
|
2826
|
+
key={i}
|
|
2827
|
+
/>
|
|
2828
|
+
))}
|
|
1588
2829
|
</div>
|
|
2830
|
+
|
|
1589
2831
|
</div>
|
|
1590
2832
|
</div>
|
|
2833
|
+
{/* <div className="widget_arrows">
|
|
2834
|
+
|
|
2835
|
+
|
|
2836
|
+
</div> */}
|
|
2837
|
+
<div onClick={slideRight} className="arrows">
|
|
2838
|
+
<img
|
|
2839
|
+
alt={"right_arrow"}
|
|
2840
|
+
src="https://workativ-asssistant-widget-images.s3.amazonaws.com/adaptive_card_arrow.svg"
|
|
2841
|
+
style={
|
|
2842
|
+
activeSlide.index == currentSlideEls.current.length - 1
|
|
2843
|
+
? { visibility: "hidden" }
|
|
2844
|
+
: null
|
|
2845
|
+
}
|
|
2846
|
+
/>
|
|
2847
|
+
</div>
|
|
1591
2848
|
</div>
|
|
1592
2849
|
</div>
|
|
1593
2850
|
</div>
|
|
@@ -1595,8 +2852,9 @@ const ReceivedCarousalOutput = ({
|
|
|
1595
2852
|
);
|
|
1596
2853
|
};
|
|
1597
2854
|
|
|
1598
|
-
const ChatHeaderTop = ({ widget, onClick, open, restart, exit }) => {
|
|
1599
|
-
|
|
2855
|
+
const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
|
|
2856
|
+
// ßconsole.log(widget, "widget");
|
|
2857
|
+
const scale = useScaleContext()
|
|
1600
2858
|
return (
|
|
1601
2859
|
<ChatHeader
|
|
1602
2860
|
className="widget_chat_top"
|
|
@@ -1604,8 +2862,9 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit }) => {
|
|
|
1604
2862
|
backgroundImage: `url(https://workativ-asssistant-widget-images.s3.amazonaws.com/widget_header_bg.svg)`,
|
|
1605
2863
|
backgroundColor: widget ? widget.accent_color : "#FFD15C",
|
|
1606
2864
|
}}
|
|
2865
|
+
size={scale.widgetSize}
|
|
1607
2866
|
>
|
|
1608
|
-
<LogoSize style={{ right: 6, position: "relative" }}>
|
|
2867
|
+
<LogoSize style={{ right: 6, position: "relative", borderRadius: logoshape == "box" ? '5%' : '50%' }}>
|
|
1609
2868
|
<img
|
|
1610
2869
|
title={"logo"}
|
|
1611
2870
|
src={
|
|
@@ -1616,11 +2875,11 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit }) => {
|
|
|
1616
2875
|
</LogoSize>
|
|
1617
2876
|
<ContentHeader>
|
|
1618
2877
|
<ContentHeaderLeft>
|
|
1619
|
-
<FormHeader>{widget && widget.name}</FormHeader>
|
|
1620
|
-
<Paragraph>{widget && widget.description}</Paragraph>
|
|
2878
|
+
<FormHeader style={{ color: widget.primary_color }} size={scale.widgetSize}>{widget && widget.name}</FormHeader>
|
|
2879
|
+
<Paragraph style={{ color: widget.primary_color }} size={scale.widgetSize}>{widget && widget.description}</Paragraph>
|
|
1621
2880
|
</ContentHeaderLeft>
|
|
1622
|
-
<ContentHeaderRight>
|
|
1623
|
-
<IconSpan className="relative
|
|
2881
|
+
<ContentHeaderRight size={scale.widgetSize}>
|
|
2882
|
+
<IconSpan className="relative restart" onClick={restart} style={{ fill: widget.primary_color }}>
|
|
1624
2883
|
<svg
|
|
1625
2884
|
xmlns="http://www.w3.org/2000/svg"
|
|
1626
2885
|
x="0px"
|
|
@@ -1637,8 +2896,11 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit }) => {
|
|
|
1637
2896
|
transform="translate(11.158)"
|
|
1638
2897
|
/>
|
|
1639
2898
|
</svg>
|
|
2899
|
+
<label className="restart_content">
|
|
2900
|
+
Restart Chat
|
|
2901
|
+
</label>
|
|
1640
2902
|
</IconSpan>
|
|
1641
|
-
<IconSpan className="relative
|
|
2903
|
+
<IconSpan className="relative close_section" onClick={exit} style={{ fill: widget.primary_color }}>
|
|
1642
2904
|
<svg
|
|
1643
2905
|
xmlns="http://www.w3.org/2000/svg"
|
|
1644
2906
|
x="0px"
|
|
@@ -1653,6 +2915,7 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit }) => {
|
|
|
1653
2915
|
<path d="M14.9 2c-3.4 0-6.7 1.3-9.1 3.8C3.3 8.2 2 11.4 2 14.9s1.3 6.7 3.8 9.1c2.4 2.4 5.7 3.8 9.1 3.8s6.7-1.3 9.1-3.8c2.4-2.4 3.8-5.7 3.8-9.1S26.4 8.2 24 5.8C21.5 3.3 18.3 2 14.9 2m0-2c8.2 0 14.9 6.7 14.9 14.9s-6.7 14.9-14.9 14.9S0 23.1 0 14.9 6.7 0 14.9 0z" />
|
|
1654
2916
|
<path d="M16.8 14.9l4.2-4.2.1-.1c.4-.5.4-1.3-.1-1.7-.5-.4-1.3-.4-1.7.1l-4.2 4.2L10.9 9l-.1-.1c-.2-.2-.5-.3-.9-.3-.3 0-.6.1-.8.4-.3.2-.4.5-.3.8 0 .3.2.6.4.8l4.2 4.2L9.2 19c-.2.2-.4.5-.4.9 0 .7.5 1.2 1.2 1.2.3 0 .6-.1.9-.4l4.2-4.2 4.2 4.2-.1.3h.9c.3 0 .6-.1.9-.4.5-.5.5-1.2 0-1.7l-4.2-4z" />
|
|
1655
2917
|
</svg>
|
|
2918
|
+
<label className=""> End Chat </label>
|
|
1656
2919
|
</IconSpan>
|
|
1657
2920
|
</ContentHeaderRight>
|
|
1658
2921
|
</ContentHeader>
|
|
@@ -1660,21 +2923,56 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit }) => {
|
|
|
1660
2923
|
);
|
|
1661
2924
|
};
|
|
1662
2925
|
|
|
2926
|
+
const AiResponse = ({ output, sendFeedback, logoshape, widget, timestamp }) => {
|
|
2927
|
+
const scale = useScaleContext();
|
|
2928
|
+
return <>
|
|
2929
|
+
<MessageBox size={scale.widgetSize} className="widget_chat_logs">
|
|
2930
|
+
<LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
|
|
2931
|
+
<img
|
|
2932
|
+
alt={"logo"}
|
|
2933
|
+
src={
|
|
2934
|
+
(widget && widget.logo_url) ||
|
|
2935
|
+
"https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
2936
|
+
}
|
|
2937
|
+
/>
|
|
2938
|
+
</LogoSize>
|
|
2939
|
+
<ChatMessage size={scale.widgetSize}>
|
|
2940
|
+
<div className="flex widget_title chat_assisitant">
|
|
2941
|
+
<h6>{widget && widget.name}</h6>
|
|
2942
|
+
<div className="timestamp">{formatTimeAMPM(timestamp)}</div>
|
|
2943
|
+
</div>
|
|
2944
|
+
<div>
|
|
2945
|
+
<AssistantMd mdText={output.text}></AssistantMd>
|
|
2946
|
+
</div>
|
|
2947
|
+
</ChatMessage>
|
|
2948
|
+
</MessageBox>
|
|
2949
|
+
<AiFeedbackButtonsWrapper
|
|
2950
|
+
options={output.buttons}
|
|
2951
|
+
sendFeedback={sendFeedback}
|
|
2952
|
+
/>
|
|
2953
|
+
</>
|
|
2954
|
+
}
|
|
2955
|
+
|
|
1663
2956
|
const ChatAssistant = ({
|
|
1664
|
-
output: {
|
|
2957
|
+
output: { type, ...outputStruct },
|
|
1665
2958
|
sendMessage,
|
|
2959
|
+
sendFeedback,
|
|
1666
2960
|
widget,
|
|
1667
2961
|
timestamp,
|
|
1668
2962
|
logoshape,
|
|
1669
2963
|
logosize,
|
|
1670
2964
|
logoborder,
|
|
1671
2965
|
}) => {
|
|
1672
|
-
const [hover, setHover] = useState(false);
|
|
1673
|
-
console.log(output, "output");
|
|
2966
|
+
// const [hover, setHover] = useState(false);
|
|
2967
|
+
// console.log(output, "output");
|
|
2968
|
+
const scale = useScaleContext();
|
|
2969
|
+
if (outputStruct.response_type === "ai_response") {
|
|
2970
|
+
return <AiResponse output={outputStruct} timestamp={timestamp} widget={widget} logoshape={logoshape} sendFeedback={sendFeedback} />
|
|
2971
|
+
}
|
|
1674
2972
|
return (
|
|
1675
2973
|
<>
|
|
1676
|
-
<MessageBox className="widget_chat_logs">
|
|
1677
|
-
<LogoSize>
|
|
2974
|
+
<MessageBox size={scale.widgetSize} className="widget_chat_logs">
|
|
2975
|
+
<LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
|
|
1678
2976
|
<img
|
|
1679
2977
|
alt={"logo"}
|
|
1680
2978
|
src={
|
|
@@ -1683,34 +2981,27 @@ const ChatAssistant = ({
|
|
|
1683
2981
|
}
|
|
1684
2982
|
/>
|
|
1685
2983
|
</LogoSize>
|
|
1686
|
-
<ChatMessage>
|
|
1687
|
-
<div className="flex widget_title">
|
|
2984
|
+
<ChatMessage size={scale.widgetSize}>
|
|
2985
|
+
<div className="flex widget_title chat_assisitant">
|
|
1688
2986
|
<h6>{widget && widget.name}</h6>
|
|
1689
2987
|
<div className="timestamp">{formatTimeAMPM(timestamp)}</div>
|
|
1690
2988
|
</div>
|
|
1691
|
-
{
|
|
2989
|
+
{type === "text_with_btns" ? (
|
|
1692
2990
|
<div>
|
|
1693
|
-
<AssistantMd mdText={outputStruct.
|
|
2991
|
+
<AssistantMd mdText={outputStruct.text}></AssistantMd>
|
|
1694
2992
|
</div>
|
|
1695
2993
|
) : (
|
|
1696
2994
|
<div>
|
|
1697
2995
|
<AssistantMd
|
|
1698
|
-
mdText={
|
|
1699
|
-
typeof outputStruct.text.text === "string"
|
|
1700
|
-
? convertToMDText(outputStruct.text.text)
|
|
1701
|
-
: outputStruct.text.text
|
|
1702
|
-
}
|
|
2996
|
+
mdText={outputStruct.value}
|
|
1703
2997
|
></AssistantMd>
|
|
1704
2998
|
</div>
|
|
1705
2999
|
)}
|
|
1706
|
-
<svg x="0px" y="0px" viewBox="0 0 7.9 7.9" xmlSpace="preserve">
|
|
1707
|
-
<path d="M7.9 8c0-4.4-3.6-8-8-8h8v8z" fill="currentColor" />
|
|
1708
|
-
</svg>
|
|
1709
3000
|
</ChatMessage>
|
|
1710
3001
|
</MessageBox>
|
|
1711
|
-
{
|
|
3002
|
+
{type === "text_with_btns" && (
|
|
1712
3003
|
<ButtonsWrapper
|
|
1713
|
-
options={outputStruct.
|
|
3004
|
+
options={outputStruct.buttons}
|
|
1714
3005
|
sendMessage={sendMessage}
|
|
1715
3006
|
widget={widget}
|
|
1716
3007
|
/>
|
|
@@ -1720,17 +3011,19 @@ const ChatAssistant = ({
|
|
|
1720
3011
|
};
|
|
1721
3012
|
|
|
1722
3013
|
const WidgetBtn = ({ sendMessage, widget, label, value }) => {
|
|
1723
|
-
const [hovered, setHovered] = useState(false);
|
|
3014
|
+
// const [hovered, setHovered] = useState(false);
|
|
3015
|
+
const scale = useScaleContext()
|
|
1724
3016
|
return (
|
|
1725
3017
|
<WidgetUpdateButton>
|
|
1726
3018
|
<Button
|
|
1727
|
-
onMouseOver={() => setHovered(true)}
|
|
1728
|
-
onMouseLeave={() => setHovered(false)}
|
|
3019
|
+
// onMouseOver={() => setHovered(true)}
|
|
3020
|
+
// onMouseLeave={() => setHovered(false)}
|
|
1729
3021
|
type="button"
|
|
1730
3022
|
onClick={() => {
|
|
1731
3023
|
sendMessage(evalNormalOrJoinText(value));
|
|
1732
3024
|
}}
|
|
1733
3025
|
className="widget_btn"
|
|
3026
|
+
size={scale.widgetSize}
|
|
1734
3027
|
>
|
|
1735
3028
|
<AssistantMd mdText={label} />
|
|
1736
3029
|
</Button>
|
|
@@ -1738,13 +3031,50 @@ const WidgetBtn = ({ sendMessage, widget, label, value }) => {
|
|
|
1738
3031
|
);
|
|
1739
3032
|
};
|
|
1740
3033
|
|
|
3034
|
+
const FeedbackBtn = ({ label, action, sendFeedback }) => {
|
|
3035
|
+
// const [hovered, setHovered] = useState(false);
|
|
3036
|
+
console.log("feedback btn ::: awesome ::: ", action)
|
|
3037
|
+
const scale = useScaleContext()
|
|
3038
|
+
return (
|
|
3039
|
+
<WidgetUpdateButton>
|
|
3040
|
+
<Button
|
|
3041
|
+
// onMouseOver={() => setHovered(true)}
|
|
3042
|
+
// onMouseLeave={() => setHovered(false)}
|
|
3043
|
+
type="button"
|
|
3044
|
+
onClick={() => {
|
|
3045
|
+
sendFeedback(action.contract_action.action === "send_satisfied_feedback" ? "satisfied" : "not_satisfied");
|
|
3046
|
+
}}
|
|
3047
|
+
className="widget_btn"
|
|
3048
|
+
size={scale.widgetSize}
|
|
3049
|
+
>
|
|
3050
|
+
<AssistantMd mdText={label} />
|
|
3051
|
+
</Button>
|
|
3052
|
+
</WidgetUpdateButton>
|
|
3053
|
+
);
|
|
3054
|
+
}
|
|
3055
|
+
|
|
3056
|
+
const AiFeedbackButtonsWrapper = ({ options, sendFeedback }) => {
|
|
3057
|
+
return (
|
|
3058
|
+
<ButtonWrapper>
|
|
3059
|
+
{options.map(({ label, action }, key) => (
|
|
3060
|
+
<FeedbackBtn
|
|
3061
|
+
label={label}
|
|
3062
|
+
action={action}
|
|
3063
|
+
key={key}
|
|
3064
|
+
sendFeedback={sendFeedback}
|
|
3065
|
+
></FeedbackBtn>
|
|
3066
|
+
))}
|
|
3067
|
+
</ButtonWrapper>
|
|
3068
|
+
);
|
|
3069
|
+
}
|
|
3070
|
+
|
|
1741
3071
|
const ButtonsWrapper = ({ options, sendMessage, widget }) => {
|
|
1742
3072
|
return (
|
|
1743
3073
|
<ButtonWrapper>
|
|
1744
|
-
{options.map(({ label,
|
|
3074
|
+
{options.map(({ label, action }, key) => (
|
|
1745
3075
|
<WidgetBtn
|
|
1746
|
-
label={
|
|
1747
|
-
value={
|
|
3076
|
+
label={label}
|
|
3077
|
+
value={action.send_rly}
|
|
1748
3078
|
key={key}
|
|
1749
3079
|
sendMessage={sendMessage}
|
|
1750
3080
|
widget={widget}
|
|
@@ -1754,51 +3084,6 @@ const ButtonsWrapper = ({ options, sendMessage, widget }) => {
|
|
|
1754
3084
|
);
|
|
1755
3085
|
};
|
|
1756
3086
|
|
|
1757
|
-
// const KnowledgeAINode = (
|
|
1758
|
-
// props
|
|
1759
|
-
// // : { image: any; optionText: boolean }
|
|
1760
|
-
// ) => {
|
|
1761
|
-
// return (
|
|
1762
|
-
// <MessageBox className="widget_chat_logs">
|
|
1763
|
-
// <LogoSize>
|
|
1764
|
-
// <img
|
|
1765
|
-
// alt={"logo"}
|
|
1766
|
-
// src="https://workativ-asssistant-widget-images.s3.amazonaws.com/chat_logo.png"
|
|
1767
|
-
// />
|
|
1768
|
-
// </LogoSize>
|
|
1769
|
-
// <ChatMessage>
|
|
1770
|
-
// <div className="flex widget_title">
|
|
1771
|
-
// <h6>Ach-Me Bot</h6>
|
|
1772
|
-
// <div className="timestamp">10:12 am</div>
|
|
1773
|
-
// </div>
|
|
1774
|
-
// <div className="wid_message">
|
|
1775
|
-
// Locate and remove any paper stuck in the loading tray. Clear the jam
|
|
1776
|
-
// from the rear of the printer and remove a rear access panel.
|
|
1777
|
-
// </div>
|
|
1778
|
-
|
|
1779
|
-
// <div className="chatAssistant_one">
|
|
1780
|
-
// <h6>References: </h6>
|
|
1781
|
-
// <ol>
|
|
1782
|
-
// <li>
|
|
1783
|
-
// <a href="#">Printer Troubleshooting</a>
|
|
1784
|
-
// </li>
|
|
1785
|
-
// <li>
|
|
1786
|
-
// <a href="#">Printer Issues</a>{" "}
|
|
1787
|
-
// </li>
|
|
1788
|
-
// <li>
|
|
1789
|
-
// <a href="#">How to fix Printer</a>
|
|
1790
|
-
// </li>
|
|
1791
|
-
// </ol>
|
|
1792
|
-
// </div>
|
|
1793
|
-
|
|
1794
|
-
// <svg x="0px" y="0px" viewBox="0 0 7.9 7.9" xmlSpace="preserve">
|
|
1795
|
-
// <path d="M7.9 8c0-4.4-3.6-8-8-8h8v8z" fill="currentColor" />
|
|
1796
|
-
// </svg>
|
|
1797
|
-
// </ChatMessage>
|
|
1798
|
-
// </MessageBox>
|
|
1799
|
-
// );
|
|
1800
|
-
// };
|
|
1801
|
-
|
|
1802
3087
|
const DisplayLineBreaks = ({ text }) => {
|
|
1803
3088
|
let texts = text.split("\n");
|
|
1804
3089
|
let lastOne = texts[texts.length - 1];
|
|
@@ -1838,26 +3123,22 @@ const UserAssistant = ({
|
|
|
1838
3123
|
logosize,
|
|
1839
3124
|
logoborder,
|
|
1840
3125
|
}) => {
|
|
3126
|
+
const scale = useScaleContext()
|
|
1841
3127
|
return (
|
|
1842
|
-
<UserChat
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
<ChatMessage>
|
|
1847
|
-
<div className="flex widget_title">
|
|
3128
|
+
<UserChat size={scale.widgetSize}>
|
|
3129
|
+
<MessageBox size={scale.widgetSize}>
|
|
3130
|
+
<ChatMessage size={scale.widgetSize}>
|
|
3131
|
+
<div className="flex widget_title user_chat">
|
|
1848
3132
|
<h6>{SYS_FirstName}</h6>
|
|
1849
3133
|
<div className="timestamp">{formatTimeAMPM(timestamp)}</div>
|
|
1850
3134
|
</div>
|
|
1851
3135
|
<div>
|
|
1852
3136
|
{(SYS_UPLOADED_FILE && "File uploaded") || (
|
|
1853
|
-
<DisplayURL text={input} />
|
|
3137
|
+
<DisplayURL text={input.value} />
|
|
1854
3138
|
)}
|
|
1855
3139
|
</div>
|
|
1856
|
-
<svg x="0px" y="0px" viewBox="0 0 7.9 7.9" xmlSpace="preserve">
|
|
1857
|
-
<path d="M-.1 8c0-4.4 3.6-8 8-8h-8v8z" fill="#000" />
|
|
1858
|
-
</svg>
|
|
1859
3140
|
</ChatMessage>
|
|
1860
|
-
<LogoSize>
|
|
3141
|
+
<LogoSize size={scale.widgetSize} style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
|
|
1861
3142
|
{/* <UserIconAnalytics /> */}
|
|
1862
3143
|
<svg
|
|
1863
3144
|
id="Layer_1"
|
|
@@ -1889,19 +3170,32 @@ const UserAssistant = ({
|
|
|
1889
3170
|
);
|
|
1890
3171
|
};
|
|
1891
3172
|
|
|
1892
|
-
const
|
|
3173
|
+
const WidgetMenu = ({
|
|
1893
3174
|
widget,
|
|
1894
3175
|
onClick,
|
|
1895
3176
|
open,
|
|
1896
3177
|
logoshape,
|
|
1897
3178
|
logosize,
|
|
1898
3179
|
logoborder,
|
|
3180
|
+
widget_size,
|
|
1899
3181
|
}) => {
|
|
3182
|
+
const scaleContext = useScaleContext();
|
|
3183
|
+
const style = {
|
|
3184
|
+
backgroundColor: widget ? widget.accent_color : "#FFD15C",
|
|
3185
|
+
borderRadius: logoshape == "box" ? '0%' : '50%', border: `1px solid ${logoborder.color}`,
|
|
3186
|
+
height: logosize * 12 + 62,
|
|
3187
|
+
width: logosize * 12 + 62,
|
|
3188
|
+
transform: `scale(${scaleContext.scale})`,
|
|
3189
|
+
fill: widget.primary_color,
|
|
3190
|
+
};
|
|
3191
|
+
|
|
3192
|
+
console.log("WidgetMenu", scaleContext)
|
|
3193
|
+
|
|
1900
3194
|
return (
|
|
1901
3195
|
<CancelButton className="widget_cancel_button">
|
|
1902
3196
|
{open ? (
|
|
1903
|
-
<IconSpan
|
|
1904
|
-
style={
|
|
3197
|
+
<IconSpan className="close_button"
|
|
3198
|
+
style={style}
|
|
1905
3199
|
// backg={props.backg}
|
|
1906
3200
|
// color={props.color}
|
|
1907
3201
|
onClick={onClick}
|
|
@@ -1920,9 +3214,7 @@ const CancelButtonWrapper = ({
|
|
|
1920
3214
|
</IconSpan>
|
|
1921
3215
|
) : (
|
|
1922
3216
|
<IconSpan
|
|
1923
|
-
|
|
1924
|
-
// backg={props.backg}
|
|
1925
|
-
// color={props.color}
|
|
3217
|
+
style={style}
|
|
1926
3218
|
onClick={onClick}
|
|
1927
3219
|
>
|
|
1928
3220
|
<img
|
|
@@ -1930,19 +3222,17 @@ const CancelButtonWrapper = ({
|
|
|
1930
3222
|
(widget && widget.logo_url) ||
|
|
1931
3223
|
"https://ac-image.s3.amazonaws.com/8/8/7/3/4/1/home/admin/images_for_product/logo.png?r=1663289093"
|
|
1932
3224
|
}
|
|
1933
|
-
className="rounded-full shadow-xl inline-block object-cover object-center"
|
|
1934
|
-
// className="rounded-full shadow-xl inline-block object-cover object-center"
|
|
1935
3225
|
style={
|
|
1936
3226
|
logoshape == "box"
|
|
1937
3227
|
? {
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
3228
|
+
width: "100%",
|
|
3229
|
+
height: "100%",
|
|
3230
|
+
boxShadow: "none",
|
|
3231
|
+
}
|
|
1942
3232
|
: {
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
3233
|
+
width: "86px",
|
|
3234
|
+
height: "86px",
|
|
3235
|
+
}
|
|
1946
3236
|
}
|
|
1947
3237
|
/>
|
|
1948
3238
|
</IconSpan>
|