@telia-ace/widget-conversation 1.1.2-rc.1 → 1.1.2-rc.11

package/components/conversation/plugin.d.ts

@@ -40,6 +40,7 @@ export type ConversationComponentProperties = {
         action: string;
         label: string;
     };
+    skipToLatestMessageLabel?: string;
 };
 export declare const ConversationComponent: (container: Container) => Promise<void>;
 export {};

package/components/conversation/ui/language-context.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LanguageContext: React.Context<any>;

package/components/conversation/ui/message-types/timestamp.d.ts

@@ -3,6 +3,7 @@ type Props = {
     className?: string;
     name?: string;
     timestamp?: number | null;
+    ariaHidden?: boolean;
 };
 declare const Timestamp: React.FC<Props>;
 export default Timestamp;

package/conversation-40b46299.js

@@ -0,0 +1,618 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("@emotion/styled"),n=require("@telia-ace/widget-ui"),z=require("@telia-ace/widget-utilities"),f=require("@emotion/react"),y=require("react"),Q=require("@telia-ace/widget-forms"),$=require("./index.js");require("@telia-ace/widget-core");require("@telia-ace/widget-services");require("@telia-ace/widget-plugins");const Z=({className:t})=>{const[e,r]=y.useState(""),[o,a]=y.useState(0),[l,d]=y.useState(0),u=n.useIsTabbing(),h=n.useDispatch(),b=n.useContainer(),{inputPlaceholder:p="Type your message",inputHidden:c=!1,inputDisabled:g=!1,sendButtonLabel:j="Send message",inputMultiline:k=!0,secondaryAction:x,skipToLatestMessageLabel:T="Skip to latest message"}=n.useProperties(),[N,v]=n.useScroll(!0);y.useEffect(()=>{if(v.current){const{lineHeight:m,maxHeight:S}=getComputedStyle(v.current);if(m&&m.indexOf("px")>-1){const C=m.split("px"),G=parseInt(C[0],10);a(G);const J=S.split("px");d(parseInt(J[0],10))}}},[v.current]);const I=m=>{!m.shiftKey||!k?(m.preventDefault(),e&&e.length>0&&(h("user-submit",{text:e}),r(""),B(""))):e.length<1&&m.preventDefault()},Y=m=>{x&&(m.preventDefault(),h("action",{actionKey:x.action,...x}))},X=m=>{if(k&&v.current){const S=v.current.scrollHeight;if(S>o){v.current.style.height="auto";let C=S;m.length<1&&(C=o),v.current.style.height=`${C}px`,C>=l?v.current.style.overflowY="scroll":v.current.style.overflowY="hidden"}}},B=m=>{X(m),r(m),m&&m.length>0&&h("user-typing",{textLength:m.length})},K=()=>{const m=b.get("widgetDOMElement");if(m){const S=m.querySelectorAll(".humany-conversation-entry");S.length&&S[S.length-1].focus()}};return c?null:s.jsxs(re,{grow:k,className:z.appendClassNames("humany-conversation-input",t),scrollableCss:N,isTabbing:u,children:[x&&s.jsx(ne,{disabled:g,onClick:Y,title:x.label,"aria-label":x.label,children:s.jsx(n.SymbolBadge,{size:24,symbol:{type:"Svg",content:x.icon||"browse"}})}),k?s.jsx(te,{value:e,onChange:B,onEnter:I,disabled:g,"aria-label":p,placeholder:p,type:"textarea",rows:1,ref:v}):s.jsx(se,{value:e,onChange:B,onEnter:I,disabled:g,"aria-label":p,placeholder:p}),s.jsx(W,{disabled:!1,onClick:I,title:j,"aria-label":j,children:s.jsx(oe,{size:22,symbol:{type:"Svg",content:"send"},hasContent:!!e&&!!e.length})}),s.jsx(ee,{className:"humany-skip-to-latest-message",onKeyDown:m=>{(m.key==="Enter"||m.keyCode===13)&&K()},onClick:K,children:T})]})},ee=i.button`
+  position: absolute;
+  bottom: 112px;
+  text-align: center;
+  background-color: white;
+  padding: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.small}};
+  text-decoration: none;
+  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};
+  }
+`,te=i(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;
+  }
+`,se=i(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;
+  }
+`,W=i(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};
+  }
+`,ne=i(W)`
+  border-right: ${t=>t.theme.border};
+  margin: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}} 0;
+`,re=i.div`
+  ${t=>t.grow?f.css`
+          min-height: 50px;
+          max-height: 150px;
+        `:f.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}
+  }
+`,oe=i(({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"}};
+  }
+`,ae=i.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}};
+    }
+  }
+`,ie=f.keyframes`
+  0% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`,le=i.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: ${ie} 1s infinite;
+  }
+  > div:nth-of-type(2) {
+    animation-delay: 100ms;
+  }
+  > div:nth-of-type(3) {
+    animation-delay: 200ms;
+  }
+`,O=i.div`
+  grid-area: content;
+  max-width: 100%;
+  overflow: hidden;
+`,ce=i(n.Typography)`
+  font-size: ${t=>{var e;return(e=t.theme.fonts)==null?void 0:e.normal}};
+  font-weight: normal;
+  margin: 0;
+`,R=i.div`
+  display: flex;
+  ${t=>t.left&&"justify-content: start;"};
+  ${t=>t.center&&"justify-content: center;"};
+  ${t=>t.right&&"justify-content: end;"};
+`,E=i.div`
+  ${t=>{var e;return t.padded&&`padding: ${(e=t.theme.sizes)==null?void 0:e.medium};`}}
+  ${t=>!t.user&&t.stacked&&de(t.stacked,t.theme)}
+    ${t=>t.user&&t.stacked&&me(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%;"}
+`,de=(t,e)=>{var o,a;const r=f.css`
+    background-color: ${(o=e.colors)==null?void 0:o.accent};
+    color: ${(a=e.colors)==null?void 0:a.text};
+    ${e.border&&`border: ${e.border};`};
+  `;return e.borderRadius?f.css`
+    ${r}
+
+    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};
+        `}
+  `:r},me=(t,e)=>{var o,a;const r=f.css`
+    background-color: ${(o=e.colors)==null?void 0:o.primary};
+    color: ${(a=e.colors)==null?void 0:a.accent};
+  `;return e.borderRadius?f.css`
+    ${r}
+
+    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};
+        `}
+  `:r},M=i.div`
+  margin-bottom: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.normal}};
+  &:last-child {
+    margin-bottom: 0;
+  }
+`,w=t=>{var e,r;return f.css`
+  margin: ${(e=t.theme.sizes)==null?void 0:e.medium} 0;
+  padding: 0 ${(r=t.theme.sizes)==null?void 0:r.medium};
+`},ue=i(Q.FormComponent)`
+  & button.humany-form-component-button {
+    ${t=>{var e,r,o,a;return((e=t.theme.colors)==null?void 0:e.primary)&&((r=t.theme.colors)==null?void 0:r.accent)&&n.invertedHoverButton({active:!1,primaryColor:(o=t.theme.colors)==null?void 0:o.primary,secondaryColor:(a=t.theme.colors)==null?void 0:a.accent,theme:t.theme})}};
+    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}};
+    }
+  }
+`,he=i(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}};
+    }
+  }
+`,ge=i(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}};
+  }
+`,ye=i.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;
+  }
+`,q=y.forwardRef(({boxed:t,className:e,agentData:r},o)=>s.jsx(O,{ref:o,children:s.jsx(R,{left:t,center:!t,children:s.jsx(E,{padded:!!t,stacked:t?"first":void 0,children:s.jsxs(le,{children:[s.jsx("div",{}),s.jsx("div",{}),s.jsx("div",{})]})})})})),U=y.createContext(null),fe=i.p`
+  && {
+    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}};
+`,P=(t,e)=>new Date(t).toLocaleTimeString(e||[],{hour:"numeric",minute:"2-digit"}),L=({className:t,name:e,timestamp:r,ariaHidden:o=!1})=>{const a=y.useContext(U);if(!e&&!r)return null;let l="";return e?r?l=`${e}: ${P(r,a)}`:l=e:r&&(l=P(r,a)),s.jsx(fe,{"aria-hidden":o,children:l})},V=({className:t,children:e,sender:r,timestamp:o})=>{const{avatar:a,name:l}=r,{avatarSize:d}=n.useProperties();return s.jsxs(be,{hasAvatar:!!a,className:z.appendClassNames(t,"humany-conversation-agent-message"),children:[a&&s.jsx(ae,{avatarSize:d,children:typeof a=="string"?s.jsx("img",{src:a}):s.jsx(n.SymbolBadge,{symbol:a})}),e,s.jsx(L,{name:l,timestamp:o,ariaHidden:!0})]})},be=i.div`
+  display: grid;
+  margin-right: 10%;
+  width: 90%;
+  ${t=>t.hasAvatar?f.css`
+          grid-template-columns: auto 1fr;
+          grid-template-rows: 1fr auto;
+          grid-template-areas:
+            'avatar content'
+            '. info';
+        `:f.css`
+          grid-template-columns: 1fr;
+          grid-template-rows: 1fr auto;
+          grid-template-areas:
+            'content'
+            'info';
+        `};
+`,pe=y.forwardRef(({className:t,children:e,timestamp:r,discrete:o,fullWidth:a},l)=>s.jsx(xe,{ref:l,className:z.appendClassNames(t,"humany-conversation-system-message"),fullWidth:a,children:o?s.jsxs(ve,{className:"humany-conversation-discrete-message",children:[e,s.jsx(L,{timestamp:r})]}):s.jsxs(s.Fragment,{children:[e,s.jsx(L,{timestamp:r})]})})),xe=i.div`
+  ${t=>t.fullWidth&&"width: 100%"};
+  padding: 0 ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.large}};
+  overflow: auto;
+`,ve=i.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;
+  }
+`,$e=({className:t,children:e,timestamp:r})=>{const{userLabel:o=""}=n.useProperties();return s.jsxs(je,{className:z.appendClassNames(t,"humany-conversation-user-message"),children:[e,s.jsx(L,{name:o,timestamp:r,ariaHidden:!0})]})},je=i.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})),Se=({header:t,actions:e,dispatch:r})=>s.jsx(we,{className:"humany-conversation-button-list",header:t,items:D(e),renderItem:o=>{var l;const a=!!((l=o==null?void 0:o.data)!=null&&l.href);return s.jsx("li",{children:a?s.jsxs(ke,{onClick:()=>{r("action",o)},href:o.data.href,target:o.data.target,"aria-label":o.label,title:o.label,children:[s.jsx(n.SymbolBadge,{symbol:o.symbol}),o.label]}):s.jsxs(Ce,{onClick:()=>{r("action",o)},"aria-label":o.label,title:o.label,children:[s.jsx(n.SymbolBadge,{symbol:o.symbol}),o.label]})},o.actionKey)}}),we=i(n.ItemList)`
+  ${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;
+    }
+  }
+  ${w}
+`,ke=i(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}};
+  }
+`,Ce=i(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}};
+  }
+`,Le=({type:t,content:e={}})=>{const r=n.useComponent(t);return!r||!t?null:s.jsx(y.Suspense,{fallback:null,children:s.jsx(r,{...e})})},ze=({body:t})=>s.jsx(Te,{html:t}),Te=i(n.Html)`
+  ${n.genericHtml}
+  color: inherit;
+  white-space: pre-wrap;
+  ${w}
+  a {
+    color: ${t=>t.theme.colors.link};
+    &:focus-visible {
+      ${n.borderTabStyle};
+    }
+  }
+`,Ne=({header:t,actions:e,dispatch:r})=>s.jsx(Me,{className:"humany-conversation-item-list",header:t,items:D(e),renderItem:o=>{var a;return s.jsx("li",{children:s.jsxs(Ie,{children:[((a=o.symbol)==null?void 0:a.content)&&s.jsx("div",{className:"item-icon",children:s.jsx(n.SymbolBadge,{size:22,symbol:{type:o.symbol.type,content:o.symbol.content}})}),s.jsxs("div",{className:"item-body",children:[s.jsx(n.Button,{onClick:()=>{r("action",o)},"aria-label":o.label,title:o.label,children:o.label}),o.description&&s.jsx("p",{children:o.description})]})]})},o.actionKey)}}),Me=i(n.ItemList)`
+  ${n.itemList}
+
+  > .humany-paragraph {
+    ${w}
+    margin-bottom: 0;
+
+    h1 {
+      margin: 0;
+    }
+  }
+
+  ${t=>n.headingElement(t)("h1",f.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;
+    }
+  }
+`,Ie=i.div`
+  display: flex;
+  gap: ${t=>{var e;return(e=t.theme.sizes)==null?void 0:e.medium}};
+  ${w}
+
+  .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;
+      }
+    }
+  }
+`,Be=({header:t,actions:e,dispatch:r})=>{const o=n.usePrevious(e),a=y.useRef(),l=n.useIsTabbing();return y.useEffect(()=>{if(o&&Array.isArray(e)&&Array.isArray(o)&&o.length<e.length&&a.current){const d=a.current.querySelectorAll(".humany-conversation-link-list > ul > li"),u=d[o.length];if(d.length===e.length&&o.length){const h=d[o.length-1];if(h){const b=h.querySelector(".humany-button");b&&b.focus()}}else u&&new MutationObserver((b,p)=>{b.forEach(c=>{if(c.addedNodes){const g=Array.from(c.addedNodes).find(j=>j.tagName==="BUTTON");g&&z.htmlParentContains(a.current,document.activeElement)&&(l&&g.focus(),p.disconnect())}})}).observe(u,{attributes:!1,characterData:!1,childList:!0,subtree:!0,attributeOldValue:!1,characterDataOldValue:!1})}}),s.jsx(He,{ref:a,className:"humany-conversation-link-list",header:t,items:D(e),renderItem:d=>s.jsx("li",{children:s.jsxs(Ae,{help:d.actionKey==="help",onClick:()=>{r("action",d)},"aria-label":d.label,title:d.label,children:[d.label,d.actionKey==="help"&&s.jsx(n.SymbolBadge,{size:14,symbol:{type:"Svg",content:"caret-down"}})]})},d.actionKey)})},He=i(n.ItemList)`
+  ${n.itemList}
+  ${w}
+
+    ${t=>n.headingElement(t)("h1",f.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;
+    }
+  }
+`,Ae=i(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,r;return t.help&&f.css`
+      color: ${(e=t.theme.colors)==null?void 0:e.text};
+      text-decoration: underline;
+
+      i,
+      svg {
+        margin-left: ${(r=t.theme.sizes)==null?void 0:r.small};
+      }
+    `}}
+
+  &:focus-visible {
+    ${n.borderTabStyle}
+    span {
+      color: ${t=>{var e;return(e=t.theme.colors)==null?void 0:e.primary}};
+      text-decoration: underline;
+    }
+  }
+`,Oe=()=>s.jsx(Re,{className:"humany-conversation-separator"}),Re=i.div`
+  ${t=>t.theme.border&&`border-bottom: ${t.theme.border};`}
+  width: 100%;
+`,Ee=({text:t})=>s.jsx(De,{className:"humany-conversation-text",variant:"span",children:t}),De=i(n.Typography)`
+  ${w}
+`,Ke=({header:t="Video call",acceptLabel:e="Accept",declineLabel:r="Decline",dispatch:o})=>{const a=y.useMemo(()=>[{label:e,actionKey:"accept-video-call",symbol:{type:"Svg",content:"video"}},{label:r,actionKey:"decline-video-call",symbol:{type:"Svg",content:"close"}}],[e,r]);return s.jsx(qe,{className:"humany-conversation-video-request",header:t,items:a,renderItem:l=>{const d=l.actionKey==="accept-video-call"?"#70c48e":"#da5c85";return s.jsx("li",{children:s.jsx(Pe,{onClick:()=>{o("action",l)},"aria-label":l.label,title:l.label,bgColor:d,children:s.jsx(n.SymbolBadge,{symbol:l.symbol,size:25})})},l.actionKey)}})},qe=i(n.ItemList)`
+  ${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=>w(t)}
+`,Pe=i(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;
+    }
+  }
+`,Fe=([t,e])=>({type:t,content:e}),We=({items:t,dispatch:e})=>s.jsx(Ue,{role:"none",className:"humany-message-list",items:t.map(Fe),renderLi:!0,renderItem:r=>{switch(r.type){case $.ConversationMessageListItemType.Text:return s.jsx(Ee,{text:r.content});case $.ConversationMessageListItemType.HTML:return s.jsx(ze,{...r.content});case $.ConversationMessageListItemType.Separator:return s.jsx(Oe,{...r.content});case $.ConversationMessageListItemType.ItemList:return s.jsx(Ne,{...r.content,dispatch:e});case $.ConversationMessageListItemType.LinkList:return s.jsx(Be,{...r.content,dispatch:e});case $.ConversationMessageListItemType.ButtonList:return s.jsx(Se,{...r.content,dispatch:e});case $.ConversationMessageListItemType.VideoRequest:return s.jsx(Ke,{...r.content,dispatch:e});default:return s.jsx(Le,{type:r.type,content:r.content})}}}),Ue=i(n.List)`
+  ${n.list}
+
+  > li {
+    margin: 0;
+  }
+`,Ve=y.forwardRef(({className:t,timestamp:e,sender:r,type:o,content:a},l)=>{const d=y.useCallback(c=>{let g="first";return a.length>1&&(g=c===0?"first":c+1===a.length?"last":"middle"),g},[a]),{userLabel:u=""}=n.useProperties(),h=()=>s.jsx(s.Fragment,{children:a.map(c=>{const{key:g,body:j,title:k,form:x,actions:T}=c,N=!!j&&!k&&!x&&!T;return s.jsx(pe,{className:t,discrete:N,ref:l,timestamp:e,fullWidth:!!x||!!T,children:N&&j?s.jsx(n.Html,{html:j}):s.jsx(H,{isSystem:!0,content:c})},g)})}),b=()=>s.jsxs(s.Fragment,{children:[s.jsx(F,{className:"humany-sr-only",children:s.jsx(L,{name:r==null?void 0:r.name,timestamp:e})}),s.jsx(V,{sender:r,timestamp:e,className:t,children:s.jsx(O,{className:"humany-message-content-bundle",children:a.map((c,g)=>s.jsx(R,{className:"humany-message-container",left:!0,ref:l,children:s.jsx(H,{content:c,stacked:d(g)})},c.key))})})]}),p=()=>s.jsxs(s.Fragment,{children:[s.jsx(F,{className:"humany-sr-only",children:s.jsx(L,{name:u,timestamp:e})}),s.jsx($e,{timestamp:e,className:t,children:s.jsx(O,{className:"humany-message-content-bundle",children:a.map((c,g)=>s.jsx(R,{className:"humany-message-container",right:!0,ref:l,children:s.jsx(H,{isUser:!0,content:c,stacked:d(g)})},c.key))})})]});switch(o){case $.ConversationMessageType.System:return h();case $.ConversationMessageType.Agent:return b();case $.ConversationMessageType.User:return p();default:return null}}),H=({content:t,isUser:e,isSystem:r,stacked:o})=>{const a=n.useDispatch(),{title:l,body:d,actions:u,form:h,items:b}=t;return b?s.jsx(E,{className:"humany-message-content",user:!!e,stacked:o,children:s.jsx(We,{items:b,dispatch:a})}):s.jsxs(E,{className:"humany-message-content",padded:!r,user:!!e,stacked:o,fullWidth:!!h||!!u,children:[l&&s.jsx(M,{children:s.jsx(ce,{variant:"h2",children:l})}),d&&s.jsx(M,{children:s.jsx(he,{html:d})}),h&&s.jsx(M,{children:s.jsx(ue,{...h,onChange:(c,g)=>{a("form",{data:g,formKey:h.schema.id,actionKey:c})}})}),u&&s.jsx(M,{children:s.jsx(ge,{items:Object.keys(u).map(c=>({label:u[c],actionKey:c})),renderItem:c=>s.jsx("li",{children:s.jsx(ye,{onClick:()=>{a("action",c.actionKey)},children:c.label})},c.actionKey)})})]})},F=i.div`
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+`,_=()=>{const t=y.useCallback(u=>{u&&setTimeout(()=>{u.scrollIntoView({block:"start",behavior:"smooth"})},250)},[]),[e,r]=n.useScroll(!0),{messages:o,loading:a,typingActors:l=[]}=n.useProperties(),d=()=>l&&l.length?l.map((u,h)=>s.jsx(A,{id:`typing_${u.name}`,children:s.jsx(V,{timestamp:Date.now(),sender:u,children:s.jsx(q,{boxed:!0,ref:t})})},`typing_${u.name}`)):null;return s.jsxs(s.Fragment,{children:[s.jsxs(_e,{tabIndex:0,scrollableCss:e,ref:r,children:[o&&o.length?o.map((u,h)=>{const{type:b,timestamp:p,sender:c,content:g}=u;return s.jsx(A,{className:"humany-conversation-entry",tabIndex:-1,children:s.jsx(Ve,{...u,ref:t})},`${b}_${c==null?void 0:c.name}_${p}_${g[0].key}`)}):null,d(),a&&s.jsx(A,{children:s.jsx(q,{ref:t})})]}),s.jsx(Z,{})]})},_e=i.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)};
+  }
+`,A=i.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",f.css`
+        font-weight: normal;
+      `)}
+`,Ye=({dispatch:t})=>{const e=y.useRef(null);return y.useEffect(()=>{e.current&&e.current.parentNode&&t("overlay-mounted",e.current)},[e]),s.jsx(n.WidgetOverlayOutlet,{portalId:"humany-conversation-overlay-portal",className:"humany-conversation-overlay-outlet",ref:e})},Xe=({dispatch:t,header:e,buttonLabel:r})=>s.jsxs(Ge,{portalId:"humany-conversation-portal",className:"humany-conversation-outlet",children:[s.jsxs(Je,{className:"humany-conversation-outlet-head",children:[s.jsx(Ze,{className:"humany-conversation-outlet-head-button","aria-label":r,title:r,onClick:()=>t("hide-overlay-conversation"),children:s.jsx(n.SymbolBadge,{symbol:{type:"Svg",content:"caret-down"},size:20})}),e&&s.jsx(Qe,{className:"humany-conversation-outlet-header",variant:"h1",children:e})]}),s.jsx(_,{})]}),Ge=i(n.WidgetOverlayOutlet)`
+  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}};
+`,Je=i.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};`}
+`,Qe=i(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;
+`,Ze=i(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}};
+  }
+`,et=({className:t,...e})=>{const{overlay:r,overlayConversationHeader:o,overlayConversationCloseLabel:a,conversationControllerId:l}=n.useProperties(),d=n.useDispatch(),h=n.useContainer().get("$settings");return s.jsx(n.ConversationContext.Provider,{value:l?{id:l}:null,children:s.jsxs(U.Provider,{value:h==null?void 0:h.language,children:[s.jsx(tt,{"aria-live":"assertive",...e,className:z.appendClassNames(t,"humany-conversation-component"),children:s.jsx(_,{})}),r&&s.jsxs(s.Fragment,{children:[s.jsx(Ye,{dispatch:d}),r.conversation&&s.jsx(Xe,{dispatch:d,header:o,buttonLabel:a})]})]})})},tt=i.div`
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+`;exports.default=et;