@athoscommerce/snap-preact 1.2.3-beta.2 → 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.
Files changed (35) hide show
  1. package/dist/cjs/components/src/components/Molecules/ChatInspirationResultMessage/ChatInspirationResultMessage.d.ts.map +1 -1
  2. package/dist/cjs/components/src/components/Molecules/ChatInspirationResultMessage/ChatInspirationResultMessage.js +4 -1
  3. package/dist/cjs/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.js +1 -1
  4. package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
  5. package/dist/cjs/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +8 -2
  6. package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts +1 -0
  7. package/dist/cjs/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
  8. package/dist/cjs/components/src/components/Organisms/Chat/Chat.js +238 -53
  9. package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.d.ts +2 -3
  10. package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.d.ts.map +1 -1
  11. package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.js +26 -7
  12. package/dist/cjs/components/src/components/Organisms/Chat/MessageUser.d.ts.map +1 -1
  13. package/dist/cjs/components/src/components/Organisms/Chat/MessageUser.js +54 -23
  14. package/dist/cjs/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map +1 -1
  15. package/dist/cjs/components/src/components/Organisms/Chat/ResultsDisplay.js +14 -6
  16. package/dist/cjs/components/src/components/Organisms/Facet/Facet.js +2 -1
  17. package/dist/cjs/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js +2 -1
  18. package/dist/esm/components/src/components/Molecules/ChatInspirationResultMessage/ChatInspirationResultMessage.d.ts.map +1 -1
  19. package/dist/esm/components/src/components/Molecules/ChatInspirationResultMessage/ChatInspirationResultMessage.js +4 -1
  20. package/dist/esm/components/src/components/Molecules/ChatProductComparisonMessage/ChatProductComparisonMessage.js +1 -1
  21. package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.d.ts.map +1 -1
  22. package/dist/esm/components/src/components/Molecules/ChatProductQueryMessage/ChatProductQueryMessage.js +8 -2
  23. package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts +1 -0
  24. package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts.map +1 -1
  25. package/dist/esm/components/src/components/Organisms/Chat/Chat.js +231 -49
  26. package/dist/esm/components/src/components/Organisms/Chat/ChatResult.d.ts +2 -3
  27. package/dist/esm/components/src/components/Organisms/Chat/ChatResult.d.ts.map +1 -1
  28. package/dist/esm/components/src/components/Organisms/Chat/ChatResult.js +26 -7
  29. package/dist/esm/components/src/components/Organisms/Chat/MessageUser.d.ts.map +1 -1
  30. package/dist/esm/components/src/components/Organisms/Chat/MessageUser.js +51 -21
  31. package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.d.ts.map +1 -1
  32. package/dist/esm/components/src/components/Organisms/Chat/ResultsDisplay.js +14 -6
  33. package/dist/esm/components/src/components/Organisms/Facet/Facet.js +1 -1
  34. package/dist/esm/components/src/components/Organisms/FacetsHorizontal/FacetsHorizontal.js +1 -1
  35. package/package.json +12 -12
package/dist/cjs/components/src/components/Organisms/Chat/Chat.js CHANGED
@@ -213,11 +213,11 @@ var defaultStyles = function (_a) {
213
213
  padding: '12px 16px',
214
214
  fontSize: '14px',
215
215
  color: '#333',
216
- boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
216
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
217
217
  cursor: 'pointer',
218
218
  lineHeight: 1.4,
219
219
  '&:hover': {
220
- boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
220
+ boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
221
221
  },
222
222
  },
223
223
  },
@@ -257,6 +257,7 @@ var defaultStyles = function (_a) {
257
257
  display: 'flex',
258
258
  '.ss__chat__header__title__logo': {
259
259
  height: '44px',
260
+ width: 'auto',
260
261
  },
261
262
  '.ss__chat__header__title__text': {
262
263
  display: 'flex',
@@ -427,7 +428,19 @@ var defaultStyles = function (_a) {
427
428
  borderBottomRightRadius: mobile ? 0 : '12px',
428
429
  borderBottomLeftRadius: mobile ? 0 : '12px',
429
430
  flexGrow: 1,
431
+ position: 'relative',
430
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
+ },
431
444
  // '.ss__chat__attachments': {
432
445
  // '.ss__chat__attachment': {
433
446
  // borderRadius: 0,
@@ -472,9 +485,9 @@ var defaultStyles = function (_a) {
472
485
  alignItems: 'stretch',
473
486
  '.ss__chat__content__header__comparisons__content__items': {
474
487
  display: 'flex',
475
- gap: '1em',
476
488
  flex: '1 1 calc(100% - 100px)',
477
489
  justifyContent: 'space-between',
490
+ gap: '0.5em',
478
491
  },
479
492
  '.ss__chat__content__header__comparisons__content__comparison': {
480
493
  background: '#fff',
@@ -483,7 +496,7 @@ var defaultStyles = function (_a) {
483
496
  display: 'flex',
484
497
  flexDirection: 'column',
485
498
  gap: '0.5em',
486
- flex: '0 1 20%',
499
+ flex: '0 1 25%',
487
500
  position: 'relative',
488
501
  '&.ss__chat__content__header__comparisons__content__comparison--placeholder': {
489
502
  border: '2px dashed #ddd',
@@ -548,6 +561,32 @@ var defaultStyles = function (_a) {
548
561
  '.ss__chat__messages__end': {
549
562
  height: '1px',
550
563
  },
564
+ '.ss__chat__new-messages': {
565
+ position: 'sticky',
566
+ bottom: '10px',
567
+ display: 'flex',
568
+ alignItems: 'center',
569
+ justifyContent: 'center',
570
+ gap: '6px',
571
+ margin: '0 auto',
572
+ width: 'fit-content',
573
+ padding: '6px 16px',
574
+ background: colorPrimary,
575
+ color: '#fff',
576
+ borderRadius: '999px',
577
+ fontSize: '13px',
578
+ fontWeight: 500,
579
+ cursor: 'pointer',
580
+ boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
581
+ zIndex: 5,
582
+ '&:hover': {
583
+ background: '#1a2a5c',
584
+ },
585
+ svg: {
586
+ fill: '#fff',
587
+ stroke: '#fff',
588
+ },
589
+ },
551
590
  '.ss__chat__message': {
552
591
  marginBottom: '30px',
553
592
  ul: {
@@ -574,7 +613,7 @@ var defaultStyles = function (_a) {
574
613
  '.ss__chat__welcome': {
575
614
  display: 'flex',
576
615
  flexDirection: 'column',
577
- height: '100%',
616
+ minHeight: '100%',
578
617
  '.ss__chat__welcome__message': {
579
618
  fontSize: '15px',
580
619
  lineHeight: 1.5,
@@ -712,13 +751,19 @@ var defaultStyles = function (_a) {
712
751
  display: 'flex',
713
752
  justifyContent: 'flex-end',
714
753
  padding: '0 2px',
754
+ // reserve the slot so toggling the button's visibility doesn't reflow the header
755
+ visibility: 'hidden',
756
+ '&.ss__chat__actions__facets-apply--active': {
757
+ visibility: 'visible',
758
+ },
715
759
  '.ss__button': {
716
760
  background: '#253B80',
717
761
  color: '#fff',
718
762
  border: 'none',
719
763
  borderRadius: '999px',
720
- padding: '6px 16px',
721
- fontSize: '14px',
764
+ padding: '2px 10px',
765
+ fontSize: '12px',
766
+ lineHeight: '1.4',
722
767
  cursor: 'pointer',
723
768
  '&:not(.ss__button--disabled):hover': {
724
769
  background: '#1a2a5c',
@@ -956,6 +1001,7 @@ var defaultStyles = function (_a) {
956
1001
  padding: '0.5em 0',
957
1002
  margin: '0 0 0 1em',
958
1003
  flex: '1 0 auto',
1004
+ border: 'none',
959
1005
  '&::placeholder': {
960
1006
  color: '#999',
961
1007
  opacity: 0.7,
@@ -1014,9 +1060,10 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1014
1060
  title: 'Athos Conversational Assistant',
1015
1061
  subtitle: 'Ready to assist you',
1016
1062
  multiselectFacets: true,
1063
+ disableBubbleSuggestedQuestions: false,
1017
1064
  };
1018
1065
  var props = (0, utilities_1.mergeProps)('facets', globalTheme, defaultProps, properties);
1019
- 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;
1020
1067
  var store = controller.store;
1021
1068
  var themeDefaults = {
1022
1069
  components: {},
@@ -1027,6 +1074,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1027
1074
  var fileInputRef = (0, hooks_1.useRef)(null);
1028
1075
  var messagesEndRef = (0, hooks_1.useRef)(null);
1029
1076
  var messagesContainerRef = (0, hooks_1.useRef)(null);
1077
+ var headerRef = (0, hooks_1.useRef)(null);
1030
1078
  var footerRef = (0, hooks_1.useRef)(null);
1031
1079
  // Swipe-to-dismiss state for mobile secondary panel
1032
1080
  var secondaryRef = (0, hooks_1.useRef)(null);
@@ -1038,23 +1086,126 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1038
1086
  var _z = (0, hooks_1.useState)(false), swipeAnimating = _z[0], setSwipeAnimating = _z[1];
1039
1087
  var _0 = (0, hooks_1.useState)(false), mobileProductInfoOpen = _0[0], setMobileProductInfoOpen = _0[1];
1040
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];
1091
+ var isNearBottomRef = (0, hooks_1.useRef)(true);
1041
1092
  var updateSwipeOffset = function (value) {
1042
1093
  swipeOffsetRef.current = value;
1043
1094
  setSwipeOffsetRaw(value);
1044
1095
  };
1045
1096
  var scrollToBottom = function () {
1046
- var _a;
1047
- (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
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
+ }
1105
+ };
1106
+ // Conditional scroll: only scrolls if the user is already near the bottom.
1107
+ // Passed to child components (e.g. image onLoad) so they don't yank the user
1108
+ // back to the bottom when they have scrolled up to read older messages.
1109
+ var scrollToBottomIfNear = function () {
1110
+ if (isNearBottomRef.current) {
1111
+ scrollToBottom();
1112
+ }
1048
1113
  };
1049
- // Auto-scroll to bottom when new messages are added or chat state changes
1114
+ // productQuery messages are filtered out of the main chat render (they only drive the side-chat panel),
1115
+ // so don't auto-scroll when one is added — otherwise clicking a product in the side chat scrolls the main thread.
1116
+ var visibleChatLength = (((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.chat) || []).filter(function (m) { return m.messageType !== 'productQuery'; }).length;
1117
+ // Scroll to bottom when chat opens
1050
1118
  (0, hooks_1.useEffect)(function () {
1051
- // if (store.open && messagesContainerRef.current) {
1052
- // messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
1053
- // }
1054
1119
  if (store.open) {
1055
1120
  scrollToBottom();
1121
+ setShowNewMessages(false);
1122
+ isNearBottomRef.current = true;
1123
+ }
1124
+ }, [store.open]);
1125
+ // Handle new messages — auto-scroll for user messages, show popup for response messages when scrolled up
1126
+ (0, hooks_1.useEffect)(function () {
1127
+ var _a;
1128
+ if (!store.open)
1129
+ return;
1130
+ var chat = ((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.chat) || [];
1131
+ var visibleChat = chat.filter(function (m) { return m.messageType !== 'productQuery'; });
1132
+ var lastMessage = visibleChat[visibleChat.length - 1];
1133
+ if (!lastMessage)
1134
+ return;
1135
+ if (lastMessage.messageType === 'user') {
1136
+ scrollToBottom();
1137
+ setShowNewMessages(false);
1138
+ }
1139
+ else {
1140
+ if (isNearBottomRef.current) {
1141
+ scrollToBottom();
1142
+ setShowNewMessages(false);
1143
+ }
1144
+ else {
1145
+ setShowNewMessages(true);
1146
+ }
1147
+ }
1148
+ }, [visibleChatLength]);
1149
+ // Scroll to show loading indicator when user sends a message
1150
+ (0, hooks_1.useEffect)(function () {
1151
+ if (store.open && store.loading) {
1152
+ scrollToBottom();
1153
+ }
1154
+ }, [store.loading]);
1155
+ // Track scroll position to dismiss the "New messages" popup when user scrolls to bottom
1156
+ (0, hooks_1.useEffect)(function () {
1157
+ var container = messagesContainerRef.current;
1158
+ if (!container)
1159
+ return;
1160
+ var handleScroll = function () {
1161
+ var threshold = 100;
1162
+ var isNearBottom = container.scrollHeight - container.scrollTop - container.clientHeight < threshold;
1163
+ isNearBottomRef.current = isNearBottom;
1164
+ if (isNearBottom) {
1165
+ setShowNewMessages(false);
1166
+ }
1167
+ };
1168
+ container.addEventListener('scroll', handleScroll);
1169
+ return function () { return container.removeEventListener('scroll', handleScroll); };
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]);
1201
+ // Re-focus the chat input on desktop after a search completes.
1202
+ // The input is disabled while loading, which causes the browser to drop focus.
1203
+ // On mobile we intentionally skip this so the virtual keyboard dismisses.
1204
+ (0, hooks_1.useEffect)(function () {
1205
+ if (!store.loading && !isMobile && store.open) {
1206
+ controller.focusInput();
1056
1207
  }
1057
- }, [(_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.chat.length, store.loading, store.open]);
1208
+ }, [store.loading]);
1058
1209
  // const subProps: ChatSubProps = {};
1059
1210
  var activeMessage = (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.activeMessage;
1060
1211
  // On mobile, only auto-open the secondary panel for the first productComparison
@@ -1121,6 +1272,28 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1121
1272
  return text.length > 50 ? "".concat(text.slice(0, 50), "...") : text;
1122
1273
  })() }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__history__chat__button__date", children: chat.createdAt.toLocaleString() })] }) }, chat.id)); }) })) : null] })); };
1123
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
+ };
1124
1297
  // TODO: if starting a new chat and it's expired, this button would then disappear
1125
1298
  if (!controller.store.chatEnabled) {
1126
1299
  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
@@ -1211,7 +1384,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1211
1384
  'ss__chat--open': store.open,
1212
1385
  'ss__chat--minimized': !store.open,
1213
1386
  'ss__chat--mobile': isMobile,
1214
- }, 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 () {
1215
1388
  controller.openChat(question);
1216
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
1217
1390
  ? {
@@ -1225,8 +1398,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1225
1398
  productQuery: 'Product Information',
1226
1399
  }[activeMessage.messageType] || null }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__header__title__secondary", children: {
1227
1400
  inspirationResult: 'Choose a style direction to explore',
1228
- productComparison: "Comparing ".concat(((_g = activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.comparisonData) === null || _g === void 0 ? void 0 : _g.features.length) ||
1229
- ((_h = activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.searchResults) === null || _h === void 0 ? void 0 : _h.length), " products"),
1401
+ productComparison: "Comparing ".concat(((_g = activeMessage === null || activeMessage === void 0 ? void 0 : activeMessage.searchResults) === null || _g === void 0 ? void 0 : _g.length) || '', " products"),
1230
1402
  productQuery: 'Complete product details',
1231
1403
  }[activeMessage.messageType] || null })] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__header__buttons", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { className: "ss__chat__header__button--close", icon: { icon: 'close2', title: 'Close Chat' }, onClick: function () {
1232
1404
  var _a, _b;
@@ -1244,7 +1416,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1244
1416
  } }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__content", children: (0, jsx_runtime_1.jsx)("div", { className: 'ss__chat__messages', children: {
1245
1417
  inspirationResult: ((0, jsx_runtime_1.jsx)(ChatInspirationResultMessage_1.ChatInspirationResultMessage, { chatItem: activeMessage, controller: controller, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined })),
1246
1418
  productComparison: ((0, jsx_runtime_1.jsx)(ChatProductComparisonMessage_1.ChatProductComparisonMessage, { chatItem: activeMessage, controller: controller })),
1247
- productQuery: ((0, jsx_runtime_1.jsx)(ChatProductQueryMessage_1.ChatProductQueryMessage, { chatItem: activeMessage, controller: controller, displayFields: (_j = controller.config.settings) === null || _j === void 0 ? void 0 : _j.displayFields })),
1419
+ productQuery: ((0, jsx_runtime_1.jsx)(ChatProductQueryMessage_1.ChatProductQueryMessage, { chatItem: activeMessage, controller: controller, displayFields: (_h = controller.config.settings) === null || _h === void 0 ? void 0 : _h.displayFields })),
1248
1420
  }[activeMessage.messageType] || null }) })] })) : null, store.open ? ((0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__primary', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'ss__chat__header', children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__header__title", children: [logo ? (0, jsx_runtime_1.jsx)("img", { className: "ss__chat__header__title__logo", src: logo }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__header__title__text", children: [title ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__header__title__text__primary", children: title }) : null, subtitle ? (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__header__title__text__secondary", children: subtitle }) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__header__buttons", children: [(0, jsx_runtime_1.jsx)(Button_1.Button
1249
1421
  // disabled={store.currentChat?.chat && store.currentChat.chat.length <= 1}
1250
1422
  , {
@@ -1265,7 +1437,9 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1265
1437
  store.currentChat.save();
1266
1438
  }
1267
1439
  }, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: "close-thin", size: "14px" }) }))] })) : null;
1268
- })(), (0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__chat__content__header", children: ((_k = store.currentChat) === null || _k === void 0 ? void 0 : _k.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 (", (_l = store.currentChat) === null || _l === void 0 ? void 0 : _l.comparisons.compared.length, "/", (_m = store.currentChat) === null || _m === void 0 ? void 0 : _m.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: (_o = store.currentChat) === null || _o === void 0 ? void 0 : _o.comparisons.maxItems }).map(function (_, index) {
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) {
1269
1443
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1270
1444
  var comparisonItem = (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.compared[index];
1271
1445
  return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__content__comparison', {
@@ -1283,14 +1457,14 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1283
1457
  (_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.comparisons.remove(comparisonItem.result.id);
1284
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));
1285
1459
  }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__content__header__comparisons__action', {
1286
- 'ss__chat__content__header__comparisons__action--hidden': (((_p = store.currentChat) === null || _p === void 0 ? void 0 : _p.comparisons.compared.length) || 0) < 2,
1287
- }), 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, children: [(!((_q = store.currentChat) === null || _q === void 0 ? void 0 : _q.chat) || store.currentChat.chat.length === 0) && store.welcomeMessage && ((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: {
1460
+ 'ss__chat__content__header__comparisons__action--hidden': (((_o = store.currentChat) === null || _o === void 0 ? void 0 : _o.comparisons.compared.length) || 0) < 2,
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: {
1288
1462
  user: ((0, jsx_runtime_1.jsx)(MessageUser_1.MessageUser, { chatItem: chatItem, controller: controller, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined })),
1289
- text: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1290
- content: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1291
- productSearchResult: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1292
- inspirationResult: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1293
- productAnswer: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
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 })),
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 })),
1465
+ productSearchResult: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1466
+ inspirationResult: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1467
+ productAnswer: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1294
1468
  productComparison: (function () {
1295
1469
  var _a;
1296
1470
  // On mobile, only the first productComparison in the session
@@ -1298,25 +1472,31 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1298
1472
  // prominent "Show Details" button instead.
1299
1473
  var comparisonMessages = (((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.chat) || []).filter(function (m) { return m.messageType === 'productComparison'; });
1300
1474
  var isFirst = comparisonMessages.length > 0 && comparisonMessages[0].id === chatItem.id;
1301
- return ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, showDetailsButton: isMobile && !isFirst, sideChatOpen: !!shouldShowSideChat }));
1475
+ return ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, showDetailsButton: isMobile && !isFirst, sideChatOpen: !!shouldShowSideChat }));
1302
1476
  })(),
1303
- productRecommendation: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1477
+ productRecommendation: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, onViewProduct: isMobile ? function () { return setMobileProductInfoOpen(true); } : undefined, sideChatOpen: !!shouldShowSideChat })),
1304
1478
  actions: (0, jsx_runtime_1.jsx)(SuggestedQuestions_1.SuggestedQuestions, { actions: chatItem.actions, controller: controller }),
1305
- errorResponse: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, sideChatOpen: !!shouldShowSideChat })),
1306
- topicDrift: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottom, sideChatOpen: !!shouldShowSideChat })),
1479
+ errorResponse: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
1480
+ topicDrift: ((0, jsx_runtime_1.jsx)(MessageText_1.MessageText, { chatItem: chatItem, controller: controller, scrollToBottom: scrollToBottomIfNear, sideChatOpen: !!shouldShowSideChat })),
1307
1481
  productQuery: null,
1308
- }[chatItem.messageType] || null }, index)); }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__messages__end", ref: messagesEndRef })] }), (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 () {
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 () {
1483
+ scrollToBottom();
1484
+ setShowNewMessages(false);
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 () {
1309
1486
  controller.store.createChat();
1310
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) {
1311
- var _a;
1488
+ var _a, _b;
1312
1489
  return ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__wrap", children: {
1313
- 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 && (((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached.some(function (item) { return item.type === 'facet'; })) || false) && ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facets-apply", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
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)
1492
+ ? ' ss__chat__actions__facets-apply--active'
1493
+ : ''), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
1314
1494
  controller.search();
1315
- }, children: "Apply Filters" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--facets", children: action.data.slice(0, 10).map(function (facet, idx) {
1495
+ }, children: "Apply" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--facets", children: action.data.slice(0, 10).map(function (facet, idx) {
1316
1496
  var _a;
1317
1497
  if (!((_a = facet.values) === null || _a === void 0 ? void 0 : _a.length))
1318
1498
  return null;
1319
- 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.label || facet.field }), style: {
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: {
1320
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
1321
1501
  ? {
1322
1502
  '.ss__chat__actions__facet__option--checkbox': {
@@ -1373,9 +1553,11 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1373
1553
  }, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions__facet__options", children: facet.type === 'range-buckets'
1374
1554
  ? facet.values.map(function (option) {
1375
1555
  var _a, _b;
1376
- var optionValue = "".concat((_a = option.low) !== null && _a !== void 0 ? _a : '*', ":").concat((_b = option.high) !== null && _b !== void 0 ? _b : '*');
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 : '*');
1377
1558
  if (multiselectFacets) {
1378
- var isSelected_1 = controller.store.isFacetSelected(facet.field, optionValue);
1559
+ var isSelected_1 = (rangeOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
1560
+ controller.store.isFacetSelected(facet.field, optionValue);
1379
1561
  return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
1380
1562
  if (isSelected_1) {
1381
1563
  controller.store.removeFacet(facet.field, optionValue);
@@ -1385,29 +1567,31 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1385
1567
  key: facet.field,
1386
1568
  facetLabel: facet.label,
1387
1569
  value: optionValue,
1388
- label: option.label,
1389
- count: option.count,
1570
+ label: rangeOption.label,
1571
+ count: rangeOption.count,
1390
1572
  });
1391
1573
  }
1392
1574
  }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
1393
1575
  'ss__chat__actions__facet__option__checkbox--checked': isSelected_1,
1394
- }), 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: option.label })] }, optionValue));
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));
1395
1577
  }
1396
1578
  return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
1397
1579
  controller.store.addFacet({
1398
1580
  key: facet.field,
1399
1581
  facetLabel: facet.label,
1400
1582
  value: optionValue,
1401
- label: option.label,
1402
- count: option.count,
1583
+ label: rangeOption.label,
1584
+ count: rangeOption.count,
1403
1585
  });
1404
1586
  controller.search();
1405
- }, children: option.label }, optionValue));
1587
+ }, children: rangeOption.label }, optionValue));
1406
1588
  })
1407
1589
  : facet.values.map(function (option) {
1408
- var optionValue = option.value || option.label;
1590
+ var valueOption = option;
1591
+ var optionValue = valueOption.value || valueOption.label;
1409
1592
  if (multiselectFacets) {
1410
- var isSelected_2 = controller.store.isFacetSelected(facet.field, optionValue);
1593
+ var isSelected_2 = (valueOption.filtered && !controller.store.isFacetRemoved(facet.field, optionValue)) ||
1594
+ controller.store.isFacetSelected(facet.field, optionValue);
1411
1595
  return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__chat__actions__facet__option--checkbox", onClick: function () {
1412
1596
  if (isSelected_2) {
1413
1597
  controller.store.removeFacet(facet.field, optionValue);
@@ -1417,24 +1601,24 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1417
1601
  key: facet.field,
1418
1602
  facetLabel: facet.label,
1419
1603
  value: optionValue,
1420
- label: option.label,
1421
- count: option.count,
1604
+ label: valueOption.label,
1605
+ count: valueOption.count,
1422
1606
  });
1423
1607
  }
1424
1608
  }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat__actions__facet__option__checkbox', {
1425
1609
  'ss__chat__actions__facet__option__checkbox--checked': isSelected_2,
1426
- }), 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: option.label })] }, optionValue));
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));
1427
1611
  }
1428
1612
  return ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: function () {
1429
1613
  controller.store.addFacet({
1430
1614
  key: facet.field,
1431
1615
  facetLabel: facet.label,
1432
1616
  value: optionValue,
1433
- label: option.label,
1434
- count: option.count,
1617
+ label: valueOption.label,
1618
+ count: valueOption.count,
1435
1619
  });
1436
1620
  controller.search();
1437
- }, children: option.label }, optionValue));
1621
+ }, children: valueOption.label }, optionValue));
1438
1622
  }) }) }, facet.field) }, idx));
1439
1623
  }) })] })) : null,
1440
1624
  actions: ((0, jsx_runtime_1.jsx)("div", { className: "ss__chat__actions--suggested" })),
@@ -1558,6 +1742,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1558
1742
  var messageText = (_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.handleTopicDrift();
1559
1743
  if (messageText) {
1560
1744
  controller.store.createChat();
1745
+ controller.search({ data: { message: messageText } });
1561
1746
  }
1562
1747
  }, children: buttonText })), (0, jsx_runtime_1.jsx)("span", { onClick: function () {
1563
1748
  var _a;
@@ -1606,7 +1791,7 @@ exports.Chat = (0, mobx_react_lite_1.observer)(function (properties) {
1606
1791
  var _a, _b;
1607
1792
  var hasImageAttachment = (((_a = store.currentChat) === null || _a === void 0 ? void 0 : _a.attachments.attached) || []).some(function (item) { return item.type === 'image' && !item.error; });
1608
1793
  var messageEmpty = !controller.store.inputValue.trim();
1609
- var sendDisabled = store.blocked || ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.sessionLimitReached) || (hasImageAttachment && messageEmpty);
1794
+ var sendDisabled = store.blocked || ((_b = store.currentChat) === null || _b === void 0 ? void 0 : _b.sessionLimitReached) || (hasImageAttachment && messageEmpty) || messageEmpty;
1610
1795
  return ((0, jsx_runtime_1.jsx)(Button_1.Button, { className: "ss__chat__send-button", icon: { icon: 'send', title: 'Send Message' }, disabled: sendDisabled, onClick: function () {
1611
1796
  if (sendDisabled)
1612
1797
  return;
package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.d.ts CHANGED
@@ -1,12 +1,11 @@
1
1
  import { ChatController } from '@athoscommerce/snap-controller';
2
2
  import { Product } from '@athoscommerce/snap-store-mobx';
3
3
  import { ComponentProps } from '../../../types';
4
- export declare const ChatResult: ((properties: ChatResultProps) => JSX.Element) & {
5
- displayName: string;
6
- };
4
+ export declare const ChatResult: (props: ChatResultProps) => import("@emotion/react/jsx-runtime").JSX.Element;
7
5
  export interface ChatResultProps extends ComponentProps {
8
6
  result: Product;
9
7
  controller: ChatController;
10
8
  scrollToBottom: () => void;
9
+ trackingRef?: (el: HTMLElement | null) => void;
11
10
  }
12
11
  //# sourceMappingURL=ChatResult.d.ts.map
package/dist/cjs/components/src/components/Organisms/Chat/ChatResult.d.ts.map CHANGED
@@ -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;AAyG7D,eAAO,MAAM,UAAU,gBAAyB,eAAe,KAAG,GAAG,CAAC,OAAO;;CAiG3E,CAAC;AAMH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC3B"}
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"}