Carousel Messages and Quick Replies

docs/webchat.md

@@ -102,6 +102,20 @@ The webchat emits the following events which can be listened to, to add an event
 }
 ```
 
+The payload may contain additional information about the product card clicked from a carousel message, the following
+is an example of a payload of a card click
+
+```javascript
+{
+  id: 'xxxxxx'
+  body: 'The message the client sent',
+  attachments: [], // An array of File objects associated with the card
+  replied_to: 'xxxx', // The ID of the message that was replied to by the button click.
+  product: 'xxxx', // The ID of the product associated with the cart. You can fetch information about the product in https://www.hellotext.com/api#products
+  button: 'xxxx' // The ID of the button that was clicked.
+}
+```
+
 - `webchat:message:received` - Emitted when a message is received by the webchat from Hellotext. The message is passed as an argument to the callback, containing the following properties
 
 ```javascript

lib/controllers/message_controller.cjs

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _stimulus = require("@hotwired/stimulus");
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+let _default = /*#__PURE__*/function (_Controller) {
+  _inherits(_default, _Controller);
+  var _super = _createSuper(_default);
+  function _default() {
+    _classCallCheck(this, _default);
+    return _super.apply(this, arguments);
+  }
+  _createClass(_default, [{
+    key: "connect",
+    value: function connect() {
+      this.updateFades();
+    }
+  }, {
+    key: "setId",
+    value: function setId({
+      detail: id
+    }) {
+      this.idValue = id;
+      this.element.id = id;
+    }
+  }, {
+    key: "onScroll",
+    value: function onScroll() {
+      this.updateFades();
+    }
+  }, {
+    key: "quickReply",
+    value: function quickReply({
+      currentTarget
+    }) {
+      const card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]');
+      this.dispatch('quickReply', {
+        detail: {
+          id: this.idValue,
+          product: card.dataset.id,
+          buttonId: currentTarget.dataset.id,
+          body: currentTarget.dataset.text,
+          cardElement: card
+        }
+      });
+    }
+  }, {
+    key: "moveToLeft",
+    value: function moveToLeft() {
+      if (!this.hasCarouselContainerTarget) return;
+      const scrollAmount = this.getScrollAmount();
+      this.carouselContainerTarget.scrollBy({
+        left: -scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  }, {
+    key: "moveToRight",
+    value: function moveToRight() {
+      if (!this.hasCarouselContainerTarget) return;
+      const scrollAmount = this.getScrollAmount();
+      this.carouselContainerTarget.scrollBy({
+        left: scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  }, {
+    key: "getScrollAmount",
+    value: function getScrollAmount() {
+      // Get the actual card width from DOM
+      const firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card');
+      if (!firstCard) {
+        return 280; // Fallback to default desktop card width
+      }
+
+      const cardWidth = firstCard.offsetWidth;
+      const gap = 16; // gap-x-4 = 1rem = 16px
+
+      return cardWidth + gap;
+    }
+  }, {
+    key: "updateFades",
+    value: function updateFades() {
+      if (!this.hasCarouselContainerTarget) return;
+      const scrollLeft = this.carouselContainerTarget.scrollLeft;
+      const maxScroll = this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth;
+
+      // Show left fade if scrolled past start
+      if (scrollLeft > 0) {
+        this.leftFadeTarget.classList.remove('hidden');
+      } else {
+        this.leftFadeTarget.classList.add('hidden');
+      }
+
+      // Show right fade if not at end
+      if (scrollLeft < maxScroll - 1) {
+        // -1 for rounding errors
+        this.rightFadeTarget.classList.remove('hidden');
+      } else {
+        this.rightFadeTarget.classList.add('hidden');
+      }
+    }
+  }]);
+  return _default;
+}(_stimulus.Controller);
+exports.default = _default;
+_default.values = {
+  id: String
+};
+_default.targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard'];

lib/controllers/message_controller.js

@@ -0,0 +1,120 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+import { Controller } from '@hotwired/stimulus';
+var _default = /*#__PURE__*/function (_Controller) {
+  _inherits(_default, _Controller);
+  var _super = _createSuper(_default);
+  function _default() {
+    _classCallCheck(this, _default);
+    return _super.apply(this, arguments);
+  }
+  _createClass(_default, [{
+    key: "connect",
+    value: function connect() {
+      this.updateFades();
+    }
+  }, {
+    key: "setId",
+    value: function setId(_ref) {
+      var {
+        detail: id
+      } = _ref;
+      this.idValue = id;
+      this.element.id = id;
+    }
+  }, {
+    key: "onScroll",
+    value: function onScroll() {
+      this.updateFades();
+    }
+  }, {
+    key: "quickReply",
+    value: function quickReply(_ref2) {
+      var {
+        currentTarget
+      } = _ref2;
+      var card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]');
+      this.dispatch('quickReply', {
+        detail: {
+          id: this.idValue,
+          product: card.dataset.id,
+          buttonId: currentTarget.dataset.id,
+          body: currentTarget.dataset.text,
+          cardElement: card
+        }
+      });
+    }
+  }, {
+    key: "moveToLeft",
+    value: function moveToLeft() {
+      if (!this.hasCarouselContainerTarget) return;
+      var scrollAmount = this.getScrollAmount();
+      this.carouselContainerTarget.scrollBy({
+        left: -scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  }, {
+    key: "moveToRight",
+    value: function moveToRight() {
+      if (!this.hasCarouselContainerTarget) return;
+      var scrollAmount = this.getScrollAmount();
+      this.carouselContainerTarget.scrollBy({
+        left: scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  }, {
+    key: "getScrollAmount",
+    value: function getScrollAmount() {
+      // Get the actual card width from DOM
+      var firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card');
+      if (!firstCard) {
+        return 280; // Fallback to default desktop card width
+      }
+
+      var cardWidth = firstCard.offsetWidth;
+      var gap = 16; // gap-x-4 = 1rem = 16px
+
+      return cardWidth + gap;
+    }
+  }, {
+    key: "updateFades",
+    value: function updateFades() {
+      if (!this.hasCarouselContainerTarget) return;
+      var scrollLeft = this.carouselContainerTarget.scrollLeft;
+      var maxScroll = this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth;
+
+      // Show left fade if scrolled past start
+      if (scrollLeft > 0) {
+        this.leftFadeTarget.classList.remove('hidden');
+      } else {
+        this.leftFadeTarget.classList.add('hidden');
+      }
+
+      // Show right fade if not at end
+      if (scrollLeft < maxScroll - 1) {
+        // -1 for rounding errors
+        this.rightFadeTarget.classList.remove('hidden');
+      } else {
+        this.rightFadeTarget.classList.add('hidden');
+      }
+    }
+  }]);
+  return _default;
+}(Controller);
+_default.values = {
+  id: String
+};
+_default.targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard'];
+export { _default as default };