@envive-ai/react-toolkit-v3 0.3.6 → 0.3.8

package/src/components/ChatHeader/hooks/useGetToggleOptionProperties.ts

@@ -16,12 +16,12 @@ const optionContainerClassesMap = (selected: boolean) => {
   if (selected) {
     return {
       [Theme.STANDARD]: {
-        [ChatHeaderVariant.LIGHT]: `${defaultContainerStandardClasses} envive-tw-bg-[var(--envive-colors-background-dark)]`,
-        [ChatHeaderVariant.DARK]: `${defaultContainerStandardClasses} envive-tw-bg-[var(--envive-colors-background-light)]`,
+        [ChatHeaderVariant.LIGHT]: `${defaultContainerStandardClasses} envive-tw-bg-background-dark`,
+        [ChatHeaderVariant.DARK]: `${defaultContainerStandardClasses} envive-tw-bg-background-light`,
       },
       [Theme.MODERN]: {
-        [ChatHeaderVariant.LIGHT]: `${defaultContainerModernClasses} envive-tw-bg-[var(--envive-colors-background-dark)]`,
-        [ChatHeaderVariant.DARK]: `${defaultContainerModernClasses} envive-tw-bg-[var(--envive-colors-background-light)]`,
+        [ChatHeaderVariant.LIGHT]: `${defaultContainerModernClasses} envive-tw-bg-background-dark`,
+        [ChatHeaderVariant.DARK]: `${defaultContainerModernClasses} envive-tw-bg-background-light`,
       },
       [Theme.MINIMAL]: {
         [ChatHeaderVariant.LIGHT]: defaultMinimalClasses,
@@ -49,31 +49,31 @@ const textClassesMap = (selected: boolean) => {
   if (selected) {
     return {
       [Theme.STANDARD]: {
-        [ChatHeaderVariant.LIGHT]: 'envive-tw-text-[var(--envive-colors-text-light)]',
-        [ChatHeaderVariant.DARK]: 'envive-tw-text-[var(--envive-colors-text-primary)]',
+        [ChatHeaderVariant.LIGHT]: 'envive-tw-text-text-light',
+        [ChatHeaderVariant.DARK]: 'envive-tw-text-text-primary',
       },
       [Theme.MODERN]: {
-        [ChatHeaderVariant.LIGHT]: `envive-tw-text-[var(--envive-colors-text-light)]`,
-        [ChatHeaderVariant.DARK]: `envive-tw-text-[var(--envive-colors-text-primary)]                                                                                                                                                        `,
+        [ChatHeaderVariant.LIGHT]: `envive-tw-text-text-light`,
+        [ChatHeaderVariant.DARK]: `envive-tw-text-text-primary`,
       },
       [Theme.MINIMAL]: {
-        [ChatHeaderVariant.LIGHT]: 'envive-tw-text-[var(--envive-colors-text-primary)]',
-        [ChatHeaderVariant.DARK]: 'envive-tw-text-[var(--envive-colors-text-light)]',
+        [ChatHeaderVariant.LIGHT]: 'envive-tw-text-text-primary',
+        [ChatHeaderVariant.DARK]: 'envive-tw-text-text-light',
       },
     };
   }
   return {
     [Theme.STANDARD]: {
-      [ChatHeaderVariant.LIGHT]: 'envive-tw-text-[var(--envive-colors-text-primary)]',
-      [ChatHeaderVariant.DARK]: 'envive-tw-text-[var(--envive-colors-text-light)]',
+      [ChatHeaderVariant.LIGHT]: 'envive-tw-text-text-primary',
+      [ChatHeaderVariant.DARK]: 'envive-tw-text-text-light',
     },
     [Theme.MODERN]: {
-      [ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-[var(--envive-colors-text-primary)]`,
-      [ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-[var(--envive-colors-text-primary)]`,
+      [ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-text-primary`,
+      [ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-text-primary`,
     },
     [Theme.MINIMAL]: {
-      [ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-[var(--envive-colors-text-primary)]`,
-      [ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-[var(--envive-colors-text-light)]`,
+      [ChatHeaderVariant.LIGHT]: `${opacity} envive-tw-text-text-primary`,
+      [ChatHeaderVariant.DARK]: `${opacity} envive-tw-text-text-light`,
     },
   };
 };

package/src/components/ChatHeader/hooks/useGetToggleProperties.ts

@@ -6,8 +6,8 @@ const defaulClasses =
 
 const containerClassesMap = {
   [Theme.STANDARD]: {
-    [ChatHeaderVariant.LIGHT]: `${defaulClasses} envive-tw-border-[var(--envive-colors-background-dark)]`,
-    [ChatHeaderVariant.DARK]: `${defaulClasses} envive-tw-border-[var(--envive-colors-background-light)]`,
+    [ChatHeaderVariant.LIGHT]: `${defaulClasses} envive-tw-border-background-dark`,
+    [ChatHeaderVariant.DARK]: `${defaulClasses} envive-tw-border-background-light`,
   },
 };
 

package/src/components/ChatHeader/types/index.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ColorNames } from 'src/models/colorsConfig';
+import { MotionValue } from 'framer-motion';
 import { Theme } from '../../../../tokens/theme/theme';
 
 export enum ChatHeaderVariant {
@@ -25,12 +26,14 @@ export interface ChatHeaderProps
   showHandle?: boolean;
   showMainContent?: boolean;
   handleState?: HandleState;
+  handleAnimationKey?: MotionValue;
 }
 
 export interface HandleProps {
   theme: Theme;
   variant: ChatHeaderVariant;
   state: HandleState;
+  animationKey?: MotionValue;
 }
 
 export interface LayoutProps {

package/src/components/ChatPreview/__tests__/ChatPreview.test.tsx

@@ -1,10 +1,19 @@
 import '@testing-library/jest-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { createElement } from 'react';
 import { ChatPreview } from '../ChatPreview';
 import { WidgetWrapperVariant } from '../../WidgetWrapper/types/types';
 import { Theme } from '../../Tokens';
 
+vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
+  return {
+    MarkdownProcessor: function MockMarkdownProcessor({ content }: { content: string }) {
+      return createElement('p', null, content);
+    },
+  };
+});
+
 describe('ChatPreview', () => {
   const defaultProps = {
     baseProps: {},
@@ -32,11 +41,11 @@ describe('ChatPreview', () => {
   });
 
   describe('Basic rendering', () => {
-    it('should render with default props', () => {
+    it('should render with default props', async () => {
       render(<ChatPreview {...defaultProps} />);
       expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
       expect(
-        screen.getByText('How can I help you find the perfect product today?'),
+        await screen.findByText('How can I help you find the perfect product today?'),
       ).toBeInTheDocument();
       expect(screen.getByText('What are the best products for gifting?')).toBeInTheDocument();
     });
@@ -86,10 +95,10 @@ describe('ChatPreview', () => {
   });
 
   describe('Content visibility', () => {
-    it('should render message text', () => {
+    it('should render message text', async () => {
       render(<ChatPreview {...defaultProps} />);
       expect(
-        screen.getByText('How can I help you find the perfect product today?'),
+        await screen.findByText('How can I help you find the perfect product today?'),
       ).toBeInTheDocument();
     });
 
@@ -281,7 +290,7 @@ describe('ChatPreview', () => {
   });
 
   describe('Edge cases', () => {
-    it('should render with empty promptButtonTexts array', () => {
+    it('should render with empty promptButtonTexts array', async () => {
       render(
         <ChatPreview
           {...defaultProps}
@@ -293,7 +302,7 @@ describe('ChatPreview', () => {
       );
       expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
       expect(
-        screen.getByText('How can I help you find the perfect product today?'),
+        await screen.findByText('How can I help you find the perfect product today?'),
       ).toBeInTheDocument();
     });
 
@@ -310,7 +319,7 @@ describe('ChatPreview', () => {
       expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
     });
 
-    it('should render with undefined optional props', () => {
+    it('should render with undefined optional props', async () => {
       render(
         <ChatPreview
           baseProps={{}}
@@ -324,7 +333,7 @@ describe('ChatPreview', () => {
         />,
       );
       expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
-      expect(screen.getByText('Test message')).toBeInTheDocument();
+      expect(await screen.findByText('Test message')).toBeInTheDocument();
       expect(screen.getByText('Button 1')).toBeInTheDocument();
     });
 

package/src/components/ChatPreview/components/Message.tsx

@@ -1,17 +1,23 @@
-import { MarkdownProcessor } from '../../MarkdownProcessor/MarkdownProcessor';
+import { Suspense, lazy } from 'react';
 import { TypographyColor, TypographyVariant } from '../../Typography/types';
 
+const MarkdownProcessor = lazy(async () => ({
+  default: (await import('../../MarkdownProcessor/MarkdownProcessor')).MarkdownProcessor,
+}));
+
 type MessageProps = {
   messageText: string;
 };
 
 export const Message = ({ messageText }: MessageProps) => {
   return (
-    <MarkdownProcessor
-      content={messageText}
-      clampParagraphs={4}
-      textColor={TypographyColor.TEXT_PRIMARY}
-      textVariant={TypographyVariant.B3_RG}
-    />
+    <Suspense>
+      <MarkdownProcessor
+        content={messageText}
+        clampParagraphs={4}
+        textColor={TypographyColor.TEXT_PRIMARY}
+        textVariant={TypographyVariant.B3_RG}
+      />
+    </Suspense>
   );
 };

package/src/components/ChatPreviewComparison/__tests__/ChatPreviewComparison.test.tsx

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { createElement } from 'react';
 import { ChatPreviewComparison } from '../ChatPreviewComparison';
 import { WidgetWrapperVariant } from '../../WidgetWrapper/types/types';
 import { Theme } from '../../Tokens';
@@ -22,6 +23,15 @@ vi.mock('src/components/utils/useGetContentSize', () => ({
   }),
 }));
 
+// Mock MarkdownProcessor so it renders synchronously (avoids Suspense/lazy in ChatPreviewComparison Message).
+vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
+  return {
+    MarkdownProcessor: function MockMarkdownProcessor({ content }: { content: string }) {
+      return createElement('p', null, content);
+    },
+  };
+});
+
 describe('ChatPreviewComparison', () => {
   const defaultProps = {
     baseProps: {},
@@ -55,11 +65,11 @@ describe('ChatPreviewComparison', () => {
   });
 
   describe('Basic rendering', () => {
-    it('should render with default props', () => {
+    it('should render with default props', async () => {
       render(<ChatPreviewComparison {...defaultProps} />);
       expect(screen.getByText('Compare these products')).toBeInTheDocument();
       expect(
-        screen.getByText(
+        await screen.findByText(
           'I can help you compare these two products side by side. Let me know what specific features, specifications, or details you would like to know more about.',
         ),
       ).toBeInTheDocument();
@@ -162,10 +172,10 @@ describe('ChatPreviewComparison', () => {
       expect(screen.getByText('Compare these products')).toBeInTheDocument();
     });
 
-    it('should render message text', () => {
+    it('should render message text', async () => {
       render(<ChatPreviewComparison {...defaultProps} />);
       expect(
-        screen.getByText(
+        await screen.findByText(
           'I can help you compare these two products side by side. Let me know what specific features, specifications, or details you would like to know more about.',
         ),
       ).toBeInTheDocument();
@@ -378,7 +388,7 @@ describe('ChatPreviewComparison', () => {
       expect(screen.getByText('Compare these products')).toBeInTheDocument();
     });
 
-    it('should render with undefined optional props', () => {
+    it('should render with undefined optional props', async () => {
       render(
         <ChatPreviewComparison
           baseProps={{}}
@@ -393,7 +403,7 @@ describe('ChatPreviewComparison', () => {
         />,
       );
       expect(screen.getByText('Compare these products')).toBeInTheDocument();
-      expect(screen.getByText('Test message')).toBeInTheDocument();
+      expect(await screen.findByText('Test message')).toBeInTheDocument();
       expect(screen.getByText('Button 1')).toBeInTheDocument();
     });
   });

package/src/components/ChatPreviewComparison/components/Message.tsx

@@ -1,8 +1,12 @@
+import { Suspense, lazy } from 'react';
 import { Theme } from 'src/components/Tokens';
 import { TypographyColor, TypographyVariant } from '../../Typography';
 import { resolveTheme } from '../../utils/resolveTheme';
 import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
-import { MarkdownProcessor } from '../../MarkdownProcessor/MarkdownProcessor';
+
+const MarkdownProcessor = lazy(async () => ({
+  default: (await import('../../MarkdownProcessor/MarkdownProcessor')).MarkdownProcessor,
+}));
 
 type MessageProps = {
   messageText: string;
@@ -18,11 +22,13 @@ export const Message = ({ messageText, theme = Theme.GLOBAL_CUSTOM }: MessagePro
   const isStandardAndMobile = isStandardTheme && isMobile;
 
   return (
-    <MarkdownProcessor
-      content={messageText}
-      clampParagraphs={isStandardAndMobile ? 7 : 3}
-      textColor={TypographyColor.TEXT_PRIMARY}
-      textVariant={TypographyVariant.B3_RG}
-    />
+    <Suspense>
+      <MarkdownProcessor
+        content={messageText}
+        clampParagraphs={isStandardAndMobile ? 7 : 3}
+        textColor={TypographyColor.TEXT_PRIMARY}
+        textVariant={TypographyVariant.B3_RG}
+      />
+    </Suspense>
   );
 };

package/src/components/DesignTokens/components/Typography.tsx

@@ -112,7 +112,7 @@ export const Typography = () => {
                     className={classNames(
                       'envive-tw-flex-1',
                       value.className,
-                      `envive-tw-text-[var(--envive-colors-text-primary)]`,
+                      `envive-tw-text-text-primary`,
                     )}
                   >
                     Envive Design System

package/src/components/Disclaimer/Disclaimer.tsx

@@ -0,0 +1,27 @@
+import { DisclaimerProps } from './types/types';
+import { Theme } from '../../../tokens/theme/theme';
+import { DisclaimerComponents } from './components';
+
+/**
+ * The Welcome Message that appears at the top of our floating chat.
+ * It displays the sparkle icon, along with a title and some text.
+ * Supports three visual themes: Standard, Modern, and Minimal.
+ */
+export const Disclaimer = ({
+  disclaimerMarkdown,
+  theme = Theme.GLOBAL_CUSTOM,
+  id,
+  testId,
+  className,
+  style,
+}: DisclaimerProps): JSX.Element => {
+  return (
+    <DisclaimerComponents.Container
+      markdownNode={<DisclaimerComponents.DisclaimerContent content={disclaimerMarkdown} />}
+      id={id}
+      testId={testId}
+      className={className}
+      style={style}
+    />
+  );
+};

package/src/components/Disclaimer/components/Container.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import { Stack } from '../../Stack';
+import { Container as ContainerComponent } from '../../Container';
+
+type ContainerProps = {
+  markdownNode: React.ReactNode;
+  id?: string;
+  testId?: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const Container = ({
+  markdownNode,
+  id,
+  testId,
+  className,
+  style,
+}: ContainerProps): JSX.Element => {
+  return (
+    <ContainerComponent
+      id={id}
+      testId={testId}
+      style={style}
+      className={classNames(className, 'envive-tw-px-4 envive-tw-py-6')}
+    >
+      <Stack
+        direction="column"
+        className={classNames(className)}
+      >
+        {markdownNode}
+      </Stack>
+    </ContainerComponent>
+  );
+};

package/src/components/Disclaimer/components/DisclaimerContent.tsx

@@ -0,0 +1,18 @@
+import { TypographyColor, TypographyVariant } from 'src/components/Typography';
+import { MarkdownProcessor } from '../../MarkdownProcessor/MarkdownProcessor';
+
+type DisclaimerContentProps = {
+  content: string;
+};
+
+export const DisclaimerContent = ({ content }: DisclaimerContentProps): React.ReactNode => {
+  return (
+    <MarkdownProcessor
+      content={content}
+      textColor={TypographyColor.TEXT_SECONDARY}
+      subTextColor={TypographyColor.TEXT_SECONDARY}
+      textVariant={TypographyVariant.B3_RG}
+      subTextVariant={TypographyVariant.B3_RG}
+    />
+  );
+};

package/src/components/Disclaimer/components/index.ts

@@ -0,0 +1,7 @@
+import { Container } from './Container';
+import { DisclaimerContent } from './DisclaimerContent';
+
+export const DisclaimerComponents = {
+  Container,
+  DisclaimerContent,
+};

package/src/components/Disclaimer/index.ts

@@ -0,0 +1 @@
+export { Disclaimer } from './Disclaimer';

package/src/components/Disclaimer/types/types.ts

@@ -0,0 +1,27 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
+export type DisclaimerProps = {
+  /**
+   * The markdown to be ingested by the MarkdownProcessor and displayed
+   */
+  disclaimerMarkdown: string;
+  /**
+   * Visual theme of the text field.
+   * @default Theme.GLOBAL_CUSTOM (uses CSS variable --envive-global-custom-theme)
+   */
+  theme?: Theme;
+  ariaLabel?: string;
+  id?: string;
+  /**
+   * Adds a `data-testid` attribute for testing utilities.
+   */
+  testId?: string;
+  /**
+   * Additional class names appended to the computed classes.
+   */
+  className?: string;
+  /**
+   * Inline styles forwarded to the rendered element.
+   */
+  style?: React.CSSProperties;
+};

package/src/components/FloatingButton/FloatingButton.tsx

@@ -15,6 +15,7 @@ export const FloatingButton = ({
   hasInteractionHappened,
   onClick,
   ariaLabel,
+  previewMode = false,
 }: FloatingButtonProps) => {
   const button = (
     <FloatingButtonComponents.Button
@@ -42,6 +43,7 @@ export const FloatingButton = ({
       hasInteractionHappened={hasInteractionHappened}
       className={className}
       style={style}
+      previewMode={previewMode}
     >
       {variant === FloatingButtonVariant.ATTACHED ? (
         <FloatingButtonComponents.Wrapper location={location}>

package/src/components/FloatingButton/components/Container.tsx

@@ -12,6 +12,7 @@ export type ContainerProps = {
   testId?: string;
   className?: string;
   style?: React.CSSProperties;
+  previewMode?: boolean;
 };
 
 export const Container = ({
@@ -24,12 +25,14 @@ export const Container = ({
   testId,
   className = '',
   style,
+  previewMode = false,
 }: ContainerProps) => {
   const { positionClasses, locationClasses, zIndexClass, shouldRender } = useGetContainerProperties(
     location,
     show,
     variant,
     hasInteractionHappened,
+    previewMode,
   );
 
   if (!shouldRender) {

package/src/components/FloatingButton/hooks/useGetButtonProperties.ts

@@ -1,4 +1,4 @@
-import { ColorNames, enviveColorVar } from 'src/models/colorsConfig';
+import { extractColorNameFromCssVar } from 'tokens/utils';
 import { FloatingButtonMode, FloatingButtonProps, FloatingButtonVariant } from '../types/types';
 
 /**
@@ -14,8 +14,9 @@ export const useGetButtonProperties = (
       ? 'envive-tw-w-[64px] envive-tw-h-[64px]'
       : 'envive-tw-w-[44px] envive-tw-h-[44px]';
 
-  const customBackgroundColor = enviveColorVar(backgroundColor as ColorNames);
-  const customBackgroundColorClass = `envive-tw-bg-[${customBackgroundColor}]`;
+  const colorName = extractColorNameFromCssVar(backgroundColor);
+
+  const customBackgroundColorClass = `envive-tw-bg-${colorName}`;
 
   const defaultBackgroundColorClass =
     mode === FloatingButtonMode.LIGHT

package/src/components/FloatingButton/hooks/useGetContainerProperties.ts

@@ -8,8 +8,9 @@ export const useGetContainerProperties = (
   show: FloatingButtonShow = FloatingButtonShow.ALWAYS,
   variant: FloatingButtonVariant = FloatingButtonVariant.ATTACHED,
   hasInteractionHappened: boolean = false,
+  previewMode: boolean = false,
 ) => {
-  const positionClasses = 'envive-tw-fixed';
+  const positionClasses = previewMode ? 'envive-tw-absolute' : 'envive-tw-fixed';
 
   let locationClasses = '';
 

package/src/components/FloatingButton/types/types.ts

@@ -31,10 +31,10 @@ export enum FloatingButtonShow {
  * Determines the position of the button on the screen.
  */
 export enum FloatingButtonLocation {
-  MIDDLE_RIGHT = 'middleRight',
-  BOTTOM_RIGHT = 'bottomRight',
-  MIDDLE_LEFT = 'middleLeft',
-  BOTTOM_LEFT = 'bottomLeft',
+  MIDDLE_RIGHT = 'middle-right',
+  BOTTOM_RIGHT = 'bottom-right',
+  MIDDLE_LEFT = 'middle-left',
+  BOTTOM_LEFT = 'bottom-left',
 }
 
 export type FloatingButtonBackgroundColor = Extract<
@@ -114,4 +114,9 @@ export type FloatingButtonProps = {
    * Accessible label for the button, used by screen readers.
    */
   ariaLabel: string;
+
+  /**
+   * Preview mode: uses absolute positioning instead of fixed
+   */
+  previewMode?: boolean;
 };