@cossistant/react 0.0.3 → 0.0.5

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

@@ -1,192 +1,76 @@
 import { cn } from "../utils/index.js";
-import { useRenderElement } from "../../utils/use-render-element.js";
 import { Avatar } from "./avatar.js";
 import { BouncingDots } from "./typing-indicator.js";
 import { coButtonVariants } from "./button.js";
 import icons_default from "./icons.js";
 import { useSupportText } from "../text/index.js";
-import { useConversationTimelineItems } from "../../hooks/use-conversation-timeline-items.js";
-import { formatTimeAgo } from "../utils/time.js";
-import { useSupport } from "../../provider.js";
-import { useConversationTyping } from "../../hooks/use-conversation-typing.js";
-import { useMemo } from "react";
+import { useConversationPreview } from "../../hooks/use-conversation-preview.js";
 import { ConversationStatus } from "@cossistant/types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/conversation-button-link.tsx
-function getLastTimelineItemInfo(item, availableHumanAgents, website, text) {
-	const isFromVisitor = item.visitorId !== null;
-	let senderName = text("common.fallbacks.unknown");
-	let senderImage = null;
-	if (isFromVisitor) senderName = text("common.fallbacks.you");
-	else if (item.userId) {
-		const agent = availableHumanAgents.find((a) => a.id === item.userId);
-		if (agent) {
-			senderName = agent.name;
-			senderImage = agent.image;
-		} else senderName = text("common.fallbacks.supportTeam");
-	} else if (item.aiAgentId && website?.availableAIAgents) {
-		const aiAgent = website.availableAIAgents.find((a) => a.id === item.aiAgentId);
-		if (aiAgent) {
-			senderName = aiAgent.name;
-			senderImage = aiAgent.image;
-		} else senderName = text("common.fallbacks.aiAssistant");
-	} else senderName = text("common.fallbacks.supportTeam");
-	return {
-		content: item.text || "",
-		time: formatTimeAgo(item.createdAt),
-		isFromVisitor,
-		senderName,
-		senderImage
-	};
-}
-function ConversationButtonLink({ conversation, onClick,...props }) {
-	const { availableHumanAgents, availableAIAgents, website, visitor } = useSupport();
-	const { items } = useConversationTimelineItems(conversation.id);
+const STATUS_BADGE_CLASSNAMES = {
+	[ConversationStatus.OPEN]: "bg-co-success/20 text-co-success-foreground",
+	[ConversationStatus.RESOLVED]: "bg-co-neutral/20 text-co-neutral-foreground",
+	[ConversationStatus.SPAM]: "bg-co-warning/20 text-co-warning-foreground"
+};
+const DEFAULT_STATUS_BADGE_CLASSNAME = "bg-co-neutral/20 text-co-neutral-foreground";
+const STATUS_TEXT_KEYS = {
+	[ConversationStatus.OPEN]: "component.conversationButtonLink.status.open",
+	[ConversationStatus.RESOLVED]: "component.conversationButtonLink.status.resolved",
+	[ConversationStatus.SPAM]: "component.conversationButtonLink.status.spam"
+};
+/**
+* Renders a navigable preview card for a conversation including assigned agent
+* details, last message snippets and typing indicators.
+*/
+function ConversationButtonLink({ conversation, onClick, className }) {
+	const preview = useConversationPreview({ conversation });
 	const text = useSupportText();
-	const typingEntries = useConversationTyping(conversation.id, { excludeVisitorId: visitor?.id ?? null });
-	const typingInfo = useMemo(() => {
-		if (typingEntries.length === 0) return null;
-		const entry = typingEntries[0];
-		let name = text("common.fallbacks.someone");
-		if (entry?.actorType === "user") {
-			const human = availableHumanAgents.find((agent) => agent.id === entry.actorId);
-			name = human?.name || text("common.fallbacks.supportTeam");
-			human?.image;
-		} else if (entry?.actorType === "ai_agent") {
-			const ai = availableAIAgents.find((agent) => agent.id === entry.actorId);
-			name = ai?.name || text("common.fallbacks.aiAssistant");
-			ai?.image;
-		}
-		return { name };
-	}, [
-		typingEntries,
-		availableHumanAgents,
-		availableAIAgents,
-		text
-	]);
-	const lastMessage = useMemo(() => {
-		const timelineItemToDisplay = (items.length > 0 ? items[items.length - 1] : null) || conversation.lastTimelineItem;
-		return timelineItemToDisplay ? getLastTimelineItemInfo(timelineItemToDisplay, availableHumanAgents, website, text) : null;
-	}, [
-		items,
-		conversation.lastTimelineItem,
-		availableHumanAgents,
-		website,
-		text
-	]);
-	const assignedAgent = useMemo(() => {
-		const supportFallbackName = text("common.fallbacks.supportTeam");
-		const aiFallbackName = text("common.fallbacks.aiAssistant");
-		const knownItems = items.slice();
-		if (conversation.lastTimelineItem && !knownItems.some((item) => item.id === conversation.lastTimelineItem?.id)) knownItems.push(conversation.lastTimelineItem);
-		const lastAgentItem = [...knownItems].reverse().find((item) => item.userId !== null || item.aiAgentId !== null);
-		if (lastAgentItem?.userId) {
-			const human = availableHumanAgents.find((agent) => agent.id === lastAgentItem.userId);
-			if (human) return {
-				type: "human",
-				name: human.name,
-				image: human.image ?? null
-			};
-			return {
-				type: "human",
-				name: supportFallbackName,
-				image: null
-			};
-		}
-		if (lastAgentItem?.aiAgentId) {
-			const ai = availableAIAgents.find((agent) => agent.id === lastAgentItem.aiAgentId);
-			if (ai) return {
-				type: "ai",
-				name: ai.name,
-				image: ai.image ?? null
-			};
-			return {
-				type: "ai",
-				name: aiFallbackName,
-				image: null
-			};
-		}
-		const fallbackHuman = availableHumanAgents[0];
-		if (fallbackHuman) return {
-			type: "human",
-			name: fallbackHuman.name,
-			image: fallbackHuman.image ?? null
-		};
-		const fallbackAi = availableAIAgents[0];
-		if (fallbackAi) return {
-			type: "ai",
-			name: fallbackAi.name,
-			image: fallbackAi.image ?? null
-		};
-		return {
-			type: "fallback",
-			name: supportFallbackName,
-			image: null
-		};
-	}, [
-		items,
-		conversation.lastTimelineItem,
-		availableHumanAgents,
-		availableAIAgents,
-		text
-	]);
-	const conversationTitle = useMemo(() => {
-		if (conversation.title) return conversation.title;
-		if (lastMessage?.content) return lastMessage.content;
-		return text("component.conversationButtonLink.fallbackTitle");
-	}, [
-		conversation.title,
-		lastMessage?.content,
-		text
-	]);
-	const state = {
-		conversation,
-		lastMessage,
-		assignedAgent
-	};
-	return useRenderElement("button", props, {
-		state,
-		props: {
-			onClick,
-			type: "button",
-			className: cn(coButtonVariants({
-				variant: "secondary",
-				size: "large"
-			}), "relative gap-3 border-0 border-co-border/50 border-b text-left transition-colors first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-b-0", typeof props.className === "function" ? props.className(state) : props.className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(Avatar, {
-					className: "size-8 flex-shrink-0",
-					image: assignedAgent.image,
-					name: assignedAgent.name
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "flex min-w-0 flex-1 flex-col gap-0.5",
-					children: typingInfo ? /* @__PURE__ */ jsx(BouncingDots, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-						className: "flex max-w-[90%] items-center justify-between gap-2",
-						children: /* @__PURE__ */ jsx("h3", {
-							className: "truncate font-medium text-co-primary text-sm",
-							children: conversationTitle
-						})
-					}), lastMessage ? /* @__PURE__ */ jsx("p", {
-						className: "text-co-primary/60 text-xs",
-						children: lastMessage.isFromVisitor ? /* @__PURE__ */ jsx("span", { children: text("component.conversationButtonLink.lastMessage.visitor", { time: lastMessage.time }) }) : /* @__PURE__ */ jsx("span", { children: text("component.conversationButtonLink.lastMessage.agent", {
-							name: lastMessage.senderName || text("common.fallbacks.supportTeam"),
-							time: lastMessage.time
-						}) })
-					}) : null] })
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: cn("mr-6 inline-flex items-center rounded px-2 py-0.5 font-medium text-[9px] uppercase", conversation.status === ConversationStatus.OPEN ? "bg-co-success/20 text-co-success-foreground" : conversation.status === ConversationStatus.RESOLVED ? "bg-co-neutral/20 text-co-neutral-foreground" : "bg-co-warning/20 text-co-warning-foreground"),
-					children: conversation.status
-				}),
-				/* @__PURE__ */ jsx(icons_default, {
-					className: "-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary",
-					name: "arrow-right",
-					variant: "default"
-				})
-			] })
-		}
+	const { lastMessage, assignedAgent, typing } = preview;
+	const statusBadgeClassName = conversation.deletedAt ? STATUS_BADGE_CLASSNAMES[ConversationStatus.RESOLVED] : STATUS_BADGE_CLASSNAMES[conversation.status] ?? DEFAULT_STATUS_BADGE_CLASSNAME;
+	const statusTextKey = conversation.deletedAt ? STATUS_TEXT_KEYS[ConversationStatus.RESOLVED] : STATUS_TEXT_KEYS[conversation.status];
+	const statusText = conversation.deletedAt ? text("component.conversationButtonLink.status.closed") : statusTextKey ? text(statusTextKey) : text("common.fallbacks.unknown");
+	const lastMessageContent = lastMessage ? lastMessage.isFromVisitor ? /* @__PURE__ */ jsx("span", { children: text("component.conversationButtonLink.lastMessage.visitor", { time: lastMessage.time }) }) : /* @__PURE__ */ jsx("span", { children: text("component.conversationButtonLink.lastMessage.agent", {
+		name: lastMessage.senderName || text("common.fallbacks.supportTeam"),
+		time: lastMessage.time
+	}) }) : void 0;
+	return /* @__PURE__ */ jsxs("button", {
+		className: cn(coButtonVariants({
+			variant: "secondary",
+			size: "large"
+		}), "group/btn relative gap-3 border-0 border-co-border/50 border-b text-left transition-colors first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-b-0", className),
+		onClick,
+		type: "button",
+		children: [
+			/* @__PURE__ */ jsx(Avatar, {
+				className: "flex size-8 flex-shrink-0 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500",
+				image: assignedAgent?.image,
+				name: assignedAgent?.name ?? text("common.fallbacks.supportTeam")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: typing.isTyping ? /* @__PURE__ */ jsx(BouncingDots, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					className: "flex max-w-[90%] items-center justify-between gap-2",
+					children: /* @__PURE__ */ jsx("h3", {
+						className: "truncate font-medium text-co-primary text-sm",
+						children: preview.title
+					})
+				}), lastMessageContent ? /* @__PURE__ */ jsx("p", {
+					className: "text-co-primary/60 text-xs",
+					children: lastMessageContent
+				}) : null] })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("mr-6 inline-flex items-center rounded px-2 py-0.5 font-medium text-[9px] uppercase", statusBadgeClassName),
+				children: statusText
+			}),
+			/* @__PURE__ */ jsx(icons_default, {
+				className: "-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary",
+				name: "arrow-right",
+				variant: "default"
+			})
+		]
 	});
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"conversation-button-link.js","names":["senderImage: string | null","state: ConversationButtonLinkState","Icon"],"sources":["../../../src/support/components/conversation-button-link.tsx"],"sourcesContent":["import { type Conversation, ConversationStatus } from \"@cossistant/types\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport {\n\tuseConversationTimelineItems,\n\tuseConversationTyping,\n\tuseSupport,\n} from \"../..\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\nimport { formatTimeAgo } from \"../utils/time\";\nimport { Avatar } from \"./avatar\";\nimport { coButtonVariants } from \"./button\";\nimport Icon from \"./icons\";\nimport { BouncingDots } from \"./typing-indicator\";\n\nexport type ConversationButtonLinkProps = {\n\tconversation: Conversation;\n\tonClick?: () => void;\n\tclassName?: string | ((state: ConversationButtonLinkState) => string);\n\trender?: (\n\t\tprops: React.HTMLProps<HTMLButtonElement>,\n\t\tstate: ConversationButtonLinkState\n\t) => React.ReactElement;\n};\n\nexport type ConversationButtonLinkAgent = {\n\tname: string;\n\timage: string | null;\n\ttype: \"human\" | \"ai\" | \"fallback\";\n};\n\nexport type ConversationButtonLinkState = {\n\tconversation: Conversation;\n\tlastMessage: {\n\t\tcontent: string;\n\t\ttime: string;\n\t\tisFromVisitor: boolean;\n\t\tsenderName?: string;\n\t\tsenderImage?: string | null;\n\t} | null;\n\tassignedAgent: ConversationButtonLinkAgent;\n};\n\nfunction getLastTimelineItemInfo(\n\titem: NonNullable<Conversation[\"lastTimelineItem\"]>,\n\tavailableHumanAgents: ReturnType<typeof useSupport>[\"availableHumanAgents\"],\n\twebsite: ReturnType<typeof useSupport>[\"website\"],\n\ttext: ReturnType<typeof useSupportText>\n) {\n\tconst isFromVisitor = item.visitorId !== null;\n\n\tlet senderName = text(\"common.fallbacks.unknown\");\n\tlet senderImage: string | null = null;\n\n\tif (isFromVisitor) {\n\t\tsenderName = text(\"common.fallbacks.you\");\n\t} else if (item.userId) {\n\t\tconst agent = availableHumanAgents.find((a) => a.id === item.userId);\n\t\tif (agent) {\n\t\t\tsenderName = agent.name;\n\t\t\tsenderImage = agent.image;\n\t\t} else {\n\t\t\tsenderName = text(\"common.fallbacks.supportTeam\");\n\t\t}\n\t} else if (item.aiAgentId && website?.availableAIAgents) {\n\t\tconst aiAgent = website.availableAIAgents.find(\n\t\t\t(a) => a.id === item.aiAgentId\n\t\t);\n\t\tif (aiAgent) {\n\t\t\tsenderName = aiAgent.name;\n\t\t\tsenderImage = aiAgent.image;\n\t\t} else {\n\t\t\tsenderName = text(\"common.fallbacks.aiAssistant\");\n\t\t}\n\t} else {\n\t\tsenderName = text(\"common.fallbacks.supportTeam\");\n\t}\n\n\treturn {\n\t\tcontent: item.text || \"\",\n\t\ttime: formatTimeAgo(item.createdAt),\n\t\tisFromVisitor,\n\t\tsenderName,\n\t\tsenderImage,\n\t};\n}\n\nexport function ConversationButtonLink({\n\tconversation,\n\tonClick,\n\t...props\n}: ConversationButtonLinkProps) {\n\tconst { availableHumanAgents, availableAIAgents, website, visitor } =\n\t\tuseSupport();\n\tconst { items } = useConversationTimelineItems(conversation.id);\n\tconst text = useSupportText();\n\tconst typingEntries = useConversationTyping(conversation.id, {\n\t\texcludeVisitorId: visitor?.id ?? null,\n\t});\n\n\t// Check if anyone is typing in this conversation\n\tconst typingInfo = useMemo(() => {\n\t\tif (typingEntries.length === 0) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst entry = typingEntries[0];\n\t\tlet name = text(\"common.fallbacks.someone\");\n\t\tlet image: string | null = null;\n\n\t\tif (entry?.actorType === \"user\") {\n\t\t\tconst human = availableHumanAgents.find(\n\t\t\t\t(agent) => agent.id === entry.actorId\n\t\t\t);\n\t\t\tname = human?.name || text(\"common.fallbacks.supportTeam\");\n\t\t\timage = human?.image || null;\n\t\t} else if (entry?.actorType === \"ai_agent\") {\n\t\t\tconst ai = availableAIAgents.find((agent) => agent.id === entry.actorId);\n\t\t\tname = ai?.name || text(\"common.fallbacks.aiAssistant\");\n\t\t\timage = ai?.image || null;\n\t\t}\n\n\t\treturn { name };\n\t}, [typingEntries, availableHumanAgents, availableAIAgents, text]);\n\n\t// Process the last timeline item (memoized to avoid expensive recomputation)\n\tconst lastMessage = useMemo(() => {\n\t\tconst cachedLastTimelineItem =\n\t\t\t// biome-ignore lint/style/useAtIndex: ok here\n\t\t\titems.length > 0 ? items[items.length - 1] : null;\n\n\t\tconst timelineItemToDisplay =\n\t\t\tcachedLastTimelineItem || conversation.lastTimelineItem;\n\n\t\treturn timelineItemToDisplay\n\t\t\t? getLastTimelineItemInfo(\n\t\t\t\t\ttimelineItemToDisplay,\n\t\t\t\t\tavailableHumanAgents,\n\t\t\t\t\twebsite,\n\t\t\t\t\ttext\n\t\t\t\t)\n\t\t\t: null;\n\t}, [\n\t\titems,\n\t\tconversation.lastTimelineItem,\n\t\tavailableHumanAgents,\n\t\twebsite,\n\t\ttext,\n\t]);\n\n\tconst assignedAgent = useMemo<ConversationButtonLinkAgent>(() => {\n\t\tconst supportFallbackName = text(\"common.fallbacks.supportTeam\");\n\t\tconst aiFallbackName = text(\"common.fallbacks.aiAssistant\");\n\n\t\tconst knownItems = items.slice();\n\t\tif (\n\t\t\tconversation.lastTimelineItem &&\n\t\t\t!knownItems.some((item) => item.id === conversation.lastTimelineItem?.id)\n\t\t) {\n\t\t\tknownItems.push(conversation.lastTimelineItem);\n\t\t}\n\n\t\tconst lastAgentItem = [...knownItems]\n\t\t\t.reverse()\n\t\t\t.find((item) => item.userId !== null || item.aiAgentId !== null);\n\n\t\tif (lastAgentItem?.userId) {\n\t\t\tconst human = availableHumanAgents.find(\n\t\t\t\t(agent) => agent.id === lastAgentItem.userId\n\t\t\t);\n\n\t\t\tif (human) {\n\t\t\t\treturn {\n\t\t\t\t\ttype: \"human\",\n\t\t\t\t\tname: human.name,\n\t\t\t\t\timage: human.image ?? null,\n\t\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttype: \"human\",\n\t\t\t\tname: supportFallbackName,\n\t\t\t\timage: null,\n\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t}\n\n\t\tif (lastAgentItem?.aiAgentId) {\n\t\t\tconst ai = availableAIAgents.find(\n\t\t\t\t(agent) => agent.id === lastAgentItem.aiAgentId\n\t\t\t);\n\n\t\t\tif (ai) {\n\t\t\t\treturn {\n\t\t\t\t\ttype: \"ai\",\n\t\t\t\t\tname: ai.name,\n\t\t\t\t\timage: ai.image ?? null,\n\t\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttype: \"ai\",\n\t\t\t\tname: aiFallbackName,\n\t\t\t\timage: null,\n\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t}\n\n\t\tconst fallbackHuman = availableHumanAgents[0];\n\t\tif (fallbackHuman) {\n\t\t\treturn {\n\t\t\t\ttype: \"human\",\n\t\t\t\tname: fallbackHuman.name,\n\t\t\t\timage: fallbackHuman.image ?? null,\n\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t}\n\n\t\tconst fallbackAi = availableAIAgents[0];\n\t\tif (fallbackAi) {\n\t\t\treturn {\n\t\t\t\ttype: \"ai\",\n\t\t\t\tname: fallbackAi.name,\n\t\t\t\timage: fallbackAi.image ?? null,\n\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t}\n\n\t\treturn {\n\t\t\ttype: \"fallback\",\n\t\t\tname: supportFallbackName,\n\t\t\timage: null,\n\t\t} satisfies ConversationButtonLinkAgent;\n\t}, [\n\t\titems,\n\t\tconversation.lastTimelineItem,\n\t\tavailableHumanAgents,\n\t\tavailableAIAgents,\n\t\ttext,\n\t]);\n\n\tconst conversationTitle = useMemo(() => {\n\t\tif (conversation.title) {\n\t\t\treturn conversation.title;\n\t\t}\n\n\t\tif (lastMessage?.content) {\n\t\t\treturn lastMessage.content;\n\t\t}\n\n\t\treturn text(\"component.conversationButtonLink.fallbackTitle\");\n\t}, [conversation.title, lastMessage?.content, text]);\n\n\tconst state: ConversationButtonLinkState = {\n\t\tconversation,\n\t\tlastMessage,\n\t\tassignedAgent,\n\t};\n\n\treturn useRenderElement(\"button\", props, {\n\t\tstate,\n\t\tprops: {\n\t\t\tonClick,\n\t\t\ttype: \"button\",\n\t\t\tclassName: cn(\n\t\t\t\tcoButtonVariants({ variant: \"secondary\", size: \"large\" }),\n\t\t\t\t\"relative gap-3 border-0 border-co-border/50 border-b text-left transition-colors first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-b-0\",\n\t\t\t\ttypeof props.className === \"function\"\n\t\t\t\t\t? props.className(state)\n\t\t\t\t\t: props.className\n\t\t\t),\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t<Avatar\n\t\t\t\t\t\tclassName=\"size-8 flex-shrink-0\"\n\t\t\t\t\t\timage={assignedAgent.image}\n\t\t\t\t\t\tname={assignedAgent.name}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n\t\t\t\t\t\t{typingInfo ? (\n\t\t\t\t\t\t\t<BouncingDots />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<div className=\"flex max-w-[90%] items-center justify-between gap-2\">\n\t\t\t\t\t\t\t\t\t<h3 className=\"truncate font-medium text-co-primary text-sm\">\n\t\t\t\t\t\t\t\t\t\t{conversationTitle}\n\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{lastMessage ? (\n\t\t\t\t\t\t\t\t\t<p className=\"text-co-primary/60 text-xs\">\n\t\t\t\t\t\t\t\t\t\t{lastMessage.isFromVisitor ? (\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t{text(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"component.conversationButtonLink.lastMessage.visitor\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttime: lastMessage.time,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t{text(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"component.conversationButtonLink.lastMessage.agent\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tname:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlastMessage.senderName ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext(\"common.fallbacks.supportTeam\"),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttime: lastMessage.time,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"mr-6 inline-flex items-center rounded px-2 py-0.5 font-medium text-[9px] uppercase\",\n\t\t\t\t\t\t\tconversation.status === ConversationStatus.OPEN\n\t\t\t\t\t\t\t\t? \"bg-co-success/20 text-co-success-foreground\"\n\t\t\t\t\t\t\t\t: conversation.status === ConversationStatus.RESOLVED\n\t\t\t\t\t\t\t\t\t? \"bg-co-neutral/20 text-co-neutral-foreground\"\n\t\t\t\t\t\t\t\t\t: \"bg-co-warning/20 text-co-warning-foreground\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{conversation.status}\n\t\t\t\t\t</div>\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclassName=\"-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary\"\n\t\t\t\t\t\tname=\"arrow-right\"\n\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t});\n}\n"],"mappings":"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"}
+{"version":3,"file":"conversation-button-link.js","names":["STATUS_BADGE_CLASSNAMES: Record<ConversationStatus, string>","STATUS_TEXT_KEYS: Record<ConversationStatus, SupportTextKey>","Icon"],"sources":["../../../src/support/components/conversation-button-link.tsx"],"sourcesContent":["import { type Conversation, ConversationStatus } from \"@cossistant/types\";\nimport type React from \"react\";\nimport { useConversationPreview } from \"../../hooks/use-conversation-preview\";\nimport { type SupportTextKey, useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\nimport { coButtonVariants } from \"./button\";\nimport Icon from \"./icons\";\nimport { BouncingDots } from \"./typing-indicator\";\n\nexport type ConversationButtonLinkProps = {\n\tconversation: Conversation;\n\tonClick?: () => void;\n\tclassName?: string;\n};\n\nconst STATUS_BADGE_CLASSNAMES: Record<ConversationStatus, string> = {\n\t[ConversationStatus.OPEN]: \"bg-co-success/20 text-co-success-foreground\",\n\t[ConversationStatus.RESOLVED]: \"bg-co-neutral/20 text-co-neutral-foreground\",\n\t[ConversationStatus.SPAM]: \"bg-co-warning/20 text-co-warning-foreground\",\n};\n\nconst DEFAULT_STATUS_BADGE_CLASSNAME =\n\t\"bg-co-neutral/20 text-co-neutral-foreground\";\n\nconst STATUS_TEXT_KEYS: Record<ConversationStatus, SupportTextKey> = {\n\t[ConversationStatus.OPEN]: \"component.conversationButtonLink.status.open\",\n\t[ConversationStatus.RESOLVED]:\n\t\t\"component.conversationButtonLink.status.resolved\",\n\t[ConversationStatus.SPAM]: \"component.conversationButtonLink.status.spam\",\n};\n\n/**\n * Renders a navigable preview card for a conversation including assigned agent\n * details, last message snippets and typing indicators.\n */\nexport function ConversationButtonLink({\n\tconversation,\n\tonClick,\n\tclassName,\n}: ConversationButtonLinkProps): React.ReactElement | null {\n\tconst preview = useConversationPreview({ conversation });\n\tconst text = useSupportText();\n\tconst { lastMessage, assignedAgent, typing } = preview;\n\n\tconst statusBadgeClassName = conversation.deletedAt\n\t\t? STATUS_BADGE_CLASSNAMES[ConversationStatus.RESOLVED]\n\t\t: (STATUS_BADGE_CLASSNAMES[conversation.status] ??\n\t\t\tDEFAULT_STATUS_BADGE_CLASSNAME);\n\n\tconst statusTextKey = conversation.deletedAt\n\t\t? STATUS_TEXT_KEYS[ConversationStatus.RESOLVED]\n\t\t: STATUS_TEXT_KEYS[conversation.status];\n\n\tconst statusText = conversation.deletedAt\n\t\t? text(\"component.conversationButtonLink.status.closed\")\n\t\t: statusTextKey\n\t\t\t? text(statusTextKey)\n\t\t\t: text(\"common.fallbacks.unknown\");\n\n\tconst lastMessageContent = lastMessage ? (\n\t\tlastMessage.isFromVisitor ? (\n\t\t\t<span>\n\t\t\t\t{text(\"component.conversationButtonLink.lastMessage.visitor\", {\n\t\t\t\t\ttime: lastMessage.time,\n\t\t\t\t})}\n\t\t\t</span>\n\t\t) : (\n\t\t\t<span>\n\t\t\t\t{text(\"component.conversationButtonLink.lastMessage.agent\", {\n\t\t\t\t\tname: lastMessage.senderName || text(\"common.fallbacks.supportTeam\"),\n\t\t\t\t\ttime: lastMessage.time,\n\t\t\t\t})}\n\t\t\t</span>\n\t\t)\n\t) : undefined;\n\n\treturn (\n\t\t<button\n\t\t\tclassName={cn(\n\t\t\t\tcoButtonVariants({\n\t\t\t\t\tvariant: \"secondary\",\n\t\t\t\t\tsize: \"large\",\n\t\t\t\t}),\n\t\t\t\t\"group/btn relative gap-3 border-0 border-co-border/50 border-b text-left transition-colors first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-b-0\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClick={onClick}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t<Avatar\n\t\t\t\tclassName=\"flex size-8 flex-shrink-0 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500\"\n\t\t\t\timage={assignedAgent?.image}\n\t\t\t\tname={assignedAgent?.name ?? text(\"common.fallbacks.supportTeam\")}\n\t\t\t/>\n\n\t\t\t<div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n\t\t\t\t{typing.isTyping ? (\n\t\t\t\t\t<BouncingDots />\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"flex max-w-[90%] items-center justify-between gap-2\">\n\t\t\t\t\t\t\t<h3 className=\"truncate font-medium text-co-primary text-sm\">\n\t\t\t\t\t\t\t\t{preview.title}\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{lastMessageContent ? (\n\t\t\t\t\t\t\t<p className=\"text-co-primary/60 text-xs\">{lastMessageContent}</p>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"mr-6 inline-flex items-center rounded px-2 py-0.5 font-medium text-[9px] uppercase\",\n\t\t\t\t\tstatusBadgeClassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{statusText}\n\t\t\t</div>\n\n\t\t\t<Icon\n\t\t\t\tclassName=\"-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary\"\n\t\t\t\tname=\"arrow-right\"\n\t\t\t\tvariant=\"default\"\n\t\t\t/>\n\t\t</button>\n\t);\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAMA,0BAA8D;EAClE,mBAAmB,OAAO;EAC1B,mBAAmB,WAAW;EAC9B,mBAAmB,OAAO;CAC3B;AAED,MAAM,iCACL;AAED,MAAMC,mBAA+D;EACnE,mBAAmB,OAAO;EAC1B,mBAAmB,WACnB;EACA,mBAAmB,OAAO;CAC3B;;;;;AAMD,SAAgB,uBAAuB,EACtC,cACA,SACA,aAC0D;CAC1D,MAAM,UAAU,uBAAuB,EAAE,cAAc,CAAC;CACxD,MAAM,OAAO,gBAAgB;CAC7B,MAAM,EAAE,aAAa,eAAe,WAAW;CAE/C,MAAM,uBAAuB,aAAa,YACvC,wBAAwB,mBAAmB,YAC1C,wBAAwB,aAAa,WACvC;CAEF,MAAM,gBAAgB,aAAa,YAChC,iBAAiB,mBAAmB,YACpC,iBAAiB,aAAa;CAEjC,MAAM,aAAa,aAAa,YAC7B,KAAK,iDAAiD,GACtD,gBACC,KAAK,cAAc,GACnB,KAAK,2BAA2B;CAEpC,MAAM,qBAAqB,cAC1B,YAAY,gBACX,oBAAC,oBACC,KAAK,wDAAwD,EAC7D,MAAM,YAAY,MAClB,CAAC,GACI,GAEP,oBAAC,oBACC,KAAK,sDAAsD;EAC3D,MAAM,YAAY,cAAc,KAAK,+BAA+B;EACpE,MAAM,YAAY;EAClB,CAAC,GACI,GAEL;AAEJ,QACC,qBAAC;EACA,WAAW,GACV,iBAAiB;GAChB,SAAS;GACT,MAAM;GACN,CAAC,EACF,qKACA,UACA;EACQ;EACT,MAAK;;GAEL,oBAAC;IACA,WAAU;IACV,OAAO,eAAe;IACtB,MAAM,eAAe,QAAQ,KAAK,+BAA+B;KAChE;GAEF,oBAAC;IAAI,WAAU;cACb,OAAO,WACP,oBAAC,iBAAe,GAEhB,4CACC,oBAAC;KAAI,WAAU;eACd,oBAAC;MAAG,WAAU;gBACZ,QAAQ;OACL;MACA,EACL,qBACA,oBAAC;KAAE,WAAU;eAA8B;MAAuB,GAC/D,QACF;KAEC;GAEN,oBAAC;IACA,WAAW,GACV,sFACA,qBACA;cAEA;KACI;GAEN,oBAACC;IACA,WAAU;IACV,MAAK;IACL,SAAQ;KACP;;GACM"}

package/support/components/conversation-event.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-event.d.ts","names":[],"sources":["../../../src/support/components/conversation-event.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,sBAAA;SACJ;EADI,iBAAA,EAEQ,gBAFc,EAAA;EAAA,oBAAA,EAGX,mBAHW,EAAA;WAC1B,CAAA,EAAA,MAAA;;AAEe,cAIV,iBAJU,EAIS,KAAA,CAAM,EAJf,CAIkB,sBAJlB,CAAA"}
+{"version":3,"file":"conversation-event.d.ts","names":[],"sources":["../../../src/support/components/conversation-event.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,sBAAA;SACJ;EADI,iBAAA,EAEQ,gBAFc,EAAA;EAC1B,oBAAA,EAEe,mBAFf,EAAA;EACY,SAAA,CAAA,EAAA,MAAA;CACG;AAAmB,cAI7B,iBAJ6B,EAIV,KAAA,CAAM,EAJI,CAID,sBAJC,CAAA"}

package/support/components/conversation-event.js

@@ -24,6 +24,9 @@ const ConversationEvent = ({ event, availableAIAgents, createdAt, availableHuman
 			case "tag_removed": return text("component.conversationEvent.tagRemoved", { actorName });
 			case "resolved": return text("component.conversationEvent.resolved", { actorName });
 			case "reopened": return text("component.conversationEvent.reopened", { actorName });
+			case "visitor_blocked": return text("component.conversationEvent.visitorBlocked", { actorName });
+			case "visitor_unblocked": return text("component.conversationEvent.visitorUnblocked", { actorName });
+			case "visitor_identified": return text("component.conversationEvent.visitorIdentified", { actorName });
 			default: return text("component.conversationEvent.default", { actorName });
 		}
 	};
@@ -70,6 +73,7 @@ const ConversationEvent = ({ event, availableAIAgents, createdAt, availableHuman
 		})
 	});
 };
+ConversationEvent.displayName = "ConversationEvent";
 
 //#endregion
 export { ConversationEvent };

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

@@ -1 +1 @@
-{"version":3,"file":"conversation-event.js","names":["ConversationEvent: React.FC<ConversationEventProps>"],"sources":["../../../src/support/components/conversation-event.tsx"],"sourcesContent":["import type {\n\tAvailableAIAgent,\n\tAvailableHumanAgent,\n\tTimelinePartEvent,\n} from \"@cossistant/types\";\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useSupportText } from \"../text\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\n\nexport type ConversationEventProps = {\n\tevent: TimelinePartEvent;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcreatedAt?: string;\n};\n\nexport const ConversationEvent: React.FC<ConversationEventProps> = ({\n\tevent,\n\tavailableAIAgents,\n\tcreatedAt,\n\tavailableHumanAgents,\n}) => {\n\tconst text = useSupportText();\n\tconst isAI = event.actorAiAgentId !== null;\n\tconst humanAgent = availableHumanAgents.find(\n\t\t(agent) => agent.id === event.actorUserId\n\t);\n\tconst aiAgent = availableAIAgents.find(\n\t\t(agent) => agent.id === event.actorAiAgentId\n\t);\n\n\t// Get the actor name\n\tconst actorName = isAI\n\t\t? aiAgent?.name || text(\"common.fallbacks.cossistant\")\n\t\t: humanAgent?.name || text(\"common.fallbacks.someone\");\n\n\t// Convert event type to plain English\n\tconst getEventText = () => {\n\t\tswitch (event.eventType) {\n\t\t\tcase \"assigned\":\n\t\t\t\treturn text(\"component.conversationEvent.assigned\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"unassigned\":\n\t\t\t\treturn text(\"component.conversationEvent.unassigned\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_requested\":\n\t\t\t\treturn text(\"component.conversationEvent.participantRequested\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_joined\":\n\t\t\t\treturn text(\"component.conversationEvent.participantJoined\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_left\":\n\t\t\t\treturn text(\"component.conversationEvent.participantLeft\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"status_changed\":\n\t\t\t\treturn text(\"component.conversationEvent.statusChanged\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"priority_changed\":\n\t\t\t\treturn text(\"component.conversationEvent.priorityChanged\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"tag_added\":\n\t\t\t\treturn text(\"component.conversationEvent.tagAdded\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"tag_removed\":\n\t\t\t\treturn text(\"component.conversationEvent.tagRemoved\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"resolved\":\n\t\t\t\treturn text(\"component.conversationEvent.resolved\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"reopened\":\n\t\t\t\treturn text(\"component.conversationEvent.reopened\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tdefault:\n\t\t\t\treturn text(\"component.conversationEvent.default\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t}\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={{ opacity: 1, scale: 1 }}\n\t\t\tclassName=\"flex items-center justify-center py-4\"\n\t\t\tinitial={{ opacity: 0, scale: 0.95 }}\n\t\t\ttransition={{ duration: 0.3, ease: \"easeOut\" }}\n\t\t>\n\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground text-xs\">\n\t\t\t\t<div className=\"flex flex-col justify-end\">\n\t\t\t\t\t{isAI ? (\n\t\t\t\t\t\t<div className=\"flex size-5 items-center justify-center rounded-full bg-primary/10\">\n\t\t\t\t\t\t\t<CossistantLogo className=\"h-3 w-3 text-primary\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\tclassName=\"size-5 flex-shrink-0 overflow-clip rounded-full\"\n\t\t\t\t\t\t\timage={humanAgent?.image}\n\t\t\t\t\t\t\tname={humanAgent?.name || text(\"common.fallbacks.someone\")}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<span className=\"px-2\">{getEventText()}</span>\n\t\t\t\t{createdAt && (\n\t\t\t\t\t<time className=\"text-[10px]\">\n\t\t\t\t\t\t{new Date(createdAt).toLocaleTimeString([], {\n\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t})}\n\t\t\t\t\t</time>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</motion.div>\n\t);\n};\n"],"mappings":";;;;;;;AAkBA,MAAaA,qBAAuD,EACnE,OACA,mBACA,WACA,2BACK;CACL,MAAM,OAAO,gBAAgB;CAC7B,MAAM,OAAO,MAAM,mBAAmB;CACtC,MAAM,aAAa,qBAAqB,MACtC,UAAU,MAAM,OAAO,MAAM,YAC9B;CACD,MAAM,UAAU,kBAAkB,MAChC,UAAU,MAAM,OAAO,MAAM,eAC9B;CAGD,MAAM,YAAY,OACf,SAAS,QAAQ,KAAK,8BAA8B,GACpD,YAAY,QAAQ,KAAK,2BAA2B;CAGvD,MAAM,qBAAqB;AAC1B,UAAQ,MAAM,WAAd;GACC,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,aACJ,QAAO,KAAK,0CAA0C,EACrD,WACA,CAAC;GACH,KAAK,wBACJ,QAAO,KAAK,oDAAoD,EAC/D,WACA,CAAC;GACH,KAAK,qBACJ,QAAO,KAAK,iDAAiD,EAC5D,WACA,CAAC;GACH,KAAK,mBACJ,QAAO,KAAK,+CAA+C,EAC1D,WACA,CAAC;GACH,KAAK,iBACJ,QAAO,KAAK,6CAA6C,EACxD,WACA,CAAC;GACH,KAAK,mBACJ,QAAO,KAAK,+CAA+C,EAC1D,WACA,CAAC;GACH,KAAK,YACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,cACJ,QAAO,KAAK,0CAA0C,EACrD,WACA,CAAC;GACH,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,QACC,QAAO,KAAK,uCAAuC,EAClD,WACA,CAAC;;;AAIL,QACC,oBAAC,OAAO;EACP,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG;EACjC,WAAU;EACV,SAAS;GAAE,SAAS;GAAG,OAAO;GAAM;EACpC,YAAY;GAAE,UAAU;GAAK,MAAM;GAAW;YAE9C,qBAAC;GAAI,WAAU;;IACd,oBAAC;KAAI,WAAU;eACb,OACA,oBAAC;MAAI,WAAU;gBACd,oBAAC,kBAAe,WAAU,yBAAyB;OAC9C,GAEN,oBAAC;MACA,WAAU;MACV,OAAO,YAAY;MACnB,MAAM,YAAY,QAAQ,KAAK,2BAA2B;OACzD;MAEE;IACN,oBAAC;KAAK,WAAU;eAAQ,cAAc;MAAQ;IAC7C,aACA,oBAAC;KAAK,WAAU;eACd,IAAI,KAAK,UAAU,CAAC,mBAAmB,EAAE,EAAE;MAC3C,MAAM;MACN,QAAQ;MACR,CAAC;MACI;;IAEH;GACM"}
+{"version":3,"file":"conversation-event.js","names":["ConversationEvent: React.FC<ConversationEventProps>"],"sources":["../../../src/support/components/conversation-event.tsx"],"sourcesContent":["import type {\n\tAvailableAIAgent,\n\tAvailableHumanAgent,\n\tTimelinePartEvent,\n} from \"@cossistant/types\";\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useSupportText } from \"../text\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\n\nexport type ConversationEventProps = {\n\tevent: TimelinePartEvent;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcreatedAt?: string;\n};\n\nexport const ConversationEvent: React.FC<ConversationEventProps> = ({\n\tevent,\n\tavailableAIAgents,\n\tcreatedAt,\n\tavailableHumanAgents,\n}) => {\n\tconst text = useSupportText();\n\tconst isAI = event.actorAiAgentId !== null;\n\tconst humanAgent = availableHumanAgents.find(\n\t\t(agent) => agent.id === event.actorUserId\n\t);\n\tconst aiAgent = availableAIAgents.find(\n\t\t(agent) => agent.id === event.actorAiAgentId\n\t);\n\n\t// Get the actor name\n\tconst actorName = isAI\n\t\t? aiAgent?.name || text(\"common.fallbacks.cossistant\")\n\t\t: humanAgent?.name || text(\"common.fallbacks.someone\");\n\n\t// Convert event type to plain English\n\tconst getEventText = () => {\n\t\tswitch (event.eventType) {\n\t\t\tcase \"assigned\":\n\t\t\t\treturn text(\"component.conversationEvent.assigned\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"unassigned\":\n\t\t\t\treturn text(\"component.conversationEvent.unassigned\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_requested\":\n\t\t\t\treturn text(\"component.conversationEvent.participantRequested\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_joined\":\n\t\t\t\treturn text(\"component.conversationEvent.participantJoined\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_left\":\n\t\t\t\treturn text(\"component.conversationEvent.participantLeft\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"status_changed\":\n\t\t\t\treturn text(\"component.conversationEvent.statusChanged\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"priority_changed\":\n\t\t\t\treturn text(\"component.conversationEvent.priorityChanged\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"tag_added\":\n\t\t\t\treturn text(\"component.conversationEvent.tagAdded\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"tag_removed\":\n\t\t\t\treturn text(\"component.conversationEvent.tagRemoved\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"resolved\":\n\t\t\t\treturn text(\"component.conversationEvent.resolved\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"reopened\":\n\t\t\t\treturn text(\"component.conversationEvent.reopened\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"visitor_blocked\":\n\t\t\t\treturn text(\"component.conversationEvent.visitorBlocked\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"visitor_unblocked\":\n\t\t\t\treturn text(\"component.conversationEvent.visitorUnblocked\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"visitor_identified\":\n\t\t\t\treturn text(\"component.conversationEvent.visitorIdentified\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tdefault:\n\t\t\t\treturn text(\"component.conversationEvent.default\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t}\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={{ opacity: 1, scale: 1 }}\n\t\t\tclassName=\"flex items-center justify-center py-4\"\n\t\t\tinitial={{ opacity: 0, scale: 0.95 }}\n\t\t\ttransition={{ duration: 0.3, ease: \"easeOut\" }}\n\t\t>\n\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground text-xs\">\n\t\t\t\t<div className=\"flex flex-col justify-end\">\n\t\t\t\t\t{isAI ? (\n\t\t\t\t\t\t<div className=\"flex size-5 items-center justify-center rounded-full bg-primary/10\">\n\t\t\t\t\t\t\t<CossistantLogo className=\"h-3 w-3 text-primary\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\tclassName=\"size-5 flex-shrink-0 overflow-clip rounded-full\"\n\t\t\t\t\t\t\timage={humanAgent?.image}\n\t\t\t\t\t\t\tname={humanAgent?.name || text(\"common.fallbacks.someone\")}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<span className=\"px-2\">{getEventText()}</span>\n\t\t\t\t{createdAt && (\n\t\t\t\t\t<time className=\"text-[10px]\">\n\t\t\t\t\t\t{new Date(createdAt).toLocaleTimeString([], {\n\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t})}\n\t\t\t\t\t</time>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</motion.div>\n\t);\n};\n\nConversationEvent.displayName = \"ConversationEvent\";\n"],"mappings":";;;;;;;AAkBA,MAAaA,qBAAuD,EACnE,OACA,mBACA,WACA,2BACK;CACL,MAAM,OAAO,gBAAgB;CAC7B,MAAM,OAAO,MAAM,mBAAmB;CACtC,MAAM,aAAa,qBAAqB,MACtC,UAAU,MAAM,OAAO,MAAM,YAC9B;CACD,MAAM,UAAU,kBAAkB,MAChC,UAAU,MAAM,OAAO,MAAM,eAC9B;CAGD,MAAM,YAAY,OACf,SAAS,QAAQ,KAAK,8BAA8B,GACpD,YAAY,QAAQ,KAAK,2BAA2B;CAGvD,MAAM,qBAAqB;AAC1B,UAAQ,MAAM,WAAd;GACC,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,aACJ,QAAO,KAAK,0CAA0C,EACrD,WACA,CAAC;GACH,KAAK,wBACJ,QAAO,KAAK,oDAAoD,EAC/D,WACA,CAAC;GACH,KAAK,qBACJ,QAAO,KAAK,iDAAiD,EAC5D,WACA,CAAC;GACH,KAAK,mBACJ,QAAO,KAAK,+CAA+C,EAC1D,WACA,CAAC;GACH,KAAK,iBACJ,QAAO,KAAK,6CAA6C,EACxD,WACA,CAAC;GACH,KAAK,mBACJ,QAAO,KAAK,+CAA+C,EAC1D,WACA,CAAC;GACH,KAAK,YACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,cACJ,QAAO,KAAK,0CAA0C,EACrD,WACA,CAAC;GACH,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,kBACJ,QAAO,KAAK,8CAA8C,EACzD,WACA,CAAC;GACH,KAAK,oBACJ,QAAO,KAAK,gDAAgD,EAC3D,WACA,CAAC;GACH,KAAK,qBACJ,QAAO,KAAK,iDAAiD,EAC5D,WACA,CAAC;GACH,QACC,QAAO,KAAK,uCAAuC,EAClD,WACA,CAAC;;;AAIL,QACC,oBAAC,OAAO;EACP,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG;EACjC,WAAU;EACV,SAAS;GAAE,SAAS;GAAG,OAAO;GAAM;EACpC,YAAY;GAAE,UAAU;GAAK,MAAM;GAAW;YAE9C,qBAAC;GAAI,WAAU;;IACd,oBAAC;KAAI,WAAU;eACb,OACA,oBAAC;MAAI,WAAU;gBACd,oBAAC,kBAAe,WAAU,yBAAyB;OAC9C,GAEN,oBAAC;MACA,WAAU;MACV,OAAO,YAAY;MACnB,MAAM,YAAY,QAAQ,KAAK,2BAA2B;OACzD;MAEE;IACN,oBAAC;KAAK,WAAU;eAAQ,cAAc;MAAQ;IAC7C,aACA,oBAAC;KAAK,WAAU;eACd,IAAI,KAAK,UAAU,CAAC,mBAAmB,EAAE,EAAE;MAC3C,MAAM;MACN,QAAQ;MACR,CAAC;MACI;;IAEH;GACM;;AAIf,kBAAkB,cAAc"}

package/support/components/conversation-timeline.d.ts

@@ -3,6 +3,14 @@ import React from "react";
 import { AvailableAIAgent, AvailableHumanAgent } from "@cossistant/types";
 
 //#region src/support/components/conversation-timeline.d.ts
+type ConversationTimelineToolProps = {
+  item: TimelineItem;
+  conversationId: string;
+};
+type ConversationTimelineToolDefinition = {
+  component: React.ComponentType<ConversationTimelineToolProps>;
+};
+type ConversationTimelineTools = Record<string, ConversationTimelineToolDefinition>;
 type ConversationTimelineProps = {
   conversationId: string;
   items: TimelineItem[];
@@ -10,8 +18,9 @@ type ConversationTimelineProps = {
   availableAIAgents: AvailableAIAgent[];
   availableHumanAgents: AvailableHumanAgent[];
   currentVisitorId?: string;
+  tools?: ConversationTimelineTools;
 };
 declare const ConversationTimelineList: React.FC<ConversationTimelineProps>;
 //#endregion
-export { ConversationTimelineList, ConversationTimelineProps };
+export { ConversationTimelineList, ConversationTimelineProps, ConversationTimelineToolDefinition, ConversationTimelineToolProps, ConversationTimelineTools };
 //# sourceMappingURL=conversation-timeline.d.ts.map

package/support/components/conversation-timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-timeline.d.ts","names":[],"sources":["../../../src/support/components/conversation-timeline.tsx"],"sourcesContent":[],"mappings":";;;;;KAoCY,yBAAA;;EAAA,KAAA,EAEJ,YAFI,EAAA;EAAyB,SAAA,CAAA,EAAA,MAAA;mBAE7B,EAEY,gBAFZ,EAAA;sBAEY,EACG,mBADH,EAAA;kBACG,CAAA,EAAA,MAAA;CAAmB;AAI7B,cAAA,wBAsIZ,EAtIsC,KAAA,CAAM,EAsI5C,CAtI+C,yBAsI/C,CAAA"}
+{"version":3,"file":"conversation-timeline.d.ts","names":[],"sources":["../../../src/support/components/conversation-timeline.tsx"],"sourcesContent":[],"mappings":";;;;;KAiCY,6BAAA;QACL;EADK,cAAA,EAAA,MAAA;AAKZ,CAAA;AAIY,KAJA,kCAAA,GAMX;EAGW,SAAA,EARA,KAAA,CAAM,aAQmB,CARL,6BAQK,CAAA;CAE7B;AAEY,KATR,yBAAA,GAA4B,MASpB,CAAA,MAAA,EAPnB,kCAOmB,CAAA;AACG,KALX,yBAAA,GAKW;EAEd,cAAA,EAAA,MAAA;EAAyB,KAAA,EAL1B,YAK0B,EAAA;EAGrB,SAAA,CAAA,EAAA,MAAA;qBANO;wBACG;;UAEd;;cAGI,0BAA0B,KAAA,CAAM,GAAG"}

package/support/components/conversation-timeline.js

@@ -1,51 +1,48 @@
 import { cn } from "../utils/index.js";
 import { TypingIndicator } from "./typing-indicator.js";
 import { ConversationTimeline, ConversationTimelineContainer } from "../../primitives/conversation-timeline.js";
-import { useGroupedMessages } from "../../hooks/private/use-grouped-messages.js";
+import { useConversationTimeline } from "../../hooks/use-conversation-timeline.js";
 import { ConversationEvent } from "./conversation-event.js";
 import { TimelineMessageGroup } from "./timeline-message-group.js";
-import { useDebouncedConversationSeen } from "../../hooks/use-conversation-seen.js";
-import { useConversationTyping } from "../../hooks/use-conversation-typing.js";
-import { useMemo } from "react";
-import { SenderType } from "@cossistant/types";
+import { useCallback, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence } from "motion/react";
 
 //#region src/support/components/conversation-timeline.tsx
 function extractEventPart(item) {
 	if (item.type !== "event") return null;
 	return item.parts.find((part) => part.type === "event") || null;
 }
-const ConversationTimelineList = ({ conversationId, items: timelineItems, className, availableAIAgents = [], availableHumanAgents = [], currentVisitorId }) => {
-	const seenData = useDebouncedConversationSeen(conversationId);
-	const typingEntries = useConversationTyping(conversationId, { excludeVisitorId: currentVisitorId ?? null });
-	const { items, getMessageSeenBy } = useGroupedMessages({
+const EMPTY_SEEN_BY_IDS = Object.freeze([]);
+const EMPTY_SEEN_BY_NAMES = Object.freeze([]);
+const ConversationTimelineList = ({ conversationId, items: timelineItems, className, availableAIAgents = [], availableHumanAgents = [], currentVisitorId, tools }) => {
+	const timeline = useConversationTimeline({
+		conversationId,
 		items: timelineItems,
-		seenData,
-		currentViewerId: currentVisitorId,
-		viewerType: SenderType.VISITOR
+		currentVisitorId
 	});
-	const lastVisitorMessageGroupIndex = useMemo(() => {
-		for (let i = items.length - 1; i >= 0; i--) {
-			const item = items[i];
-			if (!item) continue;
-			if (item.type === "message_group") {
-				if ((item.items?.[0])?.visitorId === currentVisitorId) return i;
-			}
+	const typingIndicatorParticipants = useMemo(() => timeline.typingParticipants.map((participant) => ({
+		id: participant.id,
+		type: participant.type
+	})), [timeline.typingParticipants]);
+	const seenNameLookup = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const agent of availableHumanAgents) if (agent.name) map.set(agent.id, agent.name);
+		for (const agent of availableAIAgents) if (agent.name) map.set(agent.id, agent.name);
+		return map;
+	}, [availableHumanAgents, availableAIAgents]);
+	const getSeenByNames = useCallback((ids = EMPTY_SEEN_BY_IDS) => {
+		if (ids.length === 0 || seenNameLookup.size === 0) return EMPTY_SEEN_BY_NAMES;
+		const uniqueNames = /* @__PURE__ */ new Set();
+		const names = [];
+		for (const id of ids) {
+			const name = seenNameLookup.get(id);
+			if (!name || uniqueNames.has(name)) continue;
+			uniqueNames.add(name);
+			names.push(name);
 		}
-		return -1;
-	}, [items, currentVisitorId]);
-	const typingParticipants = useMemo(() => typingEntries.map((entry) => {
-		if (entry.actorType === "user") return {
-			id: entry.actorId,
-			type: "team_member"
-		};
-		if (entry.actorType === "ai_agent") return {
-			id: entry.actorId,
-			type: "ai"
-		};
-		return null;
-	}).filter((participant) => participant !== null), [typingEntries]);
+		if (names.length === 0) return EMPTY_SEEN_BY_NAMES;
+		return Object.freeze(names);
+	}, [seenNameLookup]);
 	return /* @__PURE__ */ jsx(ConversationTimeline, {
 		autoScroll: true,
 		className: cn("overflow-y-auto scroll-smooth px-3 py-6", "scrollbar-thin scrollbar-thumb-co-background-300 scrollbar-track-transparent", "h-full w-full", className),
@@ -53,37 +50,46 @@ const ConversationTimelineList = ({ conversationId, items: timelineItems, classN
 		items: timelineItems,
 		children: /* @__PURE__ */ jsxs(ConversationTimelineContainer, {
 			className: "flex min-h-full w-full flex-col gap-3",
-			children: [/* @__PURE__ */ jsx(AnimatePresence, {
-				initial: false,
-				mode: "popLayout",
-				children: items.map((item, index) => {
-					if (item.type === "timeline_event") {
-						const eventPart = extractEventPart(item.item);
-						if (!eventPart) return null;
-						return /* @__PURE__ */ jsx(ConversationEvent, {
-							availableAIAgents,
-							availableHumanAgents,
-							createdAt: item.item.createdAt,
-							event: eventPart
-						}, item.item.id || `timeline-event-${index}`);
-					}
-					const seenByIds = index === lastVisitorMessageGroupIndex && item.lastMessageId ? getMessageSeenBy(item.lastMessageId) : [];
-					const groupKey = item.items?.[0]?.id || `group-${index}`;
-					return /* @__PURE__ */ jsx(TimelineMessageGroup, {
+			children: [timeline.groupedMessages.items.map((item, index) => {
+				if (item.type === "timeline_event") {
+					const eventPart = extractEventPart(item.item);
+					if (!eventPart) return null;
+					return /* @__PURE__ */ jsx(ConversationEvent, {
 						availableAIAgents,
 						availableHumanAgents,
-						currentVisitorId,
-						items: item.items || [],
-						seenByIds
-					}, groupKey);
-				})
+						createdAt: item.item.createdAt,
+						event: eventPart
+					}, item.item.id ?? `timeline-event-${item.item.createdAt}`);
+				}
+				if (item.type === "timeline_tool") {
+					const toolName = item.tool ?? item.item.tool ?? item.item.type;
+					const toolDefinition = toolName ? tools?.[toolName] : void 0;
+					if (!toolDefinition) return null;
+					const ToolComponent = toolDefinition.component;
+					const toolKey = item.item.id ?? `${toolName}-${item.item.createdAt}-${index}`;
+					return /* @__PURE__ */ jsx(ToolComponent, {
+						conversationId,
+						item: item.item
+					}, toolKey);
+				}
+				const seenByIds = index === timeline.lastVisitorMessageGroupIndex && item.lastMessageId ? timeline.groupedMessages.getMessageSeenBy(item.lastMessageId) : EMPTY_SEEN_BY_IDS;
+				const seenByNames = seenByIds.length > 0 ? getSeenByNames(seenByIds) : EMPTY_SEEN_BY_NAMES;
+				const groupKey = item.lastMessageId ?? item.items?.[0]?.id ?? `group-${item.items?.[0]?.createdAt ?? index}`;
+				return /* @__PURE__ */ jsx(TimelineMessageGroup, {
+					availableAIAgents,
+					availableHumanAgents,
+					currentVisitorId,
+					items: item.items || [],
+					seenByIds,
+					seenByNames
+				}, groupKey);
 			}), /* @__PURE__ */ jsx("div", {
 				className: "h-6 w-full",
-				children: typingParticipants.length > 0 ? /* @__PURE__ */ jsx(TypingIndicator, {
+				children: typingIndicatorParticipants.length > 0 ? /* @__PURE__ */ jsx(TypingIndicator, {
 					availableAIAgents,
 					availableHumanAgents,
 					className: "mt-2",
-					participants: typingParticipants
+					participants: typingIndicatorParticipants
 				}) : null
 			})]
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"conversation-timeline.js","names":["ConversationTimelineList: React.FC<ConversationTimelineProps>","PrimitiveConversationTimeline","ConversationEventComponent"],"sources":["../../../src/support/components/conversation-timeline.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport { SenderType } from \"@cossistant/types\";\nimport type {\n\tTimelineItem,\n\tTimelinePartEvent,\n} from \"@cossistant/types/api/timeline-item\";\nimport { AnimatePresence } from \"motion/react\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport {\n\tuseConversationTyping,\n\tuseDebouncedConversationSeen,\n} from \"../../hooks\";\nimport { useGroupedMessages } from \"../../hooks/private/use-grouped-messages\";\nimport {\n\tConversationTimelineContainer,\n\tConversationTimeline as PrimitiveConversationTimeline,\n} from \"../../primitives/conversation-timeline\";\nimport { cn } from \"../utils\";\nimport { ConversationEvent as ConversationEventComponent } 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\nexport type ConversationTimelineProps = {\n\tconversationId: string;\n\titems: TimelineItem[];\n\tclassName?: string;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcurrentVisitorId?: string;\n};\n\nexport const ConversationTimelineList: React.FC<ConversationTimelineProps> = ({\n\tconversationId,\n\titems: timelineItems,\n\tclassName,\n\tavailableAIAgents = [],\n\tavailableHumanAgents = [],\n\tcurrentVisitorId,\n}) => {\n\tconst seenData = useDebouncedConversationSeen(conversationId);\n\tconst typingEntries = useConversationTyping(conversationId, {\n\t\texcludeVisitorId: currentVisitorId ?? null,\n\t});\n\n\tconst { items, getMessageSeenBy } = useGroupedMessages({\n\t\titems: timelineItems,\n\t\tseenData,\n\t\tcurrentViewerId: currentVisitorId,\n\t\tviewerType: SenderType.VISITOR,\n\t});\n\n\t// Find the last message group sent by the current visitor\n\tconst lastVisitorMessageGroupIndex = useMemo(() => {\n\t\tfor (let i = items.length - 1; i >= 0; i--) {\n\t\t\tconst item = items[i];\n\t\t\tif (!item) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tif (item.type === \"message_group\") {\n\t\t\t\tconst firstItem = item.items?.[0];\n\t\t\t\tif (firstItem?.visitorId === currentVisitorId) {\n\t\t\t\t\treturn i;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn -1;\n\t}, [items, currentVisitorId]);\n\n\tconst typingParticipants = useMemo(\n\t\t() =>\n\t\t\ttypingEntries\n\t\t\t\t.map((entry): TypingParticipant | null => {\n\t\t\t\t\tif (entry.actorType === \"user\") {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: entry.actorId,\n\t\t\t\t\t\t\ttype: \"team_member\" as const,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\tif (entry.actorType === \"ai_agent\") {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: entry.actorId,\n\t\t\t\t\t\t\ttype: \"ai\" as const,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter(\n\t\t\t\t\t(participant): participant is TypingParticipant =>\n\t\t\t\t\t\tparticipant !== null\n\t\t\t\t),\n\t\t[typingEntries]\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-auto scroll-smooth px-3 py-6\",\n\t\t\t\t\"scrollbar-thin scrollbar-thumb-co-background-300 scrollbar-track-transparent\",\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<AnimatePresence initial={false} mode=\"popLayout\">\n\t\t\t\t\t{items.map((item, index) => {\n\t\t\t\t\t\tif (item.type === \"timeline_event\") {\n\t\t\t\t\t\t\t// Extract event data from parts\n\t\t\t\t\t\t\tconst eventPart = extractEventPart(item.item);\n\n\t\t\t\t\t\t\t// Only render if we have valid event data\n\t\t\t\t\t\t\tif (!eventPart) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ConversationEventComponent\n\t\t\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\t\t\tcreatedAt={item.item.createdAt}\n\t\t\t\t\t\t\t\t\tevent={eventPart}\n\t\t\t\t\t\t\t\t\tkey={item.item.id || `timeline-event-${index}`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Only show seen indicator on the LAST message group sent by the visitor\n\t\t\t\t\t\tconst isLastVisitorGroup = index === lastVisitorMessageGroupIndex;\n\t\t\t\t\t\tconst seenByIds =\n\t\t\t\t\t\t\tisLastVisitorGroup && item.lastMessageId\n\t\t\t\t\t\t\t\t? getMessageSeenBy(item.lastMessageId)\n\t\t\t\t\t\t\t\t: [];\n\n\t\t\t\t\t\t// Use first timeline item ID as stable key\n\t\t\t\t\t\tconst groupKey = item.items?.[0]?.id || `group-${index}`;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<TimelineMessageGroup\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\tcurrentVisitorId={currentVisitorId}\n\t\t\t\t\t\t\t\titems={item.items || []}\n\t\t\t\t\t\t\t\tkey={groupKey}\n\t\t\t\t\t\t\t\tseenByIds={seenByIds}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</AnimatePresence>\n\t\t\t\t<div className=\"h-6 w-full\">\n\t\t\t\t\t{typingParticipants.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={typingParticipants}\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":";;;;;;;;;;;;;;AAwBA,SAAS,iBAAiB,MAA8C;AACvE,KAAI,KAAK,SAAS,QACjB,QAAO;AAOR,QAJkB,KAAK,MAAM,MAC3B,SAAoC,KAAK,SAAS,QACnD,IAEmB;;AAYrB,MAAaA,4BAAiE,EAC7E,gBACA,OAAO,eACP,WACA,oBAAoB,EAAE,EACtB,uBAAuB,EAAE,EACzB,uBACK;CACL,MAAM,WAAW,6BAA6B,eAAe;CAC7D,MAAM,gBAAgB,sBAAsB,gBAAgB,EAC3D,kBAAkB,oBAAoB,MACtC,CAAC;CAEF,MAAM,EAAE,OAAO,qBAAqB,mBAAmB;EACtD,OAAO;EACP;EACA,iBAAiB;EACjB,YAAY,WAAW;EACvB,CAAC;CAGF,MAAM,+BAA+B,cAAc;AAClD,OAAK,IAAI,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK;GAC3C,MAAM,OAAO,MAAM;AACnB,OAAI,CAAC,KACJ;AAED,OAAI,KAAK,SAAS,iBAEjB;SADkB,KAAK,QAAQ,KAChB,cAAc,iBAC5B,QAAO;;;AAIV,SAAO;IACL,CAAC,OAAO,iBAAiB,CAAC;CAE7B,MAAM,qBAAqB,cAEzB,cACE,KAAK,UAAoC;AACzC,MAAI,MAAM,cAAc,OACvB,QAAO;GACN,IAAI,MAAM;GACV,MAAM;GACN;AAGF,MAAI,MAAM,cAAc,WACvB,QAAO;GACN,IAAI,MAAM;GACV,MAAM;GACN;AAGF,SAAO;GACN,CACD,QACC,gBACA,gBAAgB,KACjB,EACH,CAAC,cAAc,CACf;AAED,QACC,oBAACC;EACA,YAAY;EACZ,WAAW,GACV,2CACA,gFACA,iBACA,UACA;EACD,IAAG;EACH,OAAO;YAEP,qBAAC;GAA8B,WAAU;cACxC,oBAAC;IAAgB,SAAS;IAAO,MAAK;cACpC,MAAM,KAAK,MAAM,UAAU;AAC3B,SAAI,KAAK,SAAS,kBAAkB;MAEnC,MAAM,YAAY,iBAAiB,KAAK,KAAK;AAG7C,UAAI,CAAC,UACJ,QAAO;AAGR,aACC,oBAACC;OACmB;OACG;OACtB,WAAW,KAAK,KAAK;OACrB,OAAO;SACF,KAAK,KAAK,MAAM,kBAAkB,QACtC;;KAMJ,MAAM,YADqB,UAAU,gCAEd,KAAK,gBACxB,iBAAiB,KAAK,cAAc,GACpC,EAAE;KAGN,MAAM,WAAW,KAAK,QAAQ,IAAI,MAAM,SAAS;AAEjD,YACC,oBAAC;MACmB;MACG;MACJ;MAClB,OAAO,KAAK,SAAS,EAAE;MAEZ;QADN,SAEJ;MAEF;KACe,EAClB,oBAAC;IAAI,WAAU;cACb,mBAAmB,SAAS,IAC5B,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 {\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\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-auto scroll-smooth px-3 py-6\",\n\t\t\t\t\"scrollbar-thin scrollbar-thumb-co-background-300 scrollbar-track-transparent\",\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":"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"}