@envive-ai/react-hooks 0.1.4 → 0.1.6

package/src/atoms/org/orgUIConfig.ts

@@ -1,142 +0,0 @@
-import { atom } from "jotai";
-import { FeatureGates, getOrgInfo } from "src/application/models";
-import { findCustomerServiceImpl } from "src/application/service/customerService";
-import { CustomerServiceIntegrationMode } from "src/application/service/customerService/types";
-import { featureFlagServiceAtom, orgShortNameAtom } from "src/atoms/org/org";
-import { OrgUIConfig } from "src/contexts/types";
-import { getAtomStore } from "src/atoms/atomStore/atomStore";
-import Logger from "src/application/logging/logger";
-
-const getCustomerServiceIntegrationMode = ({
-  integrationMode,
-  isNewFeatureEnabled,
-}: {
-  integrationMode: CustomerServiceIntegrationMode;
-  isNewFeatureEnabled: boolean;
-}): CustomerServiceIntegrationMode => {
-  if (integrationMode !== CustomerServiceIntegrationMode.full) {
-    return integrationMode;
-  }
-  // Only allow CustomerServiceIntegrationMode.full if `isNewFeatureEnabled` is also true
-  return isNewFeatureEnabled
-    ? integrationMode
-    : CustomerServiceIntegrationMode.simple;
-};
-
-const internalOrgUIConfigAtom = atom<OrgUIConfig | undefined>(undefined);
-
-export const orgUIConfigAtom = atom(
-  (get) => {
-    const orgUIConfig = get(internalOrgUIConfigAtom);
-    return orgUIConfig; // Return undefined if not set instead of throwing
-  },
-  (_, set, value: OrgUIConfig) => {
-    set(internalOrgUIConfigAtom, value);
-  }
-);
-
-export const getOrgUIConfig = async (
-  graphqlOrgUIConfig?: Omit<OrgUIConfig, "merchantOverrideCss">,
-  graphqlMerchantOverrideCss?: string
-) => {
-  const atomStore = getAtomStore();
-  const orgShortName = atomStore.get(orgShortNameAtom);
-  if (!orgShortName) {
-    Logger.logWarn("orgShortName is undefined, cannot get org info", undefined);
-    return;
-  }
-
-  const orgInfo = await getOrgInfo(orgShortName);
-
-  const featureFlagService = atomStore.get(featureFlagServiceAtom);
-  if (!featureFlagService) {
-    Logger.logWarn(
-      "featureFlagService is undefined, cannot get feature flags",
-      undefined
-    );
-    return;
-  }
-
-  const isNewFeatureEnabled = featureFlagService.isFeatureGateEnabled(
-    FeatureGates.IsNewFeatureEnabled
-  );
-  const enableWatermark = featureFlagService.isFeatureGateEnabled(
-    FeatureGates.IsWatermarkEnabled
-  );
-  const userQueryAwaysEnabled = featureFlagService.isFeatureGateEnabled(
-    FeatureGates.IsUserQueryAlwaysEnabled
-  );
-  const isGraphQLUIConfigsEnabled = featureFlagService.isFeatureGateEnabled(
-    FeatureGates.IsGraphQLUIConfigsEnabled
-  );
-  const isGraphQLComponentConfigsEnabled =
-    featureFlagService.isFeatureGateEnabled(
-      FeatureGates.IsGraphQLComponentConfigsEnabled
-    );
-
-  const localOrgUIConfig = orgInfo.orgUIConfig();
-  let orgUIConfig: Partial<OrgUIConfig> = { ...localOrgUIConfig };
-
-  if (isGraphQLUIConfigsEnabled && graphqlMerchantOverrideCss) {
-    orgUIConfig = {
-      ...orgUIConfig,
-      merchantOverrideCss: graphqlMerchantOverrideCss,
-    };
-  }
-
-  if (isGraphQLComponentConfigsEnabled && graphqlOrgUIConfig) {
-    orgUIConfig = {
-      ...orgUIConfig,
-      ...graphqlOrgUIConfig,
-    };
-  }
-
-  Logger.logInfo("[spiffy-ai] Feature gate enableWatermark check", {
-    enableWatermark,
-    floatingChatConfig: orgUIConfig.floatingChatConfig,
-  });
-
-  const updatedOrgUIConfig: OrgUIConfig = {
-    ...orgUIConfig,
-    conversationalSearch: orgUIConfig.conversationalSearch
-      ? {
-          ...orgUIConfig.conversationalSearch,
-          enabled: isNewFeatureEnabled,
-        }
-      : undefined,
-    customerServiceIntegration: {
-      ...orgUIConfig.customerServiceIntegration,
-      integrationMode: getCustomerServiceIntegrationMode({
-        isNewFeatureEnabled,
-        integrationMode:
-          orgUIConfig.customerServiceIntegration?.integrationMode ??
-          CustomerServiceIntegrationMode.none,
-      }),
-    },
-    floatingChatConfig: {
-      ...orgUIConfig.floatingChatConfig,
-      // Only enable the watermark if it is enabled in config and through featureFlag.
-      // This enables a quick "off-switch" in case a merchant tells us to turn it off
-      // quickly. This can be removed once the config is moved to the backend
-      enableWatermark:
-        orgUIConfig.floatingChatConfig?.enableWatermark && enableWatermark,
-      userQueryInputEnabled:
-        orgUIConfig.floatingChatConfig?.userQueryInputEnabled ||
-        userQueryAwaysEnabled,
-    },
-  } as OrgUIConfig;
-
-  atomStore.set(orgUIConfigAtom, updatedOrgUIConfig);
-};
-
-export const orgCustomerServiceConfig = atom(
-  (get) => get(orgUIConfigAtom)?.customerServiceIntegration
-);
-
-export const orgCustomerServiceService = atom((get) => {
-  const config = get(orgCustomerServiceConfig);
-  if (!config?.provider) {
-    return undefined;
-  }
-  return findCustomerServiceImpl(config.provider);
-});

package/src/enabled-features.ts

@@ -1,83 +0,0 @@
-import Logger from 'src/application/logging/logger';
-import { LocalStorageService } from 'src/application/service/localStorageService';
-import { getOrgInfo } from 'src/application/models';
-import { OrgConfig } from 'src/application/models/api/orgConfigResults';
-import { FeatureFlagService } from 'src/application/service/featureFlagService';
-
-
-type EnabledFeaturesValues = {
-  envive: boolean;
-  salesAgent: boolean;
-};
-class EnabledFeatures {
-  private static values: EnabledFeaturesValues | undefined = undefined;
-
-  static async get(
-    orgConfig: OrgConfig,
-    featureFlagService: FeatureFlagService,
-  ): Promise<EnabledFeaturesValues> {
-    if (this.values !== undefined) {
-      return this.values;
-    }
-
-    const isSpiffyEnabled = async (orgConfig: OrgConfig, featureFlagService: FeatureFlagService): Promise<boolean> => {
-      // "spiffy_on" is the highest precedence override and typically used for development/testing
-      // skip all other checks if it is "true"
-      if (LocalStorageService.getSpiffyOnFeatureFlag() === 'true') {
-        Logger.logDebug(`[spiffy-ai] spiffy enabled by "spiffy_on" override`);
-        return true;
-      }
-
-      if (LocalStorageService.getSpiffyOnFeatureFlag() === 'false') {
-        Logger.logDebug(`[spiffy-ai] envive disabled by "envive_on" override`);
-        return false;
-      }
-    
-      if (window._spiffy?.show != null && !window._spiffy.show) {
-        Logger.logDebug(`[spiffy-ai] spiffy disabled by window._spiffy.show`);
-        return false;
-      }
-    
-      if (!featureFlagService.isClientSessionEnabled()) {
-        Logger.logDebug(`[spiffy-ai] spiffy disabled by feature flag`);
-        return false;
-      }
-    
-      // this is for when visibility is controlled by the merchant
-      if (window._spiffy?.show != null && window._spiffy.show) {
-        Logger.logDebug(`[spiffy-ai] spiffy enabled by window._spiffy.show`);
-        return true;
-      }
-    
-      // otherwise, spiffy controls the visibility of the experience through a feature flag
-      const orgInfo = await getOrgInfo(orgConfig.org.org.shortName);
-      if (orgInfo.alwaysEnabledMerchants) {
-        Logger.logDebug(`[spiffy-ai] spiffy enabled by org config and feature flag`);
-        return true;
-      }
-    
-      if (featureFlagService.isClientSessionEnabled()) {
-        Logger.logDebug(`[spiffy-ai] spiffy is enabled by feature flag`);
-        return true;
-      }
-    
-      Logger.logDebug(`[spiffy-ai] spiffy is disabled because not all checks have passed`);
-      return false;
-    };
-  
-    const isSalesAgentEnabled = isSpiffyEnabled;
-
-    this.values = {
-      envive: await isSpiffyEnabled(orgConfig, featureFlagService),
-      salesAgent: await isSalesAgentEnabled(orgConfig, featureFlagService),
-    };
-
-    return this.values;
-  }
-
-  static reset() {
-    this.values = undefined;
-  }
-}
-
-export { EnabledFeatures };

package/src/hooks/useDynamicVariants.ts

@@ -1,210 +0,0 @@
-import Logger from 'src/application/logging/logger';
-import { useEffect, useRef, useCallback, useState } from 'react';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { variantInfoAtom } from 'src/atoms/app';
-import { PageVariantService } from 'src/application/service/pageVariantService';
-import { orgPageConfigAtom } from 'src/atoms/org/orgPageConfig';
-import { hasParsedVariantInfoAtom, supportedEventAtom } from 'src/atoms/app/variant';
-import { SpiffyMetricsEventName, AmplitudeAdapter } from 'src/adapters/amplitude';
-import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
-import { createAppLoadedEvent, createVisitUserEvent } from 'src/hooks/utils';
-import { queueUserEventAtom } from 'src/atoms/chat/messageQueue';
-import { UserEvent } from 'src/application/models';
-import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
-
-// consider putting this in the org config
-const DEBOUNCE_DELAY_MS = 300;
-
-// a debounced function that sets the location href to prevent rapidly changing urls from
-// causing the variant info to be changed too early
-const debounce = (func: () => void, delay: number): (() => void) => {
-  let timeoutId: NodeJS.Timeout;
-
-  return () => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => func(), delay);
-  };
-};
-
-const isUserEventEqual = (event1: UserEvent | null, event2: UserEvent | null) => {
-  if (!event1 || !event2) {
-    return false;
-  }
-  if (event1.category !== event2.category) {
-    return false;
-  }
-  if (
-    event1.category === UserEventCategory.Search &&
-    event2.category === UserEventCategory.Search
-  ) {
-    return event1.attributes.searchTerm === event2.attributes.searchTerm;
-  }
-  if (
-    event1.category === UserEventCategory.PdpVisit &&
-    event2.category === UserEventCategory.PdpVisit
-  ) {
-    return event1.attributes.productId === event2.attributes.productId;
-  }
-  if (
-    event1.category === UserEventCategory.PlpVisit &&
-    event2.category === UserEventCategory.PlpVisit &&
-    'id' in event1.attributes.attributes &&
-    'id' in event2.attributes.attributes
-  ) {
-    return event1.attributes.attributes.id === event2.attributes.attributes.id;
-  }
-  if (
-    event1.category === UserEventCategory.PageVisit &&
-    event2.category === UserEventCategory.PageVisit
-  ) {
-    return event1.attributes.url === event2.attributes.url;
-  }
-  return false;
-};
-
-export const useDynamicVariants = () => {
-  const orgUIConfig = useAtomValue(orgUIConfigAtom);
-  const locationHrefRef = useRef<string>(window.location.href);
-  const setVariantInfo = useSetAtom(variantInfoAtom);
-  const setSupportedEvent = useSetAtom(supportedEventAtom);
-  const queueUserEvent = useSetAtom(queueUserEventAtom);
-  const [mostRecentUserEvent, setMostRecentUserEvent] = useState<UserEvent | null>(null);
-
-  const orgPageConfig = useAtomValue(orgPageConfigAtom);
-  const debouncedFunc = useRef<(() => void) | null>(null);
-  // we need to fetch org info before we can get the variant info. this prevents the rest of the application
-  // logic from running before that happens. More specifically, we want to have all org and variant states
-  // settled before mounting the ChatContextProvider which will start the session.
-  const [hasParsedVariantInfo, setHasParsedVariantInfo] = useAtom(hasParsedVariantInfoAtom);
-  const animationFrameRef = useRef<number | null>(null);
-  const isBeforeUnload = useRef(false);
-
-  const handleLocationChange = () => {
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-
-    animationFrameRef.current = requestAnimationFrame(() => {
-      if (locationHrefRef.current !== window.location.href) {
-        debouncedFunc.current?.();
-      }
-    });
-  };
-
-  const handlePageChange = useCallback(async () => {
-    if (isBeforeUnload.current) {
-      return;
-    }
-
-    if (!orgPageConfig) {
-      Logger.logWarn(
-        '[spiffy-ai] orgPageConfig not found. skipping page change handling',
-        undefined,
-      );
-      return;
-    }
-
-    const parsedVariantInfo = await PageVariantService.getVariantInfoWithPageConfig(orgPageConfig);
-
-    if (parsedVariantInfo) {
-      Logger.logDebug('[spiffy-ai] variantInfo changed', parsedVariantInfo);
-      const [newVariantInfo, pageVariantConfig] = parsedVariantInfo;
-
-      setVariantInfo(newVariantInfo);
-      setHasParsedVariantInfo(true);
-
-      const visitEvent = createVisitUserEvent({ variantInfo: newVariantInfo });
-      if (visitEvent && !isUserEventEqual(mostRecentUserEvent, visitEvent)) {
-        setMostRecentUserEvent(visitEvent);
-        queueUserEvent(createAppLoadedEvent());
-        queueUserEvent(visitEvent);
-      }
-
-      const supportedEvent = await PageVariantService.checkSupportedEvent(pageVariantConfig);
-      console.log('useDynamicVariants - supportedEvent', supportedEvent);
-      setSupportedEvent(supportedEvent);
-      AmplitudeAdapter.trackEvent({
-        eventName: SpiffyMetricsEventName.SupportedEvent,
-        eventProps: {
-          ...supportedEvent,
-        },
-      });
-    } else {
-      setHasParsedVariantInfo(false);
-    }
-  }, [
-    orgPageConfig,
-    setVariantInfo,
-    setHasParsedVariantInfo,
-    setSupportedEvent,
-    queueUserEvent,
-    mostRecentUserEvent,
-    setMostRecentUserEvent,
-  ]);
-
-  useEffect(() => {
-    debouncedFunc.current = debounce(() => {
-      locationHrefRef.current = window.location.href;
-      handlePageChange();
-    }, DEBOUNCE_DELAY_MS);
-
-    return () => {
-      debouncedFunc.current = null;
-    };
-  }, [handlePageChange]);
-
-  useEffect(() => {
-    // when navigation happens, the url is updated before the page is unloaded & reloaded
-    // this causes the variant info to be changed first and triggering the hook that fetches
-    // next responses. On non-SPA's, this handler prevents variant info from being updated
-    // and lets the usual initialization sequence update it instead. On SPA's, this is not called
-    // and handleLocationChange is called instead
-    const handleBeforeUnload = () => {
-      setSupportedEvent(undefined);
-      isBeforeUnload.current = true;
-    };
-
-    window.addEventListener('click', handleLocationChange);
-    window.addEventListener('popstate', handleLocationChange);
-    window.addEventListener('beforeunload', handleBeforeUnload);
-
-    return () => {
-      window.removeEventListener('click', handleLocationChange);
-      window.removeEventListener('popstate', handleLocationChange);
-      window.removeEventListener('beforeunload', handleBeforeUnload);
-      // TODO: this is causing the supportedEvent to be undefined for Magento customers
-      // Why is unclear however...
-      // setSupportedEvent(undefined);
-
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, [handlePageChange, setSupportedEvent]);
-
-  useEffect(() => {
-    // handle the initial page load and when the variant info is overridden
-    if (!hasParsedVariantInfo) {
-      handlePageChange();
-    }
-  }, [hasParsedVariantInfo, handlePageChange]);
-
-  useEffect(() => {
-    let windowInterval: number | null = null;
-    const { merchantVariantSettings } = orgUIConfig;
-
-    if (merchantVariantSettings?.dynamicVariants?.enabled) {
-      const refreshInterval = merchantVariantSettings?.dynamicVariants?.refreshInterval;
-      windowInterval = window.setInterval(() => {
-        handleLocationChange();
-      }, refreshInterval);
-    }
-
-    return () => {
-      if (windowInterval) {
-        window.clearInterval(windowInterval);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-};

package/src/hooks/useFileUpload.ts

@@ -1,63 +0,0 @@
-import { AttachmentRequest } from "@spiffy-ai/commerce-api-client";
-import { useAtom, useAtomValue } from "jotai";
-import { useRef, useState } from "react";
-import {
-  orgCustomerServiceService,
-  customerServiceAttachment,
-} from "src/atoms/org";
-
-export const useFileUpload = () => {
-  const fileInputRef = useRef(null);
-  const [attachment, setAttachment] = useAtom(customerServiceAttachment);
-  const customerServiceImpl = useAtomValue(orgCustomerServiceService);
-  const [error, setError] = useState("");
-
-  const isValidFile = (file?: File) => {
-    const maxSize = customerServiceImpl.maxfileUploadSize;
-    if (maxSize && (file?.size || 0) > maxSize) {
-      const strFileSize = `${(maxSize / 1000000).toFixed(1)}MB`;
-      setError(`Exceeded file size of ${strFileSize}`);
-      return false;
-    }
-    return true;
-  };
-
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event?.target?.files?.[0];
-
-    if (file && isValidFile(file)) {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onloadend = () => {
-        const base64 = reader?.result as string;
-        setAttachment({
-          base64_content: base64,
-          content_type: file.type,
-          file_name: file.name,
-        });
-      };
-    }
-  };
-
-  const prepareAttachment = (): AttachmentRequest | undefined => {
-    if (attachment) {
-      return {
-        ...attachment,
-        base64_content: attachment?.base64_content.split(",")[1],
-      } as AttachmentRequest;
-    }
-  };
-
-  const handleFileRemove = () => {
-    setAttachment(undefined);
-  };
-
-  return {
-    error,
-    fileInputRef,
-    attachment,
-    handleFileSelect,
-    handleFileRemove,
-    prepareAttachment,
-  };
-};

package/src/hooks/useHideElements.ts

@@ -1,82 +0,0 @@
-import Logger from 'src/application/logging/logger';
-import { SelectorFactory } from 'src/application/utils/nodeSelector';
-import { useEffect, useRef, useState } from 'react';
-import { useAtomValue } from 'jotai';
-import { SpiffyEventName } from 'src/application/models/events';
-import { ElementObserver } from 'src/application/utils/elementObserver';
-import { DOMObserver } from 'src/application/utils/domObserver';
-import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
-
-/**
- * This hook hides/shows elements that could overlap with the chat when the chat is opened/closed.
- */
-export const useHideElements = () => {
-  const orgUIConfig = useAtomValue(orgUIConfigAtom);
-  const [hasRegisteredEventListeners, setHasRegisteredEventListeners] = useState(false);
-  const elementObservers = useRef<ElementObserver[]>([]);
-
-  const hideElements = (elements: ElementObserver[]) => {
-    elements.forEach((element) => {
-      element.hide();
-    });
-  };
-
-  const showElements = (elements: ElementObserver[]) => {
-    elements.forEach((element) => {
-      element.show();
-    });
-  };
-
-  useEffect(() => {
-    elementObservers.current = [];
-    orgUIConfig.hiddenElementSelectors?.forEach((selector) => {
-      elementObservers.current.push(DOMObserver.add(SelectorFactory.query(selector)));
-    });
-    // since we're not using useElementObserver, we need to manually start the observer
-    elementObservers.current.forEach((element) => {
-      element.init();
-    });
-    DOMObserver.observe();
-
-    return () => {
-      elementObservers.current.forEach((element) => {
-        element.destroy();
-      });
-      elementObservers.current = [];
-    };
-  }, [orgUIConfig.hiddenElementSelectors]);
-
-  useEffect(() => {
-    if (elementObservers.current.length > 0 && !hasRegisteredEventListeners) {
-      Logger.logDebug(
-        `Registering ${SpiffyEventName.WidgetOpen} event for ${elementObservers.current.length} elements`,
-      );
-      window.addEventListener(SpiffyEventName.WidgetOpen, () =>
-        hideElements(elementObservers.current),
-      );
-
-      Logger.logDebug(
-        `Registering ${SpiffyEventName.WidgetClose} event for ${elementObservers.current.length} elements`,
-      );
-      window.addEventListener(SpiffyEventName.WidgetClose, () =>
-        showElements(elementObservers.current),
-      );
-
-      setHasRegisteredEventListeners(true);
-    }
-
-    return () => {
-      if (elementObservers.current.length > 0 && hasRegisteredEventListeners) {
-        window.removeEventListener(SpiffyEventName.WidgetOpen, () =>
-          hideElements(elementObservers.current),
-        );
-
-        window.removeEventListener(SpiffyEventName.WidgetClose, () =>
-          showElements(elementObservers.current),
-        );
-
-        setHasRegisteredEventListeners(false);
-      }
-    };
-  }, [hasRegisteredEventListeners]);
-};

package/src/hooks/useHorizontalScrollAnimation.ts

@@ -1,115 +0,0 @@
-import { useEffect, RefObject, useRef } from 'react';
-import { useReducedMotionWithOverride } from 'src/hooks/useReducedMotionWithOverride';
-
-// IMPORTANT: All refs passed to this hook must be mutable (not Readonly)
-interface UseHorizontalScrollAnimationOptions {
-  scrollContainerRef: RefObject<HTMLDivElement>;
-  animationSpeed?: 'standard' | 'slow' | 'none';
-}
-
-// When using this hook, ensure that scrouuContainerRef is not undefined. It is allowed to
-// prevent issued elsewhere in the codebase, but it should be dealt with whenever you use this hook.
-export function useHorizontalScrollAnimation({
-  scrollContainerRef,
-  animationSpeed = 'standard',
-}: UseHorizontalScrollAnimationOptions): void {
-  const reducedMotion = useReducedMotionWithOverride();
-  const resumeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const scrollAnimationRef = useRef<number | null>(null);
-
-  const pauseOnHover = true; // This is unlikely to need to be configurable but I'm throwing it up here just in case.
-
-  // Animation constants: time-based
-  let PIXELS_PER_SECOND = 40;
-  switch (animationSpeed) {
-    case 'standard':
-      PIXELS_PER_SECOND = 40;
-      break;
-    case 'slow':
-      PIXELS_PER_SECOND = 25;
-      break;
-    case 'none':
-      PIXELS_PER_SECOND = 0;
-      break;
-    default:
-      PIXELS_PER_SECOND = 40;
-  }
-  const RESUME_DELAY_MS = 2000;
-  const isAnimated = animationSpeed !== 'none';
-
-  useEffect(() => {
-    if (!isAnimated || reducedMotion || !scrollContainerRef) return;
-
-    const container = scrollContainerRef.current;
-    if (!container) return;
-    if (container.scrollWidth <= container.clientWidth) return;
-
-    let isPaused = false;
-    let lastTimestamp: number | null = null;
-    let accumulatedScroll = 0; // Accumulate fractional pixels
-
-    const step = (timestamp: number) => {
-      if (lastTimestamp === null) lastTimestamp = timestamp;
-      if (!isPaused) {
-        const delta = timestamp - lastTimestamp;
-        lastTimestamp = timestamp;
-
-        // Accumulate the scroll amount (including fractional pixels)
-        accumulatedScroll += PIXELS_PER_SECOND * (delta / 1000);
-
-        // Only apply whole pixel movements
-        const pixelsToScroll = Math.floor(accumulatedScroll);
-        if (pixelsToScroll > 0) {
-          container.scrollLeft += pixelsToScroll;
-          accumulatedScroll -= pixelsToScroll; // Keep the fractional remainder
-
-          if (container.scrollLeft >= container.scrollWidth - container.clientWidth) {
-            container.scrollLeft = 0; // Reset scroll to create a looping effect
-            accumulatedScroll = 0; // Reset accumulated scroll when looping
-          }
-        }
-      }
-      scrollAnimationRef.current = requestAnimationFrame(step);
-    };
-
-    // Start animation
-    scrollAnimationRef.current = requestAnimationFrame(step);
-
-    // Pause/resume logic
-    const pauseAnimation = () => {
-      isPaused = true;
-      if (resumeTimeoutRef.current) {
-        clearTimeout(resumeTimeoutRef.current);
-        resumeTimeoutRef.current = null;
-      }
-    };
-    const scheduleResumeAnimation = () => {
-      resumeTimeoutRef.current = setTimeout(() => {
-        isPaused = false;
-        lastTimestamp = null; // Reset timestamp so delta is correct after pause
-      }, RESUME_DELAY_MS);
-    };
-
-    if (pauseOnHover) {
-      container.addEventListener('mouseenter', pauseAnimation);
-      container.addEventListener('mouseleave', scheduleResumeAnimation);
-      container.addEventListener('touchstart', pauseAnimation);
-      container.addEventListener('touchend', scheduleResumeAnimation);
-    }
-
-    return () => {
-      if (scrollAnimationRef.current) {
-        cancelAnimationFrame(scrollAnimationRef.current);
-      }
-      if (pauseOnHover) {
-        container.removeEventListener('mouseenter', pauseAnimation);
-        container.removeEventListener('mouseleave', scheduleResumeAnimation);
-        container.removeEventListener('touchstart', pauseAnimation);
-        container.removeEventListener('touchend', scheduleResumeAnimation);
-      }
-      if (resumeTimeoutRef.current) {
-        clearTimeout(resumeTimeoutRef.current);
-      }
-    };
-  }, [isAnimated, reducedMotion, PIXELS_PER_SECOND, pauseOnHover, scrollContainerRef]);
-}