@envive-ai/react-toolkit-v3 0.3.15 → 0.3.16

package/dist/AnimatedText/AnimatedText.d.cts

@@ -1,13 +1,13 @@
 import { AnimatedTextProps } from "./types/types.cjs";
-import * as react13 from "react";
+import * as react7 from "react";
 
 //#region src/components/AnimatedText/AnimatedText.d.ts
-declare const AnimatedText: react13.MemoExoticComponent<({
+declare const AnimatedText: react7.MemoExoticComponent<({
   sequence,
   typingDuration,
   transition,
   loop,
   getNodeWrapper
-}: AnimatedTextProps) => react13.ReactNode>;
+}: AnimatedTextProps) => react7.ReactNode>;
 //#endregion
 export { AnimatedText };

package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.cts

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

package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.ts

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

package/dist/Carousel/Carousel.cjs

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

package/dist/Carousel/Carousel.d.cts

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

package/dist/Carousel/Carousel.js

@@ -1,6 +1,6 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import { CarouselComponents } from "./components/index.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
+import { CarouselComponents } from "./components/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Carousel/Carousel.tsx

package/dist/Carousel/components/Container.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
 const require_Container = require('../../Container/Container.cjs');
 require('../../Container/index.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
 const require_useCarouselItems = require('../hooks/useCarouselItems.cjs');
 const require_useCarouselNavigation = require('../hooks/useCarouselNavigation.cjs');
 const require_useCarouselNavigationButtons = require('../hooks/useCarouselNavigationButtons.cjs');

package/dist/Carousel/components/Container.js

@@ -1,7 +1,7 @@
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
 import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
 import { useCarouselItems } from "../hooks/useCarouselItems.js";
 import { useCarouselNavigation } from "../hooks/useCarouselNavigation.js";
 import { useCarouselNavigationButtons } from "../hooks/useCarouselNavigationButtons.js";

package/dist/ChatFooter/ChatFooter.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-const require_resolveTheme = require('../utils/resolveTheme.cjs');
 require('../Tokens/index.cjs');
+const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_useGetChatScrollProperties = require('./hooks/useGetChatScrollProperties.cjs');
 const require_index = require('./components/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/ChatFooter/ChatFooter.d.cts

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

package/dist/ChatFooter/ChatFooter.d.ts

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

package/dist/ChatFooter/ChatFooter.js

@@ -1,6 +1,6 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import { resolveTheme } from "../utils/resolveTheme.js";
 import "../Tokens/index.js";
+import { resolveTheme } from "../utils/resolveTheme.js";
 import { useGetChatScrollProperties } from "./hooks/useGetChatScrollProperties.js";
 import { ChatFooterComponents } from "./components/index.js";
 import { jsx } from "react/jsx-runtime";

package/dist/ChatFooter/components/Layout.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
 const require_Container = require('../../Container/Container.cjs');
 require('../../Container/index.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
 const require_useGetContainerProperties = require('../hooks/useGetContainerProperties.cjs');
 const require_useGetChatScrollProperties = require('../hooks/useGetChatScrollProperties.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/ChatFooter/components/Layout.js

@@ -1,7 +1,7 @@
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
 import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
 import { useGetContainerProperties } from "../hooks/useGetContainerProperties.js";
 import { useGetChatScrollProperties } from "../hooks/useGetChatScrollProperties.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,8 +1,8 @@
 import { LayoutProps } from "./Layout.cjs";
 import { PromptSuggestionsProps } from "./PromptSuggestions.cjs";
 import { TextFieldProps } from "../../TextField/types/index.cjs";
-import * as react10 from "react";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react9 from "react";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/components/index.d.ts
 declare const ChatFooterComponents: {
@@ -17,13 +17,13 @@ declare const ChatFooterComponents: {
     testId,
     className,
     style
-  }: LayoutProps) => react_jsx_runtime19.JSX.Element;
+  }: LayoutProps) => react_jsx_runtime28.JSX.Element;
   EnviveLogo: ({
     style
   }: {
     className?: string;
     style?: React.CSSProperties;
-  }) => react10.ReactElement<react10.SVGProps<SVGSVGElement>, string | react10.JSXElementConstructor<any>>;
+  }) => react9.ReactElement<react9.SVGProps<SVGSVGElement>, string | react9.JSXElementConstructor<any>>;
   PromptSuggestions: ({
     theme,
     suggestions,
@@ -32,7 +32,7 @@ declare const ChatFooterComponents: {
     style,
     disabled,
     parentWidget
-  }: PromptSuggestionsProps) => react_jsx_runtime19.JSX.Element;
+  }: PromptSuggestionsProps) => react_jsx_runtime28.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 react181 from "react";
-import * as react_jsx_runtime30 from "react/jsx-runtime";
+import * as react10 from "react";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/components/index.d.ts
 declare const ChatFooterComponents: {
@@ -17,13 +17,13 @@ declare const ChatFooterComponents: {
     testId,
     className,
     style
-  }: LayoutProps) => react_jsx_runtime30.JSX.Element;
+  }: LayoutProps) => react_jsx_runtime25.JSX.Element;
   EnviveLogo: ({
     style
   }: {
     className?: string;
     style?: React.CSSProperties;
-  }) => react181.ReactElement<react181.SVGProps<SVGSVGElement>, string | react181.JSXElementConstructor<any>>;
+  }) => react10.ReactElement<react10.SVGProps<SVGSVGElement>, string | react10.JSXElementConstructor<any>>;
   PromptSuggestions: ({
     theme,
     suggestions,
@@ -32,7 +32,7 @@ declare const ChatFooterComponents: {
     style,
     disabled,
     parentWidget
-  }: PromptSuggestionsProps) => react_jsx_runtime30.JSX.Element;
+  }: PromptSuggestionsProps) => react_jsx_runtime25.JSX.Element;
   TextField: ({
     theme,
     placeholder,

package/dist/ChatFooter/hooks/useGetContainerProperties.cjs

@@ -12,7 +12,7 @@ const useGetContainerProperties = ({ isScrolled, theme }) => {
 		}[theme] ?? "";
 	}, [theme, isScrolled]);
 	return {
-		baseClassName: `envive-tw-w-full envive-tw-border-border-light ${!isScrolled ? "envive-tw-opacity-90 envive-tw-backdrop-blur-[12px]" : ""}`,
+		baseClassName: `envive-tw-w-full envive-tw-border-border-light ${!isScrolled ? "envive-tw-bg-[color-mix(in_srgb,var(--envive-colors-background-light),transparent_10%)] envive-tw-backdrop-blur-[12px]" : ""}`,
 		themeContainerClassNames
 	};
 };

package/dist/ChatFooter/hooks/useGetContainerProperties.js

@@ -11,7 +11,7 @@ const useGetContainerProperties = ({ isScrolled, theme }) => {
 		}[theme] ?? "";
 	}, [theme, isScrolled]);
 	return {
-		baseClassName: `envive-tw-w-full envive-tw-border-border-light ${!isScrolled ? "envive-tw-opacity-90 envive-tw-backdrop-blur-[12px]" : ""}`,
+		baseClassName: `envive-tw-w-full envive-tw-border-border-light ${!isScrolled ? "envive-tw-bg-[color-mix(in_srgb,var(--envive-colors-background-light),transparent_10%)] envive-tw-backdrop-blur-[12px]" : ""}`,
 		themeContainerClassNames
 	};
 };

package/dist/ChatHeader/ChatHeader.d.cts

@@ -1,5 +1,5 @@
 import { ChatHeaderProps } from "./types/index.cjs";
-import * as react_jsx_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime18 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_runtime30.JSX.Element;
+}: ChatHeaderProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { ChatHeader };

package/dist/ChatHeader/components/Handle.cjs

@@ -1,8 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
 const require_Container = require('../../Container/Container.cjs');
 require('../../Container/index.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
+const require_snapConstants = require('../../FloatingChat/snapConstants.cjs');
 const require_useGetHandleProperties = require('../hooks/useGetHandleProperties.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -10,12 +11,13 @@ let framer_motion = require("framer-motion");
 //#region src/components/ChatHeader/components/Handle.tsx
 const Handle = ({ theme, variant, state, animationKey }) => {
 	const { containerClasses, leftBar, rightBar } = require_useGetHandleProperties.useGetHandleProperties(theme, variant, state);
-	const snap43Percent = 57 / 100 * window.innerHeight;
-	const snap100Percent = 0;
+	const swipeviewFactor = require_snapConstants.MAX_SWIPEABLE_VIEW_HEIGHT / 100;
+	const closetSheetHeight = Math.floor(window.innerHeight * swipeviewFactor);
+	const snapFullView = 0;
 	const defaultAnimationKey = (0, framer_motion.useMotionValue)(0);
 	const activeAnimationKey = animationKey || defaultAnimationKey;
-	const leftRotation = (0, framer_motion.useTransform)(activeAnimationKey, [snap100Percent, snap43Percent], [0, -10]);
-	const rightRotation = (0, framer_motion.useTransform)(activeAnimationKey, [snap100Percent, snap43Percent], [0, 10]);
+	const leftRotation = (0, framer_motion.useTransform)(activeAnimationKey, [snapFullView, closetSheetHeight], [0, -10]);
+	const rightRotation = (0, framer_motion.useTransform)(activeAnimationKey, [snapFullView, closetSheetHeight], [0, 10]);
 	if (animationKey) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Container.Container, {
 		className: containerClasses,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {

package/dist/ChatHeader/components/Handle.js

@@ -1,7 +1,8 @@
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
 import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
+import { MAX_SWIPEABLE_VIEW_HEIGHT } from "../../FloatingChat/snapConstants.js";
 import { useGetHandleProperties } from "../hooks/useGetHandleProperties.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionValue, useTransform } from "framer-motion";
@@ -9,12 +10,13 @@ import { motion, useMotionValue, useTransform } from "framer-motion";
 //#region src/components/ChatHeader/components/Handle.tsx
 const Handle = ({ theme, variant, state, animationKey }) => {
 	const { containerClasses, leftBar, rightBar } = useGetHandleProperties(theme, variant, state);
-	const snap43Percent = 57 / 100 * window.innerHeight;
-	const snap100Percent = 0;
+	const swipeviewFactor = MAX_SWIPEABLE_VIEW_HEIGHT / 100;
+	const closetSheetHeight = Math.floor(window.innerHeight * swipeviewFactor);
+	const snapFullView = 0;
 	const defaultAnimationKey = useMotionValue(0);
 	const activeAnimationKey = animationKey || defaultAnimationKey;
-	const leftRotation = useTransform(activeAnimationKey, [snap100Percent, snap43Percent], [0, -10]);
-	const rightRotation = useTransform(activeAnimationKey, [snap100Percent, snap43Percent], [0, 10]);
+	const leftRotation = useTransform(activeAnimationKey, [snapFullView, closetSheetHeight], [0, -10]);
+	const rightRotation = useTransform(activeAnimationKey, [snapFullView, closetSheetHeight], [0, 10]);
 	if (animationKey) return /* @__PURE__ */ jsx(Container, {
 		className: containerClasses,
 		children: /* @__PURE__ */ jsxs(Stack, {

package/dist/ChatHeader/components/Toggle.cjs

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/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');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
 const require_index = require('../types/index.cjs');
 const require_useGetToggleProperties = require('../hooks/useGetToggleProperties.cjs');
 const require_ToggleItem = require('./ToggleItem.cjs');

package/dist/ChatHeader/components/Toggle.js

@@ -1,9 +1,9 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/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 { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
 import { ChatHeaderOptions } from "../types/index.js";
 import { useGetToggleProperties } from "../hooks/useGetToggleProperties.js";
 import { ToggleItem } from "./ToggleItem.js";

package/dist/ChatPreview/ChatPreview.cjs

@@ -1,17 +1,17 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-const require_resolveTheme = require('../utils/resolveTheme.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');
 const require_PromptCarousel = require('../PromptCarousel/PromptCarousel.cjs');
 require('../PromptCarousel/index.cjs');
-const require_types = require('../WidgetWrapper/types/types.cjs');
-const require_index = require('./components/index.cjs');
 const require_WidgetTextField = require('../WidgetTextField/WidgetTextField.cjs');
 require('../WidgetTextField/index.cjs');
+const require_types = require('../WidgetWrapper/types/types.cjs');
 const require_WidgetWrapperWithTitle = require('../WidgetWrapperWithTitle/WidgetWrapperWithTitle.cjs');
+const require_index = require('./components/index.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
@@ -20,7 +20,7 @@ const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEv
 	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, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel } = widgetContentProps ?? {};
-	const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick } = widgetEventProps ?? {};
 	const suggestionTextMap = (0, react.useMemo)(() => {
 		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
 	}, [promptButtons]);
@@ -31,12 +31,21 @@ const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEv
 		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 message = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ChatPreviewComponents.Message, {
+		messageText: messageText ?? "",
+		onLinkClick: handleLinkClick
+	});
 	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: handleSuggestionButtonClick
+		handleButtonClick: handleSuggestionButtonClick,
+		handleButtonDrag: handlePromptButtonDrag,
+		handleButtonHover: (text) => handlePromptButtonHover(suggestionTextMap[text].id),
+		handleButtonMouseDown: (text) => handlePromptButtonMouseDown(suggestionTextMap[text].id),
+		handleButtonMouseUp: handlePromptButtonMouseUp,
+		handleButtonTouchStart: (text) => handlePromptButtonTouchStart(suggestionTextMap[text].id),
+		handleButtonTouchEnd: handlePromptButtonTouchEnd
 	});
 	const widgetTextField = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
 		theme: finalTheme,

package/dist/ChatPreview/ChatPreview.d.cts

@@ -1,5 +1,5 @@
 import { ChatPreviewProps } from "./types/types.cjs";
-import * as react_jsx_runtime44 from "react/jsx-runtime";
+import * as react_jsx_runtime31 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_runtime44.JSX.Element;
+}: ChatPreviewProps) => react_jsx_runtime31.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_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime32 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_runtime34.JSX.Element;
+}: ChatPreviewProps) => react_jsx_runtime32.JSX.Element;
 //#endregion
 export { ChatPreview };

package/dist/ChatPreview/ChatPreview.js

@@ -1,16 +1,16 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import { resolveTheme } from "../utils/resolveTheme.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";
 import { PromptCarousel } from "../PromptCarousel/PromptCarousel.js";
 import "../PromptCarousel/index.js";
-import { WidgetWrapperVariant } from "../WidgetWrapper/types/types.js";
-import { ChatPreviewComponents } from "./components/index.js";
 import { WidgetTextField } from "../WidgetTextField/WidgetTextField.js";
 import "../WidgetTextField/index.js";
+import { WidgetWrapperVariant } from "../WidgetWrapper/types/types.js";
 import { WidgetWrapperWithTitle } from "../WidgetWrapperWithTitle/WidgetWrapperWithTitle.js";
+import { ChatPreviewComponents } from "./components/index.js";
 import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -19,7 +19,7 @@ const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEv
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = Theme.GLOBAL_CUSTOM, variant = WidgetWrapperVariant.CARD_WITH_BORDER, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
 	const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel } = widgetContentProps ?? {};
-	const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick } = widgetEventProps ?? {};
 	const suggestionTextMap = useMemo(() => {
 		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
 	}, [promptButtons]);
@@ -30,12 +30,21 @@ const ChatPreview = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEv
 		handlePromptButtonClick?.(suggestionTextMap[text]);
 	}, [handlePromptButtonClick, suggestionTextMap]);
 	const finalTheme = resolveTheme(theme);
-	const message = /* @__PURE__ */ jsx(ChatPreviewComponents.Message, { messageText: messageText ?? "" });
+	const message = /* @__PURE__ */ jsx(ChatPreviewComponents.Message, {
+		messageText: messageText ?? "",
+		onLinkClick: handleLinkClick
+	});
 	const promptCarousel = /* @__PURE__ */ jsx(PromptCarousel, {
 		promptButtonTexts: promptButtonTexts ?? [],
 		promptButtonType: PromptButtonVariant.SUGGESTED_RESPONSE,
 		promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
-		handleButtonClick: handleSuggestionButtonClick
+		handleButtonClick: handleSuggestionButtonClick,
+		handleButtonDrag: handlePromptButtonDrag,
+		handleButtonHover: (text) => handlePromptButtonHover(suggestionTextMap[text].id),
+		handleButtonMouseDown: (text) => handlePromptButtonMouseDown(suggestionTextMap[text].id),
+		handleButtonMouseUp: handlePromptButtonMouseUp,
+		handleButtonTouchStart: (text) => handlePromptButtonTouchStart(suggestionTextMap[text].id),
+		handleButtonTouchEnd: handlePromptButtonTouchEnd
 	});
 	const widgetTextField = /* @__PURE__ */ jsx(WidgetTextField, {
 		theme: finalTheme,

package/dist/ChatPreview/components/Message.cjs

@@ -5,12 +5,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 
 //#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 }) => {
+const Message = ({ messageText, onLinkClick }) => {
 	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
+		textVariant: require_index.TypographyVariant.B3_RG,
+		onLinkClick
 	}) });
 };
 

package/dist/ChatPreview/components/Message.js

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

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

@@ -113,9 +113,41 @@ type WidgetEventProps = {
    */
   handlePromptButtonClick?: (suggestion: Suggestion) => void;
   /**
-   * Callback function invoked when the text field is clicked.
+   * Callback function invoked when the prompt buttons carousel is dragged.
+   * Useful for tracking drag-to-scroll interactions.
+   */
+  handlePromptButtonDrag?: () => void;
+  /**
+   * Callback function invoked when the user hovers over a prompt button.
+   * Receives the hovered button's text as a parameter.
+   */
+  handlePromptButtonHover?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on a prompt button.
+   * Receives the pressed button's text as a parameter.
+   */
+  handlePromptButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released after pressing a prompt button.
+   */
+  handlePromptButtonMouseUp?: () => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * Receives the touched button's text as a parameter.
+   */
+  handlePromptButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends after touching a prompt button.
+   */
+  handlePromptButtonTouchEnd?: () => void;
+  /**
+   * Callback function invoked when a link inside the widget is clicked.
    *
-   * @param text - The placeholder text of the text field
+   * @param url - The URL of the clicked link
+   */
+  handleLinkClick?: (url: string) => void;
+  /**
+   * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
 };