@envive-ai/react-toolkit-v3 0.3.7 → 0.3.9

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

@@ -13,48 +13,48 @@ const barDimensions = 'envive-tw-w-[22px] envive-tw-h-[4px]';
 
 const containerClassesMap = {
   [Theme.STANDARD]: {
-    [ChatHeaderVariant.LIGHT]: `${defaultStandard} envive-tw-bg-[var(--envive-colors-background-tertiary)]`,
-    [ChatHeaderVariant.DARK]: `${defaultStandard} envive-tw-bg-[var(--envive-colors-background-primary)]`,
+    [ChatHeaderVariant.LIGHT]: `${defaultStandard} envive-tw-bg-background-tertiary`,
+    [ChatHeaderVariant.DARK]: `${defaultStandard} envive-tw-bg-background-primary`,
   },
   [Theme.MODERN]: {
     [ChatHeaderVariant.LIGHT]: `${defaultModern}`,
-    [ChatHeaderVariant.DARK]: `${defaultModern} envive-tw-bg-[var(--envive-colors-background-dark)]`,
+    [ChatHeaderVariant.DARK]: `${defaultModern} envive-tw-bg-background-dark`,
   },
   [Theme.MINIMAL]: {
     [ChatHeaderVariant.LIGHT]: `${defaultMinimal}`,
-    [ChatHeaderVariant.DARK]: `${defaultMinimal} envive-tw-bg-[var(--envive-colors-background-dark)]`,
+    [ChatHeaderVariant.DARK]: `${defaultMinimal} envive-tw-bg-background-dark`,
   },
 };
 
 const chev = {
   [Theme.STANDARD]: {
     [ChatHeaderVariant.LIGHT]: {
-      leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`,
-      rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`,
+      leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-dark`,
+      rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-dark`,
     },
     [ChatHeaderVariant.DARK]: {
-      leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`,
-      rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`,
+      leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-light`,
+      rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-light`,
     },
   },
   [Theme.MODERN]: {
     [ChatHeaderVariant.LIGHT]: {
-      leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`,
-      rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-dark)]`,
+      leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-dark`,
+      rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-dark`,
     },
     [ChatHeaderVariant.DARK]: {
-      leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`,
-      rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-[var(--envive-colors-background-light)]`,
+      leftBar: `${barDimensions} envive-tw-rounded-l-[4px] envive-tw-bg-background-light`,
+      rightBar: `${barDimensions} envive-tw-rounded-r-[4px] envive-tw-bg-background-light`,
     },
   },
   [Theme.MINIMAL]: {
     [ChatHeaderVariant.LIGHT]: {
-      leftBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-dark)]`,
-      rightBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-dark)]`,
+      leftBar: `${barDimensions} envive-tw-bg-background-dark`,
+      rightBar: `${barDimensions} envive-tw-bg-background-dark`,
     },
     [ChatHeaderVariant.DARK]: {
-      leftBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-light)]`,
-      rightBar: `${barDimensions} envive-tw-bg-[var(--envive-colors-background-light)]`,
+      leftBar: `${barDimensions} envive-tw-bg-background-light`,
+      rightBar: `${barDimensions} envive-tw-bg-background-light`,
     },
   },
 };

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

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
+import { extractColorNameFromCssVar } from 'tokens/utils';
 import { Theme } from '../../../../tokens/theme/theme';
 import { ChatHeaderVariant } from '../types';
-import { ColorNames, enviveColorVar } from '../../../models/colorsConfig';
+import { ColorNames } from '../../../models/colorsConfig';
 
 export const useGetLayoutProperties = (
   variant: ChatHeaderVariant,
@@ -14,7 +15,7 @@ export const useGetLayoutProperties = (
   const isModern = theme === Theme.MODERN;
   const isMinimal = theme === Theme.MINIMAL;
 
-  const enviveHeaderBgColor = enviveColorVar(headerBgColor);
+  const colorName = extractColorNameFromCssVar(headerBgColor);
 
   const containerClasses = classNames({
     'envive-tw-flex': true,
@@ -24,14 +25,11 @@ export const useGetLayoutProperties = (
     'envive-tw-h-[52px]': isStandard,
     'envive-tw-h-[56px]': isModern,
     'envive-tw-h-[40px]': isMinimal,
-    'envive-tw-bg-[var(--envive-colors-background-light)]':
-      isLight && !isStandard && !headerBgColor,
-    'envive-tw-bg-[var(--envive-colors-background-dark)]': isDark && !isStandard && !headerBgColor,
-    'envive-tw-bg-[var(--envive-colors-background-tertiary)]':
-      isLight && isStandard && !headerBgColor,
-    'envive-tw-bg-[var(--envive-colors-background-primary)]':
-      isDark && isStandard && !headerBgColor,
-    [`envive-tw-bg-[${enviveHeaderBgColor}]`]: !!headerBgColor,
+    'envive-tw-bg-background-light': isLight && !isStandard && !headerBgColor,
+    'envive-tw-bg-background-dark': isDark && !isStandard && !headerBgColor,
+    'envive-tw-bg-background-tertiary': isLight && isStandard && !headerBgColor,
+    'envive-tw-bg-background-primary': isDark && isStandard && !headerBgColor,
+    [`envive-tw-bg-${colorName}`]: !!headerBgColor,
   });
 
   return {

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/ChatPreview/ChatPreview.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useMemo } from 'react';
 import { WidgetWrapperVariant } from '../WidgetWrapper/types/types';
 import { Theme } from '../Tokens';
 import { resolveTheme } from '../utils/resolveTheme';
@@ -24,11 +25,27 @@ export const ChatPreview = ({
     hexCardColor,
   } = widgetStyleProps ?? {};
 
-  const { messageText, promptButtonTexts, textFieldPlaceholderText, logoSrc, titleLabel } =
+  const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel } =
     widgetContentProps ?? {};
 
   const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
 
+  const suggestionTextMap = useMemo(() => {
+    return Object.fromEntries(
+      promptButtons?.map(suggestion => [suggestion.content, suggestion]) ?? [],
+    );
+  }, [promptButtons]);
+  const promptButtonTexts = useMemo(() => {
+    return Object.keys(suggestionTextMap);
+  }, [suggestionTextMap]);
+
+  const handleSuggestionButtonClick = useCallback(
+    (text: string) => {
+      handlePromptButtonClick?.(suggestionTextMap[text]);
+    },
+    [handlePromptButtonClick, suggestionTextMap],
+  );
+
   const finalTheme = resolveTheme(theme);
 
   const message = <ChatPreviewComponents.Message messageText={messageText ?? ''} />;
@@ -38,7 +55,7 @@ export const ChatPreview = ({
       promptButtonTexts={promptButtonTexts ?? []}
       promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
       promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
-      handleButtonClick={handlePromptButtonClick}
+      handleButtonClick={handleSuggestionButtonClick}
     />
   );
 
@@ -46,7 +63,7 @@ export const ChatPreview = ({
     <WidgetTextField
       theme={finalTheme}
       placeholder={textFieldPlaceholderText ?? ''}
-      onClick={() => handleTextFieldClick?.(textFieldPlaceholderText)}
+      onClick={() => handleTextFieldClick?.()}
     />
   );
 

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/ChatPreview/types/types.ts

@@ -1,3 +1,4 @@
+import { Suggestion } from '@envive-ai/react-hooks/application/models';
 import { Theme } from '../../Tokens';
 import { WidgetWrapperVariant } from '../../WidgetWrapper';
 
@@ -56,9 +57,9 @@ export type WidgetContentProps = {
   messageText?: string;
 
   /**
-   * Array of text labels for the prompt buttons.
+   * Array of Suggestions for the prompt buttons.
    */
-  promptButtonTexts?: string[];
+  promptButtons?: Suggestion[];
 
   /**
    * Placeholder text for the text field input.
@@ -128,14 +129,14 @@ export type WidgetEventProps = {
    *
    * @param text - The text label of the clicked prompt button
    */
-  handlePromptButtonClick?: (text: string) => void;
+  handlePromptButtonClick?: (suggestion: Suggestion) => void;
 
   /**
    * Callback function invoked when the text field is clicked.
    *
    * @param text - The placeholder text of the text field
    */
-  handleTextFieldClick?: (text: string) => void;
+  handleTextFieldClick?: () => void;
 };
 
 /**

package/src/components/ChatPreviewComparison/ChatPreviewComparison.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useMemo } from 'react';
 import { WidgetWrapperVariant } from '../WidgetWrapper/types/types';
 import { Theme } from '../Tokens';
 import { resolveTheme } from '../utils/resolveTheme';
@@ -28,7 +29,7 @@ export const ChatPreviewComparison = ({
   const {
     headlineText,
     messageText,
-    promptButtonTexts,
+    promptButtons,
     textFieldPlaceholderText,
     images,
     logoSrc,
@@ -39,6 +40,22 @@ export const ChatPreviewComparison = ({
 
   const finalTheme = resolveTheme(theme);
 
+  const suggestionTextMap = useMemo(() => {
+    return Object.fromEntries(
+      promptButtons?.map(suggestion => [suggestion.content, suggestion]) ?? [],
+    );
+  }, [promptButtons]);
+  const promptButtonTexts = useMemo(() => {
+    return Object.keys(suggestionTextMap);
+  }, [suggestionTextMap]);
+
+  const handleSuggestionButtonClick = useCallback(
+    (text: string) => {
+      handlePromptButtonClick?.(suggestionTextMap[text]);
+    },
+    [handlePromptButtonClick, suggestionTextMap],
+  );
+
   const headline = (
     <ChatPreviewComparisonComponents.Headline
       headlineText={headlineText ?? ''}
@@ -58,7 +75,7 @@ export const ChatPreviewComparison = ({
       promptButtonTexts={promptButtonTexts ?? []}
       promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
       promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
-      handleButtonClick={handlePromptButtonClick}
+      handleButtonClick={handleSuggestionButtonClick}
     />
   );
 
@@ -66,7 +83,7 @@ export const ChatPreviewComparison = ({
     <WidgetTextField
       theme={finalTheme}
       placeholder={textFieldPlaceholderText ?? ''}
-      onClick={() => handleTextFieldClick?.(textFieldPlaceholderText)}
+      onClick={() => handleTextFieldClick?.()}
     />
   );
 

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/ChatPreviewComparison/types/types.ts

@@ -1,3 +1,4 @@
+import { Suggestion } from '@envive-ai/react-hooks/application/models';
 import { ImageGalleryImage } from '../../ImageGallery/types/types';
 import { Theme } from '../../Tokens';
 import { WidgetWrapperVariant } from '../../WidgetWrapper';
@@ -59,7 +60,7 @@ export type WidgetContentProps = {
   /**
    * Array of text labels for the prompt buttons.
    */
-  promptButtonTexts?: string[];
+  promptButtons?: Suggestion[];
 
   /**
    * Placeholder text for the text field input.
@@ -134,14 +135,13 @@ export type WidgetEventProps = {
    *
    * @param text - The text label of the clicked prompt button
    */
-  handlePromptButtonClick?: (text: string) => void;
+  handlePromptButtonClick?: (suggestion: Suggestion) => void;
 
   /**
    * Callback function invoked when the text field is clicked.
    *
-   * @param text - The placeholder text of the text field
    */
-  handleTextFieldClick?: (text: string) => void;
+  handleTextFieldClick?: () => void;
 };
 
 /**

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}
+    />
+  );
+};