@envive-ai/react-toolkit 0.2.11 → 0.2.12

package/src/components/SearchInputForm/SearchInputForm.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { SEARCH_INPUT_TESTID } from '@envive-ai/react-hooks/config/locators/components/search';
-import { SearchInputVariant } from '@envive-ai/types';
 import { SearchAutocomplete } from '../SearchAutocomplete';
 import { SearchInput } from '../SearchInput/SearchInput';
 import { searchInputVariantClasses } from '../SearchInput/searchInputVariants';
+import { SearchInputVariant } from '../../atoms/search/types';
 
 interface SearchInputFormProps {
   searchInputVariant: SearchInputVariant;
@@ -38,12 +38,15 @@ export const SearchInputForm = ({
 }: SearchInputFormProps) => {
   const { autocompleteIconColor } = searchInputVariantClasses[searchInputVariant];
 
-  const containerClasses = classNames('spiffy-tw-relative', 'spiffy-tw-w-full');
+  const containerClasses = classNames(
+    'spiffy-tw-relative',
+    'spiffy-tw-w-full'
+  );
 
   const formClasses = classNames({
     'spiffy-tw-grow': true,
     'spiffy-tw-relative': true,
-    'spiffy-tw-z-20': shouldShowAutocomplete,
+    'spiffy-tw-z-20': shouldShowAutocomplete
   });
 
   const autocompleteContainerClasses = classNames(
@@ -57,7 +60,7 @@ export const SearchInputForm = ({
     'spiffy-tw-rounded-b-lg',
     'spiffy-tw-border',
     'spiffy-tw-border-t-0',
-    'spiffy-tw-pt-4',
+    'spiffy-tw-pt-4'
   );
 
   return (

package/src/components/SearchResultsContent/SearchResultsContent.tsx

@@ -1,11 +1,13 @@
+import classNames from 'classnames';
+import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
+import { SearchResultsState } from '@envive-ai/react-hooks/hooks/utils';
 import {
-  SearchResultsState,
-  SelectedFilterOption,
   ProductCardConfig,
   ProductGridVariant,
   SearchResponseProductAttributes,
-  SearchFilterSidebarVariant,
-} from '@envive-ai/types';
+} from '../ProductCard';
+import { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar';
 import {
   NoSearchResultsFound,
   SearchResultsGrid,
@@ -14,16 +16,17 @@ import {
 
 interface SearchResultsContentProps {
   searchResultsState: SearchResultsState;
-  productList: SearchResponseProductAttributes['attributes'][];
+  productList: SearchResponseProduct[];
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
   productCardConfig: ProductCardConfig;
   merchantShortName: string;
   searchFilterSidebarVariant: SearchFilterSidebarVariant;
   productGridVariant: ProductGridVariant;
-  productGridClasses: string;
   containerXPaddingClasses: string;
   selectedFilterOptions: SelectedFilterOption[];
   availableDynamicFilters: { name: string; displayName: string }[];
   onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onProductClick?: () => void;
   onToggleDynamicFilter: ({
     filter,
     dynamicFilterDisplayName,
@@ -32,51 +35,81 @@ interface SearchResultsContentProps {
     dynamicFilterDisplayName: string;
   }) => void;
   noResultsFoundText?: string;
+  searchResultsRef: React.RefObject<HTMLDivElement>;
+  toolbarHeight: number;
+  query: string;
 }
 
 export const SearchResultsContent = ({
   searchResultsState,
   productList,
+  recommendedProducts,
   productCardConfig,
   merchantShortName,
   searchFilterSidebarVariant,
   productGridVariant,
-  productGridClasses,
   containerXPaddingClasses,
   selectedFilterOptions,
   availableDynamicFilters,
+  onProductClick,
   onRemoveFilter,
   onToggleDynamicFilter,
   noResultsFoundText,
-}: SearchResultsContentProps) => (
-  <div>
-    {searchResultsState === SearchResultsState.NoResults && (
-      <NoSearchResultsFound
-        containerPaddingClasses={containerXPaddingClasses}
-        includeBottomMargin
-        noResultsFoundText={noResultsFoundText}
-      />
-    )}
-    {searchResultsState === SearchResultsState.Results && (
-      <SearchResultsGrid
-        searchFilterSidebarVariant={searchFilterSidebarVariant}
-        productCardConfig={productCardConfig}
-        merchantShortName={merchantShortName}
-        productList={productList}
-        productGridVariant={productGridVariant}
-        productGridClasses={productGridClasses}
-        containerXPaddingClasses={containerXPaddingClasses}
-        selectedFilterOptions={selectedFilterOptions}
-        availableDynamicFilters={availableDynamicFilters}
-        onRemoveFilter={onRemoveFilter}
-        onToggleDynamicFilter={onToggleDynamicFilter}
-      />
-    )}
-    {searchResultsState === SearchResultsState.Loading && (
-      <SearchResultsLoadingGrid
-        productGridVariant={productGridVariant}
-        productGridClasses={productGridClasses}
-      />
-    )}
-  </div>
-);
+  searchResultsRef,
+  toolbarHeight,
+  query,
+}: SearchResultsContentProps) => {
+  const productGridClasses = classNames(
+    'spiffy-tw-grid',
+    'spiffy-tw-justify-items-stretch',
+    'spiffy-tw-grid-cols-2',
+    'md:spiffy-tw-grid-cols-3',
+    'lg:spiffy-tw-grid-cols-4',
+    'spiffy-tw-gap-x-[4px]',
+    'spiffy-tw-gap-y-[24px]',
+    'spiffy-tw-h-full',
+    'spiffy-tw-w-full',
+    'spiffy-tw-items-stretch',
+    containerXPaddingClasses,
+  );
+
+  return (
+    <div
+      ref={searchResultsRef}
+      style={{ paddingTop: `${toolbarHeight}px`, backgroundColor: 'white' }}
+    >
+      {searchResultsState === SearchResultsState.NoResults && (
+        <NoSearchResultsFound
+          containerPaddingClasses={containerXPaddingClasses}
+          noResultsFoundText={noResultsFoundText}
+          recommendedProducts={recommendedProducts}
+          searchText={query}
+          merchantShortName={merchantShortName}
+          productGridVariant={productGridVariant}
+        />
+      )}
+      {searchResultsState === SearchResultsState.Results && (
+        <SearchResultsGrid
+          searchFilterSidebarVariant={searchFilterSidebarVariant}
+          productCardConfig={productCardConfig}
+          merchantShortName={merchantShortName}
+          productList={productList}
+          productGridVariant={productGridVariant}
+          productGridClasses={productGridClasses}
+          containerXPaddingClasses={containerXPaddingClasses}
+          selectedFilterOptions={selectedFilterOptions}
+          availableDynamicFilters={availableDynamicFilters}
+          onRemoveFilter={onRemoveFilter}
+          onProductClick={onProductClick}
+          onToggleDynamicFilter={onToggleDynamicFilter}
+        />
+      )}
+      {searchResultsState === SearchResultsState.Loading && (
+        <SearchResultsLoadingGrid
+          productGridVariant={productGridVariant}
+          productGridClasses={productGridClasses}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/SearchResultsFilterButton/SearchResultsFilterButton.tsx

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+
+import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
+import { ButtonBase } from '../ButtonBase';
+
+export type SearchResultsFilterButtonProps = {
+  setIsOpen: (isOpen: boolean) => void;
+  filterButtonText: string;
+};
+
+export const SearchResultsFilterButton = ({
+  setIsOpen,
+  filterButtonText,
+}: SearchResultsFilterButtonProps) => {
+  const openFilter = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  return (
+    <ButtonBase
+      onClick={openFilter}
+      icon={SettingsVariant}
+      iconClass="spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center"
+      text={filterButtonText}
+      textClass="spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block"
+      buttonClass="spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]"
+      disablePadding
+    />
+  );
+};

package/src/components/SearchResultsFilterButton/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './SearchResultsFilterButton';

package/src/components/SearchResultsFilterModal/SearchResultsFilterModal.tsx

@@ -0,0 +1,61 @@
+import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
+import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
+import { SearchFilterSidebarVariant, searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar';
+
+export type SearchResultsFilterModalProps = {
+  productCount: number;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  searchFilters: SearchFilterDatum[];
+  searchFilterSidebarVariant: SearchFilterSidebarVariant;
+  onSelectFilterItem: SelectFilterItem;
+  onClearAllFilters: () => void;
+  filterButtonText: string;
+};
+
+export const SearchResultsFilterModal = ({
+  productCount,
+  isOpen,
+  setIsOpen,
+  searchFilters,
+  searchFilterSidebarVariant,
+  onSelectFilterItem,
+  onClearAllFilters,
+  filterButtonText,
+}: SearchResultsFilterModalProps) => {
+  const {
+    applyFiltersUnchangedClasses,
+    applyFiltersChangedClasses,
+    searchFilterHeaderClasses,
+    radioButtonFillColor,
+    radioButtonHoverColor,
+    radioButtonUncheckedBorderColor,
+    filterCloseIconVariant,
+  } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+
+  return (
+    <SearchFilter
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      filters={searchFilters}
+      productCount={productCount}
+      selectFilterItem={onSelectFilterItem}
+      clearAllFilters={onClearAllFilters}
+      applyFiltersUnchangedClasses={applyFiltersUnchangedClasses}
+      applyFiltersChangedClasses={applyFiltersChangedClasses}
+      filterButtonText={filterButtonText}
+      radioButtonFillColor={radioButtonFillColor}
+      radioButtonHoverColor={radioButtonHoverColor}
+      radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
+      filterCloseIconVariant={filterCloseIconVariant}
+      headerContent={
+        <SearchFilterHeader
+          closeModal={() => setIsOpen(false)}
+          productCount={productCount}
+          headerClassName={searchFilterHeaderClasses}
+          filterCloseIconVariant={filterCloseIconVariant}
+        />
+      }
+    />
+  );
+};

package/src/components/SearchResultsFilterModal/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './SearchResultsFilterModal';

package/src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx

@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
 
-import { SearchFilterDatum, SelectFilterItem, SearchFilterSidebarVariant } from '@envive-ai/types';
+import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
 import SettingsVariant from '@envive-ai/react-icons/src/SettingsVariant.js';
 import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
 import { ButtonBase } from '../ButtonBase';
 import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
+import { SearchFilterSidebarVariant } from './types';
 
 export type SearchResultsFilterProps = {
   productCount: number;

package/src/components/SearchResultsFilterSidebar/index.ts

@@ -1,2 +1,3 @@
 export * from './searchFilterSidebarVariants';
 export * from './SearchResultsFilter';
+export * from './types';

package/src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts

@@ -1,5 +1,5 @@
-import { colorVar } from 'src/util/colorVar';
-import { SearchFilterSidebarVariant, CloseIconVariant, ColorNames } from '@envive-ai/types';
+import { ColorNames, colorVar } from 'src/models/colorsConfig';
+import type { SearchFilterSidebarVariant, CloseIconVariant } from './types';
 
 interface SearchFilterSidebarVariantClasses {
   searchFilterHeaderClasses: string;

package/src/components/SearchResultsFilterSidebar/types.ts

@@ -0,0 +1,2 @@
+export type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
+export type CloseIconVariant = 'light' | 'tertiary' | 'dark';

package/src/components/SearchResultsStates/NoSearchResultsFound.tsx

@@ -1,29 +1,55 @@
 import classNames from 'classnames';
 import Sparkles from '@envive-ai/react-icons/Sparkles';
 import { Typography } from 'src/components/Typography';
+import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
+import { RecommendedProducts } from '../RecommendedProducts';
+import { ProductGridVariant } from '../ProductCard';
 
 interface NoSearchResultsFoundProps {
   containerPaddingClasses: string;
-  includeBottomMargin?: boolean; // manually add about a page of bottom margin to push unsupressed content down
+  // includeBottomMargin?: boolean; // manually add about a page of bottom margin to push unsupressed content down
   noResultsFoundText?: string;
   sparkleIconColor?: string; // example format: var(--spiffy-colors-accent-primary)
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
+  searchText: string;
+  merchantShortName: string;
+  productGridVariant: ProductGridVariant;
 }
 
 export const NoSearchResultsFound = ({
   containerPaddingClasses,
-  includeBottomMargin = false,
   noResultsFoundText,
   sparkleIconColor = 'var(--spiffy-colors-accent-primary)',
+  recommendedProducts,
+  searchText,
+  merchantShortName,
+  productGridVariant,
 }: NoSearchResultsFoundProps) => {
-  const containerClasses = classNames(
-    containerPaddingClasses,
-    includeBottomMargin ? 'spiffy-tw-mb-[100vh]' : '',
-    'spiffy-tw-mt-6',
-  );
+  const containerClasses = classNames(containerPaddingClasses, 'spiffy-tw-mt-6', {
+    'spiffy-tw-mb-[100vh]': recommendedProducts.length === 0,
+  });
 
-  const textPrompt =
-    noResultsFoundText ||
-    "I'm sorry, I wasn't able to find an exact match. Try changing your filters or adjusting your search query.";
+  let textPrompt: React.ReactNode;
+  if (recommendedProducts.length > 0) {
+    textPrompt = noResultsFoundText ? (
+      <span>{noResultsFoundText}</span>
+    ) : (
+      <span>
+        I’m sorry, I wasn’t able to find an exact match for
+        <strong className="spiffy-tw-font-semibold"> {`"${searchText}".`}</strong> Try changing your
+        filters or adjusting your search query. In the meantime, explore some of our top-selling
+        products below.
+      </span>
+    );
+  } else {
+    textPrompt = (
+      <span>
+        I’m sorry, I wasn’t able to find an exact match for
+        <strong className="spiffy-tw-font-semibold"> {`"${searchText}."`}</strong> Try changing your
+        filters or adjusting your search query.
+      </span>
+    );
+  }
 
   return (
     <div className={containerClasses}>
@@ -36,6 +62,12 @@ export const NoSearchResultsFound = ({
         </div>
         <Typography variant="body2">{textPrompt}</Typography>
       </div>
+      <RecommendedProducts
+        retrievedProducts={recommendedProducts}
+        merchantShortName={merchantShortName}
+        productCardConfig={{ variant: 'minimal', hoverVariant: 'none', layoutVariant: 'square' }}
+        productGridVariant={productGridVariant}
+      />
     </div>
   );
-};
+};

package/src/components/SearchResultsStates/SearchResultsGrid.tsx

@@ -1,17 +1,15 @@
 import { motion } from 'framer-motion';
+
 import classNames from 'classnames';
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
-import {
-  ProductCardConfig,
-  ProductGridVariant,
-  SearchFilterSidebarVariant,
-  SelectedFilterOption,
-} from '@envive-ai/types';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 import { AppliedFiltersScrollbar } from '../FilterScrollbar/AppliedFiltersScrollbar';
 import { DynamicFiltersScrollbar } from '../FilterScrollbar/DynamicFiltersScrollbar';
 
 import { searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar/searchFilterSidebarVariants';
+import { ProductCardConfig, ProductGridVariant } from '../ProductCard';
 import { ProductGrid } from '../ProductGrid';
+import { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar';
 
 interface SearchResultsGridProps {
   productList: SearchResponseProduct[];
@@ -23,6 +21,7 @@ interface SearchResultsGridProps {
   selectedFilterOptions: SelectedFilterOption[];
   containerXPaddingClasses: string;
   productGridClasses: string;
+  onProductClick?: () => void;
   onRemoveFilter: (filter: SelectedFilterOption) => void;
   onToggleDynamicFilter: ({
     filter,
@@ -45,6 +44,7 @@ export const SearchResultsGrid = ({
   productGridClasses,
   onRemoveFilter,
   onToggleDynamicFilter,
+  onProductClick,
 }: SearchResultsGridProps) => {
   const sharedFilterBarClasses = classNames(
     'spiffy-suggestion-bar',
@@ -101,7 +101,8 @@ export const SearchResultsGrid = ({
         productGridClasses={productGridClasses}
         productCardConfig={productCardConfig}
         merchantShortName={merchantShortName}
+        onProductClick={onProductClick}
       />
     </motion.div>
   );
-};
+};

package/src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx

@@ -1,7 +1,6 @@
 import { motion } from 'framer-motion';
 import { Typography } from 'src/components/Typography';
-import { ProductGridVariant } from '@envive-ai/types';
-import { ProductCardSkeleton } from '../ProductCard';
+import { ProductGridVariant, ProductCardSkeleton } from '../ProductCard';
 import { productGridVariantClasses } from '../ProductGrid';
 import { SparkleAnimation } from '../SparkleAnimation';
 

package/src/components/SearchResultsToolbar/SearchResultsToolbar.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import classNames from 'classnames';
+import { SearchInputVariant } from '@envive-ai/react-hooks/contexts/types';
+import { SearchResultsFilterButton } from '../SearchResultsFilterButton';
+import { SearchInputForm } from '../SearchInputForm';
+
+
+interface SearchResultsToolbarProps {
+  // From widgetConfig
+    searchInputVariant: SearchInputVariant;
+    searchBoxPlaceholder: string;
+  // From search hook
+  searchText: string;
+  focusedIndex: number;
+  focusedOptionId: string | undefined;
+  autocompleteResults: string[];
+  filterButtonText: string;
+
+  // From search input hook
+  shouldShowAutocomplete: boolean;
+
+  // Event handlers
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onSearchInputChange: (value: string) => void;
+  onSubmitSearch: () => void;
+  onAutocompleteSelect: (suggestion: string, rankPosition?: number) => void;
+  onSearchInputFocus: () => void;
+  onSearchInputBlur: () => void;
+  setIsFilterOpen: (isOpen: boolean) => void;
+
+  // Styling
+  containerXPaddingClasses: string;
+
+  // Ref for sticky logic
+  toolbarRef: React.RefObject<HTMLDivElement> | null;
+  isVisible: boolean;
+  className?: string;
+}
+
+export const SearchResultsToolbar = ({
+  searchInputVariant,
+  searchBoxPlaceholder,
+  searchText,
+  focusedIndex,
+  focusedOptionId,
+  autocompleteResults,
+  filterButtonText,
+  onKeyDown,
+  onSearchInputChange,
+  onSubmitSearch,
+  onAutocompleteSelect,
+  onSearchInputFocus,
+  onSearchInputBlur,
+  shouldShowAutocomplete,
+  setIsFilterOpen,
+  containerXPaddingClasses,
+  toolbarRef,
+  isVisible,
+  className,
+}: SearchResultsToolbarProps) => {
+  const [hasZIndex, setHasZIndex] = React.useState(false);
+
+  // The following is to ensure the z-index is applied after the animation is complete
+  // because otherwise the z-index would be applied instantly when the component is mounted
+  // which would cause the search toolbar to appear over the top of the merchant header
+  // in some cases
+  React.useEffect(() => {
+    let timer;
+    if (isVisible) {
+      timer = setTimeout(() => {
+        setHasZIndex(true);
+      }, 300); // Match the animation duration from parent
+      return () => clearTimeout(timer);
+    }
+    setHasZIndex(false);
+    return () => clearTimeout(timer);
+  }, [isVisible]);
+  const toolbarClasses = classNames('spiffy-tw-bg-white', 'spiffy-tw-w-full', className, {
+    'spiffy-tw-z-10': hasZIndex,
+    'spiffy-tw-translate-y-0': isVisible,
+    '-spiffy-tw-translate-y-full': !isVisible,
+  });
+
+  const contentWrapperClasses = classNames('spiffy-tw-flex', containerXPaddingClasses);
+
+  return (
+    <div className={toolbarClasses} ref={toolbarRef}>
+      <div className={contentWrapperClasses}>
+        <SearchInputForm
+          searchInputVariant={searchInputVariant}
+          searchText={searchText}
+          focusedIndex={focusedIndex}
+          autocompleteResults={autocompleteResults}
+          searchBoxPlaceholder={searchBoxPlaceholder}
+          focusedOptionId={focusedOptionId}
+          onKeyDown={onKeyDown}
+          onSearchInputChange={onSearchInputChange}
+          onSearchInputFocus={onSearchInputFocus}
+          onSearchInputBlur={onSearchInputBlur}
+          shouldShowAutocomplete={shouldShowAutocomplete}
+          onSearchSubmit={onSubmitSearch}
+          onAutocompleteSelect={onAutocompleteSelect}
+        />
+        <SearchResultsFilterButton
+          setIsOpen={setIsFilterOpen}
+          filterButtonText={filterButtonText}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/SearchResultsToolbar/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './SearchResultsToolbar';

package/src/components/SparkleAnimation/SparkleAnimation.tsx

@@ -3,18 +3,12 @@ import { type Transition, motion } from 'framer-motion';
 import classNames from 'classnames';
 
 import FourPointStar from '@envive-ai/react-icons/FourPointStar';
+import { SparkleAnimationOverride } from './types';
 
 // Animation timing constants
 const ANIMATION_CYCLE_TIME = 1000; // 1 second between cycles
 const STAR_DELAY_OFFSET = 250; // 250ms delay between each star
 
-enum SparkleAnimationOverride {
-  CONTAINER = 'spiffy-sparkle-animation-container',
-  STAR_ONE_CONTAINER = 'spiffy-sparkle-animation-star-one-container',
-  STAR_TWO_CONTAINER = 'spiffy-sparkle-animation-star-two-container',
-  STAR_THREE_CONTAINER = 'spiffy-sparkle-animation-star-three-container',
-}
-
 interface SparkleAnimationProps {
   color: string;
   className?: string;

package/src/components/SparkleAnimation/index.ts

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

package/src/components/SparkleAnimation/types.ts

@@ -0,0 +1,6 @@
+export enum SparkleAnimationOverride {
+  CONTAINER = 'spiffy-sparkle-animation-container',
+  STAR_ONE_CONTAINER = 'spiffy-sparkle-animation-star-one-container',
+  STAR_TWO_CONTAINER = 'spiffy-sparkle-animation-star-two-container',
+  STAR_THREE_CONTAINER = 'spiffy-sparkle-animation-star-three-container',
+}

package/src/components/SuggestionButton/SuggestionButton.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
 import FourPointStar from '@envive-ai/react-icons/FourPointStar';
-import { TestProps } from '@envive-ai/types';
+import { TestProps } from '@envive-ai/react-hooks/types';
 import type { SuggestionButtonVariant } from './types';
 import { ButtonBase } from '../ButtonBase/ButtonBase';
 

package/src/config/chatElementDisplayLocation.ts

@@ -0,0 +1,23 @@
+// Chat element display location enum
+export enum ChatElementDisplayLocation {
+  IN_CHAT = 'in_chat',
+  CHAT_PREVIEW = 'chat_preview',
+  FLOATING_BUTTON = 'floating_button',
+  HELP_ME_CHOOSE = 'help_me_choose',
+  PLP_IMAGE_BANNER = 'plp_image_banner',
+  TOP_REVIEWS_SNIPPET = 'top_reviews_snippet',
+  BOTTOM_REVIEWS_SNIPPET = 'bottom_reviews_snippet',
+  BLOCK_BACK_BUTTON = 'block_back_button',
+  SWITCH_TO_AGENT = 'switch_to_agent',
+  CONVERSATIONAL_SEARCH = 'conversational_search',
+  GLOBAL_SEARCH_ENTRYPOINT = 'global_search_entrypoint',
+  SEARCH_NAV_ENTRYPOINT = 'search_nav_entrypoint',
+  SEARCH_PROMPT = 'search_prompt',
+  SEARCH_PROMPT_BUTTON = 'search_prompt_button',
+  SEARCH_ZERO_STATE_SUGGESTED_PRODUCTS = 'search_zero_state_suggested_products',
+  PRODUCT_GRID = 'product_grid',
+  UNSPECIFIED = 'unspecified',
+  FILTER_MODAL = 'filter_modal',
+  PROMPT_CARD = 'prompt_card',
+  WINDOW_API_CALL = 'window_api_call',
+}