@telia-ace/widget-conversation 0.0.1

package/conversation-92e4cb62.js

@@ -0,0 +1,623 @@
+"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"),w=require("@telia-ace/widget-utilities"),v=require("@emotion/react"),g=require("react"),J=require("@telia-ace/widget-forms"),S=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),m=n.useIsTabbing(),d=n.useDispatch(),{inputPlaceholder:f="Type your message",inputHidden:$=!1,inputDisabled:c=!1,sendButtonLabel:h="Send message",inputMultiline:b=!0,secondaryAction:x}=n.useProperties(),[j,p]=n.useScroll(!0),T=n.useContainer();g.useEffect(()=>{if(p.current){const{lineHeight:y,maxHeight:C}=getComputedStyle(p.current);if(y&&y.indexOf("px")>-1){const z=y.split("px"),X=parseInt(z[0],10);i(X);const G=C.split("px");u(parseInt(G[0],10))}}},[p.current]);const I=y=>{!y.shiftKey||!b?(y.preventDefault(),e&&e.length>0&&(d("user-submit",{text:e}),o(""),B(""))):e.length<1&&y.preventDefault()},_=y=>{if(!x)return;y.preventDefault(),d("action",{actionKey:x.action,...x});const{events:C}=T.get("$widget");C.dispatch("tracking:secondary-clicked",{})},Y=y=>{if(b&&p.current){const C=p.current.scrollHeight;if(C>a){p.current.style.height="auto";let z=C;y.length<1&&(z=a),p.current.style.height=`${z}px`,z>=r?p.current.style.overflowY="scroll":p.current.style.overflowY="hidden"}}},B=y=>{Y(y),o(y),y&&y.length>0&&d("user-typing",{textLength:y.length})};return $?null:s.jsxs(se,{grow:b,className:w.appendClassNames("humany-conversation-input",t),scrollableCss:j,isTabbing:m,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"}})}),b?s.jsx(Z,{value:e,onChange:B,onEnter:I,disabled:c,"aria-label":f,placeholder:f,type:"textarea",rows:1,ref:p}):s.jsx(ee,{value:e,onChange:B,onEnter:I,disabled:c,"aria-label":f,placeholder:f}),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)`
+  resize: none;
+  flex: 1;
+  flex-shrink: 1;
+  min-height: 1.2em;
+  max-height: 148px;
+  line-height: 1.2em;
+  height: 1.2em;
+  padding: 0;
+  margin: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
+  font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.normal}};
+  border: none;
+  transition: height 200ms linear;
+  outline: none;
+  &:focus-visible {
+    ${n.borderTabStyle};
+    outline-offset: 12px;
+  }
+`,ee=l(n.Input)`
+  flex: 1;
+  border: none;
+  background-color: transparent;
+  font-weight: 300;
+  font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.normal}};
+  line-height: 1.2em;
+  outline: none;
+  padding: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
+  color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+  &::placeholder {
+    color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.textLight}};
+    font-style: italic;
+  }
+`,F=l(n.Button)`
+  flex: 0 0 50px;
+  align-self: stretch;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  color: #a6a6a6;
+  &:focus-visible {
+    ${n.borderTabStyle};
+  }
+`,te=l(F)`
+  border-right: ${t=>t.theme.border};
+  margin: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}} 0;
+`,se=l.div`
+  ${t=>t.grow?v.css`
+          min-height: 50px;
+          max-height: 150px;
+        `:v.css`
+          height: 50px;
+        `}
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  background-color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.accent}};
+  border-top: ${t=>t.theme.inputBorder};
+  ${t=>t["data-has-focus"]&&t.isTabbing&&n.borderTabStyle}
+  textarea {
+    ${t=>!!t.scrollableCss&&t.scrollableCss}
+  }
+`,ne=l(({hasContent:t,...e})=>s.jsx(n.SymbolBadge,{...e}))`
+  line,
+  path {
+    stroke: ${t=>{var e;return t.hasContent?(e=t.theme.colors)==null?void 0:e.primary:"#a6a6a6"}};
+    fill: ${t=>{var e;return t.hasContent?(e=t.theme.colors)==null?void 0:e.primary:"#a6a6a6"}};
+  }
+`,re=l.div`
+  width: ${t=>t.avatarSize||"32px"};
+  height: ${t=>t.avatarSize||"32px"};
+  border-radius: 50%;
+  background-color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.accent}};
+  border: ${t=>t.theme.border};
+  grid-area: avatar;
+  align-self: flex-end;
+  justify-self: center;
+  overflow: hidden;
+  margin-right: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+
+  > img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  > svg {
+    width: 90%;
+    height: 90%;
+    padding: 10%;
+    color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+
+    line,
+    path,
+    circle,
+    fill {
+      stroke: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+    }
+  }
+`,oe=v.keyframes`
+  0% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`,ae=l.div`
+  display: flex;
+  justify-content: center;
+  > div {
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    background-color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+    animation: ${oe} 1s infinite;
+  }
+  > div:nth-of-type(2) {
+    animation-delay: 100ms;
+  }
+  > div:nth-of-type(3) {
+    animation-delay: 200ms;
+  }
+`,H=l.div`
+  grid-area: content;
+  max-width: 100%;
+  overflow: hidden;
+`,ie=l(n.Typography)`
+  font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.normal}};
+  font-weight: normal;
+  margin: 0;
+`,E=l.div`
+  display: flex;
+  ${t=>t.left&&"justify-content: start;"};
+  ${t=>t.center&&"justify-content: center;"};
+  ${t=>t.right&&"justify-content: end;"};
+`,R=l.div`
+  ${t=>{var e;return t.padded&&`padding: ${(e=t.theme.sizes)==null?void 0:e.medium};`}}
+  ${t=>!t.user&&t.stacked&&le(t.stacked,t.theme)}
+    ${t=>t.user&&t.stacked&&ce(t.stacked,t.theme)}
+
+    display: inline-block;
+  margin-top: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  && > * {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
+    word-break: break-word;
+    hyphens: auto;
+  }
+  max-width: 100%;
+  ${t=>t.fullWidth&&"width: 100%;"}
+`,le=(t,e)=>{var a,i;const o=v.css`
+    background-color: ${(a=e.colors)==null?void 0:a.accent};
+    color: ${(i=e.colors)==null?void 0:i.text};
+    ${e.border&&`border: ${e.border};`};
+  `;return e.borderRadius?v.css`
+    ${o}
+
+    border-top-right-radius: ${e.borderRadius};
+    border-bottom-right-radius: ${e.borderRadius};
+
+    ${t==="first"&&`
+            border-top-left-radius: ${e.borderRadius};
+        `}
+
+    ${t==="last"&&`
+            border-bottom-left-radius: ${e.borderRadius};
+        `}
+  `:o},ce=(t,e)=>{var a,i;const o=v.css`
+    background-color: ${(a=e.colors)==null?void 0:a.primary};
+    color: ${(i=e.colors)==null?void 0:i.accent};
+  `;return e.borderRadius?v.css`
+    ${o}
+
+    border-top-left-radius: ${e.borderRadius};
+    border-bottom-left-radius: ${e.borderRadius};
+
+    ${t==="first"&&`
+            border-top-right-radius: ${e.borderRadius};
+        `}
+
+    ${t==="last"&&`
+            border-bottom-right-radius: ${e.borderRadius};
+        `}
+  `:o},N=l.div`
+  margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  &:last-child {
+    margin-bottom: 0;
+  }
+`,k=t=>{var e,o;return v.css`
+  margin: ${(e=t.theme.sizes)==null?void 0:e.medium} 0;
+  padding: 0 ${(o=t.theme.sizes)==null?void 0:o.medium};
+`},de=l(J.FormComponent)`
+  & button.humany-form-component-button {
+    ${t=>{var e,o,a,i;return((e=t.theme.colors)==null?void 0:e.primary)&&((o=t.theme.colors)==null?void 0:o.accent)&&n.invertedHoverButton({active:!1,primaryColor:(a=t.theme.colors)==null?void 0:a.primary,secondaryColor:(i=t.theme.colors)==null?void 0:i.accent,theme:t.theme})}};
+    display: block;
+    width: 100%;
+    margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  }
+  & button.humany-form-component-submit {
+    width: 100%;
+    margin: 0;
+    :not(:last-child) {
+      margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+    }
+  }
+`,ue=l(n.Html)`
+  white-space: pre-wrap;
+  a {
+    color: ${t=>t.theme.colors.link};
+    &:focus {
+      ${t=>{var e;return((e=t.theme.accessibility)==null?void 0:e.isTabbing)&&n.borderTabStyle}};
+    }
+  }
+`,me=l(n.List)`
+  padding: 0;
+  list-style: none;
+  margin: 0 -${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  > li {
+    margin: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  }
+`,he=l.button`
+  ${t=>n.buttonCss(t)};
+  display: block;
+  background-color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
+  width: 100%;
+  color: #fff;
+  &:focus-visible {
+    ${n.borderTabStyle}
+    background-color: transparent;
+  }
+`,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`
+  && {
+    font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.small}};
+    font-weight: 300;
+  }
+  margin: 0;
+  line-height: 1.5em;
+  grid-area: info;
+  color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+`,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,avatarLabel:m="Avatar"}=n.useProperties();return s.jsxs(ye,{hasAvatar:!!i,className:w.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,alt:m}):s.jsx(n.SymbolBadge,{symbol:i})}),e,s.jsx(L,{name:r,timestamp:a,ariaHidden:!0})]})},ye=l.div`
+  display: grid;
+  margin-right: 10%;
+  width: 90%;
+  ${t=>t.hasAvatar?v.css`
+          grid-template-columns: auto 1fr;
+          grid-template-rows: 1fr auto;
+          grid-template-areas:
+            'avatar content'
+            '. info';
+        `:v.css`
+          grid-template-columns: 1fr;
+          grid-template-rows: 1fr auto;
+          grid-template-areas:
+            'content'
+            'info';
+        `};
+`,fe=g.forwardRef(({className:t,children:e,timestamp:o,discrete:a,fullWidth:i},r)=>s.jsx(pe,{ref:r,className:w.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`
+  ${t=>t.fullWidth&&"width: 100%"};
+  padding: 0 ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.large}};
+  overflow: auto;
+`,be=l.div`
+  text-align: center;
+  word-wrap: break-word;
+  font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.normal}};
+  color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+  > p {
+    margin: 0;
+  }
+`,xe=({className:t,children:e,timestamp:o})=>{const{userLabel:a=""}=n.useProperties();return s.jsxs(ve,{className:w.appendClassNames(t,"humany-conversation-user-message"),children:[e,s.jsx(L,{name:a,timestamp:o,ariaHidden:!0})]})},ve=l.div`
+  margin-left: 10%;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,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 m;const u=!!((m=r==null?void 0:r.data)!=null&&m.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)`
+  ${n.itemList}
+  > ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+    > li {
+      margin: 0;
+    }
+  }
+  ${k}
+`,Se=l(n.Link)`
+  ${n.buttonCss};
+
+  display: block;
+  padding: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  background-color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
+  width: 100%;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &:focus-visible {
+    ${n.borderTabStyle}
+    background-color: transparent;
+  }
+
+  i,
+  svg {
+    margin-right: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
+  }
+`,we=l(n.Button)`
+  ${n.buttonCss};
+
+  display: block;
+  padding: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  background-color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
+  width: 100%;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &:focus-visible {
+    ${n.borderTabStyle}
+    background-color: transparent;
+  }
+
+  i,
+  svg {
+    margin-right: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
+  }
+`,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)`
+  ${n.genericHtml}
+  color: inherit;
+  white-space: normal;
+  ${k}
+  a {
+    color: ${t=>t.theme.colors.link};
+    &:focus-visible {
+      ${n.borderTabStyle};
+    }
+  }
+  p {
+    word-break: auto-phrase;
+  }
+`,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)`
+  ${n.itemList}
+
+  > .humany-paragraph {
+    ${k}
+    margin-bottom: 0;
+
+    h1 {
+      margin: 0;
+    }
+  }
+
+  ${t=>n.headingElement(t)("h1",v.css`
+        white-space: normal;
+      `)}
+
+  > ul {
+    display: flex;
+    flex-direction: column;
+    gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+    > li {
+      margin: 0;
+    }
+  }
+
+  li {
+    border-bottom: ${t=>t.theme.border};
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+`,Ne=l.div`
+  display: flex;
+  gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
+  ${k}
+
+  .item-icon {
+  }
+
+  .item-body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+
+    p {
+      margin: 0;
+      white-space: normal;
+    }
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    font-family: inherit;
+    font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.normal}};
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+
+    &:focus-visible {
+      ${n.borderTabStyle}
+      span {
+        color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
+        text-decoration: underline;
+      }
+    }
+  }
+`,Me=({header:t,actions:e,dispatch:o})=>{const a=n.usePrevious(e),i=g.useRef(),r=n.useIsTabbing(),u=n.useContainer(),{events:m}=u.get("$widget");return g.useEffect(()=>{if(a&&Array.isArray(e)&&Array.isArray(a)&&a.length<e.length&&i.current){const d=i.current.querySelectorAll(".humany-conversation-link-list > ul > li"),f=d[a.length];if(d.length===e.length&&a.length){const $=d[a.length-1];if($){const c=$.querySelector(".humany-button");c&&c.focus()}}else f&&new MutationObserver((c,h)=>{c.forEach(b=>{if(b.addedNodes){const x=Array.from(b.addedNodes).find(j=>j.tagName==="BUTTON");x&&w.htmlParentContains(i.current,document.activeElement)&&(r&&x.focus(),h.disconnect())}})}).observe(f,{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:d=>s.jsx("li",{children:s.jsxs(Be,{help:d.actionKey==="help",onClick:()=>{o("action",d),m.dispatch("tracking:link-list-item-clicked",d)},"aria-label":d.label,title:d.label,children:[d.label,d.actionKey==="help"&&s.jsx(n.SymbolBadge,{size:14,symbol:{type:"Svg",content:"caret-down"}})]})},d.actionKey)})},Ie=l(n.ItemList)`
+  ${n.itemList}
+  ${k}
+
+    ${t=>n.headingElement(t)("h1",v.css`
+        white-space: normal;
+      `)}
+
+    > ul {
+    display: flex;
+    flex-direction: column;
+    gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+    > li {
+      margin: 0;
+    }
+  }
+`,Be=l(n.Button)`
+  display: block;
+  text-align: left;
+  font-weight: 300;
+  color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  ${t=>{var e,o;return t.help&&v.css`
+      color: ${(e=t.theme.colors)==null?void 0:e.text};
+      text-decoration: underline;
+
+      i,
+      svg {
+        margin-left: ${(o=t.theme.sizes)==null?void 0:o.small};
+      }
+    `}}
+
+  &:focus-visible {
+    ${n.borderTabStyle}
+    span {
+      color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
+      text-decoration: underline;
+    }
+  }
+`,Ae=()=>s.jsx(Oe,{className:"humany-conversation-separator"}),Oe=l.div`
+  ${t=>t.theme.border&&`border-bottom: ${t.theme.border};`}
+  width: 100%;
+`,He=({text:t})=>s.jsx(Ee,{className:"humany-conversation-text",variant:"span",children:t}),Ee=l(n.Typography)`
+  ${k}
+`,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)`
+  ${t=>n.itemList(t)}
+  > ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+    > li {
+      margin: 0;
+    }
+  }
+  ${t=>k(t)}
+`,Ke=l(n.Button)`
+  ${n.buttonCss};
+
+  background-color: ${t=>t.bgColor};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+  width: 46px;
+  height: 46px;
+  border-radius: 100%;
+
+  &:focus-visible {
+    ${n.borderTabStyle}
+    background-color: transparent;
+
+    i,
+    svg {
+      color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
+
+      path {
+        stroke: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
+      }
+    }
+  }
+
+  i,
+  svg {
+    color: #fff;
+
+    path {
+      stroke: #fff;
+    }
+  }
+`,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,m=u==null?void 0:u.actions;return!!(m!=null&&m.filter(d=>d.actionKey==="contact").length)}).length&&o.push("humany-secondary-action-list"),!!t.map(M).filter(r=>{var m;const u=r==null?void 0:r.content;return!!((m=u==null?void 0:u.tags)!=null&&m.includes("category"))}).length&&o.push("humany-category-list"),s.jsx(Pe,{role:"none",className:w.appendClassNames("humany-message-list",o.join(" ")),items:t.map(M),renderLi:!0,renderItem:r=>{switch(r.type){case S.ConversationMessageListItemType.Text:return s.jsx(He,{text:r.content});case S.ConversationMessageListItemType.HTML:return s.jsx(Ce,{...r.content});case S.ConversationMessageListItemType.Separator:return s.jsx(Ae,{...r.content});case S.ConversationMessageListItemType.ItemList:return s.jsx(ze,{...r.content,dispatch:e});case S.ConversationMessageListItemType.LinkList:return s.jsx(Me,{...r.content,dispatch:e});case S.ConversationMessageListItemType.ButtonList:return s.jsx($e,{...r.content,dispatch:e});case S.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)`
+  ${n.list}
+
+  > li {
+    margin: 0;
+  }
+`,Fe=g.forwardRef(({className:t,timestamp:e,sender:o,type:a,content:i},r)=>{const u=g.useCallback(c=>{let h="first";return i.length>1&&(h=c===0?"first":c+1===i.length?"last":"middle"),h},[i]),{userLabel:m=""}=n.useProperties(),d=()=>s.jsx(s.Fragment,{children:i.map(c=>{const{key:h,body:b,title:x,form:j,actions:p}=c,T=!!b&&!x&&!j&&!p;return s.jsx(fe,{className:t,discrete:T,ref:r,timestamp:e,fullWidth:!!j||!!p,children:T&&b?s.jsx(n.Html,{html:b}):s.jsx(A,{isSystem:!0,content:c})},h)})}),f=()=>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((c,h)=>s.jsx(E,{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:m,timestamp:e})}),s.jsx(xe,{timestamp:e,className:t,children:s.jsx(H,{className:"humany-message-content-bundle",children:i.map((c,h)=>s.jsx(E,{className:"humany-message-container",right:!0,ref:r,children:s.jsx(A,{isUser:!0,content:c,stacked:u(h)})},c.key))})})]});switch(a){case S.ConversationMessageType.System:return d();case S.ConversationMessageType.Agent:return f();case S.ConversationMessageType.User:return $();default:return null}}),A=({content:t,isUser:e,isSystem:o,stacked:a})=>{const i=n.useDispatch(),{title:r,body:u,actions:m,form:d,items:f}=t;return f?s.jsx(R,{className:"humany-message-content",user:!!e,stacked:a,children:s.jsx(qe,{items:f,dispatch:i})}):s.jsxs(R,{className:"humany-message-content",padded:!o,user:!!e,stacked:a,fullWidth:!!d||!!m,children:[r&&s.jsx(N,{children:s.jsx(ie,{variant:"h2",children:r})}),u&&s.jsx(N,{children:s.jsx(ue,{html:u})}),d&&s.jsx(N,{children:s.jsx(de,{...d,onChange:(c,h)=>{i("form",{data:h,formKey:d.schema.id,actionKey:c})}})}),m&&s.jsx(N,{children:s.jsx(me,{items:Object.keys(m).map(c=>({label:m[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`
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  left: -10000000px;
+  top: auto;
+`,We=()=>{const{skipToLatestMessageLabel:t="Skip to latest message"}=n.useProperties(),e=n.useContainer(),o=()=>{const a=e.get("widgetDOMElement");if(a){const i=a.querySelectorAll(".humany-conversation-entry");i.length&&i[i.length-1].focus()}};return s.jsx(Ue,{className:"humany-skip-to-latest-message",onKeyDown:a=>{(a.key==="Enter"||a.keyCode===13)&&o()},onClick:o,children:t})},Ue=l.button`
+  position: absolute;
+  bottom: 60px;
+  text-align: center;
+  background-color: white;
+  text-decoration: none;
+  padding: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
+  border-radius: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
+  left: -10000000px;
+  &:focus-visible {
+    left: 50%;
+    transform: translateX(-50%);
+    ${n.borderTabStyle};
+  }
+`,V=()=>{const t=n.useContainer(),e=g.useCallback(c=>{c&&setTimeout(()=>{c.scrollIntoView({block:"start",behavior:"smooth"})},250)},[]),[o,a]=n.useScroll(!0),{messages:i,loading:r,typingActors:u=[],providers:m=[]}=n.useProperties(),d=()=>u&&u.length?u.map((c,h)=>s.jsx(O,{id:`typing_${c.name}`,children:s.jsx(U,{timestamp:Date.now(),sender:c,children:s.jsx(K,{boxed:!0,ref:e})})},`typing_${c.name}`)):null,f=g.useRef((i==null?void 0:i.length)||0),$=m.includes("ace-knowledge-bot");return g.useEffect(()=>{const c=t.get("widgetDOMElement");if(c&&$){const h=c.querySelectorAll(".humany-conversation-entry");h.length&&h.length>f.current&&(f.current=h.length,h[h.length-1].focus())}}),s.jsxs(s.Fragment,{children:[s.jsxs(Ve,{tabIndex:0,scrollableCss:o,ref:a,children:[i&&i.length?i.map((c,h)=>{const{type:b,timestamp:x,sender:j,content:p}=c;return s.jsx(O,{className:"humany-conversation-entry",tabIndex:-1,children:s.jsx(Fe,{...c,ref:e})},`${b}_${j==null?void 0:j.name}_${x}_${p[0].key}`)}):null,d(),r&&s.jsx(O,{children:s.jsx(K,{ref:e})})]}),s.jsx(Q,{}),s.jsx(We,{})]})},Ve=l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 0 1 100%;
+  padding: 0 ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
+  ${t=>!!t.scrollableCss&&t.scrollableCss};
+  &:focus-visible {
+    ${t=>n.borderTabStyle(t)};
+  }
+`,O=l.div`
+  margin: 0;
+  margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
+
+  &:first-of-type {
+    margin-top: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
+  }
+
+  &:last-of-type {
+    padding-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
+  }
+
+  & span,
+  p,
+  a,
+  div {
+    font-weight: 300;
+  }
+
+  & b,
+  h1 {
+    font-weight: normal;
+  }
+
+  &:focus-visible {
+    ${n.borderTabStyle}
+    border-radius: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
+  }
+  ${t=>n.headingElement(t)("h1",v.css`
+        font-weight: normal;
+      `)}
+`,_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)`
+  z-index: 11;
+  top: auto;
+  height: 65%;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  border-top-right-radius: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.large}};
+  border-top-left-radius: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.large}};
+`,Ge=l.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  padding: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  ${t=>t.theme.border&&`border-bottom: ${t.theme.border};`}
+`,Je=l(n.Typography)`
+  font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.medium}};
+  color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+  margin: 0;
+`,Qe=l(n.Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}} ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
+  ${t=>t.theme.borderRadius&&`border-radius: ${t.theme.borderRadius};`}
+
+  &:focus-visible {
+    ${n.borderTabStyle};
+  }
+
+  svg line {
+    stroke: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.text}};
+  }
+`,Ze=({className:t,...e})=>{const{overlay:o,overlayConversationHeader:a,overlayConversationCloseLabel:i,conversationControllerId:r}=n.useProperties(),u=n.useDispatch(),d=n.useContainer().get("$settings");return s.jsx(n.ConversationContext.Provider,{value:r?{id:r}:null,children:s.jsxs(W.Provider,{value:d==null?void 0:d.language,children:[s.jsx(et,{"aria-live":"polite",...e,className:w.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`
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+`;exports.default=Ze;