@envive-ai/react-hooks 0.2.6-alpha-arthur-2 → 0.2.6-alpha.11

package/src/atoms/org/orgAnalyticsConfig.ts

@@ -4,7 +4,7 @@ import {
   OrgAnalyticsAmplitudeConfig,
   OrgAnalyticsCustomerServiceConfig,
   OrgAnalyticsGoogleAnalyticsConfig,
-} from '@envive-ai/types';
+} from 'src/application/models/api/orgAnalyticsConfig';
 
 const internalOrgAnalyticsConfigAtom = atom<OrgAnalyticsConfig | undefined>(undefined);
 

package/src/atoms/search/chatSearch.ts

@@ -0,0 +1,317 @@
+import { UserEventCategory } from "@spiffy-ai/commerce-api-client";
+import { v4 as uuid } from "uuid";
+import { atom } from "jotai";
+import {
+  Message,
+  MessageRole,
+  MessageType,
+  ProductResponseAttributes,
+} from "src/application/models";
+import {
+  messagesAtom,
+  replyEventCategoryAtom,
+  userHasRepliedAtom,
+  userQueryAtom,
+} from "src/atoms/chat";
+import { queueUserEventAtom } from "../chat/messageQueue";
+import { newOrgConfigAtom } from "../org";
+import { ProductFilters } from "./productFilters";
+import { ProductSorter } from "./productSorter";
+import { ChatSearchStateType, ProductSorting } from "./types";
+
+// NOTE:
+// This is a legacy version of search that needs to be decoupled and removed.
+// the new search.ts file in this directory is likely what you're looking for.
+
+export const chatSearchStateAtom = atom<ChatSearchStateType>("entrypoint");
+export const chatSearchHasProductsAtom = atom<boolean>(false);
+export const chatSearchProductSortingAtom = atom<ProductSorting>(
+  ProductSorting.FEATURED
+);
+
+const filterProductList = (message: Message) =>
+  message.type === MessageType.Product && message.metadata.isForGrid === true;
+const filterFilterList = (message: Message) =>
+  message.type === MessageType.ProductSearchFilter;
+
+export type ChatSearchTurn = {
+  id: string;
+  generatedQuery?: string;
+  productCount: number;
+  productList: ProductResponseAttributes["attributes"][];
+  filterList: string[];
+  messages: Message[];
+};
+
+export const chatSearchIsLoadingAtom = atom(false);
+
+const buildChatSearchTurn = (
+  messages: Message[]
+): [string, ChatSearchTurn] | null => {
+  const queryMessage = messages.find(
+    (message) => message.type === MessageType.ProductSearch
+  );
+  if (!queryMessage) {
+    return null;
+  }
+  const { generatedQuery, productCount } = queryMessage.metadata ?? {};
+  const productList = messages
+    .filter(filterProductList)
+    .map((message) => (message as any).metadata);
+  const filterList = messages
+    .filter(filterFilterList)
+    .map((message) => message.metadata.filterName);
+  return [
+    queryMessage.id,
+    {
+      id: queryMessage.id,
+      generatedQuery,
+      productCount: productCount || productList.length,
+      productList,
+      filterList,
+      messages,
+    },
+  ];
+};
+
+const chatSearchFilterConfigAtom = atom((get) => {
+  const newOrgConfig = get(newOrgConfigAtom);
+  return (
+    newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig?.searchFilterConfig ||
+    []
+  );
+});
+
+const searchMapAtom = atom((get) => {
+  const messages = get(messagesAtom);
+  return Object.fromEntries(
+    messages.map(buildChatSearchTurn).filter((v) => v !== null)
+  );
+});
+
+const internalChatSearchParamsAtom = atom<{
+  id: string | null;
+  query: string | null;
+}>({
+  id: null,
+  query: null,
+});
+
+// Selected filter options with compound objects for better type safety and display
+export type SelectedChatSearchFilterOption = {
+  id: string; // "filterId:filterItemId" - maintains backward compatibility for comparisons
+  displayName: string;
+  filterId: string; // Filter category
+  filterItemId: string; // Filter value
+};
+
+export const selectedFilterOptionsAtom = atom<SelectedChatSearchFilterOption[]>(
+  []
+);
+
+export const additiveDynamicFiltersAtom = atom((get) => {
+  const newOrgConfig = get(newOrgConfigAtom);
+  return (
+    newOrgConfig?.frontendConfig?.uiConfigs?.searchConfig
+      ?.additiveDynamicFilters ?? false
+  );
+});
+
+export const createChatSearchFilterOption = (
+  filterId: string,
+  filterItemId: string,
+  displayName: string
+): SelectedChatSearchFilterOption => ({
+  id: `${filterId}:${filterItemId}`,
+  displayName,
+  filterId,
+  filterItemId,
+});
+
+const handleSearchAtom = atom(null, (get, set, message: Message) => {
+  if (message.type !== MessageType.Search) {
+    return;
+  }
+
+  const querySearch = message.metadata.searchTerm;
+
+  set(replyEventCategoryAtom, UserEventCategory.Search);
+  set(userQueryAtom, querySearch);
+  set(messagesAtom, [...get(messagesAtom), [message]]);
+  set(userHasRepliedAtom, true);
+
+  set(queueUserEventAtom, {
+    eventId: message.id,
+    category: UserEventCategory.Search,
+    createdAt: message.createdAt,
+    attributes: {
+      searchTerm: message.metadata.searchTerm,
+      selectedFilters: message.metadata.selectedFilters,
+    },
+  });
+});
+
+// This internal atom is used to store the search params
+export const chatSearchParamsAtom = atom(
+  (get) => get(internalChatSearchParamsAtom),
+  (_, set, value: { id: string | null; query: string | null }) => {
+    set(internalChatSearchParamsAtom, value);
+  }
+);
+
+export const chatSearchQueryAtom = atom(
+  (get) => get(chatSearchParamsAtom)?.query ?? null,
+  (get, set, value: string | null) => {
+    const searchParams = get(chatSearchParamsAtom);
+    set(chatSearchParamsAtom, { id: searchParams.id, query: value });
+  }
+);
+
+export const chatSearchIdAtom = atom(
+  (get) => get(chatSearchParamsAtom)?.id ?? null,
+  (get, set, value: string | null) => {
+    const searchParams = get(chatSearchParamsAtom);
+    set(chatSearchParamsAtom, { id: value, query: searchParams.query });
+  }
+);
+
+export const ChatSearchTurnAtom = atom((get) => {
+  const searchFilterConfig = get(chatSearchFilterConfigAtom);
+  const searchMap = get(searchMapAtom);
+  const chatSearchId = get(chatSearchIdAtom);
+  if (!chatSearchId) {
+    return null;
+  }
+  const ChatSearchTurn = searchMap[chatSearchId];
+  if (!ChatSearchTurn) {
+    return null;
+  }
+  const productSorting = get(chatSearchProductSortingAtom);
+  const selectedFilterOptions = get(selectedFilterOptionsAtom);
+  const additiveDynamicFilters = get(additiveDynamicFiltersAtom);
+  const filteredProducts = ProductFilters.filterProducts(
+    ChatSearchTurn.productList,
+    searchFilterConfig,
+    selectedFilterOptions,
+    additiveDynamicFilters
+  );
+
+  const filteredAndSortedProducts = ProductSorter.sort(
+    filteredProducts,
+    productSorting
+  );
+
+  return {
+    ...searchMap[chatSearchId],
+    productList: filteredAndSortedProducts,
+    productCount: filteredAndSortedProducts.length,
+  };
+});
+
+// TODO: Work on deprecating this atom in favor of using ChatSearchTurnAtom directly
+export const chatSearchProducts = atom((get) => {
+  const ChatSearchTurn = get(ChatSearchTurnAtom);
+  return ChatSearchTurn?.productList ?? [];
+});
+
+export const chatSearchFiltersAtom = atom((get) => {
+  const searchFilterConfig = get(chatSearchFilterConfigAtom);
+  const searchMap = get(searchMapAtom);
+  const chatSearchId = get(chatSearchIdAtom);
+
+  if (chatSearchId && searchMap[chatSearchId]) {
+    const products = searchMap[chatSearchId].productList;
+    const selectedFilterOptions = get(selectedFilterOptionsAtom);
+    return ProductFilters.getFiltersForProducts(
+      products,
+      searchFilterConfig,
+      selectedFilterOptions
+    );
+  }
+  return [];
+});
+
+// For search we use the following query params:
+// es: true - this indicates that we are in a search state
+// esq: query - this is the current search query
+// esi: search id - this is the unique id for the search results that we are displaying. It is pulled from the message id from the turn that includes the search results
+
+export const setSearchParams = (query: string) => {
+  const url = new URL(window.location.href);
+  url.searchParams.set("es", "true");
+  url.searchParams.set("esq", query);
+  window.history.pushState({}, "", url);
+};
+
+export const getSearchParamsAtom = atom(() => {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    es: params.get("es"),
+    esq: params.get("esq"),
+  };
+});
+
+export const initiateChatSearchAtom = atom(null, (_, set, query: string) => {
+  set(chatSearchIsLoadingAtom, true);
+  // Update URL and manually trigger state change (since pushState doesn't trigger popstate)
+  const url = new URL(window.location.href);
+  url.searchParams.set("es", "true");
+  url.searchParams.set("esq", query);
+  window.history.pushState({}, "", url);
+
+  // Manually trigger page variant re-evaluation by dispatching a popstate event
+  // This ensures the page variant system detects the URL change and mounts search results
+  window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
+
+  set(chatSearchParamsAtom, { id: null, query });
+  set(handleSearchAtom, {
+    id: uuid(),
+    role: MessageRole.User,
+    type: MessageType.Search,
+    createdAt: new Date().toISOString(),
+    metadata: {
+      searchTerm: query,
+      // Enabling this will enable the new backend search
+      selectedFilters: [],
+    },
+  });
+});
+
+export const handleSearchResultsAtom = atom(
+  null,
+  (get, set, message: Message | undefined) => {
+    if (!message || message.type !== MessageType.ProductSearch) {
+      return;
+    }
+
+    const { productCount, generatedQuery } = message.metadata;
+    if (productCount !== 0) {
+      // Clear the filter options when we get new products
+      set(selectedFilterOptionsAtom, []);
+      // TODO: Should we still do any of these things?
+      set(chatSearchStateAtom, "product-page");
+      const currentSearchParams = get(chatSearchParamsAtom);
+      const url = new URL(window.location.href);
+      url.searchParams.set("es", "true");
+      url.searchParams.set("esq", generatedQuery);
+      url.searchParams.set("esi", message.id);
+      window.history.pushState({}, "", url);
+      if (currentSearchParams.id === null) {
+        // If the id is null, we need to replace the state
+        window.history.replaceState(null, "", url);
+      } else {
+        // If the query is different, we need to push a new state
+        window.history.pushState(null, "", url);
+      }
+      set(chatSearchParamsAtom, { id: message.id, query: generatedQuery });
+    }
+  }
+);
+
+export const setChatSearchParamsAtom = atom(null, (_, set, query: string) => {
+  const url = new URL(window.location.href);
+  url.searchParams.set("es", "true");
+  url.searchParams.set("esq", query);
+  window.history.pushState({}, "", url);
+  set(chatSearchParamsAtom, { id: null, query });
+});

package/src/atoms/search/index.ts

@@ -1 +1,2 @@
+export * from './chatSearch';
 export * from './searchAPI';

package/src/atoms/search/productFilters.ts

@@ -1,7 +1,8 @@
-import { ChatSearchFilter, ChatSearchFilterItem } from "@envive-ai/types";
-import { FilterAttribute, ProductResponseAttributes } from "src/types";
-import { SelectedFilterOption } from "src/atoms/search/searchAPI";
-import { formatFilterDisplayName } from "./utils";
+import { ProductResponseAttributes } from 'src/application/models';
+import { FilterAttribute } from 'src/contexts/types';
+import { SelectedFilterOption } from 'src/atoms/search/searchAPI';
+import { ChatSearchFilter, ChatSearchFilterItem } from './types';
+import { formatFilterDisplayName } from './utils';
 
 const getPriceBucket = (price: number, bucketSize: number) => {
   const bucket = Math.floor(price / bucketSize);
@@ -12,30 +13,27 @@ const isStringArray = (value: unknown): value is string[] => {
   if (!Array.isArray(value)) {
     return false;
   }
-  return value.every((item) => typeof item === "string");
+  return value.every((item) => typeof item === 'string');
 };
 
-type FilterSortFunction = (
-  a: ChatSearchFilterItem,
-  b: ChatSearchFilterItem
-) => number;
+type FilterSortFunction = (a: ChatSearchFilterItem, b: ChatSearchFilterItem) => number;
 
 const sortFilter = (filterConfig: FilterAttribute): FilterSortFunction => {
-  if (filterConfig.type === "price") {
+  if (filterConfig.type === 'price') {
     return (a, b) => Number(a.filterItemId) - Number(b.filterItemId);
   }
-  if (filterConfig.type === "dynamic") {
-    if (filterConfig.sorting.type === "alphabetic") {
+  if (filterConfig.type === 'dynamic') {
+    if (filterConfig.sorting.type === 'alphabetic') {
       return (a, b) => a.displayName.localeCompare(b.displayName);
     }
     // Sort by the number of products, if they match, sort by alphabetical
-    if (filterConfig.sorting.type === "productCount") {
+    if (filterConfig.sorting.type === 'productCount') {
       return (a, b) =>
         a.productCount === b.productCount
           ? a.displayName.localeCompare(b.displayName)
           : b.productCount - a.productCount;
     }
-    if (filterConfig.sorting.type === "custom") {
+    if (filterConfig.sorting.type === 'custom') {
       const sortedKeys = filterConfig.sorting.map;
       return (a, b) => {
         if (sortedKeys[a.displayName] && sortedKeys[b.displayName]) {
@@ -55,14 +53,14 @@ const sortFilter = (filterConfig: FilterAttribute): FilterSortFunction => {
       };
     }
   }
-  throw new Error("Invaalid search filter configuration");
+  throw new Error('Invaalid search filter configuration');
 };
 
 export class ProductFilters {
   static getFiltersForProducts(
-    products: ProductResponseAttributes["attributes"][],
+    products: ProductResponseAttributes['attributes'][],
     filterConfigs: FilterAttribute[],
-    selectedFilterOptions: SelectedFilterOption[]
+    selectedFilterOptions: SelectedFilterOption[],
   ): ChatSearchFilter[] {
     if (!products || products.length === 0) {
       return [];
@@ -72,29 +70,23 @@ export class ProductFilters {
       products.reduce(
         (acc, product) => {
           // Price has special handling for the filters
-          if (filterConfig.type === "price") {
+          if (filterConfig.type === 'price') {
             const priceBucket = getPriceBucket(
               product.salePrice ?? product.originalPrice ?? 0,
-              filterConfig.bucketSize
+              filterConfig.bucketSize,
             );
             const current = acc.map[priceBucket] ?? {
               filterItemId: priceBucket,
-              displayName: `$${priceBucket}-$${
-                priceBucket + filterConfig.bucketSize
-              }`,
+              displayName: `$${priceBucket}-$${priceBucket + filterConfig.bucketSize}`,
               productCount: 0,
             };
-            acc.map[priceBucket] = {
-              ...current,
-              productCount: current.productCount + 1,
-            };
+            acc.map[priceBucket] = { ...current, productCount: current.productCount + 1 };
             return acc;
           }
 
           // Assume that the "attribute" is an array of values
           const attributeValues =
-            (product.filters && product.filters?.[filterConfig.attribute]) ??
-            [];
+            (product.filters && product.filters?.[filterConfig.attribute]) ?? [];
           if (isStringArray(attributeValues)) {
             attributeValues.forEach((val) => {
               const normalizedVal = val.toLowerCase();
@@ -103,10 +95,7 @@ export class ProductFilters {
                 displayName: formatFilterDisplayName(val), // Keep original case for display
                 productCount: 0,
               };
-              acc.map[normalizedVal] = {
-                ...current,
-                productCount: current.productCount + 1,
-              };
+              acc.map[normalizedVal] = { ...current, productCount: current.productCount + 1 };
             });
           }
 
@@ -115,44 +104,40 @@ export class ProductFilters {
         {
           filterConfig,
           map: {} as Record<string, ChatSearchFilterItem>,
-        }
-      )
+        },
+      ),
     );
 
-    const transformedFilters: ChatSearchFilter[] = filters.map(
-      ({ filterConfig, map }) => ({
-        filterId: filterConfig.filterId,
-        displayName: filterConfig.displayName,
-        items: Object.values(map)
-          .map((filter) => ({
-            filterItemId: filter.filterItemId,
-            displayName: filter.displayName,
-            productCount: filter.productCount,
-            isSelected:
-              selectedFilterOptions.some(
-                (option) =>
-                  option.id ===
-                  `${filterConfig.filterId}:${filter.filterItemId}`
-              ) ?? false,
-          }))
-          .sort(sortFilter(filterConfig)),
-      })
-    );
+    const transformedFilters: ChatSearchFilter[] = filters.map(({ filterConfig, map }) => ({
+      filterId: filterConfig.filterId,
+      displayName: filterConfig.displayName,
+      items: Object.values(map)
+        .map((filter) => ({
+          filterItemId: filter.filterItemId,
+          displayName: filter.displayName,
+          productCount: filter.productCount,
+          isSelected:
+            selectedFilterOptions.some(
+              (option) => option.id === `${filterConfig.filterId}:${filter.filterItemId}`,
+            ) ?? false,
+        }))
+        .sort(sortFilter(filterConfig)),
+    }));
 
     return [...transformedFilters];
   }
 
   static filterProducts(
-    products: ProductResponseAttributes["attributes"][],
+    products: ProductResponseAttributes['attributes'][],
     filterConfigs: FilterAttribute[],
     selectedFilterOptions: SelectedFilterOption[],
-    additiveDynamicFilters = false // Set this to true to restore the original behavior where stacking filters has OR logic.
+    additiveDynamicFilters = false, // Set this to true to restore the original behavior where stacking filters has OR logic.
   ) {
     const selectedFilters = filterConfigs
       .map((filterConfig) => ({
         filterConfig,
         hasSelectedOptions: selectedFilterOptions.some(
-          (option) => option.filterId === filterConfig.filterId
+          (option) => option.filterId === filterConfig.filterId,
         ),
       }))
       .filter(({ hasSelectedOptions }) => hasSelectedOptions);
@@ -165,20 +150,20 @@ export class ProductFilters {
               return acc;
             }
             // Price is special
-            if (selectedFilter.filterConfig.type === "price") {
+            if (selectedFilter.filterConfig.type === 'price') {
               const priceBucket = getPriceBucket(
                 product.salePrice ?? product.originalPrice ?? 0,
-                selectedFilter.filterConfig.bucketSize
+                selectedFilter.filterConfig.bucketSize,
               );
               const matchesPriceFilter = selectedFilterOptions.some(
-                (option) => option.id === `price:${priceBucket}`
+                (option) => option.id === `price:${priceBucket}`,
               );
               if (!matchesPriceFilter) {
                 return false;
               }
             }
 
-            if (selectedFilter.filterConfig.type === "dynamic") {
+            if (selectedFilter.filterConfig.type === 'dynamic') {
               // dynamic is misleading here. Its not just dynamic filters, but static filters because the config counts static filters as type: dynamic.
               const { filterId, attribute } = selectedFilter.filterConfig;
               const attributeValues = product.filters?.[attribute];
@@ -187,10 +172,8 @@ export class ProductFilters {
                 return false;
               }
 
-              const isDynamicFilter =
-                selectedFilter.filterConfig.attribute === "dynamic"; // True dynamic filters (the ones that appear beneath the search input)
-              const isSubtractiveLogic =
-                isDynamicFilter && !additiveDynamicFilters;
+              const isDynamicFilter = selectedFilter.filterConfig.attribute === 'dynamic'; // True dynamic filters (the ones that appear beneath the search input)
+              const isSubtractiveLogic = isDynamicFilter && !additiveDynamicFilters;
 
               if (isSubtractiveLogic) {
                 // AND logic for subtractive dynamic filters and between static filter categories
@@ -198,11 +181,8 @@ export class ProductFilters {
                   .filter((option) => option.filterId === filterId)
                   .map((option) => option.filterItemId.toLowerCase());
 
-                const hasAllSelectedValues = selectedOptionsForThisFilter.every(
-                  (selectedValue) =>
-                    attributeValues.some(
-                      (val) => val.toLowerCase() === selectedValue
-                    )
+                const hasAllSelectedValues = selectedOptionsForThisFilter.every((selectedValue) =>
+                  attributeValues.some((val) => val.toLowerCase() === selectedValue),
                 );
 
                 if (!hasAllSelectedValues) {
@@ -212,8 +192,8 @@ export class ProductFilters {
                 // OR logic for static filters in the sidebar within a category.
                 const matches = attributeValues.some((val) =>
                   selectedFilterOptions.some(
-                    (option) => option.id === `${filterId}:${val.toLowerCase()}`
-                  )
+                    (option) => option.id === `${filterId}:${val.toLowerCase()}`,
+                  ),
                 );
                 if (!matches) {
                   return false;
@@ -221,7 +201,7 @@ export class ProductFilters {
               }
             }
             return true;
-          }, true)
+          }, true),
         );
   }
 }

package/src/atoms/search/productSorter.ts

@@ -1,5 +1,5 @@
-import { ProductResponseAttributes } from '@envive-ai/types';
-import { ProductSorting } from '@envive-ai/types';
+import { ProductResponseAttributes } from 'src/application/models';
+import { ProductSorting } from './types';
 
 export class ProductSorter {
   static sort(products: ProductResponseAttributes['attributes'][], sorting: ProductSorting) {