@getlupa/client 1.18.3 → 1.19.0

package/dist/lupaSearch.umd.js

@@ -12590,7 +12590,7 @@ var __async = (__this, __arguments, generator) => {
       return "";
     }
     const transformedStr = typeof str === "string" ? str : str.toString();
-    return transformedStr.normalize === void 0 ? (_a = transformedStr.toLocaleLowerCase()) == null ? void 0 : _a.trim() : (_b = transformedStr.toLocaleLowerCase().normalize("NFKD").replace(/[^\w\s.-_/]/g, "")) == null ? void 0 : _b.trim();
+    return transformedStr.normalize === void 0 ? (_a = transformedStr.toLocaleLowerCase()) == null ? void 0 : _a.trim() : (_b = transformedStr.toLocaleLowerCase().normalize("NFKD").replace(/[^\p{L}\p{N}\s]/gu, "")) == null ? void 0 : _b.trim();
   };
   const getTransformedString = (str) => {
     var _a, _b;
@@ -12621,6 +12621,11 @@ var __async = (__this, __arguments, generator) => {
     }
     return result2;
   };
+  const getSocketClientId = () => {
+    const timestamp = Date.now().toString(36);
+    const randomString = getRandomString(8);
+    return `${timestamp}-${randomString}`;
+  };
   const toFixedIfNecessary = (value, precision = 2) => {
     return (+parseFloat(value).toFixed(precision)).toString();
   };
@@ -12735,6 +12740,10 @@ var __async = (__this, __arguments, generator) => {
     links: {
       searchResults: "/search"
     },
+    voiceSearch: {
+      enabled: false,
+      queryKey: ""
+    },
     panels: [
       {
         type: "suggestion",
@@ -14316,6 +14325,387 @@ var __async = (__this, __arguments, generator) => {
       resetHighlightIndex
     };
   });
+  const Env = {
+    production: "https://api.lupasearch.com/v1/",
+    staging: "https://api.staging.lupasearch.com/v1/"
+  };
+  const VoiceServiceEnv = {
+    production: "wss://voice.lupasearch.com",
+    staging: "wss://voice.lupasearch.dev"
+  };
+  const DEFAULT_REQUEST_CONFIG = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" }
+  };
+  const DEFAULT_HEADERS = DEFAULT_REQUEST_CONFIG.headers;
+  const getVoiceServiceApiUrl = (environment, customVoiceServiceUrl) => {
+    if (customVoiceServiceUrl) {
+      return customVoiceServiceUrl;
+    }
+    return VoiceServiceEnv[environment] || VoiceServiceEnv["production"];
+  };
+  const getApiUrl = (environment, customBaseUrl) => {
+    if (customBaseUrl) {
+      return customBaseUrl;
+    }
+    return Env[environment] || Env["production"];
+  };
+  const _sfc_main$1z = /* @__PURE__ */ defineComponent({
+    __name: "VoiceSearchProgressCircle",
+    props: {
+      isRecording: { type: Boolean },
+      timesliceLimit: {},
+      timeSliceLength: {}
+    },
+    setup(__props, { expose: __expose }) {
+      const props = __props;
+      const progressBar = ref(null);
+      const getProgressBarColor = (progressBarStyle) => {
+        if (!progressBarStyle.backgroundImage.startsWith("conic-gradient")) {
+          return progressBarStyle.backgroundColor;
+        }
+        const colorStops = progressBarStyle.backgroundImage.replace(/conic-gradient\(|\)$/g, "").split(")");
+        if (colorStops.length > 1) {
+          return `${colorStops[0]})`;
+        } else {
+          return progressBarStyle.backgroundColor;
+        }
+      };
+      const startProgressBar = () => {
+        if (!progressBar.value) {
+          return;
+        }
+        const duration = props.timesliceLimit * props.timeSliceLength;
+        const progressBarStyle = window.getComputedStyle(progressBar.value);
+        const progressBarColor = getProgressBarColor(progressBarStyle);
+        progressBar.value.style.background = `conic-gradient(${progressBarColor} 0%, transparent 0%)`;
+        let startTime = null;
+        function updateProgress(timestamp) {
+          if (!progressBar.value || !props.isRecording) {
+            return;
+          }
+          if (!startTime)
+            startTime = timestamp;
+          const elapsed = timestamp - startTime;
+          const progress = Math.min(elapsed / duration, 1) * 100;
+          progressBar.value.style.background = `conic-gradient(${progressBarColor} ${progress}%, transparent ${progress}%)`;
+          if (elapsed < duration) {
+            requestAnimationFrame(updateProgress);
+          }
+        }
+        requestAnimationFrame(updateProgress);
+      };
+      const stopProgressBar = () => {
+        if (!progressBar.value) {
+          return;
+        }
+        progressBar.value.style.background = "";
+      };
+      __expose({
+        startProgressBar,
+        stopProgressBar
+      });
+      return (_ctx, _cache) => {
+        return openBlock(), createElementBlock("div", {
+          ref_key: "progressBar",
+          ref: progressBar,
+          class: "lupa-progress-circle"
+        }, null, 512);
+      };
+    }
+  });
+  const buildSocketMessageFrameHeader = (event, payloadLength) => {
+    const headerObj = { event, length: payloadLength };
+    const headerJson = JSON.stringify(headerObj);
+    const headerBytes = new TextEncoder().encode(headerJson);
+    const headerLength = new Uint32Array([headerBytes.length]);
+    const headerLengthBytes = new Uint8Array(headerLength.buffer);
+    const result2 = new Uint8Array(4 + headerBytes.length);
+    result2.set(headerLengthBytes, 0);
+    result2.set(headerBytes, 4);
+    return result2;
+  };
+  function useVoiceRecorder(options) {
+    const socket = ref(null);
+    const mediaStream = ref(null);
+    const mediaRecorder = ref(null);
+    const isRecording = ref(false);
+    const isSocketReady = ref(false);
+    const errorRef = ref(null);
+    const transcription = ref("");
+    const timeSliceLength = computed(() => {
+      var _a;
+      return (_a = options.timesliceLength) != null ? _a : 1e3;
+    });
+    onBeforeUnmount(() => {
+      closeSocket();
+      stopRecording();
+    });
+    const initSocket = (url, onMessage) => {
+      socket.value = new WebSocket(url);
+      socket.value.onmessage = (event) => __async2(this, null, function* () {
+        var _a;
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.event === "ready") {
+            if (((_a = mediaRecorder.value) == null ? void 0 : _a.state) !== "recording") {
+              try {
+                isSocketReady.value = true;
+                yield startRecording();
+              } catch (error) {
+                console.error("Recording failed to start:", error);
+                closeSocket();
+              }
+            }
+          } else if (msg.event === "transcription") {
+            transcription.value = msg.transcription;
+            onMessage == null ? void 0 : onMessage(msg.transcription);
+            stopSocketConnection();
+          } else if (msg.event === "error") {
+            errorRef.value = msg.message || "An error occurred during transcription";
+            isSocketReady.value = false;
+            stopRecording();
+            closeSocket();
+          }
+        } catch (error) {
+          console.error("Error processing WebSocket message:", error);
+        }
+      });
+      socket.value.onclose = (event) => {
+        if (event.code === 4001) {
+          errorRef.value = event.reason || "Connection closed by server";
+        }
+        stopRecording();
+      };
+      socket.value.onerror = () => {
+        errorRef.value = "Service connection error";
+        stopRecording();
+      };
+    };
+    const onMediaRecorderDataAvailable = (event) => __async2(this, null, function* () {
+      var _a, _b;
+      if (!isSocketReady.value || ((_a = socket.value) == null ? void 0 : _a.readyState) !== WebSocket.OPEN) {
+        console.warn("Skipping audio chunk: socket not ready.");
+        return;
+      }
+      const audioBuffer = yield event.data.arrayBuffer();
+      const header = buildSocketMessageFrameHeader("audio-chunk", audioBuffer.byteLength);
+      const buffer = new Uint8Array(header.length + audioBuffer.byteLength);
+      buffer.set(header, 0);
+      buffer.set(new Uint8Array(audioBuffer), header.length);
+      (_b = socket.value) == null ? void 0 : _b.send(buffer);
+    });
+    const startRecording = () => __async2(this, null, function* () {
+      var _a, _b;
+      try {
+        mediaStream.value = yield navigator.mediaDevices.getUserMedia({
+          video: false,
+          audio: {
+            channelCount: 1,
+            echoCancellation: true,
+            sampleRate: options.sampleRate || 16e3
+          }
+        });
+        mediaRecorder.value = new MediaRecorder(mediaStream.value, {
+          mimeType: "audio/webm; codecs=opus"
+        });
+        mediaRecorder.value.ondataavailable = onMediaRecorderDataAvailable;
+        mediaRecorder.value.start(timeSliceLength.value);
+        isRecording.value = true;
+      } catch (error) {
+        if (error.name === "NotAllowedError") {
+          errorRef.value = ((_a = options.labels) == null ? void 0 : _a.microphoneNotAllowed) || "Microphone access denied. Please allow microphone access in your browser settings.";
+        } else if (error.name === "NotFoundError") {
+          errorRef.value = ((_b = options.labels) == null ? void 0 : _b.microphoneNotFound) || "No microphone found. Please connect a microphone and try again.";
+        }
+      }
+    });
+    const stopRecording = () => {
+      var _a, _b;
+      (_a = mediaRecorder.value) == null ? void 0 : _a.stop();
+      (_b = mediaStream.value) == null ? void 0 : _b.getTracks().forEach((track2) => {
+        track2.stop();
+      });
+      isRecording.value = false;
+    };
+    const stopSocketConnection = () => {
+      if (socket.value && socket.value.readyState === WebSocket.OPEN) {
+        const endHeader = buildSocketMessageFrameHeader("audio-chunk-end", 0);
+        socket.value.send(endHeader);
+        setTimeout(() => {
+          closeSocket();
+        }, 1e3);
+      }
+    };
+    const closeSocket = () => {
+      var _a;
+      (_a = socket.value) == null ? void 0 : _a.close();
+      socket.value = null;
+      isSocketReady.value = false;
+    };
+    const reset = () => {
+      stopRecording();
+      closeSocket();
+      transcription.value = "";
+      errorRef.value = null;
+      isRecording.value = false;
+      isSocketReady.value = false;
+    };
+    return {
+      isRecording,
+      isSocketReady,
+      transcription,
+      errorRef,
+      initSocket,
+      startRecording,
+      stopRecording,
+      stopSocketConnection,
+      reset,
+      closeSocket
+    };
+  }
+  const _hoisted_1$1l = {
+    key: 0,
+    class: "lupa-dialog-overlay"
+  };
+  const _hoisted_2$W = { class: "lupa-dialog-content" };
+  const _hoisted_3$F = { class: "lupa-listening-text" };
+  const _hoisted_4$v = { class: "lupa-mic-button-wrapper" };
+  const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+    __name: "VoiceSearchDialog",
+    props: {
+      isOpen: { type: Boolean },
+      options: {}
+    },
+    emits: [
+      "close",
+      "transcript-update",
+      "stop-recognize"
+    ],
+    setup(__props, { expose: __expose, emit: emit2 }) {
+      const props = __props;
+      const optionsStore = useOptionsStore();
+      const {
+        isRecording,
+        isSocketReady,
+        transcription,
+        errorRef,
+        initSocket,
+        stopSocketConnection,
+        reset
+      } = useVoiceRecorder(props.options);
+      const clientId = ref(null);
+      const voiceSearchProgressBar = ref(null);
+      const timesliceLimit = computed(() => {
+        var _a;
+        return (_a = props.options.timesliceLimit) != null ? _a : 4;
+      });
+      const timeSliceLength = computed(() => {
+        var _a;
+        return (_a = props.options.timesliceLength) != null ? _a : 1e3;
+      });
+      const stopDelay = computed(() => {
+        var _a;
+        return (_a = props.options.stopDelay) != null ? _a : 700;
+      });
+      const labels = computed(() => {
+        var _a;
+        return (_a = props.options.labels) != null ? _a : {};
+      });
+      const description = computed(() => {
+        var _a, _b;
+        if (errorRef.value) {
+          return errorRef.value;
+        }
+        if (!isSocketReady.value || !isRecording.value) {
+          return (_a = labels.value.connecting) != null ? _a : "Connecting...";
+        }
+        return (_b = labels.value.listening) != null ? _b : "Listening...";
+      });
+      watch(transcription, (newValue) => {
+        emit2("transcript-update", newValue);
+      });
+      watch(isRecording, (newVal) => {
+        var _a, _b;
+        if (newVal === true) {
+          (_a = voiceSearchProgressBar.value) == null ? void 0 : _a.startProgressBar();
+        } else {
+          (_b = voiceSearchProgressBar.value) == null ? void 0 : _b.stopProgressBar();
+        }
+      });
+      const handleRecordingButtonClick = () => {
+        var _a;
+        if (isRecording.value) {
+          setTimeout(() => {
+            stopSocketConnection();
+            handleOnStopEvent();
+          }, stopDelay.value);
+          return;
+        }
+        const voiceServiceUrl = getVoiceServiceApiUrl(
+          optionsStore.envOptions.environment,
+          props.options.customVoiceServiceUrl
+        );
+        const socketUrl = `${voiceServiceUrl}?clientId=${clientId.value}&queryKey=${props.options.queryKey}&languageCode=${(_a = props.options.language) != null ? _a : "en-US"}&connectionType=write-first`;
+        initSocket(socketUrl);
+        setTimeout(() => {
+          stopSocketConnection();
+          handleOnStopEvent();
+        }, timesliceLimit.value * timeSliceLength.value);
+      };
+      const handleOnStopEvent = () => {
+        var _a;
+        setTimeout(() => {
+          if (errorRef.value)
+            return;
+          emit2("stop-recognize", transcription.value);
+        }, 1500);
+        (_a = voiceSearchProgressBar.value) == null ? void 0 : _a.stopProgressBar();
+      };
+      onMounted(() => {
+        clientId.value = getSocketClientId();
+      });
+      onBeforeUnmount(() => {
+        clientId.value = null;
+      });
+      const dialogReset = () => {
+        var _a;
+        reset();
+        (_a = voiceSearchProgressBar.value) == null ? void 0 : _a.stopProgressBar();
+      };
+      __expose({
+        handleRecordingButtonClick,
+        reset: dialogReset
+      });
+      return (_ctx, _cache) => {
+        return openBlock(), createElementBlock("div", null, [
+          props.isOpen ? (openBlock(), createElementBlock("div", _hoisted_1$1l, [
+            createBaseVNode("button", {
+              class: "lupa-dialog-box-close-button",
+              onClick: _cache[0] || (_cache[0] = () => emit2("close"))
+            }),
+            createBaseVNode("div", _hoisted_2$W, [
+              createBaseVNode("p", _hoisted_3$F, toDisplayString(description.value), 1),
+              createBaseVNode("div", _hoisted_4$v, [
+                createBaseVNode("button", {
+                  class: normalizeClass(["lupa-mic-button", { recording: unref(isRecording) }]),
+                  onClick: handleRecordingButtonClick
+                }, null, 2),
+                createVNode(_sfc_main$1z, {
+                  ref_key: "voiceSearchProgressBar",
+                  ref: voiceSearchProgressBar,
+                  class: "lupa-progress-circle",
+                  isRecording: unref(isRecording),
+                  timesliceLimit: timesliceLimit.value,
+                  timeSliceLength: timeSliceLength.value
+                }, null, 8, ["isRecording", "timesliceLimit", "timeSliceLength"])
+              ])
+            ])
+          ])) : createCommentVNode("", true)
+        ]);
+      };
+    }
+  });
   const _hoisted_1$1k = { id: "lupa-search-box-input-container" };
   const _hoisted_2$V = { class: "lupa-input-clear" };
   const _hoisted_3$E = { id: "lupa-search-box-input" };
@@ -14329,6 +14719,7 @@ var __async = (__this, __arguments, generator) => {
     key: 0,
     class: "lupa-close-label"
   };
+  const _hoisted_9$3 = { key: 1 };
   const _sfc_main$1x = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxInput",
     props: {
@@ -14344,6 +14735,8 @@ var __async = (__this, __arguments, generator) => {
       const searchBoxStore = useSearchBoxStore();
       const { query } = storeToRefs(paramStore);
       const mainInput = ref(null);
+      const voiceDialogOverlay = ref(null);
+      const isVoiceDialogOpen = ref(false);
       const emitInputOnFocus = computed(() => {
         var _a;
         return (_a = props.emitInputOnFocus) != null ? _a : true;
@@ -14354,6 +14747,10 @@ var __async = (__this, __arguments, generator) => {
           return (_a = props.suggestedValue) != null ? _a : { value: "", override: false, item: { suggestion: "" } };
         }
       );
+      const isVoiceSearchEnabled = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.options.voiceSearch) == null ? void 0 : _a.enabled) != null ? _b : false;
+      });
       const labels = computed(() => props.options.labels);
       const input2 = ref("");
       const inputValue = computed({
@@ -14377,6 +14774,12 @@ var __async = (__this, __arguments, generator) => {
         var _a;
         return (_a = labels.value.searchInputAriaLabel) != null ? _a : "Search input";
       });
+      onMounted(() => {
+        document.addEventListener("click", handleClickOutsideVoiceDialogOverlay);
+      });
+      onBeforeUnmount(() => {
+        document.removeEventListener("click", handleClickOutsideVoiceDialogOverlay);
+      });
       watch(suggestedValue, () => {
         if (suggestedValue.value.override) {
           input2.value = suggestedValue.value.item.suggestion;
@@ -14411,6 +14814,37 @@ var __async = (__this, __arguments, generator) => {
         }
         (_a = mainInput == null ? void 0 : mainInput.value) == null ? void 0 : _a.focus();
       };
+      const openVoiceSearchDialog = () => {
+        var _a;
+        isVoiceDialogOpen.value = true;
+        (_a = voiceDialogOverlay.value) == null ? void 0 : _a.handleRecordingButtonClick();
+      };
+      const closeDialog = () => {
+        var _a;
+        isVoiceDialogOpen.value = false;
+        (_a = voiceDialogOverlay.value) == null ? void 0 : _a.reset();
+      };
+      const handleVoiceSearchOutput = (transcription) => {
+        inputValue.value = transcription;
+        handleSubmit();
+      };
+      const stopRecognition = (trascription) => {
+        setTimeout(() => {
+          isVoiceDialogOpen.value = false;
+          handleVoiceSearchOutput(trascription);
+        }, 500);
+      };
+      const handleClickOutsideVoiceDialogOverlay = (event) => {
+        if (event.target.classList.contains("lupa-voice-search-button")) {
+          return;
+        }
+        if (voiceDialogOverlay.value && voiceDialogOverlay.value.$el.contains(event.target)) {
+          return;
+        }
+        if (isVoiceDialogOpen.value) {
+          closeDialog();
+        }
+      };
       __expose({ focus });
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", _hoisted_1$1k, [
@@ -14454,7 +14888,23 @@ var __async = (__this, __arguments, generator) => {
             onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("close"))
           }, [
             labels.value.close ? (openBlock(), createElementBlock("span", _hoisted_8$3, toDisplayString(labels.value.close), 1)) : createCommentVNode("", true)
-          ])) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          isVoiceSearchEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_9$3, [
+            createBaseVNode("button", {
+              onClick: openVoiceSearchDialog,
+              class: "lupa-voice-search-button"
+            })
+          ])) : createCommentVNode("", true),
+          isVoiceSearchEnabled.value ? (openBlock(), createBlock(_sfc_main$1y, {
+            key: 2,
+            ref_key: "voiceDialogOverlay",
+            ref: voiceDialogOverlay,
+            isOpen: isVoiceDialogOpen.value,
+            options: props.options.voiceSearch,
+            onClose: closeDialog,
+            onTranscriptUpdate: handleVoiceSearchOutput,
+            onStopRecognize: stopRecognition
+          }, null, 8, ["isOpen", "options"])) : createCommentVNode("", true)
         ]);
       };
     }
@@ -23880,6 +24330,15 @@ and ensure you are accounting for this risk.
         return false;
     }
   };
+  function shouldDisplay(displayOpt, doc2) {
+    if (!displayOpt)
+      return true;
+    if (typeof displayOpt === "function") {
+      return displayOpt(doc2);
+    }
+    const rules = Array.isArray(displayOpt) ? displayOpt : [displayOpt];
+    return rules.every((rule2) => processDisplayCondition(rule2, doc2));
+  }
   const checkHasFullImageUrl = (imageUrl) => typeof imageUrl === "string" && (imageUrl.indexOf("http://") === 0 || imageUrl.indexOf("https://") === 0);
   const computeImageUrl = (imageUrl, rootImageUrl) => {
     const mainUrl = Array.isArray(imageUrl) ? imageUrl[0] : imageUrl;
@@ -24696,7 +25155,7 @@ and ensure you are accounting for this risk.
         if (!element.display) {
           return true;
         }
-        return typeof element.display === "function" ? element.display(item) : processDisplayCondition(element.display, item);
+        return shouldDisplay(element.display, item);
       });
       const enhancedItem = computed(() => {
         var _a, _b, _c, _d;
@@ -25019,7 +25478,7 @@ and ensure you are accounting for this risk.
         if (!element.display) {
           return true;
         }
-        return typeof element.display === "function" ? element.display(item) : processDisplayCondition(element.display, item);
+        return shouldDisplay(element.display, item);
       };
       const badges = computed(() => {
         if (!props.options.elements) {
@@ -25097,10 +25556,6 @@ and ensure you are accounting for this risk.
       const badgeOptions = computed(() => {
         return __spreadProps2(__spreadValues2({}, props.panelOptions.badges), { product: props.item });
       });
-      const imageElements = computed(() => {
-        var _a, _b;
-        return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e2) => e2.type === DocumentElementType.IMAGE)) != null ? _b : [];
-      });
       const mainImageElement = computed(() => {
         return imageElements.value[0];
       });
@@ -25120,12 +25575,6 @@ and ensure you are accounting for this risk.
           minWidth: widthOverride.value ? `${widthOverride.value + 10}px` : void 0
         } : {};
       });
-      const detailElements = computed(() => {
-        var _a, _b;
-        return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter(
-          (e2) => e2.type !== DocumentElementType.IMAGE && e2.type !== DocumentElementType.ADDTOCART
-        )) != null ? _b : [];
-      });
       const addToCartElement = computed(() => {
         var _a;
         return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e2) => e2.type === DocumentElementType.ADDTOCART);
@@ -25144,12 +25593,42 @@ and ensure you are accounting for this risk.
       onMounted(() => {
         checkIfIsInStock();
       });
-      const processIsInStock = () => {
-        return typeof props.panelOptions.isInStock === "function" ? props.panelOptions.isInStock(props.item) : processDisplayCondition(props.panelOptions.isInStock, props.item);
-      };
+      const processIsInStock = computed(() => {
+        const raw = props.panelOptions.isInStock;
+        if (!raw)
+          return true;
+        const rules = Array.isArray(raw) ? raw : [raw];
+        return rules.every((rule2) => shouldDisplay(rule2, props.item));
+      });
       const checkIfIsInStock = () => __async2(this, null, function* () {
-        isInStock.value = props.panelOptions.isInStock ? processIsInStock() : true;
+        isInStock.value = props.panelOptions.isInStock ? processIsInStock.value : true;
       });
+      const imageElements = computed(
+        () => {
+          var _a, _b;
+          return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e2) => e2.type === DocumentElementType.IMAGE && !e2.group)) != null ? _b : [];
+        }
+      );
+      const detailElements = computed(
+        () => {
+          var _a, _b;
+          return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter(
+            (e2) => e2.type !== DocumentElementType.IMAGE && e2.type !== DocumentElementType.ADDTOCART && !e2.group
+          )) != null ? _b : [];
+        }
+      );
+      const elementGroups = computed(
+        () => {
+          var _a;
+          return Array.from(
+            new Set((_a = props.panelOptions.elements) == null ? void 0 : _a.map((e2) => e2.group).filter((g) => Boolean(g)))
+          );
+        }
+      );
+      function getGroupElements(group) {
+        var _a, _b;
+        return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e2) => e2.group === group)) != null ? _b : [];
+      }
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("a", mergeProps({
           class: ["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }],
@@ -25165,9 +25644,9 @@ and ensure you are accounting for this risk.
             (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
               return openBlock(), createBlock(_sfc_main$1g, {
                 class: "lupa-search-box-product-element",
+                key: element.key,
                 item: _ctx.item,
                 element,
-                key: element.key,
                 labels: _ctx.labels,
                 link: link.value
               }, null, 8, ["item", "element", "labels", "link"]);
@@ -25177,14 +25656,14 @@ and ensure you are accounting for this risk.
             (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
               var _a;
               return openBlock(), createBlock(_sfc_main$1g, {
-                key: element.key,
                 class: "lupa-search-box-product-element",
+                key: element.key,
                 item: _ctx.item,
                 element,
                 labels: _ctx.labels,
                 link: link.value
               }, createSlots({ _: 2 }, [
-                badgeOptions.value && ((_a = badgeOptions.value) == null ? void 0 : _a.anchorElementKey) === element.key ? {
+                ((_a = badgeOptions.value) == null ? void 0 : _a.anchorElementKey) === element.key ? {
                   name: "badges",
                   fn: withCtx(() => [
                     createVNode(_sfc_main$19, {
@@ -25197,6 +25676,24 @@ and ensure you are accounting for this risk.
               ]), 1032, ["item", "element", "labels", "link"]);
             }), 128))
           ]),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(elementGroups.value, (group) => {
+            return openBlock(), createElementBlock("div", {
+              key: group,
+              class: normalizeClass(`lupa-search-box-group-${group}`)
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(getGroupElements(group), (element) => {
+                return openBlock(), createBlock(_sfc_main$1g, {
+                  class: "lupa-search-box-product-element",
+                  key: element.key,
+                  item: _ctx.item,
+                  element,
+                  labels: _ctx.labels,
+                  link: link.value,
+                  isInStock: isInStock.value
+                }, null, 8, ["item", "element", "labels", "link", "isInStock"]);
+              }), 128))
+            ], 2);
+          }), 128)),
           addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
             createVNode(_sfc_main$1g, {
               class: "lupa-search-box-product-element",
@@ -25993,7 +26490,8 @@ and ensure you are accounting for this risk.
           "labels",
           "links",
           "inputAttributes",
-          "showSubmitButton"
+          "showSubmitButton",
+          "voiceSearch"
         ])
       );
       const panelOptions = computed(
@@ -26577,22 +27075,42 @@ and ensure you are accounting for this risk.
     emits: ["remove"],
     setup(__props, { emit: emit2 }) {
       const props = __props;
-      const facetKeyClass = computed(() => {
-        return `lupa-facet-active-filter-${props.filter.key}`;
+      const facetKeyClass = computed(() => `lupa-facet-active-filter-${props.filter.key}`);
+      const { searchResultOptions } = storeToRefs(useOptionsStore());
+      const units = computed(() => {
+        var _a, _b, _c, _d, _e;
+        return (_e = (_d = (_c = (_b = (_a = searchResultOptions.value) == null ? void 0 : _a.filters) == null ? void 0 : _b.facets) == null ? void 0 : _c.stats) == null ? void 0 : _d.units) != null ? _e : {};
       });
-      const handleClick = () => {
+      function handleClick() {
         emit2("remove", { filter: props.filter });
-      };
+      }
+      function formatFilterValue(filter2) {
+        const unit = units.value[filter2.key] || "";
+        let min, max;
+        if (Array.isArray(filter2.value)) {
+          [min, max] = filter2.value.map(String);
+        } else if (typeof filter2.value === "string" && filter2.value.includes("-")) {
+          const parts = filter2.value.split("-").map((s) => s.trim());
+          if (parts.length === 2)
+            [min, max] = parts;
+        }
+        if (min != null && max != null) {
+          return `${min} ${unit} – ${max} ${unit}`;
+        }
+        return `${filter2.value} ${unit}`.trim();
+      }
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", {
-          class: normalizeClass(["lupa-search-result-filter-value", { [facetKeyClass.value]: true }])
+          class: normalizeClass(["lupa-search-result-filter-value", [facetKeyClass.value]]),
+          "data-cy": "lupa-current-filter-item"
         }, [
           createBaseVNode("div", {
             class: "lupa-current-filter-action",
-            onClick: handleClick
-          }, "⨉"),
+            onClick: handleClick,
+            "aria-label": "Remove filter"
+          }, " ⨉ "),
           createBaseVNode("div", _hoisted_1$U, toDisplayString(_ctx.filter.label) + ": ", 1),
-          createBaseVNode("div", _hoisted_2$F, toDisplayString(_ctx.filter.value), 1)
+          createBaseVNode("div", _hoisted_2$F, toDisplayString(formatFilterValue(props.filter)), 1)
         ], 2);
       };
     }
@@ -26614,6 +27132,14 @@ and ensure you are accounting for this risk.
       expandable: { type: Boolean }
     },
     setup(__props) {
+      const optionsStore = useOptionsStore();
+      const { searchResultOptions } = storeToRefs(optionsStore);
+      const units = computed(
+        () => {
+          var _a, _b, _c, _d, _e;
+          return (_e = (_d = (_c = (_b = (_a = searchResultOptions == null ? void 0 : searchResultOptions.value) == null ? void 0 : _a.filters) == null ? void 0 : _b.facets) == null ? void 0 : _c.stats) == null ? void 0 : _d.units) != null ? _e : {};
+        }
+      );
       const isOpen = ref(false);
       const paramsStore = useParamsStore();
       const optionStore = useOptionsStore();
@@ -26695,8 +27221,9 @@ and ensure you are accounting for this risk.
                 return openBlock(), createBlock(_sfc_main$_, {
                   key: filter2.key + "_" + filter2.value,
                   filter: filter2,
+                  units: units.value,
                   onRemove: handleRemove
-                }, null, 8, ["filter"]);
+                }, null, 8, ["filter", "units"]);
               }), 128))
             ]),
             createBaseVNode("div", {
@@ -28020,15 +28547,17 @@ and ensure you are accounting for this risk.
   const _hoisted_5$d = { class: "lupa-stats-from" };
   const _hoisted_6$7 = ["max", "min", "pattern", "aria-label"];
   const _hoisted_7$5 = { key: 0 };
-  const _hoisted_8$1 = /* @__PURE__ */ createBaseVNode("div", { class: "lupa-stats-separator" }, null, -1);
-  const _hoisted_9$1 = {
+  const _hoisted_8$1 = { key: 1 };
+  const _hoisted_9$1 = /* @__PURE__ */ createBaseVNode("div", { class: "lupa-stats-separator" }, null, -1);
+  const _hoisted_10 = {
     key: 0,
     class: "lupa-stats-range-label"
   };
-  const _hoisted_10 = { class: "lupa-stats-to" };
-  const _hoisted_11 = ["max", "min", "pattern", "aria-label"];
-  const _hoisted_12 = { key: 0 };
-  const _hoisted_13 = {
+  const _hoisted_11 = { class: "lupa-stats-to" };
+  const _hoisted_12 = ["max", "min", "pattern", "aria-label"];
+  const _hoisted_13 = { key: 0 };
+  const _hoisted_14 = { key: 1 };
+  const _hoisted_15 = {
     key: 2,
     class: "lupa-stats-slider-wrapper"
   };
@@ -28095,7 +28624,7 @@ and ensure you are accounting for this risk.
           if (!value || value > facetMax.value) {
             return;
           }
-          innerSliderRange.value = [value, sliderRange.value[1]];
+          innerSliderRange.value = [sliderRange.value[1], value];
           handleInputChange();
         }
       });
@@ -28151,7 +28680,18 @@ and ensure you are accounting for this risk.
       });
       const statsSummary = computed(() => {
         const [min, max] = sliderRange.value;
-        return isPrice.value ? formatPriceSummary([min, max], currency.value, separator.value, currencyTemplate.value) : formatRange({ gte: min, lte: max });
+        if (isPrice.value) {
+          return formatPriceSummary(
+            [min, max],
+            currency.value,
+            separator.value,
+            currencyTemplate.value
+          );
+        }
+        if (unit.value) {
+          return `${min} ${unit.value} - ${max} ${unit.value}`;
+        }
+        return formatRange({ gte: min, lte: max });
       });
       const separator = computed(() => {
         var _a, _b, _c;
@@ -28212,6 +28752,12 @@ and ensure you are accounting for this risk.
       const handleDragging = (value) => {
         innerSliderRange.value = value;
       };
+      const unit = computed(
+        () => {
+          var _a, _b, _c, _d, _e;
+          return (_e = (_d = (_a = props.options.stats) == null ? void 0 : _a.units) == null ? void 0 : _d[(_c = (_b = props.facet) == null ? void 0 : _b.key) != null ? _c : ""]) != null ? _e : "";
+        }
+      );
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", _hoisted_1$P, [
           !isInputVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$B, toDisplayString(statsSummary.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$s, [
@@ -28234,13 +28780,14 @@ and ensure you are accounting for this risk.
                     { lazy: true }
                   ]
                 ]),
-                isPrice.value ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(currency.value), 1)) : createCommentVNode("", true)
+                isPrice.value ? (openBlock(), createElementBlock("span", _hoisted_7$5, toDisplayString(currency.value), 1)) : createCommentVNode("", true),
+                unit.value ? (openBlock(), createElementBlock("span", _hoisted_8$1, toDisplayString(unit.value), 1)) : createCommentVNode("", true)
               ])
             ]),
-            _hoisted_8$1,
+            _hoisted_9$1,
             createBaseVNode("div", null, [
-              rangeLabelTo.value ? (openBlock(), createElementBlock("div", _hoisted_9$1, toDisplayString(rangeLabelTo.value), 1)) : createCommentVNode("", true),
-              createBaseVNode("div", _hoisted_10, [
+              rangeLabelTo.value ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(rangeLabelTo.value), 1)) : createCommentVNode("", true),
+              createBaseVNode("div", _hoisted_11, [
                 withDirectives(createBaseVNode("input", {
                   "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => toValue.value = $event),
                   type: "text",
@@ -28249,7 +28796,7 @@ and ensure you are accounting for this risk.
                   min: facetMin.value,
                   pattern: sliderInputFormat.value,
                   "aria-label": ariaLabelTo.value
-                }, null, 8, _hoisted_11), [
+                }, null, 8, _hoisted_12), [
                   [
                     vModelText,
                     toValue.value,
@@ -28257,11 +28804,12 @@ and ensure you are accounting for this risk.
                     { lazy: true }
                   ]
                 ]),
-                isPrice.value ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(currency.value), 1)) : createCommentVNode("", true)
+                isPrice.value ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(currency.value), 1)) : createCommentVNode("", true),
+                unit.value ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(unit.value), 1)) : createCommentVNode("", true)
               ])
             ])
           ])),
-          isSliderVisible.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          isSliderVisible.value ? (openBlock(), createElementBlock("div", _hoisted_15, [
             createVNode(unref(m), {
               class: "slider",
               tooltips: false,
@@ -30142,14 +30690,9 @@ and ensure you are accounting for this risk.
         const enhancementData = (_d = (_c = dynamicDataIdMap.value) == null ? void 0 : _c[(_b = props.item) == null ? void 0 : _b.id]) != null ? _d : {};
         return __spreadValues2(__spreadValues2({}, props.item), enhancementData);
       });
-      const displayElement = computed(() => {
-        const element = props.element;
-        const item = enhancedItem.value;
-        if (!element.display) {
-          return true;
-        }
-        return typeof element.display === "function" ? element.display(item) : processDisplayCondition(element.display, item);
-      });
+      const displayElement = computed(
+        () => shouldDisplay(props.element.display, enhancedItem.value)
+      );
       const dynamicAttributes = computed(() => {
         return getDynamicAttributes(props.element.dynamicAttributes, enhancedItem.value);
       });
@@ -30277,15 +30820,21 @@ and ensure you are accounting for this risk.
         var _a, _b;
         return (_b = (_a = props.options.elements) == null ? void 0 : _a.filter((e2) => e2.group === group)) != null ? _b : [];
       };
-      const processIsInStock = () => {
-        return typeof props.options.isInStock === "function" ? props.options.isInStock(props.product) : processDisplayCondition(props.options.isInStock, props.product);
+      const shouldShowInStock = () => {
+        const raw = props.options.isInStock;
+        if (!raw)
+          return true;
+        const rules = Array.isArray(raw) ? raw : [raw];
+        return rules.every(
+          (rule2) => typeof rule2 === "function" ? rule2(props.product) : processDisplayCondition(rule2, props.product)
+        );
+      };
+      const checkIfIsInStock = () => {
+        isInStock.value = shouldShowInStock();
       };
       onMounted(() => {
         checkIfIsInStock();
       });
-      const checkIfIsInStock = () => __async2(this, null, function* () {
-        isInStock.value = props.options.isInStock ? yield processIsInStock() : true;
-      });
       const handleClick = () => {
         var _a, _b, _c, _d;
         const event = {
@@ -33164,21 +33713,6 @@ and ensure you are accounting for this risk.
       };
     }
   });
-  const Env = {
-    production: "https://api.lupasearch.com/v1/",
-    staging: "https://api.staging.lupasearch.com/v1/"
-  };
-  const DEFAULT_REQUEST_CONFIG = {
-    method: "POST",
-    headers: { "Content-Type": "application/json" }
-  };
-  const DEFAULT_HEADERS = DEFAULT_REQUEST_CONFIG.headers;
-  const getApiUrl = (environment, customBaseUrl) => {
-    if (customBaseUrl) {
-      return customBaseUrl;
-    }
-    return Env[environment] || Env["production"];
-  };
   const suggestSearchChatPhrases = (options, request, chatSettings) => __async2(void 0, null, function* () {
     var _a, _b, _c;
     const { environment, customBaseUrl } = options;
@@ -33685,7 +34219,7 @@ and ensure you are accounting for this risk.
     key: 0,
     class: "lupasearch-chat-content"
   };
-  const _sfc_main$1y = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1A = /* @__PURE__ */ defineComponent({
     __name: "ChatContainer",
     props: {
       options: {}
@@ -40339,7 +40873,7 @@ and ensure you are accounting for this risk.
     const instance = createVue(
       options.displayOptions.containerSelector,
       mountOptions == null ? void 0 : mountOptions.mountingBehavior,
-      _sfc_main$1y,
+      _sfc_main$1A,
       {
         options
       }