@envive-ai/react-hooks 0.1.3 → 0.1.5

package/src/atoms/search/chatSearch.ts

@@ -1,55 +1,63 @@
-import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
-import { v4 as uuid } from 'uuid';
-import { atom } from 'jotai';
+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';
+} from "src/application/models";
 import {
   messagesAtom,
   replyEventCategoryAtom,
   userHasRepliedAtom,
   userQueryAtom,
-} from 'src/atoms/chat';
-import { queueUserEventAtom } from '../chat/messageQueue';
-import { orgUIConfigAtom } from '../org';
-import { ProductFilters } from './productFilters';
-import { ProductSorter } from './productSorter';
-import { ChatSearchStateType, ProductSorting } from './types';
+} from "src/atoms/chat";
+import { queueUserEventAtom } from "../chat/messageQueue";
+import { orgUIConfigAtom } 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 chatSearchStateAtom = atom<ChatSearchStateType>("entrypoint");
 export const chatSearchHasProductsAtom = atom<boolean>(false);
-export const chatSearchProductSortingAtom = atom<ProductSorting>(ProductSorting.FEATURED);
+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;
+const filterFilterList = (message: Message) =>
+  message.type === MessageType.ProductSearchFilter;
 
 export type ChatSearchTurn = {
   id: string;
   generatedQuery?: string;
   productCount: number;
-  productList: ProductResponseAttributes['attributes'][];
+  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);
+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 ?? {};
-  // @ts-expect-error: product has metadata
-  const productList = messages.filter(filterProductList).map((message) => message.metadata);
+  const productList = messages
+    .filter(filterProductList)
+    .map((message) => (message as any).metadata);
   const filterList = messages
     .filter(filterFilterList)
     .map((message) => message.metadata.filterName);
@@ -67,13 +75,15 @@ const buildChatSearchTurn = (messages: Message[]): [string, ChatSearchTurn] | nu
 };
 
 const chatSearchFilterConfigAtom = atom((get) => {
-  const { searchConfig } = get(orgUIConfigAtom);
-  return searchConfig.searchFilterConfig;
+  const orgUIConfig = get(orgUIConfigAtom);
+  return orgUIConfig?.searchConfig?.searchFilterConfig || [];
 });
 
 const searchMapAtom = atom((get) => {
   const messages = get(messagesAtom);
-  return Object.fromEntries(messages.map(buildChatSearchTurn).filter((v) => v !== null));
+  return Object.fromEntries(
+    messages.map(buildChatSearchTurn).filter((v) => v !== null)
+  );
 });
 
 const internalChatSearchParamsAtom = atom<{
@@ -92,17 +102,19 @@ export type SelectedChatSearchFilterOption = {
   filterItemId: string; // Filter value
 };
 
-export const selectedFilterOptionsAtom = atom<SelectedChatSearchFilterOption[]>([]);
+export const selectedFilterOptionsAtom = atom<SelectedChatSearchFilterOption[]>(
+  []
+);
 
 export const additiveDynamicFiltersAtom = atom((get) => {
-  const { searchConfig } = get(orgUIConfigAtom);
-  return searchConfig.additiveDynamicFilters ?? false;
+  const orgUIConfig = get(orgUIConfigAtom);
+  return orgUIConfig?.searchConfig?.additiveDynamicFilters ?? false;
 });
 
 export const createChatSearchFilterOption = (
   filterId: string,
   filterItemId: string,
-  displayName: string,
+  displayName: string
 ): SelectedChatSearchFilterOption => ({
   id: `${filterId}:${filterItemId}`,
   displayName,
@@ -138,7 +150,7 @@ export const chatSearchParamsAtom = atom(
   (get) => get(internalChatSearchParamsAtom),
   (_, set, value: { id: string | null; query: string | null }) => {
     set(internalChatSearchParamsAtom, value);
-  },
+  }
 );
 
 export const chatSearchQueryAtom = atom(
@@ -146,7 +158,7 @@ export const chatSearchQueryAtom = atom(
   (get, set, value: string | null) => {
     const searchParams = get(chatSearchParamsAtom);
     set(chatSearchParamsAtom, { id: searchParams.id, query: value });
-  },
+  }
 );
 
 export const chatSearchIdAtom = atom(
@@ -154,7 +166,7 @@ export const chatSearchIdAtom = atom(
   (get, set, value: string | null) => {
     const searchParams = get(chatSearchParamsAtom);
     set(chatSearchParamsAtom, { id: value, query: searchParams.query });
-  },
+  }
 );
 
 export const ChatSearchTurnAtom = atom((get) => {
@@ -175,10 +187,13 @@ export const ChatSearchTurnAtom = atom((get) => {
     ChatSearchTurn.productList,
     searchFilterConfig,
     selectedFilterOptions,
-    additiveDynamicFilters,
+    additiveDynamicFilters
   );
 
-  const filteredAndSortedProducts = ProductSorter.sort(filteredProducts, productSorting);
+  const filteredAndSortedProducts = ProductSorter.sort(
+    filteredProducts,
+    productSorting
+  );
 
   return {
     ...searchMap[chatSearchId],
@@ -204,7 +219,7 @@ export const chatSearchFiltersAtom = atom((get) => {
     return ProductFilters.getFiltersForProducts(
       products,
       searchFilterConfig,
-      selectedFilterOptions,
+      selectedFilterOptions
     );
   }
   return [];
@@ -217,16 +232,16 @@ export const chatSearchFiltersAtom = atom((get) => {
 
 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);
+  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'),
+    es: params.get("es"),
+    esq: params.get("esq"),
   };
 });
 
@@ -234,13 +249,13 @@ 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);
+  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: {} }));
+  window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
 
   set(chatSearchParamsAtom, { id: null, query });
   set(handleSearchAtom, {
@@ -256,38 +271,41 @@ export const initiateChatSearchAtom = atom(null, (_, set, query: string) => {
   });
 });
 
-export const handleSearchResultsAtom = atom(null, (get, set, message: Message | undefined) => {
-  if (!message || message.type !== MessageType.ProductSearch) {
-    return;
-  }
+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);
+    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 });
     }
-    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);
+  url.searchParams.set("es", "true");
+  url.searchParams.set("esq", query);
+  window.history.pushState({}, "", url);
   set(chatSearchParamsAtom, { id: null, query });
 });

package/src/atoms/search/searchAPI.ts

@@ -1,10 +1,10 @@
-import { atom } from 'jotai';
-import { SearchResult, SearchParams } from 'src/application/models/api/search';
-import SearchService from 'src/application/service/searchService';
-import { ProductSorting } from './types';
-import { ProductFilters } from './productFilters';
-import { ProductSorter } from './productSorter';
-import { orgUIConfigAtom } from '../org';
+import { atom } from "jotai";
+import { SearchResult, SearchParams } from "src/application/models/api/search";
+import SearchService from "src/application/service/searchService";
+import { ProductSorting } from "./types";
+import { ProductFilters } from "./productFilters";
+import { ProductSorter } from "./productSorter";
+import { orgUIConfigAtom } from "../org";
 
 export type SelectedFilterOption = {
   id: string; // "filterId:filterItemId" - maintains backward compatibility for comparisons
@@ -27,13 +27,15 @@ export const searchAtom = atom<SearchState>({
   lastQuery: null,
 });
 
-export const searchProductSortingAtom = atom<ProductSorting>(ProductSorting.FEATURED);
+export const searchProductSortingAtom = atom<ProductSorting>(
+  ProductSorting.FEATURED
+);
 export const searchSelectedFiltersAtom = atom<SelectedFilterOption[]>([]);
 
 export const createFilterOption = (
   filterId: string,
   filterItemId: string,
-  displayName: string,
+  displayName: string
 ): SelectedFilterOption => ({
   id: `${filterId}:${filterItemId}`,
   displayName,
@@ -53,7 +55,7 @@ export const searchParamsAtom = atom(
   (get) => get(internalSearchParamsAtom),
   (_, set, value: { id: string | null; query: string | null }) => {
     set(internalSearchParamsAtom, value);
-  },
+  }
 );
 export const internalSearchSystemStateAtom = atom<boolean>(false);
 
@@ -65,9 +67,9 @@ export const searchSystemAtom = atom(
     }
     const stateChangeHandler = () => {
       const params = new URLSearchParams(window.location.search);
-      if (params.get('es') === 'true') {
-        const id = params.get('esi');
-        const query = params.get('esq');
+      if (params.get("es") === "true") {
+        const id = params.get("esi");
+        const query = params.get("esq");
         set(searchParamsAtom, { id, query });
       } else {
         set(searchParamsAtom, { id: null, query: null });
@@ -75,14 +77,14 @@ export const searchSystemAtom = atom(
     };
     if (value) {
       set(internalSearchSystemStateAtom, true);
-      window.addEventListener('popstate', stateChangeHandler);
+      window.addEventListener("popstate", stateChangeHandler);
       // Also trigger the hash change handler to set the initial state
       stateChangeHandler();
     } else {
       set(internalSearchSystemStateAtom, false);
-      window.removeEventListener('popstate', stateChangeHandler);
+      window.removeEventListener("popstate", stateChangeHandler);
     }
-  },
+  }
 );
 
 export const filteredSearchProductsAtom = atom((get) => {
@@ -91,13 +93,13 @@ export const filteredSearchProductsAtom = atom((get) => {
   const selectedFilters = get(searchSelectedFiltersAtom);
   const orgConfig = get(orgUIConfigAtom);
 
-  if (!searchData?.products) return [];
+  if (!searchData?.products || !orgConfig?.searchConfig) return [];
 
   const filteredProducts = ProductFilters.filterProducts(
     searchData.products,
     orgConfig.searchConfig.searchFilterConfig,
     selectedFilters,
-    orgConfig.searchConfig.additiveDynamicFilters,
+    orgConfig.searchConfig.additiveDynamicFilters
   );
 
   return ProductSorter.sort(filteredProducts, sorting);
@@ -108,29 +110,35 @@ export const searchFiltersAtom = atom((get) => {
   const selectedFilters = get(searchSelectedFiltersAtom);
   const orgConfig = get(orgUIConfigAtom);
 
-  if (!searchData?.products) return [];
+  if (!searchData?.products || !orgConfig?.searchConfig) return [];
 
   return ProductFilters.getFiltersForProducts(
     searchData.products,
     orgConfig.searchConfig.searchFilterConfig,
-    selectedFilters,
+    selectedFilters
   );
 });
 
-export const addSearchFilterAtom = atom(null, (get, set, filter: SelectedFilterOption) => {
-  const current = get(searchSelectedFiltersAtom);
-  if (!current.some((f) => f.id === filter.id)) {
-    set(searchSelectedFiltersAtom, [...current, filter]);
+export const addSearchFilterAtom = atom(
+  null,
+  (get, set, filter: SelectedFilterOption) => {
+    const current = get(searchSelectedFiltersAtom);
+    if (!current.some((f) => f.id === filter.id)) {
+      set(searchSelectedFiltersAtom, [...current, filter]);
+    }
   }
-});
+);
 
-export const removeSearchFilterAtom = atom(null, (get, set, filterId: string) => {
-  const current = get(searchSelectedFiltersAtom);
-  set(
-    searchSelectedFiltersAtom,
-    current.filter((f) => f.id !== filterId),
-  );
-});
+export const removeSearchFilterAtom = atom(
+  null,
+  (get, set, filterId: string) => {
+    const current = get(searchSelectedFiltersAtom);
+    set(
+      searchSelectedFiltersAtom,
+      current.filter((f) => f.id !== filterId)
+    );
+  }
+);
 
 export const clearSearchFiltersAtom = atom(null, (_, set) => {
   set(searchSelectedFiltersAtom, []);
@@ -141,28 +149,29 @@ export const performSearchAtom = atom(
   async (get, set, params: SearchParams, allowRedirect = false) => {
     const currentState = get(searchAtom);
     const orgUIConfig = get(orgUIConfigAtom);
-    const redirectSearchResultsUrl = orgUIConfig.searchConfig?.redirectSearchResultsUrl;
+    const redirectSearchResultsUrl =
+      orgUIConfig?.searchConfig?.redirectSearchResultsUrl;
 
     if (allowRedirect && redirectSearchResultsUrl) {
       const redirectUrl = new URL(redirectSearchResultsUrl);
-      redirectUrl.searchParams.set('es', 'true');
-      redirectUrl.searchParams.set('esq', params.query);
+      redirectUrl.searchParams.set("es", "true");
+      redirectUrl.searchParams.set("esq", params.query);
       window.location.href = redirectUrl.toString();
     } else {
       // 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', params.query);
-      window.history.pushState({}, '', url);
+      url.searchParams.set("es", "true");
+      url.searchParams.set("esq", params.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: {} }));
+      window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
     }
 
     // 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: {} }));
+    window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
     if (currentState.loading) {
       return; // Prevent concurrent searches
     }
@@ -182,7 +191,8 @@ export const performSearchAtom = atom(
         lastQuery: params.query,
       });
     } catch (error: unknown) {
-      const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+      const errorMessage =
+        error instanceof Error ? error.message : "An unknown error occurred";
       set(searchAtom, {
         data: null,
         loading: false,
@@ -190,5 +200,5 @@ export const performSearchAtom = atom(
         lastQuery: params.query,
       });
     }
-  },
+  }
 );

package/src/contexts/chatContext.tsx

@@ -421,6 +421,9 @@ const ChatContextProvider = ({ children }: { children: ReactNode }) => {
           `[spiffy-ai] initializeWidget is_currently_streaming=${responseStreaming} is_initialized=${widgetInitialized}`
         );
         // on mount, try to get the responses from an active session if one exists
+        if (!orgId) {
+          throw new Error("orgId is not available");
+        }
         const { messages: existingMessages, userEvents } =
           await CommerceApiClient.getResponses(orgId, chatId, userId);
         setMessages([...existingMessages]);
@@ -455,7 +458,7 @@ const ChatContextProvider = ({ children }: { children: ReactNode }) => {
 
   const onFocus = useCallback(async () => {
     try {
-      if (!responseStreaming && !suggestionsLoading) {
+      if (!responseStreaming && !suggestionsLoading && orgId) {
         const { messages: existingMessages } =
           await CommerceApiClient.getResponses(orgId, chatId, userId);
 

package/src/contexts/enviveConfigContext.tsx

@@ -1,19 +1,23 @@
-import React, { createContext, useContext, ReactNode } from "react";
+import React, { createContext, useContext, ReactNode, useEffect } from "react";
+import { useSetAtom, useAtomValue } from "jotai";
 import type { EnviveConfig } from "./types";
+import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
+import Logger from "src/application/logging/logger";
 
 const EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
 
 interface EnviveConfigProviderProps {
   children: ReactNode;
-  amplitudeApiKey: string;
-  dataResidency: string;
-  env: string;
-  baseUrl: string;
-  reactAppName: string;
-  cdnUrl: string;
-  contextSource: string;
-  orgLevelApiKey: string;
-  orgShortName: string;
+  amplitudeApiKey?: string;
+  dataResidency?: string;
+  env?: string;
+  baseUrl?: string;
+  reactAppName?: string;
+  cdnUrl?: string;
+  contextSource?: string;
+  orgLevelApiKey?: string;
+  orgShortName?: string;
+  identifyingPrefix: string;
 }
 
 export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
@@ -27,7 +31,9 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   contextSource,
   orgLevelApiKey,
   orgShortName,
+  identifyingPrefix,
 }) => {
+  const setEnviveConfig = useSetAtom(enviveConfigAtom);
   const config: EnviveConfig = {
     amplitudeApiKey,
     dataResidency,
@@ -38,19 +44,13 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
     contextSource,
     orgLevelApiKey,
     orgShortName,
+    identifyingPrefix,
   };
 
-  // Validate config values
-  for (const key in config) {
-    if (config.hasOwnProperty(key)) {
-      const value = config[key as keyof EnviveConfig];
-      if (value === undefined || value === null || value === "") {
-        throw new Error(
-          `EnviveConfigProvider: Missing required configuration value for '${key}'`
-        );
-      }
-    }
-  }
+  useEffect(() => {
+    setEnviveConfig(config);
+    Logger.logDebug("EnviveConfigProvider: Setting EnviveConfig", config);
+  }, [setEnviveConfig, config]);
 
   return (
     <EnviveConfigContext.Provider value={config}>
@@ -60,11 +60,22 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 };
 
 export const useEnviveConfig = (): EnviveConfig => {
-  const context = useContext(EnviveConfigContext);
-  if (context === undefined) {
-    throw new Error(
-      "useEnviveConfig must be used within an EnviveConfigProvider"
+  const config = useAtomValue(enviveConfigAtom);
+  Logger.logDebug("useEnviveConfig: Accessing EnviveConfig", config);
+
+  // During initial render, the atom might not be set yet, so we need to be more patient
+  // The EnviveConfigProvider will set it in its useEffect
+  if (!config) {
+    // Instead of throwing immediately, let's return a default/empty config
+    // This prevents the error during initial render
+    Logger.logWarn(
+      "EnviveConfig not yet available, returning default config",
+      undefined
     );
+    return {
+      identifyingPrefix: "spiffy", // This is required, so provide a default
+    } as EnviveConfig;
   }
-  return context;
+
+  return config;
 };

package/src/contexts/enviveCssContext.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { useAtomValue } from "jotai";
+import { orgMerchantCssAtom } from "src/atoms/org/merchantCss";
+
+interface EnviveCssProviderProps {
+  children: ReactNode;
+}
+
+export const EnviveCssProvider: React.FC<EnviveCssProviderProps> = ({
+  children,
+}) => {
+  const enviveCss = useAtomValue(orgMerchantCssAtom);
+
+  return (
+    <>
+      {enviveCss && <style id="merchant-css-styles">{enviveCss}</style>}
+      {children}
+    </>
+  );
+};

package/src/contexts/index.ts

@@ -2,3 +2,5 @@ export * from "./chatContext";
 export * from "./systemSettingsContext";
 export * from "./enviveConfigContext";
 export * from "./types";
+export * from "./orgConfigContext";
+export * from "./enviveCssContext";