@searchstax-inc/searchstudio-ux-vue 4.2.34 → 4.2.50

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Change Log
 
 All notable changes to the "searchstudio-ux-vue" project will be documented in this file.
+## [4.2.50]
+### Features
+- Added conversation functionality for Vue and React
+- Added support for grouped results
+
+### Bug Fixes
+- Security fixes
+
+## [4.2.36]
+### Bug Fixes
+- Facets template now supports custom variables
+- Unmapped fields now persist data types correctly
+
 ## [4.2.34]
 ### Bug Fixes
 - Addressed some vulnerabilities

package/README.md

@@ -222,6 +222,51 @@ It receives the following props:
           <button class="searchstax-answer-load-more-button" @click="showMore">Show More</button>
         </div>
       </div>
+      <div
+        v-if="!answerData.answerLoading && !answerData.showMoreButtonVisible && answerData.isConversation"
+        :class="{
+          'searchstax-conversation-container': true,
+          'searchstax-conversation-container-full-screen': answerData.isFullScreenConversation
+        }"
+      >
+        <div v-if="answerData.showConversationHeader" class="searchstax-conversation-full-screen-header">
+          <button
+            type="button"
+            class="searchstax-conversation-back-to-results"
+            @click="() => exitConversation?.()"
+          >
+            Back to results
+          </button>
+          <div class="searchstax-conversation-full-screen-title">Ask SearchStax</div>
+        </div>
+        <div
+          v-if="answerData.showConversationMessages && answerData.conversationMessages?.length"
+          class="searchstax-conversation-messages-container"
+        >
+          <div
+            v-for="(message, index) in answerData.conversationMessages"
+            :key="message.conversationMessageId ?? index"
+            :class="['searchstax-conversation-messages-container-message', message.messageClass]"
+            v-html="message.formattedMessage"
+          ></div>
+        </div>
+        <div v-if="answerData.showConversationInput" class="searchstax-conversation-input-container">
+          <input
+            type="text"
+            id="searchstax-conversation-input"
+            class="searchstax-conversation-input"
+            placeholder="Ask a follow-up question"
+            :ref="(el) => setConversationInputRef?.(el as Element | null)"
+            @keydown="handleConversationInputKeydown"
+          />
+          <button
+            type="button"
+            class="searchstax-conversation-search-icon searchstax-search-icon"
+            aria-label="Submit follow-up question"
+            @click="handleConversationSubmitClick"
+          ></button>
+        </div>
+      </div>
       <div class="searchstax-answer-footer">
         <div id="feedbackWidgetContainer"></div>
         <div class="searchstax-lightweight-widget-separator-inline"></div>
@@ -1140,7 +1185,7 @@ It receives following props:
         <div
           class="searchstax-facets-pill searchstax-facets-pill-facets"
           v-for="facet in selectedFacetsCheckboxes"
-          :key="facet.value"
+          :key="String(facet.value)"
           @click="unselectFacet(facet)"
         >
           <div class="searchstax-facets-pill-label">{{ facet.value }} ({{ facet.count }})</div>

package/dist/@searchstax-inc/components/SearchstaxAnswerWidget.vue.d.ts

@@ -2,6 +2,8 @@ import { IFeedbackWidgetProperties } from '@searchstax-inc/searchstudio-ux-js';
 interface Props {
     showMoreAfterWordCount?: number;
     feedbackwidget?: IFeedbackWidgetProperties;
+    isFullScreenConversation?: boolean;
+    emptyConversationMessageOverride?: string;
     testString?: string;
 }
 declare var __VLS_4: {
@@ -11,6 +13,7 @@ declare var __VLS_4: {
         isFullScreenConversation?: boolean;
         showConversationHeader?: boolean;
         showConversationMessages?: boolean;
+        showConversationInput?: boolean;
         conversationMessages?: {
             formattedMessage: string;
             messageClass?: string;
@@ -41,12 +44,12 @@ declare var __VLS_4: {
             unit: string | null;
             unmappedFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
                 isImage?: boolean;
             }[];
             allFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
             }[];
         }[];
         isLastPage: boolean;
@@ -101,6 +104,9 @@ declare var __VLS_4: {
         locationError: boolean;
     };
     showMore: (event: Event) => void;
+    submitConversationQuestion: (question: string) => void;
+    exitConversation: () => void;
+    setConversationInputRef: (el: Element | null) => void;
 };
 type __VLS_Slots = {} & {
     answer?: (props: typeof __VLS_4) => any;

package/dist/@searchstax-inc/components/SearchstaxExternalPromotionsWidget.vue.d.ts

@@ -30,12 +30,12 @@ declare var __VLS_4: {
             unit: string | null;
             unmappedFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
                 isImage?: boolean;
             }[];
             allFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
             }[];
         }[];
         isLastPage: boolean;

package/dist/@searchstax-inc/components/SearchstaxFacetsWidget.vue.d.ts

@@ -1,4 +1,4 @@
-import { IFacetValueData, IFacetData, IFacetValue } from '@searchstax-inc/searchstudio-ux-js';
+import { IFacetValueData, IFacetData, ISelectedFacetTemplateData } from '@searchstax-inc/searchstudio-ux-js';
 interface Props {
     facetingType: "and" | "or" | "showUnavailable" | "tabs";
     itemsPerPageDesktop: number;
@@ -50,12 +50,12 @@ declare var __VLS_9: {
             unit: string | null;
             unmappedFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
                 isImage?: boolean;
             }[];
             allFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
             }[];
         }[];
         isLastPage: boolean;
@@ -114,8 +114,8 @@ declare var __VLS_9: {
     isChecked: (facetValue: IFacetValueData) => boolean;
     selectFacet: (index: string, event: Event, data: IFacetValueData, isInput: boolean) => void;
     showMoreLessDesktop: (e: Event, data: IFacetData) => void;
-    facetContainers: any[];
-    onUpdateRefDesktop: (el: Element | any, facetValue: IFacetValueData) => any[];
+    facetContainers: Record<string, Element>;
+    onUpdateRefDesktop: (el: Element | any, facetValue: IFacetValueData) => Record<string, Element>;
     onUpdateRef: (facets: {
         facetValue: string;
         element: Element;
@@ -164,12 +164,12 @@ declare var __VLS_9: {
             unit: string | null;
             unmappedFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
                 isImage?: boolean;
             }[];
             allFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
             }[];
         }[];
         isLastPage: boolean;
@@ -223,23 +223,45 @@ declare var __VLS_9: {
         shouldShowLocationDistanceDropdown: boolean;
         locationError: boolean;
     };
-    selectedFacetsCheckboxes: {
+    selectedFacetsCheckboxes: ({
+        [x: string]: unknown;
         value: string;
         type: "checkbox";
         parentName: string;
         count: number;
-    }[];
+        facet: {
+            [x: string]: unknown;
+            label: string;
+            name: string;
+            showingAllFacets?: boolean;
+            hasMoreFacets?: boolean;
+        };
+    } | {
+        [x: string]: unknown;
+        valueFrom: string;
+        type: "range";
+        valueTo: string;
+        parentName: string;
+        count: number;
+        facet: {
+            [x: string]: unknown;
+            label: string;
+            name: string;
+            showingAllFacets?: boolean;
+            hasMoreFacets?: boolean;
+        };
+    })[];
     isNotDeactivated: (name: string) => boolean;
     toggleFacetGroup: (name: string) => void;
     isChecked: (facetValue: IFacetValueData) => boolean;
     selectFacet: (index: string, event: Event, data: IFacetValueData, isInput: boolean) => void;
     showMoreLessDesktop: (e: Event, data: IFacetData) => void;
-    facetContainers: any[];
+    facetContainers: Record<string, Element>;
     openOverlay: () => void;
-    unselectFacet: (facet: IFacetValue) => void;
+    unselectFacet: (facet: ISelectedFacetTemplateData) => void;
     unselectAll: () => void;
     closeOverlay: () => void;
-    onUpdateRefMobile: (el: Element | any, facetValue: IFacetValueData) => any[];
+    onUpdateRefMobile: (el: Element | any, facetValue: IFacetValueData) => Record<string, Element>;
     onUpdateRef: (facets: {
         facetValue: string;
         element: Element;

package/dist/@searchstax-inc/components/SearchstaxLocationWidget.vue.d.ts

@@ -34,12 +34,12 @@ declare var __VLS_4: {
             unit: string | null;
             unmappedFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
                 isImage?: boolean;
             }[];
             allFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
             }[];
         }[];
         isLastPage: boolean;

package/dist/@searchstax-inc/components/SearchstaxPaginationWidget.vue.d.ts

@@ -25,12 +25,12 @@ declare var __VLS_4: {
             unit: string | null;
             unmappedFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
                 isImage?: boolean;
             }[];
             allFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
             }[];
         }[];
         isLastPage: boolean;
@@ -113,12 +113,12 @@ declare var __VLS_4: {
             unit: string | null;
             unmappedFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
                 isImage?: boolean;
             }[];
             allFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
             }[];
         }[];
         isLastPage: boolean;

package/dist/@searchstax-inc/components/SearchstaxRelatedSearchesWidget.vue.d.ts

@@ -35,12 +35,12 @@ declare var __VLS_4: {
             unit: string | null;
             unmappedFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
                 isImage?: boolean;
             }[];
             allFields: {
                 key: string;
-                value: string | string[] | boolean;
+                value: import('@searchstax-inc/searchstudio-ux-js').ISearchstaxFieldValue;
             }[];
         }[];
         isLastPage: boolean;