@eshal-bot/chat-widget 0.1.104 → 0.1.106

package/dist/chat-widget.esm.js

@@ -1 +1 @@
-export{S as default}from"./chat-widget-index-DpoyZhy6.esm.js";import"react";import"react-dom/client";import"react-dom";import"react/jsx-runtime";
+export{S as default}from"./chat-widget-index-Ccm0r0y5.esm.js";import"react";import"react-dom/client";import"react-dom";import"react/jsx-runtime";

package/dist/chat-widget.js

@@ -17196,8 +17196,11 @@
       questionDisplay = true
     } = _ref;
     const scrollRef = reactExports.useRef(null);
-    const [canScrollLeft, setCanScrollLeft] = reactExports.useState(false);
-    const [canScrollRight, setCanScrollRight] = reactExports.useState(false);
+    // EV-2993: these are LOGICAL, not physical - "can I go back toward the
+    // start of the strip" / "on toward its end". `scrollLeft` counts down
+    // from 0 in an RTL container, hence Math.abs.
+    const [canScrollToStart, setCanScrollToStart] = reactExports.useState(false);
+    const [canScrollToEnd, setCanScrollToEnd] = reactExports.useState(false);
     const updateScrollState = reactExports.useCallback(() => {
       const el = scrollRef.current;
       if (!el) return;
@@ -17206,8 +17209,8 @@
         scrollWidth,
         clientWidth
       } = el;
-      setCanScrollLeft(Math.abs(scrollLeft) > 1);
-      setCanScrollRight(Math.abs(scrollLeft) + clientWidth < scrollWidth - 1);
+      setCanScrollToStart(Math.abs(scrollLeft) > 1);
+      setCanScrollToEnd(Math.abs(scrollLeft) + clientWidth < scrollWidth - 1);
     }, []);
     reactExports.useEffect(() => {
       updateScrollState();
@@ -17217,10 +17220,10 @@
       observer.observe(el);
       return () => observer.disconnect();
     }, [updateScrollState, suggestions]);
-    const scroll = reactExports.useCallback(direction => {
+    const scroll = reactExports.useCallback(toward => {
       const el = scrollRef.current;
       if (!el) return;
-      const amount = direction === "left" ? -SCROLL_AMOUNT$1 : SCROLL_AMOUNT$1;
+      const amount = toward === "start" ? -SCROLL_AMOUNT$1 : SCROLL_AMOUNT$1;
       el.scrollBy({
         left: isRtl ? -amount : amount,
         behavior: "smooth"
@@ -17230,25 +17233,40 @@
     const arrowColor = isDark ? "#e5e7eb" : "#374151";
     const arrowBorder = isDark ? "#4b5563" : "#d1d5db";
     const arrowDisabledOpacity = 0.35;
+
+    // EV-2993: the two nav buttons are LOGICAL - "back toward the start of
+    // the strip" and "on toward its end" - and DOM order (start first)
+    // already lands them on the correct physical edges, because the row is
+    // a flex container that reverses under dir="rtl". What never reversed
+    // was the presentation: both buttons kept a hard-coded chevron glyph
+    // and a hard-coded scrollLeft/scrollRight label, so an RTL tenant saw
+    // a LEFT-pointing chevron sitting on the RIGHT edge that scrolled the
+    // content rightward. Mirror glyph and label off the SAME `isRtl` the
+    // scroll maths above uses, so the arrow can never disagree with the
+    // nudge it triggers. LTR rendering is unchanged.
+    const StartChevron = isRtl ? ChevronRight : ChevronLeft;
+    const EndChevron = isRtl ? ChevronLeft : ChevronRight;
+    const startArrowLabel = t(isRtl ? "scrollRight" : "scrollLeft");
+    const endArrowLabel = t(isRtl ? "scrollLeft" : "scrollRight");
     return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
       className: "mb-2 px-5",
       children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
         className: "flex items-center gap-1.5",
         children: [/*#__PURE__*/jsxRuntimeExports.jsx("button", {
           type: "button",
-          onClick: () => scroll("left"),
-          disabled: !canScrollLeft,
-          "aria-label": t("scrollLeft"),
+          onClick: () => scroll("start"),
+          disabled: !canScrollToStart,
+          "aria-label": startArrowLabel,
           className: "flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-full shadow-sm transition-all duration-200 hover:shadow-md active:scale-95",
           style: {
             backgroundColor: arrowBg,
             border: "1px solid ".concat(arrowBorder),
             color: arrowColor,
             backdropFilter: "blur(4px)",
-            opacity: canScrollLeft ? 1 : arrowDisabledOpacity,
-            cursor: canScrollLeft ? "pointer" : "default"
+            opacity: canScrollToStart ? 1 : arrowDisabledOpacity,
+            cursor: canScrollToStart ? "pointer" : "default"
           },
-          children: /*#__PURE__*/jsxRuntimeExports.jsx(ChevronLeft, {
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(StartChevron, {
             size: 16
           })
         }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
@@ -17293,19 +17311,19 @@
           })
         }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
           type: "button",
-          onClick: () => scroll("right"),
-          disabled: !canScrollRight,
-          "aria-label": t("scrollRight"),
+          onClick: () => scroll("end"),
+          disabled: !canScrollToEnd,
+          "aria-label": endArrowLabel,
           className: "flex-shrink-0 flex items-center justify-center w-7 h-7 rounded-full shadow-sm transition-all duration-200 hover:shadow-md active:scale-95",
           style: {
             backgroundColor: arrowBg,
             border: "1px solid ".concat(arrowBorder),
             color: arrowColor,
             backdropFilter: "blur(4px)",
-            opacity: canScrollRight ? 1 : arrowDisabledOpacity,
-            cursor: canScrollRight ? "pointer" : "default"
+            opacity: canScrollToEnd ? 1 : arrowDisabledOpacity,
+            cursor: canScrollToEnd ? "pointer" : "default"
           },
-          children: /*#__PURE__*/jsxRuntimeExports.jsx(ChevronRight, {
+          children: /*#__PURE__*/jsxRuntimeExports.jsx(EndChevron, {
             size: 16
           })
         })]