@telia-ace/widget-conversation 1.1.1-rc.3 → 1.1.1
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,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("@emotion/styled"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("@emotion/styled"),r=require("@telia-ace/widget-ui"),L=require("@telia-ace/widget-utilities"),y=require("@emotion/react"),g=require("react"),G=require("@telia-ace/widget-forms"),x=require("./index.js");require("@telia-ace/widget-core");require("@telia-ace/widget-services");require("@telia-ace/widget-plugins");const J=({className:e})=>{const[t,o]=g.useState(""),[n,i]=g.useState(!1),[l,h]=g.useState(0),[d,p]=g.useState(0),v=r.useIsTabbing(),m=r.useDispatch(),{inputPlaceholder:c="Type your message",inputHidden:$=!1,inputDisabled:w=!1,sendButtonLabel:C="Send message",inputMultiline:j=!0,secondaryAction:b}=r.useProperties(),[W,f]=r.useScroll(!0);g.useEffect(()=>{if(f.current){const{lineHeight:u,maxHeight:z}=getComputedStyle(f.current);if(u&&u.indexOf("px")>-1){const k=u.split("px"),V=parseInt(k[0],10);h(V);const Y=z.split("px");p(parseInt(Y[0],10))}}},[f.current]);const M=u=>{!u.shiftKey||!j?(u.preventDefault(),t&&t.length>0&&(m("user-submit",{text:t}),o(""),N(""))):t.length<1&&u.preventDefault()},U=u=>{b&&(u.preventDefault(),m("action",{actionKey:b.action,...b}))},_=u=>{if(j&&f.current){const z=f.current.scrollHeight;if(z>l){f.current.style.height="auto";let k=z;u.length<1&&(k=l),f.current.style.height=`${k}px`,k>=d?f.current.style.overflowY="scroll":f.current.style.overflowY="hidden"}}},N=u=>{_(u),o(u),u&&u.length>0&&m("user-typing",{textLength:u.length})};return $?null:s.jsxs(ee,{grow:j,className:L.appendClassNames("humany-conversation-input",e),"data-has-focus":n,scrollableCss:W,isTabbing:v,children:[b&&s.jsx(Z,{disabled:w,onClick:U,title:b.label,"aria-label":b.label,children:s.jsx(r.SymbolBadge,{size:24,symbol:{type:"Svg",content:b.icon||"browse"}})}),j?s.jsx(Q,{value:t,onChange:N,onEnter:M,disabled:w,"aria-label":c,placeholder:c,onFocusChange:i,type:"textarea",rows:1,ref:f}):s.jsx(X,{value:t,onChange:N,onEnter:M,disabled:w,"aria-label":c,placeholder:c,onFocusChange:i}),s.jsx(F,{disabled:w,onClick:M,title:C,"aria-label":C,children:s.jsx(te,{size:22,symbol:{type:"Svg",content:"send"},hasContent:!!t&&!!t.length})})]})},Q=a(r.Input)`
|
|
2
2
|
resize: none;
|
|
3
3
|
flex: 1;
|
|
4
4
|
flex-shrink: 1;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
border: none;
|
|
13
13
|
transition: height 200ms linear;
|
|
14
14
|
outline: none;
|
|
15
|
-
`,X=a(
|
|
15
|
+
`,X=a(r.Input)`
|
|
16
16
|
flex: 1;
|
|
17
17
|
border: none;
|
|
18
18
|
background-color: transparent;
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.textLight}};
|
|
27
27
|
font-style: italic;
|
|
28
28
|
}
|
|
29
|
-
`,F=a(
|
|
29
|
+
`,F=a(r.Button)`
|
|
30
30
|
flex: 0 0 50px;
|
|
31
31
|
align-self: stretch;
|
|
32
32
|
background-color: transparent;
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
border: none;
|
|
37
37
|
color: #a6a6a6;
|
|
38
38
|
&:focus-visible {
|
|
39
|
-
${
|
|
39
|
+
${r.borderTabStyle};
|
|
40
40
|
}
|
|
41
41
|
`,Z=a(F)`
|
|
42
42
|
border-right: ${e=>e.theme.border};
|
|
@@ -53,11 +53,11 @@
|
|
|
53
53
|
align-items: center;
|
|
54
54
|
background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.accent}};
|
|
55
55
|
border-top: ${e=>e.theme.inputBorder};
|
|
56
|
-
${e=>e["data-has-focus"]&&e.isTabbing&&
|
|
56
|
+
${e=>e["data-has-focus"]&&e.isTabbing&&r.borderTabStyle}
|
|
57
57
|
textarea {
|
|
58
58
|
${e=>!!e.scrollableCss&&e.scrollableCss}
|
|
59
59
|
}
|
|
60
|
-
`,te=a(({hasContent:e,...t})=>s.jsx(
|
|
60
|
+
`,te=a(({hasContent:e,...t})=>s.jsx(r.SymbolBadge,{...t}))`
|
|
61
61
|
line,
|
|
62
62
|
path {
|
|
63
63
|
stroke: ${e=>{var t;return e.hasContent?(t=e.theme.colors)==null?void 0:t.primary:"#a6a6a6"}};
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
grid-area: content;
|
|
130
130
|
max-width: 100%;
|
|
131
131
|
overflow: hidden;
|
|
132
|
-
`,oe=a(
|
|
132
|
+
`,oe=a(r.Typography)`
|
|
133
133
|
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
|
|
134
134
|
font-weight: normal;
|
|
135
135
|
margin: 0;
|
|
@@ -154,12 +154,12 @@
|
|
|
154
154
|
}
|
|
155
155
|
max-width: 100%;
|
|
156
156
|
${e=>e.fullWidth&&"width: 100%;"}
|
|
157
|
-
`,ae=(e,t)=>{var
|
|
158
|
-
background-color: ${(
|
|
157
|
+
`,ae=(e,t)=>{var n,i;const o=y.css`
|
|
158
|
+
background-color: ${(n=t.colors)==null?void 0:n.accent};
|
|
159
159
|
color: ${(i=t.colors)==null?void 0:i.text};
|
|
160
160
|
${t.border&&`border: ${t.border};`};
|
|
161
161
|
`;return t.borderRadius?y.css`
|
|
162
|
-
${
|
|
162
|
+
${o}
|
|
163
163
|
|
|
164
164
|
border-top-right-radius: ${t.borderRadius};
|
|
165
165
|
border-bottom-right-radius: ${t.borderRadius};
|
|
@@ -171,11 +171,11 @@
|
|
|
171
171
|
${e==="last"&&`
|
|
172
172
|
border-bottom-left-radius: ${t.borderRadius};
|
|
173
173
|
`}
|
|
174
|
-
`:
|
|
175
|
-
background-color: ${(
|
|
174
|
+
`:o},ie=(e,t)=>{var n,i;const o=y.css`
|
|
175
|
+
background-color: ${(n=t.colors)==null?void 0:n.primary};
|
|
176
176
|
color: ${(i=t.colors)==null?void 0:i.accent};
|
|
177
177
|
`;return t.borderRadius?y.css`
|
|
178
|
-
${
|
|
178
|
+
${o}
|
|
179
179
|
|
|
180
180
|
border-top-left-radius: ${t.borderRadius};
|
|
181
181
|
border-bottom-left-radius: ${t.borderRadius};
|
|
@@ -187,17 +187,17 @@
|
|
|
187
187
|
${e==="last"&&`
|
|
188
188
|
border-bottom-right-radius: ${t.borderRadius};
|
|
189
189
|
`}
|
|
190
|
-
`:
|
|
190
|
+
`:o},T=a.div`
|
|
191
191
|
margin-bottom: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
192
192
|
&:last-child {
|
|
193
193
|
margin-bottom: 0;
|
|
194
194
|
}
|
|
195
|
-
`,S=e=>{var t,
|
|
195
|
+
`,S=e=>{var t,o;return y.css`
|
|
196
196
|
margin: ${(t=e.theme.sizes)==null?void 0:t.medium} 0;
|
|
197
|
-
padding: 0 ${(
|
|
197
|
+
padding: 0 ${(o=e.theme.sizes)==null?void 0:o.medium};
|
|
198
198
|
`},le=a(G.FormComponent)`
|
|
199
199
|
& button.humany-form-component-button {
|
|
200
|
-
${e=>{var t,
|
|
200
|
+
${e=>{var t,o,n,i;return((t=e.theme.colors)==null?void 0:t.primary)&&((o=e.theme.colors)==null?void 0:o.accent)&&r.invertedHoverButton({active:!1,primaryColor:(n=e.theme.colors)==null?void 0:n.primary,secondaryColor:(i=e.theme.colors)==null?void 0:i.accent,theme:e.theme})}};
|
|
201
201
|
display: block;
|
|
202
202
|
width: 100%;
|
|
203
203
|
margin-bottom: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
@@ -209,15 +209,15 @@
|
|
|
209
209
|
margin-bottom: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
210
210
|
}
|
|
211
211
|
}
|
|
212
|
-
`,ce=a(
|
|
212
|
+
`,ce=a(r.Html)`
|
|
213
213
|
white-space: pre-wrap;
|
|
214
214
|
a {
|
|
215
215
|
color: ${e=>e.theme.colors.link};
|
|
216
216
|
&:focus {
|
|
217
|
-
${e=>{var t;return((t=e.theme.accessibility)==null?void 0:t.isTabbing)&&
|
|
217
|
+
${e=>{var t;return((t=e.theme.accessibility)==null?void 0:t.isTabbing)&&r.borderTabStyle}};
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
|
-
`,de=a(
|
|
220
|
+
`,de=a(r.List)`
|
|
221
221
|
padding: 0;
|
|
222
222
|
list-style: none;
|
|
223
223
|
margin: 0 -${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
@@ -225,16 +225,16 @@
|
|
|
225
225
|
margin: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
226
226
|
}
|
|
227
227
|
`,me=a.button`
|
|
228
|
-
${e=>
|
|
228
|
+
${e=>r.buttonCss(e)};
|
|
229
229
|
display: block;
|
|
230
230
|
background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
|
|
231
231
|
width: 100%;
|
|
232
232
|
color: #fff;
|
|
233
233
|
&:focus-visible {
|
|
234
|
-
${
|
|
234
|
+
${r.borderTabStyle}
|
|
235
235
|
background-color: transparent;
|
|
236
236
|
}
|
|
237
|
-
`,q=g.forwardRef(({boxed:e,className:t,agentData:
|
|
237
|
+
`,q=g.forwardRef(({boxed:e,className:t,agentData:o},n)=>s.jsx(R,{ref:n,children:s.jsx(A,{left:e,center:!e,children:s.jsx(O,{padded:!!e,stacked:e?"first":void 0,children:s.jsxs(re,{children:[s.jsx("div",{}),s.jsx("div",{}),s.jsx("div",{})]})})})})),ue=a.p`
|
|
238
238
|
&& {
|
|
239
239
|
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.small}};
|
|
240
240
|
font-weight: 300;
|
|
@@ -243,7 +243,7 @@
|
|
|
243
243
|
line-height: 1.5em;
|
|
244
244
|
grid-area: info;
|
|
245
245
|
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
246
|
-
`,D=e=>new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}),I=({className:e,name:t,timestamp:
|
|
246
|
+
`,D=e=>new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}),I=({className:e,name:t,timestamp:o})=>{if(!t&&!o)return null;let n="";return t?o?n=`${t}: ${D(o)}`:n=t:o&&(n=D(o)),s.jsx(ue,{children:n})},P=({className:e,children:t,sender:o,timestamp:n})=>{const{avatar:i,name:l}=o,{avatarSize:h}=r.useProperties();return s.jsxs(he,{hasAvatar:!!i,className:L.appendClassNames(e,"humany-conversation-agent-message"),children:[i&&s.jsx(se,{avatarSize:h,children:typeof i=="string"?s.jsx("img",{src:i}):s.jsx(r.SymbolBadge,{symbol:i})}),t,s.jsx(I,{name:l,timestamp:n})]})},he=a.div`
|
|
247
247
|
display: grid;
|
|
248
248
|
margin-right: 10%;
|
|
249
249
|
width: 90%;
|
|
@@ -260,7 +260,7 @@
|
|
|
260
260
|
'content'
|
|
261
261
|
'info';
|
|
262
262
|
`};
|
|
263
|
-
`,ge=g.forwardRef(({className:e,children:t,timestamp:
|
|
263
|
+
`,ge=g.forwardRef(({className:e,children:t,timestamp:o,discrete:n,fullWidth:i},l)=>s.jsx(ye,{ref:l,className:L.appendClassNames(e,"humany-conversation-system-message"),fullWidth:i,children:n?s.jsxs(pe,{className:"humany-conversation-discrete-message",children:[t,s.jsx(I,{timestamp:o})]}):s.jsxs(s.Fragment,{children:[t,s.jsx(I,{timestamp:o})]})})),ye=a.div`
|
|
264
264
|
${e=>e.fullWidth&&"width: 100%"};
|
|
265
265
|
padding: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
|
|
266
266
|
overflow: auto;
|
|
@@ -272,55 +272,74 @@
|
|
|
272
272
|
> p {
|
|
273
273
|
margin: 0;
|
|
274
274
|
}
|
|
275
|
-
`,be=({className:e,children:t,timestamp:
|
|
275
|
+
`,be=({className:e,children:t,timestamp:o})=>{const{userLabel:n=""}=r.useProperties();return s.jsxs(fe,{className:L.appendClassNames(e,"humany-conversation-user-message"),children:[t,s.jsx(I,{name:n,timestamp:o})]})},fe=a.div`
|
|
276
276
|
margin-left: 10%;
|
|
277
277
|
width: 90%;
|
|
278
278
|
display: flex;
|
|
279
279
|
flex-direction: column;
|
|
280
280
|
align-items: flex-end;
|
|
281
|
-
`,K=e=>Array.isArray(e)?e:Object.keys(e).map(t=>({label:e[t],actionKey:t})),xe=({header:e,actions:t,dispatch:
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
}
|
|
281
|
+
`,K=e=>Array.isArray(e)?e:Object.keys(e).map(t=>({label:e[t],actionKey:t})),xe=({header:e,actions:t,dispatch:o})=>s.jsx($e,{className:"humany-conversation-button-list",header:e,items:K(t),renderItem:n=>{var l;const i=!!((l=n==null?void 0:n.data)!=null&&l.href);return s.jsx("li",{children:i?s.jsxs(ve,{onClick:()=>{o("action",n)},href:n.data.href,target:n.data.target,"aria-label":n.label,title:n.label,children:[s.jsx(r.SymbolBadge,{symbol:n.symbol}),n.label]}):s.jsxs(je,{onClick:()=>{o("action",n)},"aria-label":n.label,title:n.label,children:[s.jsx(r.SymbolBadge,{symbol:n.symbol}),n.label]})},n.actionKey)}}),$e=a(r.ItemList)`
|
|
282
|
+
${r.itemList}
|
|
283
|
+
> ul {
|
|
284
|
+
display: flex;
|
|
285
|
+
flex-wrap: wrap;
|
|
286
|
+
gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
287
|
+
> li {
|
|
288
|
+
margin: 0;
|
|
290
289
|
}
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
290
|
+
}
|
|
291
|
+
${S}
|
|
292
|
+
`,ve=a(r.Link)`
|
|
293
|
+
${r.buttonCss};
|
|
294
294
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
295
|
+
display: block;
|
|
296
|
+
padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
297
|
+
background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
|
|
298
|
+
width: 100%;
|
|
299
|
+
color: #ffffff;
|
|
300
|
+
overflow: hidden;
|
|
301
|
+
text-overflow: ellipsis;
|
|
302
|
+
&:focus-visible {
|
|
303
|
+
${r.borderTabStyle}
|
|
304
|
+
background-color: transparent;
|
|
305
|
+
}
|
|
306
306
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
`,je=(
|
|
312
|
-
|
|
307
|
+
i,
|
|
308
|
+
svg {
|
|
309
|
+
margin-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
|
|
310
|
+
}
|
|
311
|
+
`,je=a(r.Button)`
|
|
312
|
+
${r.buttonCss};
|
|
313
|
+
|
|
314
|
+
display: block;
|
|
315
|
+
padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
316
|
+
background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
|
|
317
|
+
width: 100%;
|
|
318
|
+
color: #ffffff;
|
|
319
|
+
overflow: hidden;
|
|
320
|
+
text-overflow: ellipsis;
|
|
321
|
+
&:focus-visible {
|
|
322
|
+
${r.borderTabStyle}
|
|
323
|
+
background-color: transparent;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
i,
|
|
327
|
+
svg {
|
|
328
|
+
margin-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
|
|
329
|
+
}
|
|
330
|
+
`,Se=({type:e,content:t={}})=>{const o=r.useComponent(e);return!o||!e?null:s.jsx(g.Suspense,{fallback:null,children:s.jsx(o,{...t})})},we=({body:e})=>s.jsx(Ce,{html:e}),Ce=a(r.Html)`
|
|
331
|
+
${r.genericHtml}
|
|
313
332
|
color: inherit;
|
|
314
333
|
white-space: pre-wrap;
|
|
315
334
|
${S}
|
|
316
335
|
a {
|
|
317
336
|
color: ${e=>e.theme.colors.link};
|
|
318
337
|
&:focus-visible {
|
|
319
|
-
${
|
|
338
|
+
${r.borderTabStyle};
|
|
320
339
|
}
|
|
321
340
|
}
|
|
322
|
-
`,
|
|
323
|
-
${
|
|
341
|
+
`,ke=({header:e,actions:t,dispatch:o})=>s.jsx(Le,{className:"humany-conversation-item-list",header:e,items:K(t),renderItem:n=>{var i;return s.jsx("li",{children:s.jsxs(ze,{children:[((i=n.symbol)==null?void 0:i.content)&&s.jsx("div",{className:"item-icon",children:s.jsx(r.SymbolBadge,{size:22,symbol:{type:n.symbol.type,content:n.symbol.content}})}),s.jsxs("div",{className:"item-body",children:[s.jsx(r.Button,{onClick:()=>{o("action",n)},"aria-label":n.label,title:n.label,children:n.label}),n.description&&s.jsx("p",{children:n.description})]})]})},n.actionKey)}}),Le=a(r.ItemList)`
|
|
342
|
+
${r.itemList}
|
|
324
343
|
|
|
325
344
|
> .humany-paragraph {
|
|
326
345
|
${S}
|
|
@@ -331,7 +350,7 @@
|
|
|
331
350
|
}
|
|
332
351
|
}
|
|
333
352
|
|
|
334
|
-
${e=>
|
|
353
|
+
${e=>r.headingElement(e)("h1",y.css`
|
|
335
354
|
white-space: normal;
|
|
336
355
|
`)}
|
|
337
356
|
|
|
@@ -351,7 +370,7 @@
|
|
|
351
370
|
border-bottom: none;
|
|
352
371
|
}
|
|
353
372
|
}
|
|
354
|
-
`,
|
|
373
|
+
`,ze=a.div`
|
|
355
374
|
display: flex;
|
|
356
375
|
gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
|
|
357
376
|
${S}
|
|
@@ -381,18 +400,18 @@
|
|
|
381
400
|
margin: 0;
|
|
382
401
|
|
|
383
402
|
&:focus-visible {
|
|
384
|
-
${
|
|
403
|
+
${r.borderTabStyle}
|
|
385
404
|
span {
|
|
386
405
|
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
|
|
387
406
|
text-decoration: underline;
|
|
388
407
|
}
|
|
389
408
|
}
|
|
390
409
|
}
|
|
391
|
-
`,
|
|
392
|
-
${
|
|
410
|
+
`,Te=({header:e,actions:t,dispatch:o})=>s.jsx(Ie,{className:"humany-conversation-link-list",header:e,items:K(t),renderItem:n=>s.jsx("li",{children:s.jsxs(Me,{help:n.actionKey==="help",onClick:()=>{o("action",n)},"aria-label":n.label,title:n.label,children:[n.label,n.actionKey==="help"&&s.jsx(r.SymbolBadge,{size:14,symbol:{type:"Svg",content:"caret-down"}})]})},n.actionKey)}),Ie=a(r.ItemList)`
|
|
411
|
+
${r.itemList}
|
|
393
412
|
${S}
|
|
394
413
|
|
|
395
|
-
${e=>
|
|
414
|
+
${e=>r.headingElement(e)("h1",y.css`
|
|
396
415
|
white-space: normal;
|
|
397
416
|
`)}
|
|
398
417
|
|
|
@@ -404,7 +423,7 @@
|
|
|
404
423
|
margin: 0;
|
|
405
424
|
}
|
|
406
425
|
}
|
|
407
|
-
`,
|
|
426
|
+
`,Me=a(r.Button)`
|
|
408
427
|
display: block;
|
|
409
428
|
text-align: left;
|
|
410
429
|
font-weight: 300;
|
|
@@ -413,30 +432,30 @@
|
|
|
413
432
|
text-overflow: ellipsis;
|
|
414
433
|
overflow: hidden;
|
|
415
434
|
|
|
416
|
-
${e=>{var t,
|
|
435
|
+
${e=>{var t,o;return e.help&&y.css`
|
|
417
436
|
color: ${(t=e.theme.colors)==null?void 0:t.text};
|
|
418
437
|
text-decoration: underline;
|
|
419
438
|
|
|
420
439
|
i,
|
|
421
440
|
svg {
|
|
422
|
-
margin-left: ${(
|
|
441
|
+
margin-left: ${(o=e.theme.sizes)==null?void 0:o.small};
|
|
423
442
|
}
|
|
424
443
|
`}}
|
|
425
444
|
|
|
426
445
|
&:focus-visible {
|
|
427
|
-
${
|
|
446
|
+
${r.borderTabStyle}
|
|
428
447
|
span {
|
|
429
448
|
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
|
|
430
449
|
text-decoration: underline;
|
|
431
450
|
}
|
|
432
451
|
}
|
|
433
|
-
`,
|
|
452
|
+
`,Ne=()=>s.jsx(Be,{className:"humany-conversation-separator"}),Be=a.div`
|
|
434
453
|
${e=>e.theme.border&&`border-bottom: ${e.theme.border};`}
|
|
435
454
|
width: 100%;
|
|
436
|
-
`,
|
|
455
|
+
`,He=({text:e})=>s.jsx(Re,{className:"humany-conversation-text",variant:"span",children:e}),Re=a(r.Typography)`
|
|
437
456
|
${S}
|
|
438
|
-
`,
|
|
439
|
-
${e=>
|
|
457
|
+
`,Ae=({header:e="Video call",acceptLabel:t="Accept",declineLabel:o="Decline",dispatch:n})=>{const i=g.useMemo(()=>[{label:t,actionKey:"accept-video-call",symbol:{type:"Svg",content:"video"}},{label:o,actionKey:"decline-video-call",symbol:{type:"Svg",content:"close"}}],[t,o]);return s.jsx(Oe,{className:"humany-conversation-video-request",header:e,items:i,renderItem:l=>{const h=l.actionKey==="accept-video-call"?"#70c48e":"#da5c85";return s.jsx("li",{children:s.jsx(Ke,{onClick:()=>{n("action",l)},"aria-label":l.label,title:l.label,bgColor:h,children:s.jsx(r.SymbolBadge,{symbol:l.symbol,size:25})})},l.actionKey)}})},Oe=a(r.ItemList)`
|
|
458
|
+
${e=>r.itemList(e)}
|
|
440
459
|
> ul {
|
|
441
460
|
display: flex;
|
|
442
461
|
flex-wrap: wrap;
|
|
@@ -446,8 +465,8 @@
|
|
|
446
465
|
}
|
|
447
466
|
}
|
|
448
467
|
${e=>S(e)}
|
|
449
|
-
`,
|
|
450
|
-
${
|
|
468
|
+
`,Ke=a(r.Button)`
|
|
469
|
+
${r.buttonCss};
|
|
451
470
|
|
|
452
471
|
background-color: ${e=>e.bgColor};
|
|
453
472
|
display: flex;
|
|
@@ -459,7 +478,7 @@
|
|
|
459
478
|
border-radius: 100%;
|
|
460
479
|
|
|
461
480
|
&:focus-visible {
|
|
462
|
-
${
|
|
481
|
+
${r.borderTabStyle}
|
|
463
482
|
background-color: transparent;
|
|
464
483
|
|
|
465
484
|
i,
|
|
@@ -480,13 +499,13 @@
|
|
|
480
499
|
stroke: #fff;
|
|
481
500
|
}
|
|
482
501
|
}
|
|
483
|
-
`,
|
|
484
|
-
${
|
|
502
|
+
`,qe=([e,t])=>({type:e,content:t}),De=({items:e,dispatch:t})=>s.jsx(Fe,{className:"humany-message-list",items:e.map(qe),renderLi:!0,renderItem:o=>{switch(o.type){case x.ConversationMessageListItemType.Text:return s.jsx(He,{text:o.content});case x.ConversationMessageListItemType.HTML:return s.jsx(we,{...o.content});case x.ConversationMessageListItemType.Separator:return s.jsx(Ne,{...o.content});case x.ConversationMessageListItemType.ItemList:return s.jsx(ke,{...o.content,dispatch:t});case x.ConversationMessageListItemType.LinkList:return s.jsx(Te,{...o.content,dispatch:t});case x.ConversationMessageListItemType.ButtonList:return s.jsx(xe,{...o.content,dispatch:t});case x.ConversationMessageListItemType.VideoRequest:return s.jsx(Ae,{...o.content,dispatch:t});default:return s.jsx(Se,{type:o.type,content:o.content})}}}),Fe=a(r.List)`
|
|
503
|
+
${r.list}
|
|
485
504
|
|
|
486
505
|
> li {
|
|
487
506
|
margin: 0;
|
|
488
507
|
}
|
|
489
|
-
`,
|
|
508
|
+
`,Pe=g.forwardRef(({className:e,timestamp:t,sender:o,type:n,content:i},l)=>{const h=g.useCallback(m=>{let c="first";return i.length>1&&(c=m===0?"first":m+1===i.length?"last":"middle"),c},[i]),d=()=>s.jsx(s.Fragment,{children:i.map(m=>{const{key:c,body:$,title:w,form:C,actions:j}=m,b=!!$&&!w&&!C&&!j;return s.jsx(ge,{className:e,discrete:b,ref:l,timestamp:t,fullWidth:!!C||!!j,children:b&&$?s.jsx(r.Html,{html:$}):s.jsx(B,{isSystem:!0,content:m})},c)})}),p=()=>s.jsx(P,{sender:o,timestamp:t,className:e,children:s.jsx(R,{className:"humany-message-content-bundle",children:i.map((m,c)=>s.jsx(A,{className:"humany-message-container",left:!0,ref:l,children:s.jsx(B,{content:m,stacked:h(c)})},m.key))})}),v=()=>s.jsx(be,{timestamp:t,className:e,children:s.jsx(R,{className:"humany-message-content-bundle",children:i.map((m,c)=>s.jsx(A,{className:"humany-message-container",right:!0,ref:l,children:s.jsx(B,{isUser:!0,content:m,stacked:h(c)})},m.key))})});switch(n){case x.ConversationMessageType.System:return d();case x.ConversationMessageType.Agent:return p();case x.ConversationMessageType.User:return v();default:return null}}),B=({content:e,isUser:t,isSystem:o,stacked:n})=>{const i=r.useDispatch(),{title:l,body:h,actions:d,form:p,items:v}=e;return v?s.jsx(O,{className:"humany-message-content",user:!!t,stacked:n,children:s.jsx(De,{items:v,dispatch:i})}):s.jsxs(O,{className:"humany-message-content",padded:!o,user:!!t,stacked:n,fullWidth:!!p||!!d,children:[l&&s.jsx(T,{children:s.jsx(oe,{variant:"h2",children:l})}),h&&s.jsx(T,{children:s.jsx(ce,{html:h})}),p&&s.jsx(T,{children:s.jsx(le,{...p,onChange:(c,$)=>{i("form",{data:$,formKey:p.schema.id,actionKey:c})}})}),d&&s.jsx(T,{children:s.jsx(de,{items:Object.keys(d).map(c=>({label:d[c],actionKey:c})),renderItem:c=>s.jsx("li",{children:s.jsx(me,{onClick:()=>{i("action",c.actionKey)},children:c.label})},c.actionKey)})})]})},E=()=>{const e=g.useCallback(d=>{d&&setTimeout(()=>{d.scrollIntoView({block:"start",behavior:"smooth"})},250)},[]),[t,o]=r.useScroll(!0),{messages:n,loading:i,typingActors:l=[]}=r.useProperties(),h=()=>l&&l.length?l.map((d,p)=>s.jsx(H,{id:`typing_${d.name}`,children:s.jsx(P,{timestamp:Date.now(),sender:d,children:s.jsx(q,{boxed:!0,ref:e})})},`typing_${d.name}`)):null;return s.jsxs(s.Fragment,{children:[s.jsxs(Ee,{tabIndex:0,scrollableCss:t,ref:o,children:[n&&n.length?n.map((d,p)=>{const{type:v,timestamp:m,sender:c,content:$}=d;return s.jsx(H,{className:"humany-conversation-entry",tabIndex:-1,children:s.jsx(Pe,{...d,ref:e})},`${v}_${c==null?void 0:c.name}_${m}_${$[0].key}`)}):null,h(),i&&s.jsx(H,{children:s.jsx(q,{ref:e})})]}),s.jsx(J,{})]})},Ee=a.div`
|
|
490
509
|
display: flex;
|
|
491
510
|
flex-direction: column;
|
|
492
511
|
align-items: stretch;
|
|
@@ -494,7 +513,7 @@
|
|
|
494
513
|
padding: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
|
|
495
514
|
${e=>!!e.scrollableCss&&e.scrollableCss};
|
|
496
515
|
&:focus-visible {
|
|
497
|
-
${e=>
|
|
516
|
+
${e=>r.borderTabStyle(e)};
|
|
498
517
|
}
|
|
499
518
|
`,H=a.div`
|
|
500
519
|
margin: 0;
|
|
@@ -519,10 +538,10 @@
|
|
|
519
538
|
h1 {
|
|
520
539
|
font-weight: normal;
|
|
521
540
|
}
|
|
522
|
-
${e=>
|
|
541
|
+
${e=>r.headingElement(e)("h1",y.css`
|
|
523
542
|
font-weight: normal;
|
|
524
543
|
`)}
|
|
525
|
-
`,
|
|
544
|
+
`,We=({dispatch:e})=>{const t=g.useRef(null);return g.useEffect(()=>{t.current&&t.current.parentNode&&e("overlay-mounted",t.current)},[t]),s.jsx(r.WidgetOverlayOutlet,{portalId:"humany-conversation-overlay-portal",className:"humany-conversation-overlay-outlet",ref:t})},Ue=({dispatch:e,header:t,buttonLabel:o})=>s.jsxs(_e,{portalId:"humany-conversation-portal",className:"humany-conversation-outlet",children:[s.jsxs(Ve,{className:"humany-conversation-outlet-head",children:[s.jsx(Ge,{className:"humany-conversation-outlet-head-button","aria-label":o,title:o,onClick:()=>e("hide-overlay-conversation"),children:s.jsx(r.SymbolBadge,{symbol:{type:"Svg",content:"caret-down"},size:20})}),t&&s.jsx(Ye,{className:"humany-conversation-outlet-header",variant:"h1",children:t})]}),s.jsx(E,{})]}),_e=a(r.WidgetOverlayOutlet)`
|
|
526
545
|
z-index: 11;
|
|
527
546
|
top: auto;
|
|
528
547
|
height: 65%;
|
|
@@ -531,7 +550,7 @@
|
|
|
531
550
|
flex-direction: column;
|
|
532
551
|
border-top-right-radius: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
|
|
533
552
|
border-top-left-radius: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
|
|
534
|
-
`,
|
|
553
|
+
`,Ve=a.div`
|
|
535
554
|
display: flex;
|
|
536
555
|
flex-direction: column;
|
|
537
556
|
justify-content: center;
|
|
@@ -539,11 +558,11 @@
|
|
|
539
558
|
gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
540
559
|
padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
|
|
541
560
|
${e=>e.theme.border&&`border-bottom: ${e.theme.border};`}
|
|
542
|
-
`,
|
|
561
|
+
`,Ye=a(r.Typography)`
|
|
543
562
|
font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.medium}};
|
|
544
563
|
color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
545
564
|
margin: 0;
|
|
546
|
-
`,
|
|
565
|
+
`,Ge=a(r.Button)`
|
|
547
566
|
display: flex;
|
|
548
567
|
align-items: center;
|
|
549
568
|
justify-content: center;
|
|
@@ -551,13 +570,13 @@
|
|
|
551
570
|
${e=>e.theme.borderRadius&&`border-radius: ${e.theme.borderRadius};`}
|
|
552
571
|
|
|
553
572
|
&:focus-visible {
|
|
554
|
-
${
|
|
573
|
+
${r.borderTabStyle};
|
|
555
574
|
}
|
|
556
575
|
|
|
557
576
|
svg line {
|
|
558
577
|
stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
|
|
559
578
|
}
|
|
560
|
-
`,
|
|
579
|
+
`,Je=({className:e,...t})=>{const{overlay:o,overlayConversationHeader:n,overlayConversationCloseLabel:i,conversationControllerId:l}=r.useProperties(),h=r.useDispatch();return s.jsxs(r.ConversationContext.Provider,{value:l?{id:l}:null,children:[s.jsx(Qe,{...t,className:L.appendClassNames(e,"humany-conversation-component"),children:s.jsx(E,{})}),o&&s.jsxs(s.Fragment,{children:[s.jsx(We,{dispatch:h}),o.conversation&&s.jsx(Ue,{dispatch:h,header:n,buttonLabel:i})]})]})},Qe=a.div`
|
|
561
580
|
position: absolute;
|
|
562
581
|
right: 0;
|
|
563
582
|
left: 0;
|
|
@@ -566,4 +585,4 @@
|
|
|
566
585
|
overflow: hidden;
|
|
567
586
|
display: flex;
|
|
568
587
|
flex-direction: column;
|
|
569
|
-
`;exports.default=
|
|
588
|
+
`;exports.default=Je;
|
package/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";var $=Object.defineProperty;var q=(i,e,t)=>e in i?$(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var d=(i,e,t)=>(q(i,typeof e!="symbol"?e+"":e,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("@telia-ace/widget-core"),p=require("@telia-ace/widget-services"),x=require("@telia-ace/widget-utilities"),L=require("@telia-ace/widget-forms"),M=require("@telia-ace/widget-plugins"),N=require("@telia-ace/widget-ui"),z=require("react");class U{constructor(e){d(this,"cache",new Map);d(this,"subscriptions",[]);this.controller=e;const{events:t}=e.container.get("$widget"),s=t.subscribe("data-client:fetched",(r,n)=>{n.type==="contact-method"&&this.cache.set(n.response.id,n.response)});this.subscriptions.push(s)}getConversationLogs(){return this.controller.messages.reduce((t,s)=>{const r=P(s),{key:n,content:a,type:o,sender:c,timestamp:h}=r.content,u=this.parseEntry(a,o,c,h);return u&&t.push(u),t},[])}parseEntry(e,t,s,r){const n=h=>{let u=[],l=[],m;if(Array.isArray(h)){const[g,f]=h;m=f}else m=h;return this.createMessageContent(m).length&&(l=[...l,this.createMessageContent(m)]),u=[...u,...this.createMessageOptions(m)],{messagesAsList:l,options:u}};let a=[],o=[];if(Array.isArray(e.items)){const{items:h}=e;h.forEach(u=>{const l=n(u);a=[...a,...l.options],o=[...o,...l.messagesAsList]})}else{const h=n(e);a=[...a,...h.options],o=[...o,...h.messagesAsList]}return{options:a,message:o.length?o.join(`
|
|
2
2
|
`):void 0,source:this.createMessageSource(t),alias:this.createAlias(t,s),timestamp:r}}createMessageSource(e){return e}createAlias(e,t){return e===y.System?"system":(t==null?void 0:t.name)||"Me"}handleContactMethod(e){if(!this.cache.has(e))return;const t=this.cache.get(e);let s="";return s=this.appendText(s,`${t.clientName}:`),s=this.appendText(s,t.title),t.description&&(s=this.appendText(s,t.title)),s}getDetails(e,t=!0){if(!e)return"";const{header:s,title:r,label:n,description:a,text:o,html:c,body:h,contactMethodId:u}=e;let l="";if(u){const m=this.handleContactMethod(u.toString());m&&(l=this.appendText(l,m,t))}return s&&(l=this.appendText(l,s,t)),r&&(l=this.appendText(l,r,t)),a&&(l=this.appendText(l,a,t)),o&&(l=this.appendText(l,o,t)),n&&(l=this.appendText(l,n,t)),c&&(l=this.appendText(l,c,t)),h&&typeof h=="string"&&(l=this.appendText(l,h,t)),l}createMessageContent(e){let t="";return t=this.getDetails(e),t}createMessageOptions(e){let t=[],s=[];return Array.isArray(e==null?void 0:e.actions)?s=e.actions:typeof(e==null?void 0:e.actions)=="object"&&(s=Object.entries(e.actions).map(([r,n])=>({actionKey:r,label:n}))),s.length&&(t=s.map(r=>this.getDetails(r,!1))),t}appendText(e,t,s=!0){return s&&e.length?`${e}
|
|
3
|
-
${t}`:e.length?`${e} ${t}`:t}dispose(){this.subscriptions.forEach(e=>{e()})}}class A{constructor(e,t){d(this,"id");d(this,"name");d(this,"avatar");d(this,"print",(e,t)=>{const s={name:this.name,avatar:this.avatar,id:this.id},r=P(e,t);return this.provider.createEntry(r.key,r.content,y.Agent,s,r.timestamp)});d(this,"typing",()=>this.provider.setTypingState({name:this.name,avatar:this.avatar}));this.provider=e,this.id=t.id||x.uuid(),this.name=t.name,this.avatar=t.avatar}update(e){var r;const{name:t,avatar:s}=e;s===null?this.avatar=void 0:s&&(this.avatar=s),t===null?this.name=void 0:t&&(this.name=t),(r=this.provider.controller)==null||r.events.dispatch("conversation:agent-updated",{agent:this})}}class E{constructor(e,t,s){d(this,"subscriptions",[]);d(this,"options");d(this,"user");this.name=e,this.container=t,this.controller=s,this.user=s==null?void 0:s.user,this.options={silent:!1}}static create(e,t,s){return new E(e,t,s)}createAgent(e={}){var t;if(this.controller){const s=this.controller.getAgentById(e.id),r=s?new A(this,{...s,...e}):new A(this,e);return s||(t=this.controller)==null||t.events.dispatch("conversation:agent-created",{agent:r}),r}}print(e){var t;return(t=this.controller)==null?void 0:t.print(e)}setTypingState(e,t){var s;return(s=this.controller)==null?void 0:s.setTypingState(e,t)}loading(){return this.controller?this.controller.loader():()=>()=>{}}createEntry(e,t,s,r,n){var a;return(a=this.controller)==null?void 0:a.createEntry(e,t,s,r,n)}dispose(){var e;process.env.NODE_ENV!=="production"&&console.log(`conversation-provider: dispose (${this.name})`),(e=this.controller)==null||e.disposeProvider(this),this.controller=null,this.subscriptions.forEach(t=>t())}isRehydrated(){var e;return((e=this.controller)==null?void 0:e.isRehydrated())||Promise.resolve(!1)}getHistory(){var e;return((e=this.controller)==null?void 0:e.getHistory())||[]}complete(){var e;(e=this.controller)==null||e.onCompleteProvider()}setOptions(e={silent:!1}){this.options=e}onUnreadMessage(e){var t;if(this.controller){const s=(t=this.controller)==null?void 0:t.onUnreadMessage(e);return this.subscriptions.push(s),()=>{s()}}}onMounted(e){var t;if(this.controller){const s=(t=this.controller)==null?void 0:t.events.subscribe("conversation:component-mount-changed",e);return this.subscriptions.push(s),e({},this.controller.getComponentMountedState()),()=>{s()}}}}const O=i=>`conversation-${i}`;class K{constructor(){d(this,"_locking",Promise.resolve());d(this,"_locks",0)}isLocked(){return this._locks>0}lock(){this._locks+=1;let e;const t=new Promise(r=>e=()=>{this._locks-=1,r()}),s=this._locking.then(()=>e);return this._locking=this._locking.then(()=>t),s}}class Q{constructor(e,t,s){d(this,"sessionStorageKey");d(this,"locker",new K);d(this,"initialStoredAgents",[]);this.container=e,this.conversation=t,this.enabled=s,this.sessionStorageKey=O(t.id),t.onStarted(async()=>{if(t.messages.length>0)return;const{agents:r}=await this.read(),n=[];r&&r.forEach(o=>{const c=t.providerIndex(o.providerName),h=c>-1?t.registeredProviders[c]:t.createProvider(o.providerName),u=new A(h,{name:o.name,avatar:o.avatar,id:o.id});n.push(u)});const{messages:a}=await this.read();a.forEach(o=>{switch(o.type){case"agent":{const c=n.find(h=>{var u;return h.id===((u=o.sender)==null?void 0:u.id)});c&&c.print(o.content.items||o.content,{key:o.key});return}case"user":{t.user.print(o.content.items||o.content,{key:o.key});return}case"system":default:t.print(o.content.items||o.content)}})}),t.onMessageCreated(async(r,n)=>{this.write(n.message,"messages")}),t.events.subscribe("conversation:agent-created",async(r,n)=>{const a={id:n.agent.id,name:n.agent.name,avatar:n.agent.avatar,providerName:n.agent.provider.name};await this.write(a,"agents")}),t.events.subscribe("conversation:agent-updated",async(r,n)=>{const{agents:a}=await this.read();await this.write([...a.map(o=>o.id===n.agent.id?{...o,name:n.agent.name,avatar:n.agent.avatar}:o)],"agents","update")})}setInitialData(e){this.initialStoredAgents=e.agents}async isRehydrated(){const{messages:e}=await this.read();return e.length>0}getStoredAgent(e){if(this.enabled)return this.initialStoredAgents.find(t=>t.id===e)}async write(e,t,s="add"){if(!this.enabled)return;const r=await this.locker.lock();return p.createStorageWriter(this.container,this.sessionStorageKey,p.StorageCategory.Necessary).then(async n=>{if(s==="add"){const a=await this.read();if(t==="messages"&&a.messages.findIndex(c=>c.key===e.key)>-1){r();return}const o={...a};return t==="messages"?o.messages=[...o.messages,e]:t==="agents"&&(o.agents=[...o.agents,e]),n({...a,...o}).then(()=>{r()})}if(s==="update"&&t==="agents"){const a=await this.read();return n({...a,agents:e}).then(()=>{r()})}return n(e).then(()=>{r()})})}async read(){return p.readStorage(this.container,this.sessionStorageKey).then(e=>e||{messages:[],agents:[]})}}class j{constructor(e){d(this,"print",(e,t)=>{const s=P(e,t);return this.controller.createEntry(s.key,s.content,y.User,void 0,s.timestamp)});this.controller=e}}const k=async(i,e,t)=>{const s=await i.getAsync("conversation"),r=await i.getAsync("components"),n=s.controllers.find(a=>a.conversation.id===e);if(n){const a=[...n.conversation.providers];a.forEach(c=>{n.conversation.setProviderOptions(c,{silent:!0})}),n.conversation.queueProviders(a),n.conversation.setProviders([t]);const o=r.components().ofType("conversation");r.write({key:"setConversationProvider",attributes:{properties:{providers:[t]}},target:o,provider:"localStorage"})}};class H{constructor(e){this.writer=e}update(e){const t=this.getNormalizedSettings(e);this.writer(t)}remove(){this.writer(null)}getNormalizedSettings(e){return typeof e=="string"?{body:e}:e.length>-1&&typeof e=="object"?{items:e}:e}}var y=(i=>(i.User="user",i.Agent="agent",i.System="system",i))(y||{});const P=(i,e)=>{let t,s=(e==null?void 0:e.key)||x.uuid(),r=Date.now();if(Array.isArray(i)&&i.length>-1)typeof i[0]=="string"?t={items:[i]}:t={items:i};else if(typeof i=="string")t={body:i};else if(i=i||{},i.type)t={...i};else{if(t={body:i.body,actions:i.actions,title:i.title},i.key&&(s=i.key),i.timestamp&&(r=i.timestamp),typeof i.form=="function"){const n=L.FormBuilder.create(s);i.form(n);const a=n.get();t.form=a}i.timestamp===null&&(r=null)}return{content:t,key:s,timestamp:r}},W=(i,e)=>{if(!e)return;const t=JSON.stringify(e),s=i.findIndex(r=>t===JSON.stringify(r));if(s>-1)return i.splice(s,1)};class B{constructor(e,t,s){d(this,"formHandlers",{});d(this,"user",new j(this));d(this,"events");d(this,"providers",[]);d(this,"active",!1);d(this,"queuedProviders",[]);d(this,"registeredProviders",[]);d(this,"loaders",0);d(this,"componentMounted",!1);d(this,"store");d(this,"messages",[]);d(this,"typingActors",[]);d(this,"conversationHistory");d(this,"print",e=>{const t=P(e);return this.createEntry(t.key,t.content,"system",void 0,t.timestamp)});this.container=e,this.id=t;const r=e.get("$widget");this.events=r.events.createChild(this),this.store=new Q(e,this,s.rehydrate),this.conversationHistory=new U(this)}setInitialStorage(e){this.store.setInitialData(e)}setProviders(e){const t=[],s=[];this.providers.reduce((r,n)=>(e.indexOf(n)===-1&&r.push(n),r),[]).forEach(r=>{const n=this.providers.indexOf(r);n>-1&&(t.push(r),this.providers.splice(n,1))}),e.forEach(r=>{this.providers.indexOf(r)===-1&&(s.push(r),this.providers.push(r))}),(s.length||t.length)&&this.events.dispatch("conversation:providers-changed",{added:s,removed:t})}createProvider(e){const t=this.providerIndex(e);if(t>-1)return this.registeredProviders[t];const s=E.create(e,this.container,this);return this.registeredProviders.push(s),s}providerIndex(e){return this.registeredProviders.findIndex(t=>t.name===e)}getAgentById(e){if(e)return this.store.getStoredAgent(e)}dispose(){this.conversationHistory.dispose(),this.registeredProviders.forEach(e=>e.dispose()),this.messages=[],this.events.dispatch("conversation:controller-disposed",this),this.active=!1}onDispose(e){return this.events.subscribe("conversation:controller-disposed",e)}onStarted(e){return this.events.subscribe("conversation:started",e)}onMessageCreated(e){return this.events.subscribe("conversation:message-created",e)}isRehydrated(){return this.store.isRehydrated()}disposeProvider(e){const t=this.providerIndex(e.name);t>-1&&this.registeredProviders.splice(t,1),this.events.dispatch("conversation:providers-changed",{removed:[e.name]}),this.registeredProviders.length||this.dispose()}onProvidersChange(e){return this.events.subscribe("conversation:providers-changed",e)}setComponentMountedState(e){this.componentMounted!==e&&(this.componentMounted=e,e&&(this.events.dispatch("conversation:unread-message",!1),this.events.dispatch("conversation:started",!0),this.active=!0),this.events.dispatch("conversation:component-mount-changed",e))}setProviderOptions(e,t){const s=this.providerIndex(e);s>-1&&this.registeredProviders[s].setOptions(t)}changeProvider(e){this.registeredProviders.find(s=>s.name===e)&&k(this.container,this.id,e)}queueProviders(e){this.queuedProviders=e}onCompleteProvider(){const e=this.queuedProviders.pop();e&&k(this.container,this.id,e)}getComponentMountedState(){return this.componentMounted}onUnreadMessage(e){return this.events.subscribe("conversation:unread-message",e)}createEntry(e,t,s,r,n){const a={key:e,content:t,type:s,sender:r||null,timestamp:n||n===null?n:Date.now()};this.messages.push(a),a.type==="agent"&&W(this.typingActors,r);const o=new H(c=>{if(c!==null){const{timestamp:h=void 0,...u}=c;a.content=u,h&&(a.timestamp=h)}else{const h=this.messages.indexOf(a);a.content=null,h>-1&&this.messages.splice(h,1)}this.events.dispatch("conversation:message-updated",{message:a}),this.update()});return this.events.dispatch("conversation:message-created",{message:a}),this.update(),this.componentMounted||this.events.dispatch("conversation:unread-message",!0),o}update(){this.events.dispatch("conversation:updated",{messages:this.messages,loading:this.loaders>0,typingActors:this.typingActors})}getMessageStream(){return{messages:this.messages,loading:this.loaders>0,typingActors:this.typingActors}}setTypingState(e,t){return this.typingActors.indexOf(e)===-1&&(this.typingActors.push(e),this.update()),()=>{W(this.typingActors,e),this.update()}}loader(){this.loaders=this.loaders+1;let e=!1;return this.loaders===1&&this.update(),()=>{e||(e=!0,this.loaders=this.loaders-1,this.loaders===0&&this.update())}}submitForm(e,t){this.formHandlers[e]={...this.formHandlers[e],submit:t}}validateForm(e,t){this.formHandlers[e]={...this.formHandlers[e],validate:t}}getHistory(){return this.conversationHistory.getConversationLogs()}}const F=(i,e)=>{const t=i.split("_contact");return e.widgets.get(t[0])},I=i=>{const e=i.get("$widget"),{name:t,implementation:s}=i.get("$widget"),r=t.indexOf("_contact")>-1?F(t,s):e,{data:n}=i.get("$settings"),{trigger:a}=r.container.get("$settings"),o=`${t.replace("_contact-method","").replace("_contact","")}_contact-method`,c=s.widgets.get(o);return c&&!a?{chatWidget:c,mainWidget:r,data:n}:{mainWidget:r,data:n}},G=i=>{const{chatWidget:e}=I(i);return!!e},R=(i,e,t)=>{const{mainWidget:s,data:r,chatWidget:n}=I(i);return n?n.state==="activated"?n.invoke("open").then(()=>{n.container.getAsync("conversation").then(a=>{a.navigateToConversationIfActive(e.id).then(()=>M.closeAllModals(i))})}):n.activate().then(()=>{const{trigger:a}=n.container.get("$settings");return a.action="hide",n.invoke("setSettings",()=>({data:r,trigger:a,activate:!0})).then(()=>n.container.getAsync("components").then(o=>{const c=o.components().ofType("contact-method");o.write({key:"setContactMethodId",attributes:{properties:{id:e.id,guideId:e.guideId}},target:c,provider:"localStorage"});const h=o.components().ofType("conversation");o.write({key:"setConversationProvider",attributes:{properties:{providers:[e.clientName]}},target:h,provider:"localStorage"})}))}).then(()=>n.invoke("attach",{key:"contact-method",triggerDOMElement:t,withRenderState:"open"})).then(()=>(p.createStorageWriter(n.container,"activeStickyWidget",p.StorageCategory.Necessary,{medium:p.StorageMedium.Local,scope:p.StorageScope.Implementation}).then(a=>a(n.name)),n.container.getAsync("conversation").then(a=>{a.setConversationEndedBehavior(S.Deactivate)}).then(()=>M.closeAllModals(i)).then(()=>!1))):(s.container.getAsync("conversation").then(a=>a.navigateToConversationIfActive(e.id).then(()=>a.setConversationEndedBehavior(S.Navigate))),!n)},J=(i,e,t="conversation")=>{const{mainWidget:s,chatWidget:r}=I(i);return r?r.container.getAsync("router").then(n=>{n.navigate(t,{id:e.id})}):s.container.getAsync("conversation").then(n=>{var a;(a=n.setConversationEndedBehavior(S.Navigate))==null||a.then(()=>{s.container.getAsync("router").then(o=>{s.container.getAsync("components").then(c=>{const h=c.components().ofType("conversation");c.write({key:"setConversationProvider",attributes:{properties:{providers:[e.clientName]}},target:h,provider:"localStorage"})}).then(()=>{o.navigate(t,{id:e.id})})})})})},b="conversations";var S=(i=>(i.Deactivate="deactivate",i.Navigate="navigate",i.None="none",i))(S||{});class w{constructor(e,t){d(this,"events");d(this,"controllers",[]);d(this,"providers",[]);d(this,"disposeProviders",{});d(this,"subscriptions",[]);d(this,"storageWriter",null);d(this,"router",null);d(this,"buttonQuery",null);d(this,"sessionInfo",null);this.container=e,this.components=t;const s=e.get("$widget");this.events=s.events.createChild(this)}initialize(){p.createStorageWriter(this.container,b,p.StorageCategory.Necessary,{medium:p.StorageMedium.Local}).then(e=>this.storageWriter=e),p.readStorage(this.container,b,p.StorageMedium.Local).then(e=>{this.buttonQuery=this.components.components().ofType("conversation-return-button"),e&&(this.sessionInfo=e,e.id&&e.route&&this.writeToComponents({active:!0,alert:{show:!1}}))}),this.container.getAsync("router").then(e=>this.router=e),this.events.subscribe("conversation:ended",(e,t)=>{var s,r,n;switch((s=this.sessionInfo)==null?void 0:s.conversationEndedBehavior){case"deactivate":this.container.get("$widget").deactivate();break;case"navigate":const o=(r=this.router)==null?void 0:r.getInitialRoute();o&&((n=this.router)==null||n.navigate(o.name));break}this.writeToComponents({active:!1}),this.sessionInfo=null,this.storageWriter&&this.storageWriter()})}addSubscription(e){this.subscriptions.push(e)}static getInstance(e,t="conversation"){return x.lock(e)(()=>e.getAsync(t).then(s=>{let r=s;return r||D.ComponentPlatform.getInstance(e).then(n=>(r=new w(e,n),r.initialize(),e.registerAsync(t,()=>r),r))}))}navigateToConversationIfActive(e){return p.readStorage(this.container,b,p.StorageMedium.Local).then(t=>{var s;if(t&&t.id===e&&t.route){const{name:r,params:n}=t.route;(s=this.router)==null||s.navigate(r,n)}})}setConversationEndedBehavior(e){return p.readStorage(this.container,b,p.StorageMedium.Local).then(t=>{let s=t;return s?s.conversationEndedBehavior=e:s={conversationEndedBehavior:e},this.sessionInfo=s,this.storageWriter&&this.storageWriter(this.sessionInfo)||Promise.resolve()})}async createController(e,t){const s=O(e),{agents:r}=await p.readStorage(this.container,s)||{agents:[]},n=this.controllers.findIndex(o=>o.conversation.id===e);let a;return n>-1?a=this.controllers[n].conversation:a=new B(this.container,e,t),a.setInitialStorage({agents:r||[]}),a}registerProvider(e,t){const s={name:e,handler:t};this.providers.push(s),this.controllers.filter(r=>r.conversation.providers.indexOf(e)>-1).forEach(r=>{this.invokeHandler(s,r)})}registerController(e,t){const s=this.controllers.findIndex(n=>n.conversation.id===e.id);let r;if(s<0){r={conversation:e,component:t},this.controllers.push(r);const n=a=>{a&&this.providers.filter(o=>a.indexOf(o.name)>-1).forEach(o=>{this.invokeHandler(o,r)})};return this.subscriptions.push(e.onDispose((a,o)=>{const c=this.controllers.findIndex(h=>h.conversation===o);c>-1&&this.controllers.splice(c,1),this.components.components().ofType("conversation-return-button").select().writeProperties({active:!1}),this.events.dispatch("conversation:ended",{},{bubbles:!0})})),this.subscriptions.push(e.onProvidersChange((a,o)=>{const{added:c,removed:h=[]}=o;h.forEach(u=>{(this.disposeProviders[u]||[]).forEach(l=>{l()})}),n(c)})),this.subscriptions.push(e.onStarted((a,o)=>{var h,u;const c={id:e.id,route:(h=this.router)==null?void 0:h.getRouteData(),conversationEndedBehavior:(u=this.sessionInfo)==null?void 0:u.conversationEndedBehavior};this.sessionInfo=c,this.storageWriter&&this.storageWriter(c),this.writeToComponents({active:o})})),this.subscriptions.push(e.onUnreadMessage((a,o)=>{this.events.dispatch("conversation:unread-message",o),this.writeToComponents({alert:{show:o}})})),n(e.providers),!0}return r=this.controllers[s],!1}writeToComponents(e,t="conversationReturnButtonState"){this.buttonQuery&&this.components.write({key:"conversationReturnButtonState",attributes:{properties:e},target:this.buttonQuery,provider:"localStorage"})}invokeHandler(e,t){const s=e.handler(t.conversation.createProvider(e.name),t.component);s&&(this.disposeProviders[e.name]||(this.disposeProviders[e.name]=[]),this.disposeProviders[e.name].push(s))}getComponentRoute(){return p.readStorage(this.container,b,p.StorageMedium.Local).then(e=>e==null?void 0:e.route)}dispose(){Object.keys(this.disposeProviders).forEach(e=>{this.disposeProviders[e].forEach(t=>{t()})}),this.subscriptions.forEach(e=>{e()}),this.controllers=[],this.providers=[]}static async handleContactMethodClick(e,t,s,r){if(G(t)){e.preventDefault();let n=document.getElementById("humany-dynamic-anchor");n||(n=document.createElement("a"),n.setAttribute("href","#"),n.id="humany-dynamic-anchor",document.body.appendChild(n)),R(t,s,n)}R(t,s)}static async handleContactMethodSubmit(e,t){var s,r;return(r=(s=t==null?void 0:t.body.form.meta)==null?void 0:s.conversation)!=null&&r.id?k(e,t.body.form.meta.conversation.id,t.clientName):J(e,t)}}const V=(i,e)=>i.reduce((t,s,r)=>{var a,o;const n={...s,content:[{...s.content,key:s.key}]};if(t.length>0&&s.type!==y.System){const c=t[t.length-1];if((!e&&e!==0||Math.abs(c.timestamp-s.timestamp)<e)&&((a=c.sender)==null?void 0:a.name)===((o=s.sender)==null?void 0:o.name)&&c.type===s.type)return c.timestamp=s.timestamp,c.content.push({...s.content,key:s.key}),t}return t.push(n),t},[]),Y=i=>Promise.all([w.getInstance(i),i.getAsync("router")]).then(([e,t])=>N.createReactComponent(i,"conversation",Promise.resolve().then(()=>require("./conversation-7c391689.js")),async s=>{const{rehydrate:r=!1}=s.properties(),a=t.getRouteData().params.id||s.node.name||"component",o=await e.createController(a,{rehydrate:r}),c=e.registerController(o,s),h=3*60*1e3,u=v=>{const{providers:g=[]}=v;if(g){const f=Array.isArray(g)?g:[g];return o.setProviders(f),f}};u(s.properties(u)),o.setComponentMountedState(!0);const l=v=>{const{loading:g,typingActors:f,messages:C}=v;s.writeProperties({loading:g,typingActors:f,messages:V(C,h)})};l(o.getMessageStream()),c&&(s.writeProperties({conversationControllerId:o.id}),s.actions.create("user-submit",(v,g)=>{if(g){const{preventDefault:f,validationPromise:C}=g;if(f){C&&C().then(T=>{T&&o.user.print(T)});return}}o.user.print(v.text)}),s.actions.create("user-typing",(v,g)=>{}),s.actions.create("form",(v,g)=>{}),s.actions.create("action",(v,g)=>{}),s.actions.create("overlay-mounted",(v,g)=>{}),s.actions.create("show-overlay",(v,g)=>{s.writeProperties({overlay:{conversation:!1,secondary:!1}})}),s.actions.create("hide-overlay",(v,g)=>{s.writeProperties({overlay:null})}),s.actions.create("show-overlay-conversation",(v,g)=>{s.writeProperties({overlay:{conversation:!0,secondary:!1}})}),s.actions.create("hide-overlay-conversation",(v,g)=>{s.writeProperties({overlay:{conversation:!1,secondary:!1}})}));const m=o.events.subscribe("conversation:updated",(v,g)=>{l(g)});return()=>{o.setComponentMountedState(!1),m(),o.active||l({messages:[],typingActors:[],loading:!1})}},{reuseController:!0})),X=i=>Promise.all([D.ComponentPlatform.getInstance(i),w.getInstance(i),i.getAsync("router")]).then(([e,t,s])=>N.createReactComponent(i,"conversation-return-button",Promise.resolve().then(()=>require("./return-button-cdc53d1f.js")),r=>{r.actions.create("toggle",(n={})=>{var a;(a=t.getComponentRoute())==null||a.then(o=>{o&&s.navigate(o.name,o.params)})})}));var _=(i=>(i.LinkList="link-list",i.Separator="separator",i.ButtonList="button-list",i.ItemList="item-list",i.Text="text",i.HTML="html",i.VideoRequest="video-request",i))(_||{});const Z=(i,e,t)=>i.getAsync("componentResolver").then(async s=>{(await w.getInstance(i)).addSubscription(s.registerComponent(e,z.lazy(()=>t)))});exports.ConversationComponent=Y;exports.ConversationController=B;exports.ConversationEndedBehavior=S;exports.ConversationEntry=H;exports.ConversationMessageListItemType=_;exports.ConversationMessageType=y;exports.ConversationPlatform=w;exports.ConversationReturnButtonComponent=X;exports.registerCustomMessageComponent=Z;
|
|
3
|
+
${t}`:e.length?`${e} ${t}`:t}dispose(){this.subscriptions.forEach(e=>{e()})}}class A{constructor(e,t){d(this,"id");d(this,"name");d(this,"avatar");d(this,"print",(e,t)=>{const s={name:this.name,avatar:this.avatar,id:this.id},r=P(e,t);return this.provider.createEntry(r.key,r.content,y.Agent,s,r.timestamp)});d(this,"typing",()=>this.provider.setTypingState({name:this.name,avatar:this.avatar}));this.provider=e,this.id=t.id||x.uuid(),this.name=t.name,this.avatar=t.avatar}update(e){var r;const{name:t,avatar:s}=e;s===null?this.avatar=void 0:s&&(this.avatar=s),t===null?this.name=void 0:t&&(this.name=t),(r=this.provider.controller)==null||r.events.dispatch("conversation:agent-updated",{agent:this})}}class E{constructor(e,t,s){d(this,"subscriptions",[]);d(this,"options");d(this,"user");this.name=e,this.container=t,this.controller=s,this.user=s==null?void 0:s.user,this.options={silent:!1}}static create(e,t,s){return new E(e,t,s)}createAgent(e={}){var t;if(this.controller){const s=this.controller.getAgentById(e.id),r=s?new A(this,{...s,...e}):new A(this,e);return s||(t=this.controller)==null||t.events.dispatch("conversation:agent-created",{agent:r}),r}}print(e){var t;return(t=this.controller)==null?void 0:t.print(e)}setTypingState(e,t){var s;return(s=this.controller)==null?void 0:s.setTypingState(e,t)}loading(){return this.controller?this.controller.loader():()=>()=>{}}createEntry(e,t,s,r,n){var a;return(a=this.controller)==null?void 0:a.createEntry(e,t,s,r,n)}dispose(){var e;process.env.NODE_ENV!=="production"&&console.log(`conversation-provider: dispose (${this.name})`),(e=this.controller)==null||e.disposeProvider(this),this.controller=null,this.subscriptions.forEach(t=>t())}isRehydrated(){var e;return((e=this.controller)==null?void 0:e.isRehydrated())||Promise.resolve(!1)}getHistory(){var e;return((e=this.controller)==null?void 0:e.getHistory())||[]}complete(){var e;(e=this.controller)==null||e.onCompleteProvider()}setOptions(e={silent:!1}){this.options=e}onUnreadMessage(e){var t;if(this.controller){const s=(t=this.controller)==null?void 0:t.onUnreadMessage(e);return this.subscriptions.push(s),()=>{s()}}}onMounted(e){var t;if(this.controller){const s=(t=this.controller)==null?void 0:t.events.subscribe("conversation:component-mount-changed",e);return this.subscriptions.push(s),e({},this.controller.getComponentMountedState()),()=>{s()}}}}const O=i=>`conversation-${i}`;class K{constructor(){d(this,"_locking",Promise.resolve());d(this,"_locks",0)}isLocked(){return this._locks>0}lock(){this._locks+=1;let e;const t=new Promise(r=>e=()=>{this._locks-=1,r()}),s=this._locking.then(()=>e);return this._locking=this._locking.then(()=>t),s}}class Q{constructor(e,t,s){d(this,"sessionStorageKey");d(this,"locker",new K);d(this,"initialStoredAgents",[]);this.container=e,this.conversation=t,this.enabled=s,this.sessionStorageKey=O(t.id),t.onStarted(async()=>{if(t.messages.length>0)return;const{agents:r}=await this.read(),n=[];r&&r.forEach(o=>{const c=t.providerIndex(o.providerName),h=c>-1?t.registeredProviders[c]:t.createProvider(o.providerName),u=new A(h,{name:o.name,avatar:o.avatar,id:o.id});n.push(u)});const{messages:a}=await this.read();a.forEach(o=>{switch(o.type){case"agent":{const c=n.find(h=>{var u;return h.id===((u=o.sender)==null?void 0:u.id)});c&&c.print(o.content.items||o.content,{key:o.key});return}case"user":{t.user.print(o.content.items||o.content,{key:o.key});return}case"system":default:t.print(o.content.items||o.content)}})}),t.onMessageCreated(async(r,n)=>{this.write(n.message,"messages")}),t.events.subscribe("conversation:agent-created",async(r,n)=>{const a={id:n.agent.id,name:n.agent.name,avatar:n.agent.avatar,providerName:n.agent.provider.name};await this.write(a,"agents")}),t.events.subscribe("conversation:agent-updated",async(r,n)=>{const{agents:a}=await this.read();await this.write([...a.map(o=>o.id===n.agent.id?{...o,name:n.agent.name,avatar:n.agent.avatar}:o)],"agents","update")})}setInitialData(e){this.initialStoredAgents=e.agents}async isRehydrated(){const{messages:e}=await this.read();return e.length>0}getStoredAgent(e){if(this.enabled)return this.initialStoredAgents.find(t=>t.id===e)}async write(e,t,s="add"){if(!this.enabled)return;const r=await this.locker.lock();return p.createStorageWriter(this.container,this.sessionStorageKey,p.StorageCategory.Necessary).then(async n=>{if(s==="add"){const a=await this.read();if(t==="messages"&&a.messages.findIndex(c=>c.key===e.key)>-1){r();return}const o={...a};return t==="messages"?o.messages=[...o.messages,e]:t==="agents"&&(o.agents=[...o.agents,e]),n({...a,...o}).then(()=>{r()})}if(s==="update"&&t==="agents"){const a=await this.read();return n({...a,agents:e}).then(()=>{r()})}return n(e).then(()=>{r()})})}async read(){return p.readStorage(this.container,this.sessionStorageKey).then(e=>e||{messages:[],agents:[]})}}class j{constructor(e){d(this,"print",(e,t)=>{const s=P(e,t);return this.controller.createEntry(s.key,s.content,y.User,void 0,s.timestamp)});this.controller=e}}const k=async(i,e,t)=>{const s=await i.getAsync("conversation"),r=await i.getAsync("components"),n=s.controllers.find(a=>a.conversation.id===e);if(n){const a=[...n.conversation.providers];a.forEach(c=>{n.conversation.setProviderOptions(c,{silent:!0})}),n.conversation.queueProviders(a),n.conversation.setProviders([t]);const o=r.components().ofType("conversation");r.write({key:"setConversationProvider",attributes:{properties:{providers:[t]}},target:o,provider:"localStorage"})}};class H{constructor(e){this.writer=e}update(e){const t=this.getNormalizedSettings(e);this.writer(t)}remove(){this.writer(null)}getNormalizedSettings(e){return typeof e=="string"?{body:e}:e.length>-1&&typeof e=="object"?{items:e}:e}}var y=(i=>(i.User="user",i.Agent="agent",i.System="system",i))(y||{});const P=(i,e)=>{let t,s=(e==null?void 0:e.key)||x.uuid(),r=Date.now();if(Array.isArray(i)&&i.length>-1)typeof i[0]=="string"?t={items:[i]}:t={items:i};else if(typeof i=="string")t={body:i};else if(i=i||{},i.type)t={...i};else{if(t={body:i.body,actions:i.actions,title:i.title},i.key&&(s=i.key),i.timestamp&&(r=i.timestamp),typeof i.form=="function"){const n=L.FormBuilder.create(s);i.form(n);const a=n.get();t.form=a}i.timestamp===null&&(r=null)}return{content:t,key:s,timestamp:r}},W=(i,e)=>{if(!e)return;const t=JSON.stringify(e),s=i.findIndex(r=>t===JSON.stringify(r));if(s>-1)return i.splice(s,1)};class B{constructor(e,t,s){d(this,"formHandlers",{});d(this,"user",new j(this));d(this,"events");d(this,"providers",[]);d(this,"active",!1);d(this,"queuedProviders",[]);d(this,"registeredProviders",[]);d(this,"loaders",0);d(this,"componentMounted",!1);d(this,"store");d(this,"messages",[]);d(this,"typingActors",[]);d(this,"conversationHistory");d(this,"print",e=>{const t=P(e);return this.createEntry(t.key,t.content,"system",void 0,t.timestamp)});this.container=e,this.id=t;const r=e.get("$widget");this.events=r.events.createChild(this),this.store=new Q(e,this,s.rehydrate),this.conversationHistory=new U(this)}setInitialStorage(e){this.store.setInitialData(e)}setProviders(e){const t=[],s=[];this.providers.reduce((r,n)=>(e.indexOf(n)===-1&&r.push(n),r),[]).forEach(r=>{const n=this.providers.indexOf(r);n>-1&&(t.push(r),this.providers.splice(n,1))}),e.forEach(r=>{this.providers.indexOf(r)===-1&&(s.push(r),this.providers.push(r))}),(s.length||t.length)&&this.events.dispatch("conversation:providers-changed",{added:s,removed:t})}createProvider(e){const t=this.providerIndex(e);if(t>-1)return this.registeredProviders[t];const s=E.create(e,this.container,this);return this.registeredProviders.push(s),s}providerIndex(e){return this.registeredProviders.findIndex(t=>t.name===e)}getAgentById(e){if(e)return this.store.getStoredAgent(e)}dispose(){this.conversationHistory.dispose(),this.registeredProviders.forEach(e=>e.dispose()),this.messages=[],this.events.dispatch("conversation:controller-disposed",this),this.active=!1}onDispose(e){return this.events.subscribe("conversation:controller-disposed",e)}onStarted(e){return this.events.subscribe("conversation:started",e)}onMessageCreated(e){return this.events.subscribe("conversation:message-created",e)}isRehydrated(){return this.store.isRehydrated()}disposeProvider(e){const t=this.providerIndex(e.name);t>-1&&this.registeredProviders.splice(t,1),this.events.dispatch("conversation:providers-changed",{removed:[e.name]}),this.registeredProviders.length||this.dispose()}onProvidersChange(e){return this.events.subscribe("conversation:providers-changed",e)}setComponentMountedState(e){this.componentMounted!==e&&(this.componentMounted=e,e&&(this.events.dispatch("conversation:unread-message",!1),this.events.dispatch("conversation:started",!0),this.active=!0),this.events.dispatch("conversation:component-mount-changed",e))}setProviderOptions(e,t){const s=this.providerIndex(e);s>-1&&this.registeredProviders[s].setOptions(t)}changeProvider(e){this.registeredProviders.find(s=>s.name===e)&&k(this.container,this.id,e)}queueProviders(e){this.queuedProviders=e}onCompleteProvider(){const e=this.queuedProviders.pop();e&&k(this.container,this.id,e)}getComponentMountedState(){return this.componentMounted}onUnreadMessage(e){return this.events.subscribe("conversation:unread-message",e)}createEntry(e,t,s,r,n){const a={key:e,content:t,type:s,sender:r||null,timestamp:n||n===null?n:Date.now()};this.messages.push(a),a.type==="agent"&&W(this.typingActors,r);const o=new H(c=>{if(c!==null){const{timestamp:h=void 0,...u}=c;a.content=u,h&&(a.timestamp=h)}else{const h=this.messages.indexOf(a);a.content=null,h>-1&&this.messages.splice(h,1)}this.events.dispatch("conversation:message-updated",{message:a}),this.update()});return this.events.dispatch("conversation:message-created",{message:a}),this.update(),this.componentMounted||this.events.dispatch("conversation:unread-message",!0),o}update(){this.events.dispatch("conversation:updated",{messages:this.messages,loading:this.loaders>0,typingActors:this.typingActors})}getMessageStream(){return{messages:this.messages,loading:this.loaders>0,typingActors:this.typingActors}}setTypingState(e,t){return this.typingActors.indexOf(e)===-1&&(this.typingActors.push(e),this.update()),()=>{W(this.typingActors,e),this.update()}}loader(){this.loaders=this.loaders+1;let e=!1;return this.loaders===1&&this.update(),()=>{e||(e=!0,this.loaders=this.loaders-1,this.loaders===0&&this.update())}}submitForm(e,t){this.formHandlers[e]={...this.formHandlers[e],submit:t}}validateForm(e,t){this.formHandlers[e]={...this.formHandlers[e],validate:t}}getHistory(){return this.conversationHistory.getConversationLogs()}}const F=(i,e)=>{const t=i.split("_contact");return e.widgets.get(t[0])},I=i=>{const e=i.get("$widget"),{name:t,implementation:s}=i.get("$widget"),r=t.indexOf("_contact")>-1?F(t,s):e,{data:n}=i.get("$settings"),{trigger:a}=r.container.get("$settings"),o=`${t.replace("_contact-method","").replace("_contact","")}_contact-method`,c=s.widgets.get(o);return c&&!a?{chatWidget:c,mainWidget:r,data:n}:{mainWidget:r,data:n}},G=i=>{const{chatWidget:e}=I(i);return!!e},R=(i,e,t)=>{const{mainWidget:s,data:r,chatWidget:n}=I(i);return n?n.state==="activated"?n.invoke("open").then(()=>{n.container.getAsync("conversation").then(a=>{a.navigateToConversationIfActive(e.id).then(()=>M.closeAllModals(i))})}):n.activate().then(()=>{const{trigger:a}=n.container.get("$settings");return a.action="hide",n.invoke("setSettings",()=>({data:r,trigger:a,activate:!0})).then(()=>n.container.getAsync("components").then(o=>{const c=o.components().ofType("contact-method");o.write({key:"setContactMethodId",attributes:{properties:{id:e.id,guideId:e.guideId}},target:c,provider:"localStorage"});const h=o.components().ofType("conversation");o.write({key:"setConversationProvider",attributes:{properties:{providers:[e.clientName]}},target:h,provider:"localStorage"})}))}).then(()=>n.invoke("attach",{key:"contact-method",triggerDOMElement:t,withRenderState:"open"})).then(()=>(p.createStorageWriter(n.container,"activeStickyWidget",p.StorageCategory.Necessary,{medium:p.StorageMedium.Local,scope:p.StorageScope.Implementation}).then(a=>a(n.name)),n.container.getAsync("conversation").then(a=>{a.setConversationEndedBehavior(S.Deactivate)}).then(()=>M.closeAllModals(i)).then(()=>!1))):(s.container.getAsync("conversation").then(a=>a.navigateToConversationIfActive(e.id).then(()=>a.setConversationEndedBehavior(S.Navigate))),!n)},J=(i,e,t="conversation")=>{const{mainWidget:s,chatWidget:r}=I(i);return r?r.container.getAsync("router").then(n=>{n.navigate(t,{id:e.id})}):s.container.getAsync("conversation").then(n=>{var a;(a=n.setConversationEndedBehavior(S.Navigate))==null||a.then(()=>{s.container.getAsync("router").then(o=>{s.container.getAsync("components").then(c=>{const h=c.components().ofType("conversation");c.write({key:"setConversationProvider",attributes:{properties:{providers:[e.clientName]}},target:h,provider:"localStorage"})}).then(()=>{o.navigate(t,{id:e.id})})})})})},b="conversations";var S=(i=>(i.Deactivate="deactivate",i.Navigate="navigate",i.None="none",i))(S||{});class w{constructor(e,t){d(this,"events");d(this,"controllers",[]);d(this,"providers",[]);d(this,"disposeProviders",{});d(this,"subscriptions",[]);d(this,"storageWriter",null);d(this,"router",null);d(this,"buttonQuery",null);d(this,"sessionInfo",null);this.container=e,this.components=t;const s=e.get("$widget");this.events=s.events.createChild(this)}initialize(){p.createStorageWriter(this.container,b,p.StorageCategory.Necessary,{medium:p.StorageMedium.Local}).then(e=>this.storageWriter=e),p.readStorage(this.container,b,p.StorageMedium.Local).then(e=>{this.buttonQuery=this.components.components().ofType("conversation-return-button"),e&&(this.sessionInfo=e,e.id&&e.route&&this.writeToComponents({active:!0,alert:{show:!1}}))}),this.container.getAsync("router").then(e=>this.router=e),this.events.subscribe("conversation:ended",(e,t)=>{var s,r,n;switch((s=this.sessionInfo)==null?void 0:s.conversationEndedBehavior){case"deactivate":this.container.get("$widget").deactivate();break;case"navigate":const o=(r=this.router)==null?void 0:r.getInitialRoute();o&&((n=this.router)==null||n.navigate(o.name));break}this.writeToComponents({active:!1}),this.sessionInfo=null,this.storageWriter&&this.storageWriter()})}addSubscription(e){this.subscriptions.push(e)}static getInstance(e,t="conversation"){return x.lock(e)(()=>e.getAsync(t).then(s=>{let r=s;return r||D.ComponentPlatform.getInstance(e).then(n=>(r=new w(e,n),r.initialize(),e.registerAsync(t,()=>r),r))}))}navigateToConversationIfActive(e){return p.readStorage(this.container,b,p.StorageMedium.Local).then(t=>{var s;if(t&&t.id===e&&t.route){const{name:r,params:n}=t.route;(s=this.router)==null||s.navigate(r,n)}})}setConversationEndedBehavior(e){return p.readStorage(this.container,b,p.StorageMedium.Local).then(t=>{let s=t;return s?s.conversationEndedBehavior=e:s={conversationEndedBehavior:e},this.sessionInfo=s,this.storageWriter&&this.storageWriter(this.sessionInfo)||Promise.resolve()})}async createController(e,t){const s=O(e),{agents:r}=await p.readStorage(this.container,s)||{agents:[]},n=this.controllers.findIndex(o=>o.conversation.id===e);let a;return n>-1?a=this.controllers[n].conversation:a=new B(this.container,e,t),a.setInitialStorage({agents:r||[]}),a}registerProvider(e,t){const s={name:e,handler:t};this.providers.push(s),this.controllers.filter(r=>r.conversation.providers.indexOf(e)>-1).forEach(r=>{this.invokeHandler(s,r)})}registerController(e,t){const s=this.controllers.findIndex(n=>n.conversation.id===e.id);let r;if(s<0){r={conversation:e,component:t},this.controllers.push(r);const n=a=>{a&&this.providers.filter(o=>a.indexOf(o.name)>-1).forEach(o=>{this.invokeHandler(o,r)})};return this.subscriptions.push(e.onDispose((a,o)=>{const c=this.controllers.findIndex(h=>h.conversation===o);c>-1&&this.controllers.splice(c,1),this.components.components().ofType("conversation-return-button").select().writeProperties({active:!1}),this.events.dispatch("conversation:ended",{},{bubbles:!0})})),this.subscriptions.push(e.onProvidersChange((a,o)=>{const{added:c,removed:h=[]}=o;h.forEach(u=>{(this.disposeProviders[u]||[]).forEach(l=>{l()})}),n(c)})),this.subscriptions.push(e.onStarted((a,o)=>{var h,u;const c={id:e.id,route:(h=this.router)==null?void 0:h.getRouteData(),conversationEndedBehavior:(u=this.sessionInfo)==null?void 0:u.conversationEndedBehavior};this.sessionInfo=c,this.storageWriter&&this.storageWriter(c),this.writeToComponents({active:o})})),this.subscriptions.push(e.onUnreadMessage((a,o)=>{this.events.dispatch("conversation:unread-message",o),this.writeToComponents({alert:{show:o}})})),n(e.providers),!0}return r=this.controllers[s],!1}writeToComponents(e,t="conversationReturnButtonState"){this.buttonQuery&&this.components.write({key:"conversationReturnButtonState",attributes:{properties:e},target:this.buttonQuery,provider:"localStorage"})}invokeHandler(e,t){const s=e.handler(t.conversation.createProvider(e.name),t.component);s&&(this.disposeProviders[e.name]||(this.disposeProviders[e.name]=[]),this.disposeProviders[e.name].push(s))}getComponentRoute(){return p.readStorage(this.container,b,p.StorageMedium.Local).then(e=>e==null?void 0:e.route)}dispose(){Object.keys(this.disposeProviders).forEach(e=>{this.disposeProviders[e].forEach(t=>{t()})}),this.subscriptions.forEach(e=>{e()}),this.controllers=[],this.providers=[]}static async handleContactMethodClick(e,t,s,r){if(G(t)){e.preventDefault();let n=document.getElementById("humany-dynamic-anchor");n||(n=document.createElement("a"),n.setAttribute("href","#"),n.id="humany-dynamic-anchor",document.body.appendChild(n)),R(t,s,n)}R(t,s)}static async handleContactMethodSubmit(e,t){var s,r;return(r=(s=t==null?void 0:t.body.form.meta)==null?void 0:s.conversation)!=null&&r.id?k(e,t.body.form.meta.conversation.id,t.clientName):J(e,t)}}const V=(i,e)=>i.reduce((t,s,r)=>{var a,o;const n={...s,content:[{...s.content,key:s.key}]};if(t.length>0&&s.type!==y.System){const c=t[t.length-1];if((!e&&e!==0||Math.abs(c.timestamp-s.timestamp)<e)&&((a=c.sender)==null?void 0:a.name)===((o=s.sender)==null?void 0:o.name)&&c.type===s.type)return c.timestamp=s.timestamp,c.content.push({...s.content,key:s.key}),t}return t.push(n),t},[]),Y=i=>Promise.all([w.getInstance(i),i.getAsync("router")]).then(([e,t])=>N.createReactComponent(i,"conversation",Promise.resolve().then(()=>require("./conversation-cba1688c.js")),async s=>{const{rehydrate:r=!1}=s.properties(),a=t.getRouteData().params.id||s.node.name||"component",o=await e.createController(a,{rehydrate:r}),c=e.registerController(o,s),h=3*60*1e3,u=v=>{const{providers:g=[]}=v;if(g){const f=Array.isArray(g)?g:[g];return o.setProviders(f),f}};u(s.properties(u)),o.setComponentMountedState(!0);const l=v=>{const{loading:g,typingActors:f,messages:C}=v;s.writeProperties({loading:g,typingActors:f,messages:V(C,h)})};l(o.getMessageStream()),c&&(s.writeProperties({conversationControllerId:o.id}),s.actions.create("user-submit",(v,g)=>{if(g){const{preventDefault:f,validationPromise:C}=g;if(f){C&&C().then(T=>{T&&o.user.print(T)});return}}o.user.print(v.text)}),s.actions.create("user-typing",(v,g)=>{}),s.actions.create("form",(v,g)=>{}),s.actions.create("action",(v,g)=>{}),s.actions.create("overlay-mounted",(v,g)=>{}),s.actions.create("show-overlay",(v,g)=>{s.writeProperties({overlay:{conversation:!1,secondary:!1}})}),s.actions.create("hide-overlay",(v,g)=>{s.writeProperties({overlay:null})}),s.actions.create("show-overlay-conversation",(v,g)=>{s.writeProperties({overlay:{conversation:!0,secondary:!1}})}),s.actions.create("hide-overlay-conversation",(v,g)=>{s.writeProperties({overlay:{conversation:!1,secondary:!1}})}));const m=o.events.subscribe("conversation:updated",(v,g)=>{l(g)});return()=>{o.setComponentMountedState(!1),m(),o.active||l({messages:[],typingActors:[],loading:!1})}},{reuseController:!0})),X=i=>Promise.all([D.ComponentPlatform.getInstance(i),w.getInstance(i),i.getAsync("router")]).then(([e,t,s])=>N.createReactComponent(i,"conversation-return-button",Promise.resolve().then(()=>require("./return-button-cdc53d1f.js")),r=>{r.actions.create("toggle",(n={})=>{var a;(a=t.getComponentRoute())==null||a.then(o=>{o&&s.navigate(o.name,o.params)})})}));var _=(i=>(i.LinkList="link-list",i.Separator="separator",i.ButtonList="button-list",i.ItemList="item-list",i.Text="text",i.HTML="html",i.VideoRequest="video-request",i))(_||{});const Z=(i,e,t)=>i.getAsync("componentResolver").then(async s=>{(await w.getInstance(i)).addSubscription(s.registerComponent(e,z.lazy(()=>t)))});exports.ConversationComponent=Y;exports.ConversationController=B;exports.ConversationEndedBehavior=S;exports.ConversationEntry=H;exports.ConversationMessageListItemType=_;exports.ConversationMessageType=y;exports.ConversationPlatform=w;exports.ConversationReturnButtonComponent=X;exports.registerCustomMessageComponent=Z;
|
package/index.mjs
CHANGED
|
@@ -900,7 +900,7 @@ const ee = (n, e) => n.reduce((t, s, r) => {
|
|
|
900
900
|
]).then(([e, t]) => _(
|
|
901
901
|
n,
|
|
902
902
|
"conversation",
|
|
903
|
-
import("./conversation-
|
|
903
|
+
import("./conversation-b5103766.mjs"),
|
|
904
904
|
async (s) => {
|
|
905
905
|
const { rehydrate: r = !1 } = s.properties(), a = t.getRouteData().params.id || s.node.name || "component", o = await e.createController(a, { rehydrate: r }), c = e.registerController(o, s), h = 3 * 60 * 1e3, u = (g) => {
|
|
906
906
|
const { providers: p = [] } = g;
|