@envive-ai/react-hooks 0.2.5 → 0.2.6-alpha-2

package/src/hooks/Search/useSearchInput.ts

@@ -0,0 +1,227 @@
+import { useState, useCallback, useRef, useMemo } from "react";
+import { useAtomValue } from "jotai";
+import Fuse from "fuse.js";
+import {
+  SpiffyMetricsEventName,
+  UseSearchInputProps,
+  UseSearchInputReturn,
+} from "@envive-ai/types";
+import { useAmplitudeTracking } from "../AmplitudeOperations";
+import { autocompleteStateAtom } from "src/atoms/globalSearch";
+
+export const useSearchInput = ({
+  initialSearchText = "",
+  searchOrigin,
+  onSearchSubmit,
+}: UseSearchInputProps): UseSearchInputReturn => {
+  const { track } = useAmplitudeTracking();
+
+  // State
+  const [searchText, setSearchText] = useState(initialSearchText);
+  const [hasText, setHasText] = useState(initialSearchText.trim().length > 0);
+  const [isFocused, setIsFocused] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [focusedOptionId, setFocusedOptionId] = useState<string | undefined>(
+    undefined
+  );
+  const autocompleteState = useAtomValue(autocompleteStateAtom);
+  const globalAutocompleteResults = autocompleteState.results;
+  const isAutocompleteEnabled = globalAutocompleteResults.length > 0;
+
+  // Refs
+  const isSelectingAutocomplete = useRef(false);
+
+  // Computed
+  const shouldShowAutocomplete = hasText && isFocused && isAutocompleteEnabled;
+
+  const autocompleteResultsLimit = 5;
+
+  // Configure Fuse.js for fuzzy search with custom scoring
+  const fuseOptions = useMemo(
+    () => ({
+      includeScore: true,
+      includeMatches: true,
+      // Fuzzy matching threshold (0.0 = perfect match, 1.0 = match anything)
+      threshold: 0.3,
+      // Location where match is expected (0 = beginning)
+      location: 0,
+      // Distance from location where match can be found - smaller for prefix preference
+      distance: 4,
+      // Minimum character length before fuzzy matching starts
+      minMatchCharLength: 1,
+      // Keys to search (we're searching strings directly, so no keys needed)
+      keys: [],
+      // Use extended search for exact matches and prefix matching
+      useExtendedSearch: false,
+      // Don't ignore location - this helps prioritize matches at the beginning
+      ignoreLocation: false,
+    }),
+    []
+  );
+
+  const fuse = useMemo(() => {
+    if (!globalAutocompleteResults.length) return null;
+    return new Fuse(globalAutocompleteResults, fuseOptions);
+  }, [globalAutocompleteResults, fuseOptions]);
+
+  // Autocomplete fuzzy search using Fuse.js
+  const autocompleteResults = useMemo(() => {
+    if (!isAutocompleteEnabled || !fuse) {
+      return [];
+    }
+
+    if (!searchText.trim()) {
+      return [];
+    }
+
+    const fuseResults = fuse.search(searchText);
+
+    // Use only Fuse.js scoring (results are already sorted by relevance)
+    return fuseResults
+      .slice(0, autocompleteResultsLimit)
+      .map((result) => result.item);
+  }, [isAutocompleteEnabled, fuse, searchText, autocompleteResultsLimit]);
+
+  // Handlers
+  const handleSearchInputChange = useCallback(
+    (newValue: string) => {
+      // If the user is changing text, they must be interacting with the input
+      // So we can safely assume they're focused
+      if (newValue !== searchText) {
+        setIsFocused(true);
+      }
+
+      if (newValue.length === 1) {
+        track(SpiffyMetricsEventName.SearchInputStarted, {
+          searchOrigin,
+        });
+      }
+      setSearchText(newValue);
+      setHasText(newValue.trim().length > 0);
+      setFocusedIndex(-1);
+      setFocusedOptionId(undefined);
+    },
+    [searchOrigin, searchText, track]
+  );
+
+  const handleSearchInputFocus = useCallback(() => {
+    setIsFocused(true);
+  }, []);
+
+  const handleSearchInputBlur = useCallback(() => {
+    setTimeout(() => {
+      if (!isSelectingAutocomplete.current) {
+        setIsFocused(false);
+        setFocusedIndex(-1);
+        setFocusedOptionId(undefined);
+      }
+    }, 150);
+  }, []);
+
+  const handleSubmitSearch = useCallback(() => {
+    setIsFocused(false);
+    if (searchText.trim() && onSearchSubmit) {
+      track(SpiffyMetricsEventName.SearchQuerySubmitted, {
+        searchOrigin,
+        queryText: searchText.trim(),
+      });
+      onSearchSubmit(searchText.trim());
+    }
+  }, [searchText, onSearchSubmit, searchOrigin, track]);
+
+  const handleAutocompleteSelect = useCallback(
+    (suggestion: string, rankPosition?: number) => {
+      isSelectingAutocomplete.current = true;
+      setSearchText(suggestion);
+      setHasText(suggestion.trim().length > 0);
+      setIsFocused(false);
+
+      track(SpiffyMetricsEventName.SearchQuerySubmitted, {
+        searchOrigin,
+        queryText: suggestion.trim(),
+      });
+
+      if (onSearchSubmit) {
+        onSearchSubmit(suggestion.trim());
+      }
+
+      setTimeout(() => {
+        isSelectingAutocomplete.current = false;
+      }, 100);
+    },
+    [onSearchSubmit, searchOrigin, track]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const newIndex = (focusedIndex + 1) % autocompleteResults.length;
+        setFocusedIndex(newIndex);
+        setFocusedOptionId(`option-${newIndex}`);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const newIndex =
+          (focusedIndex - 1 + autocompleteResults.length) %
+          autocompleteResults.length;
+        setFocusedIndex(newIndex);
+        setFocusedOptionId(`option-${newIndex}`);
+      } else if (event.key === "Enter") {
+        if (focusedIndex === -1) {
+          event.preventDefault();
+          handleSubmitSearch();
+        } else {
+          event.preventDefault();
+          const suggestionText = autocompleteResults[focusedIndex];
+          handleAutocompleteSelect(suggestionText, focusedIndex);
+        }
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setFocusedIndex(-1);
+        setFocusedOptionId(undefined);
+      }
+    },
+    [
+      autocompleteResults,
+      focusedIndex,
+      handleAutocompleteSelect,
+      handleSubmitSearch,
+    ]
+  );
+
+  const setSearchTextUtility = useCallback((text: string) => {
+    setSearchText(text);
+    setHasText(text.trim().length > 0);
+  }, []);
+
+  const resetSearch = useCallback(() => {
+    setSearchText("");
+    setHasText(false);
+    setIsFocused(false);
+    setFocusedIndex(-1);
+    setFocusedOptionId(undefined);
+  }, []);
+
+  return {
+    // State
+    searchText,
+    hasText,
+    isFocused,
+    focusedIndex,
+    focusedOptionId,
+    autocompleteResults,
+    shouldShowAutocomplete,
+
+    // Handlers
+    handleSearchInputChange,
+    handleSearchInputFocus,
+    handleSearchInputBlur,
+    handleKeyDown,
+    handleAutocompleteSelect,
+    handleSubmitSearch,
+
+    // Utilities
+    setSearchText: setSearchTextUtility,
+    resetSearch,
+  };
+};

package/src/hooks/SearchOperations/useSearchOperations.ts

@@ -1,6 +1,6 @@
-import { useState, useCallback, useEffect } from "react";
-import { useSearchService } from "src/contexts/searchContext";
-import { SearchResult, SearchParams } from "src/application/models/api/search";
+import { SearchParams, SearchResult } from '@envive-ai/types';
+import { useState, useCallback, useEffect } from 'react';
+import { useSearchService } from 'src/contexts/searchContext';
 
 export const useProductSearch = () => {
   const { searchProducts, isReady } = useSearchService();
@@ -11,7 +11,7 @@ export const useProductSearch = () => {
   const search = useCallback(
     async (params: SearchParams) => {
       if (!isReady) {
-        setError(new Error("Search service not ready - missing dependencies"));
+        setError(new Error('Search service not ready - missing dependencies'));
         return;
       }
 
@@ -22,14 +22,12 @@ export const useProductSearch = () => {
         const result = await searchProducts(params);
         setData(result);
       } catch (err) {
-        setError(
-          err instanceof Error ? err : new Error("Unknown search error")
-        );
+        setError(err instanceof Error ? err : new Error('Unknown search error'));
       } finally {
         setLoading(false);
       }
     },
-    [searchProducts, isReady]
+    [searchProducts, isReady],
   );
 
   const reset = useCallback(() => {
@@ -65,14 +63,12 @@ export const useSearchWithQuery = (params: SearchParams | null) => {
         const result = await searchProducts(searchParams);
         setData(result);
       } catch (err) {
-        setError(
-          err instanceof Error ? err : new Error("Unknown search error")
-        );
+        setError(err instanceof Error ? err : new Error('Unknown search error'));
       } finally {
         setLoading(false);
       }
     },
-    [searchProducts, isReady]
+    [searchProducts, isReady],
   );
 
   useEffect(() => {

package/src/hooks/ShopifyUrlOperations/useShopifyUrlOperations.ts

@@ -1,15 +1,9 @@
-import { useCallback } from "react";
-import { useShopifyUrl } from "src/contexts/shopifyUrlContext/shopifyUrlContext";
-import { IdExtractor } from "src/contexts/types";
+import { IdExtractor } from '@envive-ai/types';
+import { useCallback } from 'react';
+import { useShopifyUrl } from 'src/contexts/shopifyUrlContext/shopifyUrlContext';
 
 export const useShopifyUrlOperations = () => {
-  const {
-    getTrimmedPathName,
-    getPlpOrPdpId,
-    isOnPdpPage,
-    isOnPlpPage,
-    isReady,
-  } = useShopifyUrl();
+  const { getTrimmedPathName, getPlpOrPdpId, isOnPdpPage, isOnPlpPage, isReady } = useShopifyUrl();
 
   return {
     getTrimmedPathName,
@@ -24,10 +18,10 @@ export const useCurrentPageType = () => {
   const { isOnPdpPage, isOnPlpPage, isReady } = useShopifyUrl();
 
   const getPageType = useCallback(() => {
-    if (!isReady) return "unknown";
-    if (isOnPdpPage()) return "pdp";
-    if (isOnPlpPage()) return "plp";
-    return "other";
+    if (!isReady) return 'unknown';
+    if (isOnPdpPage()) return 'pdp';
+    if (isOnPlpPage()) return 'plp';
+    return 'other';
   }, [isReady, isOnPdpPage, isOnPlpPage]);
 
   return { getPageType, isReady };

package/src/hooks/SnapCalculator/useSnapCalculator.ts

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-
-export type Unit = 'percent' | 'pixel';
+import { Unit } from '@envive-ai/types';
 
 export const useSnapCalculator = (snaps: number[], maxHeight: number, unit: Unit) => {
   const viewportHeightPx = document.documentElement.clientHeight;

package/src/hooks/TrackComponentVisibleEvent/useTrackComponentVisibleEvent.ts

@@ -1,10 +1,7 @@
-import { RefObject, useEffect, useRef } from "react";
-import { SpiffyWidgets } from "src/application/models/spiffyWidgets";
-import { useIntersection } from "src/hooks/Intersection/useIntersection";
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from "src/contexts/amplitudeContext/amplitudeContext";
+import { RefObject, useEffect, useRef } from 'react';
+import { useIntersection } from 'src/hooks/Intersection/useIntersection';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { SpiffyMetricsEventName, SpiffyWidgets } from '@envive-ai/types';
 
 /**
  * Tracks a component and logs an event to Amplitude when the component is visible.
@@ -18,9 +15,9 @@ export const useTrackComponentVisibleEvent = (
   component: SpiffyWidgets,
   element: RefObject<HTMLElement>,
   eventProps?: Record<string, unknown>,
-  eventName: SpiffyMetricsEventName = SpiffyMetricsEventName.ChatComponentVisible
+  eventName: SpiffyMetricsEventName = SpiffyMetricsEventName.ChatComponentVisible,
 ) => {
-  const isVisible = useIntersection(element, "0px");
+  const isVisible = useIntersection(element, '0px');
   const hasTrackedEvent = useRef(false);
   const { trackEvent } = useAmplitude();
 
@@ -39,7 +36,7 @@ export const useTrackComponentVisibleEvent = (
     }
     // Default case for other event types
     return {
-      component: component,
+      component,
       ...eventProps,
     };
   })();
@@ -47,7 +44,7 @@ export const useTrackComponentVisibleEvent = (
   useEffect(() => {
     if (isVisible && !hasTrackedEvent.current) {
       trackEvent({
-        eventName: eventName,
+        eventName,
         eventProps: componentProps,
       });
       hasTrackedEvent.current = true;

package/src/hooks/UpdateAnalyticsProps/useUpdateAnalyticsProps.ts

@@ -1,13 +1,8 @@
-import { useAtomValue } from "jotai";
-import { useEffect, useRef } from "react";
-import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from "src/contexts/amplitudeContext/amplitudeContext";
-import {
-  hasParsedVariantInfoAtom,
-  variantInfoAtom,
-} from "src/atoms/app/variant";
+import { useAtomValue } from 'jotai';
+import { useEffect, useRef } from 'react';
+import { useAmplitude } from 'src/contexts/amplitudeContext/amplitudeContext';
+import { hasParsedVariantInfoAtom, variantInfoAtom } from 'src/atoms/app/variant';
+import { SpiffyMetricsEventName } from '@envive-ai/types';
 
 /**
  * Updates the default analytics properties whenever the variant info changes. This hook also
@@ -21,10 +16,7 @@ export const useUpdateAnalyticsProps = () => {
 
   useEffect(() => {
     const variantInfoWithPrefix = Object.fromEntries(
-      Object.entries(variantInfo).map(([key, value]) => [
-        `variantInfo.${key}`,
-        value,
-      ])
+      Object.entries(variantInfo).map(([key, value]) => [`variantInfo.${key}`, value]),
     );
 
     const defaultEventProperties: Record<string, unknown> = {
@@ -33,19 +25,18 @@ export const useUpdateAnalyticsProps = () => {
     };
 
     // TODO: should be removed over time, after migration
-    if (variantInfo.variant === "pdp") {
+    if (variantInfo.variant === 'pdp') {
       defaultEventProperties.product_id = variantInfo.productId;
     }
 
     // TODO: should be removed over time, after migration
-    if (variantInfo.variant === "plp") {
+    if (variantInfo.variant === 'plp') {
       defaultEventProperties.plp_id = variantInfo.plpId;
     }
 
     // TODO: should be removed over time, after migration
-    if (variantInfo.variant === "page_visit") {
-      defaultEventProperties.page_visit_category =
-        variantInfo.pageVisitCategory;
+    if (variantInfo.variant === 'page_visit') {
+      defaultEventProperties.page_visit_category = variantInfo.pageVisitCategory;
       defaultEventProperties.page_visit_url = variantInfo.url;
     }
 
@@ -58,10 +49,5 @@ export const useUpdateAnalyticsProps = () => {
       });
       hasInitialized.current = true;
     }
-  }, [
-    variantInfo,
-    hasParsedVariantInfo,
-    trackEvent,
-    setSupplementalDefaultProps,
-  ]);
+  }, [variantInfo, hasParsedVariantInfo, trackEvent, setSupplementalDefaultProps]);
 };

package/src/hooks/utils.ts

@@ -1,22 +1,15 @@
-import {
-  PLPAttributeCategory,
-  UserEventCategory,
-} from "@spiffy-ai/commerce-api-client";
-import { SearchResult } from "src/application/models/api/search";
-import { UserEvent, VariantInfo } from "src/application/models";
-import { v4 as uuid } from "uuid";
+import { PLPAttributeCategory, UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { UserEvent, VariantInfo, SearchResult } from '@envive-ai/types';
+import { v4 as uuid } from 'uuid';
 
 export const isElementPartiallyVisible = (el?: HTMLDivElement | null) => {
   if (!el) return false;
 
   const rect = el.getBoundingClientRect();
-  const windowHeight =
-    window.innerHeight || document.documentElement.clientHeight;
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
   const windowWidth = window.innerWidth || document.documentElement.clientWidth;
-  const verticallyVisible =
-    Math.round(rect.top) < windowHeight && Math.round(rect.bottom) > 0;
-  const horizontallyVisible =
-    Math.round(rect.left) < windowWidth && Math.round(rect.right) > 0;
+  const verticallyVisible = Math.round(rect.top) < windowHeight && Math.round(rect.bottom) > 0;
+  const horizontallyVisible = Math.round(rect.left) < windowWidth && Math.round(rect.right) > 0;
   return verticallyVisible && horizontallyVisible;
 };
 
@@ -32,21 +25,21 @@ export const createVisitUserEvent = ({
   variantInfo: VariantInfo;
 }): UserEvent | undefined => {
   // this is a pdp visit event
-  if (variantInfo.variant === "pdp" && variantInfo.productId != null) {
+  if (variantInfo.variant === 'pdp' && variantInfo.productId != null) {
     return {
       eventId: uuid(),
       createdAt: new Date().toISOString(),
       category: UserEventCategory.PdpVisit,
       attributes: {
         productId: variantInfo.productId,
-        parentProductId: variantInfo.parentProductId ?? "",
-        url: variantInfo.url ?? "",
+        parentProductId: variantInfo.parentProductId ?? '',
+        url: variantInfo.url ?? '',
       },
     };
   }
 
   // this is a plp visit event
-  if (variantInfo.variant === "plp" && variantInfo.plpId != null) {
+  if (variantInfo.variant === 'plp' && variantInfo.plpId != null) {
     return {
       eventId: uuid(),
       createdAt: new Date().toISOString(),
@@ -60,7 +53,7 @@ export const createVisitUserEvent = ({
     };
   }
 
-  if (variantInfo.variant === "page_visit") {
+  if (variantInfo.variant === 'page_visit') {
     return {
       eventId: uuid(),
       createdAt: new Date().toISOString(),
@@ -85,27 +78,24 @@ const parseTime = (time: string, timeZone: string) => {
 
     // Adjust hours for AM/PM
     let adjustedHours = 0;
-    if (period.toUpperCase() === "PM" && hours !== "12") {
+    if (period.toUpperCase() === 'PM' && hours !== '12') {
       adjustedHours = parseInt(hours) + 12;
     }
 
-    if (period.toUpperCase() === "AM" && hours !== "12") {
+    if (period.toUpperCase() === 'AM' && hours !== '12') {
       adjustedHours = parseInt(hours);
     }
 
     // Create the date string with time zone
-    const formattedDate = `${date.toISOString().split("T")[0]}T${String(
-      adjustedHours
-    ).padStart(2, "0")}:${minutes}:00`;
+    const formattedDate = `${date.toISOString().split('T')[0]}T${String(adjustedHours).padStart(
+      2,
+      '0',
+    )}:${minutes}:00`;
     return new Date(`${formattedDate}${timeZone}`);
   }
 };
 
-export const isWithinBusinessHours = (
-  startTime: string,
-  endTime: string,
-  timeZone: string
-) => {
+export const isWithinBusinessHours = (startTime: string, endTime: string, timeZone: string) => {
   // Parse start and end times
   const start = parseTime(startTime, timeZone);
   let end = parseTime(endTime, timeZone);
@@ -141,7 +131,7 @@ export enum SearchResultsState {
 
 export const getSearchResultsState = (
   isLoadingSearch: boolean,
-  searchData: SearchResult | null
+  searchData: SearchResult | null,
 ): SearchResultsState => {
   if (isLoadingSearch) {
     return SearchResultsState.Loading;

package/src/interceptors/index.ts

@@ -1,2 +1 @@
-export * from "./types";
-export * from "./useMessageInterceptor";
+export * from './useMessageInterceptor';

package/src/interceptors/useMessageInterceptor.ts

@@ -1,17 +1,21 @@
-import { FormType, ResponseCategory } from "@spiffy-ai/commerce-api-client";
+import {} from "@spiffy-ai/commerce-api-client";
 import { useMemo } from "react";
-import { Response } from "src/application/models";
-import { MessageInterceptor } from "./types";
+import {
+  MessageInterceptor,
+  ApiFormType,
+  ApiResponseCategory,
+} from "@envive-ai/types";
+import { ApiResponse } from "src/types";
 
 export const useMessageInterceptor = () => {
   const interceptorMap = useMemo(() => {
-    const interceptors = new Map<FormType, MessageInterceptor>();
+    const interceptors = new Map<ApiFormType, MessageInterceptor>();
     // Form escalation interceptor removed as per user instruction
     return interceptors;
   }, []);
 
-  const intercept = (response?: Response) => {
-    if (response?.category === ResponseCategory.Form) {
+  const intercept = (response?: ApiResponse) => {
+    if (response?.category === ApiResponseCategory.Form) {
       const formType = response.attributes.formCategory?.formType;
       if (formType) {
         const interceptor = interceptorMap.get(formType);