@telia-ace/widget-conversation 1.3.0-rc.7 → 1.3.0-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,6 +1,6 @@
|
|
|
1
1
|
import { jsx as n, jsxs as u, Fragment as N } from "react/jsx-runtime";
|
|
2
2
|
import i from "@emotion/styled";
|
|
3
|
-
import { Input as se, borderTabStyle as f, Button as I, SymbolBadge as k, useIsTabbing as ae, useDispatch as X, useProperties as
|
|
3
|
+
import { Input as se, borderTabStyle as f, Button as I, SymbolBadge as k, useIsTabbing as ae, useDispatch as X, useProperties as S, useScroll as ie, useContainer as T, Typography as G, invertedHoverButton as ve, Html as J, List as le, buttonCss as K, ItemList as E, itemList as j, Link as xe, useComponent as ke, genericHtml as we, headingElement as Q, usePrevious as Se, list as Ce, WidgetOverlayOutlet as ce, ConversationContext as ze } from "@telia-ace/widget-ui";
|
|
4
4
|
import { appendClassNames as A, htmlParentContains as Le } from "@telia-ace/widget-utilities";
|
|
5
5
|
import { css as b, keyframes as Ne } from "@emotion/react";
|
|
6
6
|
import Me, { useState as W, useEffect as Z, forwardRef as ee, useContext as Ie, Suspense as Ae, useRef as de, useMemo as He, useCallback as me } from "react";
|
|
@@ -17,7 +17,7 @@ const Oe = ({ className: t }) => {
|
|
|
17
17
|
sendButtonLabel: h = "Send message",
|
|
18
18
|
inputMultiline: v = !0,
|
|
19
19
|
secondaryAction: $
|
|
20
|
-
} =
|
|
20
|
+
} = S(), [z, p] = ie(!0), O = T();
|
|
21
21
|
Z(() => {
|
|
22
22
|
if (p.current) {
|
|
23
23
|
const { lineHeight: g, maxHeight: L } = getComputedStyle(p.current);
|
|
@@ -390,7 +390,7 @@ const Oe = ({ className: t }) => {
|
|
|
390
390
|
&:last-child {
|
|
391
391
|
margin-bottom: 0;
|
|
392
392
|
}
|
|
393
|
-
`,
|
|
393
|
+
`, C = (t) => {
|
|
394
394
|
var e, o;
|
|
395
395
|
return b`
|
|
396
396
|
margin: ${(e = t.theme.sizes) == null ? void 0 : e.medium} 0;
|
|
@@ -509,7 +509,7 @@ const Oe = ({ className: t }) => {
|
|
|
509
509
|
sender: o,
|
|
510
510
|
timestamp: s
|
|
511
511
|
}) => {
|
|
512
|
-
const { avatar: a, name: r } = o, { avatarSize: m } =
|
|
512
|
+
const { avatar: a, name: r } = o, { avatarSize: m } = S();
|
|
513
513
|
return /* @__PURE__ */ u(
|
|
514
514
|
Je,
|
|
515
515
|
{
|
|
@@ -593,7 +593,7 @@ const Oe = ({ className: t }) => {
|
|
|
593
593
|
margin: 0;
|
|
594
594
|
}
|
|
595
595
|
`, tt = ({ className: t, children: e, timestamp: o }) => {
|
|
596
|
-
const { userLabel: s = "" } =
|
|
596
|
+
const { userLabel: s = "" } = S();
|
|
597
597
|
return /* @__PURE__ */ u(
|
|
598
598
|
nt,
|
|
599
599
|
{
|
|
@@ -637,9 +637,6 @@ const Oe = ({ className: t }) => {
|
|
|
637
637
|
return /* @__PURE__ */ n("li", { children: m ? /* @__PURE__ */ u(
|
|
638
638
|
st,
|
|
639
639
|
{
|
|
640
|
-
onClick: () => {
|
|
641
|
-
o("action", r), a.dispatch("tracking:button-list-item-clicked", r);
|
|
642
|
-
},
|
|
643
640
|
href: r.data.href,
|
|
644
641
|
target: r.data.target,
|
|
645
642
|
"aria-label": r.label,
|
|
@@ -679,7 +676,7 @@ const Oe = ({ className: t }) => {
|
|
|
679
676
|
margin: 0;
|
|
680
677
|
}
|
|
681
678
|
}
|
|
682
|
-
${
|
|
679
|
+
${C}
|
|
683
680
|
`, st = i(xe)`
|
|
684
681
|
${K};
|
|
685
682
|
|
|
@@ -743,7 +740,7 @@ const Oe = ({ className: t }) => {
|
|
|
743
740
|
${we}
|
|
744
741
|
color: inherit;
|
|
745
742
|
white-space: normal;
|
|
746
|
-
${
|
|
743
|
+
${C}
|
|
747
744
|
a {
|
|
748
745
|
color: ${(t) => t.theme.colors.link};
|
|
749
746
|
&:focus-visible {
|
|
@@ -793,7 +790,7 @@ const Oe = ({ className: t }) => {
|
|
|
793
790
|
${j}
|
|
794
791
|
|
|
795
792
|
> .humany-paragraph {
|
|
796
|
-
${
|
|
793
|
+
${C}
|
|
797
794
|
margin-bottom: 0;
|
|
798
795
|
|
|
799
796
|
h1 {
|
|
@@ -833,7 +830,7 @@ const Oe = ({ className: t }) => {
|
|
|
833
830
|
var e;
|
|
834
831
|
return (e = t.theme.sizes) == null ? void 0 : e.medium;
|
|
835
832
|
}};
|
|
836
|
-
${
|
|
833
|
+
${C}
|
|
837
834
|
|
|
838
835
|
.item-icon {
|
|
839
836
|
}
|
|
@@ -877,7 +874,7 @@ const Oe = ({ className: t }) => {
|
|
|
877
874
|
}
|
|
878
875
|
}
|
|
879
876
|
`, ht = ({ header: t, actions: e, dispatch: o }) => {
|
|
880
|
-
const s =
|
|
877
|
+
const s = Se(e), a = de(), r = ae(), m = T(), { events: c } = m.get("$widget");
|
|
881
878
|
return Z(() => {
|
|
882
879
|
if (s && Array.isArray(e) && Array.isArray(s) && s.length < e.length && a.current) {
|
|
883
880
|
const d = a.current.querySelectorAll(
|
|
@@ -945,7 +942,7 @@ const Oe = ({ className: t }) => {
|
|
|
945
942
|
);
|
|
946
943
|
}, gt = i(E)`
|
|
947
944
|
${j}
|
|
948
|
-
${
|
|
945
|
+
${C}
|
|
949
946
|
|
|
950
947
|
${(t) => Q(t)(
|
|
951
948
|
"h1",
|
|
@@ -1004,7 +1001,7 @@ const Oe = ({ className: t }) => {
|
|
|
1004
1001
|
${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
|
|
1005
1002
|
width: 100%;
|
|
1006
1003
|
`, bt = ({ text: t }) => /* @__PURE__ */ n($t, { className: "humany-conversation-text", variant: "span", children: t }), $t = i(G)`
|
|
1007
|
-
${
|
|
1004
|
+
${C}
|
|
1008
1005
|
`, vt = ({
|
|
1009
1006
|
header: t = "Video call",
|
|
1010
1007
|
acceptLabel: e = "Accept",
|
|
@@ -1065,7 +1062,7 @@ const Oe = ({ className: t }) => {
|
|
|
1065
1062
|
margin: 0;
|
|
1066
1063
|
}
|
|
1067
1064
|
}
|
|
1068
|
-
${(t) =>
|
|
1065
|
+
${(t) => C(t)}
|
|
1069
1066
|
`, kt = i(I)`
|
|
1070
1067
|
${K};
|
|
1071
1068
|
|
|
@@ -1116,7 +1113,7 @@ const Oe = ({ className: t }) => {
|
|
|
1116
1113
|
const m = r == null ? void 0 : r.content;
|
|
1117
1114
|
return !!((c = m == null ? void 0 : m.tags) != null && c.includes("category"));
|
|
1118
1115
|
}).length && o.push("humany-category-list"), /* @__PURE__ */ n(
|
|
1119
|
-
|
|
1116
|
+
St,
|
|
1120
1117
|
{
|
|
1121
1118
|
role: "none",
|
|
1122
1119
|
className: A(
|
|
@@ -1147,13 +1144,13 @@ const Oe = ({ className: t }) => {
|
|
|
1147
1144
|
}
|
|
1148
1145
|
}
|
|
1149
1146
|
);
|
|
1150
|
-
},
|
|
1151
|
-
${
|
|
1147
|
+
}, St = i(le)`
|
|
1148
|
+
${Ce}
|
|
1152
1149
|
|
|
1153
1150
|
> li {
|
|
1154
1151
|
margin: 0;
|
|
1155
1152
|
}
|
|
1156
|
-
`,
|
|
1153
|
+
`, Ct = ee(
|
|
1157
1154
|
({ className: t, timestamp: e, sender: o, type: s, content: a }, r) => {
|
|
1158
1155
|
const m = me(
|
|
1159
1156
|
(l) => {
|
|
@@ -1161,7 +1158,7 @@ const Oe = ({ className: t }) => {
|
|
|
1161
1158
|
return a.length > 1 && (h = l === 0 ? "first" : l + 1 === a.length ? "last" : "middle"), h;
|
|
1162
1159
|
},
|
|
1163
1160
|
[a]
|
|
1164
|
-
), { userLabel: c = "" } =
|
|
1161
|
+
), { userLabel: c = "" } = S(), d = () => /* @__PURE__ */ n(N, { children: a.map((l) => {
|
|
1165
1162
|
const { key: h, body: v, title: $, form: z, actions: p } = l, O = !!v && !$ && !z && !p;
|
|
1166
1163
|
return /* @__PURE__ */ n(
|
|
1167
1164
|
Qe,
|
|
@@ -1299,7 +1296,7 @@ const Oe = ({ className: t }) => {
|
|
|
1299
1296
|
left: -10000000px;
|
|
1300
1297
|
top: auto;
|
|
1301
1298
|
`, zt = () => {
|
|
1302
|
-
const { skipToLatestMessageLabel: t = "Skip to latest message" } =
|
|
1299
|
+
const { skipToLatestMessageLabel: t = "Skip to latest message" } = S(), e = T(), o = () => {
|
|
1303
1300
|
const s = e.get("widgetDOMElement");
|
|
1304
1301
|
if (s) {
|
|
1305
1302
|
const a = s.querySelectorAll(
|
|
@@ -1351,7 +1348,7 @@ const Oe = ({ className: t }) => {
|
|
|
1351
1348
|
messages: s,
|
|
1352
1349
|
loading: a,
|
|
1353
1350
|
typingActors: r = []
|
|
1354
|
-
} =
|
|
1351
|
+
} = S(), m = () => r && r.length ? r.map((c, d) => /* @__PURE__ */ n(
|
|
1355
1352
|
V,
|
|
1356
1353
|
{
|
|
1357
1354
|
id: `typing_${c.name}`,
|
|
@@ -1374,7 +1371,7 @@ const Oe = ({ className: t }) => {
|
|
|
1374
1371
|
{
|
|
1375
1372
|
className: "humany-conversation-entry",
|
|
1376
1373
|
tabIndex: -1,
|
|
1377
|
-
children: /* @__PURE__ */ n(
|
|
1374
|
+
children: /* @__PURE__ */ n(Ct, { ...c, ref: t })
|
|
1378
1375
|
},
|
|
1379
1376
|
`${y}_${l == null ? void 0 : l.name}_${x}_${h[0].key}`
|
|
1380
1377
|
);
|
|
@@ -1566,7 +1563,7 @@ const Oe = ({ className: t }) => {
|
|
|
1566
1563
|
overlayConversationHeader: s,
|
|
1567
1564
|
overlayConversationCloseLabel: a,
|
|
1568
1565
|
conversationControllerId: r
|
|
1569
|
-
} =
|
|
1566
|
+
} = S(), m = X(), d = T().get("$settings");
|
|
1570
1567
|
return /* @__PURE__ */ n(
|
|
1571
1568
|
ze.Provider,
|
|
1572
1569
|
{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=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"),l=require("@emotion/styled"),n=require("@telia-ace/widget-ui"),S=require("@telia-ace/widget-utilities"),f=require("@emotion/react"),y=require("react"),J=require("@telia-ace/widget-forms"),j=require("./index.js");require("@telia-ace/widget-core");require("@telia-ace/widget-services");require("@telia-ace/widget-plugins");const Q=({className:t})=>{const[e,o]=y.useState(""),[a,i]=y.useState(0),[r,u]=y.useState(0),d=n.useIsTabbing(),m=n.useDispatch(),{inputPlaceholder:p="Type your message",inputHidden:$=!1,inputDisabled:c=!1,sendButtonLabel:h="Send message",inputMultiline:v=!0,secondaryAction:x}=n.useProperties(),[w,b]=n.useScroll(!0),T=n.useContainer();y.useEffect(()=>{if(b.current){const{lineHeight:g,maxHeight:C}=getComputedStyle(b.current);if(g&&g.indexOf("px")>-1){const z=g.split("px"),X=parseInt(z[0],10);i(X);const G=C.split("px");u(parseInt(G[0],10))}}},[b.current]);const I=g=>{!g.shiftKey||!v?(g.preventDefault(),e&&e.length>0&&(m("user-submit",{text:e}),o(""),B(""))):e.length<1&&g.preventDefault()},_=g=>{if(!x)return;g.preventDefault(),m("action",{actionKey:x.action,...x});const{events:C}=T.get("$widget");C.dispatch("tracking:secondary-clicked",{})},Y=g=>{if(v&&b.current){const C=b.current.scrollHeight;if(C>a){b.current.style.height="auto";let z=C;g.length<1&&(z=a),b.current.style.height=`${z}px`,z>=r?b.current.style.overflowY="scroll":b.current.style.overflowY="hidden"}}},B=g=>{Y(g),o(g),g&&g.length>0&&m("user-typing",{textLength:g.length})};return $?null:s.jsxs(se,{grow:v,className:S.appendClassNames("humany-conversation-input",t),scrollableCss:w,isTabbing:d,children:[x&&s.jsx(te,{className:"humany-secondary-button",disabled:c,onClick:_,title:x.label,"aria-label":x.label,children:s.jsx(n.SymbolBadge,{size:24,symbol:{type:"Svg",content:x.icon||"browse"}})}),v?s.jsx(Z,{value:e,onChange:B,onEnter:I,disabled:c,"aria-label":p,placeholder:p,type:"textarea",rows:1,ref:b}):s.jsx(ee,{value:e,onChange:B,onEnter:I,disabled:c,"aria-label":p,placeholder:p}),s.jsx(F,{className:"humany-send-button",disabled:!1,onClick:I,title:h,"aria-label":h,children:s.jsx(ne,{size:22,symbol:{type:"Svg",content:"send"},hasContent:!!e&&!!e.length})})]})},Z=l(n.Input)`
|
|
2
2
|
resize: none;
|
|
3
3
|
flex: 1;
|
|
4
4
|
flex-shrink: 1;
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
&:last-child {
|
|
197
197
|
margin-bottom: 0;
|
|
198
198
|
}
|
|
199
|
-
`,
|
|
199
|
+
`,k=t=>{var e,o;return f.css`
|
|
200
200
|
margin: ${(e=t.theme.sizes)==null?void 0:e.medium} 0;
|
|
201
201
|
padding: 0 ${(o=t.theme.sizes)==null?void 0:o.medium};
|
|
202
202
|
`},de=l(J.FormComponent)`
|
|
@@ -213,7 +213,7 @@
|
|
|
213
213
|
margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
214
214
|
}
|
|
215
215
|
}
|
|
216
|
-
`,
|
|
216
|
+
`,me=l(n.Html)`
|
|
217
217
|
white-space: pre-wrap;
|
|
218
218
|
a {
|
|
219
219
|
color: ${t=>t.theme.colors.link};
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
${t=>{var e;return((e=t.theme.accessibility)==null?void 0:e.isTabbing)&&n.borderTabStyle}};
|
|
222
222
|
}
|
|
223
223
|
}
|
|
224
|
-
`,
|
|
224
|
+
`,ue=l(n.List)`
|
|
225
225
|
padding: 0;
|
|
226
226
|
list-style: none;
|
|
227
227
|
margin: 0 -${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
line-height: 1.5em;
|
|
248
248
|
grid-area: info;
|
|
249
249
|
color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
|
|
250
|
-
`,q=(t,e)=>new Date(t).toLocaleTimeString(e||[],{hour:"numeric",minute:"2-digit"}),L=({className:t,name:e,timestamp:o,ariaHidden:a=!1})=>{const i=y.useContext(W);if(!e&&!o)return null;let r="";return e?o?r=`${e}: ${q(o,i)}`:r=e:o&&(r=q(o,i)),s.jsx(ge,{"aria-hidden":a,children:r})},U=({className:t,children:e,sender:o,timestamp:a})=>{const{avatar:i,name:r}=o,{avatarSize:
|
|
250
|
+
`,q=(t,e)=>new Date(t).toLocaleTimeString(e||[],{hour:"numeric",minute:"2-digit"}),L=({className:t,name:e,timestamp:o,ariaHidden:a=!1})=>{const i=y.useContext(W);if(!e&&!o)return null;let r="";return e?o?r=`${e}: ${q(o,i)}`:r=e:o&&(r=q(o,i)),s.jsx(ge,{"aria-hidden":a,children:r})},U=({className:t,children:e,sender:o,timestamp:a})=>{const{avatar:i,name:r}=o,{avatarSize:u}=n.useProperties();return s.jsxs(ye,{hasAvatar:!!i,className:S.appendClassNames(t,"humany-conversation-agent-message"),children:[i&&s.jsx(re,{className:"humany-agent-avatar",avatarSize:u,children:typeof i=="string"?s.jsx("img",{src:i}):s.jsx(n.SymbolBadge,{symbol:i})}),e,s.jsx(L,{name:r,timestamp:a,ariaHidden:!0})]})},ye=l.div`
|
|
251
251
|
display: grid;
|
|
252
252
|
margin-right: 10%;
|
|
253
253
|
width: 90%;
|
|
@@ -264,7 +264,7 @@
|
|
|
264
264
|
'content'
|
|
265
265
|
'info';
|
|
266
266
|
`};
|
|
267
|
-
`,pe=y.forwardRef(({className:t,children:e,timestamp:o,discrete:a,fullWidth:i},r)=>s.jsx(fe,{ref:r,className:
|
|
267
|
+
`,pe=y.forwardRef(({className:t,children:e,timestamp:o,discrete:a,fullWidth:i},r)=>s.jsx(fe,{ref:r,className:S.appendClassNames(t,"humany-conversation-system-message"),fullWidth:i,children:a?s.jsxs(be,{className:"humany-conversation-discrete-message",children:[e,s.jsx(L,{timestamp:o})]}):s.jsxs(s.Fragment,{children:[e,s.jsx(L,{timestamp:o})]})})),fe=l.div`
|
|
268
268
|
${t=>t.fullWidth&&"width: 100%"};
|
|
269
269
|
padding: 0 ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.large}};
|
|
270
270
|
overflow: auto;
|
|
@@ -276,13 +276,13 @@
|
|
|
276
276
|
> p {
|
|
277
277
|
margin: 0;
|
|
278
278
|
}
|
|
279
|
-
`,xe=({className:t,children:e,timestamp:o})=>{const{userLabel:a=""}=n.useProperties();return s.jsxs(ve,{className:
|
|
279
|
+
`,xe=({className:t,children:e,timestamp:o})=>{const{userLabel:a=""}=n.useProperties();return s.jsxs(ve,{className:S.appendClassNames(t,"humany-conversation-user-message"),children:[e,s.jsx(L,{name:a,timestamp:o,ariaHidden:!0})]})},ve=l.div`
|
|
280
280
|
margin-left: 10%;
|
|
281
281
|
width: 90%;
|
|
282
282
|
display: flex;
|
|
283
283
|
flex-direction: column;
|
|
284
284
|
align-items: flex-end;
|
|
285
|
-
`,K=t=>Array.isArray(t)?t:Object.keys(t).map(e=>({label:t[e],actionKey:e})),$e=({header:t,actions:e,dispatch:o})=>{const a=n.useContainer(),{events:i}=a.get("$widget");return s.jsx(je,{className:"humany-conversation-button-list",header:t,items:K(e),renderItem:r=>{var d;const
|
|
285
|
+
`,K=t=>Array.isArray(t)?t:Object.keys(t).map(e=>({label:t[e],actionKey:e})),$e=({header:t,actions:e,dispatch:o})=>{const a=n.useContainer(),{events:i}=a.get("$widget");return s.jsx(je,{className:"humany-conversation-button-list",header:t,items:K(e),renderItem:r=>{var d;const u=!!((d=r==null?void 0:r.data)!=null&&d.href);return s.jsx("li",{children:u?s.jsxs(Se,{href:r.data.href,target:r.data.target,"aria-label":r.label,title:r.label,children:[s.jsx(n.SymbolBadge,{symbol:r.symbol}),r.label]}):s.jsxs(ke,{onClick:()=>{o("action",r),i.dispatch("tracking:button-list-item-clicked",r)},"aria-label":r.label,title:r.label,children:[s.jsx(n.SymbolBadge,{symbol:r.symbol}),r.label]})},r.actionKey)}})},je=l(n.ItemList)`
|
|
286
286
|
${n.itemList}
|
|
287
287
|
> ul {
|
|
288
288
|
display: flex;
|
|
@@ -292,8 +292,8 @@
|
|
|
292
292
|
margin: 0;
|
|
293
293
|
}
|
|
294
294
|
}
|
|
295
|
-
${
|
|
296
|
-
`,
|
|
295
|
+
${k}
|
|
296
|
+
`,Se=l(n.Link)`
|
|
297
297
|
${n.buttonCss};
|
|
298
298
|
|
|
299
299
|
display: block;
|
|
@@ -312,7 +312,7 @@
|
|
|
312
312
|
svg {
|
|
313
313
|
margin-right: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
|
|
314
314
|
}
|
|
315
|
-
`,
|
|
315
|
+
`,ke=l(n.Button)`
|
|
316
316
|
${n.buttonCss};
|
|
317
317
|
|
|
318
318
|
display: block;
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
${n.genericHtml}
|
|
336
336
|
color: inherit;
|
|
337
337
|
white-space: normal;
|
|
338
|
-
${
|
|
338
|
+
${k}
|
|
339
339
|
a {
|
|
340
340
|
color: ${t=>t.theme.colors.link};
|
|
341
341
|
&:focus-visible {
|
|
@@ -349,7 +349,7 @@
|
|
|
349
349
|
${n.itemList}
|
|
350
350
|
|
|
351
351
|
> .humany-paragraph {
|
|
352
|
-
${
|
|
352
|
+
${k}
|
|
353
353
|
margin-bottom: 0;
|
|
354
354
|
|
|
355
355
|
h1 {
|
|
@@ -380,7 +380,7 @@
|
|
|
380
380
|
`,Ne=l.div`
|
|
381
381
|
display: flex;
|
|
382
382
|
gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
|
|
383
|
-
${
|
|
383
|
+
${k}
|
|
384
384
|
|
|
385
385
|
.item-icon {
|
|
386
386
|
}
|
|
@@ -414,9 +414,9 @@
|
|
|
414
414
|
}
|
|
415
415
|
}
|
|
416
416
|
}
|
|
417
|
-
`,Me=({header:t,actions:e,dispatch:o})=>{const a=n.usePrevious(e),i=y.useRef(),r=n.useIsTabbing(),
|
|
417
|
+
`,Me=({header:t,actions:e,dispatch:o})=>{const a=n.usePrevious(e),i=y.useRef(),r=n.useIsTabbing(),u=n.useContainer(),{events:d}=u.get("$widget");return y.useEffect(()=>{if(a&&Array.isArray(e)&&Array.isArray(a)&&a.length<e.length&&i.current){const m=i.current.querySelectorAll(".humany-conversation-link-list > ul > li"),p=m[a.length];if(m.length===e.length&&a.length){const $=m[a.length-1];if($){const c=$.querySelector(".humany-button");c&&c.focus()}}else p&&new MutationObserver((c,h)=>{c.forEach(v=>{if(v.addedNodes){const x=Array.from(v.addedNodes).find(w=>w.tagName==="BUTTON");x&&S.htmlParentContains(i.current,document.activeElement)&&(r&&x.focus(),h.disconnect())}})}).observe(p,{attributes:!1,characterData:!1,childList:!0,subtree:!0,attributeOldValue:!1,characterDataOldValue:!1})}}),s.jsx(Ie,{ref:i,className:"humany-conversation-link-list",header:t,items:K(e),renderItem:m=>s.jsx("li",{children:s.jsxs(Be,{help:m.actionKey==="help",onClick:()=>{o("action",m),d.dispatch("tracking:link-list-item-clicked",m)},"aria-label":m.label,title:m.label,children:[m.label,m.actionKey==="help"&&s.jsx(n.SymbolBadge,{size:14,symbol:{type:"Svg",content:"caret-down"}})]})},m.actionKey)})},Ie=l(n.ItemList)`
|
|
418
418
|
${n.itemList}
|
|
419
|
-
${
|
|
419
|
+
${k}
|
|
420
420
|
|
|
421
421
|
${t=>n.headingElement(t)("h1",f.css`
|
|
422
422
|
white-space: normal;
|
|
@@ -460,8 +460,8 @@
|
|
|
460
460
|
${t=>t.theme.border&&`border-bottom: ${t.theme.border};`}
|
|
461
461
|
width: 100%;
|
|
462
462
|
`,Oe=({text:t})=>s.jsx(Re,{className:"humany-conversation-text",variant:"span",children:t}),Re=l(n.Typography)`
|
|
463
|
-
${
|
|
464
|
-
`,Ee=({header:t="Video call",acceptLabel:e="Accept",declineLabel:o="Decline",dispatch:a})=>{const i=y.useMemo(()=>[{label:e,actionKey:"accept-video-call",symbol:{type:"Svg",content:"video"}},{label:o,actionKey:"decline-video-call",symbol:{type:"Svg",content:"close"}}],[e,o]);return s.jsx(Ke,{className:"humany-conversation-video-request",header:t,items:i,renderItem:r=>{const
|
|
463
|
+
${k}
|
|
464
|
+
`,Ee=({header:t="Video call",acceptLabel:e="Accept",declineLabel:o="Decline",dispatch:a})=>{const i=y.useMemo(()=>[{label:e,actionKey:"accept-video-call",symbol:{type:"Svg",content:"video"}},{label:o,actionKey:"decline-video-call",symbol:{type:"Svg",content:"close"}}],[e,o]);return s.jsx(Ke,{className:"humany-conversation-video-request",header:t,items:i,renderItem:r=>{const u=r.actionKey==="accept-video-call"?"#70c48e":"#da5c85";return s.jsx("li",{children:s.jsx(De,{onClick:()=>{a("action",r)},"aria-label":r.label,title:r.label,bgColor:u,children:s.jsx(n.SymbolBadge,{symbol:r.symbol,size:25})})},r.actionKey)}})},Ke=l(n.ItemList)`
|
|
465
465
|
${t=>n.itemList(t)}
|
|
466
466
|
> ul {
|
|
467
467
|
display: flex;
|
|
@@ -471,7 +471,7 @@
|
|
|
471
471
|
margin: 0;
|
|
472
472
|
}
|
|
473
473
|
}
|
|
474
|
-
${t=>
|
|
474
|
+
${t=>k(t)}
|
|
475
475
|
`,De=l(n.Button)`
|
|
476
476
|
${n.buttonCss};
|
|
477
477
|
|
|
@@ -506,13 +506,13 @@
|
|
|
506
506
|
stroke: #fff;
|
|
507
507
|
}
|
|
508
508
|
}
|
|
509
|
-
`,M=([t,e])=>({type:t,content:e}),qe=({items:t,dispatch:e})=>{const o=t.map(M).filter(r=>r.type.includes("ace-knowledge")).map(r=>"humany-"+r.type.toString());return!!t.map(M).filter(r=>{const
|
|
509
|
+
`,M=([t,e])=>({type:t,content:e}),qe=({items:t,dispatch:e})=>{const o=t.map(M).filter(r=>r.type.includes("ace-knowledge")).map(r=>"humany-"+r.type.toString());return!!t.map(M).filter(r=>{const u=r==null?void 0:r.content,d=u==null?void 0:u.actions;return!!(d!=null&&d.filter(m=>m.actionKey==="contact").length)}).length&&o.push("humany-secondary-action-list"),!!t.map(M).filter(r=>{var d;const u=r==null?void 0:r.content;return!!((d=u==null?void 0:u.tags)!=null&&d.includes("category"))}).length&&o.push("humany-category-list"),s.jsx(Pe,{role:"none",className:S.appendClassNames("humany-message-list",o.join(" ")),items:t.map(M),renderLi:!0,renderItem:r=>{switch(r.type){case j.ConversationMessageListItemType.Text:return s.jsx(Oe,{text:r.content});case j.ConversationMessageListItemType.HTML:return s.jsx(Ce,{...r.content});case j.ConversationMessageListItemType.Separator:return s.jsx(Ae,{...r.content});case j.ConversationMessageListItemType.ItemList:return s.jsx(ze,{...r.content,dispatch:e});case j.ConversationMessageListItemType.LinkList:return s.jsx(Me,{...r.content,dispatch:e});case j.ConversationMessageListItemType.ButtonList:return s.jsx($e,{...r.content,dispatch:e});case j.ConversationMessageListItemType.VideoRequest:return s.jsx(Ee,{...r.content,dispatch:e});default:return s.jsx(we,{type:r.type,content:r.content})}}})},Pe=l(n.List)`
|
|
510
510
|
${n.list}
|
|
511
511
|
|
|
512
512
|
> li {
|
|
513
513
|
margin: 0;
|
|
514
514
|
}
|
|
515
|
-
`,Fe=y.forwardRef(({className:t,timestamp:e,sender:o,type:a,content:i},r)=>{const
|
|
515
|
+
`,Fe=y.forwardRef(({className:t,timestamp:e,sender:o,type:a,content:i},r)=>{const u=y.useCallback(c=>{let h="first";return i.length>1&&(h=c===0?"first":c+1===i.length?"last":"middle"),h},[i]),{userLabel:d=""}=n.useProperties(),m=()=>s.jsx(s.Fragment,{children:i.map(c=>{const{key:h,body:v,title:x,form:w,actions:b}=c,T=!!v&&!x&&!w&&!b;return s.jsx(pe,{className:t,discrete:T,ref:r,timestamp:e,fullWidth:!!w||!!b,children:T&&v?s.jsx(n.Html,{html:v}):s.jsx(A,{isSystem:!0,content:c})},h)})}),p=()=>s.jsxs(s.Fragment,{children:[s.jsx(P,{className:"humany-sr-only",children:s.jsx(L,{name:o==null?void 0:o.name,timestamp:e})}),s.jsx(U,{sender:o,timestamp:e,className:t,children:s.jsx(O,{className:"humany-message-content-bundle",children:i.map((c,h)=>s.jsx(R,{className:"humany-message-container",left:!0,ref:r,children:s.jsx(A,{content:c,stacked:u(h)})},c.key))})})]}),$=()=>s.jsxs(s.Fragment,{children:[s.jsx(P,{className:"humany-sr-only",children:s.jsx(L,{name:d,timestamp:e})}),s.jsx(xe,{timestamp:e,className:t,children:s.jsx(O,{className:"humany-message-content-bundle",children:i.map((c,h)=>s.jsx(R,{className:"humany-message-container",right:!0,ref:r,children:s.jsx(A,{isUser:!0,content:c,stacked:u(h)})},c.key))})})]});switch(a){case j.ConversationMessageType.System:return m();case j.ConversationMessageType.Agent:return p();case j.ConversationMessageType.User:return $();default:return null}}),A=({content:t,isUser:e,isSystem:o,stacked:a})=>{const i=n.useDispatch(),{title:r,body:u,actions:d,form:m,items:p}=t;return p?s.jsx(E,{className:"humany-message-content",user:!!e,stacked:a,children:s.jsx(qe,{items:p,dispatch:i})}):s.jsxs(E,{className:"humany-message-content",padded:!o,user:!!e,stacked:a,fullWidth:!!m||!!d,children:[r&&s.jsx(N,{children:s.jsx(ie,{variant:"h2",children:r})}),u&&s.jsx(N,{children:s.jsx(me,{html:u})}),m&&s.jsx(N,{children:s.jsx(de,{...m,onChange:(c,h)=>{i("form",{data:h,formKey:m.schema.id,actionKey:c})}})}),d&&s.jsx(N,{children:s.jsx(ue,{items:Object.keys(d).map(c=>({label:d[c],actionKey:c})),renderItem:c=>s.jsx("li",{children:s.jsx(he,{onClick:()=>{i("action",c.actionKey)},children:c.label})},c.actionKey)})})]})},P=l.div`
|
|
516
516
|
position: absolute !important;
|
|
517
517
|
height: 1px;
|
|
518
518
|
width: 1px;
|
|
@@ -535,7 +535,7 @@
|
|
|
535
535
|
transform: translateX(-50%);
|
|
536
536
|
${n.borderTabStyle};
|
|
537
537
|
}
|
|
538
|
-
`,V=()=>{const t=y.useCallback(d=>{d&&setTimeout(()=>{d.scrollIntoView({block:"start",behavior:"smooth"})},250)},[]),[e,o]=n.useScroll(!0),{messages:a,loading:i,typingActors:r=[]}=n.useProperties(),
|
|
538
|
+
`,V=()=>{const t=y.useCallback(d=>{d&&setTimeout(()=>{d.scrollIntoView({block:"start",behavior:"smooth"})},250)},[]),[e,o]=n.useScroll(!0),{messages:a,loading:i,typingActors:r=[]}=n.useProperties(),u=()=>r&&r.length?r.map((d,m)=>s.jsx(H,{id:`typing_${d.name}`,children:s.jsx(U,{timestamp:Date.now(),sender:d,children:s.jsx(D,{boxed:!0,ref:t})})},`typing_${d.name}`)):null;return s.jsxs(s.Fragment,{children:[s.jsxs(Ve,{tabIndex:0,scrollableCss:e,ref:o,children:[a&&a.length?a.map((d,m)=>{const{type:p,timestamp:$,sender:c,content:h}=d;return s.jsx(H,{className:"humany-conversation-entry",tabIndex:-1,children:s.jsx(Fe,{...d,ref:t})},`${p}_${c==null?void 0:c.name}_${$}_${h[0].key}`)}):null,u(),i&&s.jsx(H,{children:s.jsx(D,{ref:t})})]}),s.jsx(Q,{}),s.jsx(We,{})]})},Ve=l.div`
|
|
539
539
|
display: flex;
|
|
540
540
|
flex-direction: column;
|
|
541
541
|
align-items: stretch;
|
|
@@ -611,7 +611,7 @@
|
|
|
611
611
|
svg line {
|
|
612
612
|
stroke: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
|
|
613
613
|
}
|
|
614
|
-
`,Ze=({className:t,...e})=>{const{overlay:o,overlayConversationHeader:a,overlayConversationCloseLabel:i,conversationControllerId:r}=n.useProperties(),
|
|
614
|
+
`,Ze=({className:t,...e})=>{const{overlay:o,overlayConversationHeader:a,overlayConversationCloseLabel:i,conversationControllerId:r}=n.useProperties(),u=n.useDispatch(),m=n.useContainer().get("$settings");return s.jsx(n.ConversationContext.Provider,{value:r?{id:r}:null,children:s.jsxs(W.Provider,{value:m==null?void 0:m.language,children:[s.jsx(et,{"aria-live":"assertive",...e,className:S.appendClassNames(t,"humany-conversation-component"),children:s.jsx(V,{})}),o&&s.jsxs(s.Fragment,{children:[s.jsx(_e,{dispatch:u}),o.conversation&&s.jsx(Ye,{dispatch:u,header:a,buttonLabel:i})]})]})})},et=l.div`
|
|
615
615
|
position: absolute;
|
|
616
616
|
right: 0;
|
|
617
617
|
left: 0;
|
package/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";var _=Object.defineProperty;var q=(o,e,t)=>e in o?_(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var h=(o,e,t)=>(q(o,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"),E=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){h(this,"cache",new Map);h(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=k(s),{key:n,content:a,type:i,sender:c,timestamp:d}=r.content,u=this.parseEntry(a,i,c,d);return u&&t.push(u),t},[])}parseEntry(e,t,s,r){const n=d=>{let u=[],l=[],m;if(Array.isArray(d)){const[g,f]=d;m=f}else m=d;return this.createMessageContent(m).length&&(l=[...l,this.createMessageContent(m)]),u=[...u,...this.createMessageOptions(m)],{messagesAsList:l,options:u}};let a=[],i=[];if(Array.isArray(e.items)){const{items:d}=e;d.forEach(u=>{const l=n(u);a=[...a,...l.options],i=[...i,...l.messagesAsList]})}else{const d=n(e);a=[...a,...d.options],i=[...i,...d.messagesAsList]}return{options:a,message:i.length?i.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:i,html:c,body:d,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)),i&&(l=this.appendText(l,i,t)),n&&(l=this.appendText(l,n,t)),c&&(l=this.appendText(l,c,t)),d&&typeof d=="string"&&(l=this.appendText(l,d,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 P{constructor(e,t){h(this,"id");h(this,"name");h(this,"avatar");h(this,"print",(e,t,s=null)=>{var i,c,d;const r={name:this.name,avatar:this.avatar,id:this.id},n=k(e,t);s=s??n.timestamp;const a=(c=(i=this.provider)==null?void 0:i.controller)==null?void 0:c.container.get("$widget");return(d=a==null?void 0:a.events)==null||d.dispatch("tracking:conversation-message",{sender:"agent"}),this.provider.createEntry(n.key,n.content,y.Agent,r,s)});h(this,"typing",()=>this.provider.setTypingState({name:this.name,avatar:this.avatar}));this.provider=e,this.id=t.id||E.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 A{constructor(e,t,s){h(this,"subscriptions",[]);h(this,"options");h(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 A(e,t,s)}createAgent(e={}){var t;if(this.controller){const s=this.controller.getAgentById(e.id),r=s?new P(this,{...s,...e}):new P(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=o=>`conversation-${o}`;class K{constructor(){h(this,"_locking",Promise.resolve());h(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){h(this,"sessionStorageKey");h(this,"locker",new K);h(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(i=>{const c=t.providerIndex(i.providerName),d=c>-1?t.registeredProviders[c]:t.createProvider(i.providerName),u=new P(d,{name:i.name,avatar:i.avatar,id:i.id});n.push(u)});const{messages:a}=await this.read();a.forEach(i=>{switch(i.type){case"agent":{const c=n.find(d=>{var u;return d.id===((u=i.sender)==null?void 0:u.id)});c&&c.print(i.content.items||i.content,{key:i.key},i.timestamp);return}case"user":{t.user.print(i.content.items||i.content,{key:i.key},i.timestamp);return}case"system":default:t.print(i.content.items||i.content,i.timestamp)}})}),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(i=>i.id===n.agent.id?{...i,name:n.agent.name,avatar:n.agent.avatar}:i)],"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 i={...a};return t==="messages"?i.messages=[...i.messages,e]:t==="agents"&&(i.agents=[...i.agents,e]),n({...a,...i}).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){h(this,"print",(e,t,s=null)=>{var a,i;const r=k(e,t);return s=s??r.timestamp,(i=((a=this.controller)==null?void 0:a.container.get("$widget")).events)==null||i.dispatch("tracking:conversation-message",{sender:"user"}),this.controller.createEntry(r.key,r.content,y.User,void 0,s)});this.controller=e}}const x=async(o,e,t)=>{const s=await o.getAsync("conversation"),r=await o.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 i=r.components().ofType("conversation");r.write({key:"setConversationProvider",attributes:{properties:{providers:[t]}},target:i,provider:"localStorage"})}};class ${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=(o=>(o.User="user",o.Agent="agent",o.System="system",o))(y||{});const k=(o,e)=>{let t,s=(e==null?void 0:e.key)||E.uuid(),r=Date.now();if(Array.isArray(o)&&o.length>-1)typeof o[0]=="string"?t={items:[o]}:t={items:o};else if(typeof o=="string")t={body:o};else if(o=o||{},o.type)t={...o};else{if(t={body:o.body,actions:o.actions,title:o.title},o.key&&(s=o.key),o.timestamp&&(r=o.timestamp),typeof o.form=="function"){const n=L.FormBuilder.create(s);o.form(n);const a=n.get();t.form=a}o.timestamp===null&&(r=null)}return{content:t,key:s,timestamp:r}},W=(o,e)=>{if(!e)return;const t=JSON.stringify(e),s=o.findIndex(r=>t===JSON.stringify(r));if(s>-1)return o.splice(s,1)};class H{constructor(e,t,s){h(this,"formHandlers",{});h(this,"user",new j(this));h(this,"events");h(this,"providers",[]);h(this,"active",!1);h(this,"queuedProviders",[]);h(this,"registeredProviders",[]);h(this,"loaders",0);h(this,"componentMounted",!1);h(this,"store");h(this,"messages",[]);h(this,"typingActors",[]);h(this,"conversationHistory");h(this,"print",(e,t=null)=>{const s=k(e);t=t??s.timestamp;const r=this.container.get("$widget");return r==null||r.events.dispatch("tracking:conversation-message",{sender:"system"}),this.createEntry(s.key,s.content,"system",void 0,t)});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=A.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)&&x(this.container,this.id,e)}queueProviders(e){this.queuedProviders=e}onCompleteProvider(){const e=this.queuedProviders.pop();e&&x(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 i=new $(c=>{if(c!==null){const{timestamp:d=void 0,...u}=c;a.content=u,d&&(a.timestamp=d)}else{const d=this.messages.indexOf(a);a.content=null,d>-1&&this.messages.splice(d,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),i}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=(o,e)=>{const t=o.split("_contact");return e.widgets.get(t[0])},I=o=>{const e=o.get("$widget"),{name:t,implementation:s}=o.get("$widget"),r=t.indexOf("_contact")>-1?F(t,s):e,{data:n}=o.get("$settings"),{trigger:a}=r.container.get("$settings"),i=`${t.replace("_contact-method","").replace("_contact","")}_contact-method`,c=s.widgets.get(i);return c&&!a?{chatWidget:c,mainWidget:r,data:n}:{mainWidget:r,data:n}},G=o=>{const{chatWidget:e}=I(o);return!!e},R=(o,e,t)=>{const{mainWidget:s,data:r,chatWidget:n}=I(o);return n?n.state==="activated"?n.invoke("open").then(()=>{n.container.getAsync("conversation").then(a=>{a.navigateToConversationIfActive(e.id).then(()=>M.closeAllModals(o))})}):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(i=>{const c=i.components().ofType("contact-method");i.write({key:"setContactMethodId",attributes:{properties:{id:e.id,guideId:e.guideId}},target:c,provider:"localStorage"});const d=i.components().ofType("conversation");i.write({key:"setConversationProvider",attributes:{properties:{providers:[e.clientName]}},target:d,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(o)).then(()=>!1))):(s.container.getAsync("conversation").then(a=>a.navigateToConversationIfActive(e.id).then(()=>a.setConversationEndedBehavior(S.Navigate))),!n)},J=(o,e,t="conversation")=>{const{mainWidget:s,chatWidget:r}=I(o);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(i=>{s.container.getAsync("components").then(c=>{const d=c.components().ofType("conversation");c.write({key:"setConversationProvider",attributes:{properties:{providers:[e.clientName]}},target:d,provider:"localStorage"})}).then(()=>{i.navigate(t,{id:e.id})})})})})},b="conversations";var S=(o=>(o.Deactivate="deactivate",o.Navigate="navigate",o.None="none",o))(S||{});class w{constructor(e,t){h(this,"events");h(this,"controllers",[]);h(this,"providers",[]);h(this,"disposeProviders",{});h(this,"subscriptions",[]);h(this,"storageWriter",null);h(this,"router",null);h(this,"buttonQuery",null);h(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 i=(r=this.router)==null?void 0:r.getInitialRoute();i&&((n=this.router)==null||n.navigate(i.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 E.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(i=>i.conversation.id===e);let a;return n>-1?a=this.controllers[n].conversation:a=new H(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(i=>a.indexOf(i.name)>-1).forEach(i=>{this.invokeHandler(i,r)})};return this.subscriptions.push(e.onDispose((a,i)=>{const c=this.controllers.findIndex(d=>d.conversation===i);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,i)=>{const{added:c,removed:d=[]}=i;d.forEach(u=>{(this.disposeProviders[u]||[]).forEach(l=>{l()})}),n(c)})),this.subscriptions.push(e.onStarted((a,i)=>{var d,u;const c={id:e.id,route:(d=this.router)==null?void 0:d.getRouteData(),conversationEndedBehavior:(u=this.sessionInfo)==null?void 0:u.conversationEndedBehavior};this.sessionInfo=c,this.storageWriter&&this.storageWriter(c),this.writeToComponents({active:i})})),this.subscriptions.push(e.onUnreadMessage((a,i)=>{this.events.dispatch("conversation:unread-message",i),this.writeToComponents({alert:{show:i}})})),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?x(e,t.body.form.meta.conversation.id,t.clientName):J(e,t)}}const V=(o,e)=>o.reduce((t,s,r)=>{var a,i;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)===((i=s.sender)==null?void 0:i.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=o=>Promise.all([w.getInstance(o),o.getAsync("router")]).then(([e,t])=>N.createReactComponent(o,"conversation",Promise.resolve().then(()=>require("./conversation-eaa1e841.js")),async s=>{const{rehydrate:r=!1}=s.properties(),a=t.getRouteData().params.id||s.node.name||"component",i=await e.createController(a,{rehydrate:r}),c=e.registerController(i,s),d=3*60*1e3,u=v=>{const{providers:g=[]}=v;if(g){const f=Array.isArray(g)?g:[g];return i.setProviders(f),f}};u(s.properties(u)),i.setComponentMountedState(!0);const l=v=>{const{loading:g,typingActors:f,messages:C}=v;s.writeProperties({loading:g,typingActors:f,messages:V(C,d)})};l(i.getMessageStream()),c&&(s.writeProperties({conversationControllerId:i.id}),s.actions.create("user-submit",(v,g)=>{if(g){const{preventDefault:f,validationPromise:C}=g;if(f){C&&C().then(T=>{T&&i.user.print(T)});return}}i.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=i.events.subscribe("conversation:updated",(v,g)=>{l(g)});return()=>{i.setComponentMountedState(!1),m(),i.active||l({messages:[],typingActors:[],loading:!1})}},{reuseController:!0})),X=o=>Promise.all([D.ComponentPlatform.getInstance(o),w.getInstance(o),o.getAsync("router")]).then(([e,t,s])=>N.createReactComponent(o,"conversation-return-button",Promise.resolve().then(()=>require("./return-button-f1f43984.js")),r=>{r.actions.create("toggle",(n={})=>{var a;(a=t.getComponentRoute())==null||a.then(i=>{i&&s.navigate(i.name,i.params)})})}));var B=(o=>(o.LinkList="link-list",o.Separator="separator",o.ButtonList="button-list",o.ItemList="item-list",o.Text="text",o.HTML="html",o.VideoRequest="video-request",o))(B||{});const Z=(o,e,t)=>o.getAsync("componentResolver").then(async s=>{(await w.getInstance(o)).addSubscription(s.registerComponent(e,z.lazy(()=>t)))});exports.Agent=P;exports.ConversationComponent=Y;exports.ConversationController=H;exports.ConversationEndedBehavior=S;exports.ConversationEntry=$;exports.ConversationMessageListItemType=B;exports.ConversationMessageType=y;exports.ConversationPlatform=w;exports.ConversationProvider=A;exports.ConversationReturnButtonComponent=X;exports.registerCustomMessageComponent=Z;
|
|
3
|
+
${t}`:e.length?`${e} ${t}`:t}dispose(){this.subscriptions.forEach(e=>{e()})}}class P{constructor(e,t){h(this,"id");h(this,"name");h(this,"avatar");h(this,"print",(e,t,s=null)=>{var i,c,d;const r={name:this.name,avatar:this.avatar,id:this.id},n=k(e,t);s=s??n.timestamp;const a=(c=(i=this.provider)==null?void 0:i.controller)==null?void 0:c.container.get("$widget");return(d=a==null?void 0:a.events)==null||d.dispatch("tracking:conversation-message",{sender:"agent"}),this.provider.createEntry(n.key,n.content,y.Agent,r,s)});h(this,"typing",()=>this.provider.setTypingState({name:this.name,avatar:this.avatar}));this.provider=e,this.id=t.id||E.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 A{constructor(e,t,s){h(this,"subscriptions",[]);h(this,"options");h(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 A(e,t,s)}createAgent(e={}){var t;if(this.controller){const s=this.controller.getAgentById(e.id),r=s?new P(this,{...s,...e}):new P(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=o=>`conversation-${o}`;class K{constructor(){h(this,"_locking",Promise.resolve());h(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){h(this,"sessionStorageKey");h(this,"locker",new K);h(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(i=>{const c=t.providerIndex(i.providerName),d=c>-1?t.registeredProviders[c]:t.createProvider(i.providerName),u=new P(d,{name:i.name,avatar:i.avatar,id:i.id});n.push(u)});const{messages:a}=await this.read();a.forEach(i=>{switch(i.type){case"agent":{const c=n.find(d=>{var u;return d.id===((u=i.sender)==null?void 0:u.id)});c&&c.print(i.content.items||i.content,{key:i.key},i.timestamp);return}case"user":{t.user.print(i.content.items||i.content,{key:i.key},i.timestamp);return}case"system":default:t.print(i.content.items||i.content,i.timestamp)}})}),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(i=>i.id===n.agent.id?{...i,name:n.agent.name,avatar:n.agent.avatar}:i)],"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 i={...a};return t==="messages"?i.messages=[...i.messages,e]:t==="agents"&&(i.agents=[...i.agents,e]),n({...a,...i}).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){h(this,"print",(e,t,s=null)=>{var a,i;const r=k(e,t);return s=s??r.timestamp,(i=((a=this.controller)==null?void 0:a.container.get("$widget")).events)==null||i.dispatch("tracking:conversation-message",{sender:"user"}),this.controller.createEntry(r.key,r.content,y.User,void 0,s)});this.controller=e}}const x=async(o,e,t)=>{const s=await o.getAsync("conversation"),r=await o.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 i=r.components().ofType("conversation");r.write({key:"setConversationProvider",attributes:{properties:{providers:[t]}},target:i,provider:"localStorage"})}};class ${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=(o=>(o.User="user",o.Agent="agent",o.System="system",o))(y||{});const k=(o,e)=>{let t,s=(e==null?void 0:e.key)||E.uuid(),r=Date.now();if(Array.isArray(o)&&o.length>-1)typeof o[0]=="string"?t={items:[o]}:t={items:o};else if(typeof o=="string")t={body:o};else if(o=o||{},o.type)t={...o};else{if(t={body:o.body,actions:o.actions,title:o.title},o.key&&(s=o.key),o.timestamp&&(r=o.timestamp),typeof o.form=="function"){const n=L.FormBuilder.create(s);o.form(n);const a=n.get();t.form=a}o.timestamp===null&&(r=null)}return{content:t,key:s,timestamp:r}},W=(o,e)=>{if(!e)return;const t=JSON.stringify(e),s=o.findIndex(r=>t===JSON.stringify(r));if(s>-1)return o.splice(s,1)};class H{constructor(e,t,s){h(this,"formHandlers",{});h(this,"user",new j(this));h(this,"events");h(this,"providers",[]);h(this,"active",!1);h(this,"queuedProviders",[]);h(this,"registeredProviders",[]);h(this,"loaders",0);h(this,"componentMounted",!1);h(this,"store");h(this,"messages",[]);h(this,"typingActors",[]);h(this,"conversationHistory");h(this,"print",(e,t=null)=>{const s=k(e);t=t??s.timestamp;const r=this.container.get("$widget");return r==null||r.events.dispatch("tracking:conversation-message",{sender:"system"}),this.createEntry(s.key,s.content,"system",void 0,t)});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=A.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)&&x(this.container,this.id,e)}queueProviders(e){this.queuedProviders=e}onCompleteProvider(){const e=this.queuedProviders.pop();e&&x(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 i=new $(c=>{if(c!==null){const{timestamp:d=void 0,...u}=c;a.content=u,d&&(a.timestamp=d)}else{const d=this.messages.indexOf(a);a.content=null,d>-1&&this.messages.splice(d,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),i}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=(o,e)=>{const t=o.split("_contact");return e.widgets.get(t[0])},I=o=>{const e=o.get("$widget"),{name:t,implementation:s}=o.get("$widget"),r=t.indexOf("_contact")>-1?F(t,s):e,{data:n}=o.get("$settings"),{trigger:a}=r.container.get("$settings"),i=`${t.replace("_contact-method","").replace("_contact","")}_contact-method`,c=s.widgets.get(i);return c&&!a?{chatWidget:c,mainWidget:r,data:n}:{mainWidget:r,data:n}},G=o=>{const{chatWidget:e}=I(o);return!!e},R=(o,e,t)=>{const{mainWidget:s,data:r,chatWidget:n}=I(o);return n?n.state==="activated"?n.invoke("open").then(()=>{n.container.getAsync("conversation").then(a=>{a.navigateToConversationIfActive(e.id).then(()=>M.closeAllModals(o))})}):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(i=>{const c=i.components().ofType("contact-method");i.write({key:"setContactMethodId",attributes:{properties:{id:e.id,guideId:e.guideId}},target:c,provider:"localStorage"});const d=i.components().ofType("conversation");i.write({key:"setConversationProvider",attributes:{properties:{providers:[e.clientName]}},target:d,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(o)).then(()=>!1))):(s.container.getAsync("conversation").then(a=>a.navigateToConversationIfActive(e.id).then(()=>a.setConversationEndedBehavior(S.Navigate))),!n)},J=(o,e,t="conversation")=>{const{mainWidget:s,chatWidget:r}=I(o);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(i=>{s.container.getAsync("components").then(c=>{const d=c.components().ofType("conversation");c.write({key:"setConversationProvider",attributes:{properties:{providers:[e.clientName]}},target:d,provider:"localStorage"})}).then(()=>{i.navigate(t,{id:e.id})})})})})},b="conversations";var S=(o=>(o.Deactivate="deactivate",o.Navigate="navigate",o.None="none",o))(S||{});class w{constructor(e,t){h(this,"events");h(this,"controllers",[]);h(this,"providers",[]);h(this,"disposeProviders",{});h(this,"subscriptions",[]);h(this,"storageWriter",null);h(this,"router",null);h(this,"buttonQuery",null);h(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 i=(r=this.router)==null?void 0:r.getInitialRoute();i&&((n=this.router)==null||n.navigate(i.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 E.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(i=>i.conversation.id===e);let a;return n>-1?a=this.controllers[n].conversation:a=new H(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(i=>a.indexOf(i.name)>-1).forEach(i=>{this.invokeHandler(i,r)})};return this.subscriptions.push(e.onDispose((a,i)=>{const c=this.controllers.findIndex(d=>d.conversation===i);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,i)=>{const{added:c,removed:d=[]}=i;d.forEach(u=>{(this.disposeProviders[u]||[]).forEach(l=>{l()})}),n(c)})),this.subscriptions.push(e.onStarted((a,i)=>{var d,u;const c={id:e.id,route:(d=this.router)==null?void 0:d.getRouteData(),conversationEndedBehavior:(u=this.sessionInfo)==null?void 0:u.conversationEndedBehavior};this.sessionInfo=c,this.storageWriter&&this.storageWriter(c),this.writeToComponents({active:i})})),this.subscriptions.push(e.onUnreadMessage((a,i)=>{this.events.dispatch("conversation:unread-message",i),this.writeToComponents({alert:{show:i}})})),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?x(e,t.body.form.meta.conversation.id,t.clientName):J(e,t)}}const V=(o,e)=>o.reduce((t,s,r)=>{var a,i;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)===((i=s.sender)==null?void 0:i.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=o=>Promise.all([w.getInstance(o),o.getAsync("router")]).then(([e,t])=>N.createReactComponent(o,"conversation",Promise.resolve().then(()=>require("./conversation-8d76d52e.js")),async s=>{const{rehydrate:r=!1}=s.properties(),a=t.getRouteData().params.id||s.node.name||"component",i=await e.createController(a,{rehydrate:r}),c=e.registerController(i,s),d=3*60*1e3,u=v=>{const{providers:g=[]}=v;if(g){const f=Array.isArray(g)?g:[g];return i.setProviders(f),f}};u(s.properties(u)),i.setComponentMountedState(!0);const l=v=>{const{loading:g,typingActors:f,messages:C}=v;s.writeProperties({loading:g,typingActors:f,messages:V(C,d)})};l(i.getMessageStream()),c&&(s.writeProperties({conversationControllerId:i.id}),s.actions.create("user-submit",(v,g)=>{if(g){const{preventDefault:f,validationPromise:C}=g;if(f){C&&C().then(T=>{T&&i.user.print(T)});return}}i.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=i.events.subscribe("conversation:updated",(v,g)=>{l(g)});return()=>{i.setComponentMountedState(!1),m(),i.active||l({messages:[],typingActors:[],loading:!1})}},{reuseController:!0})),X=o=>Promise.all([D.ComponentPlatform.getInstance(o),w.getInstance(o),o.getAsync("router")]).then(([e,t,s])=>N.createReactComponent(o,"conversation-return-button",Promise.resolve().then(()=>require("./return-button-f1f43984.js")),r=>{r.actions.create("toggle",(n={})=>{var a;(a=t.getComponentRoute())==null||a.then(i=>{i&&s.navigate(i.name,i.params)})})}));var B=(o=>(o.LinkList="link-list",o.Separator="separator",o.ButtonList="button-list",o.ItemList="item-list",o.Text="text",o.HTML="html",o.VideoRequest="video-request",o))(B||{});const Z=(o,e,t)=>o.getAsync("componentResolver").then(async s=>{(await w.getInstance(o)).addSubscription(s.registerComponent(e,z.lazy(()=>t)))});exports.Agent=P;exports.ConversationComponent=Y;exports.ConversationController=H;exports.ConversationEndedBehavior=S;exports.ConversationEntry=$;exports.ConversationMessageListItemType=B;exports.ConversationMessageType=y;exports.ConversationPlatform=w;exports.ConversationProvider=A;exports.ConversationReturnButtonComponent=X;exports.registerCustomMessageComponent=Z;
|
package/index.mjs
CHANGED
|
@@ -953,7 +953,7 @@ const ee = (o, e) => o.reduce((t, s, r) => {
|
|
|
953
953
|
]).then(([e, t]) => H(
|
|
954
954
|
o,
|
|
955
955
|
"conversation",
|
|
956
|
-
import("./conversation-
|
|
956
|
+
import("./conversation-3b96821f.mjs"),
|
|
957
957
|
async (s) => {
|
|
958
958
|
const { rehydrate: r = !1 } = s.properties(), a = t.getRouteData().params.id || s.node.name || "component", i = await e.createController(a, {
|
|
959
959
|
rehydrate: r
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/widget-conversation",
|
|
3
|
-
"version": "1.3.0-rc.
|
|
3
|
+
"version": "1.3.0-rc.8",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
}
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@telia-ace/widget-core": "^1.3.0-rc.
|
|
14
|
-
"@telia-ace/widget-forms": "^1.3.0-rc.
|
|
15
|
-
"@telia-ace/widget-plugins": "^1.3.0-rc.
|
|
16
|
-
"@telia-ace/widget-routing": "^1.3.0-rc.
|
|
17
|
-
"@telia-ace/widget-services": "^1.3.0-rc.
|
|
18
|
-
"@telia-ace/widget-ui": "^1.3.0-rc.
|
|
19
|
-
"@telia-ace/widget-utilities": "^1.3.0-rc.
|
|
13
|
+
"@telia-ace/widget-core": "^1.3.0-rc.8",
|
|
14
|
+
"@telia-ace/widget-forms": "^1.3.0-rc.8",
|
|
15
|
+
"@telia-ace/widget-plugins": "^1.3.0-rc.8",
|
|
16
|
+
"@telia-ace/widget-routing": "^1.3.0-rc.8",
|
|
17
|
+
"@telia-ace/widget-services": "^1.3.0-rc.8",
|
|
18
|
+
"@telia-ace/widget-ui": "^1.3.0-rc.8",
|
|
19
|
+
"@telia-ace/widget-utilities": "^1.3.0-rc.8",
|
|
20
20
|
"@webprovisions/platform": "^1.1.4"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|