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

package/dist/AnimatedText/AnimatedText.cjs

@@ -57,6 +57,7 @@ const AnimatedText = (0, react.memo)(({ sequence, typingDuration = DEFAULT_TYPIN
 	]);
 	return getNodeWrapper(currentText);
 });
+AnimatedText.displayName = "AnimatedText";
 
 //#endregion
 exports.AnimatedText = AnimatedText;

package/dist/AnimatedText/AnimatedText.js

@@ -56,6 +56,7 @@ const AnimatedText = memo(({ sequence, typingDuration = DEFAULT_TYPING_DURATION,
 	]);
 	return getNodeWrapper(currentText);
 });
+AnimatedText.displayName = "AnimatedText";
 
 //#endregion
 export { AnimatedText };

package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.cts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime33 from "react/jsx-runtime";
 
 //#region src/components/CSSVariablesEditor/CssVariablesEditorComponent.d.ts
 declare const CssVariablesEditorComponent: ({
   selectedMerchantName
 }: {
   selectedMerchantName: string;
-}) => react_jsx_runtime23.JSX.Element;
+}) => react_jsx_runtime33.JSX.Element;
 //#endregion
 export { CssVariablesEditorComponent };

package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime28 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/CSSVariablesEditor/CssVariablesEditorComponent.d.ts
 declare const CssVariablesEditorComponent: ({
   selectedMerchantName
 }: {
   selectedMerchantName: string;
-}) => react_jsx_runtime28.JSX.Element;
+}) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { CssVariablesEditorComponent };

package/dist/CSSVariablesEditor/components/CSSVariablesEditor.cjs

@@ -3,8 +3,8 @@ const require_useGetCurrentMerchantColors = require('../hooks/useGetCurrentMerch
 const require_useGetDefaultCssVariables = require('../hooks/useGetDefaultCssVariables.cjs');
 const require_functions = require('../utils/functions.cjs');
 const require_useHandleCssVariablesState = require('../hooks/useHandleCssVariablesState.cjs');
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/components/CSSVariablesEditor/components/CSSVariablesEditor.tsx
 const CSSVariablesEditor = ({ selectedMerchantName }) => {

package/dist/CSSVariablesEditor/components/CSSVariablesEditor.js

@@ -2,8 +2,8 @@ import { useGetCurrentMerchantColors } from "../hooks/useGetCurrentMerchantColor
 import { useGetDefaultCssVariables } from "../hooks/useGetDefaultCssVariables.js";
 import { hexToColorPicker } from "../utils/functions.js";
 import { useHandleCssVariablesState } from "../hooks/useHandleCssVariablesState.js";
-import { useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 
 //#region src/components/CSSVariablesEditor/components/CSSVariablesEditor.tsx
 const CSSVariablesEditor = ({ selectedMerchantName }) => {

package/dist/Carousel/Carousel.d.cts

@@ -1,5 +1,5 @@
 import { CarouselProps } from "./types/types.cjs";
-import * as react_jsx_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/Carousel/Carousel.d.ts
 declare const Carousel: ({
@@ -11,6 +11,6 @@ declare const Carousel: ({
   badgeLabel,
   theme,
   hideNavigation
-}: CarouselProps) => react_jsx_runtime30.JSX.Element;
+}: CarouselProps) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { Carousel };

package/dist/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import { CarouselProps } from "./types/types.js";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/Carousel/Carousel.d.ts
 declare const Carousel: ({
@@ -11,6 +11,6 @@ declare const Carousel: ({
   badgeLabel,
   theme,
   hideNavigation
-}: CarouselProps) => react_jsx_runtime19.JSX.Element;
+}: CarouselProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
 export { Carousel };

package/dist/Carousel/components/Container.cjs

@@ -7,8 +7,8 @@ const require_useCarouselItems = require('../hooks/useCarouselItems.cjs');
 const require_useCarouselNavigation = require('../hooks/useCarouselNavigation.cjs');
 const require_useCarouselNavigationButtons = require('../hooks/useCarouselNavigationButtons.cjs');
 const require_useCarouselButtons = require('../hooks/useCarouselButtons.cjs');
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/components/Carousel/components/Container.tsx
 const Container$1 = ({ children, className, id, testId, style, next, previous, badge }) => {

package/dist/Carousel/components/Container.js

@@ -6,8 +6,8 @@ import { useCarouselItems } from "../hooks/useCarouselItems.js";
 import { useCarouselNavigation } from "../hooks/useCarouselNavigation.js";
 import { useCarouselNavigationButtons } from "../hooks/useCarouselNavigationButtons.js";
 import { useCarouselButtons } from "../hooks/useCarouselButtons.js";
-import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 
 //#region src/components/Carousel/components/Container.tsx
 const Container$1 = ({ children, className, id, testId, style, next, previous, badge }) => {

package/dist/ChatFooter/ChatFooter.d.cts

@@ -1,5 +1,5 @@
 import { ChatFooterProps } from "./types/types.cjs";
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime32 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/ChatFooter.d.ts
 declare const ChatFooter: ({
@@ -18,6 +18,6 @@ declare const ChatFooter: ({
   disabled,
   isLoadingPromptSuggestions,
   disabledInput
-}: ChatFooterProps) => react_jsx_runtime34.JSX.Element;
+}: ChatFooterProps) => react_jsx_runtime32.JSX.Element;
 //#endregion
 export { ChatFooter };

package/dist/ChatFooter/components/index.d.cts

@@ -2,7 +2,7 @@ import { LayoutProps } from "./Layout.cjs";
 import { PromptSuggestionsProps } from "./PromptSuggestions.cjs";
 import { TextFieldProps } from "../../TextField/types/index.cjs";
 import * as react183 from "react";
-import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/components/index.d.ts
 declare const ChatFooterComponents: {
@@ -17,7 +17,7 @@ declare const ChatFooterComponents: {
     testId,
     className,
     style
-  }: LayoutProps) => react_jsx_runtime32.JSX.Element;
+  }: LayoutProps) => react_jsx_runtime30.JSX.Element;
   EnviveLogo: ({
     style
   }: {
@@ -31,7 +31,7 @@ declare const ChatFooterComponents: {
     className,
     style,
     disabled
-  }: PromptSuggestionsProps) => react_jsx_runtime32.JSX.Element;
+  }: PromptSuggestionsProps) => react_jsx_runtime30.JSX.Element;
   TextField: ({
     theme,
     placeholder,

package/dist/ChatFooter/components/index.d.ts

@@ -1,8 +1,8 @@
 import { LayoutProps } from "./Layout.js";
 import { PromptSuggestionsProps } from "./PromptSuggestions.js";
 import { TextFieldProps } from "../../TextField/types/index.js";
-import * as react178 from "react";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react183 from "react";
 
 //#region src/components/ChatFooter/components/index.d.ts
 declare const ChatFooterComponents: {
@@ -17,13 +17,13 @@ declare const ChatFooterComponents: {
     testId,
     className,
     style
-  }: LayoutProps) => react_jsx_runtime29.JSX.Element;
+  }: LayoutProps) => react_jsx_runtime32.JSX.Element;
   EnviveLogo: ({
     style
   }: {
     className?: string;
     style?: React.CSSProperties;
-  }) => react178.ReactElement<react178.SVGProps<SVGSVGElement>, string | react178.JSXElementConstructor<any>>;
+  }) => react183.ReactElement<react183.SVGProps<SVGSVGElement>, string | react183.JSXElementConstructor<any>>;
   PromptSuggestions: ({
     theme,
     suggestions,
@@ -31,7 +31,7 @@ declare const ChatFooterComponents: {
     className,
     style,
     disabled
-  }: PromptSuggestionsProps) => react_jsx_runtime29.JSX.Element;
+  }: PromptSuggestionsProps) => react_jsx_runtime32.JSX.Element;
   TextField: ({
     theme,
     placeholder,

package/dist/ChatHeader/ChatHeader.d.cts

@@ -1,5 +1,5 @@
 import { ChatHeaderProps } from "./types/index.cjs";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/ChatHeader/ChatHeader.d.ts
 declare const ChatHeader: ({
@@ -21,6 +21,6 @@ declare const ChatHeader: ({
   headerBgColor,
   onClose,
   onToggle
-}: ChatHeaderProps) => react_jsx_runtime18.JSX.Element;
+}: ChatHeaderProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { ChatHeader };

package/dist/ChatHeader/ChatHeader.d.ts

@@ -1,5 +1,5 @@
 import { ChatHeaderProps } from "./types/index.js";
-import * as react_jsx_runtime33 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/components/ChatHeader/ChatHeader.d.ts
 declare const ChatHeader: ({
@@ -21,6 +21,6 @@ declare const ChatHeader: ({
   headerBgColor,
   onClose,
   onToggle
-}: ChatHeaderProps) => react_jsx_runtime33.JSX.Element;
+}: ChatHeaderProps) => react_jsx_runtime27.JSX.Element;
 //#endregion
 export { ChatHeader };

package/dist/ChatPreview/ChatPreview.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_runtime29 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_runtime29.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_runtime32 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_runtime32.JSX.Element;
+}: ChatPreviewProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { ChatPreview };

package/dist/ChatPreview/ChatPreview.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,7 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_index = require('../../Typography/types/index.cjs');
-let react = require("react");
 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 }));

package/dist/ChatPreview/components/Message.js

@@ -1,6 +1,6 @@
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
-import { Suspense, lazy } from "react";
 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 }));

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 "../../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

@@ -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_runtime31 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_runtime31.JSX.Element;
+}: ChatPreviewComparisonProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { ChatPreviewComparison };

package/dist/ChatPreviewComparison/ChatPreviewComparison.d.ts

@@ -1,5 +1,5 @@
 import { ChatPreviewComparisonProps } from "./types/types.js";
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime28 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_runtime34.JSX.Element;
+}: ChatPreviewComparisonProps) => react_jsx_runtime28.JSX.Element;
 //#endregion
 export { ChatPreviewComparison };

package/dist/ChatPreviewComparison/ChatPreviewComparison.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/Message.cjs

@@ -5,8 +5,8 @@ const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 require('../../Typography/index.cjs');
 const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
-let react = require("react");
 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 }));

package/dist/ChatPreviewComparison/components/Message.js

@@ -4,8 +4,8 @@ import { resolveTheme } from "../../utils/resolveTheme.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import "../../Typography/index.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
-import { Suspense, lazy } from "react";
 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 }));

package/dist/ChatPreviewComparison/types/types.d.cts

@@ -1,6 +1,7 @@
 import { Theme } from "../../tokens/theme/theme.cjs";
 import { WidgetWrapperVariant } from "../../WidgetWrapper/types/types.cjs";
 import { ImageGalleryImage } from "../../ImageGallery/types/types.cjs";
+import { Suggestion } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/ChatPreviewComparison/types/types.d.ts
 
@@ -53,7 +54,7 @@ type WidgetContentProps = {
   /**
    * Array of text labels for the prompt buttons.
    */
-  promptButtonTexts?: string[];
+  promptButtons?: Suggestion[];
   /**
    * Placeholder text for the text field input.
    * Displayed when the text field is visible.
@@ -119,13 +120,12 @@ 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/types/types.d.ts

@@ -1,6 +1,7 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { WidgetWrapperVariant } from "../../WidgetWrapper/types/types.js";
 import { ImageGalleryImage } from "../../ImageGallery/types/types.js";
+import { Suggestion } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/ChatPreviewComparison/types/types.d.ts
 
@@ -53,7 +54,7 @@ type WidgetContentProps = {
   /**
    * Array of text labels for the prompt buttons.
    */
-  promptButtonTexts?: string[];
+  promptButtons?: Suggestion[];
   /**
    * Placeholder text for the text field input.
    * Displayed when the text field is visible.
@@ -119,13 +120,12 @@ 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.