@cossistant/react 0.0.1

package/support/components/text-effect.js

@@ -0,0 +1,221 @@
+"use client";
+
+
+import { cn } from "../utils/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+
+//#region src/support/components/text-effect.tsx
+const SPACE_REGEX = /(\s+)/;
+const defaultStaggerTimes = {
+	char: .03,
+	word: .05,
+	line: .1
+};
+const defaultContainerVariants = {
+	hidden: { opacity: 0 },
+	visible: {
+		opacity: 1,
+		transition: { staggerChildren: .05 }
+	},
+	exit: { transition: {
+		staggerChildren: .05,
+		staggerDirection: -1
+	} }
+};
+const defaultItemVariants = {
+	hidden: { opacity: 0 },
+	visible: { opacity: 1 },
+	exit: { opacity: 0 }
+};
+const presetVariants = {
+	blur: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: {
+				opacity: 0,
+				filter: "blur(12px)"
+			},
+			visible: {
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(12px)"
+			}
+		}
+	},
+	"fade-in-blur": {
+		container: defaultContainerVariants,
+		item: {
+			hidden: {
+				opacity: 0,
+				y: 20,
+				filter: "blur(12px)"
+			},
+			visible: {
+				opacity: 1,
+				y: 0,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				y: 20,
+				filter: "blur(12px)"
+			}
+		}
+	},
+	scale: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: {
+				opacity: 0,
+				scale: 0
+			},
+			visible: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: 0
+			}
+		}
+	},
+	fade: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: { opacity: 0 },
+			visible: { opacity: 1 },
+			exit: { opacity: 0 }
+		}
+	},
+	slide: {
+		container: defaultContainerVariants,
+		item: {
+			hidden: {
+				opacity: 0,
+				y: 20
+			},
+			visible: {
+				opacity: 1,
+				y: 0
+			},
+			exit: {
+				opacity: 0,
+				y: 20
+			}
+		}
+	}
+};
+const AnimationComponent = React.memo(({ segment, variants, per, segmentWrapperClassName }) => {
+	const content = per === "line" ? /* @__PURE__ */ jsx(motion.span, {
+		className: "block",
+		variants,
+		children: segment
+	}) : per === "word" ? /* @__PURE__ */ jsx(motion.span, {
+		"aria-hidden": "true",
+		className: "inline-block whitespace-pre",
+		variants,
+		children: segment
+	}) : /* @__PURE__ */ jsx(motion.span, {
+		className: "inline-block whitespace-pre",
+		children: segment.split("").map((char, charIndex) => /* @__PURE__ */ jsx(motion.span, {
+			"aria-hidden": "true",
+			className: "inline-block whitespace-pre",
+			variants,
+			children: char
+		}, `char-${charIndex}`))
+	});
+	if (!segmentWrapperClassName) return content;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(per === "line" ? "block" : "inline-block", segmentWrapperClassName),
+		children: content
+	});
+});
+AnimationComponent.displayName = "AnimationComponent";
+const splitText = (text, per) => {
+	if (per === "line") return text.split("\n");
+	return text.split(SPACE_REGEX);
+};
+const hasTransition = (variant) => {
+	if (!variant) return false;
+	return typeof variant === "object" && "transition" in variant;
+};
+const createVariantsWithTransition = (baseVariants, transition) => {
+	if (!transition) return baseVariants;
+	const { exit: _,...mainTransition } = transition;
+	return {
+		...baseVariants,
+		visible: {
+			...baseVariants.visible,
+			transition: {
+				...hasTransition(baseVariants.visible) ? baseVariants.visible.transition : {},
+				...mainTransition
+			}
+		},
+		exit: {
+			...baseVariants.exit,
+			transition: {
+				...hasTransition(baseVariants.exit) ? baseVariants.exit.transition : {},
+				...mainTransition,
+				staggerDirection: -1
+			}
+		}
+	};
+};
+function TextEffect({ children, per = "word", as = "p", variants, className, preset = "fade", delay = 0, speedReveal = 1, speedSegment = 1, trigger = true, onAnimationComplete, onAnimationStart, segmentWrapperClassName, containerTransition, segmentTransition, style }) {
+	const segments = splitText(Array.isArray(children) ? children.join("") : children, per);
+	const MotionTag = motion[as];
+	const baseVariants = preset ? presetVariants[preset] : {
+		container: defaultContainerVariants,
+		item: defaultItemVariants
+	};
+	const stagger = defaultStaggerTimes[per] / speedReveal;
+	const baseDuration = .3 / speedSegment;
+	const customStagger = hasTransition(variants?.container?.visible ?? {}) ? (variants?.container?.visible).transition?.staggerChildren : void 0;
+	const customDelay = hasTransition(variants?.container?.visible ?? {}) ? (variants?.container?.visible).transition?.delayChildren : void 0;
+	const computedVariants = {
+		container: createVariantsWithTransition(variants?.container || baseVariants.container, {
+			staggerChildren: customStagger ?? stagger,
+			delayChildren: customDelay ?? delay,
+			...containerTransition,
+			exit: {
+				staggerChildren: customStagger ?? stagger,
+				staggerDirection: -1
+			}
+		}),
+		item: createVariantsWithTransition(variants?.item || baseVariants.item, {
+			duration: baseDuration,
+			...segmentTransition
+		})
+	};
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "popLayout",
+		children: trigger && /* @__PURE__ */ jsxs(MotionTag, {
+			animate: "visible",
+			className,
+			exit: "exit",
+			initial: "hidden",
+			onAnimationComplete,
+			onAnimationStart,
+			style,
+			variants: computedVariants.container,
+			children: [per !== "line" ? /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children
+			}) : null, segments.map((segment, index) => /* @__PURE__ */ jsx(AnimationComponent, {
+				per,
+				segment,
+				segmentWrapperClassName,
+				variants: computedVariants.item
+			}, `${per}-${index}-${segment}`))]
+		})
+	});
+}
+
+//#endregion
+export { TextEffect };
+//# sourceMappingURL=text-effect.js.map

package/support/components/text-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-effect.js","names":["defaultStaggerTimes: Record<PerType, number>","defaultContainerVariants: Variants","defaultItemVariants: Variants","presetVariants: Record<\n\tPresetType,\n\t{ container: Variants; item: Variants }\n>","AnimationComponent: React.FC<{\n\tsegment: string;\n\tvariants: Variants;\n\tper: \"line\" | \"word\" | \"char\";\n\tsegmentWrapperClassName?: string;\n}>"],"sources":["../../../src/support/components/text-effect.tsx"],"sourcesContent":["\"use client\";\nimport type {\n\tTargetAndTransition,\n\tTransition,\n\tVariant,\n\tVariants,\n} from \"motion/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React from \"react\";\nimport { cn } from \"../utils\";\n\nexport type PresetType = \"blur\" | \"fade-in-blur\" | \"scale\" | \"fade\" | \"slide\";\n\nexport type PerType = \"word\" | \"char\" | \"line\";\n\nconst SPACE_REGEX = /(\\s+)/;\n\nexport type TextEffectProps = {\n\tchildren: string | string[];\n\tper?: PerType;\n\tas?: keyof React.JSX.IntrinsicElements;\n\tvariants?: {\n\t\tcontainer?: Variants;\n\t\titem?: Variants;\n\t};\n\tclassName?: string;\n\tpreset?: PresetType;\n\tdelay?: number;\n\tspeedReveal?: number;\n\tspeedSegment?: number;\n\ttrigger?: boolean;\n\tonAnimationComplete?: () => void;\n\tonAnimationStart?: () => void;\n\tsegmentWrapperClassName?: string;\n\tcontainerTransition?: Transition;\n\tsegmentTransition?: Transition;\n\tstyle?: React.CSSProperties;\n};\n\nconst defaultStaggerTimes: Record<PerType, number> = {\n\tchar: 0.03,\n\tword: 0.05,\n\tline: 0.1,\n};\n\nconst defaultContainerVariants: Variants = {\n\thidden: { opacity: 0 },\n\tvisible: {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\tstaggerChildren: 0.05,\n\t\t},\n\t},\n\texit: {\n\t\ttransition: { staggerChildren: 0.05, staggerDirection: -1 },\n\t},\n};\n\nconst defaultItemVariants: Variants = {\n\thidden: { opacity: 0 },\n\tvisible: {\n\t\topacity: 1,\n\t},\n\texit: { opacity: 0 },\n};\n\nconst presetVariants: Record<\n\tPresetType,\n\t{ container: Variants; item: Variants }\n> = {\n\tblur: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, filter: \"blur(12px)\" },\n\t\t\tvisible: { opacity: 1, filter: \"blur(0px)\" },\n\t\t\texit: { opacity: 0, filter: \"blur(12px)\" },\n\t\t},\n\t},\n\t\"fade-in-blur\": {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\texit: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t},\n\t},\n\tscale: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, scale: 0 },\n\t\t\tvisible: { opacity: 1, scale: 1 },\n\t\t\texit: { opacity: 0, scale: 0 },\n\t\t},\n\t},\n\tfade: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0 },\n\t\t\tvisible: { opacity: 1 },\n\t\t\texit: { opacity: 0 },\n\t\t},\n\t},\n\tslide: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, y: 20 },\n\t\t\tvisible: { opacity: 1, y: 0 },\n\t\t\texit: { opacity: 0, y: 20 },\n\t\t},\n\t},\n};\n\nconst AnimationComponent: React.FC<{\n\tsegment: string;\n\tvariants: Variants;\n\tper: \"line\" | \"word\" | \"char\";\n\tsegmentWrapperClassName?: string;\n}> = React.memo(({ segment, variants, per, segmentWrapperClassName }) => {\n\tconst content =\n\t\tper === \"line\" ? (\n\t\t\t<motion.span className=\"block\" variants={variants}>\n\t\t\t\t{segment}\n\t\t\t</motion.span>\n\t\t) : per === \"word\" ? (\n\t\t\t<motion.span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"inline-block whitespace-pre\"\n\t\t\t\tvariants={variants}\n\t\t\t>\n\t\t\t\t{segment}\n\t\t\t</motion.span>\n\t\t) : (\n\t\t\t<motion.span className=\"inline-block whitespace-pre\">\n\t\t\t\t{segment.split(\"\").map((char, charIndex) => (\n\t\t\t\t\t<motion.span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"inline-block whitespace-pre\"\n\t\t\t\t\t\tkey={`char-${charIndex}`}\n\t\t\t\t\t\tvariants={variants}\n\t\t\t\t\t>\n\t\t\t\t\t\t{char}\n\t\t\t\t\t</motion.span>\n\t\t\t\t))}\n\t\t\t</motion.span>\n\t\t);\n\n\tif (!segmentWrapperClassName) {\n\t\treturn content;\n\t}\n\n\tconst defaultWrapperClassName = per === \"line\" ? \"block\" : \"inline-block\";\n\n\treturn (\n\t\t<span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>\n\t\t\t{content}\n\t\t</span>\n\t);\n});\n\nAnimationComponent.displayName = \"AnimationComponent\";\n\nconst splitText = (text: string, per: PerType) => {\n\tif (per === \"line\") {\n\t\treturn text.split(\"\\n\");\n\t}\n\treturn text.split(SPACE_REGEX);\n};\n\nconst hasTransition = (\n\tvariant?: Variant\n): variant is TargetAndTransition & { transition?: Transition } => {\n\tif (!variant) {\n\t\treturn false;\n\t}\n\treturn typeof variant === \"object\" && \"transition\" in variant;\n};\n\nconst createVariantsWithTransition = (\n\tbaseVariants: Variants,\n\ttransition?: Transition & { exit?: Transition }\n): Variants => {\n\tif (!transition) {\n\t\treturn baseVariants;\n\t}\n\n\tconst { exit: _, ...mainTransition } = transition;\n\n\treturn {\n\t\t...baseVariants,\n\t\tvisible: {\n\t\t\t...baseVariants.visible,\n\t\t\ttransition: {\n\t\t\t\t...(hasTransition(baseVariants.visible)\n\t\t\t\t\t? baseVariants.visible.transition\n\t\t\t\t\t: {}),\n\t\t\t\t...mainTransition,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\t...baseVariants.exit,\n\t\t\ttransition: {\n\t\t\t\t...(hasTransition(baseVariants.exit)\n\t\t\t\t\t? baseVariants.exit.transition\n\t\t\t\t\t: {}),\n\t\t\t\t...mainTransition,\n\t\t\t\tstaggerDirection: -1,\n\t\t\t},\n\t\t},\n\t};\n};\n\nexport function TextEffect({\n\tchildren,\n\tper = \"word\",\n\tas = \"p\",\n\tvariants,\n\tclassName,\n\tpreset = \"fade\",\n\tdelay = 0,\n\tspeedReveal = 1,\n\tspeedSegment = 1,\n\ttrigger = true,\n\tonAnimationComplete,\n\tonAnimationStart,\n\tsegmentWrapperClassName,\n\tcontainerTransition,\n\tsegmentTransition,\n\tstyle,\n}: TextEffectProps) {\n\tconst segments = splitText(\n\t\tArray.isArray(children) ? children.join(\"\") : children,\n\t\tper\n\t);\n\tconst MotionTag = motion[as as keyof typeof motion] as typeof motion.div;\n\n\tconst baseVariants = preset\n\t\t? presetVariants[preset]\n\t\t: { container: defaultContainerVariants, item: defaultItemVariants };\n\n\tconst stagger = defaultStaggerTimes[per] / speedReveal;\n\n\tconst baseDuration = 0.3 / speedSegment;\n\n\tconst customStagger = hasTransition(variants?.container?.visible ?? {})\n\t\t? (variants?.container?.visible as TargetAndTransition).transition\n\t\t\t\t?.staggerChildren\n\t\t: undefined;\n\n\tconst customDelay = hasTransition(variants?.container?.visible ?? {})\n\t\t? (variants?.container?.visible as TargetAndTransition).transition\n\t\t\t\t?.delayChildren\n\t\t: undefined;\n\n\tconst computedVariants = {\n\t\tcontainer: createVariantsWithTransition(\n\t\t\tvariants?.container || baseVariants.container,\n\t\t\t{\n\t\t\t\tstaggerChildren: customStagger ?? stagger,\n\t\t\t\tdelayChildren: customDelay ?? delay,\n\t\t\t\t...containerTransition,\n\t\t\t\texit: {\n\t\t\t\t\tstaggerChildren: customStagger ?? stagger,\n\t\t\t\t\tstaggerDirection: -1,\n\t\t\t\t},\n\t\t\t}\n\t\t),\n\t\titem: createVariantsWithTransition(variants?.item || baseVariants.item, {\n\t\t\tduration: baseDuration,\n\t\t\t...segmentTransition,\n\t\t}),\n\t};\n\n\treturn (\n\t\t<AnimatePresence mode=\"popLayout\">\n\t\t\t{trigger && (\n\t\t\t\t<MotionTag\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tclassName={className}\n\t\t\t\t\texit=\"exit\"\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tonAnimationComplete={onAnimationComplete}\n\t\t\t\t\tonAnimationStart={onAnimationStart}\n\t\t\t\t\tstyle={style}\n\t\t\t\t\tvariants={computedVariants.container}\n\t\t\t\t>\n\t\t\t\t\t{per !== \"line\" ? <span className=\"sr-only\">{children}</span> : null}\n\t\t\t\t\t{segments.map((segment, index) => (\n\t\t\t\t\t\t<AnimationComponent\n\t\t\t\t\t\t\tkey={`${per}-${index}-${segment}`}\n\t\t\t\t\t\t\tper={per}\n\t\t\t\t\t\t\tsegment={segment}\n\t\t\t\t\t\t\tsegmentWrapperClassName={segmentWrapperClassName}\n\t\t\t\t\t\t\tvariants={computedVariants.item}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</MotionTag>\n\t\t\t)}\n\t\t</AnimatePresence>\n\t);\n}\n"],"mappings":"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"}

package/support/components/timeline-message-group.d.ts

@@ -0,0 +1,16 @@
+import { TimelineItem } from "../../timeline-item.js";
+import React from "react";
+import { AvailableAIAgent, AvailableHumanAgent } from "@cossistant/types";
+
+//#region src/support/components/timeline-message-group.d.ts
+type TimelineMessageGroupProps = {
+  items: TimelineItem[];
+  availableAIAgents: AvailableAIAgent[];
+  availableHumanAgents: AvailableHumanAgent[];
+  currentVisitorId?: string;
+  seenByIds?: string[];
+};
+declare const TimelineMessageGroup: React.FC<TimelineMessageGroupProps>;
+//#endregion
+export { TimelineMessageGroup, TimelineMessageGroupProps };
+//# sourceMappingURL=timeline-message-group.d.ts.map

package/support/components/timeline-message-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-message-group.d.ts","names":[],"sources":["../../../src/support/components/timeline-message-group.tsx"],"sourcesContent":[],"mappings":";;;;;KAqCY,yBAAA;SACH;EADG,iBAAA,EAES,gBAFgB,EAAA;EAAA,oBAAA,EAGb,mBAHa,EAAA;kBAC5B,CAAA,EAAA,MAAA;WACY,CAAA,EAAA,MAAA,EAAA;;AACsB,cAK9B,oBAL8B,EAKR,KAAA,CAAM,EALE,CAKC,yBALD,CAAA"}

package/support/components/timeline-message-group.js

@@ -0,0 +1,117 @@
+import { cn } from "../utils/index.js";
+import { Avatar } from "./avatar.js";
+import { CossistantLogo } from "./cossistant-branding.js";
+import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupSeenIndicator } from "../../primitives/timeline-item-group.js";
+import { TimelineMessageItem } from "./timeline-message-item.js";
+import { useMemo } from "react";
+import { SenderType } from "@cossistant/types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+
+//#region src/support/components/timeline-message-group.tsx
+const MESSAGE_ANIMATION = {
+	initial: {
+		opacity: 0,
+		y: 6
+	},
+	animate: {
+		opacity: 1,
+		y: 0
+	},
+	exit: { opacity: 0 },
+	transition: {
+		duration: .1,
+		ease: [
+			.25,
+			.46,
+			.45,
+			.94
+		]
+	}
+};
+const SEEN_ANIMATION = {
+	initial: { opacity: 0 },
+	animate: { opacity: 1 },
+	transition: {
+		duration: .1,
+		ease: "easeOut"
+	}
+};
+const TimelineMessageGroup = ({ items, availableAIAgents, availableHumanAgents, currentVisitorId, seenByIds = [] }) => {
+	const firstItem = items[0];
+	const humanAgent = availableHumanAgents.find((agent) => agent.id === firstItem?.userId);
+	const aiAgent = availableAIAgents.find((agent) => agent.id === firstItem?.aiAgentId);
+	const seenByNames = useMemo(() => {
+		const deduped = /* @__PURE__ */ new Set();
+		for (const id of seenByIds) {
+			const human = availableHumanAgents.find((agent) => agent.id === id);
+			if (human?.name) {
+				deduped.add(human.name);
+				continue;
+			}
+			const ai = availableAIAgents.find((agent) => agent.id === id);
+			if (ai?.name) deduped.add(ai.name);
+		}
+		return Array.from(deduped);
+	}, [
+		seenByIds,
+		availableHumanAgents,
+		availableAIAgents
+	]);
+	if (items.length === 0) return null;
+	const hasSeenIndicator = seenByIds.length > 0 && seenByNames.length > 0;
+	return /* @__PURE__ */ jsx(TimelineItemGroup, {
+		items,
+		seenByIds,
+		viewerId: currentVisitorId,
+		viewerType: SenderType.VISITOR,
+		children: ({ isSentByViewer, isReceivedByViewer, isVisitor, isAI, isTeamMember }) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex w-full gap-2", isSentByViewer && "flex-row-reverse", isReceivedByViewer && "flex-row"),
+			children: [isReceivedByViewer && /* @__PURE__ */ jsx(TimelineItemGroupAvatar, {
+				className: "flex flex-shrink-0 flex-col justify-end",
+				children: isAI ? /* @__PURE__ */ jsx("div", {
+					className: "flex size-6 items-center justify-center rounded-full bg-primary/10",
+					children: /* @__PURE__ */ jsx(CossistantLogo, { className: "h-4 w-4 text-primary" })
+				}) : /* @__PURE__ */ jsx(Avatar, {
+					className: "size-6",
+					image: humanAgent?.image,
+					name: humanAgent?.name || "Support"
+				})
+			}), /* @__PURE__ */ jsxs(TimelineItemGroupContent, {
+				className: cn("flex flex-col gap-1", isSentByViewer && "items-end"),
+				children: [
+					isReceivedByViewer && /* @__PURE__ */ jsx(TimelineItemGroupHeader, {
+						className: "px-1 text-muted-foreground text-xs",
+						children: isAI ? aiAgent?.name || "AI Assistant" : humanAgent?.name || "Support"
+					}),
+					items.map((item, index) => /* @__PURE__ */ jsx(motion.div, {
+						...MESSAGE_ANIMATION,
+						children: /* @__PURE__ */ jsx(TimelineMessageItem, {
+							isLast: index === items.length - 1,
+							isSentByViewer,
+							item
+						})
+					}, item.id)),
+					isSentByViewer && /* @__PURE__ */ jsx("div", {
+						className: cn("", hasSeenIndicator && "mt-2"),
+						children: /* @__PURE__ */ jsx("div", {
+							className: "min-h-[1.25rem]",
+							children: hasSeenIndicator && /* @__PURE__ */ jsx(motion.div, {
+								...SEEN_ANIMATION,
+								children: /* @__PURE__ */ jsx(TimelineItemGroupSeenIndicator, {
+									className: "px-1 text-muted-foreground text-xs",
+									seenByIds,
+									children: () => `Seen by ${seenByNames.join(", ")}`
+								})
+							}, "seen-indicator")
+						})
+					})
+				]
+			})]
+		})
+	});
+};
+
+//#endregion
+export { TimelineMessageGroup };
+//# sourceMappingURL=timeline-message-group.js.map

package/support/components/timeline-message-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-message-group.js","names":["TimelineMessageGroup: React.FC<TimelineMessageGroupProps>","PrimitiveTimelineItemGroup"],"sources":["../../../src/support/components/timeline-message-group.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport { SenderType } from \"@cossistant/types\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport {\n  TimelineItemGroup as PrimitiveTimelineItemGroup,\n  TimelineItemGroupAvatar,\n  TimelineItemGroupContent,\n  TimelineItemGroupHeader,\n  TimelineItemGroupSeenIndicator,\n} from \"../../primitives/timeline-item-group\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\nimport { TimelineMessageItem } from \"./timeline-message-item\";\n\nconst MESSAGE_ANIMATION = {\n  initial: { opacity: 0, y: 6 },\n  animate: { opacity: 1, y: 0 },\n  exit: { opacity: 0 },\n  transition: {\n    duration: 0.1,\n    ease: [0.25, 0.46, 0.45, 0.94] as const, // easeOutCubic\n  },\n} as const;\n\nconst SEEN_ANIMATION = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  transition: {\n    duration: 0.1,\n    ease: \"easeOut\" as const,\n  },\n} as const;\n\nexport type TimelineMessageGroupProps = {\n  items: TimelineItem[];\n  availableAIAgents: AvailableAIAgent[];\n  availableHumanAgents: AvailableHumanAgent[];\n  currentVisitorId?: string;\n  seenByIds?: string[];\n};\n\nexport const TimelineMessageGroup: React.FC<TimelineMessageGroupProps> = ({\n  items,\n  availableAIAgents,\n  availableHumanAgents,\n  currentVisitorId,\n  seenByIds = [],\n}) => {\n  // Get agent info for the sender\n  const firstItem = items[0];\n  const humanAgent = availableHumanAgents.find(\n    (agent) => agent.id === firstItem?.userId\n  );\n  const aiAgent = availableAIAgents.find(\n    (agent) => agent.id === firstItem?.aiAgentId\n  );\n\n  const seenByNames = useMemo(() => {\n    const deduped = new Set<string>();\n    for (const id of seenByIds) {\n      const human = availableHumanAgents.find((agent) => agent.id === id);\n      if (human?.name) {\n        deduped.add(human.name);\n        continue;\n      }\n      const ai = availableAIAgents.find((agent) => agent.id === id);\n      if (ai?.name) {\n        deduped.add(ai.name);\n      }\n    }\n    return Array.from(deduped);\n  }, [seenByIds, availableHumanAgents, availableAIAgents]);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const hasSeenIndicator = seenByIds.length > 0 && seenByNames.length > 0;\n\n  return (\n    <PrimitiveTimelineItemGroup\n      items={items}\n      seenByIds={seenByIds}\n      viewerId={currentVisitorId}\n      viewerType={SenderType.VISITOR}\n    >\n      {({\n        isSentByViewer,\n        isReceivedByViewer,\n        isVisitor,\n        isAI,\n        isTeamMember,\n      }) => (\n        <div\n          className={cn(\n            \"flex w-full gap-2\",\n            // Support widget POV: visitor messages are sent (right side)\n            // Agent messages are received (left side)\n            isSentByViewer && \"flex-row-reverse\",\n            isReceivedByViewer && \"flex-row\"\n          )}\n        >\n          {/* Avatar - only show for received messages (agents) */}\n          {isReceivedByViewer && (\n            <TimelineItemGroupAvatar className=\"flex flex-shrink-0 flex-col justify-end\">\n              {isAI ? (\n                <div className=\"flex size-6 items-center justify-center rounded-full bg-primary/10\">\n                  <CossistantLogo className=\"h-4 w-4 text-primary\" />\n                </div>\n              ) : (\n                <Avatar\n                  className=\"size-6\"\n                  image={humanAgent?.image}\n                  name={humanAgent?.name || \"Support\"}\n                />\n              )}\n            </TimelineItemGroupAvatar>\n          )}\n\n          <TimelineItemGroupContent\n            className={cn(\"flex flex-col gap-1\", isSentByViewer && \"items-end\")}\n          >\n            {/* Header - show sender name for received messages (agents) */}\n            {isReceivedByViewer && (\n              <TimelineItemGroupHeader className=\"px-1 text-muted-foreground text-xs\">\n                {isAI\n                  ? aiAgent?.name || \"AI Assistant\"\n                  : humanAgent?.name || \"Support\"}\n              </TimelineItemGroupHeader>\n            )}\n\n            {items.map((item, index) => (\n              <motion.div key={item.id} {...MESSAGE_ANIMATION}>\n                <TimelineMessageItem\n                  isLast={index === items.length - 1}\n                  isSentByViewer={isSentByViewer}\n                  item={item}\n                />\n              </motion.div>\n            ))}\n\n            {isSentByViewer && (\n              <div className={cn(\"\", hasSeenIndicator && \"mt-2\")}>\n                <div className=\"min-h-[1.25rem]\">\n                  {hasSeenIndicator && (\n                    <motion.div key=\"seen-indicator\" {...SEEN_ANIMATION}>\n                      <TimelineItemGroupSeenIndicator\n                        className=\"px-1 text-muted-foreground text-xs\"\n                        seenByIds={seenByIds}\n                      >\n                        {() => `Seen by ${seenByNames.join(\", \")}`}\n                      </TimelineItemGroupSeenIndicator>\n                    </motion.div>\n                  )}\n                </div>\n              </div>\n            )}\n          </TimelineItemGroupContent>\n        </div>\n      )}\n    </PrimitiveTimelineItemGroup>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,oBAAoB;CACxB,SAAS;EAAE,SAAS;EAAG,GAAG;EAAG;CAC7B,SAAS;EAAE,SAAS;EAAG,GAAG;EAAG;CAC7B,MAAM,EAAE,SAAS,GAAG;CACpB,YAAY;EACV,UAAU;EACV,MAAM;GAAC;GAAM;GAAM;GAAM;GAAK;EAC/B;CACF;AAED,MAAM,iBAAiB;CACrB,SAAS,EAAE,SAAS,GAAG;CACvB,SAAS,EAAE,SAAS,GAAG;CACvB,YAAY;EACV,UAAU;EACV,MAAM;EACP;CACF;AAUD,MAAaA,wBAA6D,EACxE,OACA,mBACA,sBACA,kBACA,YAAY,EAAE,OACV;CAEJ,MAAM,YAAY,MAAM;CACxB,MAAM,aAAa,qBAAqB,MACrC,UAAU,MAAM,OAAO,WAAW,OACpC;CACD,MAAM,UAAU,kBAAkB,MAC/B,UAAU,MAAM,OAAO,WAAW,UACpC;CAED,MAAM,cAAc,cAAc;EAChC,MAAM,0BAAU,IAAI,KAAa;AACjC,OAAK,MAAM,MAAM,WAAW;GAC1B,MAAM,QAAQ,qBAAqB,MAAM,UAAU,MAAM,OAAO,GAAG;AACnE,OAAI,OAAO,MAAM;AACf,YAAQ,IAAI,MAAM,KAAK;AACvB;;GAEF,MAAM,KAAK,kBAAkB,MAAM,UAAU,MAAM,OAAO,GAAG;AAC7D,OAAI,IAAI,KACN,SAAQ,IAAI,GAAG,KAAK;;AAGxB,SAAO,MAAM,KAAK,QAAQ;IACzB;EAAC;EAAW;EAAsB;EAAkB,CAAC;AAExD,KAAI,MAAM,WAAW,EACnB,QAAO;CAGT,MAAM,mBAAmB,UAAU,SAAS,KAAK,YAAY,SAAS;AAEtE,QACE,oBAACC;EACQ;EACI;EACX,UAAU;EACV,YAAY,WAAW;aAErB,EACA,gBACA,oBACA,WACA,MACA,mBAEA,qBAAC;GACC,WAAW,GACT,qBAGA,kBAAkB,oBAClB,sBAAsB,WACvB;cAGA,sBACC,oBAAC;IAAwB,WAAU;cAChC,OACC,oBAAC;KAAI,WAAU;eACb,oBAAC,kBAAe,WAAU,yBAAyB;MAC/C,GAEN,oBAAC;KACC,WAAU;KACV,OAAO,YAAY;KACnB,MAAM,YAAY,QAAQ;MAC1B;KAEoB,EAG5B,qBAAC;IACC,WAAW,GAAG,uBAAuB,kBAAkB,YAAY;;KAGlE,sBACC,oBAAC;MAAwB,WAAU;gBAChC,OACG,SAAS,QAAQ,iBACjB,YAAY,QAAQ;OACA;KAG3B,MAAM,KAAK,MAAM,UAChB,oBAAC,OAAO;MAAkB,GAAI;gBAC5B,oBAAC;OACC,QAAQ,UAAU,MAAM,SAAS;OACjB;OACV;QACN;QALa,KAAK,GAMT,CACb;KAED,kBACC,oBAAC;MAAI,WAAW,GAAG,IAAI,oBAAoB,OAAO;gBAChD,oBAAC;OAAI,WAAU;iBACZ,oBACC,oBAAC,OAAO;QAAyB,GAAI;kBACnC,oBAAC;SACC,WAAU;SACC;yBAEJ,WAAW,YAAY,KAAK,KAAK;UACT;UANnB,iBAOH;QAEX;OACF;;KAEiB;IACvB;GAEmB"}

package/support/components/timeline-message-item.d.ts

@@ -0,0 +1,17 @@
+import { TimelineItem } from "../../timeline-item.js";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+
+//#region src/support/components/timeline-message-item.d.ts
+type TimelineMessageItemProps = {
+  item: TimelineItem;
+  isLast?: boolean;
+  isSentByViewer?: boolean;
+};
+declare function TimelineMessageItem({
+  item,
+  isLast,
+  isSentByViewer
+}: TimelineMessageItemProps): react_jsx_runtime8.JSX.Element;
+//#endregion
+export { TimelineMessageItem, TimelineMessageItemProps };
+//# sourceMappingURL=timeline-message-item.d.ts.map

package/support/components/timeline-message-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-message-item.d.ts","names":[],"sources":["../../../src/support/components/timeline-message-item.tsx"],"sourcesContent":[],"mappings":";;;;KAUY,wBAAA;QACL;;EADK,cAAA,CAAA,EAAA,OAAA;AAMZ,CAAA;AAAmC,iBAAnB,mBAAA,CAAmB;EAAA,IAAA;EAAA,MAAA;EAAA;AAAA,CAAA,EAIhC,wBAJgC,CAAA,EAIR,kBAAA,CAAA,GAAA,CAAA,OAJQ"}

package/support/components/timeline-message-item.js

@@ -0,0 +1,42 @@
+import { cn } from "../utils/index.js";
+import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "../../primitives/timeline-item.js";
+import { useSupportText } from "../text/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/support/components/timeline-message-item.tsx
+function TimelineMessageItem({ item, isLast = false, isSentByViewer }) {
+	const text = useSupportText();
+	return /* @__PURE__ */ jsx(TimelineItem, {
+		item,
+		children: ({ isVisitor, isAI, timestamp }) => {
+			const isSentByViewerFinal = isSentByViewer ?? isVisitor;
+			return /* @__PURE__ */ jsx("div", {
+				className: cn("flex w-full gap-2", isSentByViewerFinal && "flex-row-reverse", !isSentByViewerFinal && "flex-row"),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("flex w-full flex-1 flex-col gap-1", isSentByViewerFinal && "items-end"),
+					children: [/* @__PURE__ */ jsx(TimelineItemContent, {
+						className: cn("block w-max max-w-[300px] rounded-lg px-3.5 py-2.5 text-sm", {
+							"bg-co-background-300 text-foreground dark:bg-co-background-600": !isSentByViewerFinal,
+							"bg-primary text-primary-foreground": isSentByViewerFinal,
+							"rounded-br-sm": isLast && isSentByViewerFinal,
+							"rounded-bl-sm": isLast && !isSentByViewerFinal
+						}),
+						renderMarkdown: true,
+						text: item.text
+					}), isLast && /* @__PURE__ */ jsx(TimelineItemTimestamp, {
+						className: "px-1 text-muted-foreground text-xs",
+						timestamp,
+						children: () => /* @__PURE__ */ jsxs(Fragment, { children: [timestamp.toLocaleTimeString([], {
+							hour: "2-digit",
+							minute: "2-digit"
+						}), isAI && ` ${text("component.message.timestamp.aiIndicator")}`] })
+					})]
+				})
+			});
+		}
+	});
+}
+
+//#endregion
+export { TimelineMessageItem };
+//# sourceMappingURL=timeline-message-item.js.map

package/support/components/timeline-message-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-message-item.js","names":["PrimitiveTimelineItem"],"sources":["../../../src/support/components/timeline-message-item.tsx"],"sourcesContent":["import type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport {\n\tTimelineItem as PrimitiveTimelineItem,\n\tTimelineItemContent,\n\tTimelineItemTimestamp,\n} from \"../../primitives/timeline-item\";\nimport { useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\n\nexport type TimelineMessageItemProps = {\n\titem: TimelineItem;\n\tisLast?: boolean;\n\tisSentByViewer?: boolean;\n};\n\nexport function TimelineMessageItem({\n\titem,\n\tisLast = false,\n\tisSentByViewer,\n}: TimelineMessageItemProps) {\n\tconst text = useSupportText();\n\treturn (\n\t\t<PrimitiveTimelineItem item={item}>\n\t\t\t{({ isVisitor, isAI, timestamp }) => {\n\t\t\t\t// Use passed isSentByViewer if provided, otherwise fall back to isVisitor\n\t\t\t\tconst isSentByViewerFinal = isSentByViewer ?? isVisitor;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex w-full gap-2\",\n\t\t\t\t\t\t\tisSentByViewerFinal && \"flex-row-reverse\",\n\t\t\t\t\t\t\t!isSentByViewerFinal && \"flex-row\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex w-full flex-1 flex-col gap-1\",\n\t\t\t\t\t\t\t\tisSentByViewerFinal && \"items-end\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TimelineItemContent\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"block w-max max-w-[300px] rounded-lg px-3.5 py-2.5 text-sm\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\"bg-co-background-300 text-foreground dark:bg-co-background-600\":\n\t\t\t\t\t\t\t\t\t\t\t!isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\"bg-primary text-primary-foreground\": isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\"rounded-br-sm\": isLast && isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\"rounded-bl-sm\": isLast && !isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\trenderMarkdown\n\t\t\t\t\t\t\t\ttext={item.text}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{isLast && (\n\t\t\t\t\t\t\t\t<TimelineItemTimestamp\n\t\t\t\t\t\t\t\t\tclassName=\"px-1 text-muted-foreground text-xs\"\n\t\t\t\t\t\t\t\t\ttimestamp={timestamp}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{() => (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t{timestamp.toLocaleTimeString([], {\n\t\t\t\t\t\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t{isAI &&\n\t\t\t\t\t\t\t\t\t\t\t\t` ${text(\"component.message.timestamp.aiIndicator\")}`}\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</TimelineItemTimestamp>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}}\n\t\t</PrimitiveTimelineItem>\n\t);\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,oBAAoB,EACnC,MACA,SAAS,OACT,kBAC4B;CAC5B,MAAM,OAAO,gBAAgB;AAC7B,QACC,oBAACA;EAA4B;aAC1B,EAAE,WAAW,MAAM,gBAAgB;GAEpC,MAAM,sBAAsB,kBAAkB;AAE9C,UACC,oBAAC;IACA,WAAW,GACV,qBACA,uBAAuB,oBACvB,CAAC,uBAAuB,WACxB;cAED,qBAAC;KACA,WAAW,GACV,qCACA,uBAAuB,YACvB;gBAED,oBAAC;MACA,WAAW,GACV,8DACA;OACC,kEACC,CAAC;OACF,sCAAsC;OACtC,iBAAiB,UAAU;OAC3B,iBAAiB,UAAU,CAAC;OAC5B,CACD;MACD;MACA,MAAM,KAAK;OACV,EACD,UACA,oBAAC;MACA,WAAU;MACC;sBAGV,4CACE,UAAU,mBAAmB,EAAE,EAAE;OACjC,MAAM;OACN,QAAQ;OACR,CAAC,EACD,QACA,IAAI,KAAK,0CAA0C,MAClD;OAEmB;MAEpB;KACD;;GAGe"}

package/support/components/typing-indicator.d.ts

@@ -0,0 +1,26 @@
+import * as React$1 from "react";
+import { AvailableAIAgent, AvailableHumanAgent } from "@cossistant/types";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+
+//#region src/support/components/typing-indicator.d.ts
+type TypingParticipantType = "visitor" | "team_member" | "ai";
+type TypingParticipant = {
+  id: string;
+  type: TypingParticipantType;
+};
+type TypingIndicatorProps = React$1.HTMLAttributes<HTMLDivElement> & {
+  participants: TypingParticipant[];
+  availableAIAgents?: AvailableAIAgent[];
+  availableHumanAgents?: AvailableHumanAgent[];
+  withAvatars?: boolean;
+};
+declare const BouncingDots: () => react_jsx_runtime9.JSX.Element;
+declare const TypingIndicator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
+  participants: TypingParticipant[];
+  availableAIAgents?: AvailableAIAgent[];
+  availableHumanAgents?: AvailableHumanAgent[];
+  withAvatars?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { BouncingDots, TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType };
+//# sourceMappingURL=typing-indicator.d.ts.map

package/support/components/typing-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typing-indicator.d.ts","names":[],"sources":["../../../src/support/components/typing-indicator.tsx"],"sourcesContent":[],"mappings":";;;;;KAKY,qBAAA;KAEA,iBAAA;;EAFA,IAAA,EAIL,qBAJ0B;AAEjC,CAAA;AAKY,KAAA,oBAAA,GAAuB,OAAA,CAAM,cAAT,CAAwB,cAAxB,CAAA,GAAA;EAAA,YAAA,EACjB,iBADiB,EAAA;mBAAwB,CAAA,EAEnC,gBAFmC,EAAA;sBAAf,CAAA,EAGjB,mBAHiB,EAAA;aAC1B,CAAA,EAAA,OAAA;;AAES,cAIX,YAJW,EAAA,GAAA,GAIC,kBAAA,CAAA,GAAA,CAAA,OAJD;AAAmB,cAY9B,eAZ8B,EAYf,OAAA,CAAA,yBAZe,CAYf,OAAA,CAAA,cAZe,CAYf,cAZe,CAAA,GAAA;EAI9B,YAAA,EANE,iBAMU,EAAA;EAQZ,iBAAA,CAuDZ,EApEoB,gBAoEpB,EAAA;EAAA,oBAAA,CAAA,EAnEuB,mBAmEvB,EAAA;aAvD2B,CAAA,EAAA,OAAA;yBAAA,eAAA,CAAA,CAAA"}

package/support/components/typing-indicator.js

@@ -0,0 +1,37 @@
+import { cn } from "../utils/index.js";
+import { AvatarStack } from "./avatar-stack.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/support/components/typing-indicator.tsx
+const BouncingDots = () => /* @__PURE__ */ jsxs("div", {
+	className: "flex gap-1",
+	children: [
+		/* @__PURE__ */ jsx("span", { className: "dot-bounce-1 size-1 rounded-full bg-co-primary" }),
+		/* @__PURE__ */ jsx("span", { className: "dot-bounce-2 size-1 rounded-full bg-co-primary" }),
+		/* @__PURE__ */ jsx("span", { className: "dot-bounce-3 size-1 rounded-full bg-co-primary" })
+	]
+});
+const TypingIndicator = React$1.forwardRef(({ participants, availableAIAgents = [], availableHumanAgents = [], withAvatars = true, className,...props }, ref) => {
+	if (!participants || participants.length === 0) return null;
+	const humanParticipantIds = participants.filter((p) => p.type === "team_member").map((p) => p.id);
+	const aiParticipantIds = participants.filter((p) => p.type === "ai").map((p) => p.id);
+	const typingHumanAgents = availableHumanAgents.filter((agent) => humanParticipantIds.includes(agent.id));
+	const typingAIAgents = availableAIAgents.filter((agent) => aiParticipantIds.includes(agent.id));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-6", className),
+		ref,
+		...props,
+		children: [withAvatars && /* @__PURE__ */ jsx(AvatarStack, {
+			aiAgents: typingAIAgents,
+			humanAgents: typingHumanAgents,
+			size: 24,
+			spacing: 16
+		}), /* @__PURE__ */ jsx(BouncingDots, {})]
+	});
+});
+TypingIndicator.displayName = "TypingIndicator";
+
+//#endregion
+export { BouncingDots, TypingIndicator };
+//# sourceMappingURL=typing-indicator.js.map

package/support/components/typing-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typing-indicator.js","names":["React"],"sources":["../../../src/support/components/typing-indicator.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { AvatarStack } from \"./avatar-stack\";\n\nexport type TypingParticipantType = \"visitor\" | \"team_member\" | \"ai\";\n\nexport type TypingParticipant = {\n\tid: string;\n\ttype: TypingParticipantType;\n};\n\nexport type TypingIndicatorProps = React.HTMLAttributes<HTMLDivElement> & {\n\tparticipants: TypingParticipant[];\n\tavailableAIAgents?: AvailableAIAgent[];\n\tavailableHumanAgents?: AvailableHumanAgent[];\n\twithAvatars?: boolean;\n};\n\nexport const BouncingDots = () => (\n\t<div className=\"flex gap-1\">\n\t\t<span className=\"dot-bounce-1 size-1 rounded-full bg-co-primary\" />\n\t\t<span className=\"dot-bounce-2 size-1 rounded-full bg-co-primary\" />\n\t\t<span className=\"dot-bounce-3 size-1 rounded-full bg-co-primary\" />\n\t</div>\n);\n\nexport const TypingIndicator = React.forwardRef<\n\tHTMLDivElement,\n\tTypingIndicatorProps\n>(\n\t(\n\t\t{\n\t\t\tparticipants,\n\t\t\tavailableAIAgents = [],\n\t\t\tavailableHumanAgents = [],\n\t\t\twithAvatars = true,\n\t\t\tclassName,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tif (!participants || participants.length === 0) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Separate AI and human participants\n\t\tconst humanParticipantIds = participants\n\t\t\t.filter((p) => p.type === \"team_member\")\n\t\t\t.map((p) => p.id);\n\n\t\tconst aiParticipantIds = participants\n\t\t\t.filter((p) => p.type === \"ai\")\n\t\t\t.map((p) => p.id);\n\n\t\t// Get matching agents\n\t\tconst typingHumanAgents = availableHumanAgents.filter((agent) =>\n\t\t\thumanParticipantIds.includes(agent.id)\n\t\t);\n\n\t\tconst typingAIAgents = availableAIAgents.filter((agent) =>\n\t\t\taiParticipantIds.includes(agent.id)\n\t\t);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\"flex items-center gap-6\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{withAvatars && (\n\t\t\t\t\t<AvatarStack\n\t\t\t\t\t\taiAgents={typingAIAgents}\n\t\t\t\t\t\thumanAgents={typingHumanAgents}\n\t\t\t\t\t\tsize={24}\n\t\t\t\t\t\tspacing={16}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<BouncingDots />\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nTypingIndicator.displayName = \"TypingIndicator\";\n"],"mappings":";;;;;;AAmBA,MAAa,qBACZ,qBAAC;CAAI,WAAU;;EACd,oBAAC,UAAK,WAAU,mDAAmD;EACnE,oBAAC,UAAK,WAAU,mDAAmD;EACnE,oBAAC,UAAK,WAAU,mDAAmD;;EAC9D;AAGP,MAAa,kBAAkBA,QAAM,YAKnC,EACC,cACA,oBAAoB,EAAE,EACtB,uBAAuB,EAAE,EACzB,cAAc,MACd,UACA,GAAG,SAEJ,QACI;AACJ,KAAI,CAAC,gBAAgB,aAAa,WAAW,EAC5C,QAAO;CAIR,MAAM,sBAAsB,aAC1B,QAAQ,MAAM,EAAE,SAAS,cAAc,CACvC,KAAK,MAAM,EAAE,GAAG;CAElB,MAAM,mBAAmB,aACvB,QAAQ,MAAM,EAAE,SAAS,KAAK,CAC9B,KAAK,MAAM,EAAE,GAAG;CAGlB,MAAM,oBAAoB,qBAAqB,QAAQ,UACtD,oBAAoB,SAAS,MAAM,GAAG,CACtC;CAED,MAAM,iBAAiB,kBAAkB,QAAQ,UAChD,iBAAiB,SAAS,MAAM,GAAG,CACnC;AAED,QACC,qBAAC;EACA,WAAW,GAAG,2BAA2B,UAAU;EAC9C;EACL,GAAI;aAEH,eACA,oBAAC;GACA,UAAU;GACV,aAAa;GACb,MAAM;GACN,SAAS;IACR,EAEH,oBAAC,iBAAe;GACX;EAGR;AAED,gBAAgB,cAAc"}

package/support/components/watermark.d.ts

@@ -0,0 +1,8 @@
+//#region src/support/components/watermark.d.ts
+type WatermarkProps = {
+  className?: string;
+};
+declare const Watermark: React.FC<WatermarkProps>;
+//#endregion
+export { Watermark, WatermarkProps };
+//# sourceMappingURL=watermark.d.ts.map

package/support/components/watermark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.d.ts","names":[],"sources":["../../../src/support/components/watermark.tsx"],"sourcesContent":[],"mappings":";KAMY,cAAA;EAAA,SAAA,CAAA,EAAA,MAAc;AAI1B,CAAA;AAmCC,cAnCY,SAmCZ,EAnCuB,KAAA,CAAM,EAmC7B,CAnCgC,cAmChC,CAAA"}

package/support/components/watermark.js

@@ -0,0 +1,34 @@
+import { cn } from "../utils/index.js";
+import { CossistantLogo } from "./cossistant-branding.js";
+import { Text } from "../text/index.js";
+import { useSupport } from "../../provider.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/support/components/watermark.tsx
+const Watermark = ({ className }) => {
+	const { website } = useSupport();
+	const cossistantUrl = useMemo(() => {
+		if (!website) return "https://cossistant.com";
+		const url = new URL("https://cossistant.com");
+		url.searchParams.set("ref", "chatbox");
+		url.searchParams.set("domain", website.domain);
+		url.searchParams.set("name", website.name);
+		return url.toString();
+	}, [website]);
+	return /* @__PURE__ */ jsxs("a", {
+		className: cn("flex items-center gap-1.5 font-medium font-mono text-co-primary hover:text-co-blue", className),
+		href: cossistantUrl,
+		rel: "noopener noreferrer",
+		target: "_blank",
+		children: [/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: "text-co-muted-foreground text-xs",
+			textKey: "common.brand.watermark"
+		}), /* @__PURE__ */ jsx(CossistantLogo, { className: "h-3" })]
+	});
+};
+
+//#endregion
+export { Watermark };
+//# sourceMappingURL=watermark.js.map

package/support/components/watermark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.js","names":["Watermark: React.FC<WatermarkProps>"],"sources":["../../../src/support/components/watermark.tsx"],"sourcesContent":["import { useSupport } from \"@cossistant/react\";\nimport { useMemo } from \"react\";\nimport { Text } from \"../text\";\nimport { cn } from \"../utils\";\nimport { CossistantLogo } from \"./cossistant-branding\";\n\nexport type WatermarkProps = {\n\tclassName?: string;\n};\n\nexport const Watermark: React.FC<WatermarkProps> = ({ className }) => {\n\tconst { website } = useSupport();\n\n\tconst cossistantUrl = useMemo(() => {\n\t\tif (!website) {\n\t\t\treturn \"https://cossistant.com\";\n\t\t}\n\n\t\tconst url = new URL(\"https://cossistant.com\");\n\n\t\turl.searchParams.set(\"ref\", \"chatbox\");\n\t\turl.searchParams.set(\"domain\", website.domain);\n\t\turl.searchParams.set(\"name\", website.name);\n\n\t\treturn url.toString();\n\t}, [website]);\n\n\treturn (\n\t\t<a\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center gap-1.5 font-medium font-mono text-co-primary hover:text-co-blue\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\thref={cossistantUrl}\n\t\t\trel=\"noopener noreferrer\"\n\t\t\ttarget=\"_blank\"\n\t\t>\n\t\t\t<Text\n\t\t\t\tas=\"span\"\n\t\t\t\tclassName=\"text-co-muted-foreground text-xs\"\n\t\t\t\ttextKey=\"common.brand.watermark\"\n\t\t\t/>\n\t\t\t<CossistantLogo className=\"h-3\" />\n\t\t</a>\n\t);\n};\n"],"mappings":";;;;;;;;AAUA,MAAaA,aAAuC,EAAE,gBAAgB;CACrE,MAAM,EAAE,YAAY,YAAY;CAEhC,MAAM,gBAAgB,cAAc;AACnC,MAAI,CAAC,QACJ,QAAO;EAGR,MAAM,MAAM,IAAI,IAAI,yBAAyB;AAE7C,MAAI,aAAa,IAAI,OAAO,UAAU;AACtC,MAAI,aAAa,IAAI,UAAU,QAAQ,OAAO;AAC9C,MAAI,aAAa,IAAI,QAAQ,QAAQ,KAAK;AAE1C,SAAO,IAAI,UAAU;IACnB,CAAC,QAAQ,CAAC;AAEb,QACC,qBAAC;EACA,WAAW,GACV,sFACA,UACA;EACD,MAAM;EACN,KAAI;EACJ,QAAO;aAEP,oBAAC;GACA,IAAG;GACH,WAAU;GACV,SAAQ;IACP,EACF,oBAAC,kBAAe,WAAU,QAAQ;GAC/B"}

package/support/context/config.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+
+//#region src/support/context/config.d.ts
+type SupportConfigSetters = {
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+};
+declare const useSupportConfig: () => {
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+  mode: "floating" | "responsive";
+  size: "normal" | "larger";
+  isOpen: boolean;
+  content: {
+    home?: {
+      header?: string;
+      subheader?: string;
+      ctaLabel?: string;
+    };
+  };
+};
+declare const SupportConfigProvider: React.FC<{
+  children: React.ReactNode;
+  mode?: "floating" | "responsive";
+  size?: "normal" | "larger";
+  defaultOpen?: boolean;
+}>;
+//#endregion
+export { SupportConfigProvider, SupportConfigSetters, useSupportConfig };
+//# sourceMappingURL=config.d.ts.map

package/support/context/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","names":[],"sources":["../../../src/support/context/config.tsx"],"sourcesContent":[],"mappings":";;;KASY,oBAAA;;EAAA,KAAA,EAAA,GAAA,GAAA,IAAA;EAMC,MAAA,EAAA,GAAA,GAAA,IAAA;AAEb,CAAA;AAgBC,cAlBY,gBAkBZ,EAAA,GAAA,GAAA;MAfU,EAAA,GAAM,GAAA,IAAA;OADmB,EAAA,GAAM,GAAA,IAAA;EAAE,MAAA,EAAA,GAAA,GAAA,IAAA;;;;;;;;;;;;cAA/B,uBAAuB,KAAA,CAAM;YAC/B,KAAA,CAAM"}