@envive-ai/react-widgets 0.1.2-arthur-3 → 0.1.2

package/src/SearchZeroState/SearchZeroState.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useAmplitudeTracking } from '@envive-ai/react-hooks/hooks/AmplitudeOperations';
 import { useSearch } from '@envive-ai/react-hooks/hooks/Search';
@@ -20,7 +20,6 @@ import { searchZeroStateVariantClasses } from './zeroStateSearchVariants';
 import { SearchIcon } from './SearchIcon';
 import { RecommendedProducts } from './components/RecommendedProducts';
 
-
 const SEARCH_ENTRYPOINT_INPUT_TESTID = 'spiffy-search-entrypoint-input';
 
 export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
@@ -28,7 +27,6 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
   initialIsOpen,
   entryPointRef,
 }) => {
-
   // eslint-disable-next-line no-console
   console.log('SearchZeroState: widgetConfig', widgetConfig);
   const {
@@ -56,7 +54,7 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
   const searchInput = useSearch({ allowRedirect: true });
 
   const { track } = useAmplitudeTracking();
-  
+
   const {
     recommendedProductsHeading,
     searchOverlayHeading,
@@ -86,8 +84,7 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
   const { overlayBackgroundClasses, sparklesIconColor } =
     searchZeroStateVariantClasses[validVariant];
 
-  const { searchInputIconColor } =
-    searchInputVariantClasses[searchInputVariant];
+  const { searchInputIconColor } = searchInputVariantClasses[searchInputVariant];
 
   const handleOpen = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
@@ -105,7 +102,6 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
 
   useEffect(() => {
     if (isOpen) {
-
       resetSearch(); // Reset search state when opening
       searchInputRef.current?.focus();
     }
@@ -166,29 +162,30 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
           <>
             <div className="spiffy-tw-relative spiffy-tw-mb-4">
               <div className="spiffy-tw-flex spiffy-tw-items-center">
-                <Typography id="global-search-title" variant="t3">
+                <Typography
+                  id="global-search-title"
+                  variant="t3"
+                >
                   {searchOverlayHeading}
                 </Typography>
                 <Sparkles
-                  className="sm:spiffy-tw-w-[36px] sm:spiffy-tw-h-[45px] spiffy-tw-w-[24px] spiffy-tw-h-[36px] spiffy-tw-ml-2"
+                  className="spiffy-tw-ml-2 spiffy-tw-h-[36px] spiffy-tw-w-[24px] sm:spiffy-tw-h-[45px] sm:spiffy-tw-w-[36px]"
                   color={sparklesIconColor}
                   stroke="2px"
                 />
               </div>
-              {
-                includeSubtitle && (
-                  <Typography variant="body2">Go ahead, get as specific as you like...</Typography>
-                )
-              }
+              {includeSubtitle && (
+                <Typography variant="body2">Go ahead, get as specific as you like...</Typography>
+              )}
             </div>
             <button
               onClick={handleClose}
-              className="spiffy-tw-absolute spiffy-tw-top-4 spiffy-tw-right-4 sm:spiffy-tw-top-8 sm:spiffy-tw-right-8 "
+              className="spiffy-tw-absolute spiffy-tw-right-4 spiffy-tw-top-4 sm:spiffy-tw-right-8 sm:spiffy-tw-top-8"
               aria-label="Close search"
               type="button"
             >
               <IconCloseVariant
-                className="spiffy-tw-w-[20px] spiffy-tw-h-[20px] sm:spiffy-tw-w-[28px] sm:spiffy-tw-h-[28px]"
+                className="spiffy-tw-h-[20px] spiffy-tw-w-[20px] sm:spiffy-tw-h-[28px] sm:spiffy-tw-w-[28px]"
                 strokeWidth="2px"
               />
             </button>
@@ -213,7 +210,7 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
             {initialSuggestions &&
               initialSuggestions.length > 0 && ( // Conditionally render suggestions
                 <motion.div
-                  className="spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden"
+                  className="spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden"
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}

package/src/SearchZeroState/SearchZeroStateWidget.tsx

@@ -1,16 +1,19 @@
-import { SearchEntryPointWidgetConfig } from "@envive-ai/react-hooks/contexts/types";
-import { useNewOrgConfig } from "@envive-ai/react-hooks/hooks/NewOrgConfig";
-import { useMemo } from "react";
-import { SearchZeroState } from "./SearchZeroState";
-
+import { SearchEntryPointWidgetConfig } from '@envive-ai/react-hooks/contexts/types';
+import { useNewOrgConfig } from '@envive-ai/react-hooks/hooks/NewOrgConfig';
+import { useMemo } from 'react';
+import { SearchZeroState } from './SearchZeroState';
 
 type SearchZeroStateWidgetProps = {
   initialIsOpen: boolean;
   widgetConfigId?: string;
   entryPointRef: React.Ref<HTMLButtonElement>;
-}
+};
 
-export const SearchZeroStateWidget = ({ initialIsOpen, widgetConfigId = 'searchEntryPointIcon', entryPointRef }: SearchZeroStateWidgetProps) => {
+export const SearchZeroStateWidget = ({
+  initialIsOpen,
+  widgetConfigId = 'searchEntryPointIcon',
+  entryPointRef,
+}: SearchZeroStateWidgetProps) => {
   const newConfig = useNewOrgConfig();
 
   const widgetConfig = useMemo(() => {
@@ -29,5 +32,11 @@ export const SearchZeroStateWidget = ({ initialIsOpen, widgetConfigId = 'searchE
     return null;
   }
 
-  return <SearchZeroState widgetConfig={widgetConfig as SearchEntryPointWidgetConfig} initialIsOpen={initialIsOpen} entryPointRef={entryPointRef} />;
+  return (
+    <SearchZeroState
+      widgetConfig={widgetConfig as SearchEntryPointWidgetConfig}
+      initialIsOpen={initialIsOpen}
+      entryPointRef={entryPointRef}
+    />
+  );
 };

package/src/SearchZeroState/components/RecommendedProducts.tsx

@@ -6,7 +6,10 @@ import { useAmplitudeTracking } from '@envive-ai/react-hooks/hooks/AmplitudeOper
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 import { Typography } from '@envive-ai/react-toolkit/Typography';
 import { ProductCardConfig, ProductGridVariant } from '@envive-ai/react-hooks/contexts/types';
-import { ChatElementDisplayLocation, SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocation,
+  SearchResponseProductAttributes,
+} from '@envive-ai/react-hooks/application/models';
 import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 
 interface RecommendedProductsProps {
@@ -64,7 +67,6 @@ export const RecommendedProducts: React.FC<RecommendedProductsProps> = ({
   }
 
   const handleProductClick = (product: SearchResponseProduct, index: number) => {
-    
     track(SpiffyMetricsEventName.ProductCardClicked, {
       eventProps: {
         url: product.url,
@@ -100,7 +102,10 @@ export const RecommendedProducts: React.FC<RecommendedProductsProps> = ({
     >
       {heading && (
         <div className={titleContainerClasses}>
-          <Typography variant="h1" className="spiffy-tw-text-[--spiffy-colors-text-accent]">
+          <Typography
+            variant="h1"
+            className="spiffy-tw-text-[--spiffy-colors-text-accent]"
+          >
             {heading}
           </Typography>
         </div>

package/src/SearchZeroState/overlay/overlayHostLocator.ts

@@ -4,9 +4,7 @@ export const SEARCH_OVERLAY_PORTAL_ID = 'spiffy-ai-search-overlay-portal'; // Th
 /**
  * Find the portal target inside the overlay host's ShadowRoot.
  */
-export function getOverlayPortalTarget(
-  hostId: string = SEARCH_OVERLAY_ENTRYPOINT_ID,
-): HTMLElement {
+export function getOverlayPortalTarget(hostId: string = SEARCH_OVERLAY_ENTRYPOINT_ID): HTMLElement {
   const bareMount = document.getElementById(SEARCH_OVERLAY_PORTAL_ID) as HTMLElement | null;
   if (bareMount) return bareMount;
   const host = document.getElementById(hostId);
@@ -16,4 +14,4 @@ export function getOverlayPortalTarget(
   const mount = sr.getElementById(SEARCH_OVERLAY_PORTAL_ID) as HTMLElement | null;
   if (!mount) throw new Error('[Overlay] Portal mount missing inside ShadowRoot');
   return mount;
-}
+}

package/src/SearchZeroState/types.ts

@@ -1,4 +1,7 @@
-import { SearchEntryPointWidgetConfig, SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
+import {
+  SearchEntryPointWidgetConfig,
+  SearchInputVariant,
+} from '@envive-ai/react-hooks/contexts/types';
 
 export type { SearchInputVariant, SearchEntryPointWidgetConfig };
 

package/src/SearchZeroState/zeroStateSearchVariants.ts

@@ -1,17 +1,26 @@
-import { ColorNames, colorVar, SearchZeroStateVariant } from "@envive-ai/react-hooks/contexts/types";
+import {
+  ColorNames,
+  SearchZeroStateVariant,
+  colorVar,
+} from '@envive-ai/react-hooks/contexts/types';
 
 interface SearchZeroStateVariantClasses {
   overlayBackgroundClasses: string;
   sparklesIconColor: string;
 }
 
-export const searchZeroStateVariantClasses: Record<SearchZeroStateVariant, SearchZeroStateVariantClasses> = {
-  backgroundTertiary: { // standard light mode
+export const searchZeroStateVariantClasses: Record<
+  SearchZeroStateVariant,
+  SearchZeroStateVariantClasses
+> = {
+  backgroundTertiary: {
+    // standard light mode
     overlayBackgroundClasses:
       'spiffy-tw-bg-[--spiffy-colors-background-tertiary] spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-bg-opacity-90 spiffy-tw-backdrop-blur-20',
     sparklesIconColor: colorVar(ColorNames.AccentPrimary),
   },
-  backgroundDark: { // standard dark mode
+  backgroundDark: {
+    // standard dark mode
     overlayBackgroundClasses:
       'spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light] spiffy-tw-bg-opacity-90 spiffy-tw-backdrop-blur-20',
     sparklesIconColor: colorVar(ColorNames.AccentPrimary),
@@ -19,6 +28,6 @@ export const searchZeroStateVariantClasses: Record<SearchZeroStateVariant, Searc
   backgroundPrimary: {
     overlayBackgroundClasses:
       'spiffy-tw-bg-[--spiffy-colors-background-primary] spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-bg-opacity-90 spiffy-tw-backdrop-blur-20',
-    sparklesIconColor: colorVar(ColorNames.AccentPrimary)
+    sparklesIconColor: colorVar(ColorNames.AccentPrimary),
   },
 };

package/src/SuggestionBar/SuggestionBar.tsx

@@ -3,9 +3,8 @@ import { useScrollContainer } from 'react-indiana-drag-scroll';
 import { v4 as uuid } from 'uuid';
 import { useSetAtom } from 'jotai';
 
-
-import { SpiffyWidgets, MessageRole, MessageType } from '@envive-ai/react-hooks/application/models';
-import { logPerfMetricAtom, PerfMetricsEvents } from '@envive-ai/react-hooks/atoms/chat';
+import { MessageRole, MessageType, SpiffyWidgets } from '@envive-ai/react-hooks/application/models';
+import { PerfMetricsEvents, logPerfMetricAtom } from '@envive-ai/react-hooks/atoms/chat';
 import { SUGGESTION_BAR_TESTID } from '@envive-ai/react-hooks/config';
 import { useIsSmallScreen } from '@envive-ai/react-hooks/hooks/IsSmallScreen';
 import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
@@ -16,7 +15,6 @@ import { SuggestionButtonVariant } from '@envive-ai/react-hooks/contexts/types';
 import { SuggestionBarLocationForMetrics } from './types';
 import { SuggestionButtonContainer } from '../SuggestionButtonContainer';
 
-
 // SuggestionBarV2 Props
 interface SuggestionBarProps extends TestProps {
   id: string;
@@ -57,11 +55,9 @@ function SuggestionBar({
   const isAnimated = animationSpeed !== 'none';
 
   // Track component visibility
-  useTrackComponentVisibleEvent(
-    SpiffyWidgets.SuggestionBar,
-    componentVisibleTriggerRef,
-    { animated: isAnimated },
-  );
+  useTrackComponentVisibleEvent(SpiffyWidgets.SuggestionBar, componentVisibleTriggerRef, {
+    animated: isAnimated,
+  });
 
   // Handle button click
   const handleClickSuggestion = useCallback(
@@ -102,16 +98,12 @@ function SuggestionBar({
   );
 
   return (
-    <div id={id} className="spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden">
+    <div
+      id={id}
+      className="spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden"
+    >
       <div
-        className={`
-          spiffy-tw-relative 
-          spiffy-tw-w-full 
-          spiffy-tw-overflow-x-scroll 
-          spiffy-tw-overflow-y-hidden 
-          spiffy-tw-no-scrollbar
-          ${twoRowsOnMobile && isSmallScreen ? 'spiffy-tw-h-20' : 'spiffy-tw-h-9'}
-        `}
+        className={`spiffy-tw-no-scrollbar spiffy-tw-relative spiffy-tw-w-full spiffy-tw-overflow-y-hidden spiffy-tw-overflow-x-scroll ${twoRowsOnMobile && isSmallScreen ? 'spiffy-tw-h-20' : 'spiffy-tw-h-9'} `}
         ref={handleContainerRef}
       >
         <div

package/src/SuggestionBar/types.ts

@@ -1,4 +1,4 @@
 export enum SuggestionBarLocationForMetrics {
-    SUGGESTION_BAR_TOP = 'top',
-    SUGGESTION_BAR_BOTTOM = 'bottom'
-}
+  SUGGESTION_BAR_TOP = 'top',
+  SUGGESTION_BAR_BOTTOM = 'bottom',
+}

package/src/SuggestionButtonContainer/SuggestionButtonContainer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import { useRef } from 'react';
 import { SuggestionButton } from '@envive-ai/react-toolkit/SuggestionButton';
 import { SpiffyWidgets } from '@envive-ai/react-hooks/application/models';
@@ -15,20 +16,12 @@ interface ButtonContainerProps {
 // ButtonContainer is reused twice within SuggestionBarV2, so we declare it as a seperate functional component
 function ButtonContainer({ children }: ButtonContainerProps) {
   return (
-    <div
-      className="spiffy-tw-flex 
-      spiffy-tw-flex-row
-      spiffy-tw-items-center
-      spiffy-tw-space-x-2
-      spiffy-tw-h-full
-      spiffy-tw-pl-0"
-    >
+    <div className="spiffy-tw-pl-0 spiffy-tw-flex spiffy-tw-h-full spiffy-tw-flex-row spiffy-tw-items-center spiffy-tw-space-x-2">
       {children}
     </div>
   );
 }
 
-
 const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps> = ({
   buttonVariation,
   hoverButtonVariation,
@@ -47,17 +40,15 @@ const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps> = ({
   useHorizontalScrollAnimation({
     scrollContainerRef,
     animationSpeed,
-  })
+  });
   const isSmallScreen = useIsSmallScreen();
 
   const isAnimated = animationSpeed !== 'none';
 
   // Track component visibility
-  useTrackComponentVisibleEvent(
-    SpiffyWidgets.SuggestionBar,
-    componentVisibleTriggerRef,
-    { animated: isAnimated },
-  );
+  useTrackComponentVisibleEvent(SpiffyWidgets.SuggestionBar, componentVisibleTriggerRef, {
+    animated: isAnimated,
+  });
 
   const visibleButtonsFirstRow = buttonTexts.slice(
     0,
@@ -70,7 +61,7 @@ const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps> = ({
   );
 
   return (
-    <div className="spiffy-tw-overflow-x-scroll spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-whitespace-nowrap">
+    <div className="spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-overflow-x-scroll spiffy-tw-whitespace-nowrap">
       <ButtonContainer>
         {visibleButtonsFirstRow.map((suggestion, i) => (
           <SuggestionButton
@@ -136,6 +127,6 @@ const SuggestionButtonContainer: React.FC<SuggestionButtonContainerProps> = ({
       )}
     </div>
   );
-}
+};
 
 export { SuggestionButtonContainer };

package/src/SuggestionButtonContainer/types.ts

@@ -1,6 +1,5 @@
-import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
-import { TestProps } from "@envive-ai/react-hooks/types";
-
+import { SuggestionButtonVariant } from '@envive-ai/react-hooks/contexts/types';
+import { TestProps } from '@envive-ai/react-hooks/types';
 
 // SuggestionButtonContainer Props
 export interface SuggestionButtonContainerProps extends TestProps {
@@ -13,4 +12,4 @@ export interface SuggestionButtonContainerProps extends TestProps {
   twoRowsOnMobile?: boolean | undefined;
   animationSpeed?: 'standard' | 'slow' | 'none';
   buttonBorderRadius?: 'sm' | 'md' | 'lg';
-}
+}

package/src/stories/SearchResults.stories.tsx

@@ -18,7 +18,7 @@ const meta = {
       productGridVariant: 'standard',
       searchBoxPlaceholder: '',
       widgetConfigId: '',
-      type: WidgetType.SearchResultsEntryPoint
+      type: WidgetType.SearchResultsEntryPoint,
     },
   },
 } satisfies Meta<typeof SearchResults>;

package/src/stories/SearchZeroState.stories.tsx

@@ -30,11 +30,19 @@ const meta = {
     },
     searchZeroStateVariant: {
       control: 'select',
-      options: ['backgroundTertiary', 'backgroundPrimary', 'backgroundSecondary', 'backgroundQuaternary'],
+      options: [
+        'backgroundTertiary',
+        'backgroundPrimary',
+        'backgroundSecondary',
+        'backgroundQuaternary',
+      ],
     },
   },
   render: (args: SearchEntryPointWidgetConfig & { initialIsOpen: boolean }) => (
-    <SearchZeroState widgetConfig={{ ...args }} initialIsOpen={args.initialIsOpen} />
+    <SearchZeroState
+      widgetConfig={{ ...args }}
+      initialIsOpen={args.initialIsOpen}
+    />
   ),
 } satisfies Meta;
 

package/src/stories/SuggestionBar.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof SuggestionBar> = {
       options: ['none', 'standard', 'slow'],
     },
   },
-  render: (args) => (
+  render: args => (
     <div style={{ width: '300px', height: '100px' }}>
       <SuggestionBar {...args} />
     </div>
@@ -35,7 +35,6 @@ export const Default: Story = {
     handleReply: () => {},
     boldFirstButton: false,
   },
-  
 };
 
 export const Animated: Story = {

package/src/util/useHorizontalScrollAnimation.ts

@@ -1,4 +1,4 @@
-import { useEffect, RefObject, useRef } from 'react';
+import { RefObject, useEffect, useRef } from 'react';
 import { useReducedMotionWithOverride } from 'src/util/useReducedMotionWithOverride';
 
 // IMPORTANT: All refs passed to this hook must be mutable (not Readonly)