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

package/dist/ChatHeader/hooks/useGetToggleOptionProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { TypographyVariant } from "../../Typography/types/index.js";
 import "../../Typography/index.js";
 import { ChatHeaderVariant } from "../types/index.js";
@@ -11,12 +11,12 @@ const opacity = "envive-tw-opacity-50";
 const optionContainerClassesMap = (selected) => {
 	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,
@@ -41,30 +41,30 @@ const optionContainerClassesMap = (selected) => {
 const textClassesMap = (selected) => {
 	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/dist/ChatHeader/hooks/useGetToggleProperties.cjs

@@ -1,11 +1,11 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_index = require('../types/index.cjs');
 
 //#region src/components/ChatHeader/hooks/useGetToggleProperties.ts
 const defaulClasses = "envive-tw-p-[1px] envive-tw-border envive-tw-rounded-[var(--envive-global-custom-border-radius)]";
 const containerClassesMap = { [require_theme.Theme.STANDARD]: {
-	[require_index.ChatHeaderVariant.LIGHT]: `${defaulClasses} envive-tw-border-[var(--envive-colors-background-dark)]`,
-	[require_index.ChatHeaderVariant.DARK]: `${defaulClasses} envive-tw-border-[var(--envive-colors-background-light)]`
+	[require_index.ChatHeaderVariant.LIGHT]: `${defaulClasses} envive-tw-border-background-dark`,
+	[require_index.ChatHeaderVariant.DARK]: `${defaulClasses} envive-tw-border-background-light`
 } };
 const useGetToggleProperties = (theme, variant) => {
 	return {

package/dist/ChatHeader/hooks/useGetToggleProperties.js

@@ -1,11 +1,11 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ChatHeaderVariant } from "../types/index.js";
 
 //#region src/components/ChatHeader/hooks/useGetToggleProperties.ts
 const defaulClasses = "envive-tw-p-[1px] envive-tw-border envive-tw-rounded-[var(--envive-global-custom-border-radius)]";
 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`
 } };
 const useGetToggleProperties = (theme, variant) => {
 	return {

package/dist/ChatHeader/hooks/useToggleLogoSelector.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_index = require('../types/index.cjs');
 
 //#region src/components/ChatHeader/hooks/useToggleLogoSelector.ts

package/dist/ChatHeader/hooks/useToggleLogoSelector.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ChatHeaderVariant } from "../types/index.js";
 
 //#region src/components/ChatHeader/hooks/useToggleLogoSelector.ts

package/dist/ChatHeader/types/index.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from "../../tokens/theme/theme.js";
-import { ColorNames } from "../../src/models/colorsConfig.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { ColorNames } from "../../packages/components-v3/src/models/colorsConfig.js";
 import React from "react";
 import { MotionValue } from "framer-motion";
 

package/dist/ChatPreview/ChatPreview.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../tokens/theme/theme.cjs');
-const require_resolveTheme = require('../utils/resolveTheme.cjs');
+const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
 require('../Tokens/index.cjs');
+const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_PromptButton_types_index = require('../PromptButton/types/index.cjs');
 require('../PromptButton/index.cjs');
 const require_PromptCarousel_types_types = require('../PromptCarousel/types/types.cjs');
@@ -13,25 +13,35 @@ const require_WidgetTextField = require('../WidgetTextField/WidgetTextField.cjs'
 require('../WidgetTextField/index.cjs');
 const require_WidgetWrapperWithTitle = require('../WidgetWrapperWithTitle/WidgetWrapperWithTitle.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/components/ChatPreview/ChatPreview.tsx
 const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = require_theme.Theme.GLOBAL_CUSTOM, variant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
-	const { messageText, promptButtonTexts, textFieldPlaceholderText, logoSrc, titleLabel } = widgetContentProps ?? {};
+	const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel } = widgetContentProps ?? {};
 	const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const suggestionTextMap = (0, react.useMemo)(() => {
+		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
+	}, [promptButtons]);
+	const promptButtonTexts = (0, react.useMemo)(() => {
+		return Object.keys(suggestionTextMap);
+	}, [suggestionTextMap]);
+	const handleSuggestionButtonClick = (0, react.useCallback)((text) => {
+		handlePromptButtonClick?.(suggestionTextMap[text]);
+	}, [handlePromptButtonClick, suggestionTextMap]);
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const message = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ChatPreviewComponents.Message, { messageText: messageText ?? "" });
 	const promptCarousel = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PromptCarousel.PromptCarousel, {
 		promptButtonTexts: promptButtonTexts ?? [],
 		promptButtonType: require_PromptButton_types_index.PromptButtonVariant.SUGGESTED_RESPONSE,
 		promptCarouselRows: require_PromptCarousel_types_types.PromptCarouselRows.ALWAYS_ONE,
-		handleButtonClick: handlePromptButtonClick
+		handleButtonClick: handleSuggestionButtonClick
 	});
 	const widgetTextField = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
 		theme: finalTheme,
 		placeholder: textFieldPlaceholderText ?? "",
-		onClick: () => handleTextFieldClick?.(textFieldPlaceholderText)
+		onClick: () => handleTextFieldClick?.()
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetWrapperWithTitle.WidgetWrapperWithTitle, {
 		id,

package/dist/ChatPreview/ChatPreview.d.cts

@@ -1,5 +1,5 @@
 import { ChatPreviewProps } from "./types/types.cjs";
-import * as react_jsx_runtime33 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 
 //#region src/components/ChatPreview/ChatPreview.d.ts
 declare const ChatPreview: ({
@@ -7,6 +7,6 @@ declare const ChatPreview: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: ChatPreviewProps) => react_jsx_runtime33.JSX.Element;
+}: ChatPreviewProps) => react_jsx_runtime28.JSX.Element;
 //#endregion
 export { ChatPreview };

package/dist/ChatPreview/ChatPreview.d.ts

@@ -1,5 +1,5 @@
 import { ChatPreviewProps } from "./types/types.js";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/ChatPreview/ChatPreview.d.ts
 declare const ChatPreview: ({
@@ -7,6 +7,6 @@ declare const ChatPreview: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: ChatPreviewProps) => react_jsx_runtime27.JSX.Element;
+}: ChatPreviewProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { ChatPreview };

package/dist/ChatPreview/ChatPreview.js

@@ -1,6 +1,6 @@
-import { Theme } from "../tokens/theme/theme.js";
-import { resolveTheme } from "../utils/resolveTheme.js";
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import "../Tokens/index.js";
+import { resolveTheme } from "../utils/resolveTheme.js";
 import { PromptButtonVariant } from "../PromptButton/types/index.js";
 import "../PromptButton/index.js";
 import { PromptCarouselRows } from "../PromptCarousel/types/types.js";
@@ -12,25 +12,35 @@ import { WidgetTextField } from "../WidgetTextField/WidgetTextField.js";
 import "../WidgetTextField/index.js";
 import { WidgetWrapperWithTitle } from "../WidgetWrapperWithTitle/WidgetWrapperWithTitle.js";
 import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
 
 //#region src/components/ChatPreview/ChatPreview.tsx
 const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = Theme.GLOBAL_CUSTOM, variant = WidgetWrapperVariant.CARD_WITH_BORDER, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
-	const { messageText, promptButtonTexts, textFieldPlaceholderText, logoSrc, titleLabel } = widgetContentProps ?? {};
+	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) => {
+		handlePromptButtonClick?.(suggestionTextMap[text]);
+	}, [handlePromptButtonClick, suggestionTextMap]);
 	const finalTheme = resolveTheme(theme);
 	const message = /* @__PURE__ */ jsx(ChatPreviewComponents.Message, { messageText: messageText ?? "" });
 	const promptCarousel = /* @__PURE__ */ jsx(PromptCarousel, {
 		promptButtonTexts: promptButtonTexts ?? [],
 		promptButtonType: PromptButtonVariant.SUGGESTED_RESPONSE,
 		promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
-		handleButtonClick: handlePromptButtonClick
+		handleButtonClick: handleSuggestionButtonClick
 	});
 	const widgetTextField = /* @__PURE__ */ jsx(WidgetTextField, {
 		theme: finalTheme,
 		placeholder: textFieldPlaceholderText ?? "",
-		onClick: () => handleTextFieldClick?.(textFieldPlaceholderText)
+		onClick: () => handleTextFieldClick?.()
 	});
 	return /* @__PURE__ */ jsx(WidgetWrapperWithTitle, {
 		id,

package/dist/ChatPreview/components/Message.cjs

@@ -1,16 +1,17 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_index = require('../../Typography/types/index.cjs');
-const require_MarkdownProcessor = require('../../MarkdownProcessor/MarkdownProcessor.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/components/ChatPreview/components/Message.tsx
+const MarkdownProcessor = (0, react.lazy)(async () => ({ default: (await Promise.resolve().then(() => require("../../MarkdownProcessor/MarkdownProcessor.cjs"))).MarkdownProcessor }));
 const Message = ({ messageText }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownProcessor.MarkdownProcessor, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownProcessor, {
 		content: messageText,
 		clampParagraphs: 4,
 		textColor: require_index.TypographyColor.TEXT_PRIMARY,
 		textVariant: require_index.TypographyVariant.B3_RG
-	});
+	}) });
 };
 
 //#endregion

package/dist/ChatPreview/components/Message.js

@@ -1,15 +1,16 @@
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
-import { MarkdownProcessor } from "../../MarkdownProcessor/MarkdownProcessor.js";
 import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
 
 //#region src/components/ChatPreview/components/Message.tsx
+const MarkdownProcessor = lazy(async () => ({ default: (await import("../../MarkdownProcessor/MarkdownProcessor.js")).MarkdownProcessor }));
 const Message = ({ messageText }) => {
-	return /* @__PURE__ */ jsx(MarkdownProcessor, {
+	return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(MarkdownProcessor, {
 		content: messageText,
 		clampParagraphs: 4,
 		textColor: TypographyColor.TEXT_PRIMARY,
 		textVariant: TypographyVariant.B3_RG
-	});
+	}) });
 };
 
 //#endregion

package/dist/ChatPreview/types/types.d.cts

@@ -1,5 +1,6 @@
 import { Theme } from "../../tokens/theme/theme.cjs";
 import { WidgetWrapperVariant } from "../../WidgetWrapper/types/types.cjs";
+import { Suggestion } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/ChatPreview/types/types.d.ts
 
@@ -46,9 +47,9 @@ 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.
    * Displayed when the text field is visible.
@@ -110,13 +111,13 @@ 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;
 };
 /**
  * Props for the ChatPreviewComparison component.

package/dist/ChatPreview/types/types.d.ts

@@ -1,5 +1,6 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { WidgetWrapperVariant } from "../../WidgetWrapper/types/types.js";
+import { Suggestion } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/ChatPreview/types/types.d.ts
 
@@ -46,9 +47,9 @@ 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.
    * Displayed when the text field is visible.
@@ -110,13 +111,13 @@ 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;
 };
 /**
  * Props for the ChatPreviewComparison component.

package/dist/ChatPreviewComparison/ChatPreviewComparison.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../tokens/theme/theme.cjs');
-const require_resolveTheme = require('../utils/resolveTheme.cjs');
+const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
 require('../Tokens/index.cjs');
+const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_PromptButton_types_index = require('../PromptButton/types/index.cjs');
 require('../PromptButton/index.cjs');
 const require_PromptCarousel_types_types = require('../PromptCarousel/types/types.cjs');
@@ -13,14 +13,24 @@ require('../WidgetTextField/index.cjs');
 const require_WidgetWrapperWithTitle = require('../WidgetWrapperWithTitle/WidgetWrapperWithTitle.cjs');
 const require_index = require('./components/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/components/ChatPreviewComparison/ChatPreviewComparison.tsx
 const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = require_theme.Theme.GLOBAL_CUSTOM, variant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, hideImage, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
-	const { headlineText, messageText, promptButtonTexts, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
+	const { headlineText, messageText, promptButtons, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
 	const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
+	const suggestionTextMap = (0, react.useMemo)(() => {
+		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
+	}, [promptButtons]);
+	const promptButtonTexts = (0, react.useMemo)(() => {
+		return Object.keys(suggestionTextMap);
+	}, [suggestionTextMap]);
+	const handleSuggestionButtonClick = (0, react.useCallback)((text) => {
+		handlePromptButtonClick?.(suggestionTextMap[text]);
+	}, [handlePromptButtonClick, suggestionTextMap]);
 	const headline = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ChatPreviewComparisonComponents.Headline, {
 		headlineText: headlineText ?? "",
 		theme: finalTheme
@@ -33,12 +43,12 @@ const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps
 		promptButtonTexts: promptButtonTexts ?? [],
 		promptButtonType: require_PromptButton_types_index.PromptButtonVariant.SUGGESTED_RESPONSE,
 		promptCarouselRows: require_PromptCarousel_types_types.PromptCarouselRows.ALWAYS_ONE,
-		handleButtonClick: handlePromptButtonClick
+		handleButtonClick: handleSuggestionButtonClick
 	});
 	const widgetTextField = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
 		theme: finalTheme,
 		placeholder: textFieldPlaceholderText ?? "",
-		onClick: () => handleTextFieldClick?.(textFieldPlaceholderText)
+		onClick: () => handleTextFieldClick?.()
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetWrapperWithTitle.WidgetWrapperWithTitle, {
 		id,

package/dist/ChatPreviewComparison/ChatPreviewComparison.d.cts

@@ -1,5 +1,5 @@
 import { ChatPreviewComparisonProps } from "./types/types.cjs";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewComparison/ChatPreviewComparison.d.ts
 declare const ChatPreviewComparison: ({
@@ -7,6 +7,6 @@ declare const ChatPreviewComparison: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: ChatPreviewComparisonProps) => react_jsx_runtime27.JSX.Element;
+}: ChatPreviewComparisonProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { ChatPreviewComparison };

package/dist/ChatPreviewComparison/ChatPreviewComparison.js

@@ -1,6 +1,6 @@
-import { Theme } from "../tokens/theme/theme.js";
-import { resolveTheme } from "../utils/resolveTheme.js";
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import "../Tokens/index.js";
+import { resolveTheme } from "../utils/resolveTheme.js";
 import { PromptButtonVariant } from "../PromptButton/types/index.js";
 import "../PromptButton/index.js";
 import { PromptCarouselRows } from "../PromptCarousel/types/types.js";
@@ -12,14 +12,24 @@ import "../WidgetTextField/index.js";
 import { WidgetWrapperWithTitle } from "../WidgetWrapperWithTitle/WidgetWrapperWithTitle.js";
 import { ChatPreviewComparisonComponents } from "./components/index.js";
 import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
 
 //#region src/components/ChatPreviewComparison/ChatPreviewComparison.tsx
 const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = Theme.GLOBAL_CUSTOM, variant = WidgetWrapperVariant.CARD_WITH_BORDER, hideImage, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
-	const { headlineText, messageText, promptButtonTexts, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
+	const { headlineText, messageText, promptButtons, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
 	const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
 	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) => {
+		handlePromptButtonClick?.(suggestionTextMap[text]);
+	}, [handlePromptButtonClick, suggestionTextMap]);
 	const headline = /* @__PURE__ */ jsx(ChatPreviewComparisonComponents.Headline, {
 		headlineText: headlineText ?? "",
 		theme: finalTheme
@@ -32,12 +42,12 @@ const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps
 		promptButtonTexts: promptButtonTexts ?? [],
 		promptButtonType: PromptButtonVariant.SUGGESTED_RESPONSE,
 		promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
-		handleButtonClick: handlePromptButtonClick
+		handleButtonClick: handleSuggestionButtonClick
 	});
 	const widgetTextField = /* @__PURE__ */ jsx(WidgetTextField, {
 		theme: finalTheme,
 		placeholder: textFieldPlaceholderText ?? "",
-		onClick: () => handleTextFieldClick?.(textFieldPlaceholderText)
+		onClick: () => handleTextFieldClick?.()
 	});
 	return /* @__PURE__ */ jsx(WidgetWrapperWithTitle, {
 		id,

package/dist/ChatPreviewComparison/components/Headline.cjs

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
+require('../../Tokens/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-require('../../Tokens/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ChatPreviewComparison/components/Headline.tsx

package/dist/ChatPreviewComparison/components/Headline.js

@@ -1,9 +1,9 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import "../../Tokens/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
-import "../../Tokens/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewComparison/components/Headline.tsx

package/dist/ChatPreviewComparison/components/Layout.cjs

@@ -1,14 +1,14 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_utils = require('../../DesignTokens/components/utils.cjs');
-const require_aspectRatio = require('../../tokens/aspectRatio/aspectRatio.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
-const require_breakpoints = require('../../tokens/breakpoints/breakpoints.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
+const require_aspectRatio = require('../../packages/components-v3/tokens/aspectRatio/aspectRatio.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
+const require_breakpoints = require('../../packages/components-v3/tokens/breakpoints/breakpoints.cjs');
+require('../../Tokens/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_Container = require('../../Container/Container.cjs');
 require('../../Container/index.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-require('../../Tokens/index.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
 const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 const require_useGetContentSize = require('../../utils/useGetContentSize.cjs');
 const require_functions = require('../../SocialProof/utils/functions.cjs');

package/dist/ChatPreviewComparison/components/Layout.js

@@ -1,13 +1,13 @@
 import { getCSSVariable } from "../../DesignTokens/components/utils.js";
-import { AspectRatioCSSVar } from "../../tokens/aspectRatio/aspectRatio.js";
-import { Theme } from "../../tokens/theme/theme.js";
-import { screensBreakpointsVariables } from "../../tokens/breakpoints/breakpoints.js";
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
+import { AspectRatioCSSVar } from "../../packages/components-v3/tokens/aspectRatio/aspectRatio.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { screensBreakpointsVariables } from "../../packages/components-v3/tokens/breakpoints/breakpoints.js";
+import "../../Tokens/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
-import "../../Tokens/index.js";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
 import { useGetContentSize } from "../../utils/useGetContentSize.js";
 import { calculateWidthImageGallery } from "../../SocialProof/utils/functions.js";

package/dist/ChatPreviewComparison/components/Message.cjs

@@ -1,22 +1,23 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
+require('../../Tokens/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 require('../../Typography/index.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-require('../../Tokens/index.cjs');
 const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
-const require_MarkdownProcessor = require('../../MarkdownProcessor/MarkdownProcessor.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/components/ChatPreviewComparison/components/Message.tsx
+const MarkdownProcessor = (0, react.lazy)(async () => ({ default: (await Promise.resolve().then(() => require("../../MarkdownProcessor/MarkdownProcessor.cjs"))).MarkdownProcessor }));
 const Message = ({ messageText, theme = require_theme.Theme.GLOBAL_CUSTOM }) => {
 	const { isMobile } = require_useCheckIsMobile.useCheckIsMobile();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownProcessor.MarkdownProcessor, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownProcessor, {
 		content: messageText,
 		clampParagraphs: require_resolveTheme.resolveTheme(theme) === require_theme.Theme.STANDARD && isMobile ? 7 : 3,
 		textColor: require_index.TypographyColor.TEXT_PRIMARY,
 		textVariant: require_index.TypographyVariant.B3_RG
-	});
+	}) });
 };
 
 //#endregion

package/dist/ChatPreviewComparison/components/Message.js

@@ -1,21 +1,22 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import "../../Tokens/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import "../../Typography/index.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
-import "../../Tokens/index.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
-import { MarkdownProcessor } from "../../MarkdownProcessor/MarkdownProcessor.js";
 import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
 
 //#region src/components/ChatPreviewComparison/components/Message.tsx
+const MarkdownProcessor = lazy(async () => ({ default: (await import("../../MarkdownProcessor/MarkdownProcessor.js")).MarkdownProcessor }));
 const Message = ({ messageText, theme = Theme.GLOBAL_CUSTOM }) => {
 	const { isMobile } = useCheckIsMobile();
-	return /* @__PURE__ */ jsx(MarkdownProcessor, {
+	return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(MarkdownProcessor, {
 		content: messageText,
 		clampParagraphs: resolveTheme(theme) === Theme.STANDARD && isMobile ? 7 : 3,
 		textColor: TypographyColor.TEXT_PRIMARY,
 		textVariant: TypographyVariant.B3_RG
-	});
+	}) });
 };
 
 //#endregion