@envive-ai/react-widgets-v3 0.3.2

package/src/stories/TitledPromptCarouselWidget.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TitledPromptCarouselWidget } from '../widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget';
+
+const meta = {
+  title: 'Widgets V3/TitledPromptCarouselWidget',
+  component: TitledPromptCarouselWidget,
+  tags: ['autodocs'],
+  args: {
+    widgetConfigId: 'titled-prompt-carousel-test-light-widget',
+  },
+  argTypes: {
+    widgetConfigId: {
+      control: 'text',
+      description:
+        'Unique identifier for the widget configuration. The widget will fetch the widget config and hardcopy content based on this ID.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'TitledPromptCarouselWidget is a widget wrapper that combines a Title component with a PromptCarousel component. It includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget automatically fetches title label, title logo, and prompt button texts from hardcopy and widget config based on the widgetConfigId.',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          padding: '1rem',
+          maxWidth: '100%',
+          overflow: 'hidden',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TitledPromptCarouselWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Light: Story = {
+  args: {
+    widgetConfigId: 'titled-prompt-carousel-test-light-widget',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TitledPromptCarouselWidget in light mode. The widget displays with light prompt buttons.',
+      },
+    },
+  },
+};
+
+export const Dark: Story = {
+  args: {
+    widgetConfigId: 'titled-prompt-carousel-test-dark-widget',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'TitledPromptCarouselWidget in dark mode. The widget displays with dark prompt buttons.',
+      },
+    },
+  },
+};

package/src/stories/TypingAnimationFlowWidget.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TypingAnimationFlowWidget } from '../widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget';
+
+const meta = {
+  title: 'Widgets V3/TypingAnimationFlowWidget',
+  component: TypingAnimationFlowWidget,
+  tags: ['autodocs'],
+  args: {
+    widgetConfigId: 'typing-animation-test-light-widget',
+  },
+  argTypes: {
+    widgetConfigId: {
+      control: 'select',
+      options: ['typing-animation-test-light-widget', 'typing-animation-test-dark-widget'],
+      description:
+        'Unique identifier for the widget configuration. The widget will fetch the widget config based on this ID.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'TypingAnimationFlowWidget is a widget wrapper around TypingAnimation, ChatPreviewLoading and ChatPreview that includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget automatically fetches typing animation content (title, headline, animated text sequence, prompt buttons) from hardcopy and widget config based on the widgetConfigId. It handles post-interaction actions by transitioning to ChatPreview widget when the user interacts.',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          padding: '1rem',
+          maxWidth: '100%',
+          overflow: 'hidden',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TypingAnimationFlowWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Experiment with different widgetConfigId values. The widget will fetch typing animation content (title, headline, animated text sequence, prompt buttons) from hardcopy content and widget config based on the widgetConfigId. After user interaction, it will transition to ChatPreview widget.',
+      },
+    },
+  },
+};
+
+export const LightButtons: Story = {
+  args: {
+    widgetConfigId: 'typing-animation-test-light-widget',
+  },
+};
+
+export const DarkButtons: Story = {
+  args: {
+    widgetConfigId: 'typing-animation-test-dark-widget',
+  },
+};

package/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx

@@ -0,0 +1,152 @@
+import {
+  ChatPreviewComparisonWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { useAtomValue } from 'jotai';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback, useMemo } from 'react';
+import {
+  ChatElementDisplayLocationV3,
+  VariantTypeEnum,
+} from '@envive-ai/react-hooks/application/models';
+import { ChatPreviewComparison } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison';
+import { ChatPreviewComparisonProps } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison/types/types';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
+import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
+import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+
+const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
+  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { openChat } = useChatToggle();
+
+  const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
+
+  const variantInfo = useAtomValue(variantInfoAtom);
+  const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
+
+  const { suggestions } = useAtomValue(chatAtom);
+
+  const promptButtonTexts = useMemo(() => {
+    return suggestions.map(suggestion => suggestion.content);
+  }, [suggestions]);
+
+  const messageText = useMemo(() => getMessageText(lastAssistantMessage), [lastAssistantMessage]);
+
+  const productImageUrls = useMemo(
+    () => (lastAssistantMessage ? getRecentProductImageUrls(lastAssistantMessage, productId) : []),
+    [lastAssistantMessage, productId],
+  );
+
+  const images = useMemo(
+    () =>
+      productImageUrls
+        ? productImageUrls.map((url, index) => ({ src: url, alt: `Product Image ${index + 1}` }))
+        : [],
+    [productImageUrls],
+  );
+
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
+
+  const chatPreviewComparisonWidgetConfig = widgetConfig as ChatPreviewComparisonWidgetV3Config;
+
+  const id = widgetConfig?.contentId;
+
+  const hardCopyContent = {
+    titleLabel: hardcopyContent?.values?.titleLabel,
+    headlineText: hardcopyContent?.values?.headlineText,
+    textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
+    messageText,
+    promptButtonTexts,
+  } as Pick<
+    ChatPreviewComparisonProps['widgetContentProps'],
+    'headlineText' | 'messageText' | 'promptButtonTexts' | 'textFieldPlaceholderText' | 'titleLabel'
+  >;
+
+  const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
+
+  const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+
+  const handlePromptButtonClick = useCallback(
+    (text: string) => {
+      onTypedMessageSubmitted({ query: text, userTyped: false });
+      openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
+    },
+    [onTypedMessageSubmitted, openChat],
+  );
+
+  const handleTextFieldClick = useCallback(() => {
+    openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
+  }, [openChat]);
+
+  if (isLoading) {
+    return (
+      <ChatPreviewLoadingWidgetWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.ChatPreviewLoadingV3}
+      />
+    );
+  }
+
+  const widgetStyleProps: ChatPreviewComparisonProps['widgetStyleProps'] = {
+    theme: Theme.GLOBAL_CUSTOM,
+    variant: chatPreviewComparisonWidgetConfig?.variant,
+    hideImage:
+      images?.length === 0 || images === undefined
+        ? true
+        : chatPreviewComparisonWidgetConfig?.hideImage,
+    hideTextField: chatPreviewComparisonWidgetConfig?.hideTextField,
+    hideLogo,
+    hexCardColor: chatPreviewComparisonWidgetConfig?.hexCardColor,
+  };
+
+  const widgetContentProps: ChatPreviewComparisonProps['widgetContentProps'] = {
+    titleLabel: hardCopyContent?.titleLabel,
+    headlineText: hardCopyContent?.headlineText,
+    messageText: hardCopyContent?.messageText,
+    promptButtonTexts: hardCopyContent?.promptButtonTexts,
+    textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
+    images: images ?? [],
+    logoSrc: logoSrc ?? undefined,
+  };
+
+  const widgetEventProps: ChatPreviewComparisonProps['widgetEventProps'] = {
+    handlePromptButtonClick,
+    handleTextFieldClick,
+  };
+
+  return (
+    <ChatPreviewComparison
+      baseProps={{ id }}
+      widgetStyleProps={widgetStyleProps}
+      widgetContentProps={widgetContentProps}
+      widgetEventProps={widgetEventProps}
+    />
+  );
+};
+
+export const ChatPreviewComparisonWidgetWithBaseWidget = withBaseWidget<BaseWidgetProps>(
+  ChatPreviewComparisonWidgetHandler,
+);
+
+export interface ChatPreviewComparisonWidgetProps {
+  widgetConfigId: string;
+}
+
+export const ChatPreviewComparisonWidget = ({
+  widgetConfigId,
+}: ChatPreviewComparisonWidgetProps) => {
+  return (
+    <ChatPreviewComparisonWidgetWithBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.ChatPreviewComparisonV3}
+    />
+  );
+};
+
+ChatPreviewComparisonWidget.displayName = 'ChatPreviewComparisonWidget';

package/src/widgets/ChatPreviewComparisonWidget/index.ts

@@ -0,0 +1,7 @@
+import {
+  ChatPreviewComparisonWidget,
+  ChatPreviewComparisonWidgetWithBaseWidget,
+} from './ChatPreviewComparisonWidget';
+
+export { ChatPreviewComparisonWidget, ChatPreviewComparisonWidgetWithBaseWidget };
+export type { ChatPreviewComparisonWidgetProps } from './ChatPreviewComparisonWidget';

package/src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.tsx

@@ -0,0 +1,82 @@
+import {
+  ChatPreviewLoadingWidgetV3Config,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { useAtomValue } from 'jotai';
+
+import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
+import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
+import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { PromptCarouselWidget } from '../PromptCarouselWidget/PromptCarouselWidget';
+
+const ChatPreviewLoadingWidgetHandler = (props: BaseWidgetProps) => {
+  const { widgetConfig, isLoading, widgetConfigId, hardcopyContent, uiConfig } = props;
+
+  const chatPreviewLoadingWidgetConfig = widgetConfig as ChatPreviewLoadingWidgetV3Config;
+
+  const id = widgetConfig?.contentId;
+
+  const chatPreviewLoadingDataMap = useAtomValue(chatPreviewLoadingDataAtom);
+  const chatPreviewLoadingData = chatPreviewLoadingDataMap[widgetConfigId] ?? undefined;
+
+  const isCacheEmpty =
+    !chatPreviewLoadingData ||
+    Object.values(chatPreviewLoadingData).every(value => value === undefined) ||
+    Object.keys(chatPreviewLoadingData).length === 0;
+
+  if (isLoading && isCacheEmpty) {
+    return <ChatPreviewLoading fullIsLoading />;
+  }
+
+  const titleLabel =
+    (hardcopyContent?.values?.titleLabel as string) ?? chatPreviewLoadingData?.titleLabel;
+
+  const textFieldPlaceholder =
+    (hardcopyContent?.values?.textFieldPlaceholderText as string) ??
+    chatPreviewLoadingData?.textFieldPlaceholder;
+
+  const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo ?? chatPreviewLoadingData?.hideLogo;
+
+  const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc ?? chatPreviewLoadingData?.logoSrc;
+
+  const variant = chatPreviewLoadingWidgetConfig?.variant ?? chatPreviewLoadingData?.variant;
+
+  const hexCardColor =
+    chatPreviewLoadingWidgetConfig?.hexCardColor ?? chatPreviewLoadingData?.hexCardColor;
+
+  const hideTextField =
+    chatPreviewLoadingWidgetConfig?.hideTextField ?? chatPreviewLoadingData?.hideTextField;
+
+  return (
+    <ChatPreviewLoading
+      id={id}
+      variant={variant}
+      hexCardColor={hexCardColor}
+      hideTextField={hideTextField}
+      textFieldPlaceholder={textFieldPlaceholder}
+      hideLogo={hideLogo}
+      logoSrc={logoSrc}
+      titleLabel={titleLabel}
+    />
+  );
+};
+
+export const ChatPreviewLoadingWidgetWithBaseWidget = withBaseWidget<BaseWidgetProps>(
+  ChatPreviewLoadingWidgetHandler,
+);
+
+export interface ChatPreviewLoadingWidgetProps {
+  widgetConfigId: string;
+}
+
+export const ChatPreviewLoadingWidget = ({ widgetConfigId }: ChatPreviewLoadingWidgetProps) => {
+  return (
+    <ChatPreviewLoadingWidgetWithBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.ChatPreviewLoadingV3}
+    />
+  );
+};
+
+PromptCarouselWidget.displayName = 'PromptCarouselWidget';

package/src/widgets/ChatPreviewLoadingWidget/index.ts

@@ -0,0 +1,7 @@
+import {
+  ChatPreviewLoadingWidget,
+  ChatPreviewLoadingWidgetWithBaseWidget,
+} from './ChatPreviewLoadingWidget';
+
+export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetWithBaseWidget };
+export type { ChatPreviewLoadingWidgetProps } from './ChatPreviewLoadingWidget';

package/src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx

@@ -0,0 +1,119 @@
+import { ChatPreviewWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useAtomValue } from 'jotai';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback, useMemo } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { ChatPreviewProps } from '@envive-ai/react-toolkit-v3/ChatPreview/types/types';
+import { ChatPreview } from '@envive-ai/react-toolkit-v3/ChatPreview';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
+import { getMessageText } from '../utils/functions';
+import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+
+const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
+  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { openChat } = useChatToggle();
+
+  const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
+
+  const { suggestions } = useAtomValue(chatAtom);
+
+  const promptButtonTexts = useMemo(() => {
+    return suggestions.map(suggestion => suggestion.content);
+  }, [suggestions]);
+
+  const messageText = useMemo(() => getMessageText(lastAssistantMessage), [lastAssistantMessage]);
+
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
+
+  const chatPreviewWidgetConfig = widgetConfig as ChatPreviewWidgetV3Config;
+
+  const id = widgetConfig?.contentId;
+
+  const hardCopyContent = {
+    titleLabel: hardcopyContent?.values?.titleLabel,
+    textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
+    messageText,
+    promptButtonTexts,
+  } as Pick<
+    ChatPreviewProps['widgetContentProps'],
+    'messageText' | 'promptButtonTexts' | 'textFieldPlaceholderText' | 'titleLabel'
+  >;
+
+  const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
+
+  const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+
+  const handlePromptButtonClick = useCallback(
+    (text: string) => {
+      onTypedMessageSubmitted({ query: text, userTyped: false });
+      openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
+    },
+    [onTypedMessageSubmitted, openChat],
+  );
+
+  const handleTextFieldClick = useCallback(() => {
+    openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
+  }, [openChat]);
+
+  if (isLoading) {
+    return (
+      <ChatPreviewLoadingWidgetWithBaseWidget
+        widgetConfigId={widgetConfigId}
+        widgetType={WidgetTypeV3.ChatPreviewLoadingV3}
+      />
+    );
+  }
+
+  const widgetStyleProps: ChatPreviewProps['widgetStyleProps'] = {
+    theme: Theme.GLOBAL_CUSTOM,
+    variant: chatPreviewWidgetConfig?.variant,
+    hideTextField: chatPreviewWidgetConfig?.hideTextField,
+    hideLogo,
+    hexCardColor: chatPreviewWidgetConfig?.hexCardColor,
+  };
+
+  const widgetContentProps: ChatPreviewProps['widgetContentProps'] = {
+    titleLabel: hardCopyContent?.titleLabel,
+    messageText: hardCopyContent?.messageText,
+    promptButtonTexts: hardCopyContent?.promptButtonTexts,
+    textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
+    logoSrc: logoSrc ?? undefined,
+  };
+
+  const widgetEventProps: ChatPreviewProps['widgetEventProps'] = {
+    handlePromptButtonClick,
+    handleTextFieldClick,
+  };
+
+  return (
+    <ChatPreview
+      baseProps={{ id }}
+      widgetStyleProps={widgetStyleProps}
+      widgetContentProps={widgetContentProps}
+      widgetEventProps={widgetEventProps}
+    />
+  );
+};
+
+export const ChatPreviewWidgetWithBaseWidget =
+  withBaseWidget<BaseWidgetProps>(ChatPreviewWidgetHandler);
+
+export interface ChatPreviewWidgetProps {
+  widgetConfigId: string;
+}
+
+export const ChatPreviewWidget = ({ widgetConfigId }: ChatPreviewWidgetProps) => {
+  return (
+    <ChatPreviewWidgetWithBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.ChatPreviewV3}
+    />
+  );
+};
+
+ChatPreviewWidget.displayName = 'ChatPreviewWidget';

package/src/widgets/ChatPreviewWidget/index.ts

@@ -0,0 +1,4 @@
+import { ChatPreviewWidget, ChatPreviewWidgetWithBaseWidget } from './ChatPreviewWidget';
+
+export { ChatPreviewWidget, ChatPreviewWidgetWithBaseWidget };
+export type { ChatPreviewWidgetProps } from './ChatPreviewWidget';

package/src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx

@@ -0,0 +1,115 @@
+import { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+import classNames from 'classnames';
+
+export interface FloatingChatOverlayProps {
+  children?: ReactNode;
+  isOpened: boolean;
+  onClose: () => void;
+  className?: string;
+  dataTestId?: string;
+}
+
+export const FloatingChatOverlay = ({
+  children,
+  isOpened,
+  onClose,
+  className,
+  dataTestId,
+}: FloatingChatOverlayProps) => {
+  const overlayClasses = classNames(
+    'envive-floating-chat-overlay',
+    'envive-tw-fixed',
+    'envive-tw-top-0',
+    'envive-tw-left-0',
+    'envive-tw-h-screen',
+    'envive-tw-w-full',
+    'envive-tw-z-[2147483647]',
+    className,
+  );
+
+  const backdropClasses = classNames(
+    'envive-floating-chat-backdrop',
+    'envive-tw-absolute',
+    'envive-tw-top-0',
+    'envive-tw-left-0',
+    'envive-tw-h-full',
+    'envive-tw-w-full',
+    'envive-tw-bg-black',
+    'envive-tw-opacity-50',
+    'envive-tw-pointer-events-none',
+    'envive-tw-z-0',
+  );
+
+  const overlayContentClasses = classNames(
+    'envive-floating-chat-overlay-content',
+    'envive-tw-relative',
+    'envive-tw-flex',
+    'envive-tw-justify-end',
+    'envive-tw-items-stretch',
+    'envive-tw-h-full',
+    'envive-tw-w-full',
+    'envive-tw-pointer-events-auto',
+    'envive-tw-cursor-pointer',
+    'envive-tw-z-10',
+  );
+
+  const chatWrapper = (
+    <AnimatePresence>
+      {isOpened && (
+        <motion.div
+          key="floating-chat-overlay"
+          className={overlayClasses}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.3 }}
+          data-testid={dataTestId}
+        >
+          <motion.div
+            className={backdropClasses}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.5 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            aria-label="Close chat"
+          />
+          <div
+            className={overlayContentClasses}
+            onClick={onClose}
+            onKeyDown={e => {
+              if (e.key === 'Escape') {
+                onClose();
+              }
+            }}
+            role="button"
+            tabIndex={0}
+            aria-label="Close floating chat"
+          >
+            <motion.div
+              initial={{ opacity: 0, x: 512 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 512 }}
+              transition={{ duration: 0.3 }}
+              style={{ height: '100dvh', cursor: 'default' }}
+              className="envive-tw-shadow-md"
+              onClick={e => e.stopPropagation()}
+            >
+              {children}
+            </motion.div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+
+  // Render using portal to body to ensure it's on top of everything
+  if (typeof document !== 'undefined') {
+    return createPortal(chatWrapper, document.body);
+  }
+
+  return chatWrapper;
+};
+
+FloatingChatOverlay.displayName = 'FloatingChatOverlay';