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