@athoscommerce/snap-preact 1.2.3-beta.3 → 1.2.3-beta.4
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/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +5 -2
- package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts +1 -0
- package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Organisms/Chat/Chat.js +118 -37
- package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.js +9 -0
- package/dist/cjs/components/src/components/Organisms/Chat/MessageUser.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Organisms/Chat/MessageUser.js +1 -2
- package/dist/cjs/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map +1 -1
- package/dist/cjs/components/src/components/Organisms/Chat/ResultsDisplay.js +10 -5
- package/dist/cjs/components/src/components/Organisms/Facet/Facet.js +2 -1
- package/dist/cjs/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js +2 -1
- package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
- package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +5 -2
- package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts +1 -0
- package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
- package/dist/esm/components/src/components/Organisms/Chat/Chat.js +104 -25
- package/dist/esm/components/src/components/Organisms/Chat/ChatResult.d.ts.map +1 -1
- package/dist/esm/components/src/components/Organisms/Chat/ChatResult.js +9 -0
- package/dist/esm/components/src/components/Organisms/Chat/MessageUser.d.ts.map +1 -1
- package/dist/esm/components/src/components/Organisms/Chat/MessageUser.js +1 -2
- package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map +1 -1
- package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.js +10 -5
- package/dist/esm/components/src/components/Organisms/Facet/Facet.js +1 -1
- package/dist/esm/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js +1 -1
- package/package.json +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAkarE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAkPvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC5C,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}
|
|
@@ -94,6 +94,9 @@ var defaultStyles = function () {
|
|
|
94
94
|
fontWeight: 'bold',
|
|
95
95
|
fontSize: '1.1em',
|
|
96
96
|
color: '#D4A843',
|
|
97
|
+
display: 'flex',
|
|
98
|
+
gap: '0.5em',
|
|
99
|
+
alignItems: 'center',
|
|
97
100
|
},
|
|
98
101
|
},
|
|
99
102
|
'.ss__chat-product-query-message__header__product__actions': {
|
|
@@ -430,7 +433,7 @@ exports.ChatProductQueryMessage = (0, mobx_react_lite_1.observer)(function (prop
|
|
|
430
433
|
(_a = controller === null || controller === void 0 ? void 0 : controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.popProductQueryMessage(chatItem.sourceMessageId);
|
|
431
434
|
controller === null || controller === void 0 ? void 0 : controller.store.clearProductQuickview();
|
|
432
435
|
};
|
|
433
|
-
return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__chat-product-query-message', className, internalClassName) }, styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header'), children: [cameFromInspiration && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-left", size: "14px" }), (0, jsx_runtime_1.jsx)("span", { children: "Back to inspiration" })] })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? ((0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { return controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, product); }, target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && ((0, jsx_runtime_1.
|
|
436
|
+
return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__chat-product-query-message', className, internalClassName) }, styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header'), children: [cameFromInspiration && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-left", size: "14px" }), (0, jsx_runtime_1.jsx)("span", { children: "Back to inspiration" })] })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && ((0, jsx_runtime_1.jsx)(Image_1.Image, { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? ((0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { return controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, product); }, target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__details__price'), children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(displayedCore.price) && ((0, jsx_runtime_1.jsx)(__1.Price, { value: displayedCore.msrp, lineThrough: true })), (0, jsx_runtime_1.jsx)(__1.Price, { value: displayedCore.price })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions'), children: [displayedCore.url && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__go-to-product'), children: (0, jsx_runtime_1.jsx)("a", { href: displayedCore.url, onClick: function (e) { return controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, product); }, target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { content: 'Add to Cart', onClick: function () {
|
|
434
437
|
controller === null || controller === void 0 ? void 0 : controller.track.product.addToCart(product);
|
|
435
438
|
controller === null || controller === void 0 ? void 0 : controller.addToCart(product);
|
|
436
439
|
} }) }), (controller === null || controller === void 0 ? void 0 : controller.store.features.similarProducts.enabled) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__header__product__actions__show-similar'), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { content: 'Show Similar', onClick: function () { return controller === null || controller === void 0 ? void 0 : controller.discussProduct(sourceProduct, { requestType: 'productSimilar' }); } }) }))] })] })] }), selections.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants'), children: selections.map(function (selection) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants__label'), children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__variants__swatches'), children: selection.values.map(function (selectionValue) {
|
|
@@ -444,5 +447,5 @@ exports.ChatProductQueryMessage = (0, mobx_react_lite_1.observer)(function (prop
|
|
|
444
447
|
}) })] }, selection.field)); }) })), infoRows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Product Information" }), (0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__table'), children: (0, jsx_runtime_1.jsx)("tbody", { children: infoRows.map(function (row) { return ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: row.label }), (0, jsx_runtime_1.jsx)("td", { children: row.rawKey === 'availability' ? ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)({
|
|
445
448
|
'ss__chat-product-query-message__section__table__availability--in-stock': row.value === 'In Stock',
|
|
446
449
|
'ss__chat-product-query-message__section__table__availability--out-of-stock': row.value === 'Out of Stock',
|
|
447
|
-
}), children: row.value === 'In Stock' ? "\u2713 ".concat(row.value) : row.value })) : row.rawKey.toLowerCase() === 'price' ? ((0, jsx_runtime_1.jsx)(__1.Price, { value: Number(row.value) })) : (row.value) })] }, row.key)); }) }) })] })), descriptionRow && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Description" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Features" }), (0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__features'), children: features.map(function (feature, idx) { return ((0, jsx_runtime_1.jsx)("li", { children: feature }, idx)); }) })] }))] })) }));
|
|
450
|
+
}), children: row.value === 'In Stock' ? "\u2713 ".concat(row.value) : row.value })) : row.rawKey.toLowerCase() === 'price' ? ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', gap: '0.5em', alignItems: 'center', justifyContent: 'flex-end' }, children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && ((0, jsx_runtime_1.jsx)(__1.Price, { value: Number(displayedCore.msrp), lineThrough: true })), (0, jsx_runtime_1.jsx)(__1.Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key)); }) }) })] })), descriptionRow && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Description" }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__title'), children: "Features" }), (0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)('ss__chat-product-query-message__section__features'), children: features.map(function (feature, idx) { return ((0, jsx_runtime_1.jsx)("li", { children: feature }, idx)); }) })] }))] })) }));
|
|
448
451
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAqhCrE,eAAO,MAAM,IAAI,gBAAyB,SAAS,KAAG,GAAG,CAAC,OAAO;;CAi1C/D,CAAC;AAEH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+BAA+B,CAAC,EAAE,OAAO,CAAC;CAC1C"}
|
|
@@ -428,7 +428,19 @@ var defaultStyles = function (_a) {
|
|
|
428
428
|
borderBottomRightRadius: mobile ? 0 : '12px',
|
|
429
429
|
borderBottomLeftRadius: mobile ? 0 : '12px',
|
|
430
430
|
flexGrow: 1,
|
|
431
|
+
position: 'relative',
|
|
431
432
|
'.ss__chat__content__header': {
|
|
433
|
+
// In overlay mode (only applied when messages overflow), the comparisons
|
|
434
|
+
// tray floats over the messages so toggling it doesn't shift the layout
|
|
435
|
+
// or push the latest message out of view. When messages don't overflow,
|
|
436
|
+
// the tray stays in flow so older messages remain reachable above it.
|
|
437
|
+
'&.ss__chat__content__header--overlay': {
|
|
438
|
+
position: 'absolute',
|
|
439
|
+
top: 0,
|
|
440
|
+
left: 0,
|
|
441
|
+
right: 0,
|
|
442
|
+
zIndex: 20,
|
|
443
|
+
},
|
|
432
444
|
// '.ss__chat__attachments': {
|
|
433
445
|
// '.ss__chat__attachment': {
|
|
434
446
|
// borderRadius: 0,
|
|
@@ -541,6 +553,7 @@ var defaultStyles = function (_a) {
|
|
|
541
553
|
},
|
|
542
554
|
'.ss__chat__messages': {
|
|
543
555
|
flex: '1 1 auto',
|
|
556
|
+
overflowY: 'auto',
|
|
544
557
|
overscrollBehavior: 'contain',
|
|
545
558
|
margin: 0,
|
|
546
559
|
maxHeight: '100%',
|
|
@@ -600,7 +613,7 @@ var defaultStyles = function (_a) {
|
|
|
600
613
|
'.ss__chat__welcome': {
|
|
601
614
|
display: 'flex',
|
|
602
615
|
flexDirection: 'column',
|
|
603
|
-
|
|
616
|
+
minHeight: '100%',
|
|
604
617
|
'.ss__chat__welcome__message': {
|
|
605
618
|
fontSize: '15px',
|
|
606
619
|
lineHeight: 1.5,
|
|
@@ -1037,7 +1050,7 @@ var defaultStyles = function (_a) {
|
|
|
1037
1050
|
});
|
|
1038
1051
|
};
|
|
1039
1052
|
exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
1040
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
1053
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
1041
1054
|
var globalTheme = (0, providers_1.useTheme)();
|
|
1042
1055
|
var globalTreePath = (0, providers_1.useTreePath)();
|
|
1043
1056
|
var isMobile = (0, __1.useMediaQuery)('(max-width: 767px)');
|
|
@@ -1047,9 +1060,10 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1047
1060
|
title: 'Athos Conversational Assistant',
|
|
1048
1061
|
subtitle: 'Ready to assist you',
|
|
1049
1062
|
multiselectFacets: true,
|
|
1063
|
+
disableBubbleSuggestedQuestions: false,
|
|
1050
1064
|
};
|
|
1051
1065
|
var props = (0, utilities_1.mergeProps)('facets', globalTheme, defaultProps, properties);
|
|
1052
|
-
var className = props.className, internalClassName = props.internalClassName, controller = props.controller, logo = props.logo, title = props.title, subtitle = props.subtitle, offset = props.offset, multiselectFacets = props.multiselectFacets;
|
|
1066
|
+
var className = props.className, internalClassName = props.internalClassName, controller = props.controller, logo = props.logo, title = props.title, subtitle = props.subtitle, offset = props.offset, multiselectFacets = props.multiselectFacets, disableBubbleSuggestedQuestions = props.disableBubbleSuggestedQuestions;
|
|
1053
1067
|
var store = controller.store;
|
|
1054
1068
|
var themeDefaults = {
|
|
1055
1069
|
components: {},
|
|
@@ -1060,6 +1074,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1060
1074
|
var fileInputRef = (0, hooks_1.useRef)(null);
|
|
1061
1075
|
var messagesEndRef = (0, hooks_1.useRef)(null);
|
|
1062
1076
|
var messagesContainerRef = (0, hooks_1.useRef)(null);
|
|
1077
|
+
var headerRef = (0, hooks_1.useRef)(null);
|
|
1063
1078
|
var footerRef = (0, hooks_1.useRef)(null);
|
|
1064
1079
|
// Swipe-to-dismiss state for mobile secondary panel
|
|
1065
1080
|
var secondaryRef = (0, hooks_1.useRef)(null);
|
|
@@ -1067,19 +1082,26 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1067
1082
|
var swipeStartTime = (0, hooks_1.useRef)(0);
|
|
1068
1083
|
var swipeActive = (0, hooks_1.useRef)(false);
|
|
1069
1084
|
var swipeOffsetRef = (0, hooks_1.useRef)(0);
|
|
1070
|
-
var
|
|
1071
|
-
var
|
|
1072
|
-
var
|
|
1073
|
-
var
|
|
1074
|
-
var
|
|
1085
|
+
var _y = (0, hooks_1.useState)(0), swipeOffset = _y[0], setSwipeOffsetRaw = _y[1];
|
|
1086
|
+
var _z = (0, hooks_1.useState)(false), swipeAnimating = _z[0], setSwipeAnimating = _z[1];
|
|
1087
|
+
var _0 = (0, hooks_1.useState)(false), mobileProductInfoOpen = _0[0], setMobileProductInfoOpen = _0[1];
|
|
1088
|
+
var _1 = (0, hooks_1.useState)(0), footerHeight = _1[0], setFooterHeight = _1[1];
|
|
1089
|
+
var _2 = (0, hooks_1.useState)(false), showNewMessages = _2[0], setShowNewMessages = _2[1];
|
|
1090
|
+
var _3 = (0, hooks_1.useState)(false), messagesOverflow = _3[0], setMessagesOverflow = _3[1];
|
|
1075
1091
|
var isNearBottomRef = (0, hooks_1.useRef)(true);
|
|
1076
1092
|
var updateSwipeOffset = function (value) {
|
|
1077
1093
|
swipeOffsetRef.current = value;
|
|
1078
1094
|
setSwipeOffsetRaw(value);
|
|
1079
1095
|
};
|
|
1080
1096
|
var scrollToBottom = function () {
|
|
1081
|
-
|
|
1082
|
-
|
|
1097
|
+
// Scroll the messages container directly (instead of scrollIntoView on the
|
|
1098
|
+
// bottom anchor) so the browser never walks up the ancestor chain. On small
|
|
1099
|
+
// viewports a smooth scrollIntoView could otherwise animate the document/
|
|
1100
|
+
// visual viewport and visually push the fixed-position chat off-screen.
|
|
1101
|
+
var container = messagesContainerRef.current;
|
|
1102
|
+
if (container) {
|
|
1103
|
+
container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
|
|
1104
|
+
}
|
|
1083
1105
|
};
|
|
1084
1106
|
// Conditional scroll: only scrolls if the user is already near the bottom.
|
|
1085
1107
|
// Passed to child components (e.g. image onLoad) so they don't yank the user
|
|
@@ -1146,6 +1168,36 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1146
1168
|
container.addEventListener('scroll', handleScroll);
|
|
1147
1169
|
return function () { return container.removeEventListener('scroll', handleScroll); };
|
|
1148
1170
|
}, [store.open]);
|
|
1171
|
+
// Track whether the messages container is overflowing so the comparisons header
|
|
1172
|
+
// can switch between in-flow (short conversations — top content stays reachable)
|
|
1173
|
+
// and overlay (overflowing — avoid layout shift when toggling the tray).
|
|
1174
|
+
// Hysteresis: when already in overlay, only return to in-flow if the content
|
|
1175
|
+
// would still fit *with* the header re-inserted — otherwise the two states
|
|
1176
|
+
// fight each other and the layout flickers.
|
|
1177
|
+
(0, hooks_1.useEffect)(function () {
|
|
1178
|
+
var container = messagesContainerRef.current;
|
|
1179
|
+
if (!container || typeof ResizeObserver === 'undefined')
|
|
1180
|
+
return;
|
|
1181
|
+
var update = function () {
|
|
1182
|
+
setMessagesOverflow(function (prev) {
|
|
1183
|
+
var _a;
|
|
1184
|
+
var headerHeight = ((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
|
|
1185
|
+
if (prev) {
|
|
1186
|
+
// Currently overlay: header isn't taking flow space. Only switch
|
|
1187
|
+
// back to in-flow if the content would fit with the header added.
|
|
1188
|
+
return container.scrollHeight > container.clientHeight - headerHeight + 1;
|
|
1189
|
+
}
|
|
1190
|
+
// Currently in-flow: header already takes space — straightforward check.
|
|
1191
|
+
return container.scrollHeight > container.clientHeight + 1;
|
|
1192
|
+
});
|
|
1193
|
+
};
|
|
1194
|
+
update();
|
|
1195
|
+
var observer = new ResizeObserver(update);
|
|
1196
|
+
observer.observe(container);
|
|
1197
|
+
if (headerRef.current)
|
|
1198
|
+
observer.observe(headerRef.current);
|
|
1199
|
+
return function () { return observer.disconnect(); };
|
|
1200
|
+
}, [store.open, visibleChatLength]);
|
|
1149
1201
|
// Re-focus the chat input on desktop after a search completes.
|
|
1150
1202
|
// The input is disabled while loading, which causes the browser to drop focus.
|
|
1151
1203
|
// On mobile we intentionally skip this so the virtual keyboard dismisses.
|
|
@@ -1220,6 +1272,28 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1220
1272
|
return text.length > 50 ? "".concat(text.slice(0, 50), "...") : text;
|
|
1221
1273
|
})() }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chat__button__date", children: chat.createdAt.toLocaleString() })] }) }, chat.id)); }) })) : null] })); };
|
|
1222
1274
|
var FacetButton = function (props) { return (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: props.open ? 'angle-down' : 'angle-up', children: props.label }); };
|
|
1275
|
+
var getFacetButtonLabel = function (facet) {
|
|
1276
|
+
var _a;
|
|
1277
|
+
var applied = new Set();
|
|
1278
|
+
// Count values marked as filtered (already applied on the server)
|
|
1279
|
+
(facet.values || []).forEach(function (value) {
|
|
1280
|
+
var _a, _b;
|
|
1281
|
+
if (value === null || value === void 0 ? void 0 : value.filtered) {
|
|
1282
|
+
if ('low' in value && 'high' in value) {
|
|
1283
|
+
applied.add("".concat((_a = value.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = value.high) !== null && _b !== void 0 ? _b : '*'));
|
|
1284
|
+
}
|
|
1285
|
+
else {
|
|
1286
|
+
applied.add(value.value);
|
|
1287
|
+
}
|
|
1288
|
+
}
|
|
1289
|
+
});
|
|
1290
|
+
// Count pending facet attachments (newly selected, not yet sent)
|
|
1291
|
+
(((_a = controller.store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.items) || [])
|
|
1292
|
+
.filter(function (item) { return item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'); })
|
|
1293
|
+
.forEach(function (item) { return applied.add(item.value); });
|
|
1294
|
+
var base = facet.label || facet.field;
|
|
1295
|
+
return applied.size > 0 ? "".concat(base, " (").concat(applied.size, ")") : base;
|
|
1296
|
+
};
|
|
1223
1297
|
// TODO: if starting a new chat and it's expired, this button would then disappear
|
|
1224
1298
|
if (!controller.store.chatEnabled) {
|
|
1225
1299
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
@@ -1310,7 +1384,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1310
1384
|
'ss__chat--open': store.open,
|
|
1311
1385
|
'ss__chat--minimized': !store.open,
|
|
1312
1386
|
'ss__chat--mobile': isMobile,
|
|
1313
|
-
}, className, internalClassName) }, styling, { children: [!store.open && !store.currentChat && ((_f = store.suggestedQuestions) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map(function (question, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions__item", onClick: function () {
|
|
1387
|
+
}, className, internalClassName) }, styling, { children: [!disableBubbleSuggestedQuestions && !store.open && !store.currentChat && ((_f = store.suggestedQuestions) === null || _f === void 0 ? void 0 : _f.length) > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map(function (question, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__suggested-questions__item", onClick: function () {
|
|
1314
1388
|
controller.openChat(question);
|
|
1315
1389
|
}, children: question }, index)); }) })), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__bubble', onClick: function () { return controller.handlers.button.click(); }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "chat", title: "Open Chat" }) }), store.open && shouldShowSideChat && activeMessage ? ((0, jsx_runtime_1.jsxs)("div", { ref: secondaryRef, className: (0, classnames_1.default)('ss__chat__secondary'), style: isMobile
|
|
1316
1390
|
? {
|
|
@@ -1363,7 +1437,9 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1363
1437
|
store.currentChat.save();
|
|
1364
1438
|
}
|
|
1365
1439
|
}, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "close-thin", size: "14px" }) }))] })) : null;
|
|
1366
|
-
})(), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content", children: [(0, jsx_runtime_1.jsx)("div", {
|
|
1440
|
+
})(), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content", children: [(0, jsx_runtime_1.jsx)("div", { ref: headerRef, className: (0, classnames_1.default)('ss__chat__content__header', {
|
|
1441
|
+
'ss__chat__content__header--overlay': messagesOverflow,
|
|
1442
|
+
}), children: ((_j = store.currentChat) === null || _j === void 0 ? void 0 : _j.comparisons.compared) && store.currentChat.comparisons.compared.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), (0, jsx_runtime_1.jsxs)("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", (_k = store.currentChat) === null || _k === void 0 ? void 0 : _k.comparisons.compared.length, "/", (_l = store.currentChat) === null || _l === void 0 ? void 0 : _l.comparisons.maxItems, ")"] })] }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { var _a; return (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.reset(); }, children: "clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__content__header__comparisons__content', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: (_m = store.currentChat) === null || _m === void 0 ? void 0 : _m.comparisons.maxItems }).map(function (_, index) {
|
|
1367
1443
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
1368
1444
|
var comparisonItem = (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.compared[index];
|
|
1369
1445
|
return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__content__comparison', {
|
|
@@ -1382,7 +1458,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1382
1458
|
}, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'close-thin', size: '12px' }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: 'plus-thin' }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__content__header__comparisons__content__comparison--placeholder__text', children: "Add" })] })) }, index));
|
|
1383
1459
|
}) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__action', {
|
|
1384
1460
|
'ss__chat__content__header__comparisons__action--hidden': (((_o = store.currentChat) === null || _o === void 0 ? void 0 : _o.comparisons.compared.length) || 0) < 2,
|
|
1385
|
-
}), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { return controller.search(); }, icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? {
|
|
1461
|
+
}), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () { return controller.search(); }, icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? { scrollbarGutter: 'stable' } : undefined, children: [(!((_p = store.currentChat) === null || _p === void 0 ? void 0 : _p.chat) || store.currentChat.chat.length === 0) && store.welcomeMessage && !((_q = store.currentChat) === null || _q === void 0 ? void 0 : _q.isExpired) && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__welcome", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), (0, jsx_runtime_1.jsx)(SuggestedQuestions_1.SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), (_r = store.currentChat) === null || _r === void 0 ? void 0 : _r.chat.filter(function (chatItem) { return chatItem.messageType !== 'productQuery'; }).map(function (chatItem, index) { return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message ss__chat__message--".concat(chatItem.messageType), children: {
|
|
1386
1462
|
user: ((0, jsx_runtime_1.jsx)(MessageUser_1.MessageUser, { chatItem: chatItem, controller: controller, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined })),
|
|
1387
1463
|
text: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
|
|
1388
1464
|
content: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
|
|
@@ -1403,15 +1479,16 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1403
1479
|
errorResponse: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
|
|
1404
1480
|
topicDrift: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
|
|
1405
1481
|
productQuery: null,
|
|
1406
|
-
}[chatItem.messageType] || null }, index)); }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__new-messages", onClick: function () {
|
|
1482
|
+
}[chatItem.messageType] || null }, index)); }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && messagesOverflow && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__new-messages", onClick: function () {
|
|
1407
1483
|
scrollToBottom();
|
|
1408
1484
|
setShowNewMessages(false);
|
|
1409
|
-
}, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-down", size: "12px" }), (0, jsx_runtime_1.jsx)("span", { children: "New messages" })] }))] }), (0, jsx_runtime_1.jsx)(ChatLoadingIndicator_1.ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !((
|
|
1485
|
+
}, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "angle-down", size: "12px" }), (0, jsx_runtime_1.jsx)("span", { children: "New messages" })] }))] }), (0, jsx_runtime_1.jsx)(ChatLoadingIndicator_1.ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !((_s = store.currentChat) === null || _s === void 0 ? void 0 : _s.isExpired) ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content__footer", ref: footerRef, children: [store.error && (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__error", children: store.error.message }), ((_t = store.currentChat) === null || _t === void 0 ? void 0 : _t.sessionLimitReached) && ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift', children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__topic-drift__text', children: [(0, jsx_runtime_1.jsx)("span", { children: "Session limit reached" }), (0, jsx_runtime_1.jsx)("span", { children: "This chat has reached its maximum number of interactions. Start a new session to continue." })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__topic-drift__button', onClick: function () {
|
|
1410
1486
|
controller.store.createChat();
|
|
1411
|
-
}, children: "New Session" })] })), ((
|
|
1412
|
-
var _a;
|
|
1487
|
+
}, children: "New Session" })] })), ((_u = store.currentChat) === null || _u === void 0 ? void 0 : _u.actions) && store.currentChat.actions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__actions', children: (_v = store.currentChat) === null || _v === void 0 ? void 0 : _v.actions.map(function (action, index) {
|
|
1488
|
+
var _a, _b;
|
|
1413
1489
|
return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__wrap", children: {
|
|
1414
|
-
facets: action.data.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facets-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facets-apply".concat(((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached.some(function (item) { return item.type === 'facet'; }))
|
|
1490
|
+
facets: action.data.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facets-header", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facets-apply".concat(((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached.some(function (item) { return item.type === 'facet'; })) ||
|
|
1491
|
+
(((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.removedFacets) && store.currentChat.removedFacets.length > 0)
|
|
1415
1492
|
? ' ss__chat__actions__facets-apply--active'
|
|
1416
1493
|
: ''), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
|
|
1417
1494
|
controller.search();
|
|
@@ -1419,7 +1496,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1419
1496
|
var _a;
|
|
1420
1497
|
if (!((_a = facet.values) === null || _a === void 0 ? void 0 : _a.length))
|
|
1421
1498
|
return null;
|
|
1422
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet ss__chat__actions__facet--".concat(facet.type), children: (0, jsx_runtime_1.jsx)(__1.Dropdown, { usePortal: true, dropUp: true, button: (0, jsx_runtime_1.jsx)(FacetButton, { label: facet
|
|
1499
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet ss__chat__actions__facet--".concat(facet.type), children: (0, jsx_runtime_1.jsx)(__1.Dropdown, { usePortal: true, dropUp: true, button: (0, jsx_runtime_1.jsx)(FacetButton, { label: getFacetButtonLabel(facet) }), style: {
|
|
1423
1500
|
'.ss__dropdown__content': __assign({ width: '150px', maxHeight: '200px', overflowY: 'auto', background: 'white', boxShadow: '0px 3px 6px 0px rgba(0, 0, 0, 0.2)', borderRadius: '6px' }, (multiselectFacets
|
|
1424
1501
|
? {
|
|
1425
1502
|
'.ss__chat__actions__facet__option--checkbox': {
|
|
@@ -1476,9 +1553,11 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1476
1553
|
}, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__options", children: facet.type === 'range-buckets'
|
|
1477
1554
|
? facet.values.map(function (option) {
|
|
1478
1555
|
var _a, _b;
|
|
1479
|
-
var
|
|
1556
|
+
var rangeOption = option;
|
|
1557
|
+
var optionValue = "".concat((_a = rangeOption.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = rangeOption.high) !== null && _b !== void 0 ? _b : '*');
|
|
1480
1558
|
if (multiselectFacets) {
|
|
1481
|
-
var isSelected_1 = controller.store.
|
|
1559
|
+
var isSelected_1 = (rangeOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
|
|
1560
|
+
controller.store.isFacetSelected(facet.field, optionValue);
|
|
1482
1561
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
|
|
1483
1562
|
if (isSelected_1) {
|
|
1484
1563
|
controller.store.removeFacet(facet.field, optionValue);
|
|
@@ -1488,29 +1567,31 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1488
1567
|
key: facet.field,
|
|
1489
1568
|
facetLabel: facet.label,
|
|
1490
1569
|
value: optionValue,
|
|
1491
|
-
label:
|
|
1492
|
-
count:
|
|
1570
|
+
label: rangeOption.label,
|
|
1571
|
+
count: rangeOption.count,
|
|
1493
1572
|
});
|
|
1494
1573
|
}
|
|
1495
1574
|
}, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
|
|
1496
1575
|
'ss__chat__actions__facet__option__checkbox--checked': isSelected_1,
|
|
1497
|
-
}), children: isSelected_1 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children:
|
|
1576
|
+
}), children: isSelected_1 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: rangeOption.label })] }, optionValue));
|
|
1498
1577
|
}
|
|
1499
1578
|
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
|
|
1500
1579
|
controller.store.addFacet({
|
|
1501
1580
|
key: facet.field,
|
|
1502
1581
|
facetLabel: facet.label,
|
|
1503
1582
|
value: optionValue,
|
|
1504
|
-
label:
|
|
1505
|
-
count:
|
|
1583
|
+
label: rangeOption.label,
|
|
1584
|
+
count: rangeOption.count,
|
|
1506
1585
|
});
|
|
1507
1586
|
controller.search();
|
|
1508
|
-
}, children:
|
|
1587
|
+
}, children: rangeOption.label }, optionValue));
|
|
1509
1588
|
})
|
|
1510
1589
|
: facet.values.map(function (option) {
|
|
1511
|
-
var
|
|
1590
|
+
var valueOption = option;
|
|
1591
|
+
var optionValue = valueOption.value || valueOption.label;
|
|
1512
1592
|
if (multiselectFacets) {
|
|
1513
|
-
var isSelected_2 = controller.store.
|
|
1593
|
+
var isSelected_2 = (valueOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
|
|
1594
|
+
controller.store.isFacetSelected(facet.field, optionValue);
|
|
1514
1595
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
|
|
1515
1596
|
if (isSelected_2) {
|
|
1516
1597
|
controller.store.removeFacet(facet.field, optionValue);
|
|
@@ -1520,24 +1601,24 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1520
1601
|
key: facet.field,
|
|
1521
1602
|
facetLabel: facet.label,
|
|
1522
1603
|
value: optionValue,
|
|
1523
|
-
label:
|
|
1524
|
-
count:
|
|
1604
|
+
label: valueOption.label,
|
|
1605
|
+
count: valueOption.count,
|
|
1525
1606
|
});
|
|
1526
1607
|
}
|
|
1527
1608
|
}, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
|
|
1528
1609
|
'ss__chat__actions__facet__option__checkbox--checked': isSelected_2,
|
|
1529
|
-
}), children: isSelected_2 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children:
|
|
1610
|
+
}), children: isSelected_2 && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "check-thin", size: "10px" }) }), (0, jsx_runtime_1.jsx)("span", { className: "ss__chat__actions__facet__option__label", children: valueOption.label })] }, optionValue));
|
|
1530
1611
|
}
|
|
1531
1612
|
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
|
|
1532
1613
|
controller.store.addFacet({
|
|
1533
1614
|
key: facet.field,
|
|
1534
1615
|
facetLabel: facet.label,
|
|
1535
1616
|
value: optionValue,
|
|
1536
|
-
label:
|
|
1537
|
-
count:
|
|
1617
|
+
label: valueOption.label,
|
|
1618
|
+
count: valueOption.count,
|
|
1538
1619
|
});
|
|
1539
1620
|
controller.search();
|
|
1540
|
-
}, children:
|
|
1621
|
+
}, children: valueOption.label }, optionValue));
|
|
1541
1622
|
}) }) }, facet.field) }, idx));
|
|
1542
1623
|
}) })] })) : null,
|
|
1543
1624
|
actions: ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--suggested" })),
|
|
@@ -1667,7 +1748,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1667
1748
|
var _a;
|
|
1668
1749
|
(_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.dismissTopicDrift();
|
|
1669
1750
|
}, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "close-thin", size: "14px", className: 'ss__chat__topic-drift__icon--close' }) })] }));
|
|
1670
|
-
})(), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input__input', children: [(0, jsx_runtime_1.jsx)("input", { type: "text", name: "ss-chat-input", disabled: store.loading || store.blocked || ((
|
|
1751
|
+
})(), (0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__input__input', children: [(0, jsx_runtime_1.jsx)("input", { type: "text", name: "ss-chat-input", disabled: store.loading || store.blocked || ((_w = store.currentChat) === null || _w === void 0 ? void 0 : _w.sessionLimitReached), placeholder: (function () {
|
|
1671
1752
|
var _a, _b, _c;
|
|
1672
1753
|
var comparedCount = ((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.compared.length) || 0;
|
|
1673
1754
|
var committedCount = ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.comparisons.committed.length) || 0;
|
|
@@ -1695,7 +1776,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
1695
1776
|
if (e.keyCode === 13 && isMobile && mobileProductInfoOpen) {
|
|
1696
1777
|
setMobileProductInfoOpen(false);
|
|
1697
1778
|
}
|
|
1698
|
-
}, value: controller.store.inputValue }), store.features.imageSearch.enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__upload-button', disabled: store.loading || store.blocked || ((
|
|
1779
|
+
}, value: controller.store.inputValue }), store.features.imageSearch.enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { className: 'ss__chat__upload-button', disabled: store.loading || store.blocked || ((_x = store.currentChat) === null || _x === void 0 ? void 0 : _x.sessionLimitReached), onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, icon: { icon: 'image', title: 'Upload Image' } }), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
|
|
1699
1780
|
return __generator(this, function (_a) {
|
|
1700
1781
|
switch (_a.label) {
|
|
1701
1782
|
case 0: return [4 /*yield*/, controller.upload(e.target.files)];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAkH7D,eAAO,MAAM,UAAU,8EA+GtB,CAAC;AAMF,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C"}
|
|
@@ -32,8 +32,17 @@ var defaultStyles = function () {
|
|
|
32
32
|
overflow: 'hidden',
|
|
33
33
|
'.ss__chat__result__image': {
|
|
34
34
|
width: '100%',
|
|
35
|
+
aspectRatio: '1 / 1',
|
|
35
36
|
position: 'relative',
|
|
36
37
|
overflow: 'hidden',
|
|
38
|
+
// fixed-aspect frame: scale the image to fill it and crop overflow so
|
|
39
|
+
// results with different intrinsic image aspect ratios still line up
|
|
40
|
+
// at the same height when displayed side-by-side.
|
|
41
|
+
img: {
|
|
42
|
+
width: '100%',
|
|
43
|
+
height: '100%',
|
|
44
|
+
objectFit: 'cover',
|
|
45
|
+
},
|
|
37
46
|
'.ss__chat__result__image__buttons': {
|
|
38
47
|
position: 'absolute',
|
|
39
48
|
bottom: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAuIhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CA2F1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}
|
|
@@ -19,7 +19,6 @@ var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
|
|
|
19
19
|
var mobx_react_lite_1 = require("mobx-react-lite");
|
|
20
20
|
var classnames_1 = __importDefault(require("classnames"));
|
|
21
21
|
var Image_1 = require("../../Atoms/Image");
|
|
22
|
-
var marked_1 = require("marked");
|
|
23
22
|
var Icon_1 = require("../../Atoms/Icon");
|
|
24
23
|
var __1 = require("../../..");
|
|
25
24
|
var utilities_1 = require("../../../utilities");
|
|
@@ -220,5 +219,5 @@ exports.MessageUser = (0, mobx_react_lite_1.observer)(function (props) {
|
|
|
220
219
|
items.push((0, jsx_runtime_1.jsxs)("li", { className: "ss__chat__message-user__attachment__facet ss__chat__message-user__attachment__facet--overflow", title: "".concat(hiddenFacetCount, " more filter").concat(hiddenFacetCount === 1 ? '' : 's'), children: ["+", hiddenFacetCount] }, "facet-overflow"));
|
|
221
220
|
}
|
|
222
221
|
return items;
|
|
223
|
-
})() }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? (
|
|
222
|
+
})() }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-user__text", children: chatItem.text }) : null] })] }) })));
|
|
224
223
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;
|
|
1
|
+
{"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CAmFhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}
|
|
@@ -57,16 +57,21 @@ exports.ResultsDisplay = (0, mobx_react_lite_1.observer)(function (props) {
|
|
|
57
57
|
// at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
|
|
58
58
|
var isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768 && window.innerWidth <= 1200;
|
|
59
59
|
var slidesPerView = isNarrow || isConstrained ? 1.9 : 2.9;
|
|
60
|
-
var
|
|
60
|
+
var visibleSlides = Math.ceil(slidesPerView);
|
|
61
|
+
// When all results fit, use a whole-number slidesPerView so the last slide
|
|
62
|
+
// isn't clipped to a fraction; otherwise keep the fractional value to hint
|
|
63
|
+
// at additional content beyond the viewport.
|
|
64
|
+
var resolveSlidesPerView = function (count) { return (count <= visibleSlides ? count : slidesPerView); };
|
|
65
|
+
var buildCarouselProps = function (count) { return ({
|
|
61
66
|
breakpoints: undefined,
|
|
62
|
-
slidesPerView:
|
|
67
|
+
slidesPerView: resolveSlidesPerView(count),
|
|
63
68
|
slidesPerGroup: isNarrow || isConstrained ? 2 : 3,
|
|
64
69
|
loop: false,
|
|
65
70
|
pagination: false,
|
|
66
71
|
centerInsufficientSlides: false,
|
|
67
72
|
freeMode: true,
|
|
68
73
|
styleScript: carouselStyleScript,
|
|
69
|
-
};
|
|
74
|
+
}); };
|
|
70
75
|
var handleResultClick = function (e, result) {
|
|
71
76
|
// buttons should be able to be clicked without triggering the product click
|
|
72
77
|
if (e.composedPath().some(function (el) { return el instanceof HTMLElement && el.matches('button, .ss__button, a'); }))
|
|
@@ -78,12 +83,12 @@ exports.ResultsDisplay = (0, mobx_react_lite_1.observer)(function (props) {
|
|
|
78
83
|
if (chatItem.messageType === 'productRecommendation' && ((_a = chatItem.recommendationResult) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
79
84
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: chatItem.recommendationResult.map(function (recommendation, index) {
|
|
80
85
|
var _a;
|
|
81
|
-
return ((_a = recommendation.results) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({},
|
|
86
|
+
return ((_a = recommendation.results) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({}, buildCarouselProps(recommendation.results.length), { hideButtons: recommendation.results.length <= visibleSlides, children: recommendation.results.map(function (result) {
|
|
82
87
|
return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: function (e) { return handleResultClick(e, result); }, children: (0, jsx_runtime_1.jsx)(ChatResult_1.ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
|
|
83
88
|
}) })) }, index)) : null;
|
|
84
89
|
}) }));
|
|
85
90
|
}
|
|
86
|
-
return ((_b = chatItem.results) === null || _b === void 0 ? void 0 : _b.length) > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({},
|
|
91
|
+
return ((_b = chatItem.results) === null || _b === void 0 ? void 0 : _b.length) > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(Carousel_1.Carousel, __assign({}, buildCarouselProps(chatItem.results.length), { hideButtons: chatItem.results.length <= visibleSlides, children: chatItem.results.map(function (result) {
|
|
87
92
|
return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: function (e) { return handleResultClick(e, result); }, children: (0, jsx_runtime_1.jsx)(ChatResult_1.ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
|
|
88
93
|
}) })) })) : null;
|
|
89
94
|
});
|
|
@@ -379,8 +379,9 @@ exports.Facet = (0, mobx_react_lite_1.observer)(function (properties) {
|
|
|
379
379
|
return facet && renderFacet ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet', "ss__facet--".concat(facet.field), "".concat(facet.collapsed ? 'ss__facet--collapsed' : ''), className, internalClassName, "".concat(facet.display ? "ss__facet--".concat(facet.display) : ''), (statefulOverflow ? (overflowState === null || overflowState === void 0 ? void 0 : overflowState.remaining) || 0 > 0 : (((_s = facet === null || facet === void 0 ? void 0 : facet.overflow) === null || _s === void 0 ? void 0 : _s.remaining) || 0) > 0) || (facet === null || facet === void 0 ? void 0 : facet.display) == 'slider'
|
|
380
380
|
? ''
|
|
381
381
|
: 'ss__facet--showing-all'), children: justContent ? ((0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang }))) : ((0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, __assign({}, subProps.dropdown, { open: disableCollapse || !(facet === null || facet === void 0 ? void 0 : facet.collapsed), onClick: function () { return !disableCollapse && facet.toggleCollapse && (facet === null || facet === void 0 ? void 0 : facet.toggleCollapse()); }, disableA11y: true, button: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__facet__header", ref: function (e) { return (0, useA11y_1.useA11y)(e, disableCollapse ? -1 : 0); }, role: "heading", "aria-level": 3 }, mergedLang.dropdownButton.attributes, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "ss__facet__header__inner", children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.dropdownButton.value, { children: facet === null || facet === void 0 ? void 0 : facet.label })), showSelectedCount && selectedCount && facet.type !== 'range' ? ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : "(".concat(selectedCount, ")") })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: function (e) {
|
|
382
|
+
var _a;
|
|
382
383
|
e.stopPropagation();
|
|
383
|
-
facet === null || facet === void 0 ? void 0 : facet.clear.url.link.onClick();
|
|
384
|
+
(_a = facet === null || facet === void 0 ? void 0 : facet.clear.url) === null || _a === void 0 ? void 0 : _a.link.onClick();
|
|
384
385
|
}, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.clearAllText.all)) : null }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), !disableCollapse && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, ((facet === null || facet === void 0 ? void 0 : facet.collapsed)
|
|
385
386
|
? __assign({}, (typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand)) : __assign({}, (typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse))), { name: (facet === null || facet === void 0 ? void 0 : facet.collapsed) ? 'expand' : 'collapse' })))] })), children: (0, jsx_runtime_1.jsx)(FacetContent, __assign({}, facetContentProps, { mergedLang: mergedLang })) }))) })) })) : null;
|
|
386
387
|
});
|
|
@@ -230,8 +230,9 @@ exports.FacetsHorizontal = (0, mobx_react_lite_1.observer)(function (properties)
|
|
|
230
230
|
setSelectedFacet(undefined);
|
|
231
231
|
}
|
|
232
232
|
}, button: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__dropdown__button__heading" }, mergedLang.dropdownButton.attributes, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet__header__inner", children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.dropdownButton.value, { children: facet === null || facet === void 0 ? void 0 : facet.label })), showSelectedCount && selectedCount && facet.type !== 'range' ? ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : "(".concat(selectedCount, ")") })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.button, { internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: function (e) {
|
|
233
|
+
var _a;
|
|
233
234
|
e.stopPropagation();
|
|
234
|
-
facet === null || facet === void 0 ? void 0 : facet.clear.url.link.onClick();
|
|
235
|
+
(_a = facet === null || facet === void 0 ? void 0 : facet.clear.url) === null || _a === void 0 ? void 0 : _a.link.onClick();
|
|
235
236
|
}, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? (0, jsx_runtime_1.jsx)("label", __assign({}, mergedLang.clearAllText.all)) : null }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, ((selectedFacet === null || selectedFacet === void 0 ? void 0 : selectedFacet.field) === facet.field
|
|
236
237
|
? __assign({}, (typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand)) : __assign({}, (typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse)))))] })), disableOverlay: false, children: (0, jsx_runtime_1.jsx)(Facet_1.Facet, __assign({}, subProps.facet, { facet: facet })) })));
|
|
237
238
|
}), !hideFiltersButton && (isOverflowing || alwaysShowFiltersButton) && ((0, jsx_runtime_1.jsx)(MobileSidebar_1.MobileSidebar, __assign({ controller: controller }, subProps.MobileSidebar)))] }) })) })) : null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatProductQueryMessage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAkarE,eAAO,MAAM,uBAAuB,gBAAyB,4BAA4B;;CAkPvF,CAAC;AAEH,MAAM,MAAM,4BAA4B,GAAG;IAC1C,QAAQ,EAAE,2BAA2B,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;CAC5C,GAAG,0CAA0C,GAC7C,cAAc,CAAC,4BAA4B,CAAC,CAAC;AAE9C,MAAM,MAAM,2BAA2B,GAAG;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,cAAc,CAAC;IAC5B,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0CAA0C,GAAG;IACxD,QAAQ,EAAE,2BAA2B,CAAC;CACtC,CAAC;AAEF,MAAM,WAAW,2BAA2B;CAE3C"}
|
|
@@ -77,6 +77,9 @@ const defaultStyles = () => {
|
|
|
77
77
|
fontWeight: 'bold',
|
|
78
78
|
fontSize: '1.1em',
|
|
79
79
|
color: '#D4A843',
|
|
80
|
+
display: 'flex',
|
|
81
|
+
gap: '0.5em',
|
|
82
|
+
alignItems: 'center',
|
|
80
83
|
},
|
|
81
84
|
},
|
|
82
85
|
'.ss__chat-product-query-message__header__product__actions': {
|
|
@@ -407,7 +410,7 @@ export const ChatProductQueryMessage = observer((properties) => {
|
|
|
407
410
|
controller?.store.currentChat?.popProductQueryMessage(chatItem.sourceMessageId);
|
|
408
411
|
controller?.store.clearProductQuickview();
|
|
409
412
|
};
|
|
410
|
-
return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__header'), children: [cameFromInspiration && (_jsxs("div", { className: classnames('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [_jsx(Icon, { icon: "angle-left", size: "14px" }), _jsx("span", { children: "Back to inspiration" })] })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && (_jsx(Image, { className: classnames('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? (_jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && (
|
|
413
|
+
return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-product-query-message', className, internalClassName), ...styling, children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__header'), children: [cameFromInspiration && (_jsxs("div", { className: classnames('ss__chat-product-query-message__header__back'), onClick: handleBack, children: [_jsx(Icon, { icon: "angle-left", size: "14px" }), _jsx("span", { children: "Back to inspiration" })] })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product'), children: [displayedCore.imageUrl && (_jsx(Image, { className: classnames('ss__chat-product-query-message__header__product__image'), src: displayedCore.imageUrl, alt: displayedCore.name || '' })), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details'), children: [displayedCore.name && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__name'), children: displayedCore.url ? (_jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: displayedCore.name })) : (displayedCore.name) })), displayedCore.brand && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__details__brand'), children: displayedCore.brand })), displayedCore.price != null && (_jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__details__price'), children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(displayedCore.price) && (_jsx(Price, { value: displayedCore.msrp, lineThrough: true })), _jsx(Price, { value: displayedCore.price })] }))] }), _jsxs("div", { className: classnames('ss__chat-product-query-message__header__product__actions'), children: [displayedCore.url && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__go-to-product'), children: _jsx("a", { href: displayedCore.url, onClick: (e) => controller?.track.product.click(e, product), target: "_blank", rel: "noopener noreferrer", children: "Go to product" }) })), _jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__add-to-cart'), children: _jsx(Button, { content: 'Add to Cart', onClick: () => {
|
|
411
414
|
controller?.track.product.addToCart(product);
|
|
412
415
|
controller?.addToCart(product);
|
|
413
416
|
} }) }), controller?.store.features.similarProducts.enabled && (_jsx("div", { className: classnames('ss__chat-product-query-message__header__product__actions__show-similar'), children: _jsx(Button, { content: 'Show Similar', onClick: () => controller?.discussProduct(sourceProduct, { requestType: 'productSimilar' }) }) }))] })] })] }), selections.length > 0 && (_jsx("div", { className: classnames('ss__chat-product-query-message__variants'), children: selections.map((selection) => (_jsxs("div", { children: [_jsxs("div", { className: classnames('ss__chat-product-query-message__variants__label'), children: [formatLabel(selection.field), " (", selection.values.length, ")"] }), _jsx("div", { className: classnames('ss__chat-product-query-message__variants__swatches'), children: selection.values.map((selectionValue) => {
|
|
@@ -420,5 +423,5 @@ export const ChatProductQueryMessage = observer((properties) => {
|
|
|
420
423
|
}) })] }, selection.field))) })), infoRows.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Product Information" }), _jsx("table", { className: classnames('ss__chat-product-query-message__section__table'), children: _jsx("tbody", { children: infoRows.map((row) => (_jsxs("tr", { children: [_jsx("td", { children: row.label }), _jsx("td", { children: row.rawKey === 'availability' ? (_jsx("span", { className: classnames({
|
|
421
424
|
'ss__chat-product-query-message__section__table__availability--in-stock': row.value === 'In Stock',
|
|
422
425
|
'ss__chat-product-query-message__section__table__availability--out-of-stock': row.value === 'Out of Stock',
|
|
423
|
-
}), children: row.value === 'In Stock' ? `\u2713 ${row.value}` : row.value })) : row.rawKey.toLowerCase() === 'price' ? (_jsx(Price, { value: Number(row.value) })) : (row.value) })] }, row.key))) }) })] })), descriptionRow && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Description" }), _jsx("div", { className: classnames('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Features" }), _jsx("ul", { className: classnames('ss__chat-product-query-message__section__features'), children: features.map((feature, idx) => (_jsx("li", { children: feature }, idx))) })] }))] }) }));
|
|
426
|
+
}), children: row.value === 'In Stock' ? `\u2713 ${row.value}` : row.value })) : row.rawKey.toLowerCase() === 'price' ? (_jsxs("span", { style: { display: 'flex', gap: '0.5em', alignItems: 'center', justifyContent: 'flex-end' }, children: [displayedCore.msrp != null && Number(displayedCore.msrp) > Number(row.value) && (_jsx(Price, { value: Number(displayedCore.msrp), lineThrough: true })), _jsx(Price, { value: Number(row.value) })] })) : (row.value) })] }, row.key))) }) })] })), descriptionRow && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Description" }), _jsx("div", { className: classnames('ss__chat-product-query-message__section__description'), children: descriptionRow.value })] })), features.length > 0 && (_jsxs("div", { className: classnames('ss__chat-product-query-message__section'), children: [_jsx("div", { className: classnames('ss__chat-product-query-message__section__title'), children: "Features" }), _jsx("ul", { className: classnames('ss__chat-product-query-message__section__features'), children: features.map((feature, idx) => (_jsx("li", { children: feature }, idx))) })] }))] }) }));
|
|
424
427
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAqhCrE,eAAO,MAAM,IAAI,gBAAyB,SAAS,KAAG,GAAG,CAAC,OAAO;;CAi1C/D,CAAC;AAEH,MAAM,WAAW,SAAU,SAAQ,cAAc;IAChD,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+BAA+B,CAAC,EAAE,OAAO,CAAC;CAC1C"}
|
|
@@ -391,7 +391,19 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
|
|
|
391
391
|
borderBottomRightRadius: mobile ? 0 : '12px',
|
|
392
392
|
borderBottomLeftRadius: mobile ? 0 : '12px',
|
|
393
393
|
flexGrow: 1,
|
|
394
|
+
position: 'relative',
|
|
394
395
|
'.ss__chat__content__header': {
|
|
396
|
+
// In overlay mode (only applied when messages overflow), the comparisons
|
|
397
|
+
// tray floats over the messages so toggling it doesn't shift the layout
|
|
398
|
+
// or push the latest message out of view. When messages don't overflow,
|
|
399
|
+
// the tray stays in flow so older messages remain reachable above it.
|
|
400
|
+
'&.ss__chat__content__header--overlay': {
|
|
401
|
+
position: 'absolute',
|
|
402
|
+
top: 0,
|
|
403
|
+
left: 0,
|
|
404
|
+
right: 0,
|
|
405
|
+
zIndex: 20,
|
|
406
|
+
},
|
|
395
407
|
// '.ss__chat__attachments': {
|
|
396
408
|
// '.ss__chat__attachment': {
|
|
397
409
|
// borderRadius: 0,
|
|
@@ -504,6 +516,7 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
|
|
|
504
516
|
},
|
|
505
517
|
'.ss__chat__messages': {
|
|
506
518
|
flex: '1 1 auto',
|
|
519
|
+
overflowY: 'auto',
|
|
507
520
|
overscrollBehavior: 'contain',
|
|
508
521
|
margin: 0,
|
|
509
522
|
maxHeight: '100%',
|
|
@@ -563,7 +576,7 @@ const defaultStyles = ({ mobile, offset, hasSideChat, footerHeight }) => {
|
|
|
563
576
|
'.ss__chat__welcome': {
|
|
564
577
|
display: 'flex',
|
|
565
578
|
flexDirection: 'column',
|
|
566
|
-
|
|
579
|
+
minHeight: '100%',
|
|
567
580
|
'.ss__chat__welcome__message': {
|
|
568
581
|
fontSize: '15px',
|
|
569
582
|
lineHeight: 1.5,
|
|
@@ -1016,9 +1029,10 @@ export const Chat = observer((properties) => {
|
|
|
1016
1029
|
title: 'Athos Conversational Assistant',
|
|
1017
1030
|
subtitle: 'Ready to assist you',
|
|
1018
1031
|
multiselectFacets: true,
|
|
1032
|
+
disableBubbleSuggestedQuestions: false,
|
|
1019
1033
|
};
|
|
1020
1034
|
let props = mergeProps('facets', globalTheme, defaultProps, properties);
|
|
1021
|
-
const { className, internalClassName, controller, logo, title, subtitle, offset, multiselectFacets } = props;
|
|
1035
|
+
const { className, internalClassName, controller, logo, title, subtitle, offset, multiselectFacets, disableBubbleSuggestedQuestions } = props;
|
|
1022
1036
|
const { store } = controller;
|
|
1023
1037
|
const themeDefaults = {
|
|
1024
1038
|
components: {},
|
|
@@ -1032,6 +1046,7 @@ export const Chat = observer((properties) => {
|
|
|
1032
1046
|
const fileInputRef = useRef(null);
|
|
1033
1047
|
const messagesEndRef = useRef(null);
|
|
1034
1048
|
const messagesContainerRef = useRef(null);
|
|
1049
|
+
const headerRef = useRef(null);
|
|
1035
1050
|
const footerRef = useRef(null);
|
|
1036
1051
|
// Swipe-to-dismiss state for mobile secondary panel
|
|
1037
1052
|
const secondaryRef = useRef(null);
|
|
@@ -1044,13 +1059,21 @@ export const Chat = observer((properties) => {
|
|
|
1044
1059
|
const [mobileProductInfoOpen, setMobileProductInfoOpen] = useState(false);
|
|
1045
1060
|
const [footerHeight, setFooterHeight] = useState(0);
|
|
1046
1061
|
const [showNewMessages, setShowNewMessages] = useState(false);
|
|
1062
|
+
const [messagesOverflow, setMessagesOverflow] = useState(false);
|
|
1047
1063
|
const isNearBottomRef = useRef(true);
|
|
1048
1064
|
const updateSwipeOffset = (value) => {
|
|
1049
1065
|
swipeOffsetRef.current = value;
|
|
1050
1066
|
setSwipeOffsetRaw(value);
|
|
1051
1067
|
};
|
|
1052
1068
|
const scrollToBottom = () => {
|
|
1053
|
-
|
|
1069
|
+
// Scroll the messages container directly (instead of scrollIntoView on the
|
|
1070
|
+
// bottom anchor) so the browser never walks up the ancestor chain. On small
|
|
1071
|
+
// viewports a smooth scrollIntoView could otherwise animate the document/
|
|
1072
|
+
// visual viewport and visually push the fixed-position chat off-screen.
|
|
1073
|
+
const container = messagesContainerRef.current;
|
|
1074
|
+
if (container) {
|
|
1075
|
+
container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
|
|
1076
|
+
}
|
|
1054
1077
|
};
|
|
1055
1078
|
// Conditional scroll: only scrolls if the user is already near the bottom.
|
|
1056
1079
|
// Passed to child components (e.g. image onLoad) so they don't yank the user
|
|
@@ -1116,6 +1139,35 @@ export const Chat = observer((properties) => {
|
|
|
1116
1139
|
container.addEventListener('scroll', handleScroll);
|
|
1117
1140
|
return () => container.removeEventListener('scroll', handleScroll);
|
|
1118
1141
|
}, [store.open]);
|
|
1142
|
+
// Track whether the messages container is overflowing so the comparisons header
|
|
1143
|
+
// can switch between in-flow (short conversations — top content stays reachable)
|
|
1144
|
+
// and overlay (overflowing — avoid layout shift when toggling the tray).
|
|
1145
|
+
// Hysteresis: when already in overlay, only return to in-flow if the content
|
|
1146
|
+
// would still fit *with* the header re-inserted — otherwise the two states
|
|
1147
|
+
// fight each other and the layout flickers.
|
|
1148
|
+
useEffect(() => {
|
|
1149
|
+
const container = messagesContainerRef.current;
|
|
1150
|
+
if (!container || typeof ResizeObserver === 'undefined')
|
|
1151
|
+
return;
|
|
1152
|
+
const update = () => {
|
|
1153
|
+
setMessagesOverflow((prev) => {
|
|
1154
|
+
const headerHeight = headerRef.current?.offsetHeight || 0;
|
|
1155
|
+
if (prev) {
|
|
1156
|
+
// Currently overlay: header isn't taking flow space. Only switch
|
|
1157
|
+
// back to in-flow if the content would fit with the header added.
|
|
1158
|
+
return container.scrollHeight > container.clientHeight - headerHeight + 1;
|
|
1159
|
+
}
|
|
1160
|
+
// Currently in-flow: header already takes space — straightforward check.
|
|
1161
|
+
return container.scrollHeight > container.clientHeight + 1;
|
|
1162
|
+
});
|
|
1163
|
+
};
|
|
1164
|
+
update();
|
|
1165
|
+
const observer = new ResizeObserver(update);
|
|
1166
|
+
observer.observe(container);
|
|
1167
|
+
if (headerRef.current)
|
|
1168
|
+
observer.observe(headerRef.current);
|
|
1169
|
+
return () => observer.disconnect();
|
|
1170
|
+
}, [store.open, visibleChatLength]);
|
|
1119
1171
|
// Re-focus the chat input on desktop after a search completes.
|
|
1120
1172
|
// The input is disabled while loading, which causes the browser to drop focus.
|
|
1121
1173
|
// On mobile we intentionally skip this so the virtual keyboard dismisses.
|
|
@@ -1188,6 +1240,26 @@ export const Chat = observer((properties) => {
|
|
|
1188
1240
|
return text.length > 50 ? `${text.slice(0, 50)}...` : text;
|
|
1189
1241
|
})() }), _jsx("div", { className: "ss__chat__history__chat__button__date", children: chat.createdAt.toLocaleString() })] }) }, chat.id))) })) : null] }));
|
|
1190
1242
|
const FacetButton = (props) => _jsx(Button, { icon: props.open ? 'angle-down' : 'angle-up', children: props.label });
|
|
1243
|
+
const getFacetButtonLabel = (facet) => {
|
|
1244
|
+
const applied = new Set();
|
|
1245
|
+
// Count values marked as filtered (already applied on the server)
|
|
1246
|
+
(facet.values || []).forEach((value) => {
|
|
1247
|
+
if (value?.filtered) {
|
|
1248
|
+
if ('low' in value && 'high' in value) {
|
|
1249
|
+
applied.add(`${value.low ?? '*'}:${value.high ?? '*'}`);
|
|
1250
|
+
}
|
|
1251
|
+
else {
|
|
1252
|
+
applied.add(value.value);
|
|
1253
|
+
}
|
|
1254
|
+
}
|
|
1255
|
+
});
|
|
1256
|
+
// Count pending facet attachments (newly selected, not yet sent)
|
|
1257
|
+
(controller.store.currentChat?.attachments.items || [])
|
|
1258
|
+
.filter((item) => item.type === 'facet' && item.key === facet.field && (item.state === 'active' || item.state === 'attached'))
|
|
1259
|
+
.forEach((item) => applied.add(item.value));
|
|
1260
|
+
const base = facet.label || facet.field;
|
|
1261
|
+
return applied.size > 0 ? `${base} (${applied.size})` : base;
|
|
1262
|
+
};
|
|
1191
1263
|
// TODO: if starting a new chat and it's expired, this button would then disappear
|
|
1192
1264
|
if (!controller.store.chatEnabled) {
|
|
1193
1265
|
return _jsx(_Fragment, {});
|
|
@@ -1276,7 +1348,7 @@ export const Chat = observer((properties) => {
|
|
|
1276
1348
|
'ss__chat--open': store.open,
|
|
1277
1349
|
'ss__chat--minimized': !store.open,
|
|
1278
1350
|
'ss__chat--mobile': isMobile,
|
|
1279
|
-
}, className, internalClassName), ...styling, children: [!store.open && !store.currentChat && store.suggestedQuestions?.length > 0 && (_jsx("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map((question, index) => (_jsx("div", { className: "ss__chat__suggested-questions__item", onClick: () => {
|
|
1351
|
+
}, className, internalClassName), ...styling, children: [!disableBubbleSuggestedQuestions && !store.open && !store.currentChat && store.suggestedQuestions?.length > 0 && (_jsx("div", { className: "ss__chat__suggested-questions", children: store.suggestedQuestions.map((question, index) => (_jsx("div", { className: "ss__chat__suggested-questions__item", onClick: () => {
|
|
1280
1352
|
controller.openChat(question);
|
|
1281
1353
|
}, children: question }, index))) })), _jsx("div", { className: 'ss__chat__bubble', onClick: () => controller.handlers.button.click(), children: _jsx(Icon, { icon: "chat", title: "Open Chat" }) }), store.open && shouldShowSideChat && activeMessage ? (_jsxs("div", { ref: secondaryRef, className: classnames('ss__chat__secondary'), style: isMobile
|
|
1282
1354
|
? {
|
|
@@ -1325,7 +1397,9 @@ export const Chat = observer((properties) => {
|
|
|
1325
1397
|
store.currentChat.save();
|
|
1326
1398
|
}
|
|
1327
1399
|
}, children: _jsx(Icon, { icon: "close-thin", size: "14px" }) }))] })) : null;
|
|
1328
|
-
})(), _jsxs("div", { className: "ss__chat__content", children: [_jsx("div", {
|
|
1400
|
+
})(), _jsxs("div", { className: "ss__chat__content", children: [_jsx("div", { ref: headerRef, className: classnames('ss__chat__content__header', {
|
|
1401
|
+
'ss__chat__content__header--overlay': messagesOverflow,
|
|
1402
|
+
}), children: store.currentChat?.comparisons.compared && store.currentChat.comparisons.compared.length > 0 && (_jsxs("div", { className: 'ss__chat__content__header__comparisons', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header', children: [_jsxs("div", { className: 'ss__chat__content__header__comparisons__header__title', children: [_jsx(Icon, { className: 'ss__chat__content__header__comparisons__header__title__icon', icon: 'clipboard' }), _jsxs("span", { className: 'ss__chat__content__header__comparisons__header__title__text', children: ["Compare Products (", store.currentChat?.comparisons.compared.length, "/", store.currentChat?.comparisons.maxItems, ")"] })] }), _jsx("div", { className: 'ss__chat__content__header__comparisons__header__actions', children: _jsx(Button, { onClick: () => store.currentChat?.comparisons.reset(), children: "clear" }) })] }), _jsxs("div", { className: 'ss__chat__content__header__comparisons__content', children: [_jsx("div", { className: 'ss__chat__content__header__comparisons__content__items', children: Array.from({ length: store.currentChat?.comparisons.maxItems }).map((_, index) => {
|
|
1329
1403
|
const comparisonItem = store.currentChat?.comparisons.compared[index];
|
|
1330
1404
|
return (_jsx("div", { className: classnames('ss__chat__content__header__comparisons__content__comparison', {
|
|
1331
1405
|
'ss__chat__content__header__comparisons__content__comparison--placeholder': !comparisonItem,
|
|
@@ -1342,7 +1416,7 @@ export const Chat = observer((properties) => {
|
|
|
1342
1416
|
}, children: _jsx(Icon, { icon: 'close-thin', size: '12px' }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: 'plus-thin' }), _jsx("div", { className: 'ss__chat__content__header__comparisons__content__comparison--placeholder__text', children: "Add" })] })) }, index));
|
|
1343
1417
|
}) }), _jsx("div", { className: classnames('ss__chat__content__header__comparisons__action', {
|
|
1344
1418
|
'ss__chat__content__header__comparisons__action--hidden': (store.currentChat?.comparisons.compared.length || 0) < 2,
|
|
1345
|
-
}), children: _jsx(Button, { onClick: () => controller.search(), icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), _jsxs("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? {
|
|
1419
|
+
}), children: _jsx(Button, { onClick: () => controller.search(), icon: { icon: 'compare', title: 'Compare' }, children: "Compare" }) })] })] })) }), _jsxs("div", { className: 'ss__chat__messages', ref: messagesContainerRef, style: visibleChatLength ? { scrollbarGutter: 'stable' } : undefined, children: [(!store.currentChat?.chat || store.currentChat.chat.length === 0) && store.welcomeMessage && !store.currentChat?.isExpired && (_jsxs("div", { className: "ss__chat__welcome", children: [_jsx("div", { className: "ss__chat__welcome__message", children: store.welcomeMessage }), _jsx(SuggestedQuestions, { questions: store.suggestedQuestions, controller: controller })] })), store.currentChat?.chat
|
|
1346
1420
|
.filter((chatItem) => chatItem.messageType !== 'productQuery')
|
|
1347
1421
|
.map((chatItem, index) => (_jsx("div", { className: `ss__chat__message ss__chat__message--${chatItem.messageType}`, children: {
|
|
1348
1422
|
user: (_jsx(MessageUser, { chatItem: chatItem, controller: controller, onViewProduct: isMobile ? () => setMobileProductInfoOpen(true) : undefined })),
|
|
@@ -1364,20 +1438,21 @@ export const Chat = observer((properties) => {
|
|
|
1364
1438
|
errorResponse: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
|
|
1365
1439
|
topicDrift: (_jsx(MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
|
|
1366
1440
|
productQuery: null,
|
|
1367
|
-
}[chatItem.messageType] || null }, index))), _jsx("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && (_jsxs("div", { className: "ss__chat__new-messages", onClick: () => {
|
|
1441
|
+
}[chatItem.messageType] || null }, index))), _jsx("div", { className: "ss__chat__messages__end", ref: messagesEndRef }), showNewMessages && messagesOverflow && (_jsxs("div", { className: "ss__chat__new-messages", onClick: () => {
|
|
1368
1442
|
scrollToBottom();
|
|
1369
1443
|
setShowNewMessages(false);
|
|
1370
1444
|
}, children: [_jsx(Icon, { icon: "angle-down", size: "12px" }), _jsx("span", { children: "New messages" })] }))] }), _jsx(ChatLoadingIndicator, { loading: store.loading, verbs: loadingVerbs }), !store.currentChat?.isExpired ? (_jsxs("div", { className: "ss__chat__content__footer", ref: footerRef, children: [store.error && _jsx("div", { className: "ss__chat__error", children: store.error.message }), store.currentChat?.sessionLimitReached && (_jsxs("div", { className: 'ss__chat__topic-drift', children: [_jsx(Icon, { icon: "info", size: "18px", className: 'ss__chat__topic-drift__icon--info' }), _jsxs("div", { className: 'ss__chat__topic-drift__text', children: [_jsx("span", { children: "Session limit reached" }), _jsx("span", { children: "This chat has reached its maximum number of interactions. Start a new session to continue." })] }), _jsx(Button, { className: 'ss__chat__topic-drift__button', onClick: () => {
|
|
1371
1445
|
controller.store.createChat();
|
|
1372
1446
|
}, children: "New Session" })] })), store.currentChat?.actions && store.currentChat.actions.length > 0 && (_jsx("div", { className: 'ss__chat__actions', children: store.currentChat?.actions.map((action, index) => (_jsx("div", { className: "ss__chat__actions__wrap", children: {
|
|
1373
|
-
facets: action.data.length ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ss__chat__actions__facets-header", children: [_jsx("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && (_jsx("div", { className: `ss__chat__actions__facets-apply${store.currentChat?.attachments.attached.some((item) => item.type === 'facet')
|
|
1447
|
+
facets: action.data.length ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ss__chat__actions__facets-header", children: [_jsx("div", { className: "ss__chat__actions--title", children: "Filter by:" }), multiselectFacets && (_jsx("div", { className: `ss__chat__actions__facets-apply${store.currentChat?.attachments.attached.some((item) => item.type === 'facet') ||
|
|
1448
|
+
(store.currentChat?.removedFacets && store.currentChat.removedFacets.length > 0)
|
|
1374
1449
|
? ' ss__chat__actions__facets-apply--active'
|
|
1375
1450
|
: ''}`, children: _jsx(Button, { onClick: () => {
|
|
1376
1451
|
controller.search();
|
|
1377
1452
|
}, children: "Apply" }) }))] }), _jsx("div", { className: "ss__chat__actions--facets", children: action.data.slice(0, 10).map((facet, idx) => {
|
|
1378
1453
|
if (!facet.values?.length)
|
|
1379
1454
|
return null;
|
|
1380
|
-
return (_jsx("div", { className: `ss__chat__actions__facet ss__chat__actions__facet--${facet.type}`, children: _jsx(Dropdown, { usePortal: true, dropUp: true, button: _jsx(FacetButton, { label: facet
|
|
1455
|
+
return (_jsx("div", { className: `ss__chat__actions__facet ss__chat__actions__facet--${facet.type}`, children: _jsx(Dropdown, { usePortal: true, dropUp: true, button: _jsx(FacetButton, { label: getFacetButtonLabel(facet) }), style: {
|
|
1381
1456
|
'.ss__dropdown__content': {
|
|
1382
1457
|
width: '150px',
|
|
1383
1458
|
maxHeight: '200px',
|
|
@@ -1441,9 +1516,11 @@ export const Chat = observer((properties) => {
|
|
|
1441
1516
|
},
|
|
1442
1517
|
}, children: _jsx("div", { className: "ss__chat__actions__facet__options", children: facet.type === 'range-buckets'
|
|
1443
1518
|
? facet.values.map((option) => {
|
|
1444
|
-
const
|
|
1519
|
+
const rangeOption = option;
|
|
1520
|
+
const optionValue = `${rangeOption.low ?? '*'}:${rangeOption.high ?? '*'}`;
|
|
1445
1521
|
if (multiselectFacets) {
|
|
1446
|
-
const isSelected = controller.store.
|
|
1522
|
+
const isSelected = (rangeOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
|
|
1523
|
+
controller.store.isFacetSelected(facet.field, optionValue);
|
|
1447
1524
|
return (_jsxs("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: () => {
|
|
1448
1525
|
if (isSelected) {
|
|
1449
1526
|
controller.store.removeFacet(facet.field, optionValue);
|
|
@@ -1453,29 +1530,31 @@ export const Chat = observer((properties) => {
|
|
|
1453
1530
|
key: facet.field,
|
|
1454
1531
|
facetLabel: facet.label,
|
|
1455
1532
|
value: optionValue,
|
|
1456
|
-
label:
|
|
1457
|
-
count:
|
|
1533
|
+
label: rangeOption.label,
|
|
1534
|
+
count: rangeOption.count,
|
|
1458
1535
|
});
|
|
1459
1536
|
}
|
|
1460
1537
|
}, children: [_jsx("div", { className: classnames('ss__chat__actions__facet__option__checkbox', {
|
|
1461
1538
|
'ss__chat__actions__facet__option__checkbox--checked': isSelected,
|
|
1462
|
-
}), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children:
|
|
1539
|
+
}), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: rangeOption.label })] }, optionValue));
|
|
1463
1540
|
}
|
|
1464
1541
|
return (_jsx(Button, { onClick: () => {
|
|
1465
1542
|
controller.store.addFacet({
|
|
1466
1543
|
key: facet.field,
|
|
1467
1544
|
facetLabel: facet.label,
|
|
1468
1545
|
value: optionValue,
|
|
1469
|
-
label:
|
|
1470
|
-
count:
|
|
1546
|
+
label: rangeOption.label,
|
|
1547
|
+
count: rangeOption.count,
|
|
1471
1548
|
});
|
|
1472
1549
|
controller.search();
|
|
1473
|
-
}, children:
|
|
1550
|
+
}, children: rangeOption.label }, optionValue));
|
|
1474
1551
|
})
|
|
1475
1552
|
: facet.values.map((option) => {
|
|
1476
|
-
const
|
|
1553
|
+
const valueOption = option;
|
|
1554
|
+
const optionValue = valueOption.value || valueOption.label;
|
|
1477
1555
|
if (multiselectFacets) {
|
|
1478
|
-
const isSelected = controller.store.
|
|
1556
|
+
const isSelected = (valueOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
|
|
1557
|
+
controller.store.isFacetSelected(facet.field, optionValue);
|
|
1479
1558
|
return (_jsxs("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: () => {
|
|
1480
1559
|
if (isSelected) {
|
|
1481
1560
|
controller.store.removeFacet(facet.field, optionValue);
|
|
@@ -1485,24 +1564,24 @@ export const Chat = observer((properties) => {
|
|
|
1485
1564
|
key: facet.field,
|
|
1486
1565
|
facetLabel: facet.label,
|
|
1487
1566
|
value: optionValue,
|
|
1488
|
-
label:
|
|
1489
|
-
count:
|
|
1567
|
+
label: valueOption.label,
|
|
1568
|
+
count: valueOption.count,
|
|
1490
1569
|
});
|
|
1491
1570
|
}
|
|
1492
1571
|
}, children: [_jsx("div", { className: classnames('ss__chat__actions__facet__option__checkbox', {
|
|
1493
1572
|
'ss__chat__actions__facet__option__checkbox--checked': isSelected,
|
|
1494
|
-
}), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children:
|
|
1573
|
+
}), children: isSelected && _jsx(Icon, { icon: "check-thin", size: "10px" }) }), _jsx("span", { className: "ss__chat__actions__facet__option__label", children: valueOption.label })] }, optionValue));
|
|
1495
1574
|
}
|
|
1496
1575
|
return (_jsx(Button, { onClick: () => {
|
|
1497
1576
|
controller.store.addFacet({
|
|
1498
1577
|
key: facet.field,
|
|
1499
1578
|
facetLabel: facet.label,
|
|
1500
1579
|
value: optionValue,
|
|
1501
|
-
label:
|
|
1502
|
-
count:
|
|
1580
|
+
label: valueOption.label,
|
|
1581
|
+
count: valueOption.count,
|
|
1503
1582
|
});
|
|
1504
1583
|
controller.search();
|
|
1505
|
-
}, children:
|
|
1584
|
+
}, children: valueOption.label }, optionValue));
|
|
1506
1585
|
}) }) }, facet.field) }, idx));
|
|
1507
1586
|
}) })] })) : null,
|
|
1508
1587
|
actions: (_jsx("div", { className: "ss__chat__actions--suggested" })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatResult.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ChatResult.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAMzD,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAkH7D,eAAO,MAAM,UAAU,8EA+GtB,CAAC;AAMF,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC/C"}
|
|
@@ -18,8 +18,17 @@ const defaultStyles = () => {
|
|
|
18
18
|
overflow: 'hidden',
|
|
19
19
|
'.ss__chat__result__image': {
|
|
20
20
|
width: '100%',
|
|
21
|
+
aspectRatio: '1 / 1',
|
|
21
22
|
position: 'relative',
|
|
22
23
|
overflow: 'hidden',
|
|
24
|
+
// fixed-aspect frame: scale the image to fill it and crop overflow so
|
|
25
|
+
// results with different intrinsic image aspect ratios still line up
|
|
26
|
+
// at the same height when displayed side-by-side.
|
|
27
|
+
img: {
|
|
28
|
+
width: '100%',
|
|
29
|
+
height: '100%',
|
|
30
|
+
objectFit: 'cover',
|
|
31
|
+
},
|
|
23
32
|
'.ss__chat__result__image__buttons': {
|
|
24
33
|
position: 'absolute',
|
|
25
34
|
bottom: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"MessageUser.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/MessageUser.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAuIhE,eAAO,MAAM,WAAW,WAAoB,gBAAgB;;CA2F1D,CAAC;AAEH,UAAU,gBAAgB;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC"}
|
|
@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
|
2
2
|
import { observer } from 'mobx-react-lite';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { Image } from '../../Atoms/Image';
|
|
5
|
-
import { marked } from 'marked';
|
|
6
5
|
import { Icon } from '../../Atoms/Icon';
|
|
7
6
|
import { css } from '../../..';
|
|
8
7
|
import { mergeStyles } from '../../../utilities';
|
|
@@ -191,5 +190,5 @@ export const MessageUser = observer((props) => {
|
|
|
191
190
|
items.push(_jsxs("li", { className: "ss__chat__message-user__attachment__facet ss__chat__message-user__attachment__facet--overflow", title: `${hiddenFacetCount} more filter${hiddenFacetCount === 1 ? '' : 's'}`, children: ["+", hiddenFacetCount] }, "facet-overflow"));
|
|
192
191
|
}
|
|
193
192
|
return items;
|
|
194
|
-
})() }), _jsxs("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? _jsx("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ?
|
|
193
|
+
})() }), _jsxs("div", { className: "ss__chat__message-user__text-wrapper", children: [requestTypeLabel ? _jsx("div", { className: "ss__chat__message-user__request-type", children: requestTypeLabel }) : null, chatItem.text ? _jsx("div", { className: "ss__chat__message-user__text", children: chatItem.text }) : null] })] }) }));
|
|
195
194
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;
|
|
1
|
+
{"version":3,"file":"ResultsDisplay.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/ResultsDisplay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAgChE,eAAO,MAAM,cAAc,WAAoB,mBAAmB;;CAmFhE,CAAC;AAEH,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B"}
|
|
@@ -42,16 +42,21 @@ export const ResultsDisplay = observer((props) => {
|
|
|
42
42
|
// at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
|
|
43
43
|
const isConstrained = !isNarrow && isSideChatOpen && typeof window !== 'undefined' && window.innerWidth >= 768 && window.innerWidth <= 1200;
|
|
44
44
|
const slidesPerView = isNarrow || isConstrained ? 1.9 : 2.9;
|
|
45
|
-
const
|
|
45
|
+
const visibleSlides = Math.ceil(slidesPerView);
|
|
46
|
+
// When all results fit, use a whole-number slidesPerView so the last slide
|
|
47
|
+
// isn't clipped to a fraction; otherwise keep the fractional value to hint
|
|
48
|
+
// at additional content beyond the viewport.
|
|
49
|
+
const resolveSlidesPerView = (count) => (count <= visibleSlides ? count : slidesPerView);
|
|
50
|
+
const buildCarouselProps = (count) => ({
|
|
46
51
|
breakpoints: undefined,
|
|
47
|
-
slidesPerView,
|
|
52
|
+
slidesPerView: resolveSlidesPerView(count),
|
|
48
53
|
slidesPerGroup: isNarrow || isConstrained ? 2 : 3,
|
|
49
54
|
loop: false,
|
|
50
55
|
pagination: false,
|
|
51
56
|
centerInsufficientSlides: false,
|
|
52
57
|
freeMode: true,
|
|
53
58
|
styleScript: carouselStyleScript,
|
|
54
|
-
};
|
|
59
|
+
});
|
|
55
60
|
const handleResultClick = (e, result) => {
|
|
56
61
|
// buttons should be able to be clicked without triggering the product click
|
|
57
62
|
if (e.composedPath().some((el) => el instanceof HTMLElement && el.matches('button, .ss__button, a')))
|
|
@@ -62,12 +67,12 @@ export const ResultsDisplay = observer((props) => {
|
|
|
62
67
|
};
|
|
63
68
|
if (chatItem.messageType === 'productRecommendation' && chatItem.recommendationResult?.length) {
|
|
64
69
|
return (_jsx(_Fragment, { children: chatItem.recommendationResult.map((recommendation, index) => {
|
|
65
|
-
return recommendation.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...
|
|
70
|
+
return recommendation.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...buildCarouselProps(recommendation.results.length), hideButtons: recommendation.results.length <= visibleSlides, children: recommendation.results.map((result) => {
|
|
66
71
|
return (_jsx("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: (e) => handleResultClick(e, result), children: _jsx(ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
|
|
67
72
|
}) }) }, index)) : null;
|
|
68
73
|
}) }));
|
|
69
74
|
}
|
|
70
|
-
return chatItem.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...
|
|
75
|
+
return chatItem.results?.length > 0 ? (_jsx("div", { className: "ss__chat__message-text__results", style: { width: '100%' }, children: _jsx(Carousel, { ...buildCarouselProps(chatItem.results.length), hideButtons: chatItem.results.length <= visibleSlides, children: chatItem.results.map((result) => {
|
|
71
76
|
return (_jsx("div", { className: "ss__chat__message-text__results__result", style: { height: '100%', width: '100%', display: 'flex', cursor: 'pointer' }, onClick: (e) => handleResultClick(e, result), children: _jsx(ChatResult, { result: result, controller: controller, scrollToBottom: scrollToBottom }) }, result.id));
|
|
72
77
|
}) }) })) : null;
|
|
73
78
|
});
|
|
@@ -419,7 +419,7 @@ export const Facet = observer((properties) => {
|
|
|
419
419
|
? ''
|
|
420
420
|
: 'ss__facet--showing-all'), children: justContent ? (_jsx(FacetContent, { ...facetContentProps, mergedLang: mergedLang })) : (_jsx(Dropdown, { ...subProps.dropdown, open: disableCollapse || !facet?.collapsed, onClick: () => !disableCollapse && facet.toggleCollapse && facet?.toggleCollapse(), disableA11y: true, button: _jsxs("div", { className: "ss__facet__header", ref: (e) => useA11y(e, disableCollapse ? -1 : 0), role: "heading", "aria-level": 3, ...mergedLang.dropdownButton.attributes, children: [_jsxs("span", { className: "ss__facet__header__inner", children: [_jsx("span", { ...mergedLang.dropdownButton.value, children: facet?.label }), showSelectedCount && selectedCount && facet.type !== 'range' ? (_jsx("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : `(${selectedCount})` })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? (_jsx(Button, { ...subProps.button, internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: (e) => {
|
|
421
421
|
e.stopPropagation();
|
|
422
|
-
facet?.clear.url
|
|
422
|
+
facet?.clear.url?.link.onClick();
|
|
423
423
|
}, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? _jsx("label", { ...mergedLang.clearAllText.all }) : null })) : (_jsx(_Fragment, {}))] }), !disableCollapse && (_jsx(Icon, { ...subProps.icon, ...(facet?.collapsed
|
|
424
424
|
? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
|
|
425
425
|
: { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }), name: facet?.collapsed ? 'expand' : 'collapse' }))] }), children: _jsx(FacetContent, { ...facetContentProps, mergedLang: mergedLang }) })) }) })) : null;
|
|
@@ -237,7 +237,7 @@ export const FacetsHorizontal = observer((properties) => {
|
|
|
237
237
|
}
|
|
238
238
|
}, button: _jsxs("div", { className: "ss__dropdown__button__heading", ...mergedLang.dropdownButton.attributes, children: [_jsxs("div", { className: "ss__facet__header__inner", children: [_jsx("span", { ...mergedLang.dropdownButton.value, children: facet?.label }), showSelectedCount && selectedCount && facet.type !== 'range' ? (_jsx("span", { className: "ss__facet__header__selected-count", children: hideSelectedCountParenthesis ? selectedCount : `(${selectedCount})` })) : null, (mergedLang.clearAllText.value || clearAllIcon) && selectedCount ? (_jsx(Button, { ...subProps.button, internalClassName: "ss__facet__header__clear-all", name: 'reset-facet', onClick: (e) => {
|
|
239
239
|
e.stopPropagation();
|
|
240
|
-
facet?.clear.url
|
|
240
|
+
facet?.clear.url?.link.onClick();
|
|
241
241
|
}, icon: clearAllIcon ? clearAllIcon : undefined, children: mergedLang.clearAllText.value && showClearAllText ? _jsx("label", { ...mergedLang.clearAllText.all }) : null })) : (_jsx(_Fragment, {}))] }), _jsx(Icon, { ...subProps.icon, ...(selectedFacet?.field === facet.field
|
|
242
242
|
? { ...(typeof iconExpand == 'string' ? { icon: iconExpand } : iconExpand) }
|
|
243
243
|
: { ...(typeof iconCollapse == 'string' ? { icon: iconCollapse } : iconCollapse) }) })] }), disableOverlay: false, children: _jsx(Facet, { ...subProps.facet, facet: facet }) }));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@athoscommerce/snap-preact",
|
|
3
|
-
"version": "1.2.3-beta.
|
|
3
|
+
"version": "1.2.3-beta.4+cf2eeebec",
|
|
4
4
|
"description": "Snap Preact",
|
|
5
5
|
"main": "dist/cjs/src/index.js",
|
|
6
6
|
"module": "dist/esm/src/index.js",
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
"storybook": "storybook dev -c ./components/.storybook -p 6006"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@athoscommerce/snap-client": "1.2.3-beta.
|
|
30
|
-
"@athoscommerce/snap-controller": "1.2.3-beta.
|
|
31
|
-
"@athoscommerce/snap-event-manager": "1.2.3-beta.
|
|
32
|
-
"@athoscommerce/snap-logger": "1.2.3-beta.
|
|
33
|
-
"@athoscommerce/snap-platforms": "1.2.3-beta.
|
|
34
|
-
"@athoscommerce/snap-profiler": "1.2.3-beta.
|
|
35
|
-
"@athoscommerce/snap-store-mobx": "1.2.3-beta.
|
|
36
|
-
"@athoscommerce/snap-toolbox": "1.2.3-beta.
|
|
37
|
-
"@athoscommerce/snap-tracker": "1.2.3-beta.
|
|
38
|
-
"@athoscommerce/snap-url-manager": "1.2.3-beta.
|
|
29
|
+
"@athoscommerce/snap-client": "1.2.3-beta.4+cf2eeebec",
|
|
30
|
+
"@athoscommerce/snap-controller": "1.2.3-beta.4+cf2eeebec",
|
|
31
|
+
"@athoscommerce/snap-event-manager": "1.2.3-beta.4+cf2eeebec",
|
|
32
|
+
"@athoscommerce/snap-logger": "1.2.3-beta.4+cf2eeebec",
|
|
33
|
+
"@athoscommerce/snap-platforms": "1.2.3-beta.4+cf2eeebec",
|
|
34
|
+
"@athoscommerce/snap-profiler": "1.2.3-beta.4+cf2eeebec",
|
|
35
|
+
"@athoscommerce/snap-store-mobx": "1.2.3-beta.4+cf2eeebec",
|
|
36
|
+
"@athoscommerce/snap-toolbox": "1.2.3-beta.4+cf2eeebec",
|
|
37
|
+
"@athoscommerce/snap-tracker": "1.2.3-beta.4+cf2eeebec",
|
|
38
|
+
"@athoscommerce/snap-url-manager": "1.2.3-beta.4+cf2eeebec",
|
|
39
39
|
"@emotion/react": "11.13.0",
|
|
40
40
|
"classnames": "^2.3.2",
|
|
41
41
|
"color": "^4.2.3",
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
"require": "./dist/cjs/toolbox/src/index.js"
|
|
98
98
|
}
|
|
99
99
|
},
|
|
100
|
-
"gitHead": "
|
|
100
|
+
"gitHead": "cf2eeebec7baf5a7746dcd90c21bccd9a5b15544"
|
|
101
101
|
}
|