@cossistant/react 0.0.26 → 0.0.28

package/support/components/content.js

@@ -0,0 +1,282 @@
+"use client";
+
+
+import { cn } from "../utils/index.js";
+import { useTriggerRef } from "../context/positioning.js";
+import { useSupportConfig } from "../store/support-store.js";
+import { SupportWindow } from "../../primitives/window.js";
+import { SlotProvider, useSlots } from "../context/slots.js";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
+import { AnimatePresence, motion } from "motion/react";
+
+//#region src/support/components/content.tsx
+/**
+* Convert side + align props to Floating UI placement
+*/
+function getPlacement(side, align) {
+	if (align === "center") return side;
+	return `${side}-${align}`;
+}
+/**
+* Get fallback positioning classes for when Floating UI is not available
+* (e.g., trigger ref not set, or avoidCollisions is false)
+*/
+function getFallbackPositioningClasses(side, align) {
+	return cn({
+		top: "md:bottom-full md:mb-4",
+		bottom: "md:top-full md:mt-4",
+		left: "md:right-full md:mr-4",
+		right: "md:left-full md:ml-4"
+	}[side], {
+		top: {
+			start: "md:left-0",
+			center: "md:left-1/2 md:-translate-x-1/2",
+			end: "md:right-0"
+		},
+		bottom: {
+			start: "md:left-0",
+			center: "md:left-1/2 md:-translate-x-1/2",
+			end: "md:right-0"
+		},
+		left: {
+			start: "md:top-0",
+			center: "md:top-1/2 md:-translate-y-1/2",
+			end: "md:bottom-0"
+		},
+		right: {
+			start: "md:top-0",
+			center: "md:top-1/2 md:-translate-y-1/2",
+			end: "md:bottom-0"
+		}
+	}[side][align]);
+}
+/**
+* Get fallback offset styles for static positioning
+*/
+function getFallbackOffsetStyle(side, sideOffset) {
+	if (sideOffset === 16) return;
+	return {
+		top: { marginBottom: sideOffset },
+		bottom: { marginTop: sideOffset },
+		left: { marginRight: sideOffset },
+		right: { marginLeft: sideOffset }
+	}[side];
+}
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React$1.useState(false);
+	React$1.useEffect(() => {
+		const mediaQuery = window.matchMedia("(max-width: 767px)");
+		setIsMobile(mediaQuery.matches);
+		const handler = (event) => {
+			setIsMobile(event.matches);
+		};
+		mediaQuery.addEventListener("change", handler);
+		return () => mediaQuery.removeEventListener("change", handler);
+	}, []);
+	return isMobile;
+}
+/**
+* Content component for the support window.
+* Uses Floating UI for automatic collision detection on desktop.
+* Fullscreen on mobile, floating on desktop.
+*
+* @example
+* // Basic usage (uses defaults: side="top", align="end")
+* <Support.Content />
+*
+* @example
+* // Custom positioning with collision avoidance
+* <Support.Content side="bottom" align="start" sideOffset={24} />
+*
+* @example
+* // Disable collision avoidance for static positioning
+* <Support.Content avoidCollisions={false} />
+*
+* @example
+* // Custom collision padding
+* <Support.Content collisionPadding={{ top: 16, bottom: 32 }} />
+*/
+const Content = ({ className, children, side = "top", align = "end", sideOffset = 16, avoidCollisions = true, collisionPadding = 8 }) => {
+	const [showScrollIndicator, setShowScrollIndicator] = React$1.useState(false);
+	const containerRef = React$1.useRef(null);
+	const hasEverPositionedRef = React$1.useRef(false);
+	const isMobile = useIsMobile();
+	const triggerRefContext = useTriggerRef();
+	const { isOpen } = useSupportConfig();
+	const middleware = React$1.useMemo(() => {
+		const middlewares = [offset(sideOffset)];
+		if (avoidCollisions) middlewares.push(flip({
+			padding: collisionPadding,
+			fallbackAxisSideDirection: "start"
+		}), shift({ padding: collisionPadding }));
+		return middlewares;
+	}, [
+		sideOffset,
+		avoidCollisions,
+		collisionPadding
+	]);
+	const triggerElement = triggerRefContext?.triggerElement ?? null;
+	const { refs, update, x, y, isPositioned } = useFloating({
+		placement: getPlacement(side, align),
+		strategy: "fixed",
+		middleware,
+		whileElementsMounted: autoUpdate,
+		open: isOpen,
+		elements: { reference: triggerElement }
+	});
+	const setFloatingRef = React$1.useCallback((node) => {
+		refs.setFloating(node);
+	}, [refs]);
+	React$1.useEffect(() => {
+		if (triggerElement && isOpen) requestAnimationFrame(() => {
+			update();
+		});
+	}, [
+		triggerElement,
+		isOpen,
+		update
+	]);
+	const useFloatingPositioning = avoidCollisions && !isMobile && triggerElement !== null;
+	const checkScroll = React$1.useCallback(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const { scrollTop, scrollHeight, clientHeight } = container;
+		const isScrollable = scrollHeight > clientHeight;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 5;
+		setShowScrollIndicator(isScrollable && !isAtBottom);
+	}, []);
+	React$1.useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		checkScroll();
+		const handleScroll = () => {
+			checkScroll();
+		};
+		container.addEventListener("scroll", handleScroll, { passive: true });
+		const resizeObserver = new ResizeObserver(() => {
+			checkScroll();
+		});
+		resizeObserver.observe(container);
+		const mutationObserver = new MutationObserver(() => {
+			checkScroll();
+		});
+		mutationObserver.observe(container, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		return () => {
+			container.removeEventListener("scroll", handleScroll);
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+		};
+	}, [checkScroll]);
+	if (isPositioned) hasEverPositionedRef.current = true;
+	const hasValidFloatingPosition = hasEverPositionedRef.current;
+	const computedStyles = React$1.useMemo(() => {
+		if (isMobile) return {};
+		if (useFloatingPositioning && hasValidFloatingPosition) return {
+			position: "fixed",
+			left: x,
+			top: y
+		};
+		return getFallbackOffsetStyle(side, sideOffset) ?? {};
+	}, [
+		isMobile,
+		useFloatingPositioning,
+		hasValidFloatingPosition,
+		x,
+		y,
+		side,
+		sideOffset
+	]);
+	const computedClassName = cn("flex flex-col overflow-hidden overscroll-none bg-co-background", "max-md:fixed max-md:inset-0 max-md:z-[9999]", "md:z-[9999] md:aspect-[9/17] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-md md:border md:border-co-border md:shadow md:dark:shadow-co-background-600/50", useFloatingPositioning && hasValidFloatingPosition ? "md:fixed" : cn("md:absolute", getFallbackPositioningClasses(side, align)), className);
+	return /* @__PURE__ */ jsx(SlotProvider, { children: /* @__PURE__ */ jsx(SupportWindow, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			animate: "visible",
+			className: computedClassName,
+			exit: "exit",
+			initial: "hidden",
+			ref: setFloatingRef,
+			style: computedStyles,
+			transition: {
+				default: { ease: "anticipate" },
+				layout: { duration: .3 }
+			},
+			variants: {
+				hidden: {
+					opacity: 0,
+					scale: .95,
+					filter: "blur(6px)"
+				},
+				visible: {
+					opacity: 1,
+					scale: 1,
+					filter: "blur(0px)"
+				},
+				exit: {
+					opacity: 0,
+					scale: .95,
+					filter: "blur(6px)"
+				}
+			},
+			children: /* @__PURE__ */ jsx(ContentInner, {
+				containerRef,
+				showScrollIndicator,
+				children
+			})
+		})
+	}) });
+};
+/**
+* Inner content component that consumes slots.
+* Separated to allow slot context to be established before consuming it.
+*/
+const ContentInner = ({ children, containerRef, showScrollIndicator }) => {
+	const { header, footer, hasCustomHeader, hasCustomFooter } = useSlots();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex h-full w-full flex-col",
+		children: [
+			hasCustomHeader && /* @__PURE__ */ jsx("div", {
+				className: "flex-shrink-0",
+				children: header
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex flex-1 flex-col overflow-y-auto", !hasCustomHeader && "pt-18"),
+				ref: containerRef,
+				children
+			}),
+			hasCustomFooter && /* @__PURE__ */ jsx("div", {
+				className: "flex-shrink-0",
+				children: footer
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, { children: showScrollIndicator && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(motion.div, {
+				animate: { opacity: 1 },
+				className: "pointer-events-none absolute inset-x-0 bottom-0 z-5 h-32 bg-gradient-to-t from-co-background via-co-background/70 to-transparent",
+				exit: { opacity: 0 },
+				initial: { opacity: 0 },
+				transition: {
+					duration: .3,
+					ease: "easeInOut"
+				}
+			}), /* @__PURE__ */ jsx(motion.div, {
+				animate: { opacity: .6 },
+				className: "pointer-events-none absolute inset-x-0 bottom-0 z-5 h-48 bg-gradient-to-t from-co-background/80 via-co-background/30 to-transparent",
+				exit: { opacity: 0 },
+				initial: { opacity: 0 },
+				transition: {
+					duration: .4,
+					ease: "easeInOut",
+					delay: .05
+				}
+			})] }) })
+		]
+	});
+};
+
+//#endregion
+export { Content };
+//# sourceMappingURL=content.js.map

package/support/components/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","names":["React","Content: React.FC<ContentPropsType>","Primitive.Window","ContentInner: React.FC<{\n\tchildren: React.ReactNode;\n\tcontainerRef: React.RefObject<HTMLDivElement | null>;\n\tshowScrollIndicator: boolean;\n}>"],"sources":["../../../src/support/components/content.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n\tautoUpdate,\n\tflip,\n\toffset,\n\ttype Placement,\n\tshift,\n\tuseFloating,\n} from \"@floating-ui/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport * as React from \"react\";\nimport * as Primitive from \"../../primitives\";\nimport { useTriggerRef } from \"../context/positioning\";\nimport { SlotProvider, useSlots } from \"../context/slots\";\nimport { useSupportConfig } from \"../store/support-store\";\nimport type {\n\tAlign,\n\tCollisionPadding,\n\tContentProps as ContentPropsType,\n\tSide,\n} from \"../types\";\nimport { cn } from \"../utils\";\n\nexport type { CollisionPadding, ContentProps } from \"../types\";\n\n// =============================================================================\n// Utils\n// =============================================================================\n\n/**\n * Convert side + align props to Floating UI placement\n */\nfunction getPlacement(side: Side, align: Align): Placement {\n\tif (align === \"center\") {\n\t\treturn side;\n\t}\n\treturn `${side}-${align}` as Placement;\n}\n\n/**\n * Get fallback positioning classes for when Floating UI is not available\n * (e.g., trigger ref not set, or avoidCollisions is false)\n */\nfunction getFallbackPositioningClasses(side: Side, align: Align): string {\n\tconst sideClasses: Record<Side, string> = {\n\t\ttop: \"md:bottom-full md:mb-4\",\n\t\tbottom: \"md:top-full md:mt-4\",\n\t\tleft: \"md:right-full md:mr-4\",\n\t\tright: \"md:left-full md:ml-4\",\n\t};\n\n\tconst alignClasses: Record<Side, Record<Align, string>> = {\n\t\ttop: {\n\t\t\tstart: \"md:left-0\",\n\t\t\tcenter: \"md:left-1/2 md:-translate-x-1/2\",\n\t\t\tend: \"md:right-0\",\n\t\t},\n\t\tbottom: {\n\t\t\tstart: \"md:left-0\",\n\t\t\tcenter: \"md:left-1/2 md:-translate-x-1/2\",\n\t\t\tend: \"md:right-0\",\n\t\t},\n\t\tleft: {\n\t\t\tstart: \"md:top-0\",\n\t\t\tcenter: \"md:top-1/2 md:-translate-y-1/2\",\n\t\t\tend: \"md:bottom-0\",\n\t\t},\n\t\tright: {\n\t\t\tstart: \"md:top-0\",\n\t\t\tcenter: \"md:top-1/2 md:-translate-y-1/2\",\n\t\t\tend: \"md:bottom-0\",\n\t\t},\n\t};\n\n\treturn cn(sideClasses[side], alignClasses[side][align]);\n}\n\n/**\n * Get fallback offset styles for static positioning\n */\nfunction getFallbackOffsetStyle(\n\tside: Side,\n\tsideOffset: number\n): React.CSSProperties | undefined {\n\tif (sideOffset === 16) {\n\t\treturn;\n\t}\n\n\tconst offsetMap: Record<Side, React.CSSProperties> = {\n\t\ttop: { marginBottom: sideOffset },\n\t\tbottom: { marginTop: sideOffset },\n\t\tleft: { marginRight: sideOffset },\n\t\tright: { marginLeft: sideOffset },\n\t};\n\n\treturn offsetMap[side];\n}\n\n// =============================================================================\n// Hook for responsive detection\n// =============================================================================\n\nfunction useIsMobile(): boolean {\n\tconst [isMobile, setIsMobile] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tconst mediaQuery = window.matchMedia(\"(max-width: 767px)\");\n\t\tsetIsMobile(mediaQuery.matches);\n\n\t\tconst handler = (event: MediaQueryListEvent) => {\n\t\t\tsetIsMobile(event.matches);\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", handler);\n\t\treturn () => mediaQuery.removeEventListener(\"change\", handler);\n\t}, []);\n\n\treturn isMobile;\n}\n\n// =============================================================================\n// Content Component\n// =============================================================================\n\n/**\n * Content component for the support window.\n * Uses Floating UI for automatic collision detection on desktop.\n * Fullscreen on mobile, floating on desktop.\n *\n * @example\n * // Basic usage (uses defaults: side=\"top\", align=\"end\")\n * <Support.Content />\n *\n * @example\n * // Custom positioning with collision avoidance\n * <Support.Content side=\"bottom\" align=\"start\" sideOffset={24} />\n *\n * @example\n * // Disable collision avoidance for static positioning\n * <Support.Content avoidCollisions={false} />\n *\n * @example\n * // Custom collision padding\n * <Support.Content collisionPadding={{ top: 16, bottom: 32 }} />\n */\nexport const Content: React.FC<ContentPropsType> = ({\n\tclassName,\n\tchildren,\n\tside = \"top\",\n\talign = \"end\",\n\tsideOffset = 16,\n\tavoidCollisions = true,\n\tcollisionPadding = 8,\n}) => {\n\tconst [showScrollIndicator, setShowScrollIndicator] = React.useState(false);\n\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\tconst hasEverPositionedRef = React.useRef(false);\n\tconst isMobile = useIsMobile();\n\tconst triggerRefContext = useTriggerRef();\n\tconst { isOpen } = useSupportConfig();\n\n\t// Set up Floating UI middleware\n\tconst middleware = React.useMemo(() => {\n\t\tconst middlewares = [offset(sideOffset)];\n\n\t\tif (avoidCollisions) {\n\t\t\tmiddlewares.push(\n\t\t\t\tflip({\n\t\t\t\t\tpadding: collisionPadding,\n\t\t\t\t\tfallbackAxisSideDirection: \"start\",\n\t\t\t\t}),\n\t\t\t\tshift({\n\t\t\t\t\tpadding: collisionPadding,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\n\t\treturn middlewares;\n\t}, [sideOffset, avoidCollisions, collisionPadding]);\n\n\t// Get trigger element from context (stored in state for reactivity)\n\tconst triggerElement = triggerRefContext?.triggerElement ?? null;\n\n\t// Initialize Floating UI with the trigger element as reference\n\t// Using strategy: 'fixed' because Content uses position: fixed (md:fixed class)\n\t// This ensures Floating UI calculates positions relative to the viewport\n\t// The `open` prop synchronizes Floating UI with visibility state for proper autoUpdate\n\tconst { refs, update, x, y, isPositioned } = useFloating({\n\t\tplacement: getPlacement(side, align),\n\t\tstrategy: \"fixed\",\n\t\tmiddleware,\n\t\twhileElementsMounted: autoUpdate,\n\t\topen: isOpen,\n\t\telements: {\n\t\t\treference: triggerElement,\n\t\t},\n\t});\n\n\t// Merge refs for the floating element - ensures proper ref forwarding with motion.div\n\tconst setFloatingRef = React.useCallback(\n\t\t(node: HTMLDivElement | null) => {\n\t\t\trefs.setFloating(node);\n\t\t},\n\t\t[refs]\n\t);\n\n\t// Force position recalculation when trigger element becomes available\n\t// This handles the case where content mounts before trigger\n\tReact.useEffect(() => {\n\t\tif (triggerElement && isOpen) {\n\t\t\t// Defer update to ensure DOM is ready\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tupdate();\n\t\t\t});\n\t\t}\n\t}, [triggerElement, isOpen, update]);\n\n\t// Determine if we should use Floating UI positioning\n\t// Only use Floating UI when trigger element is available\n\tconst useFloatingPositioning =\n\t\tavoidCollisions && !isMobile && triggerElement !== null;\n\n\t// Scroll indicator logic\n\tconst checkScroll = React.useCallback(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scrollTop, scrollHeight, clientHeight } = container;\n\t\tconst isScrollable = scrollHeight > clientHeight;\n\t\tconst isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 5;\n\n\t\tsetShowScrollIndicator(isScrollable && !isAtBottom);\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\tcheckScroll();\n\n\t\tconst handleScroll = () => {\n\t\t\tcheckScroll();\n\t\t};\n\n\t\tcontainer.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tresizeObserver.observe(container);\n\n\t\tconst mutationObserver = new MutationObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tmutationObserver.observe(container, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tcharacterData: true,\n\t\t});\n\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener(\"scroll\", handleScroll);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t};\n\t}, [checkScroll]);\n\n\t// Track when Floating UI has successfully positioned at least once\n\t// Using a ref to persist across renders - once positioned, always valid\n\t// This avoids the bug where (0,0) was wrongly treated as invalid\n\tif (isPositioned) {\n\t\thasEverPositionedRef.current = true;\n\t}\n\n\t// Check if Floating UI has successfully calculated valid positions\n\t// We use the ref to handle legitimate (0,0) positions correctly\n\tconst hasValidFloatingPosition = hasEverPositionedRef.current;\n\n\t// Compute styles based on positioning mode\n\t// Use raw x, y coordinates from Floating UI when available\n\tconst computedStyles = React.useMemo<React.CSSProperties>(() => {\n\t\tif (isMobile) {\n\t\t\t// Mobile: no positioning styles needed, handled by CSS classes\n\t\t\treturn {};\n\t\t}\n\n\t\tif (useFloatingPositioning && hasValidFloatingPosition) {\n\t\t\t// Desktop with Floating UI: use calculated coordinates\n\t\t\t// Using top/left instead of transform to avoid conflicts with motion animations\n\t\t\treturn {\n\t\t\t\tposition: \"fixed\" as const,\n\t\t\t\tleft: x,\n\t\t\t\ttop: y,\n\t\t\t};\n\t\t}\n\n\t\t// Desktop fallback: use static offset styles when Floating UI isn't ready\n\t\treturn getFallbackOffsetStyle(side, sideOffset) ?? {};\n\t}, [\n\t\tisMobile,\n\t\tuseFloatingPositioning,\n\t\thasValidFloatingPosition,\n\t\tx,\n\t\ty,\n\t\tside,\n\t\tsideOffset,\n\t]);\n\n\t// Compute className based on positioning mode\n\tconst computedClassName = cn(\n\t\t// Common base styles\n\t\t\"flex flex-col overflow-hidden overscroll-none bg-co-background\",\n\n\t\t// Mobile: fullscreen fixed\n\t\t\"max-md:fixed max-md:inset-0 max-md:z-[9999]\",\n\n\t\t// Desktop: floating window base styles\n\t\t\"md:z-[9999] md:aspect-[9/17] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-md md:border md:border-co-border md:shadow md:dark:shadow-co-background-600/50\",\n\n\t\t// Positioning mode specific styles\n\t\t// Use fixed positioning when Floating UI has valid coordinates,\n\t\t// otherwise use fallback absolute positioning with CSS classes\n\t\tuseFloatingPositioning && hasValidFloatingPosition\n\t\t\t? \"md:fixed\"\n\t\t\t: cn(\"md:absolute\", getFallbackPositioningClasses(side, align)),\n\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<SlotProvider>\n\t\t\t<Primitive.Window asChild>\n\t\t\t\t<motion.div\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tclassName={computedClassName}\n\t\t\t\t\texit=\"exit\"\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tref={setFloatingRef}\n\t\t\t\t\tstyle={computedStyles}\n\t\t\t\t\ttransition={{\n\t\t\t\t\t\tdefault: { ease: \"anticipate\" },\n\t\t\t\t\t\tlayout: { duration: 0.3 },\n\t\t\t\t\t}}\n\t\t\t\t\tvariants={{\n\t\t\t\t\t\thidden: { opacity: 0, scale: 0.95, filter: \"blur(6px)\" },\n\t\t\t\t\t\tvisible: { opacity: 1, scale: 1, filter: \"blur(0px)\" },\n\t\t\t\t\t\texit: { opacity: 0, scale: 0.95, filter: \"blur(6px)\" },\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ContentInner\n\t\t\t\t\t\tcontainerRef={containerRef}\n\t\t\t\t\t\tshowScrollIndicator={showScrollIndicator}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</ContentInner>\n\t\t\t\t</motion.div>\n\t\t\t</Primitive.Window>\n\t\t</SlotProvider>\n\t);\n};\n\n/**\n * Inner content component that consumes slots.\n * Separated to allow slot context to be established before consuming it.\n */\nconst ContentInner: React.FC<{\n\tchildren: React.ReactNode;\n\tcontainerRef: React.RefObject<HTMLDivElement | null>;\n\tshowScrollIndicator: boolean;\n}> = ({ children, containerRef, showScrollIndicator }) => {\n\tconst { header, footer, hasCustomHeader, hasCustomFooter } = useSlots();\n\n\treturn (\n\t\t<div className=\"relative flex h-full w-full flex-col\">\n\t\t\t{/* Custom header slot */}\n\t\t\t{hasCustomHeader && <div className=\"flex-shrink-0\">{header}</div>}\n\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex flex-1 flex-col overflow-y-auto\",\n\t\t\t\t\t// Only add top padding if no custom header (default header is absolute positioned)\n\t\t\t\t\t!hasCustomHeader && \"pt-18\"\n\t\t\t\t)}\n\t\t\t\tref={containerRef}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\n\t\t\t{/* Custom footer slot */}\n\t\t\t{hasCustomFooter && <div className=\"flex-shrink-0\">{footer}</div>}\n\n\t\t\t<AnimatePresence>\n\t\t\t\t{showScrollIndicator && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-32 bg-gradient-to-t from-co-background via-co-background/70 to-transparent\"\n\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\ttransition={{ duration: 0.3, ease: \"easeInOut\" }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{ opacity: 0.6 }}\n\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-48 bg-gradient-to-t from-co-background/80 via-co-background/30 to-transparent\"\n\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\ttransition={{ duration: 0.4, ease: \"easeInOut\", delay: 0.05 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n};\n"],"mappings":"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"}

package/support/components/conversation-button-link.js

@@ -1,8 +1,8 @@
 import { cn } from "../utils/index.js";
 import { Avatar } from "./avatar.js";
 import { BouncingDots } from "./typing-indicator.js";
-import { coButtonVariants } from "./button.js";
 import icons_default from "./icons.js";
+import { coButtonVariants } from "./button.js";
 import { useSupportText } from "../text/index.js";
 import { useConversationPreview } from "../../hooks/use-conversation-preview.js";
 import { ConversationStatus } from "@cossistant/types";

package/support/components/conversation-timeline.js

@@ -1,8 +1,8 @@
 import { cn } from "../utils/index.js";
 import { TypingIndicator } from "./typing-indicator.js";
 import { ConversationTimeline, ConversationTimelineContainer } from "../../primitives/conversation-timeline.js";
-import { useConversationTimeline } from "../../hooks/use-conversation-timeline.js";
 import { useTypingSound } from "../../hooks/use-typing-sound.js";
+import { useConversationTimeline } from "../../hooks/use-conversation-timeline.js";
 import { ConversationEvent } from "./conversation-event.js";
 import { TimelineMessageGroup } from "./timeline-message-group.js";
 import { useCallback, useMemo } from "react";
@@ -50,11 +50,11 @@ const ConversationTimelineList = ({ conversationId, items: timelineItems, classN
 	}, [seenNameLookup]);
 	return /* @__PURE__ */ jsx(ConversationTimeline, {
 		autoScroll: true,
-		className: cn("overflow-y-scroll scroll-smooth px-3 py-6", "co-scrollbar-thin", "h-full w-full", className),
+		className: cn("overflow-y-scroll px-3 py-6", "co-scrollbar-thin", "h-full w-full", className),
 		id: "conversation-timeline",
 		items: timelineItems,
 		children: /* @__PURE__ */ jsxs(ConversationTimelineContainer, {
-			className: "flex min-h-full w-full flex-col gap-3",
+			className: "flex min-h-full w-full flex-col gap-5",
 			children: [timeline.groupedMessages.items.map((item, index) => {
 				if (item.type === "timeline_event") {
 					const eventPart = extractEventPart(item.item);

package/support/components/conversation-timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-timeline.js","names":["EMPTY_SEEN_BY_IDS: readonly string[]","EMPTY_SEEN_BY_NAMES: readonly string[]","ConversationTimelineList: React.FC<ConversationTimelineProps>","names: string[]","PrimitiveConversationTimeline"],"sources":["../../../src/support/components/conversation-timeline.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport type {\n\tTimelineItem,\n\tTimelinePartEvent,\n} from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport { useConversationTimeline } from \"../../hooks/use-conversation-timeline\";\nimport { useTypingSound } from \"../../hooks/use-typing-sound\";\nimport {\n\tConversationTimelineContainer,\n\tConversationTimeline as PrimitiveConversationTimeline,\n} from \"../../primitives/conversation-timeline\";\nimport { cn } from \"../utils\";\nimport { ConversationEvent } from \"./conversation-event\";\nimport { TimelineMessageGroup } from \"./timeline-message-group\";\nimport { TypingIndicator, type TypingParticipant } from \"./typing-indicator\";\n\n// Helper to extract event part from timeline item\nfunction extractEventPart(item: TimelineItem): TimelinePartEvent | null {\n\tif (item.type !== \"event\") {\n\t\treturn null;\n\t}\n\n\tconst eventPart = item.parts.find(\n\t\t(part): part is TimelinePartEvent => part.type === \"event\"\n\t);\n\n\treturn eventPart || null;\n}\n\nconst EMPTY_SEEN_BY_IDS: readonly string[] = Object.freeze([]);\nconst EMPTY_SEEN_BY_NAMES: readonly string[] = Object.freeze([]);\n\nexport type ConversationTimelineToolProps = {\n\titem: TimelineItem;\n\tconversationId: string;\n};\n\nexport type ConversationTimelineToolDefinition = {\n\tcomponent: React.ComponentType<ConversationTimelineToolProps>;\n};\n\nexport type ConversationTimelineTools = Record<\n\tstring,\n\tConversationTimelineToolDefinition\n>;\n\nexport type ConversationTimelineProps = {\n\tconversationId: string;\n\titems: TimelineItem[];\n\tclassName?: string;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcurrentVisitorId?: string;\n\ttools?: ConversationTimelineTools;\n};\n\nexport const ConversationTimelineList: React.FC<ConversationTimelineProps> = ({\n\tconversationId,\n\titems: timelineItems,\n\tclassName,\n\tavailableAIAgents = [],\n\tavailableHumanAgents = [],\n\tcurrentVisitorId,\n\ttools,\n}) => {\n\tconst timeline = useConversationTimeline({\n\t\tconversationId,\n\t\titems: timelineItems,\n\t\tcurrentVisitorId,\n\t});\n\n\tconst typingIndicatorParticipants = useMemo(\n\t\t() =>\n\t\t\ttimeline.typingParticipants.map<TypingParticipant>((participant) => ({\n\t\t\t\tid: participant.id,\n\t\t\t\ttype: participant.type,\n\t\t\t})),\n\t\t[timeline.typingParticipants]\n\t);\n\n\t// Play typing sound when someone is typing\n\tuseTypingSound(typingIndicatorParticipants.length > 0, {\n\t\tvolume: 1,\n\t\tplaybackRate: 1.3,\n\t});\n\n\tconst seenNameLookup = useMemo(() => {\n\t\tconst map = new Map<string, string>();\n\n\t\tfor (const agent of availableHumanAgents) {\n\t\t\tif (agent.name) {\n\t\t\t\tmap.set(agent.id, agent.name);\n\t\t\t}\n\t\t}\n\n\t\tfor (const agent of availableAIAgents) {\n\t\t\tif (agent.name) {\n\t\t\t\tmap.set(agent.id, agent.name);\n\t\t\t}\n\t\t}\n\n\t\treturn map;\n\t}, [availableHumanAgents, availableAIAgents]);\n\n\tconst getSeenByNames = useCallback(\n\t\t(ids: readonly string[] = EMPTY_SEEN_BY_IDS): readonly string[] => {\n\t\t\tif (ids.length === 0 || seenNameLookup.size === 0) {\n\t\t\t\treturn EMPTY_SEEN_BY_NAMES;\n\t\t\t}\n\n\t\t\tconst uniqueNames = new Set<string>();\n\t\t\tconst names: string[] = [];\n\n\t\t\tfor (const id of ids) {\n\t\t\t\tconst name = seenNameLookup.get(id);\n\t\t\t\tif (!name || uniqueNames.has(name)) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tuniqueNames.add(name);\n\t\t\t\tnames.push(name);\n\t\t\t}\n\n\t\t\tif (names.length === 0) {\n\t\t\t\treturn EMPTY_SEEN_BY_NAMES;\n\t\t\t}\n\n\t\t\treturn Object.freeze(names);\n\t\t},\n\t\t[seenNameLookup]\n\t);\n\n\treturn (\n\t\t<PrimitiveConversationTimeline\n\t\t\tautoScroll={true}\n\t\t\tclassName={cn(\n\t\t\t\t\"overflow-y-scroll scroll-smooth px-3 py-6\",\n\t\t\t\t\"co-scrollbar-thin\",\n\t\t\t\t\"h-full w-full\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tid=\"conversation-timeline\"\n\t\t\titems={timelineItems}\n\t\t>\n\t\t\t<ConversationTimelineContainer className=\"flex min-h-full w-full flex-col gap-3\">\n\t\t\t\t{timeline.groupedMessages.items.map((item, index) => {\n\t\t\t\t\tif (item.type === \"timeline_event\") {\n\t\t\t\t\t\t// Extract event data from parts\n\t\t\t\t\t\tconst eventPart = extractEventPart(item.item);\n\n\t\t\t\t\t\t// Only render if we have valid event data\n\t\t\t\t\t\tif (!eventPart) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ConversationEvent\n\t\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\t\tcreatedAt={item.item.createdAt}\n\t\t\t\t\t\t\t\tevent={eventPart}\n\t\t\t\t\t\t\t\tkey={item.item.id ?? `timeline-event-${item.item.createdAt}`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (item.type === \"timeline_tool\") {\n\t\t\t\t\t\tconst toolName = item.tool ?? item.item.tool ?? item.item.type;\n\t\t\t\t\t\tconst toolDefinition = toolName ? tools?.[toolName] : undefined;\n\n\t\t\t\t\t\tif (!toolDefinition) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst ToolComponent = toolDefinition.component;\n\n\t\t\t\t\t\tconst toolKey =\n\t\t\t\t\t\t\titem.item.id ?? `${toolName}-${item.item.createdAt}-${index}`;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ToolComponent\n\t\t\t\t\t\t\t\tconversationId={conversationId}\n\t\t\t\t\t\t\t\titem={item.item}\n\t\t\t\t\t\t\t\tkey={toolKey}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Only show seen indicator on the LAST message group sent by the visitor\n\t\t\t\t\tconst isLastVisitorGroup =\n\t\t\t\t\t\tindex === timeline.lastVisitorMessageGroupIndex;\n\t\t\t\t\tconst seenByIds =\n\t\t\t\t\t\tisLastVisitorGroup && item.lastMessageId\n\t\t\t\t\t\t\t? timeline.groupedMessages.getMessageSeenBy(item.lastMessageId)\n\t\t\t\t\t\t\t: EMPTY_SEEN_BY_IDS;\n\t\t\t\t\tconst seenByNames =\n\t\t\t\t\t\tseenByIds.length > 0\n\t\t\t\t\t\t\t? getSeenByNames(seenByIds)\n\t\t\t\t\t\t\t: EMPTY_SEEN_BY_NAMES;\n\n\t\t\t\t\t// Use first timeline item ID as stable key\n\t\t\t\t\tconst groupKey =\n\t\t\t\t\t\titem.lastMessageId ??\n\t\t\t\t\t\titem.items?.[0]?.id ??\n\t\t\t\t\t\t`group-${item.items?.[0]?.createdAt ?? index}`;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TimelineMessageGroup\n\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\tcurrentVisitorId={currentVisitorId}\n\t\t\t\t\t\t\titems={item.items || []}\n\t\t\t\t\t\t\tkey={groupKey}\n\t\t\t\t\t\t\tseenByIds={seenByIds}\n\t\t\t\t\t\t\tseenByNames={seenByNames}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\t<div className=\"h-6 w-full\">\n\t\t\t\t\t{typingIndicatorParticipants.length > 0 ? (\n\t\t\t\t\t\t<TypingIndicator\n\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\tclassName=\"mt-2\"\n\t\t\t\t\t\t\tparticipants={typingIndicatorParticipants}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</ConversationTimelineContainer>\n\t\t</PrimitiveConversationTimeline>\n\t);\n};\n"],"mappings":";;;;;;;;;;;AAmBA,SAAS,iBAAiB,MAA8C;AACvE,KAAI,KAAK,SAAS,QACjB,QAAO;AAOR,QAJkB,KAAK,MAAM,MAC3B,SAAoC,KAAK,SAAS,QACnD,IAEmB;;AAGrB,MAAMA,oBAAuC,OAAO,OAAO,EAAE,CAAC;AAC9D,MAAMC,sBAAyC,OAAO,OAAO,EAAE,CAAC;AA0BhE,MAAaC,4BAAiE,EAC7E,gBACA,OAAO,eACP,WACA,oBAAoB,EAAE,EACtB,uBAAuB,EAAE,EACzB,kBACA,YACK;CACL,MAAM,WAAW,wBAAwB;EACxC;EACA,OAAO;EACP;EACA,CAAC;CAEF,MAAM,8BAA8B,cAElC,SAAS,mBAAmB,KAAwB,iBAAiB;EACpE,IAAI,YAAY;EAChB,MAAM,YAAY;EAClB,EAAE,EACJ,CAAC,SAAS,mBAAmB,CAC7B;AAGD,gBAAe,4BAA4B,SAAS,GAAG;EACtD,QAAQ;EACR,cAAc;EACd,CAAC;CAEF,MAAM,iBAAiB,cAAc;EACpC,MAAM,sBAAM,IAAI,KAAqB;AAErC,OAAK,MAAM,SAAS,qBACnB,KAAI,MAAM,KACT,KAAI,IAAI,MAAM,IAAI,MAAM,KAAK;AAI/B,OAAK,MAAM,SAAS,kBACnB,KAAI,MAAM,KACT,KAAI,IAAI,MAAM,IAAI,MAAM,KAAK;AAI/B,SAAO;IACL,CAAC,sBAAsB,kBAAkB,CAAC;CAE7C,MAAM,iBAAiB,aACrB,MAAyB,sBAAyC;AAClE,MAAI,IAAI,WAAW,KAAK,eAAe,SAAS,EAC/C,QAAO;EAGR,MAAM,8BAAc,IAAI,KAAa;EACrC,MAAMC,QAAkB,EAAE;AAE1B,OAAK,MAAM,MAAM,KAAK;GACrB,MAAM,OAAO,eAAe,IAAI,GAAG;AACnC,OAAI,CAAC,QAAQ,YAAY,IAAI,KAAK,CACjC;AAGD,eAAY,IAAI,KAAK;AACrB,SAAM,KAAK,KAAK;;AAGjB,MAAI,MAAM,WAAW,EACpB,QAAO;AAGR,SAAO,OAAO,OAAO,MAAM;IAE5B,CAAC,eAAe,CAChB;AAED,QACC,oBAACC;EACA,YAAY;EACZ,WAAW,GACV,6CACA,qBACA,iBACA,UACA;EACD,IAAG;EACH,OAAO;YAEP,qBAAC;GAA8B,WAAU;cACvC,SAAS,gBAAgB,MAAM,KAAK,MAAM,UAAU;AACpD,QAAI,KAAK,SAAS,kBAAkB;KAEnC,MAAM,YAAY,iBAAiB,KAAK,KAAK;AAG7C,SAAI,CAAC,UACJ,QAAO;AAGR,YACC,oBAAC;MACmB;MACG;MACtB,WAAW,KAAK,KAAK;MACrB,OAAO;QACF,KAAK,KAAK,MAAM,kBAAkB,KAAK,KAAK,YAChD;;AAIJ,QAAI,KAAK,SAAS,iBAAiB;KAClC,MAAM,WAAW,KAAK,QAAQ,KAAK,KAAK,QAAQ,KAAK,KAAK;KAC1D,MAAM,iBAAiB,WAAW,QAAQ,YAAY;AAEtD,SAAI,CAAC,eACJ,QAAO;KAGR,MAAM,gBAAgB,eAAe;KAErC,MAAM,UACL,KAAK,KAAK,MAAM,GAAG,SAAS,GAAG,KAAK,KAAK,UAAU,GAAG;AAEvD,YACC,oBAAC;MACgB;MAChB,MAAM,KAAK;QACN,QACJ;;IAOJ,MAAM,YADL,UAAU,SAAS,gCAEG,KAAK,gBACxB,SAAS,gBAAgB,iBAAiB,KAAK,cAAc,GAC7D;IACJ,MAAM,cACL,UAAU,SAAS,IAChB,eAAe,UAAU,GACzB;IAGJ,MAAM,WACL,KAAK,iBACL,KAAK,QAAQ,IAAI,MACjB,SAAS,KAAK,QAAQ,IAAI,aAAa;AAExC,WACC,oBAAC;KACmB;KACG;KACJ;KAClB,OAAO,KAAK,SAAS,EAAE;KAEZ;KACE;OAFR,SAGJ;KAEF,EACF,oBAAC;IAAI,WAAU;cACb,4BAA4B,SAAS,IACrC,oBAAC;KACmB;KACG;KACtB,WAAU;KACV,cAAc;MACb,GACC;KACC;IACyB;GACD"}
+{"version":3,"file":"conversation-timeline.js","names":["EMPTY_SEEN_BY_IDS: readonly string[]","EMPTY_SEEN_BY_NAMES: readonly string[]","ConversationTimelineList: React.FC<ConversationTimelineProps>","names: string[]","PrimitiveConversationTimeline"],"sources":["../../../src/support/components/conversation-timeline.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport type {\n\tTimelineItem,\n\tTimelinePartEvent,\n} from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport { useConversationTimeline } from \"../../hooks/use-conversation-timeline\";\nimport { useTypingSound } from \"../../hooks/use-typing-sound\";\nimport {\n\tConversationTimelineContainer,\n\tConversationTimeline as PrimitiveConversationTimeline,\n} from \"../../primitives/conversation-timeline\";\nimport { cn } from \"../utils\";\nimport { ConversationEvent } from \"./conversation-event\";\nimport { TimelineMessageGroup } from \"./timeline-message-group\";\nimport { TypingIndicator, type TypingParticipant } from \"./typing-indicator\";\n\n// Helper to extract event part from timeline item\nfunction extractEventPart(item: TimelineItem): TimelinePartEvent | null {\n\tif (item.type !== \"event\") {\n\t\treturn null;\n\t}\n\n\tconst eventPart = item.parts.find(\n\t\t(part): part is TimelinePartEvent => part.type === \"event\"\n\t);\n\n\treturn eventPart || null;\n}\n\nconst EMPTY_SEEN_BY_IDS: readonly string[] = Object.freeze([]);\nconst EMPTY_SEEN_BY_NAMES: readonly string[] = Object.freeze([]);\n\nexport type ConversationTimelineToolProps = {\n\titem: TimelineItem;\n\tconversationId: string;\n};\n\nexport type ConversationTimelineToolDefinition = {\n\tcomponent: React.ComponentType<ConversationTimelineToolProps>;\n};\n\nexport type ConversationTimelineTools = Record<\n\tstring,\n\tConversationTimelineToolDefinition\n>;\n\nexport type ConversationTimelineProps = {\n\tconversationId: string;\n\titems: TimelineItem[];\n\tclassName?: string;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcurrentVisitorId?: string;\n\ttools?: ConversationTimelineTools;\n};\n\nexport const ConversationTimelineList: React.FC<ConversationTimelineProps> = ({\n\tconversationId,\n\titems: timelineItems,\n\tclassName,\n\tavailableAIAgents = [],\n\tavailableHumanAgents = [],\n\tcurrentVisitorId,\n\ttools,\n}) => {\n\tconst timeline = useConversationTimeline({\n\t\tconversationId,\n\t\titems: timelineItems,\n\t\tcurrentVisitorId,\n\t});\n\n\tconst typingIndicatorParticipants = useMemo(\n\t\t() =>\n\t\t\ttimeline.typingParticipants.map<TypingParticipant>((participant) => ({\n\t\t\t\tid: participant.id,\n\t\t\t\ttype: participant.type,\n\t\t\t})),\n\t\t[timeline.typingParticipants]\n\t);\n\n\t// Play typing sound when someone is typing\n\tuseTypingSound(typingIndicatorParticipants.length > 0, {\n\t\tvolume: 1,\n\t\tplaybackRate: 1.3,\n\t});\n\n\tconst seenNameLookup = useMemo(() => {\n\t\tconst map = new Map<string, string>();\n\n\t\tfor (const agent of availableHumanAgents) {\n\t\t\tif (agent.name) {\n\t\t\t\tmap.set(agent.id, agent.name);\n\t\t\t}\n\t\t}\n\n\t\tfor (const agent of availableAIAgents) {\n\t\t\tif (agent.name) {\n\t\t\t\tmap.set(agent.id, agent.name);\n\t\t\t}\n\t\t}\n\n\t\treturn map;\n\t}, [availableHumanAgents, availableAIAgents]);\n\n\tconst getSeenByNames = useCallback(\n\t\t(ids: readonly string[] = EMPTY_SEEN_BY_IDS): readonly string[] => {\n\t\t\tif (ids.length === 0 || seenNameLookup.size === 0) {\n\t\t\t\treturn EMPTY_SEEN_BY_NAMES;\n\t\t\t}\n\n\t\t\tconst uniqueNames = new Set<string>();\n\t\t\tconst names: string[] = [];\n\n\t\t\tfor (const id of ids) {\n\t\t\t\tconst name = seenNameLookup.get(id);\n\t\t\t\tif (!name || uniqueNames.has(name)) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tuniqueNames.add(name);\n\t\t\t\tnames.push(name);\n\t\t\t}\n\n\t\t\tif (names.length === 0) {\n\t\t\t\treturn EMPTY_SEEN_BY_NAMES;\n\t\t\t}\n\n\t\t\treturn Object.freeze(names);\n\t\t},\n\t\t[seenNameLookup]\n\t);\n\n\treturn (\n\t\t<PrimitiveConversationTimeline\n\t\t\tautoScroll={true}\n\t\t\tclassName={cn(\n\t\t\t\t\"overflow-y-scroll px-3 py-6\",\n\t\t\t\t\"co-scrollbar-thin\",\n\t\t\t\t\"h-full w-full\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tid=\"conversation-timeline\"\n\t\t\titems={timelineItems}\n\t\t>\n\t\t\t<ConversationTimelineContainer className=\"flex min-h-full w-full flex-col gap-5\">\n\t\t\t\t{timeline.groupedMessages.items.map((item, index) => {\n\t\t\t\t\tif (item.type === \"timeline_event\") {\n\t\t\t\t\t\t// Extract event data from parts\n\t\t\t\t\t\tconst eventPart = extractEventPart(item.item);\n\n\t\t\t\t\t\t// Only render if we have valid event data\n\t\t\t\t\t\tif (!eventPart) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ConversationEvent\n\t\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\t\tcreatedAt={item.item.createdAt}\n\t\t\t\t\t\t\t\tevent={eventPart}\n\t\t\t\t\t\t\t\tkey={item.item.id ?? `timeline-event-${item.item.createdAt}`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (item.type === \"timeline_tool\") {\n\t\t\t\t\t\tconst toolName = item.tool ?? item.item.tool ?? item.item.type;\n\t\t\t\t\t\tconst toolDefinition = toolName ? tools?.[toolName] : undefined;\n\n\t\t\t\t\t\tif (!toolDefinition) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst ToolComponent = toolDefinition.component;\n\n\t\t\t\t\t\tconst toolKey =\n\t\t\t\t\t\t\titem.item.id ?? `${toolName}-${item.item.createdAt}-${index}`;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ToolComponent\n\t\t\t\t\t\t\t\tconversationId={conversationId}\n\t\t\t\t\t\t\t\titem={item.item}\n\t\t\t\t\t\t\t\tkey={toolKey}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Only show seen indicator on the LAST message group sent by the visitor\n\t\t\t\t\tconst isLastVisitorGroup =\n\t\t\t\t\t\tindex === timeline.lastVisitorMessageGroupIndex;\n\t\t\t\t\tconst seenByIds =\n\t\t\t\t\t\tisLastVisitorGroup && item.lastMessageId\n\t\t\t\t\t\t\t? timeline.groupedMessages.getMessageSeenBy(item.lastMessageId)\n\t\t\t\t\t\t\t: EMPTY_SEEN_BY_IDS;\n\t\t\t\t\tconst seenByNames =\n\t\t\t\t\t\tseenByIds.length > 0\n\t\t\t\t\t\t\t? getSeenByNames(seenByIds)\n\t\t\t\t\t\t\t: EMPTY_SEEN_BY_NAMES;\n\n\t\t\t\t\t// Use first timeline item ID as stable key\n\t\t\t\t\tconst groupKey =\n\t\t\t\t\t\titem.lastMessageId ??\n\t\t\t\t\t\titem.items?.[0]?.id ??\n\t\t\t\t\t\t`group-${item.items?.[0]?.createdAt ?? index}`;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TimelineMessageGroup\n\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\tcurrentVisitorId={currentVisitorId}\n\t\t\t\t\t\t\titems={item.items || []}\n\t\t\t\t\t\t\tkey={groupKey}\n\t\t\t\t\t\t\tseenByIds={seenByIds}\n\t\t\t\t\t\t\tseenByNames={seenByNames}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\t<div className=\"h-6 w-full\">\n\t\t\t\t\t{typingIndicatorParticipants.length > 0 ? (\n\t\t\t\t\t\t<TypingIndicator\n\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\tclassName=\"mt-2\"\n\t\t\t\t\t\t\tparticipants={typingIndicatorParticipants}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</ConversationTimelineContainer>\n\t\t</PrimitiveConversationTimeline>\n\t);\n};\n"],"mappings":"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"}

package/support/components/header.js

@@ -1,7 +1,7 @@
 import { cn } from "../utils/index.js";
 import { useSupportConfig } from "../store/support-store.js";
-import { CoButton } from "./button.js";
 import icons_default from "./icons.js";
+import { CoButton } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/header.tsx

package/support/components/image-lightbox.d.ts

@@ -0,0 +1,49 @@
+import { TimelinePartImage } from "../../timeline-item.js";
+import * as React$1 from "react";
+
+//#region src/support/components/image-lightbox.d.ts
+type ImageLightboxProps = {
+  /**
+   * Array of images to display in the lightbox.
+   */
+  images: TimelinePartImage[];
+  /**
+   * Index of the initially selected image.
+   */
+  initialIndex?: number;
+  /**
+   * Whether the lightbox is open.
+   */
+  isOpen: boolean;
+  /**
+   * Callback when the lightbox should close.
+   */
+  onClose: () => void;
+  /**
+   * Optional className for the overlay.
+   */
+  className?: string;
+};
+/**
+ * Simple image lightbox/modal for viewing full-size images.
+ * Supports keyboard navigation (Escape to close, Arrow keys to navigate).
+ */
+declare function ImageLightbox({
+  images,
+  initialIndex,
+  isOpen,
+  onClose,
+  className
+}: ImageLightboxProps): React$1.ReactElement | null;
+/**
+ * Hook to manage lightbox state.
+ */
+declare function useLightbox(): {
+  isOpen: boolean;
+  selectedIndex: number;
+  openLightbox: (index?: number) => void;
+  closeLightbox: () => void;
+};
+//#endregion
+export { ImageLightbox, ImageLightboxProps, useLightbox };
+//# sourceMappingURL=image-lightbox.d.ts.map

package/support/components/image-lightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-lightbox.d.ts","names":[],"sources":["../../../src/support/components/image-lightbox.tsx"],"sourcesContent":[],"mappings":";;;;KASY,kBAAA;;AAAZ;AA2BA;EACC,MAAA,EAxBQ,iBAwBR,EAAA;EACA;;;EAGA,YAAA,CAAA,EAAA,MAAA;EACE;;;EAuJa,MAAA,EAAA,OAAW;;;;;;;;;;;;;;iBA7JX,aAAA;;;;;;GAMb,qBAAqB,OAAA,CAAM;;;;iBAuJd,WAAA,CAAA"}

package/support/components/image-lightbox.js

@@ -0,0 +1,142 @@
+"use client";
+
+
+import { cn } from "../utils/index.js";
+import icons_default from "./icons.js";
+import { useCallback, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+
+//#region src/support/components/image-lightbox.tsx
+/**
+* Simple image lightbox/modal for viewing full-size images.
+* Supports keyboard navigation (Escape to close, Arrow keys to navigate).
+*/
+function ImageLightbox({ images, initialIndex = 0, isOpen, onClose, className }) {
+	const [currentIndex, setCurrentIndex] = useState(initialIndex);
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		if (isOpen) setCurrentIndex(initialIndex);
+	}, [isOpen, initialIndex]);
+	const handleKeyDown = useCallback((event) => {
+		if (!isOpen) return;
+		switch (event.key) {
+			case "Escape":
+				onClose();
+				break;
+			case "ArrowLeft":
+				setCurrentIndex((prev) => prev > 0 ? prev - 1 : images.length - 1);
+				break;
+			case "ArrowRight":
+				setCurrentIndex((prev) => prev < images.length - 1 ? prev + 1 : 0);
+				break;
+			default: break;
+		}
+	}, [
+		isOpen,
+		images.length,
+		onClose
+	]);
+	useEffect(() => {
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [handleKeyDown]);
+	useEffect(() => {
+		if (isOpen) document.body.style.overflow = "hidden";
+		else document.body.style.overflow = "";
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [isOpen]);
+	if (!(mounted && isOpen) || images.length === 0) return null;
+	const currentImage = images[currentIndex];
+	const hasMultiple = images.length > 1;
+	const handlePrevious = () => {
+		setCurrentIndex((prev) => prev > 0 ? prev - 1 : images.length - 1);
+	};
+	const handleNext = () => {
+		setCurrentIndex((prev) => prev < images.length - 1 ? prev + 1 : 0);
+	};
+	const handleBackdropClick = (event) => {
+		if (event.target === event.currentTarget) onClose();
+	};
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		"aria-label": "Image viewer",
+		"aria-modal": "true",
+		className: cn("fixed inset-0 z-[99999] flex items-center justify-center bg-black/90 p-4", className),
+		onClick: handleBackdropClick,
+		onKeyDown: (e) => e.key === "Escape" && onClose(),
+		role: "dialog",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": "Close lightbox",
+				className: "absolute top-4 right-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/50",
+				onClick: onClose,
+				type: "button",
+				children: /* @__PURE__ */ jsx(icons_default, {
+					className: "h-6 w-6",
+					name: "close"
+				})
+			}),
+			hasMultiple && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+				"aria-label": "Previous image",
+				className: "absolute left-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/50",
+				onClick: handlePrevious,
+				type: "button",
+				children: /* @__PURE__ */ jsx(icons_default, {
+					className: "h-6 w-6",
+					name: "arrow-left"
+				})
+			}), /* @__PURE__ */ jsx("button", {
+				"aria-label": "Next image",
+				className: "absolute right-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/50",
+				onClick: handleNext,
+				type: "button",
+				children: /* @__PURE__ */ jsx(icons_default, {
+					className: "h-6 w-6",
+					name: "arrow-right"
+				})
+			})] }),
+			/* @__PURE__ */ jsx("img", {
+				alt: currentImage?.fileName || `Image ${currentIndex + 1}`,
+				className: "max-h-[90vh] max-w-[90vw] object-contain",
+				src: currentImage?.url
+			}),
+			hasMultiple && /* @__PURE__ */ jsxs("div", {
+				className: "-translate-x-1/2 absolute bottom-4 left-1/2 rounded-full bg-black/50 px-3 py-1 text-sm text-white",
+				children: [
+					currentIndex + 1,
+					" / ",
+					images.length
+				]
+			})
+		]
+	}), document.body);
+}
+/**
+* Hook to manage lightbox state.
+*/
+function useLightbox() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	return {
+		isOpen,
+		selectedIndex,
+		openLightbox: useCallback((index = 0) => {
+			setSelectedIndex(index);
+			setIsOpen(true);
+		}, []),
+		closeLightbox: useCallback(() => {
+			setIsOpen(false);
+		}, [])
+	};
+}
+
+//#endregion
+export { ImageLightbox, useLightbox };
+//# sourceMappingURL=image-lightbox.js.map

package/support/components/image-lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-lightbox.js","names":["Icon"],"sources":["../../../src/support/components/image-lightbox.tsx"],"sourcesContent":["\"use client\";\n\nimport type { TimelinePartImage } from \"@cossistant/types/api/timeline-item\";\nimport type * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../utils\";\nimport Icon from \"./icons\";\n\nexport type ImageLightboxProps = {\n\t/**\n\t * Array of images to display in the lightbox.\n\t */\n\timages: TimelinePartImage[];\n\t/**\n\t * Index of the initially selected image.\n\t */\n\tinitialIndex?: number;\n\t/**\n\t * Whether the lightbox is open.\n\t */\n\tisOpen: boolean;\n\t/**\n\t * Callback when the lightbox should close.\n\t */\n\tonClose: () => void;\n\t/**\n\t * Optional className for the overlay.\n\t */\n\tclassName?: string;\n};\n\n/**\n * Simple image lightbox/modal for viewing full-size images.\n * Supports keyboard navigation (Escape to close, Arrow keys to navigate).\n */\nexport function ImageLightbox({\n\timages,\n\tinitialIndex = 0,\n\tisOpen,\n\tonClose,\n\tclassName,\n}: ImageLightboxProps): React.ReactElement | null {\n\tconst [currentIndex, setCurrentIndex] = useState(initialIndex);\n\tconst [mounted, setMounted] = useState(false);\n\n\t// SSR safety: only render portal after component mounts on client\n\tuseEffect(() => {\n\t\tsetMounted(true);\n\t}, []);\n\n\t// Reset index when lightbox opens with new initial index\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tsetCurrentIndex(initialIndex);\n\t\t}\n\t}, [isOpen, initialIndex]);\n\n\t// Handle keyboard navigation\n\tconst handleKeyDown = useCallback(\n\t\t(event: KeyboardEvent) => {\n\t\t\tif (!isOpen) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tswitch (event.key) {\n\t\t\t\tcase \"Escape\":\n\t\t\t\t\tonClose();\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"ArrowLeft\":\n\t\t\t\t\tsetCurrentIndex((prev) => (prev > 0 ? prev - 1 : images.length - 1));\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"ArrowRight\":\n\t\t\t\t\tsetCurrentIndex((prev) => (prev < images.length - 1 ? prev + 1 : 0));\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t},\n\t\t[isOpen, images.length, onClose]\n\t);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [handleKeyDown]);\n\n\t// Prevent body scroll when lightbox is open\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tdocument.body.style.overflow = \"hidden\";\n\t\t} else {\n\t\t\tdocument.body.style.overflow = \"\";\n\t\t}\n\t\treturn () => {\n\t\t\tdocument.body.style.overflow = \"\";\n\t\t};\n\t}, [isOpen]);\n\n\t// Don't render until mounted (SSR safety) or if not open/no images\n\tif (!(mounted && isOpen) || images.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst currentImage = images[currentIndex];\n\tconst hasMultiple = images.length > 1;\n\n\tconst handlePrevious = () => {\n\t\tsetCurrentIndex((prev) => (prev > 0 ? prev - 1 : images.length - 1));\n\t};\n\n\tconst handleNext = () => {\n\t\tsetCurrentIndex((prev) => (prev < images.length - 1 ? prev + 1 : 0));\n\t};\n\n\tconst handleBackdropClick = (event: React.MouseEvent) => {\n\t\tif (event.target === event.currentTarget) {\n\t\t\tonClose();\n\t\t}\n\t};\n\n\t// Render via portal to document.body to escape any CSS containing blocks\n\t// (e.g., transforms on widget containers that break position: fixed)\n\treturn createPortal(\n\t\t// biome-ignore lint/a11y/noNoninteractiveElementInteractions: Dialog backdrop needs click handler for closing\n\t\t<div\n\t\t\taria-label=\"Image viewer\"\n\t\t\taria-modal=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-[99999] flex items-center justify-center bg-black/90 p-4\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClick={handleBackdropClick}\n\t\t\tonKeyDown={(e) => e.key === \"Escape\" && onClose()}\n\t\t\trole=\"dialog\"\n\t\t>\n\t\t\t{/* Close button */}\n\t\t\t<button\n\t\t\t\taria-label=\"Close lightbox\"\n\t\t\t\tclassName=\"absolute top-4 right-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/50\"\n\t\t\t\tonClick={onClose}\n\t\t\t\ttype=\"button\"\n\t\t\t>\n\t\t\t\t<Icon className=\"h-6 w-6\" name=\"close\" />\n\t\t\t</button>\n\n\t\t\t{/* Navigation buttons */}\n\t\t\t{hasMultiple && (\n\t\t\t\t<>\n\t\t\t\t\t<button\n\t\t\t\t\t\taria-label=\"Previous image\"\n\t\t\t\t\t\tclassName=\"absolute left-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/50\"\n\t\t\t\t\t\tonClick={handlePrevious}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon className=\"h-6 w-6\" name=\"arrow-left\" />\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\taria-label=\"Next image\"\n\t\t\t\t\t\tclassName=\"absolute right-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/50\"\n\t\t\t\t\t\tonClick={handleNext}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon className=\"h-6 w-6\" name=\"arrow-right\" />\n\t\t\t\t\t</button>\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t{/* Image */}\n\t\t\t{/* biome-ignore lint/performance/noImgElement: React package, not Next.js specific */}\n\t\t\t{/* biome-ignore lint/nursery/useImageSize: Dynamic image dimensions not known at render time */}\n\t\t\t<img\n\t\t\t\talt={currentImage?.fileName || `Image ${currentIndex + 1}`}\n\t\t\t\tclassName=\"max-h-[90vh] max-w-[90vw] object-contain\"\n\t\t\t\tsrc={currentImage?.url}\n\t\t\t/>\n\n\t\t\t{/* Image counter */}\n\t\t\t{hasMultiple && (\n\t\t\t\t<div className=\"-translate-x-1/2 absolute bottom-4 left-1/2 rounded-full bg-black/50 px-3 py-1 text-sm text-white\">\n\t\t\t\t\t{currentIndex + 1} / {images.length}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>,\n\t\tdocument.body\n\t);\n}\n\n/**\n * Hook to manage lightbox state.\n */\nexport function useLightbox() {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst [selectedIndex, setSelectedIndex] = useState(0);\n\n\tconst openLightbox = useCallback((index = 0) => {\n\t\tsetSelectedIndex(index);\n\t\tsetIsOpen(true);\n\t}, []);\n\n\tconst closeLightbox = useCallback(() => {\n\t\tsetIsOpen(false);\n\t}, []);\n\n\treturn {\n\t\tisOpen,\n\t\tselectedIndex,\n\t\topenLightbox,\n\t\tcloseLightbox,\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;AAoCA,SAAgB,cAAc,EAC7B,QACA,eAAe,GACf,QACA,SACA,aACiD;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,aAAa;CAC9D,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,iBAAgB;AACf,aAAW,KAAK;IACd,EAAE,CAAC;AAGN,iBAAgB;AACf,MAAI,OACH,iBAAgB,aAAa;IAE5B,CAAC,QAAQ,aAAa,CAAC;CAG1B,MAAM,gBAAgB,aACpB,UAAyB;AACzB,MAAI,CAAC,OACJ;AAGD,UAAQ,MAAM,KAAd;GACC,KAAK;AACJ,aAAS;AACT;GACD,KAAK;AACJ,qBAAiB,SAAU,OAAO,IAAI,OAAO,IAAI,OAAO,SAAS,EAAG;AACpE;GACD,KAAK;AACJ,qBAAiB,SAAU,OAAO,OAAO,SAAS,IAAI,OAAO,IAAI,EAAG;AACpE;GACD,QACC;;IAGH;EAAC;EAAQ,OAAO;EAAQ;EAAQ,CAChC;AAED,iBAAgB;AACf,WAAS,iBAAiB,WAAW,cAAc;AACnD,eAAa;AACZ,YAAS,oBAAoB,WAAW,cAAc;;IAErD,CAAC,cAAc,CAAC;AAGnB,iBAAgB;AACf,MAAI,OACH,UAAS,KAAK,MAAM,WAAW;MAE/B,UAAS,KAAK,MAAM,WAAW;AAEhC,eAAa;AACZ,YAAS,KAAK,MAAM,WAAW;;IAE9B,CAAC,OAAO,CAAC;AAGZ,KAAI,EAAE,WAAW,WAAW,OAAO,WAAW,EAC7C,QAAO;CAGR,MAAM,eAAe,OAAO;CAC5B,MAAM,cAAc,OAAO,SAAS;CAEpC,MAAM,uBAAuB;AAC5B,mBAAiB,SAAU,OAAO,IAAI,OAAO,IAAI,OAAO,SAAS,EAAG;;CAGrE,MAAM,mBAAmB;AACxB,mBAAiB,SAAU,OAAO,OAAO,SAAS,IAAI,OAAO,IAAI,EAAG;;CAGrE,MAAM,uBAAuB,UAA4B;AACxD,MAAI,MAAM,WAAW,MAAM,cAC1B,UAAS;;AAMX,QAAO,aAEN,qBAAC;EACA,cAAW;EACX,cAAW;EACX,WAAW,GACV,4EACA,UACA;EACD,SAAS;EACT,YAAY,MAAM,EAAE,QAAQ,YAAY,SAAS;EACjD,MAAK;;GAGL,oBAAC;IACA,cAAW;IACX,WAAU;IACV,SAAS;IACT,MAAK;cAEL,oBAACA;KAAK,WAAU;KAAU,MAAK;MAAU;KACjC;GAGR,eACA,4CACC,oBAAC;IACA,cAAW;IACX,WAAU;IACV,SAAS;IACT,MAAK;cAEL,oBAACA;KAAK,WAAU;KAAU,MAAK;MAAe;KACtC,EACT,oBAAC;IACA,cAAW;IACX,WAAU;IACV,SAAS;IACT,MAAK;cAEL,oBAACA;KAAK,WAAU;KAAU,MAAK;MAAgB;KACvC,IACP;GAMJ,oBAAC;IACA,KAAK,cAAc,YAAY,SAAS,eAAe;IACvD,WAAU;IACV,KAAK,cAAc;KAClB;GAGD,eACA,qBAAC;IAAI,WAAU;;KACb,eAAe;KAAE;KAAI,OAAO;;KACxB;;GAEF,EACN,SAAS,KACT;;;;;AAMF,SAAgB,cAAc;CAC7B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;AAWrD,QAAO;EACN;EACA;EACA,cAZoB,aAAa,QAAQ,MAAM;AAC/C,oBAAiB,MAAM;AACvB,aAAU,KAAK;KACb,EAAE,CAAC;EAUL,eARqB,kBAAkB;AACvC,aAAU,MAAM;KACd,EAAE,CAAC;EAOL"}

package/support/components/index.d.ts

@@ -1,11 +1,12 @@
 import { TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType } from "./typing-indicator.js";
-import { Bubble } from "./bubble.js";
-import { Container } from "./container.js";
+import { ContentProps } from "../types.js";
+import { Content } from "./content.js";
 import { ConversationEvent, ConversationEventProps } from "./conversation-event.js";
 import { ConversationTimelineList, ConversationTimelineProps } from "./conversation-timeline.js";
 import { Icon, IconName, IconProps, IconVariant } from "./icons.js";
 import { SendButton } from "./multimodal-input.js";
-import { SupportContent } from "./support-content.js";
+import { Root, RootProps } from "./root.js";
 import { TimelineMessageGroup, TimelineMessageGroupProps } from "./timeline-message-group.js";
 import { TimelineMessageItem, TimelineMessageItemProps } from "./timeline-message-item.js";
-export { Bubble, Container, ConversationEvent, type ConversationEventProps, ConversationTimelineList, type ConversationTimelineProps, Icon, type IconName, type IconProps, type IconVariant, SendButton, SupportContent, TimelineMessageGroup, type TimelineMessageGroupProps, TimelineMessageItem, type TimelineMessageItemProps, TypingIndicator, type TypingIndicatorProps, type TypingParticipant, type TypingParticipantType };
+import { DefaultTrigger, DefaultTriggerProps } from "./trigger.js";
+export { Content, type ContentProps, ConversationEvent, type ConversationEventProps, ConversationTimelineList, type ConversationTimelineProps, DefaultTrigger, type DefaultTriggerProps, Icon, type IconName, type IconProps, type IconVariant, Root, type RootProps, SendButton, TimelineMessageGroup, type TimelineMessageGroupProps, TimelineMessageItem, type TimelineMessageItemProps, TypingIndicator, type TypingIndicatorProps, type TypingParticipant, type TypingParticipantType };