@xapp/chat-widget 1.36.6 → 1.37.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CancelButton/CancelButton.d.ts +7 -0
- package/dist/components/CancelButton/index.d.ts +1 -0
- package/dist/components/ChatWidget/ChatWidget.stories.d.ts +2 -0
- package/dist/components/MinimizeButton/MinimizeButton.d.ts +1 -0
- package/dist/components/StatusContainer/StatusContainer.d.ts +2 -0
- package/dist/index.css +1 -1
- package/dist/index.es.js +91 -35
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +91 -35
- package/dist/index.js.map +1 -1
- package/dist/store/ChatState.d.ts +7 -0
- package/dist/store/actions/index.d.ts +1 -0
- package/dist/store/actions/resetAction.d.ts +1 -1
- package/dist/xapp/ChatServer.d.ts +29 -0
- package/dist/xapp/ChatServerMessage.d.ts +8 -0
- package/dist/xapp/StentorDirectChat.d.ts +1 -0
- package/package.json +8 -8
- package/dist/components/IconButton/IconButton.d.ts +0 -9
- package/dist/components/IconButton/index.d.ts +0 -1
- package/dist/components/Storybook/messages.d.ts +0 -5
- package/dist/components/Suggestions/SuggestionsGroupItem.d.ts +0 -16
- package/dist/components/Suggestions/SuggestionsItem.d.ts +0 -11
- package/dist/components/Suggestions/data.test.d.ts +0 -1
- package/dist/store/Reset.d.ts +0 -1
- package/dist/utils/__tests__/url-utils.test.d.ts +0 -1
- package/dist/utils/url-utils.d.ts +0 -8
- package/dist/utils/useJsonFetch.d.ts +0 -20
- package/dist/utils/uuid.d.ts +0 -7
- package/dist/utils/uuid.test.d.ts +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as CancelButton } from "./CancelButton";
|
|
@@ -8,6 +8,7 @@ export interface WidgetEnvDeprecated {
|
|
|
8
8
|
}
|
|
9
9
|
export declare const Default: VFC;
|
|
10
10
|
export declare const Direct: VFC;
|
|
11
|
+
export declare const DirectWithExternalMiddleware: VFC;
|
|
11
12
|
export declare const Static: VFC;
|
|
12
13
|
export declare const Docked: VFC;
|
|
13
14
|
export declare const EmptyMenu: VFC;
|
|
@@ -19,3 +20,4 @@ export declare const InvalidServerUrl: VFC;
|
|
|
19
20
|
export declare const WithCustomComponents: VFC;
|
|
20
21
|
export declare const WithMiddlewareFromURL: VFC;
|
|
21
22
|
export declare const WithToken: VFC;
|
|
23
|
+
export declare const WithOutActions: VFC;
|
|
@@ -5,9 +5,11 @@ import "./StatusContainer.scss";
|
|
|
5
5
|
export interface Props {
|
|
6
6
|
accountStatus: string;
|
|
7
7
|
readonly canMinimize: boolean;
|
|
8
|
+
readonly canCancel: boolean;
|
|
8
9
|
readonly agent: ChatUserInfo;
|
|
9
10
|
readonly config?: WidgetHeaderConfig;
|
|
10
11
|
minimizeOnClick: () => void;
|
|
12
|
+
cancelOnClick: () => void;
|
|
11
13
|
}
|
|
12
14
|
declare const StatusContainer: FC<React.PropsWithChildren<Props>>;
|
|
13
15
|
export default StatusContainer;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-family:OpenSansSemibold;font-style:normal;font-weight:600;font-display:swap;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2")}@font-face{font-family:RobotoRegular;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format("woff2")}@font-face{font-family:RobotoMedium;font-style:oblique;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format("woff2")}::-webkit-input-placeholder{font-style:italic;color:#e1e2e1}:-moz-placeholder{font-style:italic}::-moz-placeholder{font-style:italic}:-ms-input-placeholder{font-style:italic}.widget-container{background:#fff;display:flex;flex-flow:column nowrap;width:100%;height:100%;visibility:hidden;font-family:RobotoRegular,serif;box-shadow:0 5px 40px rgba(0,0,0,.16);overflow:hidden;border-radius:var(--xapp-widget-border-radius, 10px);border:var(--xapp-widget-border-width, 0px) solid var(--xapp-widget-border-color, var(--xapp-primary-color, #616161));box-sizing:border-box}.widget-container *,.widget-container *:before,.widget-container *:after{box-sizing:border-box}.widget-container--normal,.widget-container--static{position:fixed;z-index:1000;right:var(--xapp-widget-margin-right, 10px);bottom:var(--xapp-widget-margin-bottom, 10px)}.widget-container--normal.visible,.widget-container--static.visible{width:min(var(--xapp-widget-width, 400px), 100vw - var(--xapp-widget-margin-left, 10px) - var(--xapp-widget-margin-right, 10px));height:min(var(--xapp-widget-height, 500px), 100vh - var(--xapp-widget-margin-top, 10px) - var(--xapp-widget-margin-bottom, 10px))}.widget-container--docked{width:100%;height:100%}.widget-container:not(.visible){animation:widget-hide .5s backwards;width:64px;height:64px}.widget-container.visible{animation:widget-show .5s forwards}svg{display:block;margin:auto;height:100%}.message-svg path{fill:var(--xapp-primary-color, #616161)}.chat-msg{line-height:20px;font-size:14px;margin-left:48px;max-width:var(--xapp-messages-max-width, 240px)}.chat-msg--expand{max-width:calc(100% - 48px);width:calc(100% - 48px)}.chat-msg__fullwidth{max-width:100%;width:100%}.chat-msg--no-ava{margin-left:0}.chat-typing-progress .chat-msg{color:#30375b}.visitor .chat-text-container{padding-right:20px}.chat-media-container{border-radius:8px;border:1px solid #ddd;overflow:hidden}.chat-img{min-width:180px;min-height:120px;background-position:center;background-size:cover}.system-msg-container{text-align:center;margin-bottom:16px}.system-msg{font-size:14px;color:#bfbfbf}.chat-rating-card{padding-bottom:16px;text-align:center}.buttons-container{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;width:100%}.buttons-container .button{flex-grow:1}.buttons-container .button:not(:last-child){margin-right:8px}.buttons-container .button-card{flex-grow:0}.buttons-container .button-card:not(:last-child){margin-right:8px}@keyframes widget-show{0%{visibility:hidden;opacity:0}1%{visibility:visible;opacity:0;transform:translateY(50%)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes widget-hide{0%{transform:translateY(0)}99%{opacity:0;transform:translateY(50%)}100%{visibility:hidden;opacity:0}}@keyframes widget-show-grow{0%{visibility:hidden;opacity:0}1%{visibility:visible;opacity:0;transform:scale(0.5)}100%{visibility:visible;opacity:1;transform:scale(1)}}@keyframes widget-hide-shrink{0%{visibility:visible;opacity:1;transform:scale(1)}99%{visibility:visible;opacity:0;transform:scale(0.5)}100%{visibility:hidden;opacity:0}}.spinner-container{z-index:1000;position:absolute;width:100%;height:100%;display:flex;align-items:center;background:#fff;transition:visibility 500ms,opacity 500ms;visibility:hidden;opacity:0;top:0;left:0}.spinner-container.visible{visibility:visible;opacity:1}.spinner{width:40px;height:40px;margin:100px auto;background-color:var(--xapp-primary-color, #616161);border-radius:100%;-webkit-animation:sk-scaleout 1s infinite ease-in-out;animation:sk-scaleout 1s infinite ease-in-out}.chevron{width:100%;height:100%}@-webkit-keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}@keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.action-button{border:1px solid #ddd;border-radius:4px;text-align:center;opacity:1;outline:none;font-size:14px;padding:8px;text-align:center}.action-button:hover{opacity:.8;cursor:pointer}.xappw-carousel{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.xappw-carousel__prev,.xappw-carousel__next{flex:0 0 48px;height:30px;cursor:pointer}.xappw-carousel-items{display:flex;position:relative;height:auto;align-items:stretch;white-space:nowrap;overflow-x:hidden;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;-moz-overflow-style:none;-webkit-overflow-scrolling:touch}@media(hover: none)and (pointer: coarse){.xappw-carousel-items{overflow-x:auto}}.xappw-carousel-items__item{display:inline-flex;flex-direction:column;padding-right:10px;flex-shrink:0}.xappw-carousel-items__item:last-child{padding-right:0}@media(max-width: 640px){.xappw-carousel-items__item{min-width:100%}}.avatar{border-radius:16px;color:#fff;background-position:center;background-size:cover;background-repeat:no-repeat;width:100%;height:100%}.avatar--agent{background-color:#fff}.avatar--visitor{background-color:var(--xapp-primary-color, #616161)}.avatar--empty{background-color:transparent}.chat-card-container{border-radius:10px;position:relative;overflow:hidden;color:#fff;background:#f6f6f6}.chat-card-container .chat-card-img{border-radius:0}.chat-card-container__img{min-width:220px;height:120px}.chat-card-container .chat-card-title{padding:2px 10px;color:#2e375a;font-family:RobotoMedium,serif;font-size:12px;line-height:14px;font-weight:bold}.chat-card-container .chat-card-title span{display:inline-block;white-space:pre-wrap}.chat-card-container .chat-card-sub-title{padding:2px 10px;color:#2e375a;font-family:RobotoRegular,serif;font-size:10px;line-height:14px}.chat-card-container .chat-card-sub-title span{display:inline-block;white-space:pre-wrap}.chat-card-container .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-primary-color, #616161);color:#d5d9e7;cursor:pointer}.chat-button{position:fixed;bottom:0;right:0;cursor:pointer;margin-top:var(--xapp-chat-button-margin-top, var(--xapp-widget-margin-top, 16px));margin-right:var(--xapp-chat-button-margin-right, var(--xapp-widget-margin-right, 16px));margin-bottom:var(--xapp-chat-button-margin-bottom, var(--xapp-widget-margin-bottom, 16px));margin-left:var(--xapp-chat-button-margin-left, var(--xapp-widget-margin-left, 16px));display:block;opacity:1;animation:widget-show-grow .5s backwards;width:80px;height:80px}.chat-button.visible{animation:widget-hide-shrink .5s forwards}.chat-button__btn{position:absolute;width:48px;height:48px;border-radius:24px;background-color:var(--xapp-chat-button-background, var(--xapp-primary-color, #616161));box-shadow:0 0 8px 0 rgba(0,0,0,.3);bottom:0;right:0}.chat-button__cta{position:absolute;bottom:56px;right:24px;white-space:nowrap;font-size:16px;font-family:RobotoRegular,serif}.chat-chips{width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;box-sizing:border-box;margin:0 auto;padding:10px;scroll-behavior:smooth;-ms-overflow-style:none;-moz-overflow-style:none;-webkit-overflow-scrolling:touch}.chat-chips::-webkit-scrollbar{background-color:#fff;height:10px}.chat-chips::-webkit-scrollbar-track{background-color:#fff}.chat-chips::-webkit-scrollbar-button{display:none}.chat-chips::-webkit-scrollbar-thumb{background-color:#babac0;border-radius:10px;border:2.5px solid #fff}.chat-chip{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;color:#2f385a;line-height:25px;border-radius:25px;border:thin solid #aeb3be;cursor:pointer;user-select:none}.chat-chip-link{text-decoration:underline}.chat-list-item{display:flex;flex-direction:column;align-items:flex-start;min-width:220px;min-height:120px;flex:1 1 auto;border:solid 1px #ccc;border-radius:12px}.chat-list-item-container{display:flex;flex-direction:column;flex:1 1 auto}.chat-list-item__img{border-radius:12px 12px 0 0;width:100%;height:120px;overflow:hidden}.chat-list-item__title{text-align:left;font-family:var(--xapp-carousel-title-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-title-font-weight, bold);font-size:var(--xapp-carousel-title-font-size, 14px);font-style:var(--xapp-carousel-title-font-style, normal);color:var(--xapp-carousel-title-text-color, #000);line-height:1.3;padding:2px}.chat-list-item__title span{display:inline-block;white-space:pre-wrap}.chat-list-item__subtitle{text-align:left;font-family:var(--xapp-carousel-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-subtitle-font-weight, normal);font-size:var(--xapp-carousel-subtitle-font-size, 12px);font-style:var(--xapp-carousel-subtitle-font-style, normal);color:var(--xapp-carousel-subtitle-text-color, #979797);line-height:1.3;max-width:200px;padding:2px}.chat-list-item__subtitle span{display:inline-block;white-space:pre-wrap}.chat-list-item__actions{margin-top:auto}.chat-list-item .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-carousel-action-button-color, var(--xapp-primary-color, #616161));color:#d5d9e7;cursor:pointer}.chat-msg-container-wrapper{display:flex;margin-bottom:16px}.chat-msg-container-wrapper.visitor{justify-content:flex-end}.chat-msg-container-wrapper.agent{justify-content:flex-start}.chat-msg-container-wrapper.sibling{margin-bottom:8px}.chat-msg-container-wrapper.sibling .avatar{display:none}.chat-msg-container{display:flex;flex-flow:column nowrap;flex:0 0 auto;justify-content:flex-start;max-width:100%;position:relative}.chat-msg-container.visitor{align-items:flex-end}.chat-msg-container.visitor .xappw-chat-msg-part__avatar{right:0;display:none}.chat-msg-container.agent{align-items:stretch}.chat-msg-container.agent .xappw-chat-msg-part__avatar{width:40px;height:40px;left:0}.chat-text-container p{margin:0 0 8px 0;padding:0}.chat-text-bubble{border-radius:10px;padding:10px;position:relative;overflow:visible}.chat-text-bubble--mine{font-family:var(--xapp-messages-mine-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-messages-mine-font-weight, normal);font-size:var(--xapp-messages-mine-font-size, 14px);font-style:var(--xapp-messages-mine-font-style, normal);color:var(--xapp-messages-mine-text-color, #ffffff);background:var(--xapp-messages-mine-bubble-color, #20df20);border-bottom-right-radius:0}.chat-text-bubble--mine .chat-text-bubble__tail{right:-8px;color:var(--xapp-messages-mine-bubble-color, #20df20)}.chat-text-bubble--others{font-family:var(--xapp-messages-others-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-messages-others-font-weight, normal);font-size:var(--xapp-messages-others-font-size, 14px);font-style:var(--xapp-messages-others-font-style, normal);color:var(--xapp-messages-others-text-color, #262726);background:var(--xapp-messages-others-bubble-color, #e1e2e1);border-bottom-left-radius:0}.chat-text-bubble--others .chat-text-bubble__tail{left:-8px;color:var(--xapp-messages-others-bubble-color, #e1e2e1)}.chat-text-bubble span{white-space:pre-wrap}.chat-typing-progress .chat-text-bubble{padding:8px 10px;margin-top:4px}.chat-text-bubble__tail{position:absolute;width:8px;height:24px;bottom:0}.xappw-chat-msg-part{display:inline-block;position:relative;word-wrap:break-word}.xappw-chat-msg-part+.xappw-chat-msg-part{margin-top:4px}.xappw-chat-msg-part+.xappw-chat-msg-part .chat-card-img{border-radius:12px 12px 12px 0}.xappw-chat-msg-part__avatar{position:absolute;bottom:0;z-index:10}.xappw-chat-msg-part ul{list-style-position:inside;padding:0;margin:0 0 8px 0}.xappw-chat-msg-part li{padding:0;margin:0}.cta-bubble{position:relative;border-radius:50%;background:var(--xapp-cta-background, #e1e2e1);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;text-align:center;max-width:192px}.cta-bubble__tail{position:absolute;left:-16px;right:-16px;top:-16px;bottom:-16px;z-index:1;color:var(--xapp-cta-background, #e1e2e1)}.cta-bubble__tail svg{width:100%;height:100%;margin:0;padding:0}.cta-bubble__content{font-family:var(--xapp-cta-font-family, 14px);font-size:var(--xapp-cta-font-size, 14px);color:var(--xapp-cta-text-color, var(--xapp-primary-color, #616161));z-index:2}.message-list-container{flex-grow:1;flex-shrink:1;overflow-y:scroll;display:flex;flex-direction:column;background:var(--xapp-content-background, #fff)}.message-list-container__msgs{padding-top:var(--xapp-messages-padding-top, 16px);padding-right:var(--xapp-messages-padding-right, 16px);padding-bottom:var(--xapp-messages-padding-bottom, 0);padding-left:var(--xapp-messages-padding-left, 20px)}.message-list-container__chips{flex:0 0 auto;border-top:solid 1px #ccc;margin-top:auto}.message-list-container__chips--empty{flex-basis:0;border:none;overflow:hidden}.xappw-vlist-item{display:flex;flex-direction:row;flex:0 0 auto;min-width:100%;min-height:56px;padding:8px;box-sizing:border-box;cursor:pointer}.xappw-vlist-item--normal{align-items:flex-start}.xappw-vlist-item--titles{align-items:center}.xappw-vlist-item:hover{background-color:#eee}.xappw-vlist-item__description{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}.xappw-vlist-item__side{flex:0 0 auto;display:flex;flex-direction:column}.xappw-vlist-item__img{border-radius:12px;width:40px;height:40px;overflow:hidden}.xappw-vlist-item__external-link{width:20px;margin:0 4px 4px auto;display:inline-block}.xappw-vlist-item__title{text-align:left;font-family:var(--xapp-carousel-title-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-title-font-weight, bold);font-size:var(--xapp-carousel-title-font-size, 14px);font-style:var(--xapp-carousel-title-font-style, normal);color:var(--xapp-carousel-title-text-color, #000);line-height:1.3}.xappw-vlist-item__title span{display:inline-block;white-space:pre-wrap}.xappw-vlist-item__link{font-family:var(--xapp-carousel-link-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-link-font-weight, normal);font-size:var(--xapp-carousel-link-font-size, 12px);font-style:var(--xapp-carousel-link-font-style, normal);color:var(--xapp-carousel-link-text-color, #666);line-height:1.3;overflow:hidden;text-overflow:ellipsis;max-width:100%}.xappw-vlist-item__subtitle{text-align:left;font-family:var(--xapp-carousel-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-subtitle-font-weight, normal);font-size:var(--xapp-carousel-subtitle-font-size, 12px);font-style:var(--xapp-carousel-subtitle-font-style, normal);color:var(--xapp-carousel-subtitle-text-color, #979797);line-height:1.3}.xappw-vlist-item__subtitle span{display:inline-block;white-space:pre-wrap}.xappw-vlist-item .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-carousel-action-button-color, var(--xapp-primary-color, #616161));color:#d5d9e7;cursor:pointer}.chat-menu{display:flex;flex-flow:column;flex-shrink:0;z-index:999;overflow-y:hidden;-webkit-transition:max-height .8s ease-in-out;-moz-transition:max-height .8s ease-in-out;-o-transition:max-height .8s ease-in-out;transition:max-height .8s ease-in-out}.chat-menu--closed{max-height:0}.chat-menu--opened{max-height:calc(4 * var(--xapp-menu-item-height, 24px))}.xappw-vlist{display:flex;flex-flow:column nowrap}.xappw-vlist__header{padding:16px 8px;font-family:"RobotoRegular","serif";font-weight:bold;font-size:16px}.xappw-vlist-container{display:flex;flex-flow:column nowrap;flex:0 0 auto;justify-content:flex-start;max-width:100%;position:relative;white-space:nowrap;border:solid 1px #ccc;border-radius:12px;overflow:hidden}.xappw-vlist-container .xappw-vlist-container__item{display:inline-block;border-top:solid 1px #ccc}.xappw-vlist-container .xappw-vlist-container__item:first-child{border-top:none}.chat-menu-item{border:1px solid #ddd;border-radius:0;opacity:1;outline:none;background:var(--xapp-menu-item-background, #efefef);font-family:var(--xapp-menu-item-font-family, 14px);font-weight:var(--xapp-menu-item-font-weight, normal);font-size:var(--xapp-menu-item-font-size, 14px);font-style:var(--xapp-menu-item-font-style, normal);color:var(--xapp-menu-item-text-color, var(--xapp-primary-color, #616161));height:var(--xapp-menu-item-height, 24px);box-sizing:border-box;padding:4px 4px 4px 30px;text-align:left}.chat-menu-item:hover{opacity:.8;cursor:pointer}.xappw-chat-action-item{text-decoration:none}.xappw-chat-action-item--action{cursor:pointer}.chat-footer{position:relative;background-color:var(--xapp-footer-background, var(--xapp-primary-color, #616161))}.chat-footer__menu-icon{border-top:solid var(--xapp-footer-border-width, 0px) var(--xapp-footer-border-color, var(--xapp-primary-color, #616161));z-index:999;padding:6px 0;flex-shrink:0}.chat-footer__menu-icon+.chat-footer__input{margin-top:-6px}.chat-footer__input{margin-top:6px;margin-bottom:6px}.xappw-chat-footer__suggestions{position:absolute;bottom:100%;left:0;right:0;overflow:hidden;z-index:100}.server-offline{position:absolute;top:0;right:0;left:0;bottom:0;z-index:5000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.status-container{display:flex;flex-flow:row nowrap;justify-content:space-between;padding-left:10px;z-index:999;line-height:40px;height:40px;flex-shrink:0;color:#fff;position:relative;width:100%;background-color:var(--xapp-header-background, var(--xapp-primary-color, #616161));border-bottom:solid var(--xapp-header-border-width, 0px) var(--xapp-header-border-color, var(--xapp-primary-color, #616161));align-items:center}.status-container__avatar{width:30px;height:30px}.status-container__avatar .avatar:not(.avatar--empty){background-color:#a4a7b6}.status-text{display:inline-block;position:absolute;left:48px;font-family:var(--xapp-header-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-header-font-weight, normal);font-size:var(--xapp-header-font-size, 16px);font-style:var(--xapp-header-font-style, normal);color:var(--xapp-header-text-color, rgba(255, 255, 255, 0.87))}.chat-card-img{display:block;width:100%;height:100%}.chat-card-img__content{background-position:center;background-size:cover;width:100%;height:100%}.xappw-suggestions{display:flex;flex-direction:column;font-family:RobotoRegular,serif}.xappw-suggestions__answer{background-color:#d9d9d9;padding:8px 11px;border-radius:12px}.xappw-suggestions__groups{background-color:#f3f3f3;padding:8px 0}.xappw-suggestions__use{width:28px;padding:4px;color:inherit}.xappw-multiselect{list-style:none;padding:0;margin:0}.xappw-multiselect li{padding:0;margin:0}.xapp-search-rich-text{display:inline-block;max-width:100%;overflow:hidden;white-space:pre-wrap}.xapp-search-icon-button{border:none;background:none;cursor:pointer;padding:0;display:flex;align-items:center}.xapp-search-icon-button__content{display:flex;width:100%}.xappw-message-bubble{border-radius:10px;padding:10px;background:var(--xapp-bubble-background, green)}.xappw-rich-input__input{display:block;width:100%;border:none;outline:none;box-sizing:border-box;margin:0;font-size:inherit;line-height:inherit;color:inherit}.xappw-suggestions-group__items{display:flex;flex-direction:column;padding:2px 0}.xappw-suggestions-group__heading{margin:0 16px}.xappw-suggestions-group-heading{display:flex;align-items:center;font-size:12px;padding:2px 0;color:#061739}.xappw-suggestions-group-heading:after{content:"";border-top:solid 1px #d4d4d4;flex:1 1 auto;margin-left:8px}.xappw-suggestions-item{padding:0 0 0 24px;box-sizing:border-box;width:100%;white-space:nowrap;display:flex;align-items:center;overflow:hidden;font-size:15px;cursor:pointer;border-bottom:solid 1px transparent;color:#061739}.xappw-suggestions-item--current,.xappw-suggestions-item:hover{background-color:#3395d2;color:#fff;text-decoration:underline}@media(hover: hover){.xappw-suggestions-item--current .xappw-suggestions-item__actions,.xappw-suggestions-item:hover .xappw-suggestions-item__actions{visibility:visible;color:#fff}}.xappw-suggestions-item__texts{padding:3px 0;flex:1 1 auto;overflow:hidden}.xappw-suggestions-item__actions{flex:0 0 auto;display:flex;margin-left:8px}@media(hover: hover){.xappw-suggestions-item__actions{visibility:hidden}}.xappw-suggestions-list{display:flex;flex-direction:column}.xapp-search-rich-text-span{flex:0 1 auto;display:inline-block;max-width:100%}.xapp-search-rich-text-span:last-child{overflow:hidden;white-space:pre;text-overflow:ellipsis}.xapp-search-rich-text-bold-span{font-weight:bold}.xapp-search-rich-text-input-span{text-decoration:none;font-size:inherit;height:calc(1.5em - 2px);line-height:1em;width:8em;color:inherit}.xapp-search-rich-text-input-span--readonly{border:dashed 1px green;color:green;height:calc(1em - 2px)}.xapp-search-rich-text-normal-span{font-weight:normal}.message-form .section{margin-bottom:16px}.message-form .label{display:block;margin-bottom:4px;color:var(--xapp-primary-color, #616161)}.message-form input,.message-form textarea{border:1px solid #ddd;border-radius:4px;outline-width:0;width:100%;font-size:14px;box-sizing:border-box}.message-form input{height:32px;padding:0 10px}.message-form textarea{padding:8px 10px;min-height:100px;resize:none;overflow-y:auto}.message-form__submit{width:100%;background-color:var(--xapp-primary-color, #616161);color:#fff}.message-form--shrink-enter{opacity:.01;position:relative;top:100px}.message-form--shrink-enter-active{position:relative;top:0;opacity:1;transition:opacity 500ms,top 500ms;transition-delay:500ms}.message-form--shrink-exit{opacity:.5;position:relative;top:0}.message-form--shrink-exit-active{top:-200px;opacity:.01;transition:top 500ms,opacity 500ms}.message-form--grow-enter{opacity:.5;position:relative;top:-200px}.message-form--grow-enter-active{position:relative;top:0;opacity:1;transition:opacity 500ms,top 500ms}.message-form--grow-exit{opacity:.5;position:relative;top:0;height:50px}.message-form--grow-exit-active{top:-100px;height:0;opacity:.01;transition:top 500ms,opacity 500ms,height 500ms}.message-form--sent .button-resend{width:100%;margin-top:16px;background-color:var(--xapp-primary-color, #616161);color:#fff}.drawer-bars{display:flex;flex-direction:column;align-items:center;padding:6px 0;cursor:pointer}.drawer-bar{flex:0 0 5px;border-radius:5px;background:var(--xapp-menu-button-color, #fff);width:25px;margin:2.5px}.drawer-bar:first-child{margin-top:0}.drawer-bar:last-child{margin-bottom:0}.xappw-input-container{flex-shrink:0;z-index:999;padding:6px 20px}.xappw-input-container:not(.visible){display:none}.xappw-input-container.drag-drop-zone{outline:3px dashed gray;outline-offset:-3px}.xappw-input-form{display:flex;align-items:center;overflow:hidden;line-height:48px;position:relative;border-radius:var(--xapp-input-border-radius, 20px);background:var(--xapp-input-background, #fff)}.xappw-input-form__buttons{display:flex;position:absolute;right:10px;z-index:2;height:16px}.xappw-input-form__btn{width:20px}.xappw-input{min-height:32px;padding:7px 10px;line-height:normal;display:inline-block;box-sizing:border-box;font-family:var(--xapp-input-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-font-weight, normal);font-size:var(--xapp-input-font-size, 14px);font-style:var(--xapp-input-font-style, normal);color:var(--xapp-input-text-color, #000);outline-width:0;flex-grow:1;border:var(--xapp-input-border-width, #fff) solid var(--xapp-input-border-color, #fff);background:transparent}.xappw-input:focus::placeholder{color:transparent}.xappw-input::placeholder{color:#7d7d7d}.xappw-input{z-index:1}.minimize-button{position:absolute;width:48px;top:0;right:0;height:100%;display:flex;justify-content:center;cursor:pointer;font-size:20px;color:var(--xapp-minimize-button-color, #a3a6b4)}.minimize-button:after{content:"⨉"}.card-container{padding-top:16px;position:relative}.card-container__content{color:#555;border-radius:8px;border:1px solid #ddd;padding:24px 16px 16px 16px;font-size:14px}.card-container__title{text-align:center;color:var(--xapp-primary-color, #616161);margin-bottom:8px}.card-container__icon{width:32px;height:32px;position:relative;background-color:#fff;border:1px solid #e0e0e0;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0,0,0,.1);margin:-16px auto;z-index:999}@keyframes typing-animation{0%{transform:translateY(0px)}28%{transform:translateY(-5px)}44%{transform:translateY(0px)}}.typing-indicator{height:20px;display:inline-flex;align-items:center}.typing-indicator-part:nth-child(1){animation-delay:200ms}.typing-indicator-part:nth-child(2){animation-delay:300ms}.typing-indicator-part:nth-child(3){animation-delay:400ms}.typing-indicator-part{display:inline-block;animation:typing-animation 1.5s infinite ease-in-out;border-radius:50%;width:7px;height:7px;margin:0 3px;background-color:#7a7a7a}.xappw-send-button{color:var(--xapp-send-button-color, #505050)}
|
|
1
|
+
@font-face{font-family:OpenSansSemibold;font-style:normal;font-weight:600;font-display:swap;src:local("Open Sans SemiBold"),local("OpenSans-SemiBold"),url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format("woff2")}@font-face{font-family:RobotoRegular;font-style:normal;font-weight:400;font-display:swap;src:local("Roboto"),local("Roboto-Regular"),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format("woff2")}@font-face{font-family:RobotoMedium;font-style:oblique;font-weight:500;font-display:swap;src:local("Roboto Medium"),local("Roboto-Medium"),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format("woff2")}::-webkit-input-placeholder{font-style:italic;color:#e1e2e1}:-moz-placeholder{font-style:italic}::-moz-placeholder{font-style:italic}:-ms-input-placeholder{font-style:italic}.widget-container{background:#fff;display:flex;flex-flow:column nowrap;width:100%;height:100%;visibility:hidden;font-family:RobotoRegular,serif;box-shadow:0 5px 40px rgba(0,0,0,.16);overflow:hidden;border-radius:var(--xapp-widget-border-radius, 10px);border:var(--xapp-widget-border-width, 0px) solid var(--xapp-widget-border-color, var(--xapp-primary-color, #616161));box-sizing:border-box}.widget-container *,.widget-container *:before,.widget-container *:after{box-sizing:border-box}.widget-container--normal,.widget-container--static{position:fixed;z-index:1000;right:var(--xapp-widget-margin-right, 10px);bottom:var(--xapp-widget-margin-bottom, 10px)}.widget-container--normal.visible,.widget-container--static.visible{width:min(var(--xapp-widget-width, 400px), 100vw - var(--xapp-widget-margin-left, 10px) - var(--xapp-widget-margin-right, 10px));height:min(var(--xapp-widget-height, 500px), 100vh - var(--xapp-widget-margin-top, 10px) - var(--xapp-widget-margin-bottom, 10px))}.widget-container--docked{width:100%;height:100%}.widget-container:not(.visible){animation:widget-hide .5s backwards;width:64px;height:64px}.widget-container.visible{animation:widget-show .5s forwards}svg{display:block;margin:auto;height:100%}.message-svg path{fill:var(--xapp-primary-color, #616161)}.chat-msg{line-height:20px;font-size:14px;margin-left:48px;max-width:var(--xapp-messages-max-width, 240px)}.chat-msg--expand{max-width:calc(100% - 48px);width:calc(100% - 48px)}.chat-msg__fullwidth{max-width:100%;width:100%}.chat-msg--no-ava{margin-left:0}.chat-typing-progress .chat-msg{color:#30375b}.visitor .chat-text-container{padding-right:20px}.chat-media-container{border-radius:8px;border:1px solid #ddd;overflow:hidden}.chat-img{min-width:180px;min-height:120px;background-position:center;background-size:cover}.system-msg-container{text-align:center;margin-bottom:16px}.system-msg{font-size:14px;color:#bfbfbf}.chat-rating-card{padding-bottom:16px;text-align:center}.buttons-container{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;width:100%}.buttons-container .button{flex-grow:1}.buttons-container .button:not(:last-child){margin-right:8px}.buttons-container .button-card{flex-grow:0}.buttons-container .button-card:not(:last-child){margin-right:8px}@keyframes widget-show{0%{visibility:hidden;opacity:0}1%{visibility:visible;opacity:0;transform:translateY(50%)}100%{visibility:visible;opacity:1;transform:translateY(0)}}@keyframes widget-hide{0%{transform:translateY(0)}99%{opacity:0;transform:translateY(50%)}100%{visibility:hidden;opacity:0}}@keyframes widget-show-grow{0%{visibility:hidden;opacity:0}1%{visibility:visible;opacity:0;transform:scale(0.5)}100%{visibility:visible;opacity:1;transform:scale(1)}}@keyframes widget-hide-shrink{0%{visibility:visible;opacity:1;transform:scale(1)}99%{visibility:visible;opacity:0;transform:scale(0.5)}100%{visibility:hidden;opacity:0}}.spinner-container{z-index:1000;position:absolute;width:100%;height:100%;display:flex;align-items:center;background:#fff;transition:visibility 500ms,opacity 500ms;visibility:hidden;opacity:0;top:0;left:0}.spinner-container.visible{visibility:visible;opacity:1}.spinner{width:40px;height:40px;margin:100px auto;background-color:var(--xapp-primary-color, #616161);border-radius:100%;-webkit-animation:sk-scaleout 1s infinite ease-in-out;animation:sk-scaleout 1s infinite ease-in-out}.chevron{width:100%;height:100%}@-webkit-keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}@keyframes sk-scaleout{0%{transform:scale(0)}100%{transform:scale(1);opacity:0}}.action-button{border:1px solid #ddd;border-radius:4px;text-align:center;opacity:1;outline:none;font-size:14px;padding:8px;text-align:center}.action-button:hover{opacity:.8;cursor:pointer}.avatar{border-radius:16px;color:#fff;background-position:center;background-size:cover;background-repeat:no-repeat;width:100%;height:100%}.avatar--agent{background-color:#fff}.avatar--visitor{background-color:var(--xapp-primary-color, #616161)}.avatar--empty{background-color:transparent}.chat-button{position:fixed;bottom:0;right:0;cursor:pointer;margin-top:var(--xapp-chat-button-margin-top, var(--xapp-widget-margin-top, 16px));margin-right:var(--xapp-chat-button-margin-right, var(--xapp-widget-margin-right, 16px));margin-bottom:var(--xapp-chat-button-margin-bottom, var(--xapp-widget-margin-bottom, 16px));margin-left:var(--xapp-chat-button-margin-left, var(--xapp-widget-margin-left, 16px));display:block;opacity:1;animation:widget-show-grow .5s backwards;width:80px;height:80px}.chat-button.visible{animation:widget-hide-shrink .5s forwards}.chat-button__btn{position:absolute;width:48px;height:48px;border-radius:24px;background-color:var(--xapp-chat-button-background, var(--xapp-primary-color, #616161));box-shadow:0 0 8px 0 rgba(0,0,0,.3);bottom:0;right:0}.chat-button__cta{position:absolute;bottom:56px;right:24px;white-space:nowrap;font-size:16px;font-family:RobotoRegular,serif}.xappw-carousel{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.xappw-carousel__prev,.xappw-carousel__next{flex:0 0 48px;height:30px;cursor:pointer}.xappw-carousel-items{display:flex;position:relative;height:auto;align-items:stretch;white-space:nowrap;overflow-x:hidden;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;-moz-overflow-style:none;-webkit-overflow-scrolling:touch}@media(hover: none)and (pointer: coarse){.xappw-carousel-items{overflow-x:auto}}.xappw-carousel-items__item{display:inline-flex;flex-direction:column;padding-right:10px;flex-shrink:0}.xappw-carousel-items__item:last-child{padding-right:0}@media(max-width: 640px){.xappw-carousel-items__item{min-width:100%}}.chat-chip{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;color:#2f385a;line-height:25px;border-radius:25px;border:thin solid #aeb3be;cursor:pointer;user-select:none}.chat-chip-link{text-decoration:underline}.chat-card-container{border-radius:10px;position:relative;overflow:hidden;color:#fff;background:#f6f6f6}.chat-card-container .chat-card-img{border-radius:0}.chat-card-container__img{min-width:220px;height:120px}.chat-card-container .chat-card-title{padding:2px 10px;color:#2e375a;font-family:RobotoMedium,serif;font-size:12px;line-height:14px;font-weight:bold}.chat-card-container .chat-card-title span{display:inline-block;white-space:pre-wrap}.chat-card-container .chat-card-sub-title{padding:2px 10px;color:#2e375a;font-family:RobotoRegular,serif;font-size:10px;line-height:14px}.chat-card-container .chat-card-sub-title span{display:inline-block;white-space:pre-wrap}.chat-card-container .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-primary-color, #616161);color:#d5d9e7;cursor:pointer}.chat-chips{width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;box-sizing:border-box;margin:0 auto;padding:10px;scroll-behavior:smooth;-ms-overflow-style:none;-moz-overflow-style:none;-webkit-overflow-scrolling:touch}.chat-chips::-webkit-scrollbar{background-color:#fff;height:10px}.chat-chips::-webkit-scrollbar-track{background-color:#fff}.chat-chips::-webkit-scrollbar-button{display:none}.chat-chips::-webkit-scrollbar-thumb{background-color:#babac0;border-radius:10px;border:2.5px solid #fff}.chat-menu{display:flex;flex-flow:column;flex-shrink:0;z-index:999;overflow-y:hidden;-webkit-transition:max-height .8s ease-in-out;-moz-transition:max-height .8s ease-in-out;-o-transition:max-height .8s ease-in-out;transition:max-height .8s ease-in-out}.chat-menu--closed{max-height:0}.chat-menu--opened{max-height:calc(4 * var(--xapp-menu-item-height, 24px))}.chat-msg-container-wrapper{display:flex;margin-bottom:16px}.chat-msg-container-wrapper.visitor{justify-content:flex-end}.chat-msg-container-wrapper.agent{justify-content:flex-start}.chat-msg-container-wrapper.sibling{margin-bottom:8px}.chat-msg-container-wrapper.sibling .avatar{display:none}.chat-msg-container{display:flex;flex-flow:column nowrap;flex:0 0 auto;justify-content:flex-start;max-width:100%;position:relative}.chat-msg-container.visitor{align-items:flex-end}.chat-msg-container.visitor .xappw-chat-msg-part__avatar{right:0;display:none}.chat-msg-container.agent{align-items:stretch}.chat-msg-container.agent .xappw-chat-msg-part__avatar{width:40px;height:40px;left:0}.chat-text-container p{margin:0 0 8px 0;padding:0}.cta-bubble{position:relative;border-radius:50%;background:var(--xapp-cta-background, #e1e2e1);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;text-align:center;max-width:192px}.cta-bubble__tail{position:absolute;left:-16px;right:-16px;top:-16px;bottom:-16px;z-index:1;color:var(--xapp-cta-background, #e1e2e1)}.cta-bubble__tail svg{width:100%;height:100%;margin:0;padding:0}.cta-bubble__content{font-family:var(--xapp-cta-font-family, 14px);font-size:var(--xapp-cta-font-size, 14px);color:var(--xapp-cta-text-color, var(--xapp-primary-color, #616161));z-index:2}.chat-text-bubble{border-radius:10px;padding:10px;position:relative;overflow:visible}.chat-text-bubble--mine{font-family:var(--xapp-messages-mine-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-messages-mine-font-weight, normal);font-size:var(--xapp-messages-mine-font-size, 14px);font-style:var(--xapp-messages-mine-font-style, normal);color:var(--xapp-messages-mine-text-color, #ffffff);background:var(--xapp-messages-mine-bubble-color, #20df20);border-bottom-right-radius:0}.chat-text-bubble--mine .chat-text-bubble__tail{right:-8px;color:var(--xapp-messages-mine-bubble-color, #20df20)}.chat-text-bubble--others{font-family:var(--xapp-messages-others-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-messages-others-font-weight, normal);font-size:var(--xapp-messages-others-font-size, 14px);font-style:var(--xapp-messages-others-font-style, normal);color:var(--xapp-messages-others-text-color, #262726);background:var(--xapp-messages-others-bubble-color, #e1e2e1);border-bottom-left-radius:0}.chat-text-bubble--others .chat-text-bubble__tail{left:-8px;color:var(--xapp-messages-others-bubble-color, #e1e2e1)}.chat-text-bubble span{white-space:pre-wrap}.chat-typing-progress .chat-text-bubble{padding:8px 10px;margin-top:4px}.chat-text-bubble__tail{position:absolute;width:8px;height:24px;bottom:0}.xappw-vlist{display:flex;flex-flow:column nowrap}.xappw-vlist__header{padding:16px 8px;font-family:"RobotoRegular","serif";font-weight:bold;font-size:16px}.xappw-vlist-container{display:flex;flex-flow:column nowrap;flex:0 0 auto;justify-content:flex-start;max-width:100%;position:relative;white-space:nowrap;border:solid 1px #ccc;border-radius:12px;overflow:hidden}.xappw-vlist-container .xappw-vlist-container__item{display:inline-block;border-top:solid 1px #ccc}.xappw-vlist-container .xappw-vlist-container__item:first-child{border-top:none}.xappw-vlist-item{display:flex;flex-direction:row;flex:0 0 auto;min-width:100%;min-height:56px;padding:8px;box-sizing:border-box;cursor:pointer}.xappw-vlist-item--normal{align-items:flex-start}.xappw-vlist-item--titles{align-items:center}.xappw-vlist-item:hover{background-color:#eee}.xappw-vlist-item__description{display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden}.xappw-vlist-item__side{flex:0 0 auto;display:flex;flex-direction:column}.xappw-vlist-item__img{border-radius:12px;width:40px;height:40px;overflow:hidden}.xappw-vlist-item__external-link{width:20px;margin:0 4px 4px auto;display:inline-block}.xappw-vlist-item__title{text-align:left;font-family:var(--xapp-carousel-title-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-title-font-weight, bold);font-size:var(--xapp-carousel-title-font-size, 14px);font-style:var(--xapp-carousel-title-font-style, normal);color:var(--xapp-carousel-title-text-color, #000);line-height:1.3}.xappw-vlist-item__title span{display:inline-block;white-space:pre-wrap}.xappw-vlist-item__link{font-family:var(--xapp-carousel-link-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-link-font-weight, normal);font-size:var(--xapp-carousel-link-font-size, 12px);font-style:var(--xapp-carousel-link-font-style, normal);color:var(--xapp-carousel-link-text-color, #666);line-height:1.3;overflow:hidden;text-overflow:ellipsis;max-width:100%}.xappw-vlist-item__subtitle{text-align:left;font-family:var(--xapp-carousel-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-subtitle-font-weight, normal);font-size:var(--xapp-carousel-subtitle-font-size, 12px);font-style:var(--xapp-carousel-subtitle-font-style, normal);color:var(--xapp-carousel-subtitle-text-color, #979797);line-height:1.3}.xappw-vlist-item__subtitle span{display:inline-block;white-space:pre-wrap}.xappw-vlist-item .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-carousel-action-button-color, var(--xapp-primary-color, #616161));color:#d5d9e7;cursor:pointer}.message-list-container{flex-grow:1;flex-shrink:1;overflow-y:scroll;display:flex;flex-direction:column;background:var(--xapp-content-background, #fff)}.message-list-container__msgs{padding-top:var(--xapp-messages-padding-top, 16px);padding-right:var(--xapp-messages-padding-right, 16px);padding-bottom:var(--xapp-messages-padding-bottom, 0);padding-left:var(--xapp-messages-padding-left, 20px)}.message-list-container__chips{flex:0 0 auto;border-top:solid 1px #ccc;margin-top:auto}.message-list-container__chips--empty{flex-basis:0;border:none;overflow:hidden}.chat-list-item{display:flex;flex-direction:column;align-items:flex-start;min-width:220px;min-height:120px;flex:1 1 auto;border:solid 1px #ccc;border-radius:12px}.chat-list-item-container{display:flex;flex-direction:column;flex:1 1 auto}.chat-list-item__img{border-radius:12px 12px 0 0;width:100%;height:120px;overflow:hidden}.chat-list-item__title{text-align:left;font-family:var(--xapp-carousel-title-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-title-font-weight, bold);font-size:var(--xapp-carousel-title-font-size, 14px);font-style:var(--xapp-carousel-title-font-style, normal);color:var(--xapp-carousel-title-text-color, #000);line-height:1.3;padding:2px}.chat-list-item__title span{display:inline-block;white-space:pre-wrap}.chat-list-item__subtitle{text-align:left;font-family:var(--xapp-carousel-subtitle-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-carousel-subtitle-font-weight, normal);font-size:var(--xapp-carousel-subtitle-font-size, 12px);font-style:var(--xapp-carousel-subtitle-font-style, normal);color:var(--xapp-carousel-subtitle-text-color, #979797);line-height:1.3;max-width:200px;padding:2px}.chat-list-item__subtitle span{display:inline-block;white-space:pre-wrap}.chat-list-item__actions{margin-top:auto}.chat-list-item .action-button{display:inline-block;padding:0 10px;margin:3px;height:25px;font-size:12px;line-height:25px;border-radius:25px;background-color:var(--xapp-carousel-action-button-color, var(--xapp-primary-color, #616161));color:#d5d9e7;cursor:pointer}.xappw-chat-msg-part{display:inline-block;position:relative;word-wrap:break-word}.xappw-chat-msg-part+.xappw-chat-msg-part{margin-top:4px}.xappw-chat-msg-part+.xappw-chat-msg-part .chat-card-img{border-radius:12px 12px 12px 0}.xappw-chat-msg-part__avatar{position:absolute;bottom:0;z-index:10}.xappw-chat-msg-part ul{list-style-position:inside;padding:0;margin:0 0 8px 0}.xappw-chat-msg-part li{padding:0;margin:0}.chat-menu-item{border:1px solid #ddd;border-radius:0;opacity:1;outline:none;background:var(--xapp-menu-item-background, #efefef);font-family:var(--xapp-menu-item-font-family, 14px);font-weight:var(--xapp-menu-item-font-weight, normal);font-size:var(--xapp-menu-item-font-size, 14px);font-style:var(--xapp-menu-item-font-style, normal);color:var(--xapp-menu-item-text-color, var(--xapp-primary-color, #616161));height:var(--xapp-menu-item-height, 24px);box-sizing:border-box;padding:4px 4px 4px 30px;text-align:left}.chat-menu-item:hover{opacity:.8;cursor:pointer}.xappw-chat-action-item{text-decoration:none}.xappw-chat-action-item--action{cursor:pointer}.chat-footer{position:relative;background-color:var(--xapp-footer-background, var(--xapp-primary-color, #616161))}.chat-footer__menu-icon{border-top:solid var(--xapp-footer-border-width, 0px) var(--xapp-footer-border-color, var(--xapp-primary-color, #616161));z-index:999;padding:6px 0;flex-shrink:0}.chat-footer__menu-icon+.chat-footer__input{margin-top:-6px}.chat-footer__input{margin-top:6px;margin-bottom:6px}.xappw-chat-footer__suggestions{position:absolute;bottom:100%;left:0;right:0;overflow:hidden;z-index:100}.server-offline{position:absolute;top:0;right:0;left:0;bottom:0;z-index:5000;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.status-container{display:flex;flex-flow:row nowrap;justify-content:space-between;padding-left:10px;z-index:999;line-height:40px;height:40px;flex-shrink:0;color:#fff;position:relative;width:100%;background-color:var(--xapp-header-background, var(--xapp-primary-color, #616161));border-bottom:solid var(--xapp-header-border-width, 0px) var(--xapp-header-border-color, var(--xapp-primary-color, #616161));align-items:center}.status-container__avatar{width:30px;height:30px}.status-container__avatar .avatar:not(.avatar--empty){background-color:#a4a7b6}.status-text{display:inline-block;position:absolute;left:48px;font-family:var(--xapp-header-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-header-font-weight, normal);font-size:var(--xapp-header-font-size, 16px);font-style:var(--xapp-header-font-style, normal);color:var(--xapp-header-text-color, rgba(255, 255, 255, 0.87))}.chat-card-img{display:block;width:100%;height:100%}.chat-card-img__content{background-position:center;background-size:cover;width:100%;height:100%}.xappw-suggestions{display:flex;flex-direction:column;font-family:RobotoRegular,serif}.xappw-suggestions__answer{background-color:#d9d9d9;padding:8px 11px;border-radius:12px}.xappw-suggestions__groups{background-color:#f3f3f3;padding:8px 0}.xappw-suggestions__use{width:28px;padding:4px;color:inherit}.xappw-multiselect{list-style:none;padding:0;margin:0}.xappw-multiselect li{padding:0;margin:0}.xapp-search-rich-text{display:inline-block;max-width:100%;overflow:hidden;white-space:pre-wrap}.xapp-search-icon-button{border:none;background:none;cursor:pointer;padding:0;display:flex;align-items:center}.xapp-search-icon-button__content{display:flex;width:100%}.xappw-rich-input__input{display:block;width:100%;border:none;outline:none;box-sizing:border-box;margin:0;font-size:inherit;line-height:inherit;color:inherit}.xappw-message-bubble{border-radius:10px;padding:10px;background:var(--xapp-bubble-background, green)}.xappw-suggestions-group__items{display:flex;flex-direction:column;padding:2px 0}.xappw-suggestions-group__heading{margin:0 16px}.xappw-suggestions-list{display:flex;flex-direction:column}.xappw-suggestions-item{padding:0 0 0 24px;box-sizing:border-box;width:100%;white-space:nowrap;display:flex;align-items:center;overflow:hidden;font-size:15px;cursor:pointer;border-bottom:solid 1px transparent;color:#061739}.xappw-suggestions-item--current,.xappw-suggestions-item:hover{background-color:#3395d2;color:#fff;text-decoration:underline}@media(hover: hover){.xappw-suggestions-item--current .xappw-suggestions-item__actions,.xappw-suggestions-item:hover .xappw-suggestions-item__actions{visibility:visible;color:#fff}}.xappw-suggestions-item__texts{padding:3px 0;flex:1 1 auto;overflow:hidden}.xappw-suggestions-item__actions{flex:0 0 auto;display:flex;margin-left:8px}@media(hover: hover){.xappw-suggestions-item__actions{visibility:hidden}}.xappw-suggestions-group-heading{display:flex;align-items:center;font-size:12px;padding:2px 0;color:#061739}.xappw-suggestions-group-heading:after{content:"";border-top:solid 1px #d4d4d4;flex:1 1 auto;margin-left:8px}.xapp-search-rich-text-span{flex:0 1 auto;display:inline-block;max-width:100%}.xapp-search-rich-text-span:last-child{overflow:hidden;white-space:pre;text-overflow:ellipsis}.xapp-search-rich-text-input-span{text-decoration:none;font-size:inherit;height:calc(1.5em - 2px);line-height:1em;width:8em;color:inherit}.xapp-search-rich-text-input-span--readonly{border:dashed 1px green;color:green;height:calc(1em - 2px)}.xapp-search-rich-text-bold-span{font-weight:bold}.xapp-search-rich-text-normal-span{font-weight:normal}.message-form .section{margin-bottom:16px}.message-form .label{display:block;margin-bottom:4px;color:var(--xapp-primary-color, #616161)}.message-form input,.message-form textarea{border:1px solid #ddd;border-radius:4px;outline-width:0;width:100%;font-size:14px;box-sizing:border-box}.message-form input{height:32px;padding:0 10px}.message-form textarea{padding:8px 10px;min-height:100px;resize:none;overflow-y:auto}.message-form__submit{width:100%;background-color:var(--xapp-primary-color, #616161);color:#fff}.message-form--shrink-enter{opacity:.01;position:relative;top:100px}.message-form--shrink-enter-active{position:relative;top:0;opacity:1;transition:opacity 500ms,top 500ms;transition-delay:500ms}.message-form--shrink-exit{opacity:.5;position:relative;top:0}.message-form--shrink-exit-active{top:-200px;opacity:.01;transition:top 500ms,opacity 500ms}.message-form--grow-enter{opacity:.5;position:relative;top:-200px}.message-form--grow-enter-active{position:relative;top:0;opacity:1;transition:opacity 500ms,top 500ms}.message-form--grow-exit{opacity:.5;position:relative;top:0;height:50px}.message-form--grow-exit-active{top:-100px;height:0;opacity:.01;transition:top 500ms,opacity 500ms,height 500ms}.message-form--sent .button-resend{width:100%;margin-top:16px;background-color:var(--xapp-primary-color, #616161);color:#fff}.drawer-bars{display:flex;flex-direction:column;align-items:center;padding:6px 0;cursor:pointer}.drawer-bar{flex:0 0 5px;border-radius:5px;background:var(--xapp-menu-button-color, #fff);width:25px;margin:2.5px}.drawer-bar:first-child{margin-top:0}.drawer-bar:last-child{margin-bottom:0}.xappw-input-container{flex-shrink:0;z-index:999;padding:6px 20px}.xappw-input-container:not(.visible){display:none}.xappw-input-container.drag-drop-zone{outline:3px dashed gray;outline-offset:-3px}.xappw-input-form{display:flex;align-items:center;overflow:hidden;line-height:48px;position:relative;border-radius:var(--xapp-input-border-radius, 20px);background:var(--xapp-input-background, #fff)}.xappw-input-form__buttons{display:flex;position:absolute;right:10px;z-index:2;height:16px}.xappw-input-form__btn{width:20px}.xappw-input{min-height:32px;padding:7px 10px;line-height:normal;display:inline-block;box-sizing:border-box;font-family:var(--xapp-input-font-family, "RobotoRegular", "serif");font-weight:var(--xapp-input-font-weight, normal);font-size:var(--xapp-input-font-size, 14px);font-style:var(--xapp-input-font-style, normal);color:var(--xapp-input-text-color, #000);outline-width:0;flex-grow:1;border:var(--xapp-input-border-width, #fff) solid var(--xapp-input-border-color, #fff);background:transparent}.xappw-input:focus::placeholder{color:transparent}.xappw-input::placeholder{color:#7d7d7d}.xappw-input{z-index:1}.minimize-button{position:absolute;width:48px;top:0;right:48px;height:100%;display:flex;justify-content:center;cursor:pointer;font-size:20px;color:var(--xapp-minimize-button-color, #a3a6b4)}.minimize-button:after{content:"─"}.minimize-button.positionRight{right:0}.cancel-button{position:absolute;width:48px;top:0;right:0;height:100%;display:flex;justify-content:center;cursor:pointer;font-size:20px;color:var(--xapp-cancel-button-color, #a3a6b4)}.cancel-button:after{content:"⨉"}.card-container{padding-top:16px;position:relative}.card-container__content{color:#555;border-radius:8px;border:1px solid #ddd;padding:24px 16px 16px 16px;font-size:14px}.card-container__title{text-align:center;color:var(--xapp-primary-color, #616161);margin-bottom:8px}.card-container__icon{width:32px;height:32px;position:relative;background-color:#fff;border:1px solid #e0e0e0;border-radius:50%;box-shadow:0 2px 4px 0 rgba(0,0,0,.1);margin:-16px auto;z-index:999}@keyframes typing-animation{0%{transform:translateY(0px)}28%{transform:translateY(-5px)}44%{transform:translateY(0px)}}.typing-indicator{height:20px;display:inline-flex;align-items:center}.typing-indicator-part:nth-child(1){animation-delay:200ms}.typing-indicator-part:nth-child(2){animation-delay:300ms}.typing-indicator-part:nth-child(3){animation-delay:400ms}.typing-indicator-part{display:inline-block;animation:typing-animation 1.5s infinite ease-in-out;border-radius:50%;width:7px;height:7px;margin:0 3px;background-color:#7a7a7a}.xappw-send-button{color:var(--xapp-send-button-color, #505050)}
|
package/dist/index.es.js
CHANGED
|
@@ -1890,6 +1890,9 @@ function throwBadKind$1(x) {
|
|
|
1890
1890
|
|
|
1891
1891
|
function execute(url, behavior) {
|
|
1892
1892
|
var type = behavior.type;
|
|
1893
|
+
if (get("opened")) {
|
|
1894
|
+
set("opened", false);
|
|
1895
|
+
}
|
|
1893
1896
|
switch (type) {
|
|
1894
1897
|
case "newWindow":
|
|
1895
1898
|
window.open(url, "callout-option", "toolbar=0,status=0,width=".concat(behavior.width || 1000, ",height=").concat(behavior.height || 700));
|
|
@@ -1898,6 +1901,10 @@ function execute(url, behavior) {
|
|
|
1898
1901
|
window.open(url, "_blank");
|
|
1899
1902
|
break;
|
|
1900
1903
|
case "sameWindow":
|
|
1904
|
+
// For reopen widget after move on same window
|
|
1905
|
+
if (get("visible")) {
|
|
1906
|
+
set("opened", true);
|
|
1907
|
+
}
|
|
1901
1908
|
window.open(url, "_self");
|
|
1902
1909
|
break;
|
|
1903
1910
|
default:
|
|
@@ -1926,7 +1933,8 @@ function writeMessage(msg, user) {
|
|
|
1926
1933
|
|
|
1927
1934
|
function executeAction(text, token) {
|
|
1928
1935
|
return function (chatServer) { return function (dispatch, getState) {
|
|
1929
|
-
|
|
1936
|
+
var attributes = getState().attributes;
|
|
1937
|
+
chatServer.sendChatMsg({ text: text, token: token, attributes: attributes }, function (err) {
|
|
1930
1938
|
if (err) {
|
|
1931
1939
|
log("Error sending message", err);
|
|
1932
1940
|
return;
|
|
@@ -2062,6 +2070,12 @@ function setConnectionStatus(status) {
|
|
|
2062
2070
|
};
|
|
2063
2071
|
}
|
|
2064
2072
|
|
|
2073
|
+
function reset() {
|
|
2074
|
+
return {
|
|
2075
|
+
type: "reset"
|
|
2076
|
+
};
|
|
2077
|
+
}
|
|
2078
|
+
|
|
2065
2079
|
function useChatDispatch() {
|
|
2066
2080
|
return useDispatch();
|
|
2067
2081
|
}
|
|
@@ -2963,6 +2977,7 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
2963
2977
|
this._userId = "";
|
|
2964
2978
|
this._sessionId = "";
|
|
2965
2979
|
this._accessToken = "";
|
|
2980
|
+
this._attributes = {};
|
|
2966
2981
|
this.config = config;
|
|
2967
2982
|
this.options = options;
|
|
2968
2983
|
this.isNewSession = false;
|
|
@@ -3109,8 +3124,10 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
3109
3124
|
};
|
|
3110
3125
|
StentorDirectChat.prototype.setVisitorInfo = function (visitorInfo, cb) {
|
|
3111
3126
|
this.visitorInfo = visitorInfo;
|
|
3127
|
+
this._attributes = this.visitorInfo.attributes;
|
|
3112
3128
|
this._accessToken = this.visitorInfo.accessToken;
|
|
3113
3129
|
this.startSession();
|
|
3130
|
+
// This is for the bot
|
|
3114
3131
|
this.userJoined({
|
|
3115
3132
|
user: this.getBot(undefined),
|
|
3116
3133
|
token: ""
|
|
@@ -3131,23 +3148,27 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
3131
3148
|
StentorDirectChat.prototype.postMessage = function (message) {
|
|
3132
3149
|
var _a, _b, _c, _d;
|
|
3133
3150
|
return __awaiter$1(this, void 0, void 0, function () {
|
|
3134
|
-
var request, accessToken, now, permissionRequest, expired, text, granted, userProfile, isEmail, botResponse, responseMessage;
|
|
3151
|
+
var request, userId, sessionId, accessToken, attributes, now, permissionRequest, expired, text, granted, userProfile, isEmail, botResponse, responseMessage;
|
|
3135
3152
|
return __generator$1(this, function (_e) {
|
|
3136
3153
|
switch (_e.label) {
|
|
3137
3154
|
case 0:
|
|
3155
|
+
userId = this._userId;
|
|
3156
|
+
sessionId = this._sessionId;
|
|
3138
3157
|
accessToken = this._accessToken;
|
|
3158
|
+
attributes = this._attributes || {};
|
|
3139
3159
|
now = new Date().getTime();
|
|
3140
3160
|
if (this.isNewSession && !((_a = message === null || message === void 0 ? void 0 : message.msg) === null || _a === void 0 ? void 0 : _a.text)) {
|
|
3141
3161
|
request = {
|
|
3142
3162
|
type: "LAUNCH_REQUEST",
|
|
3143
3163
|
rawQuery: (_b = message === null || message === void 0 ? void 0 : message.msg) === null || _b === void 0 ? void 0 : _b.text,
|
|
3144
|
-
sessionId:
|
|
3145
|
-
userId:
|
|
3164
|
+
sessionId: sessionId,
|
|
3165
|
+
userId: userId,
|
|
3146
3166
|
isNewSession: true,
|
|
3147
3167
|
intentId: "LaunchRequest",
|
|
3148
3168
|
platform: "stentor-platform",
|
|
3149
3169
|
channel: "widget",
|
|
3150
|
-
accessToken: accessToken
|
|
3170
|
+
accessToken: accessToken,
|
|
3171
|
+
attributes: attributes
|
|
3151
3172
|
};
|
|
3152
3173
|
}
|
|
3153
3174
|
else {
|
|
@@ -3157,7 +3178,7 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
3157
3178
|
expired = now - permissionRequest.time > PERMISSION_QUESTION_EXPIRATION_MS;
|
|
3158
3179
|
text = (_d = message.msg.text) === null || _d === void 0 ? void 0 : _d.toLowerCase();
|
|
3159
3180
|
granted = !expired;
|
|
3160
|
-
userProfile = {};
|
|
3181
|
+
userProfile = { id: this._userId };
|
|
3161
3182
|
if (!expired) {
|
|
3162
3183
|
if (permissionRequest.type === "EMAIL") {
|
|
3163
3184
|
isEmail = looksLikeEmail(text);
|
|
@@ -3187,7 +3208,8 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
3187
3208
|
intentId: "PermissionGrant",
|
|
3188
3209
|
platform: "stentor-platform",
|
|
3189
3210
|
channel: "widget",
|
|
3190
|
-
accessToken: accessToken
|
|
3211
|
+
accessToken: accessToken,
|
|
3212
|
+
attributes: attributes
|
|
3191
3213
|
};
|
|
3192
3214
|
}
|
|
3193
3215
|
else if (message.type === "custom") {
|
|
@@ -3195,7 +3217,7 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
3195
3217
|
// token: message.msg.token,
|
|
3196
3218
|
sessionId: this._sessionId, userId: this._userId, isNewSession: false,
|
|
3197
3219
|
// intentId: "OptionSelect",
|
|
3198
|
-
platform: "stentor-platform", channel: "widget", accessToken: accessToken });
|
|
3220
|
+
platform: "stentor-platform", channel: "widget", accessToken: accessToken, attributes: attributes });
|
|
3199
3221
|
}
|
|
3200
3222
|
else if (message.msg.token) {
|
|
3201
3223
|
request = {
|
|
@@ -3207,7 +3229,8 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
3207
3229
|
intentId: "OptionSelect",
|
|
3208
3230
|
platform: "stentor-platform",
|
|
3209
3231
|
channel: "widget",
|
|
3210
|
-
accessToken: accessToken
|
|
3232
|
+
accessToken: accessToken,
|
|
3233
|
+
attributes: attributes
|
|
3211
3234
|
};
|
|
3212
3235
|
}
|
|
3213
3236
|
else {
|
|
@@ -3220,7 +3243,8 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
3220
3243
|
intentId: "NLU_RESULT_PLACEHOLDER",
|
|
3221
3244
|
platform: "stentor-platform",
|
|
3222
3245
|
channel: "widget",
|
|
3223
|
-
accessToken: accessToken
|
|
3246
|
+
accessToken: accessToken,
|
|
3247
|
+
attributes: attributes
|
|
3224
3248
|
};
|
|
3225
3249
|
}
|
|
3226
3250
|
}
|
|
@@ -3261,7 +3285,7 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
3261
3285
|
};
|
|
3262
3286
|
StentorDirectChat.prototype.startSession = function () {
|
|
3263
3287
|
if (this.visitorInfo.visitorId) {
|
|
3264
|
-
this._userId = "
|
|
3288
|
+
this._userId = "".concat(this.visitorInfo.visitorId);
|
|
3265
3289
|
}
|
|
3266
3290
|
else if (this.visitorInfo.email) {
|
|
3267
3291
|
this._userId = "stentor-widget-user-".concat(this.visitorInfo.email);
|
|
@@ -3270,6 +3294,7 @@ var StentorDirectChat = /** @class */ (function () {
|
|
|
3270
3294
|
this._userId = "stentor-widget-user-".concat(uuid_1());
|
|
3271
3295
|
}
|
|
3272
3296
|
this._sessionId = "stentor-widget-session-".concat(uuid_1());
|
|
3297
|
+
// This is a flag that is cleared after the first message is sent
|
|
3273
3298
|
this.isNewSession = true;
|
|
3274
3299
|
};
|
|
3275
3300
|
Object.defineProperty(StentorDirectChat.prototype, "userId", {
|
|
@@ -7463,11 +7488,12 @@ function useExternalScript(url) {
|
|
|
7463
7488
|
return;
|
|
7464
7489
|
}
|
|
7465
7490
|
var id = getSrcId(url);
|
|
7466
|
-
var
|
|
7467
|
-
if (!
|
|
7491
|
+
var existing = document.getElementById(id);
|
|
7492
|
+
if (!existing) {
|
|
7468
7493
|
var script = document.createElement("script");
|
|
7469
7494
|
script.id = id;
|
|
7470
7495
|
script.src = url;
|
|
7496
|
+
script.crossOrigin = 'anonymous';
|
|
7471
7497
|
document.head.appendChild(script);
|
|
7472
7498
|
}
|
|
7473
7499
|
}, [url]);
|
|
@@ -7498,11 +7524,14 @@ function useChatServerVisitorId() {
|
|
|
7498
7524
|
return state.visitorId || state.userId;
|
|
7499
7525
|
});
|
|
7500
7526
|
var visitorAccessToken = useSelector(function (state) { return state.accessToken; });
|
|
7527
|
+
var attributes = useSelector(function (state) { return state.attributes; });
|
|
7501
7528
|
return useMemo(function () { return ({
|
|
7502
7529
|
dispatch: dispatch,
|
|
7503
7530
|
visitorId: clientVisitorId,
|
|
7504
|
-
accessToken: visitorAccessToken
|
|
7505
|
-
|
|
7531
|
+
accessToken: visitorAccessToken,
|
|
7532
|
+
userId: clientVisitorId,
|
|
7533
|
+
attributes: attributes
|
|
7534
|
+
}); }, [dispatch, clientVisitorId, visitorAccessToken, attributes]);
|
|
7506
7535
|
}
|
|
7507
7536
|
//send whenever server settings or visitor id changes
|
|
7508
7537
|
function useGreeting(active) {
|
|
@@ -7516,7 +7545,9 @@ function useGreeting(active) {
|
|
|
7516
7545
|
curr.dispatch(sendVisitorInfo({
|
|
7517
7546
|
name: "Visitor",
|
|
7518
7547
|
visitorId: curr.visitorId,
|
|
7519
|
-
|
|
7548
|
+
userId: curr.userId,
|
|
7549
|
+
accessToken: curr.accessToken,
|
|
7550
|
+
attributes: curr.attributes
|
|
7520
7551
|
}));
|
|
7521
7552
|
var timeoutId_1 = setTimeout(function () {
|
|
7522
7553
|
var greetingAction = sendGreeting();
|
|
@@ -8050,7 +8081,7 @@ var MessageList = function (props) {
|
|
|
8050
8081
|
var messagesEndRef = useRef(null);
|
|
8051
8082
|
useEffect(function () {
|
|
8052
8083
|
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
|
|
8053
|
-
}, [props.messages]);
|
|
8084
|
+
}, [props.messages, props.agents]);
|
|
8054
8085
|
var handleSend = useCallback(function (msg) {
|
|
8055
8086
|
onSend(msg);
|
|
8056
8087
|
messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
|
|
@@ -8127,8 +8158,12 @@ var ServerOffline = function () {
|
|
|
8127
8158
|
React$1.createElement("h3", null, "Server is offline"));
|
|
8128
8159
|
};
|
|
8129
8160
|
|
|
8161
|
+
var CancelButton = function (props) {
|
|
8162
|
+
return React$1.createElement("div", { className: "cancel-button", onClick: props.onClick });
|
|
8163
|
+
};
|
|
8164
|
+
|
|
8130
8165
|
var MinimizeButton = function (props) {
|
|
8131
|
-
return React$1.createElement("div", { className: "minimize-button", onClick: props.onClick });
|
|
8166
|
+
return (React$1.createElement("div", { className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
|
|
8132
8167
|
};
|
|
8133
8168
|
|
|
8134
8169
|
var DEFAULT_STATUS_CONFIG = {
|
|
@@ -8154,12 +8189,14 @@ var StatusContainer = function (props) {
|
|
|
8154
8189
|
React$1.createElement("div", { className: "status-text" },
|
|
8155
8190
|
React$1.createElement("span", null, getStatusText(props.accountStatus, (_a = props.config) === null || _a === void 0 ? void 0 : _a.status))),
|
|
8156
8191
|
props.canMinimize &&
|
|
8157
|
-
React$1.createElement(MinimizeButton, { onClick: props.minimizeOnClick })
|
|
8192
|
+
React$1.createElement(MinimizeButton, { onClick: props.minimizeOnClick, showInRight: !props.canCancel }),
|
|
8193
|
+
props.canCancel &&
|
|
8194
|
+
React$1.createElement(CancelButton, { onClick: props.cancelOnClick })));
|
|
8158
8195
|
};
|
|
8159
8196
|
|
|
8160
8197
|
function buildStyleContent(theme) {
|
|
8161
8198
|
var _a, _b, _c, _d;
|
|
8162
|
-
return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _b === void 0 ? void 0 : _b.title)), withPrefix("subtitle-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.subtitle)), withPrefix("action-", getButtonStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta))))), "\n}");
|
|
8199
|
+
return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("cancel-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.cancelButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _b === void 0 ? void 0 : _b.title)), withPrefix("subtitle-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.subtitle)), withPrefix("action-", getButtonStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta))))), "\n}");
|
|
8163
8200
|
}
|
|
8164
8201
|
function WidgetStylesheet(props) {
|
|
8165
8202
|
var theme = props.theme;
|
|
@@ -8432,7 +8469,7 @@ var ChatWidgetWrapper = function (props) {
|
|
|
8432
8469
|
React$1.createElement(ChatWidget, __assign({}, props)))));
|
|
8433
8470
|
};
|
|
8434
8471
|
var ChatWidget = function (props) {
|
|
8435
|
-
var _a, _b, _c, _d, _e, _f;
|
|
8472
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
8436
8473
|
var innerDispatch = useChatDispatch();
|
|
8437
8474
|
var dispatch = useChatServerDispatch();
|
|
8438
8475
|
// From Redux
|
|
@@ -8441,18 +8478,32 @@ var ChatWidget = function (props) {
|
|
|
8441
8478
|
var dockedMode = mode === "docked";
|
|
8442
8479
|
var staticMode = mode === "static";
|
|
8443
8480
|
var modeClass = "widget-container--".concat(mode);
|
|
8444
|
-
var canMinimize = !dockedMode && !staticMode;
|
|
8481
|
+
var canMinimize = !dockedMode && !staticMode && ((_c = (_b = props.config.header) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.minimize);
|
|
8482
|
+
var canCancel;
|
|
8483
|
+
// To preserve legacy behavior, cancel needs a little more checks
|
|
8484
|
+
if (typeof ((_e = (_d = props.config.header) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.cancel) === "boolean") {
|
|
8485
|
+
canCancel = !dockedMode && !staticMode && ((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.cancel);
|
|
8486
|
+
}
|
|
8487
|
+
else {
|
|
8488
|
+
canCancel = !dockedMode && !staticMode;
|
|
8489
|
+
}
|
|
8445
8490
|
// Our state - pull from storage
|
|
8446
|
-
var
|
|
8447
|
-
var
|
|
8491
|
+
var _o = useState(!canMinimize || !!get("visible)") || (((_h = props.config) === null || _h === void 0 ? void 0 : _h.autoOpenOnWidth) && window.matchMedia("(min-width: ".concat((_j = props.config) === null || _j === void 0 ? void 0 : _j.autoOpenOnWidth, ")")).matches)), visible = _o[0], setVisibleState = _o[1];
|
|
8492
|
+
var _p = useState(false), typing = _p[0], setTypingState = _p[1]; // false initially
|
|
8448
8493
|
var chatServer = useContext(ChatServerContext);
|
|
8449
|
-
|
|
8494
|
+
var setVisible = useCallback(function (newVisible) {
|
|
8450
8495
|
if (staticMode) {
|
|
8451
8496
|
return;
|
|
8452
8497
|
}
|
|
8453
8498
|
setVisibleState(newVisible);
|
|
8454
8499
|
set("visible", newVisible);
|
|
8455
|
-
}
|
|
8500
|
+
}, [staticMode]);
|
|
8501
|
+
useEffect(function () {
|
|
8502
|
+
// For reopen widget after move on same window
|
|
8503
|
+
if (get("opened")) {
|
|
8504
|
+
setVisible(true);
|
|
8505
|
+
}
|
|
8506
|
+
}, [setVisible]);
|
|
8456
8507
|
function handleOnChange() {
|
|
8457
8508
|
if (!typing) {
|
|
8458
8509
|
dispatch(sendTyping(true));
|
|
@@ -8501,6 +8552,10 @@ var ChatWidget = function (props) {
|
|
|
8501
8552
|
function minimizeOnClick() {
|
|
8502
8553
|
setVisible(false);
|
|
8503
8554
|
}
|
|
8555
|
+
function cancelOnClick() {
|
|
8556
|
+
innerDispatch(reset());
|
|
8557
|
+
setVisible(false);
|
|
8558
|
+
}
|
|
8504
8559
|
function chatButtonOnClick() {
|
|
8505
8560
|
setVisible(true);
|
|
8506
8561
|
}
|
|
@@ -8544,17 +8599,17 @@ var ChatWidget = function (props) {
|
|
|
8544
8599
|
onConnectionStatusChange(connectionStatus);
|
|
8545
8600
|
}
|
|
8546
8601
|
}, [connectionStatus, onConnectionStatusChange]);
|
|
8547
|
-
useExternalScript((
|
|
8602
|
+
useExternalScript((_k = props.config) === null || _k === void 0 ? void 0 : _k.middlewareUrl);
|
|
8548
8603
|
return (React$1.createElement(React$1.Fragment, null,
|
|
8549
8604
|
React$1.createElement("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()) },
|
|
8550
8605
|
React$1.createElement(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }),
|
|
8551
|
-
React$1.createElement(StatusContainer, { accountStatus: chatState.accountStatus, minimizeOnClick: minimizeOnClick, agent: (
|
|
8606
|
+
React$1.createElement(StatusContainer, { accountStatus: chatState.accountStatus, minimizeOnClick: minimizeOnClick, cancelOnClick: cancelOnClick, agent: (_l = chatState.agents["agent:robot"]) === null || _l === void 0 ? void 0 : _l.user, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header }),
|
|
8552
8607
|
React$1.createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, messageMiddleware: props.messageMiddleware, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl }),
|
|
8553
8608
|
React$1.createElement("div", { className: "spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
|
|
8554
8609
|
React$1.createElement("div", { className: "spinner" })),
|
|
8555
8610
|
connectionStatus === "offline" && React$1.createElement(ServerOffline, null),
|
|
8556
8611
|
React$1.createElement(ChatFooter, { isChatting: chatState.isChatting, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload })),
|
|
8557
|
-
React$1.createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (
|
|
8612
|
+
React$1.createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_m = props.config) === null || _m === void 0 ? void 0 : _m.cta, visible: visible })));
|
|
8558
8613
|
};
|
|
8559
8614
|
|
|
8560
8615
|
function tryParseJson(str) {
|
|
@@ -8789,7 +8844,7 @@ function createChatStore(config, dataStorage) {
|
|
|
8789
8844
|
if (dataStorage === void 0) { dataStorage = sessionStorage; }
|
|
8790
8845
|
var connection = config.connection;
|
|
8791
8846
|
var storage = new BrowserStateStorage(dataStorage, "xappchat.".concat(connection.serverUrl, ".").concat(connection.accountKey));
|
|
8792
|
-
var defaultState = createDefaultState({ accessToken: config.accessToken, userId: config.userId });
|
|
8847
|
+
var defaultState = createDefaultState({ accessToken: config.accessToken, userId: config.userId, attributes: config.attributes });
|
|
8793
8848
|
var chatReducer = persistStateReducer(storage, defaultState, storeHandler);
|
|
8794
8849
|
var middlewares = [
|
|
8795
8850
|
thunk
|
|
@@ -8799,18 +8854,19 @@ function createChatStore(config, dataStorage) {
|
|
|
8799
8854
|
}
|
|
8800
8855
|
|
|
8801
8856
|
var ChatWidgetContainer = function (props) {
|
|
8802
|
-
var _a, _b, _c;
|
|
8857
|
+
var _a, _b, _c, _d;
|
|
8803
8858
|
var messageMiddleware = useStandardMiddleware();
|
|
8804
8859
|
var connection = useServerConfig(props.config);
|
|
8805
8860
|
var chatStore = useMemo(function () {
|
|
8806
|
-
var _a, _b;
|
|
8861
|
+
var _a, _b, _c;
|
|
8807
8862
|
return createChatStore({
|
|
8808
8863
|
connection: connection,
|
|
8809
8864
|
userId: (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId,
|
|
8810
|
-
accessToken: (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken
|
|
8865
|
+
accessToken: (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken,
|
|
8866
|
+
attributes: (_c = props.config) === null || _c === void 0 ? void 0 : _c.attributes,
|
|
8811
8867
|
});
|
|
8812
|
-
}, [connection, (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId, (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken]);
|
|
8813
|
-
if ((
|
|
8868
|
+
}, [connection, (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId, (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken, (_c = props.config) === null || _c === void 0 ? void 0 : _c.attributes]);
|
|
8869
|
+
if ((_d = props.config) === null || _d === void 0 ? void 0 : _d.disabled) {
|
|
8814
8870
|
return React$1.createElement(React$1.Fragment, null);
|
|
8815
8871
|
}
|
|
8816
8872
|
var widgetProps = __assign(__assign({}, props), { messageMiddleware: messageMiddleware });
|