@envive-ai/react-widgets-v3 0.3.2

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -0,0 +1,110 @@
+import { useMemo } from 'react';
+import {
+  FloatingChatConfig,
+  LookAndFeelConfig,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { FloatingChat } from '@envive-ai/react-toolkit-v3/FloatingChat';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import {
+  FloatingButton,
+  FloatingButtonBackgroundColor,
+  FloatingButtonLocation,
+  FloatingButtonMode,
+  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 { 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';
+
+const FloatingChatWidgetHandler = (props: BaseWidgetProps) => {
+  const salesAgentData = useSalesAgent();
+
+  const { userHasInteractedValue } = useGetWidgetStatus();
+
+  // TODO: Get hardcopy
+  const { uiConfig, isUiConfigLoading } = props;
+
+  // TODO: Figure out the issue and reenable this functionality
+  // const { customerServiceIntegration } = uiConfig ?? {};
+  // const unifiedCXButton = useUnifiedCXButton({
+  //   provider: customerServiceIntegration?.provider as CustomerServiceType,
+  //   enabled: customerServiceIntegration?.enabled,
+  //   suppressMerchantButton: customerServiceIntegration?.suppressMerchantButton,
+  // });
+  const unifiedCXButton = useUnifiedCXButton({
+    provider: CustomerServiceType.unsupported,
+    enabled: false,
+    suppressMerchantButton: false,
+  });
+
+  const { isSwitchEnabled, toggle } = unifiedCXButton ?? {};
+  // TODO: Get hardcopy content
+  const { isOpen, openChat, closeChat } = useChatToggle();
+
+  const theme = useMemo(() => {
+    if (isUiConfigLoading || !uiConfig) {
+      return Theme.STANDARD;
+    }
+
+    return (uiConfig?.lookAndFeel?.theme as Theme) ?? Theme.GLOBAL_CUSTOM;
+  }, [isUiConfigLoading, uiConfig]);
+
+  const { floatingButton } = uiConfig ?? {};
+
+  return (
+    <>
+      <FloatingChatOverlay
+        isOpened={isOpen}
+        onClose={() => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)}
+      >
+        <FloatingChat
+          theme={theme}
+          salesAgentData={salesAgentData}
+          floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
+          lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
+          isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
+          onToggleCXButton={toggle}
+          onClose={() => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)}
+        />
+      </FloatingChatOverlay>
+
+      {!isOpen && (
+        <FloatingButton
+          id={FLOATING_BUTTON_ID}
+          variant={floatingButton?.style as FloatingButtonVariant}
+          mode={floatingButton?.mode as FloatingButtonMode}
+          backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
+          onClick={() => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)}
+          customIcon={floatingButton?.iconSVGSrc}
+          show={floatingButton?.showOption as FloatingButtonShow}
+          location={floatingButton?.position as FloatingButtonLocation}
+          hasInteractionHappened={userHasInteractedValue}
+          ariaLabel="Open chat"
+        />
+      )}
+    </>
+  );
+};
+
+const FloatingChatWidgetWithBaseWidget = withBaseWidget<BaseWidgetProps>(FloatingChatWidgetHandler);
+
+export interface FloatingChatWidgetProps {}
+
+export const FloatingChatWidget = () => {
+  return (
+    <FloatingChatWidgetWithBaseWidget
+      widgetType={WidgetTypeV3.FloatingChatV3}
+      widgetConfigId="fake-widget-config-id"
+    />
+  );
+};
+
+FloatingChatWidget.displayName = 'FloatingChatWidget';

package/src/widgets/FloatingChatWidget/constants.ts

@@ -0,0 +1 @@
+export const FLOATING_BUTTON_ID = 'envive-ai-floating-button';

package/src/widgets/FloatingChatWidget/index.ts

@@ -0,0 +1,5 @@
+import { FloatingChatWidget } from './FloatingChatWidget';
+
+export { FloatingChatWidget };
+export type { FloatingChatWidgetProps } from './FloatingChatWidget';
+export { FLOATING_BUTTON_ID } from './constants';

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -0,0 +1,87 @@
+import {
+  PromptButtonCarouselWithImageWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  PromptButtonCarouselWithImage,
+  PromptButtonCarouselWithImageProps,
+} from '@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage';
+import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+
+const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
+  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { openChat } = useChatToggle();
+
+  const { hardcopyContent, widgetConfig, isLoading } = props;
+
+  const promptButtonCarouselWithImageWidgetConfig =
+    widgetConfig as PromptButtonCarouselWithImageWidgetV3Config;
+
+  const id = widgetConfig?.contentId;
+
+  const hardCopyContent = {
+    title: hardcopyContent?.values?.titleLabel,
+    promptButtonsTexts: hardcopyContent?.values?.promptButtonsTexts,
+    textFieldPlaceholder: hardcopyContent?.values?.textFieldPlaceholderText,
+  } as Pick<
+    PromptButtonCarouselWithImageProps,
+    'title' | 'promptButtonsTexts' | 'textFieldPlaceholder'
+  >;
+
+  const handlePromptButtonClick = useCallback(
+    (text: string) => {
+      onTypedMessageSubmitted({ query: text, userTyped: false });
+      openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON);
+    },
+    [onTypedMessageSubmitted, openChat],
+  );
+
+  const handleTextFieldClick = useCallback(() => {
+    openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
+  }, [openChat]);
+
+  return (
+    <PromptButtonCarouselWithImage
+      id={id}
+      theme={Theme.GLOBAL_CUSTOM}
+      isLoading={isLoading}
+      title={hardCopyContent?.title}
+      promptButtonsTexts={hardCopyContent?.promptButtonsTexts}
+      promptButtonType={promptButtonCarouselWithImageWidgetConfig?.promptButtonType}
+      imageSrc={promptButtonCarouselWithImageWidgetConfig?.image?.src}
+      alt={promptButtonCarouselWithImageWidgetConfig?.image?.alt}
+      textFieldPlaceholder={hardCopyContent?.textFieldPlaceholder}
+      hideTextField={promptButtonCarouselWithImageWidgetConfig?.hideTextField}
+      handlePromptButtonClick={handlePromptButtonClick}
+      handleTextFieldClick={handleTextFieldClick}
+    />
+  );
+};
+
+export const PromptButtonCarouselWithImageWidgetWithBaseWidget = withBaseWidget<BaseWidgetProps>(
+  PromptButtonCarouselWithImageWidgetHandler,
+);
+
+export interface PromptButtonCarouselWithImageWidgetProps {
+  widgetConfigId: string;
+}
+
+export const PromptButtonCarouselWithImageWidget = ({
+  widgetConfigId,
+}: PromptButtonCarouselWithImageWidgetProps) => {
+  return (
+    <PromptButtonCarouselWithImageWidgetWithBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.PromptButtonCarouselWithImageV3}
+    />
+  );
+};
+
+PromptButtonCarouselWithImageWidget.displayName = 'PromptButtonCarouselWithImageWidget';

package/src/widgets/PromptButtonCarouselWithImageWidget/index.ts

@@ -0,0 +1,6 @@
+import {
+  PromptButtonCarouselWithImageWidget,
+  PromptButtonCarouselWithImageWidgetWithBaseWidget,
+} from './PromptButtonCarouselWithImageWidget';
+
+export { PromptButtonCarouselWithImageWidget, PromptButtonCarouselWithImageWidgetWithBaseWidget };

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -0,0 +1,83 @@
+import {
+  PromptCarouselWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { useCallback } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+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 { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
+
+const mockButtonTexts = [
+  'Loading button 1',
+  'Loading button 2',
+  'Loading button 3',
+  'Loading button 4',
+  'Loading button 5',
+];
+
+const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
+  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { openChat } = useChatToggle();
+
+  const { hardcopyContent, widgetConfig, isLoading } = props;
+
+  const promptButtonTexts = (hardcopyContent?.values?.promptButtonTexts as string[]) || [];
+  const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
+
+  const promptCarouselWidgetConfig = widgetConfig as PromptCarouselWidgetV3Config;
+
+  const id = promptCarouselWidgetConfig?.contentId;
+  const boldFirstButton = promptCarouselWidgetConfig?.boldFirstButton;
+  const promptButtonType = promptCarouselWidgetConfig?.promptButtonType as PromptButtonVariant;
+  const promptCarouselRows = promptCarouselWidgetConfig?.promptCarouselRows;
+  const animationSpeed = isLoading
+    ? AnimationSpeed.FAST
+    : promptCarouselWidgetConfig?.animationSpeed;
+
+  const handleButtonClick = useCallback(
+    (text: string) => {
+      onTypedMessageSubmitted({ query: text, userTyped: false });
+      openChat(ChatElementDisplayLocationV3.PROMPT_CAROUSEL);
+    },
+    [onTypedMessageSubmitted, openChat],
+  );
+
+  return (
+    <PromptCarousel
+      id={id}
+      theme={Theme.GLOBAL_CUSTOM}
+      isLoading={isLoading}
+      boldFirstButton={boldFirstButton}
+      promptButtonType={promptButtonType}
+      promptCarouselRows={promptCarouselRows}
+      animationSpeed={animationSpeed}
+      handleButtonClick={handleButtonClick}
+      promptButtonTexts={buttonTexts}
+      {...props}
+    />
+  );
+};
+
+const PromptCarouselWidgetWithBaseWidget = withBaseWidget<BaseWidgetProps>(
+  PromptCarouselWidgetHandler,
+);
+
+export interface PromptCarouselWidgetProps {
+  widgetConfigId: string;
+}
+
+export const PromptCarouselWidget = ({ widgetConfigId }: PromptCarouselWidgetProps) => {
+  return (
+    <PromptCarouselWidgetWithBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.PromptCarouselV3}
+    />
+  );
+};
+
+PromptCarouselWidget.displayName = 'PromptCarouselWidget';

package/src/widgets/PromptCarouselWidget/index.ts

@@ -0,0 +1,2 @@
+export { PromptCarouselWidget } from './PromptCarouselWidget';
+export type { PromptCarouselWidgetProps } from './PromptCarouselWidget';

package/src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.tsx

@@ -0,0 +1,61 @@
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+
+import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
+import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
+import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { SocialProofWidgetWithBaseWidget } from '../SocialProofWidget/SocialProofWidget';
+import { ChatPreviewComparisonWidgetWithBaseWidget } from '../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget';
+import { ChatPreviewWidgetWithBaseWidget } from '../ChatPreviewWidget/ChatPreviewWidget';
+
+export interface SocialProofFlowWidgetProps {
+  widgetConfigId: string;
+}
+
+export const SocialProofFlowWidget = ({ widgetConfigId }: SocialProofFlowWidgetProps) => {
+  const {
+    userHasInteractedValue,
+    userHasNotInteractedValue,
+    isLoadingValue,
+    isProductComparisonValue,
+  } = useGetWidgetStatus();
+
+  if (userHasInteractedValue) {
+    return (
+      <ChatPreviewWidgetWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.ChatPreviewV3}
+      />
+    );
+  }
+
+  if (userHasNotInteractedValue) {
+    return (
+      <SocialProofWidgetWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.SocialProofV3}
+      />
+    );
+  }
+
+  if (isLoadingValue) {
+    return (
+      <ChatPreviewLoadingWidgetWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.ChatPreviewLoadingV3}
+      />
+    );
+  }
+
+  if (isProductComparisonValue) {
+    return (
+      <ChatPreviewComparisonWidgetWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.ChatPreviewComparisonV3}
+      />
+    );
+  }
+
+  return <ChatPreviewLoading fullIsLoading />;
+};
+
+SocialProofFlowWidget.displayName = 'SocialProofFlowWidget';

package/src/widgets/SocialProofFlowWidget/index.ts

@@ -0,0 +1,4 @@
+import { SocialProofFlowWidget } from './SocialProofFlowWidget';
+
+export { SocialProofFlowWidget };
+export type { SocialProofFlowWidgetProps } from './SocialProofFlowWidget';

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -0,0 +1,160 @@
+import {
+  SocialProofWidgetKind,
+  SocialProofWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+
+import { SocialProof, SocialProofProps } from '@envive-ai/react-toolkit-v3/SocialProof';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
+import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
+import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { getProductImageUrl } from '../utils/functions';
+
+const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
+  const setChatPreviewLoadingData = useSetAtom(chatPreviewLoadingDataAtom);
+
+  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { openChat } = useChatToggle();
+  const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
+
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
+
+  const socialProofWidgetConfig = widgetConfig as SocialProofWidgetV3Config;
+
+  const id = widgetConfig?.contentId;
+
+  const hardCopyContent = {
+    titleLabel: hardcopyContent?.values?.titleLabel,
+    numberOfCustomersText: hardcopyContent?.values?.numberOfCustomersText,
+    customerQueryText: hardcopyContent?.values?.customerQueryText,
+    primaryButtonText: hardcopyContent?.values?.primaryButtonText,
+    secondaryButtonTitleText: hardcopyContent?.values?.secondaryButtonTitleText,
+    secondaryButtonTexts: hardcopyContent?.values?.secondaryButtonTexts,
+    textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
+  } as Pick<
+    SocialProofProps['widgetContentProps'],
+    | 'titleLabel'
+    | 'numberOfCustomersText'
+    | 'customerQueryText'
+    | 'primaryButtonText'
+    | 'secondaryButtonTitleText'
+    | 'secondaryButtonTexts'
+    | 'textFieldPlaceholderText'
+  >;
+
+  const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
+
+  const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+
+  const dynamicImageUrl = getProductImageUrl(lastAssistantMessage);
+
+  const images =
+    socialProofWidgetConfig?.kind !== SocialProofWidgetKind.DYNAMIC
+      ? socialProofWidgetConfig?.images
+      : [{ src: dynamicImageUrl, alt: 'Product Image' }];
+
+  const handlePrimaryButtonClick = useCallback(
+    (text: string) => {
+      onTypedMessageSubmitted({ query: text, userTyped: false });
+      openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
+    },
+    [onTypedMessageSubmitted, openChat],
+  );
+
+  const handleSecondaryButtonClick = useCallback(
+    (text: string) => {
+      onTypedMessageSubmitted({ query: text, userTyped: false });
+      openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
+    },
+    [onTypedMessageSubmitted, openChat],
+  );
+
+  const handleTextFieldClick = useCallback(() => {
+    openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_TEXT_FIELD);
+  }, [openChat]);
+
+  if (isLoading) {
+    return <ChatPreviewLoading fullIsLoading />;
+  }
+
+  setChatPreviewLoadingData({
+    widgetConfigId,
+    data: {
+      titleLabel: hardcopyContent?.values?.titleLabel as string,
+      textFieldPlaceholder: hardcopyContent?.values?.textFieldPlaceholderText as string,
+      logoSrc: logoSrc as string,
+      hideLogo: hideLogo ?? false,
+      variant: socialProofWidgetConfig?.variant,
+      hexCardColor: socialProofWidgetConfig?.hexCardColor as string,
+      hideTextField: socialProofWidgetConfig?.hideTextField ?? false,
+    },
+  });
+
+  const widgetStyleProps: SocialProofProps['widgetStyleProps'] = {
+    theme: Theme.GLOBAL_CUSTOM,
+    variant: socialProofWidgetConfig?.variant,
+    primaryButtonVariant: socialProofWidgetConfig?.primaryButtonVariant,
+    secondaryButtonVariant: socialProofWidgetConfig?.secondaryButtonVariant,
+    promptCarouselRows: socialProofWidgetConfig?.promptCarouselRows,
+    imageGalleryLayout: socialProofWidgetConfig?.imageGalleryLayout,
+    hideImage:
+      images?.length === 0 || images === undefined ? true : socialProofWidgetConfig?.hideImage,
+    hideTextField: socialProofWidgetConfig?.hideTextField,
+    hideLogo,
+    hexCardColor: socialProofWidgetConfig?.hexCardColor,
+    dynamicLayout: socialProofWidgetConfig?.dynamicLayout ?? undefined,
+  };
+
+  const widgetContentProps: SocialProofProps['widgetContentProps'] = {
+    titleLabel: hardCopyContent?.titleLabel,
+    numberOfCustomersText: hardCopyContent?.numberOfCustomersText,
+    customerQueryText: hardCopyContent?.customerQueryText,
+    primaryButtonText: hardCopyContent?.primaryButtonText,
+    secondaryButtonTitleText: hardCopyContent?.secondaryButtonTitleText,
+    secondaryButtonTexts: hardCopyContent?.secondaryButtonTexts,
+    textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
+    images: images ?? [],
+    logoSrc: logoSrc ?? undefined,
+  };
+
+  const widgetEventProps: SocialProofProps['widgetEventProps'] = {
+    handlePrimaryButtonClick,
+    handleSecondaryButtonClick,
+    handleTextFieldClick,
+  };
+
+  return (
+    <SocialProof
+      baseProps={{ id }}
+      widgetStyleProps={widgetStyleProps}
+      widgetContentProps={widgetContentProps}
+      widgetEventProps={widgetEventProps}
+    />
+  );
+};
+
+export const SocialProofWidgetWithBaseWidget =
+  withBaseWidget<BaseWidgetProps>(SocialProofWidgetHandler);
+
+export interface SocialProofWidgetProps {
+  widgetConfigId: string;
+}
+
+export const SocialProofWidget = ({ widgetConfigId }: SocialProofWidgetProps) => {
+  return (
+    <SocialProofWidgetWithBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.SocialProofV3}
+    />
+  );
+};
+
+SocialProofWidget.displayName = 'SocialProofWidget';

package/src/widgets/SocialProofWidget/index.ts

@@ -0,0 +1,2 @@
+export { SocialProofWidget, SocialProofWidgetWithBaseWidget } from './SocialProofWidget';
+export type { SocialProofWidgetProps } from './SocialProofWidget';

package/src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.tsx

@@ -0,0 +1,93 @@
+import {
+  TitledPromptCarouselWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { useCallback } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { TitledPromptCarousel } from '@envive-ai/react-toolkit-v3/TitledPromptCarousel';
+import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
+
+const mockButtonTexts = [
+  'Loading button 1',
+  'Loading button 2',
+  'Loading button 3',
+  'Loading button 4',
+  'Loading button 5',
+];
+
+const mockTitleLabel = 'Loading...';
+
+const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
+  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { openChat } = useChatToggle();
+  const { hardcopyContent, widgetConfig, isLoading } = props;
+
+  const hardCopyTitleLabel = hardcopyContent?.values?.titleLabel as string | undefined;
+  const titleLabel = isLoading ? mockTitleLabel : hardCopyTitleLabel;
+
+  const titleAriaLabel = hardcopyContent?.values?.titleAriaLabel as string | undefined;
+  const promptCarouselAriaLabel = hardcopyContent?.values?.promptCarouselAriaLabel as
+    | string
+    | undefined;
+
+  const promptButtonTexts = (hardcopyContent?.values?.promptButtonTexts as string[]) || [];
+  const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
+
+  const titledPromptCarouselWidgetConfig = widgetConfig as TitledPromptCarouselWidgetV3Config;
+
+  const id = titledPromptCarouselWidgetConfig?.contentId;
+  const boldFirstButton = titledPromptCarouselWidgetConfig?.boldFirstButton;
+  const promptButtonType =
+    titledPromptCarouselWidgetConfig?.promptButtonType as PromptButtonVariant;
+  const promptCarouselRows = titledPromptCarouselWidgetConfig?.promptCarouselRows;
+  const animationSpeed = isLoading
+    ? AnimationSpeed.FAST
+    : titledPromptCarouselWidgetConfig?.animationSpeed;
+
+  const handleButtonClick = useCallback(
+    (text: string) => {
+      onTypedMessageSubmitted({ query: text, userTyped: false });
+      openChat(ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
+    },
+    [onTypedMessageSubmitted, openChat],
+  );
+
+  return (
+    <TitledPromptCarousel
+      id={id}
+      titleLabel={titleLabel}
+      titleAriaLabel={titleAriaLabel}
+      isLoading={isLoading}
+      boldFirstButton={boldFirstButton}
+      promptButtonType={promptButtonType}
+      promptCarouselRows={promptCarouselRows as PromptCarouselRows}
+      animationSpeed={animationSpeed as AnimationSpeed}
+      handleButtonClick={handleButtonClick}
+      promptButtonTexts={buttonTexts}
+      promptCarouselAriaLabel={promptCarouselAriaLabel}
+    />
+  );
+};
+
+const TitledPromptCarouselWidgetWithBaseWidget = withBaseWidget<BaseWidgetProps>(
+  TitledPromptCarouselWidgetHandler,
+);
+
+export interface TitledPromptCarouselWidgetProps {
+  widgetConfigId: string;
+}
+
+export const TitledPromptCarouselWidget = ({ widgetConfigId }: TitledPromptCarouselWidgetProps) => {
+  return (
+    <TitledPromptCarouselWidgetWithBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.TitledPromptCarouselV3}
+    />
+  );
+};
+
+TitledPromptCarouselWidget.displayName = 'TitledPromptCarouselWidget';

package/src/widgets/TitledPromptCarouselWidget/index.ts

@@ -0,0 +1,2 @@
+export { TitledPromptCarouselWidget } from './TitledPromptCarouselWidget';
+export type { TitledPromptCarouselWidgetProps } from './TitledPromptCarouselWidget';