@getlupa/client 1.18.5 → 1.19.0

package/dist/lupaSearch.iife.js

@@ -12588,7 +12588,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;
@@ -14328,8 +14328,8 @@ var __async = (__this, __arguments, generator) => {
     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",
@@ -14370,7 +14370,7 @@ var __async = (__this, __arguments, generator) => {
         }
       };
       const startProgressBar = () => {
-        if (!progressBar.value || !props.isRecording) {
+        if (!progressBar.value) {
           return;
         }
         const duration = props.timesliceLimit * props.timeSliceLength;
@@ -14428,6 +14428,7 @@ var __async = (__this, __arguments, generator) => {
     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(() => {
@@ -14440,35 +14441,51 @@ var __async = (__this, __arguments, generator) => {
     });
     const initSocket = (url, onMessage) => {
       socket.value = new WebSocket(url);
-      socket.value.onopen = () => __async2(this, null, function* () {
+      socket.value.onmessage = (event) => __async2(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) => __async2(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);
@@ -14477,20 +14494,29 @@ var __async = (__this, __arguments, generator) => {
       (_b = socket.value) == null ? void 0 : _b.send(buffer);
     });
     const startRecording = () => __async2(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;
@@ -14513,6 +14539,7 @@ var __async = (__this, __arguments, generator) => {
       var _a;
       (_a = socket.value) == null ? void 0 : _a.close();
       socket.value = null;
+      isSocketReady.value = false;
     };
     const reset = () => {
       stopRecording();
@@ -14520,9 +14547,11 @@ var __async = (__this, __arguments, generator) => {
       transcription.value = "";
       errorRef.value = null;
       isRecording.value = false;
+      isSocketReady.value = false;
     };
     return {
       isRecording,
+      isSocketReady,
       transcription,
       errorRef,
       initSocket,
@@ -14556,6 +14585,7 @@ var __async = (__this, __arguments, generator) => {
       const optionsStore = useOptionsStore();
       const {
         isRecording,
+        isSocketReady,
         transcription,
         errorRef,
         initSocket,
@@ -14581,20 +14611,28 @@ var __async = (__this, __arguments, generator) => {
         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) => {
         emit2("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();
@@ -14608,7 +14646,6 @@ var __async = (__this, __arguments, generator) => {
         );
         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();
@@ -24291,6 +24328,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;
@@ -25107,7 +25153,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;
@@ -25430,7 +25476,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) {
@@ -25508,10 +25554,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];
       });
@@ -25531,12 +25573,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);
@@ -25555,12 +25591,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 }],
@@ -25576,9 +25642,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"]);
@@ -25588,14 +25654,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, {
@@ -25608,6 +25674,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",
@@ -30604,14 +30688,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);
       });
@@ -30739,15 +30818,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 = {