@getlupa/vue 0.18.4 → 0.19.0

package/dist/lupaSearch.js

@@ -7294,7 +7294,7 @@ const getNormalizedString = (str) => {
     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;
@@ -9034,8 +9034,8 @@ const Env = {
   staging: "https://api.staging.lupasearch.com/v1/"
 };
 const VoiceServiceEnv = {
-  production: "ws://voice.lupasearch.com:3001",
-  staging: "ws://voice.lupasearch.dev:3001"
+  production: "wss://voice.lupasearch.com",
+  staging: "wss://voice.lupasearch.dev"
 };
 const DEFAULT_REQUEST_CONFIG = {
   method: "POST",
@@ -9076,7 +9076,7 @@ const _sfc_main$1z = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const startProgressBar = () => {
-      if (!progressBar.value || !props.isRecording) {
+      if (!progressBar.value) {
         return;
       }
       const duration = props.timesliceLimit * props.timeSliceLength;
@@ -9134,6 +9134,7 @@ function useVoiceRecorder(options) {
   const mediaStream = vue.ref(null);
   const mediaRecorder = vue.ref(null);
   const isRecording = vue.ref(false);
+  const isSocketReady = vue.ref(false);
   const errorRef = vue.ref(null);
   const transcription = vue.ref("");
   const timeSliceLength = vue.computed(() => {
@@ -9146,35 +9147,51 @@ function useVoiceRecorder(options) {
   });
   const initSocket = (url, onMessage) => {
     socket.value = new WebSocket(url);
-    socket.value.onopen = () => __async(this, null, function* () {
+    socket.value.onmessage = (event) => __async(this, null, function* () {
       var _a;
-      if (((_a = mediaRecorder.value) == null ? void 0 : _a.state) !== "recording") {
-        yield startRecording();
+      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.onmessage = (event) => {
-      const msg = JSON.parse(event.data);
-      if (msg.event === "transcription") {
-        transcription.value = msg.transcription;
-        onMessage == null ? void 0 : onMessage(msg.transcription);
-        stopSocketConnection();
-      } else if (msg.event === "error") {
-        errorRef.value = "Server error during transcription";
-        stopRecording();
+    socket.value.onclose = (event) => {
+      if (event.code === 4001) {
+        errorRef.value = event.reason || "Connection closed by server";
       }
-    };
-    socket.value.onclose = () => {
       stopRecording();
     };
     socket.value.onerror = () => {
-      stopRecording();
       errorRef.value = "Service connection error";
+      stopRecording();
     };
   };
   const onMediaRecorderDataAvailable = (event) => __async(this, null, function* () {
     var _a, _b;
-    if (((_a = mediaRecorder.value) == null ? void 0 : _a.state) !== "recording")
+    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);
@@ -9183,20 +9200,29 @@ function useVoiceRecorder(options) {
     (_b = socket.value) == null ? void 0 : _b.send(buffer);
   });
   const startRecording = () => __async(this, null, function* () {
-    mediaStream.value = yield navigator.mediaDevices.getUserMedia({
-      video: false,
-      audio: {
-        channelCount: 1,
-        echoCancellation: true,
-        sampleRate: 16e3
+    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.";
       }
-    });
-    mediaRecorder.value = new MediaRecorder(mediaStream.value, {
-      mimeType: "audio/webm; codecs=opus"
-    });
-    mediaRecorder.value.ondataavailable = onMediaRecorderDataAvailable;
-    mediaRecorder.value.start(timeSliceLength.value);
-    isRecording.value = true;
+    }
   });
   const stopRecording = () => {
     var _a, _b;
@@ -9219,6 +9245,7 @@ function useVoiceRecorder(options) {
     var _a;
     (_a = socket.value) == null ? void 0 : _a.close();
     socket.value = null;
+    isSocketReady.value = false;
   };
   const reset = () => {
     stopRecording();
@@ -9226,9 +9253,11 @@ function useVoiceRecorder(options) {
     transcription.value = "";
     errorRef.value = null;
     isRecording.value = false;
+    isSocketReady.value = false;
   };
   return {
     isRecording,
+    isSocketReady,
     transcription,
     errorRef,
     initSocket,
@@ -9262,6 +9291,7 @@ const _sfc_main$1y = /* @__PURE__ */ vue.defineComponent({
     const optionsStore = useOptionsStore();
     const {
       isRecording,
+      isSocketReady,
       transcription,
       errorRef,
       initSocket,
@@ -9287,20 +9317,28 @@ const _sfc_main$1y = /* @__PURE__ */ vue.defineComponent({
       return (_a = props.options.labels) != null ? _a : {};
     });
     const description = vue.computed(() => {
-      var _a, _b, _c;
+      var _a, _b;
       if (errorRef.value) {
-        return (_a = labels.value.serviceError) != null ? _a : errorRef.value;
+        return errorRef.value;
       }
-      if (!isRecording.value) {
-        return (_b = labels.value.microphoneOff) != null ? _b : "Microphone is off. Try again.";
+      if (!isSocketReady.value || !isRecording.value) {
+        return (_a = labels.value.connecting) != null ? _a : "Connecting...";
       }
-      return (_c = labels.value.listening) != null ? _c : "Listening...";
+      return (_b = labels.value.listening) != null ? _b : "Listening...";
     });
     vue.watch(transcription, (newValue) => {
       emit("transcript-update", newValue);
     });
-    const handleRecordingButtonClick = () => {
+    vue.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();
@@ -9314,7 +9352,6 @@ const _sfc_main$1y = /* @__PURE__ */ vue.defineComponent({
       );
       const socketUrl = `${voiceServiceUrl}?clientId=${clientId.value}&queryKey=${props.options.queryKey}&languageCode=${(_a = props.options.language) != null ? _a : "en-US"}&connectionType=write-first`;
       initSocket(socketUrl);
-      (_b = voiceSearchProgressBar.value) == null ? void 0 : _b.startProgressBar();
       setTimeout(() => {
         stopSocketConnection();
         handleOnStopEvent();
@@ -19047,6 +19084,15 @@ const processDisplayCondition = (displayCondition, doc = {}) => {
       return false;
   }
 };
+function shouldDisplay(displayOpt, doc) {
+  if (!displayOpt)
+    return true;
+  if (typeof displayOpt === "function") {
+    return displayOpt(doc);
+  }
+  const rules = Array.isArray(displayOpt) ? displayOpt : [displayOpt];
+  return rules.every((rule2) => processDisplayCondition(rule2, doc));
+}
 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;
@@ -19863,7 +19909,7 @@ const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadV
       if (!element.display) {
         return true;
       }
-      return typeof element.display === "function" ? element.display(item) : processDisplayCondition(element.display, item);
+      return shouldDisplay(element.display, item);
     });
     const enhancedItem = vue.computed(() => {
       var _a, _b, _c, _d;
@@ -20186,7 +20232,7 @@ const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadV
       if (!element.display) {
         return true;
       }
-      return typeof element.display === "function" ? element.display(item) : processDisplayCondition(element.display, item);
+      return shouldDisplay(element.display, item);
     };
     const badges = vue.computed(() => {
       if (!props.options.elements) {
@@ -20264,10 +20310,6 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
     const badgeOptions = vue.computed(() => {
       return __spreadProps(__spreadValues({}, props.panelOptions.badges), { product: props.item });
     });
-    const imageElements = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e2) => e2.type === DocumentElementType.IMAGE)) != null ? _b : [];
-    });
     const mainImageElement = vue.computed(() => {
       return imageElements.value[0];
     });
@@ -20287,12 +20329,6 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
         minWidth: widthOverride.value ? `${widthOverride.value + 10}px` : void 0
       } : {};
     });
-    const detailElements = vue.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 = vue.computed(() => {
       var _a;
       return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e2) => e2.type === DocumentElementType.ADDTOCART);
@@ -20311,12 +20347,42 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       checkIfIsInStock();
     });
-    const processIsInStock = () => {
-      return typeof props.panelOptions.isInStock === "function" ? props.panelOptions.isInStock(props.item) : processDisplayCondition(props.panelOptions.isInStock, props.item);
-    };
+    const processIsInStock = vue.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 = () => __async(this, null, function* () {
-      isInStock.value = props.panelOptions.isInStock ? processIsInStock() : true;
+      isInStock.value = props.panelOptions.isInStock ? processIsInStock.value : true;
     });
+    const imageElements = vue.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 = vue.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 = vue.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 vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
         class: ["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }],
@@ -20332,9 +20398,9 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(imageElements.value, (element) => {
             return vue.openBlock(), vue.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"]);
@@ -20344,14 +20410,14 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(detailElements.value, (element) => {
             var _a;
             return vue.openBlock(), vue.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
             }, vue.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: vue.withCtx(() => [
                   vue.createVNode(_sfc_main$19, {
@@ -20364,6 +20430,24 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
             ]), 1032, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(elementGroups.value, (group) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: group,
+            class: vue.normalizeClass(`lupa-search-box-group-${group}`)
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(getGroupElements(group), (element) => {
+              return vue.openBlock(), vue.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
           vue.createVNode(_sfc_main$1g, {
             class: "lupa-search-box-product-element",
@@ -21764,8 +21848,8 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
     const facetKeyClass = vue.computed(() => `lupa-facet-active-filter-${props.filter.key}`);
     const { searchResultOptions } = storeToRefs(useOptionsStore());
     const units = vue.computed(() => {
-      var _a;
-      return (_a = searchResultOptions.value.filters.facets.stats.units) != null ? _a : {};
+      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 : {};
     });
     function handleClick() {
       emit("remove", { filter: props.filter });
@@ -25376,14 +25460,9 @@ const _sfc_main$t = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       const enhancementData = (_d = (_c = dynamicDataIdMap.value) == null ? void 0 : _c[(_b = props.item) == null ? void 0 : _b.id]) != null ? _d : {};
       return __spreadValues(__spreadValues({}, props.item), enhancementData);
     });
-    const displayElement = vue.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 = vue.computed(
+      () => shouldDisplay(props.element.display, enhancedItem.value)
+    );
     const dynamicAttributes = vue.computed(() => {
       return getDynamicAttributes(props.element.dynamicAttributes, enhancedItem.value);
     });
@@ -25511,15 +25590,21 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
       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();
     };
     vue.onMounted(() => {
       checkIfIsInStock();
     });
-    const checkIfIsInStock = () => __async(this, null, function* () {
-      isInStock.value = props.options.isInStock ? yield processIsInStock() : true;
-    });
     const handleClick = () => {
       var _a, _b, _c, _d;
       const event = {

package/dist/lupaSearch.mjs

@@ -7292,7 +7292,7 @@ const getNormalizedString = (str) => {
     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;
@@ -9032,8 +9032,8 @@ const Env = {
   staging: "https://api.staging.lupasearch.com/v1/"
 };
 const VoiceServiceEnv = {
-  production: "ws://voice.lupasearch.com:3001",
-  staging: "ws://voice.lupasearch.dev:3001"
+  production: "wss://voice.lupasearch.com",
+  staging: "wss://voice.lupasearch.dev"
 };
 const DEFAULT_REQUEST_CONFIG = {
   method: "POST",
@@ -9074,7 +9074,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
       }
     };
     const startProgressBar = () => {
-      if (!progressBar.value || !props.isRecording) {
+      if (!progressBar.value) {
         return;
       }
       const duration = props.timesliceLimit * props.timeSliceLength;
@@ -9132,6 +9132,7 @@ function useVoiceRecorder(options) {
   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(() => {
@@ -9144,35 +9145,51 @@ function useVoiceRecorder(options) {
   });
   const initSocket = (url, onMessage) => {
     socket.value = new WebSocket(url);
-    socket.value.onopen = () => __async(this, null, function* () {
+    socket.value.onmessage = (event) => __async(this, null, function* () {
       var _a;
-      if (((_a = mediaRecorder.value) == null ? void 0 : _a.state) !== "recording") {
-        yield startRecording();
+      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.onmessage = (event) => {
-      const msg = JSON.parse(event.data);
-      if (msg.event === "transcription") {
-        transcription.value = msg.transcription;
-        onMessage == null ? void 0 : onMessage(msg.transcription);
-        stopSocketConnection();
-      } else if (msg.event === "error") {
-        errorRef.value = "Server error during transcription";
-        stopRecording();
+    socket.value.onclose = (event) => {
+      if (event.code === 4001) {
+        errorRef.value = event.reason || "Connection closed by server";
       }
-    };
-    socket.value.onclose = () => {
       stopRecording();
     };
     socket.value.onerror = () => {
-      stopRecording();
       errorRef.value = "Service connection error";
+      stopRecording();
     };
   };
   const onMediaRecorderDataAvailable = (event) => __async(this, null, function* () {
     var _a, _b;
-    if (((_a = mediaRecorder.value) == null ? void 0 : _a.state) !== "recording")
+    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);
@@ -9181,20 +9198,29 @@ function useVoiceRecorder(options) {
     (_b = socket.value) == null ? void 0 : _b.send(buffer);
   });
   const startRecording = () => __async(this, null, function* () {
-    mediaStream.value = yield navigator.mediaDevices.getUserMedia({
-      video: false,
-      audio: {
-        channelCount: 1,
-        echoCancellation: true,
-        sampleRate: 16e3
+    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.";
       }
-    });
-    mediaRecorder.value = new MediaRecorder(mediaStream.value, {
-      mimeType: "audio/webm; codecs=opus"
-    });
-    mediaRecorder.value.ondataavailable = onMediaRecorderDataAvailable;
-    mediaRecorder.value.start(timeSliceLength.value);
-    isRecording.value = true;
+    }
   });
   const stopRecording = () => {
     var _a, _b;
@@ -9217,6 +9243,7 @@ function useVoiceRecorder(options) {
     var _a;
     (_a = socket.value) == null ? void 0 : _a.close();
     socket.value = null;
+    isSocketReady.value = false;
   };
   const reset = () => {
     stopRecording();
@@ -9224,9 +9251,11 @@ function useVoiceRecorder(options) {
     transcription.value = "";
     errorRef.value = null;
     isRecording.value = false;
+    isSocketReady.value = false;
   };
   return {
     isRecording,
+    isSocketReady,
     transcription,
     errorRef,
     initSocket,
@@ -9260,6 +9289,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
     const optionsStore = useOptionsStore();
     const {
       isRecording,
+      isSocketReady,
       transcription,
       errorRef,
       initSocket,
@@ -9285,20 +9315,28 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
       return (_a = props.options.labels) != null ? _a : {};
     });
     const description = computed(() => {
-      var _a, _b, _c;
+      var _a, _b;
       if (errorRef.value) {
-        return (_a = labels.value.serviceError) != null ? _a : errorRef.value;
+        return errorRef.value;
       }
-      if (!isRecording.value) {
-        return (_b = labels.value.microphoneOff) != null ? _b : "Microphone is off. Try again.";
+      if (!isSocketReady.value || !isRecording.value) {
+        return (_a = labels.value.connecting) != null ? _a : "Connecting...";
       }
-      return (_c = labels.value.listening) != null ? _c : "Listening...";
+      return (_b = labels.value.listening) != null ? _b : "Listening...";
     });
     watch(transcription, (newValue) => {
       emit("transcript-update", newValue);
     });
-    const handleRecordingButtonClick = () => {
+    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();
@@ -9312,7 +9350,6 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
       );
       const socketUrl = `${voiceServiceUrl}?clientId=${clientId.value}&queryKey=${props.options.queryKey}&languageCode=${(_a = props.options.language) != null ? _a : "en-US"}&connectionType=write-first`;
       initSocket(socketUrl);
-      (_b = voiceSearchProgressBar.value) == null ? void 0 : _b.startProgressBar();
       setTimeout(() => {
         stopSocketConnection();
         handleOnStopEvent();
@@ -19045,6 +19082,15 @@ const processDisplayCondition = (displayCondition, doc = {}) => {
       return false;
   }
 };
+function shouldDisplay(displayOpt, doc) {
+  if (!displayOpt)
+    return true;
+  if (typeof displayOpt === "function") {
+    return displayOpt(doc);
+  }
+  const rules = Array.isArray(displayOpt) ? displayOpt : [displayOpt];
+  return rules.every((rule2) => processDisplayCondition(rule2, doc));
+}
 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;
@@ -19861,7 +19907,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
       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;
@@ -20184,7 +20230,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
       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) {
@@ -20262,10 +20308,6 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     const badgeOptions = computed(() => {
       return __spreadProps(__spreadValues({}, 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];
     });
@@ -20285,12 +20327,6 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
         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);
@@ -20309,12 +20345,42 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     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 = () => __async(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 }],
@@ -20330,9 +20396,9 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           (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"]);
@@ -20342,14 +20408,14 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
           (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, {
@@ -20362,6 +20428,24 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
             ]), 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",
@@ -21762,8 +21846,8 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     const facetKeyClass = computed(() => `lupa-facet-active-filter-${props.filter.key}`);
     const { searchResultOptions } = storeToRefs(useOptionsStore());
     const units = computed(() => {
-      var _a;
-      return (_a = searchResultOptions.value.filters.facets.stats.units) != null ? _a : {};
+      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 : {};
     });
     function handleClick() {
       emit("remove", { filter: props.filter });
@@ -25374,14 +25458,9 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       const enhancementData = (_d = (_c = dynamicDataIdMap.value) == null ? void 0 : _c[(_b = props.item) == null ? void 0 : _b.id]) != null ? _d : {};
       return __spreadValues(__spreadValues({}, 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);
     });
@@ -25509,15 +25588,21 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       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 = () => __async(this, null, function* () {
-      isInStock.value = props.options.isInStock ? yield processIsInStock() : true;
-    });
     const handleClick = () => {
       var _a, _b, _c, _d;
       const event = {

package/dist/src/composables/useVoiceRecorder.d.ts

@@ -1,6 +1,7 @@
 import { VoiceSearchOptions } from '../types/search-box/SearchBoxOptions';
 export declare function useVoiceRecorder(options: VoiceSearchOptions): {
     isRecording: import("vue").Ref<boolean>;
+    isSocketReady: import("vue").Ref<boolean>;
     transcription: import("vue").Ref<string>;
     errorRef: import("vue").Ref<string>;
     initSocket: (url: string, onMessage?: (transcription: string) => void) => void;

package/dist/src/types/DocumentElement.d.ts

@@ -10,6 +10,7 @@ export declare enum DocumentElementType {
     ADDTOCART = "addToCart",
     CUSTOM_HTML = "customHtml"
 }
+export type DisplayOption<T = any> = DisplayCondition | DisplayCondition[] | ((document: T) => boolean);
 export type DisplayCondition = {
     condition: 'exists' | 'notExists' | 'equals' | 'notEquals' | 'greaterThan' | 'lessThan' | 'greaterThanOrEquals' | 'lessThanOrEquals';
     fields: (string | number)[];
@@ -21,7 +22,7 @@ export type DynamicAttribute = {
 export type DocumentElementBase<T = any> = {
     type: DocumentElementType;
     key?: string;
-    display?: DisplayCondition | ((document: T) => boolean);
+    display?: DisplayOption<T>;
     isHtml?: boolean;
     group?: string;
     dynamic?: boolean;

package/dist/src/types/search-box/SearchBoxOptions.d.ts

@@ -36,8 +36,10 @@ export type SearchBoxOptionLinks = {
 };
 export type VoiceSearchLabels = {
     listening?: string;
-    microphoneOff?: string;
     serviceError?: string;
+    connecting?: string;
+    microphoneNotFound?: string;
+    microphoneNotAllowed?: string;
 };
 export type VoiceSearchOptions = {
     enabled: boolean;
@@ -45,6 +47,7 @@ export type VoiceSearchOptions = {
     stopDelay?: number;
     timesliceLimit?: number;
     timesliceLength?: number;
+    sampleRate?: number;
     labels?: VoiceSearchLabels;
     language?: string;
     customVoiceServiceUrl?: string;

package/dist/src/utils/render.utils.d.ts

@@ -1,4 +1,5 @@
-import { DisplayCondition, DynamicAttribute } from '../types/DocumentElement';
+import { DisplayCondition, DynamicAttribute, DisplayOption } from '../types/DocumentElement';
 export declare const renderHtmlTemplate: (template: string, document?: Record<string, unknown>) => string;
 export declare const getDynamicAttributes: (dynamicAttributes?: DynamicAttribute[], document?: Record<string, unknown>) => {};
 export declare const processDisplayCondition: (displayCondition: DisplayCondition, doc?: Record<string, unknown>) => boolean;
+export declare function shouldDisplay<T = any>(displayOpt: DisplayOption<T> | undefined, doc: Record<string, unknown>): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/vue",
-  "version": "0.18.4",
+  "version": "0.19.0",
   "main": "dist/lupaSearch.mjs",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/src/index.d.ts",