@telia-ace/widget-conversation 1.1.2 → 1.1.3
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/components/conversation/ui/message-types/timestamp.d.ts +1 -0
- package/components/conversation/ui/skip-link.d.ts +3 -0
- package/{conversation-48ba3c2a.js → conversation-56aaee96.js} +100 -97
- package/{conversation-810929cb.mjs → conversation-8fab4c79.mjs} +486 -458
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +8 -8
|
@@ -1,22 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("@emotion/styled"),n=require("@telia-ace/widget-ui"),
|
|
2
|
-
position: absolute;
|
|
3
|
-
bottom: 112px;
|
|
4
|
-
width: 100%;
|
|
5
|
-
text-align: center;
|
|
6
|
-
a {
|
|
7
|
-
background-color: white;
|
|
8
|
-
padding: 6px;
|
|
9
|
-
text-decoration: none;
|
|
10
|
-
border-radius: 10px;
|
|
11
|
-
position: absolute;
|
|
12
|
-
left: -10000000px;
|
|
13
|
-
}
|
|
14
|
-
a:focus {
|
|
15
|
-
left: 50%;
|
|
16
|
-
transform: translateX(-50%);
|
|
17
|
-
${n.borderTabStyle};
|
|
18
|
-
}
|
|
19
|
-
`,te=i(n.Input)`
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("@emotion/styled"),n=require("@telia-ace/widget-ui"),C=require("@telia-ace/widget-utilities"),b=require("@emotion/react"),y=require("react"),X=require("@telia-ace/widget-forms"),v=require("./index.js");require("@telia-ace/widget-core");require("@telia-ace/widget-services");require("@telia-ace/widget-plugins");const G=({className:t})=>{const[e,o]=y.useState(""),[r,a]=y.useState(0),[l,d]=y.useState(0),m=n.useIsTabbing(),u=n.useDispatch(),{inputPlaceholder:f="Type your message",inputHidden:j=!1,inputDisabled:c=!1,sendButtonLabel:h="Send message",inputMultiline:x=!0,secondaryAction:$}=n.useProperties(),[z,p]=n.useScroll(!0);y.useEffect(()=>{if(p.current){const{lineHeight:g,maxHeight:T}=getComputedStyle(p.current);if(g&&g.indexOf("px")>-1){const L=g.split("px"),_=parseInt(L[0],10);a(_);const Y=T.split("px");d(parseInt(Y[0],10))}}},[p.current]);const w=g=>{!g.shiftKey||!x?(g.preventDefault(),e&&e.length>0&&(u("user-submit",{text:e}),o(""),M(""))):e.length<1&&g.preventDefault()},U=g=>{$&&(g.preventDefault(),u("action",{actionKey:$.action,...$}))},V=g=>{if(x&&p.current){const T=p.current.scrollHeight;if(T>r){p.current.style.height="auto";let L=T;g.length<1&&(L=r),p.current.style.height=`${L}px`,L>=l?p.current.style.overflowY="scroll":p.current.style.overflowY="hidden"}}},M=g=>{V(g),o(g),g&&g.length>0&&u("user-typing",{textLength:g.length})};return j?null:s.jsxs(ee,{grow:x,className:C.appendClassNames("humany-conversation-input",t),scrollableCss:z,isTabbing:m,children:[$&&s.jsx(Z,{disabled:c,onClick:U,title:$.label,"aria-label":$.label,children:s.jsx(n.SymbolBadge,{size:24,symbol:{type:"Svg",content:$.icon||"browse"}})}),x?s.jsx(J,{value:e,onChange:M,onEnter:w,disabled:c,"aria-label":f,placeholder:f,type:"textarea",rows:1,ref:p}):s.jsx(Q,{value:e,onChange:M,onEnter:w,disabled:c,"aria-label":f,placeholder:f}),s.jsx(q,{disabled:!1,onClick:w,title:h,"aria-label":h,children:s.jsx(te,{size:22,symbol:{type:"Svg",content:"send"},hasContent:!!e&&!!e.length})})]})},J=i(n.Input)`
|
|
20
2
|
resize: none;
|
|
21
3
|
flex: 1;
|
|
22
4
|
flex-shrink: 1;
|
|
@@ -34,7 +16,7 @@
|
|
|
34
16
|
${n.borderTabStyle};
|
|
35
17
|
outline-offset: 12px;
|
|
36
18
|
}
|
|
37
|
-
`,
|
|
19
|
+
`,Q=i(n.Input)`
|
|
38
20
|
flex: 1;
|
|
39
21
|
border: none;
|
|
40
22
|
background-color: transparent;
|
|
@@ -48,7 +30,7 @@
|
|
|
48
30
|
color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.textLight}};
|
|
49
31
|
font-style: italic;
|
|
50
32
|
}
|
|
51
|
-
`,
|
|
33
|
+
`,q=i(n.Button)`
|
|
52
34
|
flex: 0 0 50px;
|
|
53
35
|
align-self: stretch;
|
|
54
36
|
background-color: transparent;
|
|
@@ -60,14 +42,14 @@
|
|
|
60
42
|
&:focus-visible {
|
|
61
43
|
${n.borderTabStyle};
|
|
62
44
|
}
|
|
63
|
-
`,
|
|
45
|
+
`,Z=i(q)`
|
|
64
46
|
border-right: ${t=>t.theme.border};
|
|
65
47
|
margin: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}} 0;
|
|
66
|
-
`,
|
|
67
|
-
${t=>t.grow?
|
|
48
|
+
`,ee=i.div`
|
|
49
|
+
${t=>t.grow?b.css`
|
|
68
50
|
min-height: 50px;
|
|
69
51
|
max-height: 150px;
|
|
70
|
-
`:
|
|
52
|
+
`:b.css`
|
|
71
53
|
height: 50px;
|
|
72
54
|
`}
|
|
73
55
|
flex: 0 0 auto;
|
|
@@ -79,13 +61,13 @@
|
|
|
79
61
|
textarea {
|
|
80
62
|
${t=>!!t.scrollableCss&&t.scrollableCss}
|
|
81
63
|
}
|
|
82
|
-
`,
|
|
64
|
+
`,te=i(({hasContent:t,...e})=>s.jsx(n.SymbolBadge,{...e}))`
|
|
83
65
|
line,
|
|
84
66
|
path {
|
|
85
67
|
stroke: ${t=>{var e;return t.hasContent?(e=t.theme.colors)==null?void 0:e.primary:"#a6a6a6"}};
|
|
86
68
|
fill: ${t=>{var e;return t.hasContent?(e=t.theme.colors)==null?void 0:e.primary:"#a6a6a6"}};
|
|
87
69
|
}
|
|
88
|
-
`,
|
|
70
|
+
`,se=i.div`
|
|
89
71
|
width: ${t=>t.avatarSize||"32px"};
|
|
90
72
|
height: ${t=>t.avatarSize||"32px"};
|
|
91
73
|
border-radius: 50%;
|
|
@@ -120,7 +102,7 @@
|
|
|
120
102
|
stroke: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
|
|
121
103
|
}
|
|
122
104
|
}
|
|
123
|
-
`,
|
|
105
|
+
`,ne=b.keyframes`
|
|
124
106
|
0% {
|
|
125
107
|
opacity: 0;
|
|
126
108
|
}
|
|
@@ -130,7 +112,7 @@
|
|
|
130
112
|
100% {
|
|
131
113
|
opacity: 0;
|
|
132
114
|
}
|
|
133
|
-
`,
|
|
115
|
+
`,re=i.div`
|
|
134
116
|
display: flex;
|
|
135
117
|
justify-content: center;
|
|
136
118
|
> div {
|
|
@@ -139,7 +121,7 @@
|
|
|
139
121
|
border-radius: 50%;
|
|
140
122
|
margin: 5px;
|
|
141
123
|
background-color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
|
|
142
|
-
animation: ${
|
|
124
|
+
animation: ${ne} 1s infinite;
|
|
143
125
|
}
|
|
144
126
|
> div:nth-of-type(2) {
|
|
145
127
|
animation-delay: 100ms;
|
|
@@ -147,23 +129,23 @@
|
|
|
147
129
|
> div:nth-of-type(3) {
|
|
148
130
|
animation-delay: 200ms;
|
|
149
131
|
}
|
|
150
|
-
`,
|
|
132
|
+
`,H=i.div`
|
|
151
133
|
grid-area: content;
|
|
152
134
|
max-width: 100%;
|
|
153
135
|
overflow: hidden;
|
|
154
|
-
`,
|
|
136
|
+
`,oe=i(n.Typography)`
|
|
155
137
|
font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.normal}};
|
|
156
138
|
font-weight: normal;
|
|
157
139
|
margin: 0;
|
|
158
|
-
`,
|
|
140
|
+
`,A=i.div`
|
|
159
141
|
display: flex;
|
|
160
142
|
${t=>t.left&&"justify-content: start;"};
|
|
161
143
|
${t=>t.center&&"justify-content: center;"};
|
|
162
144
|
${t=>t.right&&"justify-content: end;"};
|
|
163
|
-
`,
|
|
145
|
+
`,O=i.div`
|
|
164
146
|
${t=>{var e;return t.padded&&`padding: ${(e=t.theme.sizes)==null?void 0:e.medium};`}}
|
|
165
|
-
${t=>!t.user&&t.stacked&&
|
|
166
|
-
${t=>t.user&&t.stacked&&
|
|
147
|
+
${t=>!t.user&&t.stacked&&ae(t.stacked,t.theme)}
|
|
148
|
+
${t=>t.user&&t.stacked&&ie(t.stacked,t.theme)}
|
|
167
149
|
|
|
168
150
|
display: inline-block;
|
|
169
151
|
margin-top: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
@@ -176,12 +158,12 @@
|
|
|
176
158
|
}
|
|
177
159
|
max-width: 100%;
|
|
178
160
|
${t=>t.fullWidth&&"width: 100%;"}
|
|
179
|
-
`,
|
|
180
|
-
background-color: ${(
|
|
161
|
+
`,ae=(t,e)=>{var r,a;const o=b.css`
|
|
162
|
+
background-color: ${(r=e.colors)==null?void 0:r.accent};
|
|
181
163
|
color: ${(a=e.colors)==null?void 0:a.text};
|
|
182
164
|
${e.border&&`border: ${e.border};`};
|
|
183
|
-
`;return e.borderRadius?
|
|
184
|
-
${
|
|
165
|
+
`;return e.borderRadius?b.css`
|
|
166
|
+
${o}
|
|
185
167
|
|
|
186
168
|
border-top-right-radius: ${e.borderRadius};
|
|
187
169
|
border-bottom-right-radius: ${e.borderRadius};
|
|
@@ -193,11 +175,11 @@
|
|
|
193
175
|
${t==="last"&&`
|
|
194
176
|
border-bottom-left-radius: ${e.borderRadius};
|
|
195
177
|
`}
|
|
196
|
-
`:
|
|
197
|
-
background-color: ${(
|
|
178
|
+
`:o},ie=(t,e)=>{var r,a;const o=b.css`
|
|
179
|
+
background-color: ${(r=e.colors)==null?void 0:r.primary};
|
|
198
180
|
color: ${(a=e.colors)==null?void 0:a.accent};
|
|
199
|
-
`;return e.borderRadius?
|
|
200
|
-
${
|
|
181
|
+
`;return e.borderRadius?b.css`
|
|
182
|
+
${o}
|
|
201
183
|
|
|
202
184
|
border-top-left-radius: ${e.borderRadius};
|
|
203
185
|
border-bottom-left-radius: ${e.borderRadius};
|
|
@@ -209,17 +191,17 @@
|
|
|
209
191
|
${t==="last"&&`
|
|
210
192
|
border-bottom-right-radius: ${e.borderRadius};
|
|
211
193
|
`}
|
|
212
|
-
`:
|
|
194
|
+
`:o},N=i.div`
|
|
213
195
|
margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
214
196
|
&:last-child {
|
|
215
197
|
margin-bottom: 0;
|
|
216
198
|
}
|
|
217
|
-
`,
|
|
199
|
+
`,S=t=>{var e,o;return b.css`
|
|
218
200
|
margin: ${(e=t.theme.sizes)==null?void 0:e.medium} 0;
|
|
219
|
-
padding: 0 ${(
|
|
220
|
-
`},
|
|
201
|
+
padding: 0 ${(o=t.theme.sizes)==null?void 0:o.medium};
|
|
202
|
+
`},le=i(X.FormComponent)`
|
|
221
203
|
& button.humany-form-component-button {
|
|
222
|
-
${t=>{var e,r,
|
|
204
|
+
${t=>{var e,o,r,a;return((e=t.theme.colors)==null?void 0:e.primary)&&((o=t.theme.colors)==null?void 0:o.accent)&&n.invertedHoverButton({active:!1,primaryColor:(r=t.theme.colors)==null?void 0:r.primary,secondaryColor:(a=t.theme.colors)==null?void 0:a.accent,theme:t.theme})}};
|
|
223
205
|
display: block;
|
|
224
206
|
width: 100%;
|
|
225
207
|
margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
@@ -231,7 +213,7 @@
|
|
|
231
213
|
margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
232
214
|
}
|
|
233
215
|
}
|
|
234
|
-
`,
|
|
216
|
+
`,ce=i(n.Html)`
|
|
235
217
|
white-space: pre-wrap;
|
|
236
218
|
a {
|
|
237
219
|
color: ${t=>t.theme.colors.link};
|
|
@@ -239,14 +221,14 @@
|
|
|
239
221
|
${t=>{var e;return((e=t.theme.accessibility)==null?void 0:e.isTabbing)&&n.borderTabStyle}};
|
|
240
222
|
}
|
|
241
223
|
}
|
|
242
|
-
`,
|
|
224
|
+
`,de=i(n.List)`
|
|
243
225
|
padding: 0;
|
|
244
226
|
list-style: none;
|
|
245
227
|
margin: 0 -${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
246
228
|
> li {
|
|
247
229
|
margin: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
248
230
|
}
|
|
249
|
-
`,
|
|
231
|
+
`,me=i.button`
|
|
250
232
|
${t=>n.buttonCss(t)};
|
|
251
233
|
display: block;
|
|
252
234
|
background-color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
|
|
@@ -256,7 +238,7 @@
|
|
|
256
238
|
${n.borderTabStyle}
|
|
257
239
|
background-color: transparent;
|
|
258
240
|
}
|
|
259
|
-
`,
|
|
241
|
+
`,E=y.forwardRef(({boxed:t,className:e,agentData:o},r)=>s.jsx(H,{ref:r,children:s.jsx(A,{left:t,center:!t,children:s.jsx(O,{padded:!!t,stacked:t?"first":void 0,children:s.jsxs(re,{children:[s.jsx("div",{}),s.jsx("div",{}),s.jsx("div",{})]})})})})),P=y.createContext(null),ue=i.p`
|
|
260
242
|
&& {
|
|
261
243
|
font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.small}};
|
|
262
244
|
font-weight: 300;
|
|
@@ -265,28 +247,28 @@
|
|
|
265
247
|
line-height: 1.5em;
|
|
266
248
|
grid-area: info;
|
|
267
249
|
color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
|
|
268
|
-
`,
|
|
250
|
+
`,D=(t,e)=>new Date(t).toLocaleTimeString(e||[],{hour:"numeric",minute:"2-digit"}),k=({className:t,name:e,timestamp:o,ariaHidden:r=!1})=>{const a=y.useContext(P);if(!e&&!o)return null;let l="";return e?o?l=`${e}: ${D(o,a)}`:l=e:o&&(l=D(o,a)),s.jsx(ue,{"aria-hidden":r,children:l})},F=({className:t,children:e,sender:o,timestamp:r})=>{const{avatar:a,name:l}=o,{avatarSize:d}=n.useProperties();return s.jsxs(he,{hasAvatar:!!a,className:C.appendClassNames(t,"humany-conversation-agent-message"),children:[a&&s.jsx(se,{avatarSize:d,children:typeof a=="string"?s.jsx("img",{src:a}):s.jsx(n.SymbolBadge,{symbol:a})}),e,s.jsx(k,{name:l,timestamp:r,ariaHidden:!0})]})},he=i.div`
|
|
269
251
|
display: grid;
|
|
270
252
|
margin-right: 10%;
|
|
271
253
|
width: 90%;
|
|
272
|
-
${t=>t.hasAvatar?
|
|
254
|
+
${t=>t.hasAvatar?b.css`
|
|
273
255
|
grid-template-columns: auto 1fr;
|
|
274
256
|
grid-template-rows: 1fr auto;
|
|
275
257
|
grid-template-areas:
|
|
276
258
|
'avatar content'
|
|
277
259
|
'. info';
|
|
278
|
-
`:
|
|
260
|
+
`:b.css`
|
|
279
261
|
grid-template-columns: 1fr;
|
|
280
262
|
grid-template-rows: 1fr auto;
|
|
281
263
|
grid-template-areas:
|
|
282
264
|
'content'
|
|
283
265
|
'info';
|
|
284
266
|
`};
|
|
285
|
-
`,
|
|
267
|
+
`,ge=y.forwardRef(({className:t,children:e,timestamp:o,discrete:r,fullWidth:a},l)=>s.jsx(ye,{ref:l,className:C.appendClassNames(t,"humany-conversation-system-message"),fullWidth:a,children:r?s.jsxs(fe,{className:"humany-conversation-discrete-message",children:[e,s.jsx(k,{timestamp:o})]}):s.jsxs(s.Fragment,{children:[e,s.jsx(k,{timestamp:o})]})})),ye=i.div`
|
|
286
268
|
${t=>t.fullWidth&&"width: 100%"};
|
|
287
269
|
padding: 0 ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.large}};
|
|
288
270
|
overflow: auto;
|
|
289
|
-
`,
|
|
271
|
+
`,fe=i.div`
|
|
290
272
|
text-align: center;
|
|
291
273
|
word-wrap: break-word;
|
|
292
274
|
font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.normal}};
|
|
@@ -294,13 +276,13 @@
|
|
|
294
276
|
> p {
|
|
295
277
|
margin: 0;
|
|
296
278
|
}
|
|
297
|
-
|
|
279
|
+
`,be=({className:t,children:e,timestamp:o})=>{const{userLabel:r=""}=n.useProperties();return s.jsxs(pe,{className:C.appendClassNames(t,"humany-conversation-user-message"),children:[e,s.jsx(k,{name:r,timestamp:o,ariaHidden:!0})]})},pe=i.div`
|
|
298
280
|
margin-left: 10%;
|
|
299
281
|
width: 90%;
|
|
300
282
|
display: flex;
|
|
301
283
|
flex-direction: column;
|
|
302
284
|
align-items: flex-end;
|
|
303
|
-
`,
|
|
285
|
+
`,R=t=>Array.isArray(t)?t:Object.keys(t).map(e=>({label:t[e],actionKey:e})),xe=({header:t,actions:e,dispatch:o})=>s.jsx(ve,{className:"humany-conversation-button-list",header:t,items:R(e),renderItem:r=>{var l;const a=!!((l=r==null?void 0:r.data)!=null&&l.href);return s.jsx("li",{children:a?s.jsxs($e,{onClick:()=>{o("action",r)},href:r.data.href,target:r.data.target,"aria-label":r.label,title:r.label,children:[s.jsx(n.SymbolBadge,{symbol:r.symbol}),r.label]}):s.jsxs(je,{onClick:()=>{o("action",r)},"aria-label":r.label,title:r.label,children:[s.jsx(n.SymbolBadge,{symbol:r.symbol}),r.label]})},r.actionKey)}}),ve=i(n.ItemList)`
|
|
304
286
|
${n.itemList}
|
|
305
287
|
> ul {
|
|
306
288
|
display: flex;
|
|
@@ -310,8 +292,8 @@
|
|
|
310
292
|
margin: 0;
|
|
311
293
|
}
|
|
312
294
|
}
|
|
313
|
-
${
|
|
314
|
-
|
|
295
|
+
${S}
|
|
296
|
+
`,$e=i(n.Link)`
|
|
315
297
|
${n.buttonCss};
|
|
316
298
|
|
|
317
299
|
display: block;
|
|
@@ -330,7 +312,7 @@
|
|
|
330
312
|
svg {
|
|
331
313
|
margin-right: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
|
|
332
314
|
}
|
|
333
|
-
`,
|
|
315
|
+
`,je=i(n.Button)`
|
|
334
316
|
${n.buttonCss};
|
|
335
317
|
|
|
336
318
|
display: block;
|
|
@@ -349,22 +331,22 @@
|
|
|
349
331
|
svg {
|
|
350
332
|
margin-right: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
|
|
351
333
|
}
|
|
352
|
-
`,
|
|
334
|
+
`,Se=({type:t,content:e={}})=>{const o=n.useComponent(t);return!o||!t?null:s.jsx(y.Suspense,{fallback:null,children:s.jsx(o,{...e})})},we=({body:t})=>s.jsx(ke,{html:t}),ke=i(n.Html)`
|
|
353
335
|
${n.genericHtml}
|
|
354
336
|
color: inherit;
|
|
355
337
|
white-space: pre-wrap;
|
|
356
|
-
${
|
|
338
|
+
${S}
|
|
357
339
|
a {
|
|
358
340
|
color: ${t=>t.theme.colors.link};
|
|
359
341
|
&:focus-visible {
|
|
360
342
|
${n.borderTabStyle};
|
|
361
343
|
}
|
|
362
344
|
}
|
|
363
|
-
`,
|
|
345
|
+
`,Ce=({header:t,actions:e,dispatch:o})=>s.jsx(Le,{className:"humany-conversation-item-list",header:t,items:R(e),renderItem:r=>{var a;return s.jsx("li",{children:s.jsxs(ze,{children:[((a=r.symbol)==null?void 0:a.content)&&s.jsx("div",{className:"item-icon",children:s.jsx(n.SymbolBadge,{size:22,symbol:{type:r.symbol.type,content:r.symbol.content}})}),s.jsxs("div",{className:"item-body",children:[s.jsx(n.Button,{onClick:()=>{o("action",r)},"aria-label":r.label,title:r.label,children:r.label}),r.description&&s.jsx("p",{children:r.description})]})]})},r.actionKey)}}),Le=i(n.ItemList)`
|
|
364
346
|
${n.itemList}
|
|
365
347
|
|
|
366
348
|
> .humany-paragraph {
|
|
367
|
-
${
|
|
349
|
+
${S}
|
|
368
350
|
margin-bottom: 0;
|
|
369
351
|
|
|
370
352
|
h1 {
|
|
@@ -372,7 +354,7 @@
|
|
|
372
354
|
}
|
|
373
355
|
}
|
|
374
356
|
|
|
375
|
-
${t=>n.headingElement(t)("h1",
|
|
357
|
+
${t=>n.headingElement(t)("h1",b.css`
|
|
376
358
|
white-space: normal;
|
|
377
359
|
`)}
|
|
378
360
|
|
|
@@ -392,10 +374,10 @@
|
|
|
392
374
|
border-bottom: none;
|
|
393
375
|
}
|
|
394
376
|
}
|
|
395
|
-
`,
|
|
377
|
+
`,ze=i.div`
|
|
396
378
|
display: flex;
|
|
397
379
|
gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
|
|
398
|
-
${
|
|
380
|
+
${S}
|
|
399
381
|
|
|
400
382
|
.item-icon {
|
|
401
383
|
}
|
|
@@ -429,11 +411,11 @@
|
|
|
429
411
|
}
|
|
430
412
|
}
|
|
431
413
|
}
|
|
432
|
-
`,
|
|
414
|
+
`,Te=({header:t,actions:e,dispatch:o})=>{const r=n.usePrevious(e),a=y.useRef(),l=n.useIsTabbing();return y.useEffect(()=>{if(r&&Array.isArray(e)&&Array.isArray(r)&&r.length<e.length&&a.current){const d=a.current.querySelectorAll(".humany-conversation-link-list > ul > li"),m=d[r.length];if(d.length===e.length&&r.length){const u=d[r.length-1];if(u){const f=u.querySelector(".humany-button");f&&f.focus()}}else m&&new MutationObserver((f,j)=>{f.forEach(c=>{if(c.addedNodes){const h=Array.from(c.addedNodes).find(x=>x.tagName==="BUTTON");h&&C.htmlParentContains(a.current,document.activeElement)&&(l&&h.focus(),j.disconnect())}})}).observe(m,{attributes:!1,characterData:!1,childList:!0,subtree:!0,attributeOldValue:!1,characterDataOldValue:!1})}}),s.jsx(Ne,{ref:a,className:"humany-conversation-link-list",header:t,items:R(e),renderItem:d=>s.jsx("li",{children:s.jsxs(Me,{help:d.actionKey==="help",onClick:()=>{o("action",d)},"aria-label":d.label,title:d.label,children:[d.label,d.actionKey==="help"&&s.jsx(n.SymbolBadge,{size:14,symbol:{type:"Svg",content:"caret-down"}})]})},d.actionKey)})},Ne=i(n.ItemList)`
|
|
433
415
|
${n.itemList}
|
|
434
|
-
${
|
|
416
|
+
${S}
|
|
435
417
|
|
|
436
|
-
${t=>n.headingElement(t)("h1",
|
|
418
|
+
${t=>n.headingElement(t)("h1",b.css`
|
|
437
419
|
white-space: normal;
|
|
438
420
|
`)}
|
|
439
421
|
|
|
@@ -445,7 +427,7 @@
|
|
|
445
427
|
margin: 0;
|
|
446
428
|
}
|
|
447
429
|
}
|
|
448
|
-
`,
|
|
430
|
+
`,Me=i(n.Button)`
|
|
449
431
|
display: block;
|
|
450
432
|
text-align: left;
|
|
451
433
|
font-weight: 300;
|
|
@@ -454,13 +436,13 @@
|
|
|
454
436
|
text-overflow: ellipsis;
|
|
455
437
|
overflow: hidden;
|
|
456
438
|
|
|
457
|
-
${t=>{var e,
|
|
439
|
+
${t=>{var e,o;return t.help&&b.css`
|
|
458
440
|
color: ${(e=t.theme.colors)==null?void 0:e.text};
|
|
459
441
|
text-decoration: underline;
|
|
460
442
|
|
|
461
443
|
i,
|
|
462
444
|
svg {
|
|
463
|
-
margin-left: ${(
|
|
445
|
+
margin-left: ${(o=t.theme.sizes)==null?void 0:o.small};
|
|
464
446
|
}
|
|
465
447
|
`}}
|
|
466
448
|
|
|
@@ -471,12 +453,12 @@
|
|
|
471
453
|
text-decoration: underline;
|
|
472
454
|
}
|
|
473
455
|
}
|
|
474
|
-
`,
|
|
456
|
+
`,Ie=()=>s.jsx(Be,{className:"humany-conversation-separator"}),Be=i.div`
|
|
475
457
|
${t=>t.theme.border&&`border-bottom: ${t.theme.border};`}
|
|
476
458
|
width: 100%;
|
|
477
|
-
`,
|
|
478
|
-
${
|
|
479
|
-
`,
|
|
459
|
+
`,He=({text:t})=>s.jsx(Ae,{className:"humany-conversation-text",variant:"span",children:t}),Ae=i(n.Typography)`
|
|
460
|
+
${S}
|
|
461
|
+
`,Oe=({header:t="Video call",acceptLabel:e="Accept",declineLabel:o="Decline",dispatch:r})=>{const a=y.useMemo(()=>[{label:e,actionKey:"accept-video-call",symbol:{type:"Svg",content:"video"}},{label:o,actionKey:"decline-video-call",symbol:{type:"Svg",content:"close"}}],[e,o]);return s.jsx(Re,{className:"humany-conversation-video-request",header:t,items:a,renderItem:l=>{const d=l.actionKey==="accept-video-call"?"#70c48e":"#da5c85";return s.jsx("li",{children:s.jsx(Ee,{onClick:()=>{r("action",l)},"aria-label":l.label,title:l.label,bgColor:d,children:s.jsx(n.SymbolBadge,{symbol:l.symbol,size:25})})},l.actionKey)}})},Re=i(n.ItemList)`
|
|
480
462
|
${t=>n.itemList(t)}
|
|
481
463
|
> ul {
|
|
482
464
|
display: flex;
|
|
@@ -486,8 +468,8 @@
|
|
|
486
468
|
margin: 0;
|
|
487
469
|
}
|
|
488
470
|
}
|
|
489
|
-
${t=>
|
|
490
|
-
`,
|
|
471
|
+
${t=>S(t)}
|
|
472
|
+
`,Ee=i(n.Button)`
|
|
491
473
|
${n.buttonCss};
|
|
492
474
|
|
|
493
475
|
background-color: ${t=>t.bgColor};
|
|
@@ -521,20 +503,36 @@
|
|
|
521
503
|
stroke: #fff;
|
|
522
504
|
}
|
|
523
505
|
}
|
|
524
|
-
`,
|
|
506
|
+
`,De=([t,e])=>({type:t,content:e}),Ke=({items:t,dispatch:e})=>s.jsx(qe,{role:"none",className:"humany-message-list",items:t.map(De),renderLi:!0,renderItem:o=>{switch(o.type){case v.ConversationMessageListItemType.Text:return s.jsx(He,{text:o.content});case v.ConversationMessageListItemType.HTML:return s.jsx(we,{...o.content});case v.ConversationMessageListItemType.Separator:return s.jsx(Ie,{...o.content});case v.ConversationMessageListItemType.ItemList:return s.jsx(Ce,{...o.content,dispatch:e});case v.ConversationMessageListItemType.LinkList:return s.jsx(Te,{...o.content,dispatch:e});case v.ConversationMessageListItemType.ButtonList:return s.jsx(xe,{...o.content,dispatch:e});case v.ConversationMessageListItemType.VideoRequest:return s.jsx(Oe,{...o.content,dispatch:e});default:return s.jsx(Se,{type:o.type,content:o.content})}}}),qe=i(n.List)`
|
|
525
507
|
${n.list}
|
|
526
508
|
|
|
527
509
|
> li {
|
|
528
510
|
margin: 0;
|
|
529
511
|
}
|
|
530
|
-
`,
|
|
531
|
-
position: absolute;
|
|
532
|
-
left: -10000px;
|
|
533
|
-
top: auto;
|
|
534
|
-
width: 1px;
|
|
512
|
+
`,Pe=y.forwardRef(({className:t,timestamp:e,sender:o,type:r,content:a},l)=>{const d=y.useCallback(c=>{let h="first";return a.length>1&&(h=c===0?"first":c+1===a.length?"last":"middle"),h},[a]),{userLabel:m=""}=n.useProperties(),u=()=>s.jsx(s.Fragment,{children:a.map(c=>{const{key:h,body:x,title:$,form:z,actions:p}=c,w=!!x&&!$&&!z&&!p;return s.jsx(ge,{className:t,discrete:w,ref:l,timestamp:e,fullWidth:!!z||!!p,children:w&&x?s.jsx(n.Html,{html:x}):s.jsx(I,{isSystem:!0,content:c})},h)})}),f=()=>s.jsxs(s.Fragment,{children:[s.jsx(K,{className:"humany-sr-only",children:s.jsx(k,{name:o==null?void 0:o.name,timestamp:e})}),s.jsx(F,{sender:o,timestamp:e,className:t,children:s.jsx(H,{className:"humany-message-content-bundle",children:a.map((c,h)=>s.jsx(A,{className:"humany-message-container",left:!0,ref:l,children:s.jsx(I,{content:c,stacked:d(h)})},c.key))})})]}),j=()=>s.jsxs(s.Fragment,{children:[s.jsx(K,{className:"humany-sr-only",children:s.jsx(k,{name:m,timestamp:e})}),s.jsx(be,{timestamp:e,className:t,children:s.jsx(H,{className:"humany-message-content-bundle",children:a.map((c,h)=>s.jsx(A,{className:"humany-message-container",right:!0,ref:l,children:s.jsx(I,{isUser:!0,content:c,stacked:d(h)})},c.key))})})]});switch(r){case v.ConversationMessageType.System:return u();case v.ConversationMessageType.Agent:return f();case v.ConversationMessageType.User:return j();default:return null}}),I=({content:t,isUser:e,isSystem:o,stacked:r})=>{const a=n.useDispatch(),{title:l,body:d,actions:m,form:u,items:f}=t;return f?s.jsx(O,{className:"humany-message-content",user:!!e,stacked:r,children:s.jsx(Ke,{items:f,dispatch:a})}):s.jsxs(O,{className:"humany-message-content",padded:!o,user:!!e,stacked:r,fullWidth:!!u||!!m,children:[l&&s.jsx(N,{children:s.jsx(oe,{variant:"h2",children:l})}),d&&s.jsx(N,{children:s.jsx(ce,{html:d})}),u&&s.jsx(N,{children:s.jsx(le,{...u,onChange:(c,h)=>{a("form",{data:h,formKey:u.schema.id,actionKey:c})}})}),m&&s.jsx(N,{children:s.jsx(de,{items:Object.keys(m).map(c=>({label:m[c],actionKey:c})),renderItem:c=>s.jsx("li",{children:s.jsx(me,{onClick:()=>{a("action",c.actionKey)},children:c.label})},c.actionKey)})})]})},K=i.div`
|
|
513
|
+
position: absolute !important;
|
|
535
514
|
height: 1px;
|
|
515
|
+
width: 1px;
|
|
536
516
|
overflow: hidden;
|
|
537
|
-
|
|
517
|
+
clip: rect(1px 1px 1px 1px);
|
|
518
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
519
|
+
left: -10000000px;
|
|
520
|
+
top: auto;
|
|
521
|
+
`,Fe=()=>{const{skipToLatestMessageLabel:t="Skip to latest message"}=n.useProperties(),e=n.useContainer(),o=()=>{const r=e.get("widgetDOMElement");if(r){const a=r.querySelectorAll(".humany-conversation-entry");a.length&&a[a.length-1].focus()}};return s.jsx(We,{className:"humany-skip-to-latest-message",onKeyDown:r=>{(r.key==="Enter"||r.keyCode===13)&&o()},onClick:o,children:t})},We=i.button`
|
|
522
|
+
position: absolute;
|
|
523
|
+
bottom: 60px;
|
|
524
|
+
text-align: center;
|
|
525
|
+
background-color: white;
|
|
526
|
+
text-decoration: none;
|
|
527
|
+
padding: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
|
|
528
|
+
border-radius: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
|
|
529
|
+
left: -10000000px;
|
|
530
|
+
&:focus-visible {
|
|
531
|
+
left: 50%;
|
|
532
|
+
transform: translateX(-50%);
|
|
533
|
+
${n.borderTabStyle};
|
|
534
|
+
}
|
|
535
|
+
`,W=()=>{const t=y.useCallback(m=>{m&&setTimeout(()=>{m.scrollIntoView({block:"start",behavior:"smooth"})},250)},[]),[e,o]=n.useScroll(!0),{messages:r,loading:a,typingActors:l=[]}=n.useProperties(),d=()=>l&&l.length?l.map((m,u)=>s.jsx(B,{id:`typing_${m.name}`,children:s.jsx(F,{timestamp:Date.now(),sender:m,children:s.jsx(E,{boxed:!0,ref:t})})},`typing_${m.name}`)):null;return s.jsxs(s.Fragment,{children:[s.jsxs(Ue,{tabIndex:0,scrollableCss:e,ref:o,children:[r&&r.length?r.map((m,u)=>{const{type:f,timestamp:j,sender:c,content:h}=m;return s.jsx(B,{className:"humany-conversation-entry",tabIndex:-1,children:s.jsx(Pe,{...m,ref:t})},`${f}_${c==null?void 0:c.name}_${j}_${h[0].key}`)}):null,d(),a&&s.jsx(B,{children:s.jsx(E,{ref:t})})]}),s.jsx(G,{}),s.jsx(Fe,{})]})},Ue=i.div`
|
|
538
536
|
display: flex;
|
|
539
537
|
flex-direction: column;
|
|
540
538
|
align-items: stretch;
|
|
@@ -544,7 +542,7 @@
|
|
|
544
542
|
&:focus-visible {
|
|
545
543
|
${t=>n.borderTabStyle(t)};
|
|
546
544
|
}
|
|
547
|
-
`,
|
|
545
|
+
`,B=i.div`
|
|
548
546
|
margin: 0;
|
|
549
547
|
margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
|
|
550
548
|
|
|
@@ -567,10 +565,15 @@
|
|
|
567
565
|
h1 {
|
|
568
566
|
font-weight: normal;
|
|
569
567
|
}
|
|
570
|
-
|
|
568
|
+
|
|
569
|
+
&:focus-visible {
|
|
570
|
+
${n.borderTabStyle}
|
|
571
|
+
border-radius: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
|
|
572
|
+
}
|
|
573
|
+
${t=>n.headingElement(t)("h1",b.css`
|
|
571
574
|
font-weight: normal;
|
|
572
575
|
`)}
|
|
573
|
-
`,
|
|
576
|
+
`,Ve=({dispatch:t})=>{const e=y.useRef(null);return y.useEffect(()=>{e.current&&e.current.parentNode&&t("overlay-mounted",e.current)},[e]),s.jsx(n.WidgetOverlayOutlet,{portalId:"humany-conversation-overlay-portal",className:"humany-conversation-overlay-outlet",ref:e})},_e=({dispatch:t,header:e,buttonLabel:o})=>s.jsxs(Ye,{portalId:"humany-conversation-portal",className:"humany-conversation-outlet",children:[s.jsxs(Xe,{className:"humany-conversation-outlet-head",children:[s.jsx(Je,{className:"humany-conversation-outlet-head-button","aria-label":o,title:o,onClick:()=>t("hide-overlay-conversation"),children:s.jsx(n.SymbolBadge,{symbol:{type:"Svg",content:"caret-down"},size:20})}),e&&s.jsx(Ge,{className:"humany-conversation-outlet-header",variant:"h1",children:e})]}),s.jsx(W,{})]}),Ye=i(n.WidgetOverlayOutlet)`
|
|
574
577
|
z-index: 11;
|
|
575
578
|
top: auto;
|
|
576
579
|
height: 65%;
|
|
@@ -579,7 +582,7 @@
|
|
|
579
582
|
flex-direction: column;
|
|
580
583
|
border-top-right-radius: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.large}};
|
|
581
584
|
border-top-left-radius: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.large}};
|
|
582
|
-
`,
|
|
585
|
+
`,Xe=i.div`
|
|
583
586
|
display: flex;
|
|
584
587
|
flex-direction: column;
|
|
585
588
|
justify-content: center;
|
|
@@ -587,11 +590,11 @@
|
|
|
587
590
|
gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
588
591
|
padding: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
589
592
|
${t=>t.theme.border&&`border-bottom: ${t.theme.border};`}
|
|
590
|
-
`,
|
|
593
|
+
`,Ge=i(n.Typography)`
|
|
591
594
|
font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.medium}};
|
|
592
595
|
color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
|
|
593
596
|
margin: 0;
|
|
594
|
-
`,
|
|
597
|
+
`,Je=i(n.Button)`
|
|
595
598
|
display: flex;
|
|
596
599
|
align-items: center;
|
|
597
600
|
justify-content: center;
|
|
@@ -605,7 +608,7 @@
|
|
|
605
608
|
svg line {
|
|
606
609
|
stroke: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
|
|
607
610
|
}
|
|
608
|
-
`,
|
|
611
|
+
`,Qe=({className:t,...e})=>{const{overlay:o,overlayConversationHeader:r,overlayConversationCloseLabel:a,conversationControllerId:l}=n.useProperties(),d=n.useDispatch(),u=n.useContainer().get("$settings");return s.jsx(n.ConversationContext.Provider,{value:l?{id:l}:null,children:s.jsxs(P.Provider,{value:u==null?void 0:u.language,children:[s.jsx(Ze,{"aria-live":"assertive",...e,className:C.appendClassNames(t,"humany-conversation-component"),children:s.jsx(W,{})}),o&&s.jsxs(s.Fragment,{children:[s.jsx(Ve,{dispatch:d}),o.conversation&&s.jsx(_e,{dispatch:d,header:r,buttonLabel:a})]})]})})},Ze=i.div`
|
|
609
612
|
position: absolute;
|
|
610
613
|
right: 0;
|
|
611
614
|
left: 0;
|
|
@@ -614,4 +617,4 @@
|
|
|
614
617
|
overflow: hidden;
|
|
615
618
|
display: flex;
|
|
616
619
|
flex-direction: column;
|
|
617
|
-
`;exports.default=
|
|
620
|
+
`;exports.default=Qe;
|