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

package/dist/FloatingChat/FloatingChat.js

@@ -1,4 +1,4 @@
-import { Theme } from "../tokens/theme/theme.js";
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
 import { PromptButtonVariant } from "../PromptButton/types/index.js";
 import "../PromptButton/index.js";
@@ -10,6 +10,8 @@ import "../ChatFooter/index.js";
 import { ChatHeaderOptions, HandleState } from "../ChatHeader/types/index.js";
 import { ChatHeader } from "../ChatHeader/ChatHeader.js";
 import "../ChatHeader/index.js";
+import { Disclaimer } from "../Disclaimer/Disclaimer.js";
+import "../Disclaimer/index.js";
 import { Unit } from "./hooks/useSnapCalculator.js";
 import { ModalSheet } from "./components/ModalSheet.js";
 import { FloatingChatComponents } from "./components/index.js";
@@ -18,18 +20,20 @@ import { useSnapSetup } from "./hooks/useSnapSetup.js";
 import { useChatSuggestions } from "./hooks/useChatSuggestions.js";
 import { WelcomeMessage } from "../WelcomeMessage/WelcomeMessage.js";
 import { useFilteredChatMessages } from "./hooks/useFilteredChatMessages.js";
-import { useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 import { motion } from "framer-motion";
+import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/FloatingChat/FloatingChat.tsx
-const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, lookAndFeelConfig, isCXButtonSwitchEnabled, isFloatingChatOpen, onClose, onToggleCXButton }) => {
+const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, salesAgentData, floatingChatConfig, hardcopyContent, lookAndFeelConfig, isCXButtonSwitchEnabled, isFloatingChatOpen, onClose, onToggleCXButton }) => {
 	const finalTheme = resolveTheme(theme);
 	const [query, setQuery] = useState("");
 	const chatMessagesRef = useRef(null);
-	const { headerBackgroundColor, headerMode, welcomeMessageIconColor, showVerifiedBuyer, userQueryInputEnabled = true, showEnviveLogo, ignoreFirstModelResponse, neverShowSingleProductCards, welcomeMessageTitle, welcomeMessageText, chatFooterTextFieldPlaceholderText } = floatingChatConfig;
+	const { headerBackgroundColor, headerMode, welcomeMessageIconColor, showVerifiedBuyer, userQueryInputEnabled = true, showEnviveLogo, ignoreFirstModelResponse, neverShowSingleProductCards } = floatingChatConfig;
+	const { welcomeMessageTitle, welcomeMessageText, chatFooterTextFieldPlaceholderText, disclaimerText } = hardcopyContent?.values ?? {};
 	const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
-	const { messages, isResponseStreaming, isPendingResponse, suggestions, onSuggestionClicked, onTypedMessageSubmitted } = salesAgentData;
+	const { messages, isResponseStreaming, isPendingResponse, suggestions, onSuggestionClicked, onTypedMessageSubmitted, onFormResponseSubmitted } = salesAgentData;
 	const { answerSuggestions, generalSuggestions, showAnswerSuggestions, setAnswerSuggestions, setGeneralSuggestions } = useChatSuggestions({
 		suggestions,
 		isPendingResponse,
@@ -41,7 +45,8 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 			onClose();
 		}
 	};
-	const { showScrollButton, scrollToBottom } = useScrollToBottom({
+	const { modalSheetControl, maxSwipeableViewHeight, isOpen, isMobile, snaps, initialSnap, shouldAutoExpand, currentSnapPercentage, handleSnapChange, animationKey, mobileHeaderHeight, shouldShowHeader, isFullView, isPartialView } = useSnapSetup({ isFloatingChatOpen });
+	const { showScrollButton, scrollToBottom, isFloatingLayout } = useScrollToBottom({
 		messagesRef: chatMessagesRef,
 		autoScrollDependencies: [
 			messages,
@@ -50,9 +55,11 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 			answerSuggestions,
 			generalSuggestions
 		],
-		scrollThreshold: 30
+		scrollThreshold: 100,
+		useFloatingLayout: isMobile && isPartialView,
+		footerHeight: 160,
+		isOpen: isFloatingChatOpen
 	});
-	const { modalSheetControl, maxSwipeableViewHeight, isOpen, isMobile, snaps, initialSnap, shouldAutoExpand, currentSnapPercentage, handleSnapChange, animationKey, mobileHeaderHeight, shouldShowHeader, shouldShowScrolled, isFullView, isPartialView } = useSnapSetup({ isFloatingChatOpen });
 	const { filteredMessages, hasFilteredMessages, handlePreviousDiscussions } = useFilteredChatMessages({
 		messages,
 		isMobile,
@@ -106,7 +113,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 	});
 	const footer = /* @__PURE__ */ jsx(ChatFooter, {
 		theme: finalTheme,
-		isScrolled: isMobile ? shouldShowScrolled : false,
+		isScrolled: isMobile ? isFloatingLayout : false,
 		onChange: setQuery,
 		onSubmit: () => {
 			onTypedMessageSubmitted({
@@ -120,7 +127,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		promptSuggestions: isPendingResponse || isResponseStreaming || generalSuggestions.length === 0 ? ["Loading suggestions 1...", "Loading suggestions 2..."] : generalSuggestions,
 		handleButtonClick: (buttonText) => {
 			const suggestion = suggestions.find((s) => s.content === buttonText && !s.isAnswer);
-			if (suggestion) onSuggestionClicked(suggestion);
+			if (suggestion) onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
 		},
@@ -147,7 +154,8 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		ignoreFirstModelResponse,
 		neverShowSingleProductCards,
 		showVerifiedBuyer,
-		isPartialView
+		isPartialView,
+		onFormResponseSubmitted
 	});
 	const answerSuggestionsComponent = /* @__PURE__ */ jsx(PromptCarousel, {
 		className: "envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end",
@@ -157,7 +165,7 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		promptButtonTexts: answerSuggestions,
 		handleButtonClick: (buttonText) => {
 			const suggestion = suggestions.find((s) => s.content === buttonText && s.isAnswer);
-			if (suggestion) onSuggestionClicked(suggestion);
+			if (suggestion) onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
 			setAnswerSuggestions([]);
 			setGeneralSuggestions([]);
 		}
@@ -173,7 +181,8 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		welcomeMessage,
 		chatMessages,
 		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0
+		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0,
+		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ jsx(Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0
 	});
 	const mobileLayout = /* @__PURE__ */ jsx(FloatingChatComponents.Layout, {
 		id,
@@ -186,7 +195,9 @@ const FloatingChat = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTO
 		welcomeMessage,
 		chatMessages,
 		answerSuggestions: showAnswerSuggestions ? answerSuggestionsComponent : void 0,
-		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0
+		scrollToBottomButton: showScrollButton ? /* @__PURE__ */ jsx(FloatingChatComponents.ScrollToBottomButton, { onClick: scrollToBottom }) : void 0,
+		disclaimer: disclaimerText && typeof disclaimerText === "string" ? /* @__PURE__ */ jsx(Disclaimer, { disclaimerMarkdown: disclaimerText }) : void 0,
+		isFloatingFooterLayout: isFloatingLayout
 	});
 	return isMobile ? /* @__PURE__ */ jsx(ModalSheet, {
 		animationKey,

package/dist/FloatingChat/components/AgentMessage.cjs

@@ -1,9 +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');
 const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_index = require('../../Message/types/index.cjs');
 const require_Message = require('../../Message/Message.cjs');
 require('../../Message/index.cjs');
+const require_react = require('../../node_modules/jotai/esm/react.cjs');
 const require_Form = require('../../Form/Form.cjs');
 require('../../Form/index.cjs');
 const require_ReviewCardsCarousel = require('./ReviewCardsCarousel.cjs');
@@ -13,9 +14,11 @@ const require_OrderLookupCardCarousel = require('./OrderLookupCardCarousel.cjs')
 const require_functions = require('../utils/functions.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 
 //#region src/components/FloatingChat/components/AgentMessage.tsx
-const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, isPartialView }) => {
+const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, isPartialView, onFormResponseSubmitted }) => {
+	const handleFormSubmittedAtomFallback = require_react.useSetAtom(__envive_ai_react_hooks_atoms_chat.handleFormSubmittedAtom);
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	if (new Set([
 		__envive_ai_react_hooks_application_models.MessageType.Text,
@@ -30,11 +33,15 @@ const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, ty
 		}, msg.id);
 		return null;
 	});
-	if (type === __envive_ai_react_hooks_application_models.MessageType.Review) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ReviewCardsCarousel.ReviewCardsCarousel, {
-		reviews: require_functions.getCleanReviews(messages),
-		theme: finalTheme,
-		showVerifiedBuyer
-	});
+	if (type === __envive_ai_react_hooks_application_models.MessageType.Review) {
+		const reviews = require_functions.getCleanReviews(messages);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ReviewCardsCarousel.ReviewCardsCarousel, {
+			reviews,
+			theme: finalTheme,
+			showVerifiedBuyer,
+			hideNavigation: reviews.length === 1
+		});
+	}
 	if (type === __envive_ai_react_hooks_application_models.MessageType.Product) {
 		const products = require_functions.getCleanProducts(messages);
 		if (products.length === 1 && neverShowSingleProductCards) return null;
@@ -46,29 +53,50 @@ const AgentMessage = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, agentName, ty
 			isPartialView
 		});
 	}
-	if (type === __envive_ai_react_hooks_application_models.MessageType.Page) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DocumentRetrievalCardsCarousel.DocumentRetrievalCardsCarousel, {
-		documents: require_functions.getCleanDocuments(messages),
-		theme: finalTheme
-	});
-	if (type === __envive_ai_react_hooks_application_models.MessageType.Form) return messages.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Form).map((msg) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Form.Form, {
-		textFields: msg.metadata.fields.map((field) => ({
-			label: field.title,
-			isRequired: field.required,
-			type: field.format === "email" ? "email" : "text"
-		})),
-		submitButton: {
-			label: "Submit",
-			ariaLabel: "Submit",
-			isDisabled: false
-		},
-		onSubmit: (values) => {
-			console.log("submitted", values);
-		}
-	}, msg.id));
-	if (type === __envive_ai_react_hooks_application_models.MessageType.Order) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OrderLookupCardCarousel.OrderLookupCardCarousel, {
-		orders: require_functions.getCleanOrders(messages),
-		theme: finalTheme
+	if (type === __envive_ai_react_hooks_application_models.MessageType.Page) {
+		const documents = require_functions.getCleanDocuments(messages);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DocumentRetrievalCardsCarousel.DocumentRetrievalCardsCarousel, {
+			hideNavigation: documents.length === 1,
+			documents,
+			theme: finalTheme
+		});
+	}
+	if (type === __envive_ai_react_hooks_application_models.MessageType.Form) return messages.filter((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Form).map((msg) => {
+		const { fields } = msg.metadata;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Form.Form, {
+			textFields: fields.map((field) => ({
+				label: field.title,
+				isRequired: field.required,
+				type: field.format === "email" ? "email" : "text"
+			})),
+			submitButton: {
+				label: "Submit",
+				ariaLabel: "Submit",
+				isDisabled: false
+			},
+			onSubmit: (values) => {
+				const filledSchema = {};
+				fields.forEach((field, index) => {
+					filledSchema[field.key] = values[index]?.value ?? "";
+				});
+				const payload = {
+					filledSchema,
+					formResponseId: msg.id,
+					formType: msg.metadata.formType ?? "order_lookup"
+				};
+				if (onFormResponseSubmitted) onFormResponseSubmitted(payload);
+				else handleFormSubmittedAtomFallback(payload);
+			}
+		}, msg.id);
 	});
+	if (type === __envive_ai_react_hooks_application_models.MessageType.Order) {
+		const orders = require_functions.getCleanOrders(messages);
+		if (!orders || orders.length === 0) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OrderLookupCardCarousel.OrderLookupCardCarousel, {
+			orders,
+			theme: finalTheme
+		});
+	}
 	return null;
 };
 

package/dist/FloatingChat/components/AgentMessage.js

@@ -1,8 +1,9 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
 import { MessageVariant } from "../../Message/types/index.js";
 import { Message } from "../../Message/Message.js";
 import "../../Message/index.js";
+import { useSetAtom } from "../../node_modules/jotai/esm/react.js";
 import { Form } from "../../Form/Form.js";
 import "../../Form/index.js";
 import { ReviewCardsCarousel } from "./ReviewCardsCarousel.js";
@@ -12,9 +13,11 @@ import { OrderLookupCardCarousel } from "./OrderLookupCardCarousel.js";
 import { getCleanDocuments, getCleanOrders, getCleanProducts, getCleanReviews } from "../utils/functions.js";
 import { jsx } from "react/jsx-runtime";
 import { MessageType } from "@envive-ai/react-hooks/application/models";
+import { handleFormSubmittedAtom } from "@envive-ai/react-hooks/atoms/chat";
 
 //#region src/components/FloatingChat/components/AgentMessage.tsx
-const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, isPartialView }) => {
+const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages, hideAgentName = false, isResponseStreaming = false, neverShowSingleProductCards = false, showVerifiedBuyer = false, isPartialView, onFormResponseSubmitted }) => {
+	const handleFormSubmittedAtomFallback = useSetAtom(handleFormSubmittedAtom);
 	const finalTheme = resolveTheme(theme);
 	if (new Set([
 		MessageType.Text,
@@ -29,11 +32,15 @@ const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages,
 		}, msg.id);
 		return null;
 	});
-	if (type === MessageType.Review) return /* @__PURE__ */ jsx(ReviewCardsCarousel, {
-		reviews: getCleanReviews(messages),
-		theme: finalTheme,
-		showVerifiedBuyer
-	});
+	if (type === MessageType.Review) {
+		const reviews = getCleanReviews(messages);
+		return /* @__PURE__ */ jsx(ReviewCardsCarousel, {
+			reviews,
+			theme: finalTheme,
+			showVerifiedBuyer,
+			hideNavigation: reviews.length === 1
+		});
+	}
 	if (type === MessageType.Product) {
 		const products = getCleanProducts(messages);
 		if (products.length === 1 && neverShowSingleProductCards) return null;
@@ -45,29 +52,50 @@ const AgentMessage = ({ theme = Theme.GLOBAL_CUSTOM, agentName, type, messages,
 			isPartialView
 		});
 	}
-	if (type === MessageType.Page) return /* @__PURE__ */ jsx(DocumentRetrievalCardsCarousel, {
-		documents: getCleanDocuments(messages),
-		theme: finalTheme
-	});
-	if (type === MessageType.Form) return messages.filter((msg) => msg.type === MessageType.Form).map((msg) => /* @__PURE__ */ jsx(Form, {
-		textFields: msg.metadata.fields.map((field) => ({
-			label: field.title,
-			isRequired: field.required,
-			type: field.format === "email" ? "email" : "text"
-		})),
-		submitButton: {
-			label: "Submit",
-			ariaLabel: "Submit",
-			isDisabled: false
-		},
-		onSubmit: (values) => {
-			console.log("submitted", values);
-		}
-	}, msg.id));
-	if (type === MessageType.Order) return /* @__PURE__ */ jsx(OrderLookupCardCarousel, {
-		orders: getCleanOrders(messages),
-		theme: finalTheme
+	if (type === MessageType.Page) {
+		const documents = getCleanDocuments(messages);
+		return /* @__PURE__ */ jsx(DocumentRetrievalCardsCarousel, {
+			hideNavigation: documents.length === 1,
+			documents,
+			theme: finalTheme
+		});
+	}
+	if (type === MessageType.Form) return messages.filter((msg) => msg.type === MessageType.Form).map((msg) => {
+		const { fields } = msg.metadata;
+		return /* @__PURE__ */ jsx(Form, {
+			textFields: fields.map((field) => ({
+				label: field.title,
+				isRequired: field.required,
+				type: field.format === "email" ? "email" : "text"
+			})),
+			submitButton: {
+				label: "Submit",
+				ariaLabel: "Submit",
+				isDisabled: false
+			},
+			onSubmit: (values) => {
+				const filledSchema = {};
+				fields.forEach((field, index) => {
+					filledSchema[field.key] = values[index]?.value ?? "";
+				});
+				const payload = {
+					filledSchema,
+					formResponseId: msg.id,
+					formType: msg.metadata.formType ?? "order_lookup"
+				};
+				if (onFormResponseSubmitted) onFormResponseSubmitted(payload);
+				else handleFormSubmittedAtomFallback(payload);
+			}
+		}, msg.id);
 	});
+	if (type === MessageType.Order) {
+		const orders = getCleanOrders(messages);
+		if (!orders || orders.length === 0) return null;
+		return /* @__PURE__ */ jsx(OrderLookupCardCarousel, {
+			orders,
+			theme: finalTheme
+		});
+	}
 	return null;
 };
 

package/dist/FloatingChat/components/ChatMessages.cjs

@@ -1,11 +1,11 @@
 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');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_Stack = require('../../Stack/Stack.cjs');
 require('../../Stack/index.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');
 const require_index$1 = require('../../Message/types/index.cjs');
 const require_Message = require('../../Message/Message.cjs');
 require('../../Message/index.cjs');
@@ -13,29 +13,29 @@ const require_UserMessage = require('./UserMessage.cjs');
 const require_functions = require('../utils/functions.cjs');
 const require_AgentMessage = require('./AgentMessage.cjs');
 const require_MessageDivider = require('./MessageDivider.cjs');
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 
 //#region src/components/FloatingChat/components/ChatMessages.tsx
-const ChatMessages = (0, react.forwardRef)(({ theme = require_theme.Theme.GLOBAL_CUSTOM, className, agentName, messages, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, isPartialView }, ref) => {
+const ChatMessages = (0, react.forwardRef)(({ theme = require_theme.Theme.GLOBAL_CUSTOM, className, agentName, messages, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, isPartialView, onFormResponseSubmitted }, ref) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 		ref,
 		direction: "column",
-		className: (0, classnames.default)("envive-tw-px-4", className),
+		className: (0, classnames.default)("envive-tw-pl-4 envive-tw-pr-4", className),
 		gap: 4,
 		children: [
 			hasFilteredMessages && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
-				className: "envive-tw-w-full envive-tw-cursor-pointer envive-tw-px-4 envive-tw-py-2 envive-tw-text-center",
+				className: "envive-tw-w-full envive-tw-cursor-pointer envive-tw-text-left",
 				onClick: handlePreviousDiscussions,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 					color: require_index.TypographyColor.TEXT_PRIMARY,
-					variant: require_index.TypographyVariant.B3_RG,
-					className: "hover:envive-tw-underline",
+					variant: require_index.TypographyVariant.B4_MD,
+					className: "envive-tw-underline hover:envive-tw-underline-offset-2",
 					children: "View Previous Messages"
 				})
 			}),
@@ -68,7 +68,8 @@ const ChatMessages = (0, react.forwardRef)(({ theme = require_theme.Theme.GLOBAL
 								isResponseStreaming: isResponseStreaming && isLastMessageTurn,
 								neverShowSingleProductCards,
 								showVerifiedBuyer,
-								isPartialView
+								isPartialView,
+								onFormResponseSubmitted
 							}, assistantMessageId);
 						}
 						return null;

package/dist/FloatingChat/components/ChatMessages.js

@@ -1,10 +1,10 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { Stack } from "../../Stack/Stack.js";
 import "../../Stack/index.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 { MessageVariant } from "../../Message/types/index.js";
 import { Message } from "../../Message/Message.js";
 import "../../Message/index.js";
@@ -12,28 +12,28 @@ import { UserMessage } from "./UserMessage.js";
 import { checkIfHideAgentName, getGroupableMessages } from "../utils/functions.js";
 import { AgentMessage } from "./AgentMessage.js";
 import { MessageDivider } from "./MessageDivider.js";
-import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import classNames from "classnames";
 import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
 
 //#region src/components/FloatingChat/components/ChatMessages.tsx
-const ChatMessages = forwardRef(({ theme = Theme.GLOBAL_CUSTOM, className, agentName, messages, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, isPartialView }, ref) => {
+const ChatMessages = forwardRef(({ theme = Theme.GLOBAL_CUSTOM, className, agentName, messages, hasFilteredMessages, handlePreviousDiscussions, isLoading, isResponseStreaming, ignoreFirstModelResponse, neverShowSingleProductCards, showVerifiedBuyer, isPartialView, onFormResponseSubmitted }, ref) => {
 	const finalTheme = resolveTheme(theme);
 	return /* @__PURE__ */ jsxs(Stack, {
 		ref,
 		direction: "column",
-		className: classNames("envive-tw-px-4", className),
+		className: classNames("envive-tw-pl-4 envive-tw-pr-4", className),
 		gap: 4,
 		children: [
 			hasFilteredMessages && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "envive-tw-w-full envive-tw-cursor-pointer envive-tw-px-4 envive-tw-py-2 envive-tw-text-center",
+				className: "envive-tw-w-full envive-tw-cursor-pointer envive-tw-text-left",
 				onClick: handlePreviousDiscussions,
 				children: /* @__PURE__ */ jsx(Typography, {
 					color: TypographyColor.TEXT_PRIMARY,
-					variant: TypographyVariant.B3_RG,
-					className: "hover:envive-tw-underline",
+					variant: TypographyVariant.B4_MD,
+					className: "envive-tw-underline hover:envive-tw-underline-offset-2",
 					children: "View Previous Messages"
 				})
 			}),
@@ -66,7 +66,8 @@ const ChatMessages = forwardRef(({ theme = Theme.GLOBAL_CUSTOM, className, agent
 								isResponseStreaming: isResponseStreaming && isLastMessageTurn,
 								neverShowSingleProductCards,
 								showVerifiedBuyer,
-								isPartialView
+								isPartialView,
+								onFormResponseSubmitted
 							}, assistantMessageId);
 						}
 						return null;

package/dist/FloatingChat/components/DocumentRetrievalCardsCarousel.cjs

@@ -5,9 +5,10 @@ const require_DocumentRetrievalCard = require('../../DocumentRetrievalCard/Docum
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingChat/components/DocumentRetrievalCardsCarousel.tsx
-const DocumentRetrievalCardsCarousel = ({ documents, theme }) => {
+const DocumentRetrievalCardsCarousel = ({ documents, theme, hideNavigation = false }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Carousel.Carousel, {
+		hideNavigation,
 		elements: documents.map((document) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DocumentRetrievalCard.DocumentRetrievalCard, {
 			title: document.title,
 			description: document.description,

package/dist/FloatingChat/components/DocumentRetrievalCardsCarousel.js

@@ -4,9 +4,10 @@ import { DocumentRetrievalCard } from "../../DocumentRetrievalCard/DocumentRetri
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/components/DocumentRetrievalCardsCarousel.tsx
-const DocumentRetrievalCardsCarousel = ({ documents, theme }) => {
+const DocumentRetrievalCardsCarousel = ({ documents, theme, hideNavigation = false }) => {
 	const finalTheme = resolveTheme(theme);
 	return /* @__PURE__ */ jsx(Carousel, {
+		hideNavigation,
 		elements: documents.map((document) => /* @__PURE__ */ jsx(DocumentRetrievalCard, {
 			title: document.title,
 			description: document.description,

package/dist/FloatingChat/components/Layout.cjs

@@ -1,17 +1,17 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.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');
-let react = require("react");
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 
 //#region src/components/FloatingChat/components/Layout.tsx
-const Layout = ({ id, className, style, testId, theme = require_theme.Theme.GLOBAL_CUSTOM, header, footer, welcomeMessage, chatMessages, answerSuggestions, scrollToBottomButton }) => {
+const Layout = ({ id, className, style, testId, theme = require_theme.Theme.GLOBAL_CUSTOM, header, footer, welcomeMessage, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, isFloatingFooterLayout = false }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const hasWelcomeMessage = (0, react.isValidElement)(welcomeMessage);
 	const hasAnswerSuggestions = (0, react.isValidElement)(answerSuggestions);
@@ -29,25 +29,29 @@ const Layout = ({ id, className, style, testId, theme = require_theme.Theme.GLOB
 					children: header
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden",
+					className: "envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 						className: "envive-tw-h-full",
 						direction: "column",
 						justify: "between",
-						children: [welcomeMessage, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+							direction: "column",
+							gap: "0",
+							children: [welcomeMessage, disclaimer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: disclaimer })]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
 							direction: "column",
 							gap: "0",
-							className: (0, classnames.default)((!hasWelcomeMessage || hasWelcomeMessage && finalTheme === require_theme.Theme.STANDARD) && "envive-tw-pt-4", !hasAnswerSuggestions && "envive-tw-pb-4"),
+							className: (0, classnames.default)((!hasWelcomeMessage || hasWelcomeMessage && finalTheme === require_theme.Theme.STANDARD) && "envive-tw-pt-4", !hasAnswerSuggestions && !isFloatingFooterLayout && "envive-tw-pb-4", isFloatingFooterLayout && "envive-tw-pb-[180px]"),
 							children: [chatMessages, answerSuggestions]
 						})]
 					})
 				}),
 				footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "envive-tw-flex-shrink-0",
+					className: (0, classnames.default)("envive-tw-w-full envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out", isFloatingFooterLayout ? "envive-tw-absolute envive-tw-bottom-[0px] envive-tw-z-10" : "envive-tw-flex-shrink-0"),
 					children: footer
 				}),
 				scrollToBottomButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "envive-tw-absolute envive-tw-bottom-[170px] envive-tw-right-4 envive-tw-z-10",
+					className: (0, classnames.default)("envive-tw-absolute envive-tw-right-4 envive-tw-z-10 envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out", isFloatingFooterLayout ? "envive-tw-bottom-[80px]" : "envive-tw-bottom-[170px]"),
 					children: scrollToBottomButton
 				})
 			]

package/dist/FloatingChat/components/Layout.js

@@ -1,15 +1,15 @@
-import { Theme } from "../../tokens/theme/theme.js";
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
-import { isValidElement } from "react";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
 import classNames from "classnames";
 
 //#region src/components/FloatingChat/components/Layout.tsx
-const Layout = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, header, footer, welcomeMessage, chatMessages, answerSuggestions, scrollToBottomButton }) => {
+const Layout = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, header, footer, welcomeMessage, chatMessages, answerSuggestions, scrollToBottomButton, disclaimer, isFloatingFooterLayout = false }) => {
 	const finalTheme = resolveTheme(theme);
 	const hasWelcomeMessage = isValidElement(welcomeMessage);
 	const hasAnswerSuggestions = isValidElement(answerSuggestions);
@@ -27,25 +27,29 @@ const Layout = ({ id, className, style, testId, theme = Theme.GLOBAL_CUSTOM, hea
 					children: header
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden",
+					className: "envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out",
 					children: /* @__PURE__ */ jsxs(Stack, {
 						className: "envive-tw-h-full",
 						direction: "column",
 						justify: "between",
-						children: [welcomeMessage, /* @__PURE__ */ jsxs(Stack, {
+						children: [/* @__PURE__ */ jsxs(Stack, {
+							direction: "column",
+							gap: "0",
+							children: [welcomeMessage, disclaimer && /* @__PURE__ */ jsx("div", { children: disclaimer })]
+						}), /* @__PURE__ */ jsxs(Stack, {
 							direction: "column",
 							gap: "0",
-							className: classNames((!hasWelcomeMessage || hasWelcomeMessage && finalTheme === Theme.STANDARD) && "envive-tw-pt-4", !hasAnswerSuggestions && "envive-tw-pb-4"),
+							className: classNames((!hasWelcomeMessage || hasWelcomeMessage && finalTheme === Theme.STANDARD) && "envive-tw-pt-4", !hasAnswerSuggestions && !isFloatingFooterLayout && "envive-tw-pb-4", isFloatingFooterLayout && "envive-tw-pb-[180px]"),
 							children: [chatMessages, answerSuggestions]
 						})]
 					})
 				}),
 				footer && /* @__PURE__ */ jsx("div", {
-					className: "envive-tw-flex-shrink-0",
+					className: classNames("envive-tw-w-full envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out", isFloatingFooterLayout ? "envive-tw-absolute envive-tw-bottom-[0px] envive-tw-z-10" : "envive-tw-flex-shrink-0"),
 					children: footer
 				}),
 				scrollToBottomButton && /* @__PURE__ */ jsx("div", {
-					className: "envive-tw-absolute envive-tw-bottom-[170px] envive-tw-right-4 envive-tw-z-10",
+					className: classNames("envive-tw-absolute envive-tw-right-4 envive-tw-z-10 envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out", isFloatingFooterLayout ? "envive-tw-bottom-[80px]" : "envive-tw-bottom-[170px]"),
 					children: scrollToBottomButton
 				})
 			]