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

package/src/hooks/GrabAndScroll/useGrabAndScroll.ts

@@ -1,134 +1,133 @@
-import { useRef, useState } from 'react';
-import { AnimationProps, ArrowPosition } from '@envive-ai/types';
-
-const animateHorizontalScroll = ({
-  element,
-  duration,
-  targetScroll,
-  multiply = 1,
-  direction,
-  callback,
-  offset = 0,
-}: AnimationProps) => {
-  const start = element.scrollLeft;
-  const distance = (targetScroll - start) * multiply;
-  const startTime = performance.now();
-
-  function easeOutSine(x: number): number {
-    return Math.sin((x * Math.PI) / 2);
-  }
-
-  function scrollStep(currentTime: number): void {
-    const timeElapsed = currentTime - startTime;
-    const progress = Math.min(timeElapsed / duration, 1);
-    const easing = easeOutSine(progress);
-    const step = start + distance * easing;
-    const canScroll =
-      (direction === 'rt' ? element.scrollLeft < step : element.scrollLeft > step) || !direction;
-
-    if (step > 0 && canScroll) {
-      element.scrollTo(step, 0);
-    }
+import { useRef, useState } from "react";
 
-    if (timeElapsed < duration) {
-      requestAnimationFrame(scrollStep);
-    }
+type ArrowPosition = 'lt' | 'ct' | 'rt'
+
+interface AnimationProps {
+    element: HTMLElement
+    targetScroll: number 
+    duration: number 
+    direction?: 'lt' | 'rt' 
+    multiply?: number 
+    offset?: number
+    callback?: (position: ArrowPosition) => void
+}
 
-    // End of scrolling container
-    else if (element.scrollLeft + offset === element.scrollWidth) {
-      callback?.('rt');
+const animateHorizontalScroll = ({ element, duration, targetScroll, multiply = 1, direction, callback, offset = 0 }: AnimationProps) => {
+    const start = element.scrollLeft
+    const distance = (targetScroll - start) * multiply;
+    const startTime = performance.now();
+
+    function easeOutSine(x: number): number {
+      return Math.sin((x * Math.PI) / 2);
     }
-    // Begin of scrolling container
-    else if (element.scrollLeft <= 1) {
-      callback?.('lt');
+
+    function scrollStep(currentTime: number): void {
+        const timeElapsed = currentTime - startTime;
+        const progress = Math.min(timeElapsed / duration, 1);
+        const easing = easeOutSine(progress);
+        const step = start + (distance * easing)
+        const canScroll = (direction === 'rt' ? (element.scrollLeft < step) : (element.scrollLeft > step)) || !direction
+        
+        if (step > 0 && canScroll) {
+          element.scrollTo(step, 0)
+        }
+
+        if (timeElapsed < duration) {
+            requestAnimationFrame(scrollStep);
+        } 
+
+        // End of scrolling container
+        else if ((element.scrollLeft + offset) === element.scrollWidth) {
+            callback?.('rt')
+        } 
+        // Begin of scrolling container
+        else if (element.scrollLeft <= 1) {
+            callback?.('lt')
+        }
+        // Somewhere in the middle
+        else {
+            callback?.('ct')
+        }
+
     }
-    // Somewhere in the middle
-    else {
-      callback?.('ct');
+
+    requestAnimationFrame(scrollStep);
+}
+
+
+export const useGrabAndScroll = (enabled: boolean, chunkWidth: number, speed: number = 400, offset: number = 0) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const [ leftArrow, setLeftArrow ] = useState(false)
+    const [ rightArrow, setRightArrow ] = useState(true)
+
+    const handleArrows = (position: ArrowPosition) => {
+        switch (position) {
+            case 'lt':
+                setLeftArrow(false)
+                setRightArrow(true)
+                break
+
+            case 'rt':
+                setLeftArrow(true)
+                setRightArrow(false)
+                break
+
+            default:
+                setLeftArrow(true)
+                setRightArrow(true)
+        }
     }
-  }
-
-  requestAnimationFrame(scrollStep);
-};
-
-export const useGrabAndScroll = (
-  enabled: boolean,
-  chunkWidth: number,
-  speed: number = 400,
-  offset: number = 0,
-) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [leftArrow, setLeftArrow] = useState(false);
-  const [rightArrow, setRightArrow] = useState(true);
-
-  const handleArrows = (position: ArrowPosition) => {
-    switch (position) {
-      case 'lt':
-        setLeftArrow(false);
-        setRightArrow(true);
-        break;
-
-      case 'rt':
-        setLeftArrow(true);
-        setRightArrow(false);
-        break;
-
-      default:
-        setLeftArrow(true);
-        setRightArrow(true);
+
+    const animationTrigger = () => {
+        if (enabled && containerRef.current) {
+            const dist = (containerRef?.current?.scrollLeft || 0) / chunkWidth
+            const targetScroll = chunkWidth * (Math.floor(dist) + (dist % 1 > 0.5 ? 1 : 0))
+            animateHorizontalScroll({
+                element: containerRef.current, 
+                targetScroll, 
+                duration: speed,
+                offset,
+                callback: handleArrows
+            })
+        }
     }
-  };
-
-  const animationTrigger = () => {
-    if (enabled && containerRef.current) {
-      const dist = (containerRef?.current?.scrollLeft || 0) / chunkWidth;
-      const targetScroll = chunkWidth * (Math.floor(dist) + (dist % 1 > 0.5 ? 1 : 0));
-      animateHorizontalScroll({
-        element: containerRef.current,
-        targetScroll,
-        duration: speed,
-        offset,
-        callback: handleArrows,
-      });
+
+    const onNext = (cardsToSlide: number) => {
+        if (containerRef.current) {
+            const targetScroll = containerRef.current.scrollLeft + chunkWidth
+            animateHorizontalScroll({
+                element: containerRef.current, 
+                targetScroll, 
+                duration: speed, 
+                direction: 'rt', 
+                multiply: cardsToSlide,
+                offset,
+                callback: handleArrows
+            })
+        }
     }
-  };
-
-  const onNext = (cardsToSlide: number) => {
-    if (containerRef.current) {
-      const targetScroll = containerRef.current.scrollLeft + chunkWidth;
-      animateHorizontalScroll({
-        element: containerRef.current,
-        targetScroll,
-        duration: speed,
-        direction: 'rt',
-        multiply: cardsToSlide,
-        offset,
-        callback: handleArrows,
-      });
+    
+    const onPrevious = (cardsToSlide: number) => {
+        if (containerRef.current) {
+            const targetScroll = containerRef.current.scrollLeft - chunkWidth
+            animateHorizontalScroll({
+                element: containerRef.current, 
+                targetScroll, 
+                duration: speed, 
+                direction: 'lt', 
+                multiply: cardsToSlide,
+                offset,
+                callback: handleArrows
+            })
+        }
     }
-  };
-
-  const onPrevious = (cardsToSlide: number) => {
-    if (containerRef.current) {
-      const targetScroll = containerRef.current.scrollLeft - chunkWidth;
-      animateHorizontalScroll({
-        element: containerRef.current,
-        targetScroll,
-        duration: speed,
-        direction: 'lt',
-        multiply: cardsToSlide,
-        offset,
-        callback: handleArrows,
-      });
+
+    return {
+        containerRef,
+        leftArrow,
+        rightArrow,
+        animationTrigger,
+        onNext,
+        onPrevious
     }
-  };
-
-  return {
-    containerRef,
-    leftArrow,
-    rightArrow,
-    animationTrigger,
-    onNext,
-    onPrevious,
-  };
-};
+}

package/src/hooks/GraphQLConfig/useGraphQLConfig.ts

@@ -1,6 +1,8 @@
-import { GraphQlConfigValues } from '@envive-ai/types';
-import { useCallback, useEffect, useState } from 'react';
-import { useGraphQLClient } from 'src/contexts/graphqlContext/graphqlContext';
+import { useCallback, useEffect, useState } from "react";
+import {
+  GraphQlConfigValues,
+  useGraphQLClient,
+} from "src/contexts/graphqlContext/graphqlContext";
 
 export const useColorsAndFrontendConfig = () => {
   const { getColorsAndFrontendConfig, isReady } = useGraphQLClient();
@@ -18,7 +20,7 @@ export const useColorsAndFrontendConfig = () => {
       const result = await getColorsAndFrontendConfig();
       setData(result);
     } catch (err) {
-      setError(err instanceof Error ? err : new Error('Unknown error'));
+      setError(err instanceof Error ? err : new Error("Unknown error"));
     } finally {
       setLoading(false);
     }
@@ -48,7 +50,7 @@ export const useOrgId = () => {
         const id = await getOrgId();
         setOrgId(id);
       } catch (err) {
-        setError(err instanceof Error ? err : new Error('Unknown error'));
+        setError(err instanceof Error ? err : new Error("Unknown error"));
       } finally {
         setLoading(false);
       }

package/src/hooks/ImageResolver/useImageResolver.ts

@@ -1,12 +1,33 @@
-/* eslint-disable max-classes-per-file */
-import { OrgShortName } from '@envive-ai/types';
-import { useAtomValue } from 'jotai';
-import { orgShortNameAtom } from 'src/atoms/envive/enviveConfig';
-
+import { useAtomValue } from "jotai";
+import { OrgShortName } from "src/application/models";
+import { orgShortNameAtom } from "src/atoms/envive/enviveConfig";
 abstract class ImageResolver {
   abstract resolve(url: string, size: number): string;
 }
 
+class MerchantImageResolver {
+  private static imageResolverMap = new Map<string, ImageResolver>();
+
+  private static loadMapping() {
+    if (this.imageResolverMap.size === 0) {
+      this.imageResolverMap.set(OrgShortName.Spanx, new ShopifyImageResolver());
+      this.imageResolverMap.set(
+        OrgShortName.SpanxStaging,
+        new ShopifyImageResolver()
+      );
+      this.imageResolverMap.set(
+        OrgShortName.UniqueVintage,
+        new ShopifyImageResolver()
+      );
+    }
+    return this.imageResolverMap;
+  }
+
+  static get(name: string) {
+    return this.loadMapping().get(name);
+  }
+}
+
 class ShopifyImageResolver extends ImageResolver {
   resolve(url: string, size: number): string {
     const pattern = /_\d+x\.jpg/;
@@ -15,7 +36,7 @@ class ShopifyImageResolver extends ImageResolver {
     if (urlHasPrefix) {
       return url.replace(pattern, newSizePrefix);
     }
-    return url.replace('.jpg', newSizePrefix);
+    return url.replace(".jpg", newSizePrefix);
   }
 }
 
@@ -23,7 +44,10 @@ export const useImageResolver = () => {
   const orgShortName = useAtomValue(orgShortNameAtom);
   const resolve = (image?: string, size?: number) => {
     if (image && size && orgShortName) {
-      const newImagePath = MerchantImageResolver.get(orgShortName)?.resolve(image, size);
+      const newImagePath = MerchantImageResolver.get(orgShortName)?.resolve(
+        image,
+        size
+      );
       return newImagePath || image;
     }
     return image;
@@ -33,20 +57,3 @@ export const useImageResolver = () => {
     resolve,
   };
 };
-
-class MerchantImageResolver {
-  private static imageResolverMap = new Map<string, ImageResolver>();
-
-  private static loadMapping() {
-    if (this.imageResolverMap.size === 0) {
-      this.imageResolverMap.set(OrgShortName.Spanx, new ShopifyImageResolver());
-      this.imageResolverMap.set(OrgShortName.SpanxStaging, new ShopifyImageResolver());
-      this.imageResolverMap.set(OrgShortName.UniqueVintage, new ShopifyImageResolver());
-    }
-    return this.imageResolverMap;
-  }
-
-  static get(name: string) {
-    return this.loadMapping().get(name);
-  }
-}

package/src/hooks/LastInteraction/index.ts

@@ -0,0 +1 @@
+export * from './useLastInteraction';

package/src/hooks/LastInteraction/useLastInteraction.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import { useLocalStorage } from "src/contexts/localStorageContext";
+import { Message } from "src/types/custservice-types";
+
+const LAST_INTERACTION_KEY = 'v1-spiffy-last-interaction';
+
+// Custom hook for last interaction tracking
+export const useLastInteraction = (
+  isChatOpen: boolean,
+  messages: Message[][],
+  setHover: (state: boolean) => void
+) => {
+  const { setItem, getItem } = useLocalStorage();
+  const [lastInteraction, setLastInteraction] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (lastInteraction || isChatOpen) {
+      const currentTime = new Date();
+      setLastInteraction(currentTime);
+      setItem(LAST_INTERACTION_KEY, currentTime.toISOString());
+    }
+
+    setHover(isChatOpen);
+  }, [isChatOpen]);
+
+  useEffect(() => {
+    if (!lastInteraction) return;
+
+    const lastInteractionString = getItem('spiffy-last-interaction');
+
+    if (lastInteractionString && lastInteractionString !== lastInteraction.toISOString()) {
+      const lastInteractionTime = new Date(lastInteractionString);
+      if (lastInteractionTime > lastInteraction) {
+        setLastInteraction(lastInteractionTime);
+      } else {
+        setItem(LAST_INTERACTION_KEY, lastInteraction.toISOString());
+      }
+    }
+  }, [messages.length]);
+
+  return lastInteraction;
+};

package/src/hooks/LocalStorageOperations/useLocalStorageOperations.ts

@@ -1,10 +1,14 @@
-import { LocalStorageEventListener, LocalStorageKeys } from '@envive-ai/types';
-import { useState, useEffect, useCallback } from 'react';
-import { useLocalStorage } from 'src/contexts/localStorageContext';
+import { useState, useEffect, useCallback } from "react";
+import { LocalStorageEventListener } from "src/application/models/localStorageEventListener";
+import {
+  useLocalStorage,
+  LocalStorageKeys,
+} from "src/contexts/localStorageContext";
 
 // Reactive localStorage value hook
 export const useLocalStorageValue = (key: string) => {
-  const { getItem, setItem, attachListener, detachListener } = useLocalStorage();
+  const { getItem, setItem, attachListener, detachListener } =
+    useLocalStorage();
   const [value, setValue] = useState<string | null>(() => getItem(key));
 
   useEffect(() => {
@@ -24,7 +28,7 @@ export const useLocalStorageValue = (key: string) => {
       setItem(key, newValue);
       setValue(newValue);
     },
-    [key, setItem],
+    [key, setItem]
   );
 
   return { value, setValue: updateValue };
@@ -39,11 +43,11 @@ export const useSpiffyFeatureFlag = () => {
     (flag: boolean | null) => {
       setSpiffyOnFeatureFlag(flag);
     },
-    [setSpiffyOnFeatureFlag],
+    [setSpiffyOnFeatureFlag]
   );
 
   return {
-    value: value === 'true' ? true : value === 'false' ? false : null,
+    value: value === "true" ? true : value === "false" ? false : null,
     setFlag,
   };
 };
@@ -56,22 +60,25 @@ export const useEnviveFeatureFlag = () => {
   const setFlag = useCallback(
     (flag: boolean | null) => {
       if (flag === true) {
-        setItem(LocalStorageKeys.EnviveOnOverride, 'true');
+        setItem(LocalStorageKeys.EnviveOnOverride, "true");
       } else if (flag === false) {
-        setItem(LocalStorageKeys.EnviveOnOverride, 'false');
+        setItem(LocalStorageKeys.EnviveOnOverride, "false");
       }
     },
-    [setItem],
+    [setItem]
   );
 
   return {
-    value: value === 'true' ? true : value === 'false' ? false : null,
+    value: value === "true" ? true : value === "false" ? false : null,
     setFlag,
   };
 };
 
 // Storage listener hook
-export const useLocalStorageListener = (key: string, callback: (event: StorageEvent) => void) => {
+export const useLocalStorageListener = (
+  key: string,
+  callback: (event: StorageEvent) => void
+) => {
   const { attachListener, detachListener } = useLocalStorage();
 
   useEffect(() => {

package/src/hooks/MessageFilter/useMessageFilter.ts

@@ -1,4 +1,10 @@
-import { MessageFinder, Message, MessageType } from '@envive-ai/types';
+import { Message, MessageRole, MessageType } from 'src/application/models';
+
+type MessageFinder = {
+  msgs: Message[][];
+  type?: MessageType;
+  role?: MessageRole;
+};
 
 export const useMessageFilter = () => {
   const findMessageIndex = ({ msgs, type, role }: MessageFinder) => {