@envive-ai/react-widgets-v3 0.3.14 → 0.3.15-beta.0

package/dist/widgets/dist/packages/hooks/dist/application/models/utilityTypes/splitWords.d.cts

@@ -0,0 +1,35 @@
+import { IsLowerCase, IsNumeric, IsUpperCase, WordSeparators } from "./internal.cjs";
+
+//#region ../widgets/dist/packages/hooks/dist/application/models/utilityTypes/splitWords.d.ts
+
+//#region ../hooks/dist/application/models/utilityTypes/splitWords.d.ts
+//#region src/application/models/utilityTypes/splitWords.d.ts
+type SkipEmptyWord<Word extends string> = Word extends '' ? [] : [Word];
+type RemoveLastCharacter<Sentence extends string, Character extends string> = Sentence extends `${infer LeftSide}${Character}` ? SkipEmptyWord<LeftSide> : never;
+/**
+ * Split a string (almost) like Lodash's `_.words()` function.
+ *
+ * - Split on each word that begins with a capital letter.
+ * - Split on each {@link WordSeparators}.
+ * - Split on numeric sequence.
+ *
+ * @example
+ * ```
+ * type Words0 = SplitWords<'helloWorld'>; // ['hello', 'World']
+ * type Words1 = SplitWords<'helloWORLD'>; // ['hello', 'WORLD']
+ * type Words2 = SplitWords<'hello-world'>; // ['hello', 'world']
+ * type Words3 = SplitWords<'--hello the_world'>; // ['hello', 'the', 'world']
+ * type Words4 = SplitWords<'lifeIs42'>; // ['life', 'Is', '42']
+ * ```
+ *
+ * @internal
+ * @category Change case
+ * @category Template literal
+ */
+type SplitWords<Sentence extends string, LastCharacter extends string = '', CurrentWord extends string = ''> = Sentence extends `${infer FirstCharacter}${infer RemainingCharacters}` ? FirstCharacter extends WordSeparators ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters>] : LastCharacter extends '' ? SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter> : [false, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, false] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [true, true] extends [IsLowerCase<LastCharacter>, IsUpperCase<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsUpperCase<LastCharacter>, IsLowerCase<FirstCharacter>] ? [...RemoveLastCharacter<CurrentWord, LastCharacter>, ...SplitWords<RemainingCharacters, FirstCharacter, `${LastCharacter}${FirstCharacter}`>] : SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [...SkipEmptyWord<CurrentWord>];
+//#endregion
+
+//#endregion
+
+//#endregion
+export { SplitWords };

package/dist/widgets/dist/packages/hooks/dist/application/models/utilityTypes/trim.d.cts

@@ -0,0 +1,32 @@
+import { Whitespace } from "./internal.cjs";
+
+//#region ../widgets/dist/packages/hooks/dist/application/models/utilityTypes/trim.d.ts
+
+//#region ../hooks/dist/application/models/utilityTypes/trim.d.ts
+//#region src/application/models/utilityTypes/trim.d.ts
+/**
+ * Remove spaces from the left side.
+ */
+type TrimLeft<V extends string> = V extends `${Whitespace}${infer R}` ? TrimLeft<R> : V;
+/**
+ * Remove spaces from the right side.
+ */
+type TrimRight<V extends string> = V extends `${infer R}${Whitespace}` ? TrimRight<R> : V;
+/**
+ * Remove leading and trailing spaces from a string.
+ * @example
+ * ```
+ * import type {Trim} from 'type-fest';
+ *
+ * Trim<' foo '>
+ * //=> 'foo'
+ * ```
+ *
+ * @category String
+ * @category Template literal
+ */
+type Trim<V extends string> = TrimLeft<TrimRight<V>>;
+//#endregion
+//#endregion
+//#endregion
+export { Trim };

package/dist/widgets/dist/packages/hooks/dist/application/models/utilityTypes/unknownArray.d.cts

@@ -0,0 +1,32 @@
+//#region ../widgets/dist/packages/hooks/dist/application/models/utilityTypes/unknownArray.d.ts
+//#region ../hooks/dist/application/models/utilityTypes/unknownArray.d.ts
+//#region src/application/models/utilityTypes/unknownArray.d.ts
+/**
+ * Represents an array with `unknown` value.
+ *
+ * Use case: You want a type that all arrays can be assigned to, but you don't care about the value.
+ *
+ * @example
+ * ```
+ * import type {UnknownArray} from 'type-fest';
+ *
+ * type IsArray<T> = T extends UnknownArray ? true : false;
+ *
+ * type A = IsArray<['foo']>;
+ * //=> true
+ *
+ * type B = IsArray<readonly number[]>;
+ * //=> true
+ *
+ * type C = IsArray<string>;
+ * //=> false
+ * ```
+ *
+ * @category Type
+ * @category Array
+ */
+type UnknownArray = readonly unknown[];
+//#endregion
+//#endregion
+//#endregion
+export { UnknownArray };

package/dist/widgets/dist/packages/hooks/dist/atoms/search/searchAPI.d.cts

@@ -0,0 +1,14 @@
+//#region ../widgets/dist/packages/hooks/dist/atoms/search/searchAPI.d.ts
+
+//#region ../hooks/dist/atoms/search/searchAPI.d.ts
+
+//#region src/atoms/search/searchAPI.d.ts
+type SelectedFilterOption = {
+  id: string;
+  displayName: string;
+  filterId: string;
+  filterItemId: string;
+};
+//#endregion
+//#endregion
+export { SelectedFilterOption };

package/dist/widgets/dist/packages/hooks/dist/contexts/types.d.cts

@@ -0,0 +1,61 @@
+//#region ../widgets/dist/packages/hooks/dist/contexts/types.d.ts
+
+type ProductCardVariant = 'filled' | 'bordered' | 'minimal' | 'transparentBordered';
+type ProductCardHoverVariant = 'backgroundDark' | 'none';
+type ProductCardLayoutVariant = 'normal' | 'tall' | 'square';
+interface ProductCardConfig {
+  variant: ProductCardVariant;
+  hoverVariant: ProductCardHoverVariant;
+  layoutVariant: ProductCardLayoutVariant;
+  pricePrefix?: string;
+}
+type SuggestionButtonVariant = 'outlined' | 'outlinedLight' | 'primary' | 'secondary' | 'tertiary' | 'dark' | 'darkAccent' | 'darkPrimary' | 'secondaryDark' | 'secondaryAccent' | 'transparent' | 'transparentDark' | 'lightDark';
+interface SuggestionButtonConfig {
+  variant?: SuggestionButtonVariant;
+  hoverVariant?: SuggestionButtonVariant;
+  answerVariant?: SuggestionButtonVariant;
+  borderRadius?: 'sm' | 'md' | 'lg';
+}
+type SearchZeroStateVariant = 'backgroundTertiary' | 'backgroundDark' | 'backgroundPrimary';
+type SearchZeroStateLayout = 'input' | 'icon';
+type SearchInputVariant = 'standard';
+type SearchIconVariant = 'thin' | 'bold';
+declare enum WidgetType {
+  ChatPreview = "ChatPreview",
+  SocialProofV2 = "SocialProofV2",
+  ChatPreviewV2 = "ChatPreviewV2",
+  ChatPreviewIsLoading = "ChatPreviewIsLoading",
+  ChatPreviewPostInteraction = "ChatPreviewPostInteraction",
+  ChatPreviewProductComparison = "ChatPreviewProductComparison",
+  SuggestionBar = "SuggestionBar",
+  SuggestionBarV2 = "SuggestionBarV2",
+  ImagePromptCard = "ImagePromptCard",
+  ImageBanner = "ImageBanner",
+  SingleImagePrompt = "SingleImagePrompt",
+  SearchPrompt = "SearchPrompt",
+  SearchZeroStateEntryPoint = "SearchZeroStateEntryPoint",
+  SearchResultsEntryPoint = "SearchResultsEntryPoint",
+  SearchOverlayHost = "SearchOverlayHost",
+  NoOp = "NoOp",
+}
+interface BaseWidgetConfig<T extends WidgetType> {
+  widgetConfigId: string;
+  type: T;
+  contentId?: string;
+}
+interface SearchEntryPointWidgetConfig extends BaseWidgetConfig<WidgetType.SearchZeroStateEntryPoint> {
+  searchZeroStateVariant: SearchZeroStateVariant;
+  searchInputVariant: SearchInputVariant;
+  searchIconVariant?: SearchIconVariant;
+  searchIconSize?: number;
+  suggestionButtonConfig: SuggestionButtonConfig;
+  layout: SearchZeroStateLayout;
+  searchBoxPlaceholder: string;
+  animationSpeed?: 'standard' | 'slow' | 'none';
+  compactLabel?: string;
+  initialSuggestions?: string[];
+  usingPortal?: boolean;
+  includeSubtitle?: boolean;
+}
+//#endregion
+export { type ProductCardConfig, type SearchEntryPointWidgetConfig, SearchInputVariant, type SuggestionButtonVariant };

package/dist/widgets/dist/packages/hooks/dist/hooks/Search/useSearch.d.cts

@@ -0,0 +1,60 @@
+import { ProductCardConfig } from "../../contexts/types.cjs";
+import { SearchResponseProductAttributes } from "../../application/models/api/response.cjs";
+import { SearchResult } from "../../application/models/api/search.cjs";
+import { SelectedFilterOption } from "../../atoms/search/searchAPI.cjs";
+import { SearchFilterDatum, SelectFilterItem } from "../../types/search-filter-types.cjs";
+import { SearchResultsState } from "../utils.cjs";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
+
+//#region ../widgets/dist/packages/hooks/dist/hooks/Search/useSearch.d.ts
+
+//#region ../hooks/dist/hooks/Search/useSearch.d.ts
+//#region src/hooks/Search/useSearch.d.ts
+interface SearchResultsHocProps {
+  searchData: SearchResult | null;
+  searchResponseId: string;
+  merchantShortName: string;
+  productCardConfig: ProductCardConfig;
+  productList: SearchResponseProduct[];
+  autocompleteResults: string[];
+  searchFilters: SearchFilterDatum[];
+  availableDynamicFilters: {
+    name: string;
+    displayName: string;
+  }[];
+  selectedFilterOptions: SelectedFilterOption[];
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
+  recommendedProductsHeading: string;
+  searchOverlayHeading: string;
+  searchText: string;
+  query: string;
+  searchResultsState: SearchResultsState;
+  isLoadingSearch: boolean;
+  isFilterOpen: boolean;
+  shouldShowAutocomplete: boolean;
+  focusedIndex: number;
+  focusedOptionId: string | undefined;
+  filterButtonText: string;
+  onSearchInputChange: (value: string) => void;
+  onSubmitSearch: () => void;
+  onAutocompleteSelect: (suggestion: string) => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onSearchInputFocus: () => void;
+  onSearchInputBlur: () => void;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+  onSelectFilterItem: SelectFilterItem;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onClearAllFilters: () => void;
+  setIsFilterOpen: (isFilterOpen: boolean) => void;
+  resetSearch: () => void;
+  searchResultsRef: React.RefObject<HTMLDivElement>;
+}
+//#endregion
+//#endregion
+export { SearchResultsHocProps };

package/dist/widgets/dist/packages/hooks/dist/hooks/utils.d.cts

@@ -0,0 +1,12 @@
+//#region ../widgets/dist/packages/hooks/dist/hooks/utils.d.ts
+
+//#region ../hooks/dist/hooks/utils.d.ts
+
+declare enum SearchResultsState {
+  Loading = 0,
+  Results = 1,
+  NoResults = 2,
+}
+//#endregion
+//#endregion
+export { SearchResultsState };

package/dist/widgets/dist/packages/hooks/dist/types/search-filter-types.d.cts

@@ -0,0 +1,28 @@
+//#region ../widgets/dist/packages/hooks/dist/types/search-filter-types.d.ts
+//#region ../hooks/dist/types/search-filter-types.d.ts
+
+type SelectFilterItem = ({
+  filterId,
+  filterItemId,
+  isSelected,
+  displayName
+}: {
+  filterId: string;
+  filterItemId: string;
+  isSelected: boolean;
+  displayName: string;
+}) => void;
+type SearchFilterDatum = {
+  filterId: string;
+  displayName: string;
+  items: SearchFilterItemDatum[];
+};
+type SearchFilterItemDatum = {
+  filterItemId: string;
+  displayName: string;
+  productCount: number;
+  isSelected: boolean;
+};
+//#endregion
+//#endregion
+export { SearchFilterDatum, SelectFilterItem };

package/dist/widgets/dist/packages/hooks/dist/types/test-types.d.cts

@@ -0,0 +1,10 @@
+//#region ../widgets/dist/packages/hooks/dist/types/test-types.d.ts
+//#region ../hooks/dist/types/test-types.d.ts
+//#region src/types/test-types.d.ts
+interface TestProps {
+  dataTestId?: string;
+}
+//#endregion
+//#endregion
+//#endregion
+export { TestProps };

package/dist/widgets-v2/SearchZeroState/index.d.cts

@@ -1,4 +1,5 @@
-import { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroStateProps } from "../../widgets/dist/SearchZeroState/types.cjs";
+import { SearchEntryPointWidgetConfig, SearchInputVariant } from "../../widgets/dist/packages/hooks/dist/contexts/types.cjs";
+import { SearchZeroStateProps } from "../../widgets/dist/SearchZeroState/types.cjs";
 import { SearchZeroState } from "../../widgets/dist/SearchZeroState/SearchZeroState.cjs";
 import { SearchZeroStateWidget } from "../../widgets/dist/SearchZeroState/SearchZeroStateWidget.cjs";
 export { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroState, SearchZeroStateProps, SearchZeroStateWidget };

package/dist/widgets-v2/SearchZeroState/index.d.ts

@@ -1,4 +1,5 @@
-import { SearchEntryPointWidgetConfig, SearchInputVariant, SearchZeroStateProps } from "../../packages/widgets/dist/SearchZeroState/types.js";
+import { SearchEntryPointWidgetConfig, SearchInputVariant } from "../../packages/widgets/dist/packages/hooks/dist/contexts/types.js";
+import { SearchZeroStateProps } from "../../packages/widgets/dist/SearchZeroState/types.js";
 import { SearchZeroState } from "../../packages/widgets/dist/SearchZeroState/SearchZeroState.js";
 import { SearchZeroStateWidget } from "../../packages/widgets/dist/SearchZeroState/SearchZeroStateWidget.js";
 import "../../packages/widgets/dist/SearchZeroState/index.js";

package/dist/widgets-v2/SuggestionButtonContainer/index.d.ts

@@ -1,3 +1,4 @@
 import { SuggestionButtonContainerProps } from "../../packages/widgets/dist/SuggestionButtonContainer/types.js";
 import { SuggestionButtonContainer } from "../../packages/widgets/dist/SuggestionButtonContainer/SuggestionButtonContainer.js";
+import "../../packages/widgets/dist/SuggestionButtonContainer/index.js";
 export { SuggestionButtonContainer, SuggestionButtonContainerProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.14",
+  "version": "0.3.15-beta.0",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,15 +1,22 @@
-import { ReactNode, Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  EnviveMetricsEventName,
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import {
   FloatingChatConfig,
   LookAndFeelConfig,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
 import {
-  SpiffyMetricsEventName,
-  useAmplitude,
-} from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
-import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+  Collapse,
+  WidgetInteractionComponent,
+  WidgetInteractionType,
+} from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
 import {
   FloatingButton,
   FloatingButtonBackgroundColor,
@@ -18,15 +25,15 @@ import {
   FloatingButtonShow,
   FloatingButtonVariant,
 } from '@envive-ai/react-toolkit-v3/FloatingButton';
-import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { ReactNode, Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
 import { DebugBar } from 'src/debug/debugBar';
+import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton';
+import { CustomerServiceType } from '../../CXIntegration/types';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
-import { FloatingChatOverlay } from './FloatingChatOverlay';
 import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
-import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton';
 import { FLOATING_BUTTON_ID } from './constants';
-import { CustomerServiceType } from '../../CXIntegration/types';
+import { FloatingChatOverlay } from './FloatingChatOverlay';
 import { useFloatingButtonVisibility } from './hooks/useFloatingButtonVisibility';
 import { useAutoPopup } from './hooks/useAutoPopup';
 
@@ -74,7 +81,7 @@ interface FloatingChatWidgetHandlerProps extends BaseWidgetProps {
 const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   const { previewButtonOnly, previewChatAlwaysOpen } = props;
   const salesAgentData = useSalesAgent();
-
+  const { trackWidgetInteraction } = useWidgetInteraction();
   const { userHasInteractedValue } = useGetWidgetStatus();
 
   // TODO: Get hardcopy
@@ -86,7 +93,7 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
     CustomerServiceType.unsupported;
 
   // TODO: Get hardcopy content
-  const { isOpen, openChat, closeChat } = useChatToggle();
+  const { isOpen, openChat, closeChat, onHover } = useChatToggle();
 
   const [isCXOpen, setIsCXOpen] = useState(false);
 
@@ -95,6 +102,19 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
     if (isOpen) setIsCXOpen(false);
   }, [isOpen]);
 
+  const handleClose = (type: Collapse) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FLOATING_CHAT,
+        widget_interaction: WidgetInteractionType.WIDGET_COLLAPSED,
+        widget_interaction_data: {
+          widget_collapsed: type,
+        },
+      },
+    });
+  };
+
   const { shouldShowFloatingButton } = useFloatingButtonVisibility({
     floatingButtonShowConfig: floatingButton?.showOption as FloatingButtonShow,
     isChatOpen: isOpen,
@@ -152,7 +172,12 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
               onClose={
                 previewChatAlwaysOpen
                   ? () => {}
-                  : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)
+                  : () => {
+                      closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY);
+                      handleClose({
+                        collapse_source: 'body_click',
+                      });
+                    }
               }
               previewMode={!!previewChatAlwaysOpen}
             >
@@ -167,10 +192,25 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
                   isFloatingChatOpen={effectiveIsOpen}
                   onToggleCXButton={toggle}
                   debugBar={<DebugBar />}
+                  onSwipeClose={
+                    previewChatAlwaysOpen
+                      ? () => {}
+                      : () => {
+                          closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+                          handleClose({
+                            collapse_source: 'swipe',
+                          });
+                        }
+                  }
                   onClose={
                     previewChatAlwaysOpen
                       ? () => {}
-                      : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+                      : () => {
+                          closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON);
+                          handleClose({
+                            collapse_source: 'close_button',
+                          });
+                        }
                   }
                 />
               </Suspense>
@@ -189,6 +229,7 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
                   ? () => {}
                   : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
               }
+              onMouseOver={onHover}
               customIcon={floatingButton?.iconSVGSrc}
               show={floatingButton?.showOption as FloatingButtonShow}
               location={floatingButton?.position as FloatingButtonLocation}

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -1,21 +1,24 @@
-import {
-  PromptCarouselWidgetV3Config,
-  WidgetTypeV3,
-} from '@envive-ai/react-hooks/contexts/typesV3';
-import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
-import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
-import { useCallback, useEffect } from 'react';
 import {
   EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import {
+  PromptCarouselWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import {
+  PromptCarousel,
+  usePromptCarouselAnalytics,
+} from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { AnimationSpeed } from '@envive-ai/react-toolkit-v3/PromptCarousel/types/types';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { PromptCarousel } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { useCallback, useEffect } from 'react';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { RawValues, getStringIdForText } from '../utils/functions';
 
@@ -33,6 +36,19 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 
+  const {
+    onClick: onSuggestionClick,
+    onDrag,
+    onHover,
+    onMouseDown,
+    onMouseUp,
+    onTouchStart,
+    onTouchEnd,
+  } = usePromptCarouselAnalytics(WidgetInteractionComponent.SUGGESTION_BAR, text => {
+    const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+    return getStringIdForText(rawValues, text);
+  });
+
   const promptButtonTexts = (hardcopyContent?.values?.promptButtonTexts as string[]) || [];
   const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
 
@@ -62,6 +78,7 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
     (text: string) => {
       const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
       const stringId = getStringIdForText(rawValues, text);
+      onSuggestionClick(stringId);
       trackEvent({
         eventName: EnviveMetricsEventName.WidgetTextClicked,
         eventProps: {
@@ -91,6 +108,12 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
       promptCarouselRows={promptCarouselRows}
       animationSpeed={animationSpeed}
       handleButtonClick={handleButtonClick}
+      handleButtonHover={onHover}
+      handleButtonDrag={onDrag}
+      handleButtonMouseUp={onMouseUp}
+      handleButtonMouseDown={onMouseDown}
+      handleButtonTouchStart={onTouchStart}
+      handleButtonTouchEnd={onTouchEnd}
       promptButtonTexts={buttonTexts}
     />
   );