@envive-ai/react-widgets 0.1.1 → 0.1.2-arthur-2

package/src/SearchZeroState/SearchZeroState.tsx

@@ -0,0 +1,264 @@
+import React, { useState, useEffect, useCallback, useRef } 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';
+import { SuggestionBarLocationForMetrics } from '@envive-ai/react-hooks/types';
+import { Message, MessageType, SpiffyWidgets } from '@envive-ai/react-hooks/application/models';
+import { SearchZeroStateVariant } from '@envive-ai/react-hooks/contexts/types';
+import { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { SearchInputForm } from '@envive-ai/react-toolkit/SearchInputForm';
+import { SearchInput, searchInputVariantClasses } from '@envive-ai/react-toolkit/SearchInput';
+import { Typography } from '@envive-ai/react-toolkit/Typography';
+import Sparkles from '@envive-ai/react-icons/Sparkles';
+import IconCloseVariant from '@envive-ai/react-icons/IconCloseVariant';
+
+import { SuggestionBar } from 'src/SuggestionBar';
+
+import { SearchOverlay } from './SearchOverlay';
+import { SearchZeroStateProps } from './types';
+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> = ({
+  widgetConfig,
+  initialIsOpen,
+  entryPointRef,
+}) => {
+
+  // eslint-disable-next-line no-console
+  console.log('SearchZeroState: widgetConfig', widgetConfig);
+  const {
+    searchZeroStateVariant,
+    searchInputVariant,
+    searchIconVariant,
+    searchIconSize = 24,
+    searchBoxPlaceholder,
+    layout,
+    compactLabel,
+    initialSuggestions = [],
+    animationSpeed = 'standard',
+    suggestionButtonConfig,
+    includeSubtitle,
+    usingPortal = false,
+  } = widgetConfig;
+  const {
+    variant: suggestionButtonVariant,
+    hoverVariant: suggestionButtonHoverVariant,
+    borderRadius: suggestionButtonBorderRadius,
+  } = suggestionButtonConfig;
+  const [isOpen, setIsOpen] = useState(!!initialIsOpen);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const searchInput = useSearch();
+
+  const { track } = useAmplitudeTracking();
+  
+  const {
+    recommendedProductsHeading,
+    searchOverlayHeading,
+    productCardConfig,
+    merchantShortName,
+    recommendedProducts,
+    searchText,
+    autocompleteResults,
+    focusedIndex,
+    focusedOptionId,
+    shouldShowAutocomplete,
+    onSearchInputChange,
+    onSearchInputFocus,
+    onSearchInputBlur,
+    onKeyDown,
+    onAutocompleteSelect,
+    onSubmitSearch,
+    resetSearch,
+  } = searchInput;
+
+  // Ensure variant is valid, fallback to backgroundTertiary if not
+  const validVariant: SearchZeroStateVariant =
+    searchZeroStateVariant && searchZeroStateVariantClasses[searchZeroStateVariant]
+      ? searchZeroStateVariant
+      : 'backgroundTertiary';
+
+  const { overlayBackgroundClasses, sparklesIconColor } =
+    searchZeroStateVariantClasses[validVariant];
+
+  const { searchInputIconColor } =
+    searchInputVariantClasses[searchInputVariant];
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+
+  // Track when the search overlay becomes visible
+  useEffect(() => {
+    if (isOpen) {
+      track(SpiffyMetricsEventName.SearchComponentVisible, {
+        eventProps: {
+          search_component: SpiffyWidgets.SearchZeroState,
+        },
+      });
+    }
+  }, [isOpen, track]);
+
+  useEffect(() => {
+    if (isOpen) {
+
+      resetSearch(); // Reset search state when opening
+      searchInputRef.current?.focus();
+    }
+  }, [isOpen, resetSearch]);
+
+  const submitSearchString = useCallback(
+    (query: string) => {
+      onSearchInputChange(query);
+      // Amplitude tracking is handled by useSearchInput.handleSubmitSearch
+      if (onSubmitSearch && query.trim()) {
+        onSubmitSearch();
+        setIsOpen(false);
+      }
+    },
+    [onSubmitSearch, onSearchInputChange],
+  );
+
+  const searchChange = (value: string) => {
+    onSearchInputChange(value);
+  };
+
+  if (!isOpen) {
+    if (layout === 'icon') {
+      return (
+        <SearchIcon
+          entryPointRef={entryPointRef}
+          size={searchIconSize}
+          variant={searchIconVariant}
+          label={compactLabel}
+          onClick={handleOpen}
+          color={searchInputIconColor}
+        />
+      );
+    }
+    return (
+      <SearchInput
+        value=""
+        onChange={() => {}} // No-op since this just opens the overlay
+        placeholder={searchBoxPlaceholder}
+        suggestions={[]} // No autocomplete in closed state
+        onFocus={handleOpen}
+        searchInputVariant={searchInputVariant}
+        dataTestId={SEARCH_ENTRYPOINT_INPUT_TESTID}
+      />
+    );
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <SearchOverlay
+          role="dialog"
+          ariaModal
+          ariaLabelledby="global-search-title"
+          className={overlayBackgroundClasses}
+          usingPortal={usingPortal}
+        >
+          <>
+            <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">
+                  {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"
+                  color={sparklesIconColor}
+                  stroke="2px"
+                />
+              </div>
+              {
+                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 "
+              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]"
+                strokeWidth="2px"
+              />
+            </button>
+          </>
+          <SearchInputForm
+            searchInputRef={searchInputRef}
+            searchInputVariant={searchInputVariant}
+            searchText={searchText}
+            autocompleteResults={autocompleteResults}
+            searchBoxPlaceholder={searchBoxPlaceholder}
+            focusedOptionId={focusedOptionId}
+            shouldShowAutocomplete={shouldShowAutocomplete}
+            focusedIndex={focusedIndex}
+            onKeyDown={onKeyDown}
+            onAutocompleteSelect={onAutocompleteSelect}
+            onSearchInputChange={searchChange}
+            onSearchSubmit={submitSearchString}
+            onSearchInputFocus={onSearchInputFocus}
+            onSearchInputBlur={onSearchInputBlur}
+          />
+          <AnimatePresence>
+            {initialSuggestions &&
+              initialSuggestions.length > 0 && ( // Conditionally render suggestions
+                <motion.div
+                  className="spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <div className="spiffy-tw-mt-6">
+                    <SuggestionBar
+                      id="global-search-suggestions"
+                      locationForMetrics={SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP}
+                      buttonTexts={initialSuggestions}
+                      buttonBorderRadius={suggestionButtonBorderRadius}
+                      buttonVariation={suggestionButtonVariant ?? 'primary'}
+                      hoverButtonVariation={suggestionButtonHoverVariant ?? 'primary'}
+                      animationSpeed={animationSpeed}
+                      handleReply={(message: Message) => {
+                        if (message.type === MessageType.QueryTyped && message.metadata?.content) {
+                          track(SpiffyMetricsEventName.SearchZeroStateSuggestionClicked, {
+                            eventProps: {
+                              queryText: message.metadata.content,
+                              timestamp: new Date().toISOString(),
+                            },
+                          });
+                          submitSearchString(message.metadata.content);
+                        }
+                      }}
+                      twoRowsOnMobile
+                    />
+                  </div>
+                </motion.div>
+              )}
+            {recommendedProducts.length > 0 && (
+              <div className="spiffy-tw-mt-[40px]">
+                <RecommendedProducts
+                  retrievedProducts={recommendedProducts}
+                  merchantShortName={merchantShortName}
+                  productCardConfig={productCardConfig}
+                  // TODO: Figure out where this comes from
+                  productGridVariant="standard"
+                  heading={recommendedProductsHeading}
+                />
+              </div>
+            )}
+          </AnimatePresence>
+        </SearchOverlay>
+      )}
+    </AnimatePresence>
+  );
+};

package/src/SearchZeroState/SearchZeroStateWidget.tsx

@@ -0,0 +1,33 @@
+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) => {
+  const newConfig = useNewOrgConfig();
+
+  const widgetConfig = useMemo(() => {
+    if (newConfig && newConfig.frontendConfig?.widgetConfigs) {
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      const baseWidgetConfig = (newConfig.frontendConfig?.widgetConfigs as unknown as any[]).find(
+        (widget: { key: string }) => widget.key === widgetConfigId,
+      );
+      return {
+        ...baseWidgetConfig.config,
+      };
+    }
+    return null;
+  }, [newConfig, widgetConfigId]);
+  if (!widgetConfig) {
+    return null;
+  }
+
+  return <SearchZeroState widgetConfig={widgetConfig as SearchEntryPointWidgetConfig} initialIsOpen={initialIsOpen} entryPointRef={entryPointRef} />;
+};

package/src/SearchZeroState/components/RecommendedProducts.tsx

@@ -0,0 +1,118 @@
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+
+import { ProductGrid } from '@envive-ai/react-toolkit/ProductGrid';
+import { useAmplitudeTracking } from '@envive-ai/react-hooks/hooks/AmplitudeOperations';
+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 { SpiffyMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+
+interface RecommendedProductsProps {
+  retrievedProducts: SearchResponseProductAttributes['attributes'][];
+  merchantShortName: string;
+  productCardConfig?: ProductCardConfig;
+  productGridVariant?: ProductGridVariant;
+  heading?: string;
+}
+
+export const RecommendedProducts: React.FC<RecommendedProductsProps> = ({
+  retrievedProducts,
+  merchantShortName,
+  productCardConfig = { variant: 'minimal', hoverVariant: 'none', layoutVariant: 'square' },
+  productGridVariant = 'square',
+  heading,
+}: RecommendedProductsProps) => {
+  const { track } = useAmplitudeTracking();
+  const containerClasses = classNames(
+    'spiffy-tw-justify-center',
+    'spiffy-tw-overflow-hidden',
+    'spiffy-tw-bg-white',
+    // Break out of parent container to fill full viewport width using CSS calc
+    'spiffy-tw-relative',
+    'spiffy-tw-px-[24px]',
+    'spiffy-tw-py-[16px]',
+    'sm:spiffy-tw-px-[41px]',
+    'sm:spiffy-tw-py-[40px]',
+  );
+
+  const titleContainerClasses = classNames(
+    'spiffy-tw-w-full',
+    'spiffy-tw-border-b',
+    'spiffy-tw-border-solid',
+    'spiffy-tw-border-b-[--spiffy-colors-text-accent]',
+    'spiffy-tw-pb-[8px]',
+    'spiffy-tw-mb-[16px]',
+  );
+
+  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',
+  );
+
+  if (retrievedProducts == null || retrievedProducts.length === 0) {
+    return null;
+  }
+
+  const handleProductClick = (product: SearchResponseProduct, index: number) => {
+    
+    track(SpiffyMetricsEventName.ProductCardClicked, {
+      eventProps: {
+        url: product.url,
+        search_response_id: undefined,
+        product_response_id: product.response_id,
+        trigger_location: ChatElementDisplayLocation.SEARCH_ZERO_STATE_SUGGESTED_PRODUCTS,
+        click_position: index != null ? index + 1 : null,
+        title: product.title,
+        original_price: product.original_price,
+        sale_price: product.sale_price,
+        average_rating: product.average_rating,
+        number_reviews: product.number_reviews,
+      },
+      alsoSendToGoogleAnalytics: true,
+    });
+  };
+
+  return (
+    <motion.div
+      className={containerClasses}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+      style={{
+        // Break out of parent container padding using CSS calc
+        left: '50%',
+        right: '50%',
+        marginLeft: '-50vw',
+        marginRight: '-50vw',
+        width: '100vw',
+      }}
+    >
+      {heading && (
+        <div className={titleContainerClasses}>
+          <Typography variant="h1" className="spiffy-tw-text-[--spiffy-colors-text-accent]">
+            {heading}
+          </Typography>
+        </div>
+      )}
+      <ProductGrid
+        productList={retrievedProducts}
+        productGridVariant={productGridVariant}
+        productGridClasses={productGridClasses}
+        productCardConfig={productCardConfig}
+        merchantShortName={merchantShortName}
+        onProductClick={handleProductClick}
+      />
+    </motion.div>
+  );
+};

package/src/SearchZeroState/index.ts

@@ -0,0 +1,8 @@
+// Barrel file for GlobalSearch components
+// This file will export all public components and types from this module.
+
+export * from './types';
+export * from './SearchZeroState';
+export * from './SearchZeroStateWidget';
+// Note: Partials like SuggestionButton are not exported here by design,
+// as they are intended for internal use within this module.

package/src/SearchZeroState/overlay/overlayHostLocator.ts

@@ -0,0 +1,19 @@
+export const SEARCH_OVERLAY_ENTRYPOINT_ID = 'spiffy-ai-search-overlay-entrypoint';
+export const SEARCH_OVERLAY_PORTAL_ID = 'spiffy-ai-search-overlay-portal'; // The inner div the overlay portal will render into
+
+/**
+ * Find the portal target inside the overlay host's ShadowRoot.
+ */
+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);
+  if (!host) throw new Error(`[Overlay] Host #${hostId} not found`);
+  const sr = host.shadowRoot;
+  if (!sr) throw new Error('[Overlay] Host has no shadowRoot (was it initialized?)');
+  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

@@ -0,0 +1,9 @@
+import { SearchEntryPointWidgetConfig, SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
+
+export type { SearchInputVariant, SearchEntryPointWidgetConfig };
+
+export interface SearchZeroStateProps {
+  widgetConfig: SearchEntryPointWidgetConfig;
+  initialIsOpen?: boolean;
+  entryPointRef?: React.Ref<HTMLButtonElement>;
+}

package/src/SearchZeroState/zeroStateSearchVariants.ts

@@ -0,0 +1,24 @@
+import { ColorNames, colorVar, SearchZeroStateVariant } from "@envive-ai/react-hooks/contexts/types";
+
+interface SearchZeroStateVariantClasses {
+  overlayBackgroundClasses: string;
+  sparklesIconColor: string;
+}
+
+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
+    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),
+  },
+  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)
+  },
+};

package/src/SuggestionBar/SuggestionBar.tsx

@@ -0,0 +1,139 @@
+import { useCallback, useRef } from 'react';
+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 { 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';
+import { TestProps } from '@envive-ai/react-hooks/types';
+import { Message } from 'postcss';
+
+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;
+  locationForMetrics: SuggestionBarLocationForMetrics;
+  buttonTexts: string[];
+  buttonVariation: SuggestionButtonVariant;
+  hoverButtonVariation: SuggestionButtonVariant;
+  handleReply: (message: Message) => void;
+  boldFirstButton?: boolean | undefined;
+  twoRowsOnMobile?: boolean | undefined;
+  animationSpeed?: 'standard' | 'slow' | 'none';
+  buttonBorderRadius?: 'sm' | 'md' | 'lg';
+}
+
+// SuggestionBar functional component
+function SuggestionBar({
+  id,
+  locationForMetrics,
+  buttonTexts,
+  buttonVariation,
+  hoverButtonVariation,
+  boldFirstButton = false,
+  twoRowsOnMobile = false,
+  animationSpeed = 'none',
+  buttonBorderRadius = 'lg',
+  handleReply,
+  dataTestId,
+}: Readonly<SuggestionBarProps>) {
+  // Refs
+  const componentVisibleTriggerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // Hooks
+  const { ref } = useScrollContainer();
+  const isSmallScreen = useIsSmallScreen();
+  const logPerfMetric = useSetAtom(logPerfMetricAtom);
+
+  const isAnimated = animationSpeed !== 'none';
+
+  // Track component visibility
+  useTrackComponentVisibleEvent(
+    SpiffyWidgets.SuggestionBar,
+    componentVisibleTriggerRef,
+    { animated: isAnimated },
+  );
+
+  // Handle button click
+  const handleClickSuggestion = useCallback(
+    (buttonText: string) => {
+      const newMessage: Message = {
+        id: uuid(),
+        role: MessageRole.User,
+        type: MessageType.QueryTyped,
+        createdAt: new Date().toISOString(),
+        metadata: { content: buttonText },
+      };
+      handleReply(newMessage);
+    },
+    [handleReply],
+  );
+
+  // Combine refs
+  const setRefs = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (typeof ref === 'function') ref(el);
+      containerRef.current = el;
+    },
+    [ref],
+  );
+
+  const handleContainerRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (el) {
+        logPerfMetric(
+          locationForMetrics === SuggestionBarLocationForMetrics.SUGGESTION_BAR_TOP
+            ? PerfMetricsEvents.TopSuggestionsBarRendered
+            : PerfMetricsEvents.BottomSuggestionsBarRendered,
+        );
+      }
+      setRefs(el);
+    },
+    [locationForMetrics, logPerfMetric, setRefs],
+  );
+
+  return (
+    <div id={id} className="spiffy-tw-justify-center spiffy-tw-w-full 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'}
+        `}
+        ref={handleContainerRef}
+      >
+        <div
+          className="spiffy-tw-relative spiffy-tw-inline-block spiffy-tw-whitespace-nowrap"
+          ref={componentVisibleTriggerRef}
+          data-testid={dataTestId || SUGGESTION_BAR_TESTID}
+        >
+          <SuggestionButtonContainer
+            buttonVariation={buttonVariation}
+            hoverButtonVariation={hoverButtonVariation}
+            buttonTexts={buttonTexts}
+            onButtonClick={handleClickSuggestion}
+            scrollContainerRef={containerRef}
+            boldFirstButton={boldFirstButton}
+            twoRowsOnMobile={twoRowsOnMobile}
+            animationSpeed={animationSpeed}
+            buttonBorderRadius={buttonBorderRadius}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { SuggestionBar };

package/src/SuggestionBar/index.ts

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

package/src/SuggestionBar/types.ts

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