@envive-ai/react-hooks 0.1.5 → 0.1.6

package/src/contexts/amplitudeContext.tsx

@@ -0,0 +1,466 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useMemo,
+  useEffect,
+} from "react";
+import { useAtomValue } from "jotai";
+import { createInstance } from "@amplitude/analytics-browser";
+import { FeatureGates } from "src/application/models/featureGates";
+import { OrgShortName } from "src/application/models";
+import { EventsDispatcher, SpiffyEvent } from "src/events";
+import {
+  amplitudeApiKeyAtom,
+  contextSourceAtom,
+  dataResidencyAtom,
+  identifyingPrefixAtom,
+} from "src/atoms/envive/enviveConfig";
+import {
+  LocalStorageKeys,
+  useLocalStorage,
+} from "src/contexts/localStorageContext";
+import { orgAnalyticsGoogleAnalyticsConfigAtom } from "src/atoms/org/orgAnalyticsConfig";
+import { userIdAtom } from "src/atoms/app";
+import { envAtom } from "src/atoms/envive/enviveConfig";
+import Logger from "src/application/logging/logger";
+import type {
+  BrowserClient,
+  EnrichmentPlugin,
+  Event,
+  ServerZoneType,
+} from "@amplitude/analytics-types";
+import { useEnviveConfig } from "src/contexts/enviveConfigContext";
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
+
+export enum SpiffyMetricsEventName {
+  BundleLoaded = "Bundle Loaded",
+  ChatLiveAgentBtnClick = "Chat Live Agent Btn Click",
+  ChatFloatingButtonVisible = "Chat Floating Button Visible",
+  ChatComponentVisible = "Chat Component Visible",
+  ChatComponentExpanded = "Chat Component Expanded",
+  ChatComponentCollapsed = "Chat Component Collapsed",
+  ChatUserMessageInput = "Chat User Message Input",
+  ChatSuggestionClicked = "Chat Suggestion Clicked",
+  ChatAssistantResponse = "Chat Assistant Response",
+  ProductCardClicked = "Product Card Clicked",
+  ProductReviewCardClicked = "Product Review Card Clicked",
+  AddToCartClicked = "Add to Cart Clicked",
+  PromptCardClicked = "Prompt Card Clicked",
+  SupportedEvent = "Supported Event",
+  SearchBackToResponseClicked = "Search Back to Response Clicked",
+  PerformanceMetrics = "Performance Metrics",
+  SearchBarClicked = "Search Bar Clicked",
+  OrderLookupStarted = "Order Lookup Started",
+  OrderLookupFormSubmitted = "Order Lookup Form Submitted",
+  SearchComponentVisible = "Search Component Visible",
+  SearchZeroStateSuggestionClicked = "Search Zero State Suggestion Clicked", // This is the scrolling list of suggestion buttons in global search
+  SearchInputStarted = "Search Input Started",
+  SearchQuerySubmitted = "Search Query Submitted",
+  // SearchAutocompleteViewed = 'Search Autocomplete Viewed', // TODO: add this when autocomplete is added
+  // SearchAutocompleteClicked = 'Search Autocomplete Clicked', // TODO: add this when autocomplete is added
+  SearchResultsViewed = "Search Results Viewed",
+  SearchTimeToFirstClick = "Search Time to First Click",
+  SearchZeroResultsRate = "Search Zero Results Rate",
+  SearchFilterClicked = "Search Filter Clicked",
+  SearchSortClicked = "Search Sort Clicked",
+}
+
+interface TrackEventParams {
+  eventName: SpiffyMetricsEventName;
+  eventProps?: Record<string, unknown>;
+  eventGroups?: Record<string, unknown>;
+  alsoSendToGoogleAnalytics?: boolean;
+}
+
+interface AmplitudeContextType {
+  trackEvent: (params: TrackEventParams) => Promise<void>;
+  isReady: boolean;
+  setSupplementalDefaultProps: (props: Record<string, unknown>) => void;
+}
+
+const AmplitudeContext = createContext<AmplitudeContextType | null>(null);
+
+export const AmplitudeProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const userId = useAtomValue(userIdAtom);
+  const amplitudeApiKey = useAtomValue(amplitudeApiKeyAtom);
+  const dataResidency = useAtomValue(dataResidencyAtom);
+  const orgGaConfig = useAtomValue(orgAnalyticsGoogleAnalyticsConfigAtom);
+  const env = useAtomValue(envAtom);
+  const contextSource = useAtomValue(contextSourceAtom);
+  const identifyingPrefix = useAtomValue(identifyingPrefixAtom);
+  const { getItem } = useLocalStorage();
+  const {
+    publicKey,
+    featureOverrides,
+    variantUrlOverride,
+    variantInfoOverride,
+    show,
+    orgShortName,
+    featureGates,
+  } = useEnviveConfig();
+
+  const useFeatureFlagService = () => {
+    const isFeatureGateEnabled = useCallback(
+      (gate: string) => {
+        const override = featureOverrides?.[gate];
+        if (override !== undefined) {
+          return override;
+        }
+        return (
+          featureGates?.some((fg) => fg.name === gate && fg.value) || false
+        );
+      },
+      [featureOverrides, featureGates]
+    );
+
+    const isClientSessionEnabled = useCallback(() => {
+      // Assuming this is a feature gate, or needs to be explicitly passed
+      return isFeatureGateEnabled(FeatureGates.IsClientSessionEnabled);
+    }, [isFeatureGateEnabled]);
+
+    const getFeatureFlags = useCallback(() => {
+      const flags: Record<string, boolean> = {};
+      if (featureOverrides) {
+        Object.entries(featureOverrides).forEach(([key, value]) => {
+          flags[key] = value;
+        });
+      }
+      if (featureGates) {
+        featureGates.forEach((fg) => {
+          if (fg.name) {
+            flags[fg.name] = Boolean(fg.value);
+          }
+        });
+      }
+      return flags;
+    }, [featureOverrides, featureGates]);
+
+    return {
+      isFeatureGateEnabled,
+      isClientSessionEnabled,
+      getFeatureFlags,
+    };
+  };
+
+  const featureFlagService = useFeatureFlagService();
+
+  const [amplitudeClient, setAmplitudeClient] = React.useState<
+    BrowserClient | undefined
+  >(undefined);
+  const [internalEventTrackingEnrichment, setInternalEventTrackingEnrichment] =
+    React.useState<EnrichmentPlugin | undefined>(undefined);
+  const [supplementalDefaultProps, setSupplementalDefaultProps] =
+    React.useState<Record<string, unknown>>({});
+
+  const isReady = Boolean(userId && featureFlagService && amplitudeApiKey);
+
+  const getDefaultTrackingProps = useCallback((): Record<string, unknown> => {
+    const gatesProps = featureGates
+      ? featureGates.reduce<Record<string, boolean>>((acc, curr) => {
+          if (curr.name && curr.value != null) {
+            return { ...acc, [`feature_gate.${curr.name}`]: curr.value };
+          }
+          return acc;
+        }, {})
+      : {};
+    const experimentProps = {}; // No direct equivalent for experiments in EnviveConfig yet
+
+    const orgLevelAmplitudeTrackingProps = {
+      ...gatesProps,
+      ...experimentProps,
+    };
+
+    return {
+      ...orgLevelAmplitudeTrackingProps,
+      ...supplementalDefaultProps,
+      // TODO: org_id is not directly available in EnviveConfig. Need to find a new source or derive it.
+      // org_id: orgConfig?.org?.org?.id,
+      app_id: "commerce-chat-react-component",
+      chat_id: getItem(LocalStorageKeys.ChatId),
+      env: env || "unknown",
+      app_source: contextSource,
+      "org.short_name": orgShortName,
+      "user.id": userId,
+      "cdp.user_id": null,
+      "cdp.provider": null,
+      "event.source": "web-browser",
+      "event.type": "user-activity",
+      "event.id": null,
+      "event.channel": "web",
+      "event.timestamp": null,
+    };
+  }, [
+    featureGates,
+    supplementalDefaultProps,
+    env,
+    contextSource,
+    orgShortName,
+    userId,
+  ]);
+
+  const eventPropsToPrefixedEventProps = useCallback(
+    (
+      eventName: SpiffyMetricsEventName,
+      eventProps: Record<string, unknown>
+    ): Record<string, unknown> => {
+      const prefix = eventName.toLowerCase().replace(/\s+/g, "_");
+      return Object.entries(eventProps).reduce((acc, [key, value]) => {
+        acc[`${prefix}.${key}`] = value;
+        return acc;
+      }, {} as Record<string, unknown>);
+    },
+    []
+  );
+
+  const amplitudeSessionReplayInit = useCallback((): boolean => {
+    const isEnabled = Boolean(
+      orgShortName === OrgShortName.UniqueVintage &&
+        featureFlagService?.isClientSessionEnabled() &&
+        featureFlagService?.isFeatureGateEnabled(
+          FeatureGates.IsNewFeatureEnabled
+        )
+    );
+    const sampleRate = 1;
+
+    try {
+      Logger.logDebug(
+        `[spiffy-ai] amplitude session-replay initializing isEnabled=${isEnabled} sampleRate=${sampleRate}`
+      );
+
+      if (!isEnabled) {
+        return isEnabled;
+      }
+
+      // amplitudeInstance.add(sessionReplayPlugin({ sampleRate }));
+
+      return isEnabled;
+    } catch (e) {
+      Logger.logError(
+        "[spiffy-ai] Error initializing amplitude session-replay",
+        e
+      );
+      return false;
+    }
+  }, [orgShortName, featureFlagService]);
+
+  const getEventTrackingEnrichment = useCallback((): EnrichmentPlugin => {
+    if (internalEventTrackingEnrichment !== undefined) {
+      return internalEventTrackingEnrichment;
+    }
+
+    const enrichment: EnrichmentPlugin = {
+      name: "page-view-tracking-enrichment",
+      type: "enrichment",
+      setup: async () => undefined,
+      execute: async (event: Event): Promise<Event> => {
+        let enrichedEvent: Event;
+
+        const eventsToEnrich = [
+          "[Amplitude] Page Viewed",
+          `[Spiffy] ${SpiffyMetricsEventName.BundleLoaded}`,
+        ];
+
+        if (eventsToEnrich.includes(event.event_type)) {
+          const globalProperties: Record<string, string> = {};
+
+          if (publicKey) {
+            globalProperties["globalProperties.publicKey"] = publicKey;
+          }
+          if (featureOverrides) {
+            Object.entries(featureOverrides).forEach(([key, value]) => {
+              globalProperties[`globalProperties.featureOverrides.${key}`] =
+                String(value);
+            });
+          }
+          if (variantUrlOverride) {
+            globalProperties["globalProperties.variantUrlOverride"] =
+              variantUrlOverride;
+          }
+          if (variantInfoOverride) {
+            globalProperties["globalProperties.variantInfoOverride"] =
+              JSON.stringify(variantInfoOverride);
+          }
+          if (show != null) {
+            globalProperties["globalProperties.show"] = String(show);
+          }
+
+          const enabledFeatures = featureFlagService!.getFeatureFlags();
+          const enabledFeaturesProperties = Object.entries(
+            enabledFeatures
+          ).reduce<Record<string, string>>(
+            (acc, [key, value]) => ({
+              ...acc,
+              [`enabledFeatures.${key}`]: `${value}`,
+            }),
+            {}
+          );
+
+          const timingProperties = {
+            "timing.enriched_at_ms": window.performance?.now(),
+          };
+
+          enrichedEvent = {
+            ...event,
+            event_properties: {
+              ...event.event_properties,
+              ...getDefaultTrackingProps(),
+              ...globalProperties,
+              ...enabledFeaturesProperties,
+              ...timingProperties,
+            },
+          };
+        } else {
+          enrichedEvent = event;
+        }
+
+        EventsDispatcher.dispatch(SpiffyEvent.AMPLITUDE_EVENT, enrichedEvent);
+
+        return enrichedEvent;
+      },
+    };
+    setInternalEventTrackingEnrichment(enrichment);
+    return enrichment;
+  }, [
+    internalEventTrackingEnrichment,
+    getDefaultTrackingProps,
+    featureFlagService,
+    publicKey,
+    featureOverrides,
+    variantUrlOverride,
+    variantInfoOverride,
+    show,
+  ]);
+
+  useEffect(() => {
+    if (isReady && !amplitudeClient) {
+      const currentAmplitudeInstance: BrowserClient = createInstance();
+      const isSessionsEnabled = amplitudeSessionReplayInit();
+      currentAmplitudeInstance.add(getEventTrackingEnrichment());
+      currentAmplitudeInstance.init(amplitudeApiKey!, userId!, {
+        serverZone: dataResidency as ServerZoneType,
+        trackingOptions: {
+          ipAddress: true,
+        },
+        autocapture: {
+          attribution: true,
+          pageViews: {
+            trackHistoryChanges: "pathOnly",
+          },
+          sessions: isSessionsEnabled,
+          formInteractions: false,
+          fileDownloads: false,
+        },
+      });
+      setAmplitudeClient(currentAmplitudeInstance);
+    }
+  }, [
+    isReady,
+    amplitudeClient,
+    amplitudeApiKey,
+    userId,
+    dataResidency,
+    amplitudeSessionReplayInit,
+    getEventTrackingEnrichment,
+  ]);
+
+  const trackEvent = useCallback(
+    async ({
+      eventName,
+      eventProps,
+      eventGroups,
+      alsoSendToGoogleAnalytics = false,
+    }: TrackEventParams): Promise<void> => {
+      try {
+        const decoratedEventName = `[Spiffy] ${eventName}`;
+
+        if (!amplitudeClient) {
+          Logger.logWarn("amplitude client undefined", undefined, {
+            event_name: decoratedEventName,
+          });
+          return;
+        }
+
+        const eventData = JSON.stringify({
+          eventName,
+          eventProps,
+          created_at: new Date().toISOString(),
+        });
+        const encoder = new TextEncoder();
+        const data = encoder.encode(eventData);
+        const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        const currentInsertId = hashArray
+          .map((b) => b.toString(16).padStart(2, "0"))
+          .join("");
+
+        Logger.logDebug(`amplitude tracking ${decoratedEventName}`, null, {
+          event_name: decoratedEventName,
+          props: eventProps,
+        });
+
+        amplitudeClient.track(
+          decoratedEventName,
+          {
+            ...getDefaultTrackingProps(),
+            ...eventProps,
+            ...(eventProps
+              ? eventPropsToPrefixedEventProps(eventName, eventProps)
+              : {}),
+          },
+          {
+            ...eventGroups,
+            insert_id: currentInsertId,
+          }
+        );
+
+        if (alsoSendToGoogleAnalytics && orgGaConfig) {
+          Logger.logDebug("[spiffy-ai] GA tracking", decoratedEventName);
+          if (window.dataLayer) {
+            (window.dataLayer as any[]).push({
+              event: decoratedEventName,
+              eventProps: eventProps,
+            });
+          }
+        }
+      } catch (err) {
+        Logger.logError("[spiffy-ai] Error tracking event", err, {
+          eventName,
+          eventProps,
+        });
+      }
+    },
+    [
+      amplitudeClient,
+      getDefaultTrackingProps,
+      eventPropsToPrefixedEventProps,
+      orgGaConfig,
+    ]
+  );
+
+  const value = useMemo(
+    () => ({
+      trackEvent,
+      isReady,
+      setSupplementalDefaultProps: (props: Record<string, unknown>) =>
+        setSupplementalDefaultProps(props),
+    }),
+    [trackEvent, isReady, setSupplementalDefaultProps]
+  );
+
+  return (
+    <AmplitudeContext.Provider value={value}>
+      {children}
+    </AmplitudeContext.Provider>
+  );
+};
+
+export const useAmplitude = () => {
+  const context = useContext(AmplitudeContext);
+  if (!context) {
+    throw new Error("useAmplitude must be used within AmplitudeProvider");
+  }
+  return context;
+};

package/src/contexts/cdnContext.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useCallback, useMemo } from "react";
+import { useAtomValue } from "jotai";
+import { cdnUrlAtom } from "../atoms/envive/enviveConfig";
+
+interface CdnContextType {
+  cdnUrl: string;
+  getCdnBasePath: () => string;
+  getAssetURL: (assetName: string, orgShortName: string) => string;
+}
+
+const CdnContext = createContext<CdnContextType | null>(null);
+
+export const CdnProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const cdnUrlAtomValue = useAtomValue(cdnUrlAtom);
+  const cdnUrl = cdnUrlAtomValue || "https://cdn.spiffy.ai/other";
+
+  const getCdnBasePath = useCallback(() => {
+    return cdnUrl;
+  }, [cdnUrl]);
+
+  const getAssetURL = useCallback(
+    (assetName: string, orgShortName: string) => {
+      return `${getCdnBasePath()}/assets/${orgShortName}/${assetName}`;
+    },
+    [getCdnBasePath]
+  );
+
+  const value = useMemo(
+    () => ({
+      cdnUrl,
+      getCdnBasePath,
+      getAssetURL,
+    }),
+    [cdnUrl, getCdnBasePath, getAssetURL]
+  );
+
+  return <CdnContext.Provider value={value}>{children}</CdnContext.Provider>;
+};
+
+export const useCdn = () => {
+  const context = useContext(CdnContext);
+  if (!context) {
+    throw new Error("useCdn must be used within a CdnProvider");
+  }
+  return context;
+};

package/src/contexts/chatContext.tsx

@@ -8,9 +8,9 @@ import {
   useCallback,
   useMemo,
 } from "react";
-import CommerceApiClient from "src/adapters/spiffy/commerce/api";
+import CommerceApiClient from "src/application/commerce-api";
 import { v4 as uuid } from "uuid";
-import { SessionRestartRequired } from "src/adapters/spiffy/commerce/exceptions/sessionExceptions";
+import { SessionRestartRequired } from "src/types/exceptions/sessionExceptions";
 import Logger from "src/application/logging/logger";
 import {
   Message,
@@ -19,10 +19,7 @@ import {
   NextMessageRequest,
   Response,
 } from "src/application/models";
-import {
-  AmplitudeAdapter,
-  SpiffyMetricsEventName,
-} from "src/adapters/amplitude";
+import { SpiffyMetricsEventName } from "src/contexts/amplitudeContext";
 import { messageFromResponse } from "src/application/utils";
 import { chatIdAtom, userIdAtom, variantInfoAtom } from "src/atoms/app";
 import {
@@ -43,7 +40,6 @@ import {
   handleSearchResultsAtom,
   chatSearchIsLoadingAtom,
 } from "src/atoms/search/chatSearch";
-import { orgIdAtom } from "src/atoms/org/org";
 import { useSystemSettingsContext } from "src/hooks";
 import { createAppLoadedEvent, createVisitUserEvent } from "src/hooks/utils";
 import { useMessageInterceptor } from "src/interceptors/useMessageInterceptor";
@@ -57,6 +53,7 @@ import {
   userEventQueueAtom,
   userQueueEventCountAtom,
 } from "src/atoms/chat/messageQueue";
+import { useAmplitudeTracking } from "src/hooks/useAmplitudeOperations";
 
 /**
  * Record the chat assistant response in Amplitude
@@ -66,7 +63,11 @@ import {
  */
 const recordAssistantResponse = (
   startTimeMs: number,
-  payload: NextMessageRequest
+  payload: NextMessageRequest,
+  track: (
+    eventName: SpiffyMetricsEventName,
+    eventProps?: Record<string, unknown>
+  ) => void
 ) => {
   const atomStore = getAtomStore();
   const chatState = atomStore.get(chatAtom);
@@ -115,8 +116,7 @@ const recordAssistantResponse = (
     eventProps.search_products_sort_type = searchProductsSort;
   }
 
-  AmplitudeAdapter.trackEvent({
-    eventName: SpiffyMetricsEventName.ChatAssistantResponse,
+  track(SpiffyMetricsEventName.ChatAssistantResponse, {
     eventProps,
   });
 };
@@ -252,13 +252,15 @@ const ChatContextProvider = ({ children }: { children: ReactNode }) => {
   const userId = useAtomValue(userIdAtom);
   const chatId = useAtomValue(chatIdAtom);
   const supportedEvent = useAtomValue(supportedEventAtom);
-  const orgId = useAtomValue(orgIdAtom);
+  // TODO: Replace with actual orgId from useEnviveConfig or NewOrgConfigContext when available
+  const orgId = "mock-org-id";
 
   const variantInfo = useAtomValue(variantInfoAtom);
   const settingsContext = useSystemSettingsContext();
   const messageInterceptor = useMessageInterceptor();
   const handleSearchResults = useSetAtom(handleSearchResultsAtom);
   const setSearchIsLoading = useSetAtom(chatSearchIsLoadingAtom);
+  const { track } = useAmplitudeTracking();
 
   const getStreamingResponses = useCallback(
     async (
@@ -340,7 +342,7 @@ const ChatContextProvider = ({ children }: { children: ReactNode }) => {
 
         await getStreamingResponses(requestPayload);
 
-        recordAssistantResponse(startTimeMs, requestPayload);
+        recordAssistantResponse(startTimeMs, requestPayload, track);
         await getSuggestions();
       } catch (error) {
         Logger.logError("[spiffy-ai] getResponses error", error);
@@ -361,6 +363,7 @@ const ChatContextProvider = ({ children }: { children: ReactNode }) => {
       markUserEventsProcessed,
       getSuggestions,
       setUserHasReplied,
+      track,
     ]
   );
 

package/src/contexts/enviveConfigContext.tsx

@@ -3,6 +3,7 @@ import { useSetAtom, useAtomValue } from "jotai";
 import type { EnviveConfig } from "./types";
 import { enviveConfigAtom } from "src/atoms/envive/enviveConfig";
 import Logger from "src/application/logging/logger";
+import { OrgConfigFeatureGate } from "src/application/models/api/orgConfigResults";
 
 const EnviveConfigContext = createContext<EnviveConfig | undefined>(undefined);
 
@@ -18,6 +19,12 @@ interface EnviveConfigProviderProps {
   orgLevelApiKey?: string;
   orgShortName?: string;
   identifyingPrefix: string;
+  featureOverrides?: Record<string, boolean>;
+  variantUrlOverride?: string;
+  variantInfoOverride?: any;
+  show?: boolean;
+  publicKey?: string;
+  featureGates?: OrgConfigFeatureGate[]; // New prop for feature gates
 }
 
 export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
@@ -32,8 +39,15 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
   orgLevelApiKey,
   orgShortName,
   identifyingPrefix,
+  featureOverrides,
+  variantUrlOverride,
+  variantInfoOverride,
+  show,
+  publicKey,
+  featureGates, // Destructure new prop
 }) => {
   const setEnviveConfig = useSetAtom(enviveConfigAtom);
+
   const config: EnviveConfig = {
     amplitudeApiKey,
     dataResidency,
@@ -45,6 +59,12 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
     orgLevelApiKey,
     orgShortName,
     identifyingPrefix,
+    featureOverrides,
+    variantUrlOverride,
+    variantInfoOverride,
+    show,
+    publicKey,
+    featureGates, // Add to config
   };
 
   useEffect(() => {
@@ -54,28 +74,13 @@ export const EnviveConfigProvider: React.FC<EnviveConfigProviderProps> = ({
 
   return (
     <EnviveConfigContext.Provider value={config}>
-      {children}
+      {config ? children : null}
     </EnviveConfigContext.Provider>
   );
 };
 
 export const useEnviveConfig = (): EnviveConfig => {
   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 config;
+  return config ? config : {};
 };