@botpress/webchat 2.2.4 → 2.2.5

package/dist/schemas/init.d.ts

@@ -2,10 +2,16 @@
 import { z } from 'zod';
 export declare const statePropsSchema: z.ZodEnum<["opened", "closed", "initial"]>;
 export declare const userPropsSchema: z.ZodObject<{
+    name: z.ZodOptional<z.ZodString>;
+    pictureUrl: z.ZodOptional<z.ZodString>;
     data: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
 }, "strip", z.ZodTypeAny, {
+    name?: string | undefined;
+    pictureUrl?: string | undefined;
     data?: Record<string, unknown> | undefined;
 }, {
+    name?: string | undefined;
+    pictureUrl?: string | undefined;
     data?: Record<string, unknown> | undefined;
 }>;
 export declare const clientModePropsSchema: z.ZodEnum<["messaging", "pushpin"]>;
@@ -3743,10 +3749,16 @@ export declare const configPropsSchema: z.ZodObject<{
     }>>>;
     style: z.ZodCatch<z.ZodOptional<z.ZodString>>;
     user: z.ZodCatch<z.ZodOptional<z.ZodObject<{
+        name: z.ZodOptional<z.ZodString>;
+        pictureUrl: z.ZodOptional<z.ZodString>;
         data: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     }, "strip", z.ZodTypeAny, {
+        name?: string | undefined;
+        pictureUrl?: string | undefined;
         data?: Record<string, unknown> | undefined;
     }, {
+        name?: string | undefined;
+        pictureUrl?: string | undefined;
         data?: Record<string, unknown> | undefined;
     }>>>;
 }, "strip", z.ZodTypeAny, {
@@ -4205,6 +4217,8 @@ export declare const configPropsSchema: z.ZodObject<{
     } | undefined;
     style?: string | undefined;
     user?: {
+        name?: string | undefined;
+        pictureUrl?: string | undefined;
         data?: Record<string, unknown> | undefined;
     } | undefined;
 }, {
@@ -7947,10 +7961,16 @@ export declare const initPropsSchema: z.ZodObject<{
         } | undefined;
     }>>>;
     user: z.ZodCatch<z.ZodOptional<z.ZodObject<{
+        name: z.ZodOptional<z.ZodString>;
+        pictureUrl: z.ZodOptional<z.ZodString>;
         data: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
     }, "strip", z.ZodTypeAny, {
+        name?: string | undefined;
+        pictureUrl?: string | undefined;
         data?: Record<string, unknown> | undefined;
     }, {
+        name?: string | undefined;
+        pictureUrl?: string | undefined;
         data?: Record<string, unknown> | undefined;
     }>>>;
     clientId: z.ZodString;
@@ -8420,6 +8440,8 @@ export declare const initPropsSchema: z.ZodObject<{
         } | undefined;
     } | undefined;
     user?: {
+        name?: string | undefined;
+        pictureUrl?: string | undefined;
         data?: Record<string, unknown> | undefined;
     } | undefined;
     selector?: string | undefined;

package/dist/stores/webchatStore.d.ts

@@ -15,6 +15,8 @@ export type WebchatProps = {
     lastTypingHeartbeat: Date | null;
     allowFileUpload: boolean;
     userData: Record<string, unknown>;
+    userName?: string;
+    userPictureUrl?: string;
     messageContainerRef: RefObject<HTMLDivElement>;
     closeWindow?: () => void;
     /**

package/dist/style.css

@@ -1 +1 @@
-*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}input:where(:not([type=button],[type=reset],[type=submit])),select,textarea{border:0px solid}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}summary{display:list-item}ol,ul,menu{list-style:none}textarea{resize:vertical}::placeholder{opacity:1;color:color-mix(in srgb,currentColor 50%,transparent)}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none!important}html{font-size:16px}:root{--bpPrimary-1: #fdfdfe;--bpPrimary-50: #f7f9ff;--bpPrimary-100: #edf2fe;--bpPrimary-200: #dfeaff;--bpPrimary-300: #d0dfff;--bpPrimary-400: #bdd1ff;--bpPrimary-500: #a6bff9;--bpPrimary-600: #87a5ef;--bpPrimary-700: #3d63dd;--bpPrimary-800: #3657c3;--bpPrimary-900: #395bc7;--bpPrimary-950: #1d2e5c;--bpGray-1: #fcfcfd;--bpGray-50: #f9f9fb;--bpGray-100: #eff0f3;--bpGray-200: #e7e8ec;--bpGray-300: #e0e1e6;--bpGray-400: #d8d9e0;--bpGray-500: #cdced7;--bpGray-600: #b9bbc6;--bpGray-700: #8b8d98;--bpGray-800: #80828d;--bpGray-900: #62636c;--bpGray-950: #1e1f24;--bpRadius-scale: 1;--bpRadius-sm: .125rem ;--bpRadius-sm: .125rem;--radius: .25rem;--bpRadius-md: .375rem;--bpRadius-lg: .5rem;--bpRadius-xl: .75rem;--bpRadius-2xl: 1rem;--bpRadius-3xl: 1.5rem;--bpRadius-full: 9999px;--spacing-0: 0px;--spacing-px: 1px;--spacing-0_5: .125rem;--spacing-1: .25rem;--spacing-1_5: .375rem;--spacing-2: .5rem;--spacing-2_5: .625rem;--spacing-3: .75rem;--spacing-3_5: .875rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-7: 1.75rem;--spacing-8: 2rem;--spacing-9: 2.25rem;--spacing-10: 2.5rem;--spacing-11: 2.75rem;--spacing-12: 3rem;--spacing-14: 3.5rem;--spacing-16: 4rem;--spacing-20: 5rem;--spacing-24: 6rem;--spacing-28: 7rem;--spacing-32: 8rem;--spacing-36: 9rem;--spacing-40: 10rem;--spacing-44: 11rem;--spacing-48: 12rem;--spacing-52: 13rem;--spacing-56: 14rem;--spacing-60: 15rem;--spacing-64: 16rem;--spacing-72: 18rem;--spacing-80: 20rem;--spacing-96: 24rem;--rubik-font: "Rubik", sans-serif;--inter-font: "Inter", sans-serif;--ibm-font: "IBM Plex Sans", sans-serif;--fira-font: "Fira Code", monospace;--font-family: var(--inter-font);--header-bg: var(--bpGray-50);--header-bg-hover: var(--bpGray-100);--header-hover-dark: var(--bpGray-200);--header-title: var(--bpGray-900);--header-description: var(--bpGray-800);--header-description-icon: var(--bpPrimary-800);--header-description-link: var(--bpPrimary-900);--message-bg: var(--bpPrimary-100);--message-bg-hover: var(--bpPrimary-200);--message-text: var(--bpPrimary-900);--button-bg: var(--bpPrimary-500);--button-bg-hover: var(--bpPrimary-600);--button-text: var(--bpPrimary-50);--button-border: var(--bpPrimary-500);--button-border-hover: var(--bpPrimary-600);--fab-bg: var(--bpPrimary-100);--fab-bg-hover: var(--bpPrimary-200);--fab-icon: var(--bpPrimary-700)}.bpContainer :focus-visible,.bpContainer svg:focus,.bpMessageBlocksDropdownContentContainer:focus-visible,.bpMessageBlocksDropdownContentContainer :focus-visible{outline:2px solid var(--bpPrimary-700)}.bpContainer,.bpMessageBlocksDropdownContentContainer{font-family:var(--inter-font)}.bpHidden{display:none}.bpNotificationContainer{display:grid;padding:var(--spacing-4);background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);gap:var(--spacing-2);grid-template-columns:auto 1fr auto;align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));box-shadow:0 4px 6px #0000001a}.bpNotificationTitle{color:var(--bpGray-900);font-size:.875rem;line-height:1.25rem;font-weight:500;grid-column-start:2}.bpNotificationDescription{margin-top:var(--spacing-1);color:var(--bpGray-800);font-size:.875rem;line-height:1.25rem;grid-column-start:2}.bpNotificationIcon{height:var(--spacing-5);aspect-ratio:1/1}.bpNotificationIcon[data-type=success]{color:var(--green-500)}.bpNotificationIcon[data-type=error]{color:var(--red-500)}.bpNotificationCloseIcon{height:var(--spacing-5);aspect-ratio:1/1;cursor:pointer}.bpNotificationCloseIcon:hover{color:var(--bpGray-700)}.bpWebchat{background-color:var(--bpGray-900)}.bpComposerContainer{display:flex;margin:var(--spacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));border-width:var(--spacing-px);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;background:var(--bpGray-1);border-color:var(--bpGray-200);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bpComposerContainer:focus-within{border-color:var(--bpPrimary-700)}.bpComposerInput{padding-left:var(--spacing-2);padding-right:var(--spacing-2);margin:var(--spacing-3) var(--spacing-1);flex-grow:1;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));outline-style:none;font-size:1rem;line-height:1.25rem;background-color:transparent;resize:none;color:var(--bpGray-900);height:1.5em}.bpComposerInput::-webkit-scrollbar{width:6px}.bpComposerInput::-webkit-scrollbar-track{background-color:transparent}.bpComposerInput::-webkit-scrollbar-thumb{background-color:var(--bpGray-300);border-radius:6px}.bpComposerInput::-webkit-scrollbar-thumb:hover{background-color:var(--bpGray-500)}.bpComposerInput:focus{outline:none!important}.bpComposerInput::placeholder{color:var(--bpGray-700)}.bpComposerButtonContainer{display:flex;padding:var(--spacing-2);justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));height:var(--spacing-11)}.bpComposerButtonIcon{color:var(--bpPrimary-500);height:var(--spacing-8);width:var(--spacing-8)}.bpComposerButtonIcon:hover{color:color-mix(in srgb,var(--bpPrimary-500),black 15%)}.bpComposerUploadButtonContainer{padding:var(--spacing-1);margin:var(--spacing-1);margin-right:calc(var(--spacing-2) * -1);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpComposerUploadButtonIcon{color:var(--bpGray-800);display:block;padding:var(--spacing-1);background:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));height:var(--spacing-6);width:var(--spacing-6)}.bpComposerUploadButtonIcon:hover{color:var(--bpGray-700);background:var(--bpGray-50);cursor:pointer}.bpContainer{display:flex;justify-content:space-between;height:100%;overflow:hidden;position:relative;background-color:var(--bpGray-1);border-color:var(--bpGray-200);border-style:solid;border-width:1px;flex-direction:column;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));container-type:inline-size}.bpFabContainer{width:var(--spacing-16);height:var(--spacing-16);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));cursor:pointer;background:var(--fab-bg)}.bpFabContainer:hover{background:var(--fab-bg-hover)}.bpFabIcon{height:100%;width:100%;background-position:center;background-repeat:no-repeat;background-color:var(--fab-icon);background-size:cover;-webkit-mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z' fill='%23FFFFFF' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") no-repeat center;mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z' fill='%23FFFFFF' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") no-repeat center}.bpHeaderContainer{display:flex;padding:var(--spacing-1);flex-direction:column;border-top-left-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));border-top-right-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));background-color:var(--header-bg);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.bpHeaderContentContainer{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr;padding:var(--spacing-1);padding-left:var(--spacing-3);padding-right:var(--spacing-3);column-gap:var(--spacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));text-align:left;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bpHeaderContainer:not([data-disabled]) .bpHeaderContentContainer:hover{background-color:var(--header-bg-hover)}.bpHeaderContainer[data-disabled] .bpHeaderContentContainer:hover{cursor:default}.bpHeaderContentContainer[data-state=open]{justify-items:center;grid-template-columns:1fr}.bpHeaderContentContainer[data-state=open] .bpHeaderContentActionsContainer{display:none}.bpHeaderContentContainer[data-state=open] .bpHeaderContentAvatarImage{margin-top:var(--spacing-6);width:var(--spacing-16);height:var(--spacing-16)}.bpHeaderContentContainer[data-state=closed]{justify-items:start;grid-template-columns:auto 1fr auto}.bpHeaderContentAvatarContainer{overflow:hidden;padding:var(--spacing-px);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));grid-row:span 2 / span 2}.bpHeaderContentAvatarImage{aspect-ratio:1/1;object-fit:cover;height:var(--spacing-8);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full))}.bpHeaderContentAvatarFallback{aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));height:var(--spacing-8);line-height:var(--spacing-12);color:var(--bpGray-1)}.bpHeaderContentTitle{padding-top:var(--spacing-0_5);padding-bottom:var(--spacing-0_5);font-size:1rem;line-height:1.5rem;font-weight:500;color:var(--header-title)}.bpHeaderContentDescription{padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);font-size:.875rem;line-height:1.25rem;font-weight:300;color:var(--header-description);width:100%}.bpHeaderContentContainer[data-state=closed] .bpHeaderContentDescription{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bpHeaderContentContainer[data-state=open] .bpHeaderContentDescription{text-align:center}.bpHeaderContentContainer[data-state=closed] .bpHeaderContentDescription{grid-column-start:2}.bpHeaderContentActionsContainer{display:flex;grid-column-start:3;grid-row:span 2 / span 2;grid-row-start:1!important}.bpHeaderContentActionsIcons{padding:var(--spacing-2);height:var(--spacing-9);width:var(--spacing-9);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));cursor:pointer;color:var(--header-description);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bpHeaderContentActionsIcons:hover{background-color:var(--header-hover-dark)}.bpHeaderExpandedContentContainer{display:grid;padding:var(--spacing-2);gap:var(--spacing-4);row-gap:var(--spacing-6);justify-items:center;align-items:center;font-size:.875rem;line-height:1.25rem}.bpHeaderExpandedContentDescriptionItemsContainer{display:flex;gap:var(--spacing-1);align-items:center;font-size:.75rem;line-height:1rem;color:var(--header-description);position:relative;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-sm))}.bpHeaderExpandedContentDescriptionItemsContainer:hover{color:var(--header-title);cursor:pointer}.bpHeaderExpandedContentDescriptionItemsContainer[data-terms]+.bpHeaderExpandedContentDescriptionItemsContainer[data-privacy]{margin-left:calc(var(--spacing-4) + 1px)}.bpHeaderExpandedContentDescriptionItemsContainer[data-terms]+.bpHeaderExpandedContentDescriptionItemsContainer[data-privacy]:before{content:"";position:absolute;left:calc(var(--spacing-4) / -2);top:auto;bottom:auto;height:10px;width:1px;background-color:var(--bpGray-500)}.bpHeaderExpandedContentDescriptionItemsIcon{padding:var(--spacing-1);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));height:var(--spacing-6);color:var(--header-description)}.bpHeaderExpandedContentDescriptionItemsContainer[data-email] .bpHeaderExpandedContentDescriptionItemsIcon,.bpHeaderExpandedContentDescriptionItemsContainer[data-phone] .bpHeaderExpandedContentDescriptionItemsIcon,.bpHeaderExpandedContentDescriptionItemsContainer[data-website] .bpHeaderExpandedContentDescriptionItemsIcon{color:var(--header-description-icon)}.bpHeaderExpandedContentDescriptionItemsText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;color:var(--header-description-link)}.bpHeaderExpandedContentDescriptionItemsLink{overflow:hidden;text-overflow:ellipsis;color:var(--header-description-link);white-space:nowrap;font-size:.75rem}.bpHeaderExpandedContentDescriptionItemsLink:hover{text-decoration:underline;text-decoration-color:var(--header-description-link)}.bpHeaderExpandedContentGroup{display:flex;flex-direction:column}.bpHeaderExpandedContentGroup[data-legal]{flex-direction:row}.bpHeaderExpandedContentGroup[data-legal] .bpHeaderExpandedContentDescriptionItemsIcon{display:none}.bpHeaderExpandedContentGroup[data-links]{gap:var(--spacing-2);flex-direction:column}.bpHeaderExpandedContentDescriptionItemsPoweredBy{color:var(--header-description)}.bpMessageListMarqueeContainer{margin-top:auto;display:flex;gap:var(--spacing-2);flex-direction:column;align-items:center;justify-content:center;padding-bottom:var(--spacing-12)}.bpMessageListMarqueeContent{display:flex;flex-direction:column;max-width:60ch}.bpMessageListMarqueeTitle{color:var(--bpGray-800);font-size:1.125rem;line-height:1.75rem;font-weight:500;text-align:center}.bpMessageListMarqueeDescription{color:var(--bpGray-800);font-size:.875rem;line-height:1.25rem;text-align:center;margin-top:var(--spacing-1)}.bpMessageListMarqueeAvatarContainer{overflow:hidden;padding:var(--spacing-px);margin-bottom:var(--spacing-3);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full))}.bpMessageListMarqueeAvatarImage{height:var(--spacing-20);aspect-ratio:1/1;object-fit:cover;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full))}.bpMessageListMarqueeAvatarFallback{display:flex;align-items:center;justify-content:center;height:var(--spacing-20);width:var(--spacing-20);background-image:linear-gradient(to bottom,var(--bpGray-800),var(--bpGray-700));color:var(--bpGray-1);font-size:1.875rem;line-height:2.25rem;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full))}.bpMessageContainer{display:flex;gap:var(--spacing-2);font-size:.875rem;line-height:1.25rem;color:var(--bpGray-900);word-break:break-word}.bpMessageContainer[data-direction=incoming]{justify-content:flex-start}.bpMessageContainer[data-direction=outgoing]{justify-content:flex-end}.bpMessageContainer[data-direction=system]{justify-content:center;font-size:.75rem;line-height:1rem;margin-top:var(--spacing-4);color:var(--bpGray-800)}.bpMessageContainer[data-loaded=false]{display:none}.bpMessageAvatarContainer{display:none;overflow:hidden;position:relative;flex-shrink:0;align-self:flex-end;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));height:var(--spacing-7)}.bpMessageContainer[data-direction=incoming] .bpMessageAvatarContainer{display:flex;align-self:flex-end}.bpMessageAvatarImage{aspect-ratio:1/1;object-fit:cover;height:100%}.bpMessageAvatarFallback{display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));color:var(--bpGray-1)}.bpMessageListContainer{display:flex;overflow-y:auto;overflow-x:hidden;width:100%;flex-grow:1;padding:var(--spacing-1)}.bpMessageListViewport{display:flex;gap:var(--spacing-2);flex-direction:column;padding:var(--spacing-3)}.bpMessageListViewport::-webkit-scrollbar{width:6px}.bpMessageListViewport::-webkit-scrollbar-track{background-color:transparent}.bpMessageListViewport::-webkit-scrollbar-thumb{background-color:var(--bpGray-300);border-radius:6px}.bpMessageListViewport::-webkit-scrollbar-thumb:hover{background-color:var(--bpGray-500)}.bpMessageListScrollDownButtonContainer{position:absolute;bottom:var(--spacing-3);left:0;width:100%;display:flex;justify-content:center;z-index:10}.bpMessageListScrollDownButtonButton{display:flex;gap:var(--spacing-1);padding-left:var(--spacing-3);padding-right:var(--spacing-2);padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);background-color:var(--bpGray-800);color:var(--bpGray-1);font-size:.75rem;line-height:1rem;align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bpMessageListScrollDownButtonButton:hover{background-color:var(--bpGray-700)}.bpMessageListScrollDownButtonButton[data-is-at-bottom=true]{opacity:0;pointer-events:none;display:none}.bpModalContainer{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;padding:var(--spacing-2);pointer-events:none}.bpModalOverlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;background-color:#0000004d}.bpModalDialogContainer{padding:var(--spacing-6);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));width:100%;pointer-events:auto;color:var(--bpGray-900);background:var(--bpGray-1);margin:auto}@container (min-width: 28rem){.bpModalDialogContainer{width:auto}}.bpModalDialogTitleContainer{display:flex;margin-bottom:var(--spacing-2);justify-content:space-between;align-items:center}.bpModalDialogTitleText{font-size:1rem;line-height:1.5rem;color:var(--bpGray-900)}.bpModalDialogTitleCloseIcon{height:1.25rem;cursor:pointer;color:var(--bpGray-800)}.bpModalDialogTitleCloseIcon:hover{color:var(--bpGray-900)}.bpModalDialogContent{display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem;color:var(--bpGray-900)}.bpModalDialogNewConversationButton{padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);padding-left:var(--spacing-2);padding-right:var(--spacing-2);margin-top:var(--spacing-4);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));color:var(--bpGray-1);background:var(--bpPrimary-500);align-self:end}.bpModalDialogNewConversationButton:hover{background:var(--bpPrimary-600)}.bpMessageBlocksBubble{padding:var(--spacing-2);padding-left:var(--spacing-4);padding-right:var(--spacing-4);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));max-width:85%}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksBubble{background-color:var(--message-bg);color:var(--message-text);border-bottom-right-radius:var(--bpRadius-sm)}.bpMessageContainer[data-direction=incoming] .bpMessageBlocksBubble{border-color:var(--bpGray-200);background-color:var(--bpGray-100);color:var(--bpGray-900);border-bottom-left-radius:var(--bpRadius-sm)}.bpMessageBlocksButton{padding:.25rem .75rem;background-color:var(--button-bg);color:var(--button-text);font-size:.875rem;line-height:1.25rem;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));cursor:pointer;border:1px solid var(--button-border)}.bpMessageBlocksButton:hover{background-color:var(--button-bg-hover);border:1px solid var(--button-border-hover)}.bpMessageBlocksButton[data-activated],.bpMessageBlocksButton[data-group-activated]{display:none}.bpMessageBlocksCarouselContainer{overflow:hidden;position:relative}.bpMessageBlocksCarouselSlidesContainer{display:grid;padding-left:var(--spacing-2);padding-right:var(--spacing-2);gap:var(--spacing-2);grid-auto-flow:column;grid-auto-columns:90%}.bpMessageBlocksCarouselSlidesContainer>*{max-width:26rem}.bpMessageBlocksCarouselBackButton,.bpMessageBlocksCarouselNextButton{position:absolute;top:50%;transform:translateY(-50%);background-color:var(--bpGray-300);color:var(--bpGray-100);height:var(--spacing-7);padding:var(--spacing-0.5);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;box-shadow:0 2px 4px #0000001a}.bpMessageBlocksCarouselBackButton:hover,.bpMessageBlocksCarouselNextButton:hover{background-color:var(--bpGray-400);color:var(--bpGray-1);transform:translateY(-50%) scale(1.1)}.bpMessageBlocksCarouselBackButton{left:var(--spacing-1)}.bpMessageBlocksCarouselNextButton{right:var(--spacing-1)}.bpMessageBlocksColumn{display:flex;flex-direction:column;gap:var(--spacing-2);width:100%}.bpMessageBlocksColumn[data-horizontal=center]{align-items:center}.bpMessageBlocksColumn[data-horizontal=right]{align-items:flex-end}.bpMessageBlocksColumn[data-horizontal=left]{align-items:flex-start}.bpMessageBlocksColumn[data-vertical=stretch]{justify-content:space-between}.bpMessageBlocksDropdownButtonContainer{display:flex;padding:var(--spacing-2);background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));align-items:center;justify-content:space-between;max-width:80%;cursor:pointer}.bpMessageBlocksDropdownButtonContainer[data-disabled=true]{color:var(--bpGray-700);cursor:not-allowed;border-color:var(--bpGray-200)}.bpMessageBlocksDropdownButtonText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpMessageBlocksDropdownButtonIcon{height:var(--spacing-4);width:var(--spacing-4);margin-left:var(--spacing-2)}.bpMessageBlocksDropdownContentContainer{background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));min-width:100px;max-height:200px;overflow-y:auto;padding:var(--spacing-1)}.bpMessageBlocksDropdownContentItem{color:var(--bpGray-800);padding:var(--spacing-1);cursor:pointer}.bpMessageBlocksDropdownContentItem:hover{background-color:var(--bpGray-100);color:var(--bpGray-900)}.bpMessageBlocksFileContainer{display:flex;padding-top:var(--spacing-2);padding-bottom:var(--spacing-2);padding-left:var(--spacing-4);padding-right:var(--spacing-4);gap:var(--spacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:var(--bpGray-100);color:var(--bpGray-900)}.bpMessageBlocksFileContainer:hover{color:var(--bpGray-950);background-color:var(--bpGray-200)}.bpMessageBlocksFileTitle{text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpMessageBlocksFileIcon{flex:none;width:1.25rem;height:1.25rem;color:var(--bpPrimary-800)}.bpMessageBlocksImageImage{min-width:0px;max-width:95%;border:1px solid var(--bpGray-200);object-fit:cover;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md))}.bpMessageBlocksImageImage[data-orientation=landscape]{aspect-ratio:4 / 3}.bpMessageBlocksImageImage[data-orientation=portrait]{aspect-ratio:3 / 4}.bpMessageBlocksImageImage[data-orientation=square]{aspect-ratio:1 / 1}@media (min-width: 640px){.bpMessageBlocksImageImage{width:var(--spacing-56)}}.bpMessageBlocksLocationContainer{display:flex;gap:var(--spacing-2);padding:var(--spacing-2);background-color:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-3xl));align-items:center}.bpMessageBlocksLocationTitle{color:var(--bpGray-900);font-size:.875rem;line-height:1.25rem;cursor:pointer}.bpMessageBlocksLocationIcon{height:var(--spacing-5);width:var(--spacing-5);color:var(--green-600)}.bpMessageBlocksRow{display:flex;gap:var(--spacing-2);flex-wrap:wrap}.bpMessageBlocksTextHeading1{font-size:1.5rem;line-height:2rem;font-weight:500;color:var(--bpGray-900)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextHeading1{color:var(--bpPrimary-950)}.bpMessageBlocksTextHeading2{font-size:1.25rem;line-height:1.75rem;color:var(--bpGray-900)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextHeading2{color:var(--bpPrimary-950)}.bpMessageBlocksTextHeading3{font-size:1.125rem;line-height:1.75rem}.bpMessageBlocksTextUnorderedList,.bpMessageBlocksTextOrderedList{padding-left:var(--spacing-2);margin-bottom:var(--spacing-2);list-style-type:disc;list-style-position:inside}.bpMessageBlocksTextUnorderedList::marker,.bpMessageBlocksTextOrderedList::marker{color:var(--bpGray-800)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextUnorderedList::marker,.bpMessageBlocksTextOrderedList::marker{color:var(--bpPrimary-950)}.bpMessageBlocksTextLink{text-decoration:underline}.bpMessageBlocksVideo{border:1px solid var(--bpGray-200);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md))}.bpTypingIndicatorContainer{display:flex;gap:var(--spacing-1_5);padding:var(--spacing-2);background-color:var(--bpGray-100);border:1px solid var(--bpGray-200);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-lg));align-items:end}.bpTypingIndicatorContainer:before,.bpTypingIndicatorContainer:after{content:"";display:block;width:var(--spacing-1_5);height:var(--spacing-1_5);background-color:var(--bpGray-800);border-radius:50%;animation:jump 1.5s infinite}.bpTypingIndicatorContainer:after{animation-delay:.2s}.bpTypingIndicatorLoader{width:var(--spacing-1_5);height:var(--spacing-1_5);background-color:var(--bpGray-800);border-radius:50%;animation:jump 1.5s infinite .1s}@keyframes jump{0%,50%,to{transform:translateY(0)}25%{transform:translateY(-75%)}}
+*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}input:where(:not([type=button],[type=reset],[type=submit])),select,textarea{border:0px solid}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}summary{display:list-item}ol,ul,menu{list-style:none}textarea{resize:vertical}::placeholder{opacity:1;color:color-mix(in srgb,currentColor 50%,transparent)}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none!important}html{font-size:16px}:root{--bpPrimary-1: #fdfdfe;--bpPrimary-50: #f7f9ff;--bpPrimary-100: #edf2fe;--bpPrimary-200: #dfeaff;--bpPrimary-300: #d0dfff;--bpPrimary-400: #bdd1ff;--bpPrimary-500: #a6bff9;--bpPrimary-600: #87a5ef;--bpPrimary-700: #3d63dd;--bpPrimary-800: #3657c3;--bpPrimary-900: #395bc7;--bpPrimary-950: #1d2e5c;--bpGray-1: #fcfcfd;--bpGray-50: #f9f9fb;--bpGray-100: #eff0f3;--bpGray-200: #e7e8ec;--bpGray-300: #e0e1e6;--bpGray-400: #d8d9e0;--bpGray-500: #cdced7;--bpGray-600: #b9bbc6;--bpGray-700: #8b8d98;--bpGray-800: #80828d;--bpGray-900: #62636c;--bpGray-950: #1e1f24;--bpRadius-scale: 1;--bpRadius-sm: .125rem;--radius: .25rem;--bpRadius-md: .375rem;--bpRadius-lg: .5rem;--bpRadius-xl: .75rem;--bpRadius-2xl: 1rem;--bpRadius-3xl: 1.5rem;--bpRadius-full: 9999px;--bpSpacing-0: 0px;--bpSpacing-px: 1px;--bpSpacing-0_5: .125rem;--bpSpacing-1: .25rem;--bpSpacing-1_5: .375rem;--bpSpacing-2: .5rem;--bpSpacing-2_5: .625rem;--bpSpacing-3: .75rem;--bpSpacing-3_5: .875rem;--bpSpacing-4: 1rem;--bpSpacing-5: 1.25rem;--bpSpacing-6: 1.5rem;--bpSpacing-7: 1.75rem;--bpSpacing-8: 2rem;--bpSpacing-9: 2.25rem;--bpSpacing-10: 2.5rem;--bpSpacing-11: 2.75rem;--bpSpacing-12: 3rem;--bpSpacing-14: 3.5rem;--bpSpacing-16: 4rem;--bpSpacing-20: 5rem;--bpSpacing-24: 6rem;--bpSpacing-28: 7rem;--bpSpacing-32: 8rem;--bpSpacing-36: 9rem;--bpSpacing-40: 10rem;--bpSpacing-44: 11rem;--bpSpacing-48: 12rem;--bpSpacing-52: 13rem;--bpSpacing-56: 14rem;--bpSpacing-60: 15rem;--bpSpacing-64: 16rem;--bpSpacing-72: 18rem;--bpSpacing-80: 20rem;--bpSpacing-96: 24rem;--rubik-font: "Rubik", sans-serif;--inter-font: "Inter", sans-serif;--ibm-font: "IBM Plex Sans", sans-serif;--fira-font: "Fira Code", monospace;--font-family: var(--inter-font);--header-bg: var(--bpGray-50);--header-bg-hover: var(--bpGray-100);--header-hover-dark: var(--bpGray-200);--header-title: var(--bpGray-900);--header-description: var(--bpGray-800);--header-description-icon: var(--bpPrimary-800);--header-description-link: var(--bpPrimary-900);--header-avatar-bg: var(--bpPrimary-600);--header-avatar-text: var(--bpPrimary-50);--message-bg: var(--bpPrimary-100);--message-bg-hover: var(--bpPrimary-200);--message-text: var(--bpPrimary-900);--button-bg: var(--bpPrimary-500);--button-bg-hover: var(--bpPrimary-600);--button-text: var(--bpPrimary-50);--button-border: var(--bpPrimary-500);--button-border-hover: var(--bpPrimary-600);--fab-bg: var(--bpPrimary-100);--fab-bg-hover: var(--bpPrimary-200);--fab-icon: var(--bpPrimary-700)}.bpContainer :focus-visible,.bpContainer svg:focus,.bpMessageBlocksDropdownContentContainer :focus-visible{outline:2px solid var(--bpPrimary-700)}.bpMessageBlocksDropdownContentContainer:focus-visible{outline:none}.bpContainer,.bpMessageBlocksDropdownContentContainer{font-family:var(--inter-font)}.bpHidden{display:none}.bpNotificationContainer{display:grid;padding:var(--bpSpacing-4);background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);gap:var(--bpSpacing-2);grid-template-columns:auto 1fr auto;align-items:center;border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md));box-shadow:0 4px 6px #0000001a}.bpNotificationTitle{color:var(--bpGray-900);font-size:.875rem;line-height:1.25rem;font-weight:500;grid-column-start:2}.bpNotificationDescription{margin-top:var(--bpSpacing-1);color:var(--bpGray-800);font-size:.875rem;line-height:1.25rem;grid-column-start:2}.bpNotificationIcon{height:var(--bpSpacing-5);aspect-ratio:1/1}.bpNotificationIcon[data-type=success]{color:var(--green-500)}.bpNotificationIcon[data-type=error]{color:var(--red-500)}.bpNotificationCloseIcon{height:var(--bpSpacing-5);aspect-ratio:1/1;cursor:pointer}.bpNotificationCloseIcon:hover{color:var(--bpGray-700)}.bpWebchat{background-color:var(--bpGray-900)}.bpComposerContainer{display:flex;margin:var(--bpSpacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));border-width:var(--bpSpacing-px);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;background:var(--bpGray-1);border-color:var(--bpGray-200);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bpComposerContainer:focus-within{border-color:var(--bpPrimary-700)}.bpComposerContainer[data-disabled=true]{background-color:var(--bpGray-100);border-color:var(--bpGray-200);color:var(--bpGray-500)}.bpComposerContainer[data-disabled=true] *{cursor:not-allowed}.bpComposerInput{padding-left:var(--bpSpacing-2);padding-right:var(--bpSpacing-2);margin:var(--bpSpacing-3) var(--bpSpacing-1);flex-grow:1;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));outline-style:none;font-size:1rem;line-height:1.25rem;background-color:transparent;resize:none;color:var(--bpGray-900);height:1.5em}.bpComposerInput::-webkit-scrollbar{width:6px}.bpComposerInput::-webkit-scrollbar-track{background-color:transparent}.bpComposerInput::-webkit-scrollbar-thumb{background-color:var(--bpGray-300);border-radius:6px}.bpComposerInput::-webkit-scrollbar-thumb:hover{background-color:var(--bpGray-500)}.bpComposerInput:focus{outline:none!important}.bpComposerInput::placeholder{color:var(--bpGray-500)}.bpComposerButtonContainer{display:flex;padding:var(--bpSpacing-2);justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));height:var(--bpSpacing-11)}.bpComposerButtonIcon{color:var(--bpPrimary-500);height:var(--bpSpacing-8);width:var(--bpSpacing-8)}.bpComposerContainer[data-disabled=false] .bpComposerButtonIcon:hover{color:color-mix(in srgb,var(--bpPrimary-500),black 15%)}.bpComposerUploadButtonContainer{padding:var(--bpSpacing-1);margin:var(--bpSpacing-1);margin-right:calc(var(--bpSpacing-2) * -1);border-radius:calc(var(--bpRadius-scale) * var(--bpRadius-md))}.bpComposerUploadButtonIcon{color:var(--bpGray-800);display:block;padding:var(--bpSpacing-1);background:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));height:var(--bpSpacing-6);width:var(--bpSpacing-6)}.bpComposerContainer[data-disabled=false] .bpComposerUploadButtonIcon:hover{color:var(--bpGray-700);background:var(--bpGray-50);cursor:pointer}.bpContainer{display:flex;justify-content:space-between;height:100%;overflow:hidden;position:relative;background-color:var(--bpGray-1);border-color:var(--bpGray-200);border-style:solid;border-width:1px;flex-direction:column;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));container-type:inline-size}.bpFabContainer{width:var(--bpSpacing-16);height:var(--bpSpacing-16);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));cursor:pointer;background:var(--fab-bg)}.bpFabContainer:hover{background:var(--fab-bg-hover)}.bpFabIcon{height:100%;width:100%;background-position:center;background-repeat:no-repeat;background-color:var(--fab-icon);background-size:cover;-webkit-mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z' fill='%23FFFFFF' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") no-repeat center;mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z' fill='%23FFFFFF' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") no-repeat center}.bpHeaderContainer{display:flex;padding:var(--bpSpacing-1);flex-direction:column;border-top-left-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));border-top-right-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));background-color:var(--header-bg);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.bpHeaderContentContainer{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr;padding:var(--bpSpacing-1);padding-left:var(--bpSpacing-3);padding-right:var(--bpSpacing-3);column-gap:var(--bpSpacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));text-align:left;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bpHeaderContainer:not([data-disabled]) .bpHeaderContentContainer:hover{background-color:var(--header-bg-hover)}.bpHeaderContainer[data-disabled] .bpHeaderContentContainer:hover{cursor:default}.bpHeaderContentContainer[data-state=open]{justify-items:center;grid-template-columns:1fr}.bpHeaderContentContainer[data-state=open] .bpHeaderContentActionsContainer{display:none}.bpHeaderContentContainer[data-state=open] .bpHeaderContentAvatarImage{margin-top:var(--bpSpacing-6);width:var(--bpSpacing-16);height:var(--bpSpacing-16)}.bpHeaderContentContainer[data-state=closed]{justify-items:start;grid-template-columns:auto 1fr auto}.bpHeaderContentAvatarContainer{overflow:hidden;padding:var(--bpSpacing-px);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));grid-row:span 2 / span 2}.bpHeaderContentAvatarImage{aspect-ratio:1/1;object-fit:cover;height:var(--bpSpacing-8);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full))}.bpHeaderContentAvatarFallback{aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));height:var(--bpSpacing-8);line-height:var(--bpSpacing-12);background-color:var(--header-avatar-bg);color:var(--header-avatar-text)}.bpHeaderContentTitle{padding-top:var(--bpSpacing-0_5);padding-bottom:var(--bpSpacing-0_5);font-size:1rem;line-height:1.5rem;font-weight:500;color:var(--header-title)}.bpHeaderContentDescription{padding-top:var(--bpSpacing-1);padding-bottom:var(--bpSpacing-1);font-size:.875rem;line-height:1.25rem;font-weight:300;color:var(--header-description);width:100%}.bpHeaderContentContainer[data-state=closed] .bpHeaderContentDescription{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bpHeaderContentContainer[data-state=open] .bpHeaderContentDescription{text-align:center}.bpHeaderContentContainer[data-state=closed] .bpHeaderContentDescription{grid-column-start:2}.bpHeaderContentActionsContainer{display:flex;grid-column-start:3;grid-row:span 2 / span 2;grid-row-start:1!important}.bpHeaderContentActionsIcons{padding:var(--bpSpacing-2);height:var(--bpSpacing-9);width:var(--bpSpacing-9);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));cursor:pointer;color:var(--header-description);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bpHeaderContentActionsIcons:hover{background-color:var(--header-hover-dark)}.bpHeaderExpandedContentContainer{display:grid;padding:var(--bpSpacing-2);gap:var(--bpSpacing-4);row-gap:var(--bpSpacing-6);justify-items:center;align-items:center;font-size:.875rem;line-height:1.25rem}.bpHeaderExpandedContentDescriptionItemsContainer{display:flex;gap:var(--bpSpacing-1);align-items:center;font-size:.75rem;line-height:1rem;color:var(--header-description);position:relative;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-sm))}.bpHeaderExpandedContentDescriptionItemsContainer:hover{color:var(--header-title);cursor:pointer}.bpHeaderExpandedContentDescriptionItemsContainer[data-terms]+.bpHeaderExpandedContentDescriptionItemsContainer[data-privacy]{margin-left:calc(var(--bpSpacing-4) + 1px)}.bpHeaderExpandedContentDescriptionItemsContainer[data-terms]+.bpHeaderExpandedContentDescriptionItemsContainer[data-privacy]:before{content:"";position:absolute;left:calc(var(--bpSpacing-4) / -2);top:auto;bottom:auto;height:10px;width:1px;background-color:var(--bpGray-500)}.bpHeaderExpandedContentDescriptionItemsIcon{padding:var(--bpSpacing-1);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));height:var(--bpSpacing-6);color:var(--header-description)}.bpHeaderExpandedContentDescriptionItemsContainer[data-email] .bpHeaderExpandedContentDescriptionItemsIcon,.bpHeaderExpandedContentDescriptionItemsContainer[data-phone] .bpHeaderExpandedContentDescriptionItemsIcon,.bpHeaderExpandedContentDescriptionItemsContainer[data-website] .bpHeaderExpandedContentDescriptionItemsIcon{color:var(--header-description-icon)}.bpHeaderExpandedContentDescriptionItemsText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;color:var(--header-description-link)}.bpHeaderExpandedContentDescriptionItemsLink{overflow:hidden;text-overflow:ellipsis;color:var(--header-description-link);white-space:nowrap;font-size:.75rem}.bpHeaderExpandedContentDescriptionItemsLink:hover{text-decoration:underline;text-decoration-color:var(--header-description-link)}.bpHeaderExpandedContentGroup{display:flex;flex-direction:column}.bpHeaderExpandedContentGroup[data-legal]{flex-direction:row}.bpHeaderExpandedContentGroup[data-legal] .bpHeaderExpandedContentDescriptionItemsIcon{display:none}.bpHeaderExpandedContentGroup[data-links]{gap:var(--bpSpacing-2);flex-direction:column}.bpHeaderExpandedContentDescriptionItemsPoweredBy{color:var(--header-description)}.bpMessageListMarqueeContainer{margin-top:auto;display:flex;gap:var(--bpSpacing-2);flex-direction:column;align-items:center;justify-content:center;padding-bottom:var(--bpSpacing-12)}.bpMessageListMarqueeContent{display:flex;flex-direction:column;max-width:60ch}.bpMessageListMarqueeTitle{color:var(--bpGray-800);font-size:1.125rem;line-height:1.75rem;font-weight:500;text-align:center}.bpMessageListMarqueeDescription{color:var(--bpGray-800);font-size:.875rem;line-height:1.25rem;text-align:center;margin-top:var(--bpSpacing-1)}.bpMessageListMarqueeAvatarContainer{overflow:hidden;padding:var(--bpSpacing-px);margin-bottom:var(--bpSpacing-3);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full))}.bpMessageListMarqueeAvatarImage{height:var(--bpSpacing-20);aspect-ratio:1/1;object-fit:cover;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full))}.bpMessageListMarqueeAvatarFallback{display:flex;align-items:center;justify-content:center;height:var(--bpSpacing-20);width:var(--bpSpacing-20);background-color:var(--bpPrimary-600);color:var(--bpPrimary-50);font-size:1.875rem;line-height:2.25rem;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full))}.bpMessageContainer{display:flex;gap:var(--bpSpacing-2);font-size:.875rem;line-height:1.25rem;color:var(--bpGray-900);word-break:break-word}.bpMessageContainer[data-direction=incoming]{justify-content:flex-start}.bpMessageContainer[data-direction=outgoing]{justify-content:flex-end}.bpMessageContainer[data-direction=system]{justify-content:center;font-size:.75rem;line-height:1rem;margin-top:var(--bpSpacing-4);color:var(--bpGray-800)}.bpMessageContainer[data-loaded=false]{display:none}.bpMessageAvatarContainer{display:none;overflow:hidden;position:relative;flex-shrink:0;align-self:flex-end;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));height:var(--bpSpacing-7)}.bpMessageContainer[data-direction=incoming] .bpMessageAvatarContainer{display:flex;align-self:flex-end}.bpMessageAvatarImage{aspect-ratio:1/1;object-fit:cover;height:100%}.bpMessageAvatarFallback{display:flex;justify-content:center;align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));background-color:var(--bpPrimary-600);color:var(--bpPrimary-50);height:100%;aspect-ratio:1/1}.bpMessageListContainer{display:flex;overflow-y:auto;overflow-x:hidden;width:100%;flex-grow:1;padding:var(--bpSpacing-1)}.bpMessageListViewport{display:flex;gap:var(--bpSpacing-2);flex-direction:column;padding:var(--bpSpacing-3)}.bpMessageListViewport::-webkit-scrollbar{width:6px}.bpMessageListViewport::-webkit-scrollbar-track{background-color:transparent}.bpMessageListViewport::-webkit-scrollbar-thumb{background-color:var(--bpGray-300);border-radius:6px}.bpMessageListViewport::-webkit-scrollbar-thumb:hover{background-color:var(--bpGray-500)}.bpMessageListScrollDownButtonContainer{position:absolute;bottom:var(--bpSpacing-3);left:0;width:100%;display:flex;justify-content:center;z-index:10}.bpMessageListScrollDownButtonButton{display:flex;gap:var(--bpSpacing-1);padding-left:var(--bpSpacing-3);padding-right:var(--bpSpacing-2);padding-top:var(--bpSpacing-1);padding-bottom:var(--bpSpacing-1);background-color:var(--bpGray-800);color:var(--bpGray-1);font-size:.75rem;line-height:1rem;align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bpMessageListScrollDownButtonButton:hover{background-color:var(--bpGray-700)}.bpMessageListScrollDownButtonButton[data-is-at-bottom=true]{opacity:0;pointer-events:none;display:none}.bpModalContainer{display:flex;position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;padding:var(--bpSpacing-2);pointer-events:none}.bpModalOverlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;background-color:#0000004d}.bpModalDialogContainer{padding:var(--bpSpacing-6);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));width:100%;pointer-events:auto;color:var(--bpGray-900);background:var(--bpGray-1);margin:auto}@container (min-width: 28rem){.bpModalDialogContainer{width:auto}}.bpModalDialogTitleContainer{display:flex;margin-bottom:var(--bpSpacing-2);justify-content:space-between;align-items:center}.bpModalDialogTitleText{font-size:1rem;line-height:1.5rem;color:var(--bpGray-900)}.bpModalDialogTitleCloseIcon{height:1.25rem;cursor:pointer;color:var(--bpGray-800)}.bpModalDialogTitleCloseIcon:hover{color:var(--bpGray-900)}.bpModalDialogContent{display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem;color:var(--bpGray-900)}.bpModalDialogNewConversationButton{padding-top:var(--bpSpacing-1);padding-bottom:var(--bpSpacing-1);padding-left:var(--bpSpacing-2);padding-right:var(--bpSpacing-2);margin-top:var(--bpSpacing-4);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));color:var(--bpGray-1);background:var(--bpPrimary-500);align-self:end}.bpModalDialogNewConversationButton:hover{background:var(--bpPrimary-600)}.bpMessageBlocksBubble{padding:var(--bpSpacing-2);padding-left:var(--bpSpacing-4);padding-right:var(--bpSpacing-4);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));max-width:85%}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksBubble{background-color:var(--message-bg);color:var(--message-text);border-bottom-right-radius:var(--bpRadius-sm)}.bpMessageContainer[data-direction=incoming] .bpMessageBlocksBubble{border-color:var(--bpGray-200);background-color:var(--bpGray-100);color:var(--bpGray-900);border-bottom-left-radius:var(--bpRadius-sm)}.bpMessageBlocksButton{padding:.25rem .75rem;background-color:var(--button-bg);color:var(--button-text);font-size:.875rem;line-height:1.25rem;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));cursor:pointer;border:1px solid var(--button-border)}.bpMessageBlocksButton:hover{background-color:var(--button-bg-hover);border:1px solid var(--button-border-hover)}.bpMessageBlocksButton[data-activated],.bpMessageBlocksButton[data-group-activated]{display:none}.bpMessageBlocksCarouselContainer{overflow:hidden;position:relative}.bpMessageBlocksCarouselSlidesContainer{display:grid;padding-left:var(--bpSpacing-2);padding-right:var(--bpSpacing-2);gap:var(--bpSpacing-2);grid-auto-flow:column;grid-auto-columns:90%}.bpMessageBlocksCarouselSlidesContainer>*{max-width:26rem}.bpMessageBlocksCarouselBackButton,.bpMessageBlocksCarouselNextButton{position:absolute;top:50%;transform:translateY(-50%);background-color:var(--bpGray-300);color:var(--bpGray-100);height:var(--bpSpacing-7);padding:var(--bpSpacing-0.5);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-full));cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;box-shadow:0 2px 4px #0000001a}.bpMessageBlocksCarouselBackButton:hover,.bpMessageBlocksCarouselNextButton:hover{background-color:var(--bpGray-400);color:var(--bpGray-1);transform:translateY(-50%) scale(1.1)}.bpMessageBlocksCarouselBackButton{left:var(--bpSpacing-1)}.bpMessageBlocksCarouselNextButton{right:var(--bpSpacing-1)}.bpMessageBlocksColumn{display:flex;flex-direction:column;gap:var(--bpSpacing-2);width:100%}.bpMessageBlocksColumn[data-horizontal=center]{align-items:center}.bpMessageBlocksColumn[data-horizontal=right]{align-items:flex-end}.bpMessageBlocksColumn[data-horizontal=left]{align-items:flex-start}.bpMessageBlocksColumn[data-vertical=stretch]{justify-content:space-between}.bpMessageBlocksDropdownButtonContainer{display:flex;padding:var(--bpSpacing-2);background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);border-radius:var(--bpRadius-md);align-items:center;justify-content:space-between;max-width:80%;cursor:pointer}.bpMessageBlocksDropdownButtonContainer[data-disabled=true]{color:var(--bpGray-700);cursor:not-allowed;border-color:var(--bpGray-200)}.bpMessageBlocksDropdownButtonText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpMessageBlocksDropdownButtonIcon{height:var(--bpSpacing-4);width:var(--bpSpacing-4);margin-left:var(--bpSpacing-2)}.bpMessageBlocksDropdownContentContainer{background-color:var(--bpGray-1);border:1px solid var(--bpGray-200);border-radius:var(--bpRadius-md);min-width:100px;max-height:200px;overflow-y:auto;padding:var(--bpSpacing-1)}.bpMessageBlocksDropdownContentContainer::-webkit-scrollbar{width:6px}.bpMessageBlocksDropdownContentContainer::-webkit-scrollbar-track{background-color:transparent}.bpMessageBlocksDropdownContentContainer::-webkit-scrollbar-thumb{background-color:var(--bpGray-300);border-radius:6px}.bpMessageBlocksDropdownContentContainer::-webkit-scrollbar-thumb:hover{background-color:var(--bpGray-500)}.bpMessageBlocksDropdownContentItem{color:var(--bpGray-800);padding:var(--bpSpacing-1);cursor:pointer;border-radius:var(--bpRadius-sm)}.bpMessageBlocksDropdownContentItem:hover{background-color:var(--bpGray-100);color:var(--bpGray-900)}.bpMessageBlocksFileContainer{display:flex;padding-top:var(--bpSpacing-2);padding-bottom:var(--bpSpacing-2);padding-left:var(--bpSpacing-4);padding-right:var(--bpSpacing-4);gap:var(--bpSpacing-2);align-items:center;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:var(--bpGray-100);color:var(--bpGray-900)}.bpMessageBlocksFileContainer:hover{color:var(--bpGray-950);background-color:var(--bpGray-200)}.bpMessageBlocksFileTitle{text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpMessageBlocksFileIcon{flex:none;width:1.25rem;height:1.25rem;color:var(--bpPrimary-800)}.bpMessageBlocksImageImage{min-width:0px;max-width:95%;border:1px solid var(--bpGray-200);object-fit:cover;border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md))}.bpMessageBlocksImageImage[data-orientation=landscape]{aspect-ratio:4 / 3}.bpMessageBlocksImageImage[data-orientation=portrait]{aspect-ratio:3 / 4}.bpMessageBlocksImageImage[data-orientation=square]{aspect-ratio:1 / 1}@media (min-width: 640px){.bpMessageBlocksImageImage{width:var(--bpSpacing-56)}}.bpMessageBlocksLocationContainer{display:flex;gap:var(--bpSpacing-2);padding:var(--bpSpacing-2);background-color:var(--bpGray-100);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-3xl));align-items:center}.bpMessageBlocksLocationTitle{color:var(--bpGray-900);font-size:.875rem;line-height:1.25rem;cursor:pointer}.bpMessageBlocksLocationIcon{height:var(--bpSpacing-5);width:var(--bpSpacing-5);color:var(--green-600)}.bpMessageBlocksRow{display:flex;gap:var(--bpSpacing-2);flex-wrap:wrap}.bpMessageBlocksTextHeading1{font-size:1.5rem;line-height:2rem;font-weight:500;color:var(--bpGray-900)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextHeading1{color:var(--bpPrimary-950)}.bpMessageBlocksTextHeading2{font-size:1.25rem;line-height:1.75rem;color:var(--bpGray-900)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextHeading2{color:var(--bpPrimary-950)}.bpMessageBlocksTextHeading3{font-size:1.125rem;line-height:1.75rem}.bpMessageBlocksTextUnorderedList,.bpMessageBlocksTextOrderedList{padding-left:var(--bpSpacing-2);margin-bottom:var(--bpSpacing-2);list-style-type:disc;list-style-position:inside}.bpMessageBlocksTextUnorderedList::marker,.bpMessageBlocksTextOrderedList::marker{color:var(--bpGray-800)}.bpMessageContainer[data-direction=outgoing] .bpMessageBlocksTextUnorderedList::marker,.bpMessageBlocksTextOrderedList::marker{color:var(--bpPrimary-950)}.bpMessageBlocksTextLink{text-decoration:underline}.bpMessageBlocksVideo{border:1px solid var(--bpGray-200);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-md))}.bpTypingIndicatorContainer{display:flex;gap:var(--bpSpacing-1_5);padding:var(--bpSpacing-2);background-color:var(--bpGray-100);border:1px solid var(--bpGray-200);border-radius:calc(var(--bpRadius-scale)*var(--bpRadius-lg));align-items:end}.bpTypingIndicatorContainer:before,.bpTypingIndicatorContainer:after{content:"";display:block;width:var(--bpSpacing-1_5);height:var(--bpSpacing-1_5);background-color:var(--bpGray-800);border-radius:50%;animation:jump 1.5s infinite}.bpTypingIndicatorContainer:after{animation-delay:.2s}.bpTypingIndicatorLoader{width:var(--bpSpacing-1_5);height:var(--bpSpacing-1_5);background-color:var(--bpGray-800);border-radius:50%;animation:jump 1.5s infinite .1s}@keyframes jump{0%,50%,to{transform:translateY(0)}25%{transform:translateY(-75%)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.umd.cjs",

package/readme.md

@@ -0,0 +1,56 @@
+# Webchat
+
+## Installation
+
+```bash
+npm install @botpress/webchat # for npm
+yarn add @botpress/webchat # for yarn
+pnpm add @botpress/webchat # for pnpm
+```
+
+## Usage
+
+```tsx
+import { useEffect, useState } from 'react'
+import { getClient, Webchat, WebchatProvider, WebchatClient, Configuration } from '@botpress/webchat'
+
+// also known as the webhookId; You can copy it from the Botpress Dashboard
+const clientId = '$CLIENT_ID'
+
+const userData = { foo: 'bar' }
+const configuration: Configuration = {
+  botAvatar: 'https://upload.wikimedia.org/wikipedia/commons/9/91/T-bone-raw-MCB.jpg',
+  botDescription: 'Hello, world!',
+  botName: 'Hello Bot',
+}
+
+function App() {
+  const [client, setClient] = useState<WebchatClient | null>(null)
+
+  useEffect(() => {
+    const client = getClient({ clientId })
+    setClient(client)
+
+    // You can listen on events sent by the Webchat backend like this:
+    client.on('*', (ev) => {
+      console.log('Event:', ev)
+
+      // You can also call the Webchat backend API like this:
+      client.getUser().then((user) => {
+        console.log('User:', user)
+      })
+    })
+  }, [])
+
+  if (!client) {
+    return <div>Loading...</div>
+  }
+  return (
+    <WebchatProvider theme={{}} client={client} configuration={configuration} userData={userData}>
+      <Webchat />
+    </WebchatProvider>
+  )
+}
+
+export default App
+```