@telia-ace/widget-conversation 1.3.0-rc.7 → 1.3.0-rc.9

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"),l=require("@emotion/styled"),n=require("@telia-ace/widget-ui"),k=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,m]=y.useState(0),d=n.useIsTabbing(),u=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");m(parseInt(G[0],10))}}},[b.current]);const I=g=>{!g.shiftKey||!v?(g.preventDefault(),e&&e.length>0&&(u("user-submit",{text:e}),o(""),B(""))):e.length<1&&g.preventDefault()},_=g=>{if(!x)return;g.preventDefault(),u("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&&u("user-typing",{textLength:g.length})};return $?null:s.jsxs(se,{grow:v,className:k.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)`
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"),v=require("@emotion/react"),g=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]=g.useState(""),[a,i]=g.useState(0),[r,u]=g.useState(0),h=n.useIsTabbing(),c=n.useDispatch(),{inputPlaceholder:m="Type your message",inputHidden:p=!1,inputDisabled:d=!1,sendButtonLabel:y="Send message",inputMultiline:b=!0,secondaryAction:x}=n.useProperties(),[k,$]=n.useScroll(!0),T=n.useContainer();g.useEffect(()=>{if($.current){const{lineHeight:f,maxHeight:C}=getComputedStyle($.current);if(f&&f.indexOf("px")>-1){const z=f.split("px"),X=parseInt(z[0],10);i(X);const G=C.split("px");u(parseInt(G[0],10))}}},[$.current]);const I=f=>{!f.shiftKey||!b?(f.preventDefault(),e&&e.length>0&&(c("user-submit",{text:e}),o(""),B(""))):e.length<1&&f.preventDefault()},_=f=>{if(!x)return;f.preventDefault(),c("action",{actionKey:x.action,...x});const{events:C}=T.get("$widget");C.dispatch("tracking:secondary-clicked",{})},Y=f=>{if(b&&$.current){const C=$.current.scrollHeight;if(C>a){$.current.style.height="auto";let z=C;f.length<1&&(z=a),$.current.style.height=`${z}px`,z>=r?$.current.style.overflowY="scroll":$.current.style.overflowY="hidden"}}},B=f=>{Y(f),o(f),f&&f.length>0&&c("user-typing",{textLength:f.length})};return p?null:s.jsxs(se,{grow:b,className:S.appendClassNames("humany-conversation-input",t),scrollableCss:k,isTabbing:h,children:[x&&s.jsx(te,{className:"humany-secondary-button",disabled:d,onClick:_,title:x.label,"aria-label":x.label,children:s.jsx(n.SymbolBadge,{size:24,symbol:{type:"Svg",content:x.icon||"browse"}})}),b?s.jsx(Z,{value:e,onChange:B,onEnter:I,disabled:d,"aria-label":m,placeholder:m,type:"textarea",rows:1,ref:$}):s.jsx(ee,{value:e,onChange:B,onEnter:I,disabled:d,"aria-label":m,placeholder:m}),s.jsx(F,{className:"humany-send-button",disabled:!1,onClick:I,title:y,"aria-label":y,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;
@@ -46,10 +46,10 @@
46
46
  border-right: ${t=>t.theme.border};
47
47
  margin: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}} 0;
48
48
  `,se=l.div`
49
- ${t=>t.grow?f.css`
49
+ ${t=>t.grow?v.css`
50
50
  min-height: 50px;
51
51
  max-height: 150px;
52
- `:f.css`
52
+ `:v.css`
53
53
  height: 50px;
54
54
  `}
55
55
  flex: 0 0 auto;
@@ -102,7 +102,7 @@
102
102
  stroke: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
103
103
  }
104
104
  }
105
- `,oe=f.keyframes`
105
+ `,oe=v.keyframes`
106
106
  0% {
107
107
  opacity: 0;
108
108
  }
@@ -129,7 +129,7 @@
129
129
  > div:nth-of-type(3) {
130
130
  animation-delay: 200ms;
131
131
  }
132
- `,O=l.div`
132
+ `,H=l.div`
133
133
  grid-area: content;
134
134
  max-width: 100%;
135
135
  overflow: hidden;
@@ -137,12 +137,12 @@
137
137
  font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.normal}};
138
138
  font-weight: normal;
139
139
  margin: 0;
140
- `,R=l.div`
140
+ `,E=l.div`
141
141
  display: flex;
142
142
  ${t=>t.left&&"justify-content: start;"};
143
143
  ${t=>t.center&&"justify-content: center;"};
144
144
  ${t=>t.right&&"justify-content: end;"};
145
- `,E=l.div`
145
+ `,R=l.div`
146
146
  ${t=>{var e;return t.padded&&`padding: ${(e=t.theme.sizes)==null?void 0:e.medium};`}}
147
147
  ${t=>!t.user&&t.stacked&&le(t.stacked,t.theme)}
148
148
  ${t=>t.user&&t.stacked&&ce(t.stacked,t.theme)}
@@ -158,11 +158,11 @@
158
158
  }
159
159
  max-width: 100%;
160
160
  ${t=>t.fullWidth&&"width: 100%;"}
161
- `,le=(t,e)=>{var a,i;const o=f.css`
161
+ `,le=(t,e)=>{var a,i;const o=v.css`
162
162
  background-color: ${(a=e.colors)==null?void 0:a.accent};
163
163
  color: ${(i=e.colors)==null?void 0:i.text};
164
164
  ${e.border&&`border: ${e.border};`};
165
- `;return e.borderRadius?f.css`
165
+ `;return e.borderRadius?v.css`
166
166
  ${o}
167
167
 
168
168
  border-top-right-radius: ${e.borderRadius};
@@ -175,10 +175,10 @@
175
175
  ${t==="last"&&`
176
176
  border-bottom-left-radius: ${e.borderRadius};
177
177
  `}
178
- `:o},ce=(t,e)=>{var a,i;const o=f.css`
178
+ `:o},ce=(t,e)=>{var a,i;const o=v.css`
179
179
  background-color: ${(a=e.colors)==null?void 0:a.primary};
180
180
  color: ${(i=e.colors)==null?void 0:i.accent};
181
- `;return e.borderRadius?f.css`
181
+ `;return e.borderRadius?v.css`
182
182
  ${o}
183
183
 
184
184
  border-top-left-radius: ${e.borderRadius};
@@ -196,7 +196,7 @@
196
196
  &:last-child {
197
197
  margin-bottom: 0;
198
198
  }
199
- `,S=t=>{var e,o;return f.css`
199
+ `,w=t=>{var e,o;return v.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)`
@@ -238,7 +238,7 @@
238
238
  ${n.borderTabStyle}
239
239
  background-color: transparent;
240
240
  }
241
- `,D=y.forwardRef(({boxed:t,className:e,agentData:o},a)=>s.jsx(O,{ref:a,children:s.jsx(R,{left:t,center:!t,children:s.jsx(E,{padded:!!t,stacked:t?"first":void 0,children:s.jsxs(ae,{children:[s.jsx("div",{}),s.jsx("div",{}),s.jsx("div",{})]})})})})),W=y.createContext(null),ge=l.p`
241
+ `,K=g.forwardRef(({boxed:t,className:e,agentData:o},a)=>s.jsx(H,{ref:a,children:s.jsx(E,{left:t,center:!t,children:s.jsx(R,{padded:!!t,stacked:t?"first":void 0,children:s.jsxs(ae,{children:[s.jsx("div",{}),s.jsx("div",{}),s.jsx("div",{})]})})})})),W=g.createContext(null),ge=l.p`
242
242
  && {
243
243
  font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.small}};
244
244
  font-weight: 300;
@@ -247,24 +247,24 @@
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:m}=n.useProperties();return s.jsxs(ye,{hasAvatar:!!i,className:k.appendClassNames(t,"humany-conversation-agent-message"),children:[i&&s.jsx(re,{className:"humany-agent-avatar",avatarSize:m,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`
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=g.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%;
254
- ${t=>t.hasAvatar?f.css`
254
+ ${t=>t.hasAvatar?v.css`
255
255
  grid-template-columns: auto 1fr;
256
256
  grid-template-rows: 1fr auto;
257
257
  grid-template-areas:
258
258
  'avatar content'
259
259
  '. info';
260
- `:f.css`
260
+ `:v.css`
261
261
  grid-template-columns: 1fr;
262
262
  grid-template-rows: 1fr auto;
263
263
  grid-template-areas:
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:k.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`
267
+ `,fe=g.forwardRef(({className:t,children:e,timestamp:o,discrete:a,fullWidth:i},r)=>s.jsx(pe,{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})]})})),pe=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:k.appendClassNames(t,"humany-conversation-user-message"),children:[e,s.jsx(L,{name:a,timestamp:o,ariaHidden:!0})]})},ve=l.div`
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 m=!!((d=r==null?void 0:r.data)!=null&&d.href);return s.jsx("li",{children:m?s.jsxs(ke,{onClick:()=>{o("action",r),i.dispatch("tracking:button-list-item-clicked",r)},href:r.data.href,target:r.data.target,"aria-label":r.label,title:r.label,children:[s.jsx(n.SymbolBadge,{symbol:r.symbol}),r.label]}):s.jsxs(Se,{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)`
285
+ `,D=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:D(e),renderItem:r=>{var h;const u=!!((h=r==null?void 0:r.data)!=null&&h.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(we,{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
- ${S}
296
- `,ke=l(n.Link)`
295
+ ${w}
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
- `,Se=l(n.Button)`
315
+ `,we=l(n.Button)`
316
316
  ${n.buttonCss};
317
317
 
318
318
  display: block;
@@ -331,11 +331,11 @@
331
331
  svg {
332
332
  margin-right: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
333
333
  }
334
- `,we=({type:t,content:e={}})=>{const o=n.useComponent(t);return!o||!t?null:s.jsx(y.Suspense,{fallback:null,children:s.jsx(o,{...e})})},Ce=({body:t})=>s.jsx(Le,{className:"humany-html",html:t}),Le=l(n.Html)`
334
+ `,ke=({type:t,content:e={}})=>{const o=n.useComponent(t);return!o||!t?null:s.jsx(g.Suspense,{fallback:null,children:s.jsx(o,{...e})})},Ce=({body:t})=>s.jsx(Le,{className:"humany-html",html:t}),Le=l(n.Html)`
335
335
  ${n.genericHtml}
336
336
  color: inherit;
337
337
  white-space: normal;
338
- ${S}
338
+ ${w}
339
339
  a {
340
340
  color: ${t=>t.theme.colors.link};
341
341
  &:focus-visible {
@@ -345,11 +345,11 @@
345
345
  p {
346
346
  word-break: auto-phrase;
347
347
  }
348
- `,ze=({header:t,actions:e,dispatch:o})=>s.jsx(Te,{className:"humany-conversation-item-list",header:t,items:K(e),renderItem:a=>{var i;return s.jsx("li",{children:s.jsxs(Ne,{children:[((i=a.symbol)==null?void 0:i.content)&&s.jsx("div",{className:"item-icon",children:s.jsx(n.SymbolBadge,{size:22,symbol:{type:a.symbol.type,content:a.symbol.content}})}),s.jsxs("div",{className:"item-body",children:[s.jsx(n.Button,{onClick:()=>{o("action",a)},"aria-label":a.label,title:a.label,children:a.label}),a.description&&s.jsx("p",{children:a.description})]})]})},a.actionKey)}}),Te=l(n.ItemList)`
348
+ `,ze=({header:t,actions:e,dispatch:o})=>s.jsx(Te,{className:"humany-conversation-item-list",header:t,items:D(e),renderItem:a=>{var i;return s.jsx("li",{children:s.jsxs(Ne,{children:[((i=a.symbol)==null?void 0:i.content)&&s.jsx("div",{className:"item-icon",children:s.jsx(n.SymbolBadge,{size:22,symbol:{type:a.symbol.type,content:a.symbol.content}})}),s.jsxs("div",{className:"item-body",children:[s.jsx(n.Button,{onClick:()=>{o("action",a)},"aria-label":a.label,title:a.label,children:a.label}),a.description&&s.jsx("p",{children:a.description})]})]})},a.actionKey)}}),Te=l(n.ItemList)`
349
349
  ${n.itemList}
350
350
 
351
351
  > .humany-paragraph {
352
- ${S}
352
+ ${w}
353
353
  margin-bottom: 0;
354
354
 
355
355
  h1 {
@@ -357,7 +357,7 @@
357
357
  }
358
358
  }
359
359
 
360
- ${t=>n.headingElement(t)("h1",f.css`
360
+ ${t=>n.headingElement(t)("h1",v.css`
361
361
  white-space: normal;
362
362
  `)}
363
363
 
@@ -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
- ${S}
383
+ ${w}
384
384
 
385
385
  .item-icon {
386
386
  }
@@ -414,11 +414,11 @@
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(),m=n.useContainer(),{events:d}=m.get("$widget");return y.useEffect(()=>{if(a&&Array.isArray(e)&&Array.isArray(a)&&a.length<e.length&&i.current){const u=i.current.querySelectorAll(".humany-conversation-link-list > ul > li"),p=u[a.length];if(u.length===e.length&&a.length){const $=u[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&&k.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:u=>s.jsx("li",{children:s.jsxs(Be,{help:u.actionKey==="help",onClick:()=>{o("action",u),d.dispatch("tracking:link-list-item-clicked",u)},"aria-label":u.label,title:u.label,children:[u.label,u.actionKey==="help"&&s.jsx(n.SymbolBadge,{size:14,symbol:{type:"Svg",content:"caret-down"}})]})},u.actionKey)})},Ie=l(n.ItemList)`
417
+ `,Me=({header:t,actions:e,dispatch:o})=>{const a=n.usePrevious(e),i=g.useRef(),r=n.useIsTabbing(),u=n.useContainer(),{events:h}=u.get("$widget");return g.useEffect(()=>{if(a&&Array.isArray(e)&&Array.isArray(a)&&a.length<e.length&&i.current){const c=i.current.querySelectorAll(".humany-conversation-link-list > ul > li"),m=c[a.length];if(c.length===e.length&&a.length){const p=c[a.length-1];if(p){const d=p.querySelector(".humany-button");d&&d.focus()}}else m&&new MutationObserver((d,y)=>{d.forEach(b=>{if(b.addedNodes){const x=Array.from(b.addedNodes).find(k=>k.tagName==="BUTTON");x&&S.htmlParentContains(i.current,document.activeElement)&&(r&&x.focus(),y.disconnect())}})}).observe(m,{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:D(e),renderItem:c=>s.jsx("li",{children:s.jsxs(Be,{help:c.actionKey==="help",onClick:()=>{o("action",c),h.dispatch("tracking:link-list-item-clicked",c)},"aria-label":c.label,title:c.label,children:[c.label,c.actionKey==="help"&&s.jsx(n.SymbolBadge,{size:14,symbol:{type:"Svg",content:"caret-down"}})]})},c.actionKey)})},Ie=l(n.ItemList)`
418
418
  ${n.itemList}
419
- ${S}
419
+ ${w}
420
420
 
421
- ${t=>n.headingElement(t)("h1",f.css`
421
+ ${t=>n.headingElement(t)("h1",v.css`
422
422
  white-space: normal;
423
423
  `)}
424
424
 
@@ -439,7 +439,7 @@
439
439
  text-overflow: ellipsis;
440
440
  overflow: hidden;
441
441
 
442
- ${t=>{var e,o;return t.help&&f.css`
442
+ ${t=>{var e,o;return t.help&&v.css`
443
443
  color: ${(e=t.theme.colors)==null?void 0:e.text};
444
444
  text-decoration: underline;
445
445
 
@@ -456,12 +456,12 @@
456
456
  text-decoration: underline;
457
457
  }
458
458
  }
459
- `,Ae=()=>s.jsx(He,{className:"humany-conversation-separator"}),He=l.div`
459
+ `,Ae=()=>s.jsx(Oe,{className:"humany-conversation-separator"}),Oe=l.div`
460
460
  ${t=>t.theme.border&&`border-bottom: ${t.theme.border};`}
461
461
  width: 100%;
462
- `,Oe=({text:t})=>s.jsx(Re,{className:"humany-conversation-text",variant:"span",children:t}),Re=l(n.Typography)`
463
- ${S}
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 m=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:m,children:s.jsx(n.SymbolBadge,{symbol:r.symbol,size:25})})},r.actionKey)}})},Ke=l(n.ItemList)`
462
+ `,He=({text:t})=>s.jsx(Ee,{className:"humany-conversation-text",variant:"span",children:t}),Ee=l(n.Typography)`
463
+ ${w}
464
+ `,Re=({header:t="Video call",acceptLabel:e="Accept",declineLabel:o="Decline",dispatch:a})=>{const i=g.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(De,{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(Ke,{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)}})},De=l(n.ItemList)`
465
465
  ${t=>n.itemList(t)}
466
466
  > ul {
467
467
  display: flex;
@@ -471,8 +471,8 @@
471
471
  margin: 0;
472
472
  }
473
473
  }
474
- ${t=>S(t)}
475
- `,De=l(n.Button)`
474
+ ${t=>w(t)}
475
+ `,Ke=l(n.Button)`
476
476
  ${n.buttonCss};
477
477
 
478
478
  background-color: ${t=>t.bgColor};
@@ -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 m=r==null?void 0:r.content,d=m==null?void 0:m.actions;return!!(d!=null&&d.filter(u=>u.actionKey==="contact").length)}).length&&o.push("humany-secondary-action-list"),!!t.map(M).filter(r=>{var d;const m=r==null?void 0:r.content;return!!((d=m==null?void 0:m.tags)!=null&&d.includes("category"))}).length&&o.push("humany-category-list"),s.jsx(Pe,{role:"none",className:k.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)`
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,h=u==null?void 0:u.actions;return!!(h!=null&&h.filter(c=>c.actionKey==="contact").length)}).length&&o.push("humany-secondary-action-list"),!!t.map(M).filter(r=>{var h;const u=r==null?void 0:r.content;return!!((h=u==null?void 0:u.tags)!=null&&h.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(He,{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(Re,{...r.content,dispatch:e});default:return s.jsx(ke,{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 m=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(),u=()=>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:m(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:m(h)})},c.key))})})]});switch(a){case j.ConversationMessageType.System:return u();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:m,actions:d,form:u,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:!!u||!!d,children:[r&&s.jsx(N,{children:s.jsx(ie,{variant:"h2",children:r})}),m&&s.jsx(N,{children:s.jsx(ue,{html:m})}),u&&s.jsx(N,{children:s.jsx(de,{...u,onChange:(c,h)=>{i("form",{data:h,formKey:u.schema.id,actionKey:c})}})}),d&&s.jsx(N,{children:s.jsx(me,{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`
515
+ `,Fe=g.forwardRef(({className:t,timestamp:e,sender:o,type:a,content:i},r)=>{const u=g.useCallback(d=>{let y="first";return i.length>1&&(y=d===0?"first":d+1===i.length?"last":"middle"),y},[i]),{userLabel:h=""}=n.useProperties(),c=()=>s.jsx(s.Fragment,{children:i.map(d=>{const{key:y,body:b,title:x,form:k,actions:$}=d,T=!!b&&!x&&!k&&!$;return s.jsx(fe,{className:t,discrete:T,ref:r,timestamp:e,fullWidth:!!k||!!$,children:T&&b?s.jsx(n.Html,{html:b}):s.jsx(A,{isSystem:!0,content:d})},y)})}),m=()=>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(H,{className:"humany-message-content-bundle",children:i.map((d,y)=>s.jsx(E,{className:"humany-message-container",left:!0,ref:r,children:s.jsx(A,{content:d,stacked:u(y)})},d.key))})})]}),p=()=>s.jsxs(s.Fragment,{children:[s.jsx(P,{className:"humany-sr-only",children:s.jsx(L,{name:h,timestamp:e})}),s.jsx(xe,{timestamp:e,className:t,children:s.jsx(H,{className:"humany-message-content-bundle",children:i.map((d,y)=>s.jsx(E,{className:"humany-message-container",right:!0,ref:r,children:s.jsx(A,{isUser:!0,content:d,stacked:u(y)})},d.key))})})]});switch(a){case j.ConversationMessageType.System:return c();case j.ConversationMessageType.Agent:return m();case j.ConversationMessageType.User:return p();default:return null}}),A=({content:t,isUser:e,isSystem:o,stacked:a})=>{const i=n.useDispatch(),{title:r,body:u,actions:h,form:c,items:m}=t;return m?s.jsx(R,{className:"humany-message-content",user:!!e,stacked:a,children:s.jsx(qe,{items:m,dispatch:i})}):s.jsxs(R,{className:"humany-message-content",padded:!o,user:!!e,stacked:a,fullWidth:!!c||!!h,children:[r&&s.jsx(N,{children:s.jsx(ie,{variant:"h2",children:r})}),u&&s.jsx(N,{children:s.jsx(ue,{html:u})}),c&&s.jsx(N,{children:s.jsx(de,{...c,onChange:(d,y)=>{i("form",{data:y,formKey:c.schema.id,actionKey:d})}})}),h&&s.jsx(N,{children:s.jsx(me,{items:Object.keys(h).map(d=>({label:h[d],actionKey:d})),renderItem:d=>s.jsx("li",{children:s.jsx(he,{onClick:()=>{i("action",d.actionKey)},children:d.label})},d.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(),m=()=>r&&r.length?r.map((d,u)=>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,u)=>{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,m(),i&&s.jsx(H,{children:s.jsx(D,{ref:t})})]}),s.jsx(Q,{}),s.jsx(We,{})]})},Ve=l.div`
538
+ `,V=()=>{const t=n.useContainer(),e=g.useCallback(m=>{m&&setTimeout(()=>{m.scrollIntoView({block:"start",behavior:"smooth"})},250)},[]),[o,a]=n.useScroll(!0),{messages:i,loading:r,typingActors:u=[]}=n.useProperties(),h=()=>u&&u.length?u.map((m,p)=>s.jsx(O,{id:`typing_${m.name}`,children:s.jsx(U,{timestamp:Date.now(),sender:m,children:s.jsx(K,{boxed:!0,ref:e})})},`typing_${m.name}`)):null,c=g.useRef((i==null?void 0:i.length)||0);return g.useEffect(()=>{const m=t.get("widgetDOMElement");if(m&&m.id==="humany_bot"){const p=m.querySelectorAll(".humany-conversation-entry");p.length&&p.length>c.current&&(c.current=p.length,p[p.length-1].focus())}}),s.jsxs(s.Fragment,{children:[s.jsxs(Ve,{tabIndex:0,scrollableCss:o,ref:a,children:[i&&i.length?i.map((m,p)=>{const{type:d,timestamp:y,sender:b,content:x}=m;return s.jsx(O,{className:"humany-conversation-entry",tabIndex:-1,children:s.jsx(Fe,{...m,ref:e})},`${d}_${b==null?void 0:b.name}_${y}_${x[0].key}`)}):null,h(),r&&s.jsx(O,{children:s.jsx(K,{ref:e})})]}),s.jsx(Q,{}),s.jsx(We,{})]})},Ve=l.div`
539
539
  display: flex;
540
540
  flex-direction: column;
541
541
  align-items: stretch;
@@ -545,7 +545,7 @@
545
545
  &:focus-visible {
546
546
  ${t=>n.borderTabStyle(t)};
547
547
  }
548
- `,H=l.div`
548
+ `,O=l.div`
549
549
  margin: 0;
550
550
  margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
551
551
 
@@ -573,10 +573,10 @@
573
573
  ${n.borderTabStyle}
574
574
  border-radius: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
575
575
  }
576
- ${t=>n.headingElement(t)("h1",f.css`
576
+ ${t=>n.headingElement(t)("h1",v.css`
577
577
  font-weight: normal;
578
578
  `)}
579
- `,_e=({dispatch:t})=>{const e=y.useRef(null);return y.useEffect(()=>{e.current&&e.current.parentNode&&t("overlay-mounted",e.current)},[e]),s.jsx(n.WidgetOverlayOutlet,{portalId:"humany-conversation-overlay-portal",className:"humany-conversation-overlay-outlet",ref:e})},Ye=({dispatch:t,header:e,buttonLabel:o})=>s.jsxs(Xe,{portalId:"humany-conversation-portal",className:"humany-conversation-outlet",children:[s.jsxs(Ge,{className:"humany-conversation-outlet-head",children:[s.jsx(Qe,{className:"humany-conversation-outlet-head-button","aria-label":o,title:o,onClick:()=>t("hide-overlay-conversation"),children:s.jsx(n.SymbolBadge,{symbol:{type:"Svg",content:"caret-down"},size:20})}),e&&s.jsx(Je,{className:"humany-conversation-outlet-header",variant:"h1",children:e})]}),s.jsx(V,{})]}),Xe=l(n.WidgetOverlayOutlet)`
579
+ `,_e=({dispatch:t})=>{const e=g.useRef(null);return g.useEffect(()=>{e.current&&e.current.parentNode&&t("overlay-mounted",e.current)},[e]),s.jsx(n.WidgetOverlayOutlet,{portalId:"humany-conversation-overlay-portal",className:"humany-conversation-overlay-outlet",ref:e})},Ye=({dispatch:t,header:e,buttonLabel:o})=>s.jsxs(Xe,{portalId:"humany-conversation-portal",className:"humany-conversation-outlet",children:[s.jsxs(Ge,{className:"humany-conversation-outlet-head",children:[s.jsx(Qe,{className:"humany-conversation-outlet-head-button","aria-label":o,title:o,onClick:()=>t("hide-overlay-conversation"),children:s.jsx(n.SymbolBadge,{symbol:{type:"Svg",content:"caret-down"},size:20})}),e&&s.jsx(Je,{className:"humany-conversation-outlet-header",variant:"h1",children:e})]}),s.jsx(V,{})]}),Xe=l(n.WidgetOverlayOutlet)`
580
580
  z-index: 11;
581
581
  top: auto;
582
582
  height: 65%;
@@ -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(),m=n.useDispatch(),u=n.useContainer().get("$settings");return s.jsx(n.ConversationContext.Provider,{value:r?{id:r}:null,children:s.jsxs(W.Provider,{value:u==null?void 0:u.language,children:[s.jsx(et,{"aria-live":"assertive",...e,className:k.appendClassNames(t,"humany-conversation-component"),children:s.jsx(V,{})}),o&&s.jsxs(s.Fragment,{children:[s.jsx(_e,{dispatch:m}),o.conversation&&s.jsx(Ye,{dispatch:m,header:a,buttonLabel:i})]})]})})},et=l.div`
614
+ `,Ze=({className:t,...e})=>{const{overlay:o,overlayConversationHeader:a,overlayConversationCloseLabel:i,conversationControllerId:r}=n.useProperties(),u=n.useDispatch(),c=n.useContainer().get("$settings");return s.jsx(n.ConversationContext.Provider,{value:r?{id:r}:null,children:s.jsxs(W.Provider,{value:c==null?void 0:c.language,children:[s.jsx(et,{"aria-live":"polite",...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;