@telia-ace/widget-conversation 1.0.41 → 1.1.1-rc.0

package/conversation-905bdeb3.js

@@ -0,0 +1,569 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("./index-1180f4a4.js"),u=require("react");require("react-dom");const L=require("./use-dispatch-7cf7db21.js"),_=(e,t)=>{const r=L.useComponentDescriptor(),o=n.useContainer(),[a,i]=u.useState(void 0),m=n.useIsMounted(),c=e||r.type||"";return u.useEffect(()=>{if(c){let y;return(t||o).getAsync("componentResolver").then(g=>{if(m.current){const d=g.getComponent(c);i(d)}y=g.registerResolver(c,d=>{m.current&&i(d)})}),()=>{y&&y()}}},[m,c,t,o]),a},V=()=>{const[e,t]=u.useState(!1);return u.useEffect(()=>{const r=()=>{t(!1)},o=a=>{a.keyCode===9&&t(!0)};return window.addEventListener("keydown",o),window.addEventListener("click",r),()=>{window.removeEventListener("keydown",o),window.removeEventListener("click",r)}},[]),e},Y=({className:e})=>{const[t,r]=u.useState(""),[o,a]=u.useState(!1),[i,m]=u.useState(0),[c,y]=u.useState(0),g=V(),d=L.useDispatch(),{inputPlaceholder:l="Type your message",inputHidden:f=!1,inputDisabled:$=!1,sendButtonLabel:w="Send message",inputMultiline:x=!0,secondaryAction:p}=n.useProperties(),[P,b]=n.useScroll(!0);u.useEffect(()=>{if(b.current){const{lineHeight:h,maxHeight:S}=getComputedStyle(b.current);if(h&&h.indexOf("px")>-1){const j=h.split("px"),q=parseInt(j[0],10);m(q);const U=S.split("px");y(parseInt(U[0],10))}}},[b.current]);const z=h=>{!h.shiftKey||!x?(h.preventDefault(),t&&t.length>0&&(d("user-submit",{text:t}),r(""),T(""))):t.length<1&&h.preventDefault()},F=h=>{p&&(h.preventDefault(),d("action",{actionKey:p.action,...p}))},W=h=>{if(x&&b.current){const S=b.current.scrollHeight;if(S>i){b.current.style.height="auto";let j=S;h.length<1&&(j=i),b.current.style.height=`${j}px`,j>=c?b.current.style.overflowY="scroll":b.current.style.overflowY="hidden"}}},T=h=>{W(h),r(h),h&&h.length>0&&d("user-typing",{textLength:h.length})};return f?null:s.jsxs(X,{grow:x,className:n.appendClassNames("humany-conversation-input",e),"data-has-focus":o,scrollableCss:P,isTabbing:g,children:[p&&s.jsx(Q,{disabled:$,onClick:F,title:p.label,"aria-label":p.label,children:s.jsx(n.SymbolBadge,{size:24,symbol:{type:"Svg",content:p.icon||"browse"}})}),x?s.jsx(G,{value:t,onChange:T,onEnter:z,disabled:$,"aria-label":l,placeholder:l,onFocusChange:a,type:"textarea",rows:1,ref:b}):s.jsx(J,{value:t,onChange:T,onEnter:z,disabled:$,"aria-label":l,placeholder:l,onFocusChange:a}),s.jsx(K,{disabled:$,onClick:z,title:w,"aria-label":w,children:s.jsx(Z,{size:22,symbol:{type:"Svg",content:"send"},hasContent:!!t&&!!t.length})})]})},G=n.newStyled(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: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+  border: none;
+  transition: height 200ms linear;
+  outline: none;
+`,J=n.newStyled(n.Input)`
+  flex: 1;
+  border: none;
+  background-color: transparent;
+  font-weight: 300;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+  line-height: 1.2em;
+  outline: none;
+  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
+  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  &::placeholder {
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.textLight}};
+    font-style: italic;
+  }
+`,K=n.newStyled(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};
+  }
+`,Q=n.newStyled(K)`
+  border-right: ${e=>e.theme.border};
+  margin: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}} 0;
+`,X=n.newStyled.div`
+  ${e=>e.grow?n.css`
+          min-height: 50px;
+          max-height: 150px;
+        `:n.css`
+          height: 50px;
+        `}
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.accent}};
+  border-top: ${e=>e.theme.inputBorder};
+  ${e=>e["data-has-focus"]&&e.isTabbing&&n.borderTabStyle}
+  textarea {
+    ${e=>!!e.scrollableCss&&e.scrollableCss}
+  }
+`,Z=n.newStyled(({hasContent:e,...t})=>s.jsx(n.SymbolBadge,{...t}))`
+  line,
+  path {
+    stroke: ${e=>{var t;return e.hasContent?(t=e.theme.colors)==null?void 0:t.primary:"#a6a6a6"}};
+    fill: ${e=>{var t;return e.hasContent?(t=e.theme.colors)==null?void 0:t.primary:"#a6a6a6"}};
+  }
+`,ee=n.newStyled.div`
+    width: ${e=>e.avatarSize||"32px"};
+    height: ${e=>e.avatarSize||"32px"};
+    border-radius: 50%;
+    background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.accent}};
+    border: ${e=>e.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: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+
+    > img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    > svg {
+        width: 90%;
+        height: 90%;
+        padding: 10%;
+        color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+
+        line,
+        path,
+        circle,
+        fill {
+            stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+        }
+    }
+`,te=n.keyframes`
+  0% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`,ne=n.newStyled.div`
+    display: flex;
+    justify-content: center;
+    > div {
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        margin: 5px;
+        background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+        animation: ${te} 1s infinite;
+    }
+    > div:nth-of-type(2) {
+        animation-delay: 100ms;
+    }
+    > div:nth-of-type(3) {
+        animation-delay: 200ms;
+    }
+`,N=n.newStyled.div`
+    grid-area: content;
+    max-width: 100%;
+    overflow: hidden;
+`,se=n.newStyled(n.Typography)`
+    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+    font-weight: normal;
+    margin: 0;
+`,B=n.newStyled.div`
+    display: flex;
+    ${e=>e.left&&"justify-content: start;"};
+    ${e=>e.center&&"justify-content: center;"};
+    ${e=>e.right&&"justify-content: end;"};
+`,H=n.newStyled.div`
+    ${e=>{var t;return e.padded&&`padding: ${(t=e.theme.sizes)==null?void 0:t.medium};`}}
+    ${e=>!e.user&&e.stacked&&re(e.stacked,e.theme)}
+    ${e=>e.user&&e.stacked&&oe(e.stacked,e.theme)}
+
+    display: inline-block;
+    margin-top: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+    && > * {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-all;
+        word-break: break-word;
+        hyphens: auto;
+    }
+    max-width: 100%;
+    ${e=>e.fullWidth&&"width: 100%;"}
+`,re=(e,t)=>{var o,a;const r=n.css`
+        background-color: ${(o=t.colors)==null?void 0:o.accent};
+        color: ${(a=t.colors)==null?void 0:a.text};
+        ${t.border&&`border: ${t.border};`};
+    `;return t.borderRadius?n.css`
+        ${r}
+
+        border-top-right-radius: ${t.borderRadius};
+        border-bottom-right-radius: ${t.borderRadius};
+
+        ${e==="first"&&`
+            border-top-left-radius: ${t.borderRadius};
+        `}
+
+        ${e==="last"&&`
+            border-bottom-left-radius: ${t.borderRadius};
+        `}
+    `:r},oe=(e,t)=>{var o,a;const r=n.css`
+        background-color: ${(o=t.colors)==null?void 0:o.primary};
+        color: ${(a=t.colors)==null?void 0:a.accent};
+    `;return t.borderRadius?n.css`
+        ${r}
+
+        border-top-left-radius: ${t.borderRadius};
+        border-bottom-left-radius: ${t.borderRadius};
+
+        ${e==="first"&&`
+            border-top-right-radius: ${t.borderRadius};
+        `}
+
+        ${e==="last"&&`
+            border-bottom-right-radius: ${t.borderRadius};
+        `}
+    `:r},C=n.newStyled.div`
+    margin-bottom: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+    &:last-child {
+        margin-bottom: 0;
+    }
+`,v=e=>{var t,r;return n.css`
+    margin: ${(t=e.theme.sizes)==null?void 0:t.medium} 0;
+    padding: 0 ${(r=e.theme.sizes)==null?void 0:r.medium};
+`},ae=n.newStyled(n.Form)`
+    & button.humany-form-component-button {
+        ${e=>{var t,r,o,a;return((t=e.theme.colors)==null?void 0:t.primary)&&((r=e.theme.colors)==null?void 0:r.accent)&&n.invertedHoverButton({active:!1,primaryColor:(o=e.theme.colors)==null?void 0:o.primary,secondaryColor:(a=e.theme.colors)==null?void 0:a.accent,theme:e.theme})}};
+        display: block;
+        width: 100%;
+        margin-bottom: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+    }
+    & button.humany-form-component-submit {
+        width: 100%;
+        margin: 0;
+        :not(:last-child) {
+            margin-bottom: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+        }
+    }
+`,ie=n.newStyled(n.Html)`
+    white-space: pre-wrap;
+    a {
+        color: ${e=>e.theme.colors.link};
+        &:focus {
+            ${e=>{var t;return((t=e.theme.accessibility)==null?void 0:t.isTabbing)&&n.borderTabStyle}};
+        }
+    }
+`,le=n.newStyled(n.List)`
+    padding: 0;
+    list-style: none;
+    margin: 0 -${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+    > li {
+        margin: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+    }
+`,ce=n.newStyled.button`
+    ${e=>n.buttonCss(e)};
+    display: block;
+    background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+    width: 100%;
+    color: #fff;
+    &:focus-visible {
+        ${n.borderTabStyle}
+        background-color: transparent;
+    }
+`,A=u.forwardRef(({boxed:e,className:t,agentData:r},o)=>s.jsx(N,{ref:o,children:s.jsx(B,{left:e,center:!e,children:s.jsx(H,{padded:!!e,stacked:e?"first":void 0,children:s.jsxs(ne,{children:[s.jsx("div",{}),s.jsx("div",{}),s.jsx("div",{})]})})})})),de=n.newStyled.p`
+    && {
+        font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.small}};
+        font-weight: 300;
+    }
+    margin: 0;
+    line-height: 1.5em;
+    grid-area: info;
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+`,E=e=>new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}),k=({className:e,name:t,timestamp:r})=>{if(!t&&!r)return null;let o="";return t?r?o=`${t}: ${E(r)}`:o=t:r&&(o=E(r)),s.jsx(de,{children:o})},O=({className:e,children:t,sender:r,timestamp:o})=>{const{avatar:a,name:i}=r,{avatarSize:m}=n.useProperties();return s.jsxs(me,{hasAvatar:!!a,className:n.appendClassNames(e,"humany-conversation-agent-message"),children:[a&&s.jsx(ee,{avatarSize:m,children:typeof a=="string"?s.jsx("img",{src:a}):s.jsx(n.SymbolBadge,{symbol:a})}),t,s.jsx(k,{name:i,timestamp:o})]})},me=n.newStyled.div`
+  display: grid;
+  margin-right: 10%;
+  width: 90%;
+  ${e=>e.hasAvatar?n.css`
+          grid-template-columns: auto 1fr;
+          grid-template-rows: 1fr auto;
+          grid-template-areas:
+            'avatar content'
+            '. info';
+        `:n.css`
+          grid-template-columns: 1fr;
+          grid-template-rows: 1fr auto;
+          grid-template-areas:
+            'content'
+            'info';
+        `};
+`,ue=u.forwardRef(({className:e,children:t,timestamp:r,discrete:o,fullWidth:a},i)=>s.jsx(he,{ref:i,className:n.appendClassNames(e,"humany-conversation-system-message"),fullWidth:a,children:o?s.jsxs(ye,{className:"humany-conversation-discrete-message",children:[t,s.jsx(k,{timestamp:r})]}):s.jsxs(s.Fragment,{children:[t,s.jsx(k,{timestamp:r})]})})),he=n.newStyled.div`
+    ${e=>e.fullWidth&&"width: 100%"};
+    padding: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
+    overflow: auto;
+`,ye=n.newStyled.div`
+    text-align: center;
+    word-wrap: break-word;
+    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+    > p {
+        margin: 0;
+    }
+`,ge=({className:e,children:t,timestamp:r})=>{const{userLabel:o=""}=n.useProperties();return s.jsxs(pe,{className:n.appendClassNames(e,"humany-conversation-user-message"),children:[t,s.jsx(k,{name:o,timestamp:r})]})},pe=n.newStyled.div`
+    margin-left: 10%;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+`,R=e=>Array.isArray(e)?e:Object.keys(e).map(t=>({label:e[t],actionKey:t})),be=({header:e,actions:t,dispatch:r})=>s.jsx(fe,{className:"humany-conversation-button-list",header:e,items:R(t),renderItem:o=>s.jsx("li",{children:s.jsxs(xe,{onClick:()=>{r("action",o)},"aria-label":o.label,title:o.label,children:[s.jsx(n.SymbolBadge,{symbol:o.symbol}),o.label]})},o.actionKey)}),fe=n.newStyled(n.ItemList)`
+    ${n.itemList}
+    > ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+        > li {
+            margin: 0;
+        }
+    }
+    ${v}
+`,xe=n.newStyled(n.Button)`
+    ${n.buttonCss};
+
+    display: block;
+    padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+    background-color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+    width: 100%;
+    color: #ffffff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:focus-visible {
+        ${n.borderTabStyle}
+        background-color: transparent;
+    }
+
+    i,
+    svg {
+        margin-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
+    }
+`,ve=({type:e,content:t={}})=>{const r=_(e);return!r||!e?null:s.jsx(u.Suspense,{fallback:null,children:s.jsx(r,{...t})})},$e=({body:e})=>s.jsx(we,{html:e}),we=n.newStyled(n.Html)`
+    ${n.genericHtml}
+    color: inherit;
+    white-space: pre-wrap;
+    ${v}
+    a {
+        color: ${e=>e.theme.colors.link};
+        &:focus-visible {
+            ${n.borderTabStyle};
+        }
+    }
+`,je=({header:e,actions:t,dispatch:r})=>s.jsx(Se,{className:"humany-conversation-item-list",header:e,items:R(t),renderItem:o=>{var a;return s.jsx("li",{children:s.jsxs(Ce,{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)}}),Se=n.newStyled(n.ItemList)`
+    ${n.itemList}
+
+    > .humany-paragraph {
+        ${v}
+        margin-bottom: 0;
+
+        h1 {
+            margin: 0;
+        }
+    }
+
+    ${e=>n.headingElement(e)("h1",n.css`
+                white-space: normal;
+            `)}
+
+    > ul {
+        display: flex;
+        flex-direction: column;
+        gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+        > li {
+            margin: 0;
+        }
+    }
+
+    li {
+        border-bottom: ${e=>e.theme.border};
+
+        &:last-of-type {
+            border-bottom: none;
+        }
+    }
+`,Ce=n.newStyled.div`
+    display: flex;
+    gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
+    ${v}
+
+    .item-icon {
+    }
+
+    .item-body {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+
+        p {
+            margin: 0;
+            white-space: normal;
+        }
+    }
+
+    button {
+        background: transparent;
+        border: none;
+        font-family: inherit;
+        font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+
+        &:focus-visible {
+            ${n.borderTabStyle}
+            span {
+                color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+                text-decoration: underline;
+            }
+        }
+    }
+`,ke=({header:e,actions:t,dispatch:r})=>s.jsx(Le,{className:"humany-conversation-link-list",header:e,items:R(t),renderItem:o=>s.jsx("li",{children:s.jsxs(ze,{help:o.actionKey==="help",onClick:()=>{r("action",o)},"aria-label":o.label,title:o.label,children:[o.label,o.actionKey==="help"&&s.jsx(n.SymbolBadge,{size:14,symbol:{type:"Svg",content:"caret-down"}})]})},o.actionKey)}),Le=n.newStyled(n.ItemList)`
+    ${n.itemList}
+    ${v}
+
+    ${e=>n.headingElement(e)("h1",n.css`
+                white-space: normal;
+            `)}
+
+    > ul {
+        display: flex;
+        flex-direction: column;
+        gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+        > li {
+            margin: 0;
+        }
+    }
+`,ze=n.newStyled(n.Button)`
+    display: block;
+    text-align: left;
+    font-weight: 300;
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    ${e=>{var t,r;return e.help&&n.css`
+            color: ${(t=e.theme.colors)==null?void 0:t.text};
+            text-decoration: underline;
+
+            i,
+            svg {
+                margin-left: ${(r=e.theme.sizes)==null?void 0:r.small};
+            }
+        `}}
+
+    &:focus-visible {
+        ${n.borderTabStyle}
+        span {
+            color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+            text-decoration: underline;
+        }
+    }
+`,Te=()=>s.jsx(Ie,{className:"humany-conversation-separator"}),Ie=n.newStyled.div`
+    ${e=>e.theme.border&&`border-bottom: ${e.theme.border};`}
+    width: 100%;
+`,Me=({text:e})=>s.jsx(Ne,{className:"humany-conversation-text",variant:"span",children:e}),Ne=n.newStyled(n.Typography)`
+    ${v}
+`,Be=({header:e="Video call",acceptLabel:t="Accept",declineLabel:r="Decline",dispatch:o})=>{const a=u.useMemo(()=>[{label:t,actionKey:"accept-video-call",symbol:{type:"Svg",content:"video"}},{label:r,actionKey:"decline-video-call",symbol:{type:"Svg",content:"close"}}],[t,r]);return s.jsx(He,{className:"humany-conversation-video-request",header:e,items:a,renderItem:i=>{const m=i.actionKey==="accept-video-call"?"#70c48e":"#da5c85";return s.jsx("li",{children:s.jsx(Re,{onClick:()=>{o("action",i)},"aria-label":i.label,title:i.label,bgColor:m,children:s.jsx(n.SymbolBadge,{symbol:i.symbol,size:25})})},i.actionKey)}})},He=n.newStyled(n.ItemList)`
+    ${e=>n.itemList(e)}
+    > ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+        > li {
+            margin: 0;
+        }
+    }
+    ${e=>v(e)}
+`,Re=n.newStyled(n.Button)`
+    ${n.buttonCss};
+
+    background-color: ${e=>e.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: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+
+            path {
+                stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
+            }
+        }
+    }
+
+    i,
+    svg {
+        color: #fff;
+
+        path {
+            stroke: #fff;
+        }
+    }
+`,Ae=([e,t])=>({type:e,content:t}),Ee=({items:e,dispatch:t})=>s.jsx(Ke,{className:"humany-message-list",items:e.map(Ae),renderLi:!0,renderItem:r=>{switch(r.type){case n.ConversationMessageListItemType.Text:return s.jsx(Me,{text:r.content});case n.ConversationMessageListItemType.HTML:return s.jsx($e,{...r.content});case n.ConversationMessageListItemType.Separator:return s.jsx(Te,{...r.content});case n.ConversationMessageListItemType.ItemList:return s.jsx(je,{...r.content,dispatch:t});case n.ConversationMessageListItemType.LinkList:return s.jsx(ke,{...r.content,dispatch:t});case n.ConversationMessageListItemType.ButtonList:return s.jsx(be,{...r.content,dispatch:t});case n.ConversationMessageListItemType.VideoRequest:return s.jsx(Be,{...r.content,dispatch:t});default:return s.jsx(ve,{type:r.type,content:r.content})}}}),Ke=n.newStyled(n.List)`
+    ${n.list}
+
+    > li {
+        margin: 0;
+    }
+`,Oe=u.forwardRef(({className:e,timestamp:t,sender:r,type:o,content:a},i)=>{const m=u.useCallback(d=>{let l="first";return a.length>1&&(l=d===0?"first":d+1===a.length?"last":"middle"),l},[a]),c=()=>s.jsx(s.Fragment,{children:a.map(d=>{const{key:l,body:f,title:$,form:w,actions:x}=d,p=!!f&&!$&&!w&&!x;return s.jsx(ue,{className:e,discrete:p,ref:i,timestamp:t,fullWidth:!!w||!!x,children:p&&f?s.jsx(n.Html,{html:f}):s.jsx(I,{isSystem:!0,content:d})},l)})}),y=()=>s.jsx(O,{sender:r,timestamp:t,className:e,children:s.jsx(N,{className:"humany-message-content-bundle",children:a.map((d,l)=>s.jsx(B,{className:"humany-message-container",left:!0,ref:i,children:s.jsx(I,{content:d,stacked:m(l)})},d.key))})}),g=()=>s.jsx(ge,{timestamp:t,className:e,children:s.jsx(N,{className:"humany-message-content-bundle",children:a.map((d,l)=>s.jsx(B,{className:"humany-message-container",right:!0,ref:i,children:s.jsx(I,{isUser:!0,content:d,stacked:m(l)})},d.key))})});switch(o){case n.ConversationMessageType.System:return c();case n.ConversationMessageType.Agent:return y();case n.ConversationMessageType.User:return g();default:return null}}),I=({content:e,isUser:t,isSystem:r,stacked:o})=>{const a=L.useDispatch(),{title:i,body:m,actions:c,form:y,items:g}=e;return g?s.jsx(H,{className:"humany-message-content",user:!!t,stacked:o,children:s.jsx(Ee,{items:g,dispatch:a})}):s.jsxs(H,{className:"humany-message-content",padded:!r,user:!!t,stacked:o,fullWidth:!!y||!!c,children:[i&&s.jsx(C,{children:s.jsx(se,{variant:"h2",children:i})}),m&&s.jsx(C,{children:s.jsx(ie,{html:m})}),y&&s.jsx(C,{children:s.jsx(ae,{...y,onChange:(l,f)=>{a("form",{data:f,formKey:y.schema.id,actionKey:l})}})}),c&&s.jsx(C,{children:s.jsx(le,{items:Object.keys(c).map(l=>({label:c[l],actionKey:l})),renderItem:l=>s.jsx("li",{children:s.jsx(ce,{onClick:()=>{a("action",l.actionKey)},children:l.label})},l.actionKey)})})]})},D=()=>{const e=u.useCallback(c=>{c&&setTimeout(()=>{c.scrollIntoView({block:"start",behavior:"smooth"})},250)},[]),[t,r]=n.useScroll(!0),{messages:o,loading:a,typingActors:i=[]}=n.useProperties(),m=()=>i&&i.length?i.map((c,y)=>s.jsx(M,{id:`typing_${c.name}`,children:s.jsx(O,{timestamp:Date.now(),sender:c,children:s.jsx(A,{boxed:!0,ref:e})})},`typing_${c.name}`)):null;return s.jsxs(s.Fragment,{children:[s.jsxs(De,{tabIndex:0,scrollableCss:t,ref:r,children:[o&&o.length?o.map((c,y)=>{const{type:g,timestamp:d,sender:l,content:f}=c;return s.jsx(M,{className:"humany-conversation-entry",tabIndex:-1,children:s.jsx(Oe,{...c,ref:e})},`${g}_${l==null?void 0:l.name}_${d}_${f[0].key}`)}):null,m(),a&&s.jsx(M,{children:s.jsx(A,{ref:e})})]}),s.jsx(Y,{})]})},De=n.newStyled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 0 1 100%;
+    padding: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
+    ${e=>!!e.scrollableCss&&e.scrollableCss};
+    &:focus-visible {
+        ${e=>n.borderTabStyle(e)};
+    }
+`,M=n.newStyled.div`
+    margin: 0;
+    margin-bottom: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
+
+    &:first-of-type {
+        margin-top: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
+    }
+
+    &:last-of-type {
+        padding-bottom: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
+    }
+
+    & span,
+    p,
+    a,
+    div {
+        font-weight: 300;
+    }
+
+    & b,
+    h1 {
+        font-weight: normal;
+    }
+    ${e=>n.headingElement(e)("h1",n.css`
+                font-weight: normal;
+            `)}
+`,Pe=({dispatch:e})=>{const t=u.useRef(null);return u.useEffect(()=>{t.current&&t.current.parentNode&&e("overlay-mounted",t.current)},[t]),s.jsx(n.WidgetOverlayOutlet,{portalId:"humany-conversation-overlay-portal",className:"humany-conversation-overlay-outlet",ref:t})},Fe=({dispatch:e,header:t,buttonLabel:r})=>s.jsxs(We,{portalId:"humany-conversation-portal",className:"humany-conversation-outlet",children:[s.jsxs(qe,{className:"humany-conversation-outlet-head",children:[s.jsx(_e,{className:"humany-conversation-outlet-head-button","aria-label":r,title:r,onClick:()=>e("hide-overlay-conversation"),children:s.jsx(n.SymbolBadge,{symbol:{type:"Svg",content:"caret-down"},size:20})}),t&&s.jsx(Ue,{className:"humany-conversation-outlet-header",variant:"h1",children:t})]}),s.jsx(D,{})]}),We=n.newStyled(n.WidgetOverlayOutlet)`
+  z-index: 11;
+  top: auto;
+  height: 65%;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  border-top-right-radius: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
+  border-top-left-radius: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
+`,qe=n.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+  ${e=>e.theme.border&&`border-bottom: ${e.theme.border};`}
+`,Ue=n.newStyled(n.Typography)`
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.medium}};
+  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  margin: 0;
+`,_e=n.newStyled(n.Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
+  ${e=>e.theme.borderRadius&&`border-radius: ${e.theme.borderRadius};`}
+
+  &:focus-visible {
+    ${n.borderTabStyle};
+  }
+
+  svg line {
+    stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  }
+`,Ve=({className:e,...t})=>{const{overlay:r,overlayConversationHeader:o,overlayConversationCloseLabel:a,conversationControllerId:i}=n.useProperties(),m=L.useDispatch();return s.jsxs(n.ConversationContext.Provider,{value:i?{id:i}:null,children:[s.jsx(Ye,{...t,className:n.appendClassNames(e,"humany-conversation-component"),children:s.jsx(D,{})}),r&&s.jsxs(s.Fragment,{children:[s.jsx(Pe,{dispatch:m}),r.conversation&&s.jsx(Fe,{dispatch:m,header:o,buttonLabel:a})]})]})},Ye=n.newStyled.div`
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+`;exports.default=Ve;

package/{dist/conversation-controller.d.ts → conversation-controller.d.ts}

@@ -42,8 +42,8 @@ export type ConversationMessage = {
 };
 export type EntryWriter = (content: ConversationMessageUpdateSettings | null) => void;
 export declare const getNormalizedMessageSettings: (settings: string | ConversationMessageSettings | ConverstationMessageItem<any> | ConverstationMessageItem<any>[], options?: {
-    key?: string | undefined;
-} | undefined) => NormalizedMessageSettings;
+    key?: string;
+}) => NormalizedMessageSettings;
 /**
  * Manages the stream of messages inside a `ConversationComponent` and provides external read-write
  * access to it as well as exposing emitted actions.