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

package/dist/FloatingChat/hooks/useScrollToBottom.cjs

@@ -2,8 +2,15 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 let react = require("react");
 
 //#region src/components/FloatingChat/hooks/useScrollToBottom.ts
-const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30 }) => {
+const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30, useFloatingLayout = false, footerHeight = 120, isOpen = true }) => {
 	const [showScrollButton, setShowScrollButton] = (0, react.useState)(false);
+	const [isFloatingLayout, setIsFloatingLayout] = (0, react.useState)(false);
+	const isTransitioningLayoutRef = (0, react.useRef)(false);
+	const lastScrollTopRef = (0, react.useRef)(0);
+	const scrollDirectionRef = (0, react.useRef)(null);
+	const isInitialMountRef = (0, react.useRef)(true);
+	const previousIsOpenRef = (0, react.useRef)(isOpen);
+	const blockLayoutChangeRef = (0, react.useRef)(false);
 	const getScrollableContainer = (0, react.useCallback)(() => {
 		return messagesRef.current?.closest(".envive-tw-overflow-y-auto");
 	}, [messagesRef]);
@@ -13,36 +20,127 @@ const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThr
 		const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
 		return scrollHeight - scrollTop - clientHeight < scrollThreshold;
 	}, [getScrollableContainer, scrollThreshold]);
+	(0, react.useEffect)(() => {
+		if (isOpen && !previousIsOpenRef.current) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			isTransitioningLayoutRef.current = false;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+		previousIsOpenRef.current = isOpen;
+	}, [isOpen]);
+	(0, react.useEffect)(() => {
+		if (useFloatingLayout) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+	}, [useFloatingLayout]);
+	(0, react.useEffect)(() => {
+		if (!useFloatingLayout) return;
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return;
+		const shouldBeFloating = showScrollButton;
+		if (shouldBeFloating !== isFloatingLayout && !isTransitioningLayoutRef.current) {
+			isTransitioningLayoutRef.current = true;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			const scrollFromBottom = scrollHeight - scrollTop - clientHeight;
+			setIsFloatingLayout(shouldBeFloating);
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					setTimeout(() => {
+						const newScrollTop = scrollableContainer.scrollHeight - scrollableContainer.clientHeight - scrollFromBottom;
+						if (scrollFromBottom > scrollThreshold) scrollableContainer.scrollTop = Math.max(0, newScrollTop);
+						setTimeout(() => {
+							isTransitioningLayoutRef.current = false;
+						}, 250);
+					}, 50);
+				});
+			});
+		}
+	}, [
+		showScrollButton,
+		isFloatingLayout,
+		getScrollableContainer,
+		useFloatingLayout,
+		scrollThreshold
+	]);
 	(0, react.useEffect)(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (scrollableContainer) requestAnimationFrame(() => {
 			scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
 			setShowScrollButton(false);
+			if (useFloatingLayout) {
+				setIsFloatingLayout(false);
+				isInitialMountRef.current = true;
+			}
 		});
-	}, [...autoScrollDependencies, getScrollableContainer]);
+	}, [
+		...autoScrollDependencies,
+		getScrollableContainer,
+		useFloatingLayout
+	]);
 	(0, react.useEffect)(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (!scrollableContainer) return;
 		const handleScroll = () => {
-			setShowScrollButton(!checkIfScrolledToBottom());
+			if (isTransitioningLayoutRef.current || blockLayoutChangeRef.current) return;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			if (scrollTop > lastScrollTopRef.current) scrollDirectionRef.current = "down";
+			else if (scrollTop < lastScrollTopRef.current) scrollDirectionRef.current = "up";
+			lastScrollTopRef.current = scrollTop;
+			const contentBelowViewport = scrollHeight - scrollTop - clientHeight;
+			const upThreshold = scrollThreshold * 2;
+			if (showScrollButton) {
+				if (scrollDirectionRef.current === "down") {
+					if (contentBelowViewport <= footerHeight + 40) setShowScrollButton(false);
+				} else if (contentBelowViewport <= scrollThreshold) setShowScrollButton(false);
+			} else if (contentBelowViewport > upThreshold) setShowScrollButton(true);
 		};
 		scrollableContainer.addEventListener("scroll", handleScroll);
-		handleScroll();
+		if (!isInitialMountRef.current) handleScroll();
+		else isInitialMountRef.current = false;
 		return () => {
 			scrollableContainer.removeEventListener("scroll", handleScroll);
 		};
-	}, [getScrollableContainer, checkIfScrolledToBottom]);
+	}, [
+		getScrollableContainer,
+		checkIfScrolledToBottom,
+		scrollThreshold,
+		showScrollButton,
+		footerHeight
+	]);
 	return {
 		showScrollButton,
 		scrollToBottom: (0, react.useCallback)(() => {
 			const scrollableContainer = getScrollableContainer();
-			if (scrollableContainer) requestAnimationFrame(() => {
-				scrollableContainer.scrollTo({
-					top: scrollableContainer.scrollHeight,
-					behavior: "smooth"
+			if (scrollableContainer) {
+				blockLayoutChangeRef.current = true;
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						const targetScroll = scrollableContainer.scrollHeight;
+						scrollableContainer.scrollTo({
+							top: targetScroll,
+							behavior: "smooth"
+						});
+						setTimeout(() => {
+							blockLayoutChangeRef.current = false;
+							setShowScrollButton(false);
+							if (useFloatingLayout) setIsFloatingLayout(false);
+						}, 500);
+					});
 				});
-			});
-		}, [getScrollableContainer])
+			}
+		}, [getScrollableContainer, useFloatingLayout]),
+		isFloatingLayout: useFloatingLayout ? isFloatingLayout : false
 	};
 };
 

package/dist/FloatingChat/hooks/useScrollToBottom.js

@@ -1,8 +1,15 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 //#region src/components/FloatingChat/hooks/useScrollToBottom.ts
-const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30 }) => {
+const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30, useFloatingLayout = false, footerHeight = 120, isOpen = true }) => {
 	const [showScrollButton, setShowScrollButton] = useState(false);
+	const [isFloatingLayout, setIsFloatingLayout] = useState(false);
+	const isTransitioningLayoutRef = useRef(false);
+	const lastScrollTopRef = useRef(0);
+	const scrollDirectionRef = useRef(null);
+	const isInitialMountRef = useRef(true);
+	const previousIsOpenRef = useRef(isOpen);
+	const blockLayoutChangeRef = useRef(false);
 	const getScrollableContainer = useCallback(() => {
 		return messagesRef.current?.closest(".envive-tw-overflow-y-auto");
 	}, [messagesRef]);
@@ -12,36 +19,127 @@ const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThr
 		const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
 		return scrollHeight - scrollTop - clientHeight < scrollThreshold;
 	}, [getScrollableContainer, scrollThreshold]);
+	useEffect(() => {
+		if (isOpen && !previousIsOpenRef.current) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			isTransitioningLayoutRef.current = false;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+		previousIsOpenRef.current = isOpen;
+	}, [isOpen]);
+	useEffect(() => {
+		if (useFloatingLayout) {
+			setIsFloatingLayout(false);
+			setShowScrollButton(false);
+			isInitialMountRef.current = true;
+			blockLayoutChangeRef.current = true;
+			setTimeout(() => {
+				blockLayoutChangeRef.current = false;
+			}, 500);
+		}
+	}, [useFloatingLayout]);
+	useEffect(() => {
+		if (!useFloatingLayout) return;
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return;
+		const shouldBeFloating = showScrollButton;
+		if (shouldBeFloating !== isFloatingLayout && !isTransitioningLayoutRef.current) {
+			isTransitioningLayoutRef.current = true;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			const scrollFromBottom = scrollHeight - scrollTop - clientHeight;
+			setIsFloatingLayout(shouldBeFloating);
+			requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					setTimeout(() => {
+						const newScrollTop = scrollableContainer.scrollHeight - scrollableContainer.clientHeight - scrollFromBottom;
+						if (scrollFromBottom > scrollThreshold) scrollableContainer.scrollTop = Math.max(0, newScrollTop);
+						setTimeout(() => {
+							isTransitioningLayoutRef.current = false;
+						}, 250);
+					}, 50);
+				});
+			});
+		}
+	}, [
+		showScrollButton,
+		isFloatingLayout,
+		getScrollableContainer,
+		useFloatingLayout,
+		scrollThreshold
+	]);
 	useEffect(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (scrollableContainer) requestAnimationFrame(() => {
 			scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
 			setShowScrollButton(false);
+			if (useFloatingLayout) {
+				setIsFloatingLayout(false);
+				isInitialMountRef.current = true;
+			}
 		});
-	}, [...autoScrollDependencies, getScrollableContainer]);
+	}, [
+		...autoScrollDependencies,
+		getScrollableContainer,
+		useFloatingLayout
+	]);
 	useEffect(() => {
 		const scrollableContainer = getScrollableContainer();
 		if (!scrollableContainer) return;
 		const handleScroll = () => {
-			setShowScrollButton(!checkIfScrolledToBottom());
+			if (isTransitioningLayoutRef.current || blockLayoutChangeRef.current) return;
+			const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+			if (scrollTop > lastScrollTopRef.current) scrollDirectionRef.current = "down";
+			else if (scrollTop < lastScrollTopRef.current) scrollDirectionRef.current = "up";
+			lastScrollTopRef.current = scrollTop;
+			const contentBelowViewport = scrollHeight - scrollTop - clientHeight;
+			const upThreshold = scrollThreshold * 2;
+			if (showScrollButton) {
+				if (scrollDirectionRef.current === "down") {
+					if (contentBelowViewport <= footerHeight + 40) setShowScrollButton(false);
+				} else if (contentBelowViewport <= scrollThreshold) setShowScrollButton(false);
+			} else if (contentBelowViewport > upThreshold) setShowScrollButton(true);
 		};
 		scrollableContainer.addEventListener("scroll", handleScroll);
-		handleScroll();
+		if (!isInitialMountRef.current) handleScroll();
+		else isInitialMountRef.current = false;
 		return () => {
 			scrollableContainer.removeEventListener("scroll", handleScroll);
 		};
-	}, [getScrollableContainer, checkIfScrolledToBottom]);
+	}, [
+		getScrollableContainer,
+		checkIfScrolledToBottom,
+		scrollThreshold,
+		showScrollButton,
+		footerHeight
+	]);
 	return {
 		showScrollButton,
 		scrollToBottom: useCallback(() => {
 			const scrollableContainer = getScrollableContainer();
-			if (scrollableContainer) requestAnimationFrame(() => {
-				scrollableContainer.scrollTo({
-					top: scrollableContainer.scrollHeight,
-					behavior: "smooth"
+			if (scrollableContainer) {
+				blockLayoutChangeRef.current = true;
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						const targetScroll = scrollableContainer.scrollHeight;
+						scrollableContainer.scrollTo({
+							top: targetScroll,
+							behavior: "smooth"
+						});
+						setTimeout(() => {
+							blockLayoutChangeRef.current = false;
+							setShowScrollButton(false);
+							if (useFloatingLayout) setIsFloatingLayout(false);
+						}, 500);
+					});
 				});
-			});
-		}, [getScrollableContainer])
+			}
+		}, [getScrollableContainer, useFloatingLayout]),
+		isFloatingLayout: useFloatingLayout ? isFloatingLayout : false
 	};
 };
 

package/dist/FloatingChat/hooks/useSnapSetup.cjs

@@ -22,11 +22,9 @@ const useSnapSetup = ({ isFloatingChatOpen }) => {
 	const snap100Percent = 0;
 	const mobileHeaderHeight = (0, framer_motion.useTransform)(animationKey, [snap100Percent, snap43Percent], [56, 0]);
 	const [shouldShowHeader, setShouldShowHeader] = (0, react.useState)(false);
-	const [shouldShowScrolled, setShouldShowScrolled] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
 		return animationKey.on("change", (value) => {
 			setShouldShowHeader(value < snap43Percent - 10);
-			setShouldShowScrolled(value > snap43Percent);
 		});
 	}, [animationKey, snap43Percent]);
 	const isFullView = isMobile && currentSnapPercentage === 100;
@@ -49,7 +47,6 @@ const useSnapSetup = ({ isFloatingChatOpen }) => {
 		snap43Percent,
 		snap100Percent,
 		shouldShowHeader,
-		shouldShowScrolled,
 		isFullView,
 		isPartialView
 	};

package/dist/FloatingChat/hooks/useSnapSetup.js

@@ -21,11 +21,9 @@ const useSnapSetup = ({ isFloatingChatOpen }) => {
 	const snap100Percent = 0;
 	const mobileHeaderHeight = useTransform(animationKey, [snap100Percent, snap43Percent], [56, 0]);
 	const [shouldShowHeader, setShouldShowHeader] = useState(false);
-	const [shouldShowScrolled, setShouldShowScrolled] = useState(false);
 	useEffect(() => {
 		return animationKey.on("change", (value) => {
 			setShouldShowHeader(value < snap43Percent - 10);
-			setShouldShowScrolled(value > snap43Percent);
 		});
 	}, [animationKey, snap43Percent]);
 	const isFullView = isMobile && currentSnapPercentage === 100;
@@ -48,7 +46,6 @@ const useSnapSetup = ({ isFloatingChatOpen }) => {
 		snap43Percent,
 		snap100Percent,
 		shouldShowHeader,
-		shouldShowScrolled,
 		isFullView,
 		isPartialView
 	};

package/dist/FloatingChat/types/types.d.cts

@@ -1,6 +1,7 @@
 import { Theme } from "../../tokens/theme/theme.cjs";
 import { SalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
+import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
 //#region src/components/FloatingChat/types/types.d.ts
 
@@ -25,11 +26,6 @@ interface FloatingChatProps {
    * Test identifier for testing utilities.
    */
   testId?: string;
-  /**
-   * Whether the chat is in a loading state.
-   * @todo Needs to implement isLoading functionality.
-   */
-  isLoading?: boolean;
   /**
    * Theme variant to apply to the chat interface.
    * @default Theme.GLOBAL_CUSTOM
@@ -63,6 +59,10 @@ interface FloatingChatProps {
    * Whether the chat is open.
    */
   isFloatingChatOpen: boolean;
+  /**
+   * Hardcopy content to display in the chat.
+   */
+  hardcopyContent: HardcopyResponse;
 }
 //#endregion
 export { FloatingChatProps };

package/dist/FloatingChat/types/types.d.ts

@@ -1,6 +1,7 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { SalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
+import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 
 //#region src/components/FloatingChat/types/types.d.ts
 
@@ -25,11 +26,6 @@ interface FloatingChatProps {
    * Test identifier for testing utilities.
    */
   testId?: string;
-  /**
-   * Whether the chat is in a loading state.
-   * @todo Needs to implement isLoading functionality.
-   */
-  isLoading?: boolean;
   /**
    * Theme variant to apply to the chat interface.
    * @default Theme.GLOBAL_CUSTOM
@@ -63,6 +59,10 @@ interface FloatingChatProps {
    * Whether the chat is open.
    */
   isFloatingChatOpen: boolean;
+  /**
+   * Hardcopy content to display in the chat.
+   */
+  hardcopyContent: HardcopyResponse;
 }
 //#endregion
 export { FloatingChatProps };

package/dist/FloatingChat/utils/functions.cjs

@@ -66,6 +66,7 @@ const getCleanOrders = (messages) => {
 	if (!order || lineItems.length === 0) return null;
 	return lineItems.map((item) => {
 		if (item.image && item.orderItemId && order.createdAt) return {
+			id: item.orderItemId,
 			productImages: [item.image],
 			orderStatus: item.fulfillmentDisplayStatus,
 			orderNumber: order.metadata.orderNumber,

package/dist/FloatingChat/utils/functions.js

@@ -65,6 +65,7 @@ const getCleanOrders = (messages) => {
 	if (!order || lineItems.length === 0) return null;
 	return lineItems.map((item) => {
 		if (item.image && item.orderItemId && order.createdAt) return {
+			id: item.orderItemId,
 			productImages: [item.image],
 			orderStatus: item.fulfillmentDisplayStatus,
 			orderNumber: order.metadata.orderNumber,

package/dist/Image/Image.d.cts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.cjs";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/Image/Image.d.ts
 
@@ -25,6 +25,6 @@ declare const Image: ({
   role,
   "aria-hidden": ariaHidden,
   ...rest
-}: ImageProps) => react_jsx_runtime21.JSX.Element;
+}: ImageProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 export { Image };

package/dist/Image/Image.d.ts

@@ -1,5 +1,5 @@
 import { ImageProps } from "./types/index.js";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/components/Image/Image.d.ts
 
@@ -25,6 +25,6 @@ declare const Image: ({
   role,
   "aria-hidden": ariaHidden,
   ...rest
-}: ImageProps) => react_jsx_runtime20.JSX.Element;
+}: ImageProps) => react_jsx_runtime22.JSX.Element;
 //#endregion
 export { Image };

package/dist/ImageGallery/ImageGallery.cjs

@@ -1,5 +1,5 @@
 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_index = require('../Image/types/index.cjs');
 const require_index$1 = require('./components/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/ImageGallery/ImageGallery.d.cts

@@ -1,5 +1,5 @@
 import { ImageGalleryProps } from "./types/types.cjs";
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/ImageGallery/ImageGallery.d.ts
 
@@ -40,6 +40,6 @@ declare const ImageGallery: ({
   "aria-describedby": ariaDescribedBy,
   role,
   "aria-hidden": ariaHidden
-}: ImageGalleryProps) => react_jsx_runtime26.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/ImageGallery/ImageGallery.d.ts

@@ -1,5 +1,5 @@
 import { ImageGalleryProps } from "./types/types.js";
-import * as react_jsx_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 
 //#region src/components/ImageGallery/ImageGallery.d.ts
 
@@ -40,6 +40,6 @@ declare const ImageGallery: ({
   "aria-describedby": ariaDescribedBy,
   role,
   "aria-hidden": ariaHidden
-}: ImageGalleryProps) => react_jsx_runtime30.JSX.Element;
+}: ImageGalleryProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 export { ImageGallery };

package/dist/ImageGallery/ImageGallery.js

@@ -1,4 +1,4 @@
-import { Theme } from "../tokens/theme/theme.js";
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { ImageAspectRatio, ImageObjectFit } from "../Image/types/index.js";
 import { ImageGalleryComponents } from "./components/index.js";
 import { jsx } from "react/jsx-runtime";

package/dist/ImageGallery/components/Layout.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
-const require_useResponsiveValue = require('../../utils/useResponsiveValue.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_Container = require('../../Container/Container.cjs');
+const require_useResponsiveValue = require('../../utils/useResponsiveValue.cjs');
 const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 const require_types = require('../types/types.cjs');
 const require_useGetContainerProperties = require('../hooks/useGetContainerProperties.cjs');

package/dist/ImageGallery/components/Layout.js

@@ -1,6 +1,6 @@
-import { Theme } from "../../tokens/theme/theme.js";
-import { useResponsiveValue } from "../../utils/useResponsiveValue.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { Container } from "../../Container/Container.js";
+import { useResponsiveValue } from "../../utils/useResponsiveValue.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
 import { ImageGalleryLayout } from "../types/types.js";
 import { useGetContainerProperties } from "../hooks/useGetContainerProperties.js";

package/dist/ImageGallery/types/types.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ImageAspectRatio, ImageObjectFit } from "../../Image/types/index.js";
 import { ResponsiveValue } from "../../utils/useResponsiveValue.js";
 

package/dist/ImageGallery/utils/functions.cjs

@@ -1,5 +1,5 @@
 const require_utils = require('../../DesignTokens/components/utils.cjs');
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_types = require('../types/types.cjs');
 
 //#region src/components/ImageGallery/utils/functions.ts

package/dist/ImageGallery/utils/functions.js

@@ -1,5 +1,5 @@
 import { getComputedCSSVariable } from "../../DesignTokens/components/utils.js";
-import { Theme, ThemeCSSVar } from "../../tokens/theme/theme.js";
+import { Theme, ThemeCSSVar } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ImageGalleryLayout } from "../types/types.js";
 
 //#region src/components/ImageGallery/utils/functions.ts

package/dist/MarkdownProcessor/MarkdownProcessor.d.cts

@@ -1,5 +1,5 @@
 import { MarkdownProcessorProps } from "./types/types.cjs";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
@@ -9,6 +9,6 @@ declare const MarkdownProcessor: ({
   textVariant,
   subTextVariant,
   subTextColor
-}: MarkdownProcessorProps) => react_jsx_runtime20.JSX.Element;
+}: MarkdownProcessorProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { MarkdownProcessor };

package/dist/MarkdownProcessor/MarkdownProcessor.d.ts

@@ -1,5 +1,5 @@
 import { MarkdownProcessorProps } from "./types/types.js";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/MarkdownProcessor.d.ts
 declare const MarkdownProcessor: ({
@@ -9,6 +9,6 @@ declare const MarkdownProcessor: ({
   textVariant,
   subTextVariant,
   subTextColor
-}: MarkdownProcessorProps) => react_jsx_runtime19.JSX.Element;
+}: MarkdownProcessorProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 export { MarkdownProcessor };

package/dist/MarkdownProcessor/components/MarkdownLink.cjs

@@ -1,11 +1,14 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../../Typography/types/index.cjs');
+require('../../Typography/index.cjs');
 const require_LinkButton = require('../../Message/components/LinkButton.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/MarkdownProcessor/components/MarkdownLink.tsx
 const MarkdownLink = ({ href, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LinkButton.LinkButton, {
 	url: href,
-	text: children?.toString()
+	text: children?.toString(),
+	typographyColor: require_index.TypographyColor.TEXT_SECONDARY
 });
 
 //#endregion

package/dist/MarkdownProcessor/components/MarkdownLink.js

@@ -1,10 +1,13 @@
+import { TypographyColor } from "../../Typography/types/index.js";
+import "../../Typography/index.js";
 import { LinkButton } from "../../Message/components/LinkButton.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/MarkdownProcessor/components/MarkdownLink.tsx
 const MarkdownLink = ({ href, children }) => /* @__PURE__ */ jsx(LinkButton, {
 	url: href,
-	text: children?.toString()
+	text: children?.toString(),
+	typographyColor: TypographyColor.TEXT_SECONDARY
 });
 
 //#endregion

package/dist/Message/components/AgentContent.cjs

@@ -1,15 +1,19 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_MarkdownProcessor = require('../../MarkdownProcessor/MarkdownProcessor.cjs');
 const require_LoadingSkeleton = require('./LoadingSkeleton.cjs');
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Message/components/AgentContent.tsx
+const MarkdownProcessor = (0, react.lazy)(async () => ({ default: (await Promise.resolve().then(() => require("../../MarkdownProcessor/MarkdownProcessor.cjs"))).MarkdownProcessor }));
 /**
 * Component that renders the message content for the agent.
 */
 const AgentContent = ({ content, isLoading = false }) => {
 	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingSkeleton.LoadingSkeleton, {});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MarkdownProcessor.MarkdownProcessor, { content });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingSkeleton.LoadingSkeleton, {}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownProcessor, { content })
+	});
 };
 
 //#endregion