@cossistant/react 0.0.1

package/primitives/timeline-item-group.d.ts

@@ -0,0 +1,166 @@
+import { TimelineItem } from "../timeline-item.js";
+import * as React$1 from "react";
+import { SenderType } from "@cossistant/types";
+
+//#region src/primitives/timeline-item-group.d.ts
+
+/**
+ * Shape returned to render-prop children describing the grouped timeline items state
+ * and viewer specific flags.
+ */
+type TimelineItemGroupRenderProps = {
+  senderType: SenderType;
+  senderId: string;
+  viewerType?: SenderType;
+  isSentByViewer: boolean;
+  isReceivedByViewer: boolean;
+  isVisitor: boolean;
+  isAI: boolean;
+  isTeamMember: boolean;
+  itemCount: number;
+  firstItemId: string | undefined;
+  lastItemId: string | undefined;
+  hasBeenSeenByViewer?: boolean;
+  seenByIds?: string[];
+};
+type TimelineItemGroupProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: TimelineItemGroupRenderProps) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  items: TimelineItem[];
+  viewerId?: string;
+  viewerType?: SenderType;
+  seenByIds?: string[];
+  lastReadItemIds?: Map<string, string>;
+};
+/**
+ * Groups sequential timeline items from the same sender and exposes render helpers
+ * that describe who sent the batch and whether the active viewer has seen it.
+ * Consumers can either render their own layout via a render prop or rely on
+ * slotted children. Typically used for MESSAGE-type items; EVENT items are usually rendered separately.
+ */
+declare const TimelineItemGroup: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: TimelineItemGroupRenderProps) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  items: TimelineItem[];
+  viewerId?: string;
+  viewerType?: SenderType;
+  seenByIds?: string[];
+  lastReadItemIds?: Map<string, string>;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type TimelineItemGroupAvatarProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+};
+/**
+ * Optional slot rendered next to a grouped batch to display an avatar, agent
+ * badge or any other sender metadata supplied by the consumer UI.
+ */
+declare const TimelineItemGroupAvatar: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type TimelineItemGroupHeaderProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: {
+    name?: string;
+    senderId?: string;
+    senderType?: SenderType;
+  }) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  name?: string;
+  senderId?: string;
+  senderType?: SenderType;
+};
+/**
+ * Decorative or semantic wrapper rendered above a timeline item batch. Useful for
+ * injecting agent names, timestamps or custom status labels tied to the sender
+ * metadata supplied by `TimelineItemGroup`.
+ */
+declare const TimelineItemGroupHeader: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: {
+    name?: string;
+    senderId?: string;
+    senderType?: SenderType;
+  }) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  name?: string;
+  senderId?: string;
+  senderType?: SenderType;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type TimelineItemGroupContentProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+};
+/**
+ * Container for the actual timeline items within a batch. Consumers can
+ * override the structure while inheriting layout props passed down from the
+ * parent group.
+ */
+declare const TimelineItemGroupContent: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type TimelineItemGroupSeenIndicatorProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: {
+    seenByIds: string[];
+    hasBeenSeen: boolean;
+  }) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  seenByIds?: string[];
+};
+/**
+ * Utility slot for showing who has viewed the most recent timeline item in the
+ * group. Works with simple text children or a render prop for advanced
+ * displays.
+ */
+declare const TimelineItemGroupSeenIndicator: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: {
+    seenByIds: string[];
+    hasBeenSeen: boolean;
+  }) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  seenByIds?: string[];
+} & React$1.RefAttributes<HTMLDivElement>>;
+type TimelineItemGroupReadIndicatorProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: {
+    readers: Array<{
+      userId: string;
+      isLastRead: boolean;
+    }>;
+    lastReaderIds: string[];
+  }) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  itemId: string;
+  lastReadItemIds?: Map<string, string>;
+};
+/**
+ * Renders read receipts for the tail timeline item in a group. It surfaces the list
+ * of readers and callers can decide whether to render avatars, tooltips or a
+ * basic label.
+ */
+declare const TimelineItemGroupReadIndicator: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: {
+    readers: Array<{
+      userId: string;
+      isLastRead: boolean;
+    }>;
+    lastReaderIds: string[];
+  }) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  itemId: string;
+  lastReadItemIds?: Map<string, string>;
+} & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupAvatarProps, TimelineItemGroupContent, TimelineItemGroupContentProps, TimelineItemGroupHeader, TimelineItemGroupHeaderProps, TimelineItemGroupProps, TimelineItemGroupReadIndicator, TimelineItemGroupReadIndicatorProps, TimelineItemGroupRenderProps, TimelineItemGroupSeenIndicator, TimelineItemGroupSeenIndicatorProps };
+//# sourceMappingURL=timeline-item-group.d.ts.map

package/primitives/timeline-item-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item-group.d.ts","names":[],"sources":["../../src/primitives/timeline-item-group.tsx"],"sourcesContent":[],"mappings":"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"}

package/primitives/timeline-item-group.js

@@ -0,0 +1,204 @@
+import { useRenderElement } from "../utils/use-render-element.js";
+import * as React$1 from "react";
+
+//#region src/primitives/timeline-item-group.tsx
+/**
+* Groups sequential timeline items from the same sender and exposes render helpers
+* that describe who sent the batch and whether the active viewer has seen it.
+* Consumers can either render their own layout via a render prop or rely on
+* slotted children. Typically used for MESSAGE-type items; EVENT items are usually rendered separately.
+*/
+const TimelineItemGroup = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, items = [], viewerId, seenByIds = [], lastReadItemIds,...restProps }, ref) => {
+		const { viewerType,...elementProps } = restProps;
+		const firstItem = items[0];
+		const lastItem = items[items.length - 1];
+		let senderId = "";
+		let senderType;
+		if (firstItem?.visitorId) {
+			senderId = firstItem.visitorId;
+			senderType = "visitor";
+		} else if (firstItem?.aiAgentId) {
+			senderId = firstItem.aiAgentId;
+			senderType = "ai";
+		} else if (firstItem?.userId) {
+			senderId = firstItem.userId;
+			senderType = "team_member";
+		} else {
+			senderId = firstItem?.id || "unknown";
+			senderType = "team_member";
+		}
+		const isSentByViewer = viewerId ? senderId === viewerId : viewerType ? senderType === viewerType : false;
+		const isReceivedByViewer = viewerId ? senderId !== viewerId : viewerType ? senderType !== viewerType : true;
+		const isVisitor = senderType === "visitor";
+		const isAI = senderType === "ai";
+		const isTeamMember = senderType === "team_member";
+		const hasBeenSeenByViewer = viewerId ? seenByIds.includes(viewerId) : void 0;
+		const renderProps = {
+			senderType,
+			senderId,
+			viewerType,
+			isSentByViewer,
+			isReceivedByViewer,
+			isVisitor,
+			isAI,
+			isTeamMember,
+			itemCount: items.length,
+			firstItemId: firstItem?.id,
+			lastItemId: lastItem?.id,
+			hasBeenSeenByViewer,
+			seenByIds
+		};
+		const content = typeof children === "function" ? children(renderProps) : children;
+		return useRenderElement("div", {
+			className,
+			asChild
+		}, {
+			ref,
+			state: renderProps,
+			props: {
+				role: "group",
+				"aria-label": `Timeline item group from ${senderType}`,
+				...elementProps,
+				children: content
+			}
+		});
+	});
+	Component.displayName = "TimelineItemGroup";
+	return Component;
+})();
+/**
+* Optional slot rendered next to a grouped batch to display an avatar, agent
+* badge or any other sender metadata supplied by the consumer UI.
+*/
+const TimelineItemGroupAvatar = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+		className,
+		asChild
+	}, {
+		ref,
+		props: {
+			...props,
+			children
+		}
+	}));
+	Component.displayName = "TimelineItemGroupAvatar";
+	return Component;
+})();
+/**
+* Decorative or semantic wrapper rendered above a timeline item batch. Useful for
+* injecting agent names, timestamps or custom status labels tied to the sender
+* metadata supplied by `TimelineItemGroup`.
+*/
+const TimelineItemGroupHeader = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, name, senderId, senderType,...props }, ref) => {
+		const content = typeof children === "function" ? children({
+			name,
+			senderId,
+			senderType
+		}) : children;
+		return useRenderElement("div", {
+			className,
+			asChild
+		}, {
+			ref,
+			props: {
+				...props,
+				children: content
+			}
+		});
+	});
+	Component.displayName = "TimelineItemGroupHeader";
+	return Component;
+})();
+/**
+* Container for the actual timeline items within a batch. Consumers can
+* override the structure while inheriting layout props passed down from the
+* parent group.
+*/
+const TimelineItemGroupContent = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+		className,
+		asChild
+	}, {
+		ref,
+		props: {
+			...props,
+			children
+		}
+	}));
+	Component.displayName = "TimelineItemGroupContent";
+	return Component;
+})();
+/**
+* Utility slot for showing who has viewed the most recent timeline item in the
+* group. Works with simple text children or a render prop for advanced
+* displays.
+*/
+const TimelineItemGroupSeenIndicator = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, seenByIds = [],...props }, ref) => {
+		const hasBeenSeen = seenByIds.length > 0;
+		const content = typeof children === "function" ? children({
+			seenByIds,
+			hasBeenSeen
+		}) : children;
+		return useRenderElement("div", {
+			className,
+			asChild
+		}, {
+			ref,
+			props: {
+				...props,
+				children: content
+			}
+		});
+	});
+	Component.displayName = "TimelineItemGroupSeenIndicator";
+	return Component;
+})();
+/**
+* Renders read receipts for the tail timeline item in a group. It surfaces the list
+* of readers and callers can decide whether to render avatars, tooltips or a
+* basic label.
+*/
+const TimelineItemGroupReadIndicator = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, itemId, lastReadItemIds,...props }, ref) => {
+		const { lastReaderIds, readers } = React$1.useMemo(() => {
+			const _lastReaderIds = [];
+			const _readers = [];
+			if (lastReadItemIds) lastReadItemIds.forEach((lastItemId, userId) => {
+				if (lastItemId === itemId) {
+					_lastReaderIds.push(userId);
+					_readers.push({
+						userId,
+						isLastRead: true
+					});
+				}
+			});
+			return {
+				lastReaderIds: _lastReaderIds,
+				readers: _readers
+			};
+		}, [itemId, lastReadItemIds]);
+		const content = typeof children === "function" ? children({
+			readers,
+			lastReaderIds
+		}) : children;
+		return useRenderElement("div", {
+			className,
+			asChild
+		}, {
+			ref,
+			props: {
+				...props,
+				children: content
+			}
+		});
+	});
+	Component.displayName = "TimelineItemGroupReadIndicator";
+	return Component;
+})();
+
+//#endregion
+export { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator };
+//# sourceMappingURL=timeline-item-group.js.map

package/primitives/timeline-item-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item-group.js","names":["React","senderType: SenderType","renderProps: TimelineItemGroupRenderProps","_lastReaderIds: string[]","_readers: Array<{ userId: string; isLastRead: boolean }>"],"sources":["../../src/primitives/timeline-item-group.tsx"],"sourcesContent":["import type { SenderType } from \"@cossistant/types\";\nimport type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Shape returned to render-prop children describing the grouped timeline items state\n * and viewer specific flags.\n */\nexport type TimelineItemGroupRenderProps = {\n\t// Sender information\n\tsenderType: SenderType;\n\tsenderId: string;\n\tviewerType?: SenderType;\n\n\t// POV flags - who is viewing\n\tisSentByViewer: boolean; // True if the current viewer sent these items\n\tisReceivedByViewer: boolean; // True if the current viewer received these items\n\n\t// Sender type flags for convenience\n\tisVisitor: boolean;\n\tisAI: boolean;\n\tisTeamMember: boolean;\n\n\t// Item info\n\titemCount: number;\n\tfirstItemId: string | undefined;\n\tlastItemId: string | undefined;\n\n\t// Seen status\n\thasBeenSeenByViewer?: boolean;\n\tseenByIds?: string[]; // IDs of users who have seen the last item in group\n};\n\nexport type TimelineItemGroupProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: TimelineItemGroupRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems: TimelineItemType[];\n\n\t// POV context - who is viewing these timeline items\n\tviewerId?: string; // ID of the current viewer\n\tviewerType?: SenderType; // Type of the current viewer\n\n\t// Seen data\n\tseenByIds?: string[]; // IDs of users who have seen these timeline items\n\tlastReadItemIds?: Map<string, string>; // Map of userId -> lastItemId they read\n};\n\n/**\n * Groups sequential timeline items from the same sender and exposes render helpers\n * that describe who sent the batch and whether the active viewer has seen it.\n * Consumers can either render their own layout via a render prop or rely on\n * slotted children. Typically used for MESSAGE-type items; EVENT items are usually rendered separately.\n */\nexport const TimelineItemGroup = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemGroupProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tviewerId,\n\t\t\t\tseenByIds = [],\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...restProps\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { viewerType, ...elementProps } = restProps;\n\n\t\t\t// Determine sender type from first timeline item in group\n\t\t\tconst firstItem = items[0];\n\t\t\t// biome-ignore lint/style/useAtIndex: ok\n\t\t\tconst lastItem = items[items.length - 1];\n\n\t\t\t// Determine sender info\n\t\t\tlet senderId = \"\";\n\t\t\tlet senderType: SenderType;\n\n\t\t\tif (firstItem?.visitorId) {\n\t\t\t\tsenderId = firstItem.visitorId;\n\t\t\t\tsenderType = \"visitor\" as SenderType;\n\t\t\t} else if (firstItem?.aiAgentId) {\n\t\t\t\tsenderId = firstItem.aiAgentId;\n\t\t\t\tsenderType = \"ai\" as SenderType;\n\t\t\t} else if (firstItem?.userId) {\n\t\t\t\tsenderId = firstItem.userId;\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t} else {\n\t\t\t\t// Fallback\n\t\t\t\tsenderId = firstItem?.id || \"unknown\";\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t}\n\n\t\t\t// Determine POV\n\t\t\tconst isSentByViewer = viewerId\n\t\t\t\t? senderId === viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType === viewerType\n\t\t\t\t\t: false;\n\t\t\tconst isReceivedByViewer = viewerId\n\t\t\t\t? senderId !== viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType !== viewerType\n\t\t\t\t\t: true;\n\n\t\t\t// Convenience flags\n\t\t\tconst isVisitor = senderType === \"visitor\";\n\t\t\tconst isAI = senderType === \"ai\";\n\t\t\tconst isTeamMember = senderType === \"team_member\";\n\n\t\t\t// Check if viewer has seen these timeline items\n\t\t\tconst hasBeenSeenByViewer = viewerId\n\t\t\t\t? seenByIds.includes(viewerId)\n\t\t\t\t: undefined;\n\n\t\t\tconst renderProps: TimelineItemGroupRenderProps = {\n\t\t\t\tsenderType,\n\t\t\t\tsenderId,\n\t\t\t\tviewerType,\n\t\t\t\tisSentByViewer,\n\t\t\t\tisReceivedByViewer,\n\t\t\t\tisVisitor,\n\t\t\t\tisAI,\n\t\t\t\tisTeamMember,\n\t\t\t\titemCount: items.length,\n\t\t\t\tfirstItemId: firstItem?.id,\n\t\t\t\tlastItemId: lastItem?.id,\n\t\t\t\thasBeenSeenByViewer,\n\t\t\t\tseenByIds,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"group\",\n\t\t\t\t\t\t\"aria-label\": `Timeline item group from ${senderType}`,\n\t\t\t\t\t\t...elementProps,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroup\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupAvatarProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Optional slot rendered next to a grouped batch to display an avatar, agent\n * badge or any other sender metadata supplied by the consumer UI.\n */\nexport const TimelineItemGroupAvatar = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupAvatarProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupAvatar\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupHeaderProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tname?: string;\n\t\t\t\tsenderId?: string;\n\t\t\t\tsenderType?: SenderType;\n\t\t  }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tname?: string;\n\tsenderId?: string;\n\tsenderType?: SenderType;\n};\n\n/**\n * Decorative or semantic wrapper rendered above a timeline item batch. Useful for\n * injecting agent names, timestamps or custom status labels tied to the sender\n * metadata supplied by `TimelineItemGroup`.\n */\nexport const TimelineItemGroupHeader = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupHeaderProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tname,\n\t\t\t\tsenderId,\n\t\t\t\tsenderType,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ name, senderId, senderType })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupHeader\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupContentProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Container for the actual timeline items within a batch. Consumers can\n * override the structure while inheriting layout props passed down from the\n * parent group.\n */\nexport const TimelineItemGroupContent = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupContentProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupContent\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupSeenIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tseenByIds: string[];\n\t\t\t\thasBeenSeen: boolean;\n\t\t  }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tseenByIds?: string[];\n};\n\n/**\n * Utility slot for showing who has viewed the most recent timeline item in the\n * group. Works with simple text children or a render prop for advanced\n * displays.\n */\nexport const TimelineItemGroupSeenIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupSeenIndicatorProps\n\t>(\n\t\t(\n\t\t\t{ children, className, asChild = false, seenByIds = [], ...props },\n\t\t\tref\n\t\t) => {\n\t\t\tconst hasBeenSeen = seenByIds.length > 0;\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ seenByIds, hasBeenSeen })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupSeenIndicator\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupReadIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\treaders: Array<{ userId: string; isLastRead: boolean }>;\n\t\t\t\tlastReaderIds: string[];\n\t\t  }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titemId: string;\n\tlastReadItemIds?: Map<string, string>;\n};\n\n/**\n * Renders read receipts for the tail timeline item in a group. It surfaces the list\n * of readers and callers can decide whether to render avatars, tooltips or a\n * basic label.\n */\nexport const TimelineItemGroupReadIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupReadIndicatorProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titemId,\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\t// Find all users who stopped reading at this timeline item\n\t\t\tconst { lastReaderIds, readers } = React.useMemo(() => {\n\t\t\t\tconst _lastReaderIds: string[] = [];\n\t\t\t\tconst _readers: Array<{ userId: string; isLastRead: boolean }> = [];\n\n\t\t\t\tif (lastReadItemIds) {\n\t\t\t\t\tlastReadItemIds.forEach((lastItemId, userId) => {\n\t\t\t\t\t\tif (lastItemId === itemId) {\n\t\t\t\t\t\t\t_lastReaderIds.push(userId);\n\t\t\t\t\t\t\t_readers.push({ userId, isLastRead: true });\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn { lastReaderIds: _lastReaderIds, readers: _readers };\n\t\t\t}, [itemId, lastReadItemIds]);\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ readers, lastReaderIds })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupReadIndicator\";\n\treturn Component;\n})();\n"],"mappings":"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"}

package/primitives/timeline-item.d.ts

@@ -0,0 +1,75 @@
+import { TimelineItem as TimelineItem$1 } from "../timeline-item.js";
+import * as React$1 from "react";
+
+//#region src/primitives/timeline-item.d.ts
+
+/**
+ * Metadata describing the origin of a timeline item and pre-parsed content that can
+ * be consumed by render-prop children.
+ */
+type TimelineItemRenderProps = {
+  isVisitor: boolean;
+  isAI: boolean;
+  isHuman: boolean;
+  timestamp: Date;
+  text: string | null;
+  senderType: "visitor" | "ai" | "human";
+  itemType: "message" | "event";
+};
+type TimelineItemProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: TimelineItemRenderProps) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  item: TimelineItem$1;
+};
+/**
+ * Generic timeline item wrapper that adds accessibility attributes and resolves the
+ * sender type into convenient render props for custom layouts. Works with
+ * both MESSAGE and EVENT timeline item types.
+ */
+declare const TimelineItem: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: TimelineItemRenderProps) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  item: TimelineItem$1;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type TimelineItemContentProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((content: string) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  text?: string | null;
+  renderMarkdown?: boolean;
+};
+/**
+ * Renders the content of a timeline item, optionally piping Markdown content through a
+ * memoised renderer or handing the raw text to a render prop for custom
+ * formatting.
+ */
+declare const TimelineItemContent: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((content: string) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  text?: string | null;
+  renderMarkdown?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type TimelineItemTimestampProps = Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> & {
+  children?: React$1.ReactNode | ((timestamp: Date) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  timestamp: Date;
+  format?: (date: Date) => string;
+};
+/**
+ * Timestamp helper that renders a formatted date or allows callers to supply a
+ * render prop for custom time displays while preserving semantic markup.
+ */
+declare const TimelineItemTimestamp: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLSpanElement>, "children"> & {
+  children?: React$1.ReactNode | ((timestamp: Date) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  timestamp: Date;
+  format?: (date: Date) => string;
+} & React$1.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { TimelineItem, TimelineItemContent, TimelineItemContentProps, TimelineItemProps, TimelineItemRenderProps, TimelineItemTimestamp, TimelineItemTimestampProps };
+//# sourceMappingURL=timeline-item.d.ts.map

package/primitives/timeline-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.d.ts","names":[],"sources":["../../src/primitives/timeline-item.tsx"],"sourcesContent":[],"mappings":";;;;;;;AASA;AAUA;AAA6B,KAVjB,uBAAA,GAUiB;WACP,EAAA,OAAA;MAArB,EAAA,OAAM;SADyB,EAAA,OAAA;WAK5B,EAXQ,IAWF;MACG,EAAA,MAAA,GAAA,IAAA;YAA4B,EAAM,SAAA,GAAA,IAAA,GAAA,OAAA;UAGxC,EAAA,SAAA,GAAA,OAAA;CAAgB;AAQV,KAjBD,iBAAA,GAAoB,IAuE5B,CAtEH,OAAA,CAAM,cAsEH,CAtEkB,cAsElB,CAAA,EAAA,UAAA,CAAA,GAAA;EAAA,QAAA,CAAA,EAlEA,OAAA,CAAM,SAkEN,GAAA,CAAA,CAAA,KAAA,EAjES,uBAiET,EAAA,GAjEqC,OAAA,CAAM,SAiE3C,CAAA;SAtDqB,CAAA,EAAA,OAAA;WAAA,CAAA,EAAA,MAAA;MAAA,EARlB,cAQkB;;;;;;;AAAA,cAAZ,YAAY,EAAA,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,OAAA,CAAA,cAAA,CAAA,cAAA,CAAA,EAAA,UAAA,CAAA,GAAA;EAAA,QAAA,CAAA,EAZrB,OAAA,CAAM,SAYe,GAAA,CAAA,CAAA,KAAA,EAXZ,uBAWY,EAAA,GAXgB,OAAA,CAAM,SAWtB,CAAA;EAkHb,OAAA,CAAA,EAAA,OAAA;EAAwB,SAAA,CAAA,EAAA,MAAA;MACd,EA3Hf,cA2He;yBAAf,eAAA,CAAA,CAAA;AADgC,KAA3B,wBAAA,GAA2B,IAAA,CACtC,OAAA,CAAM,cADgC,CACjB,cADiB,CAAA,EAAA,UAAA,CAAA,GAAA;UAI3B,CAAA,EAAA,OAAA,CAAM,SAAA,GAAA,CAAA,CAAA,OAAA,EAAA,MAAA,EAAA,GAAkC,OAAA,CAAM,SAAxC,CAAA;SAAkC,CAAA,EAAA,OAAM;EAAS,SAAA,CAAA,EAAA,MAAA;EAYtD,IAAA,CAAA,EAAA,MAAA,GAAA,IAAA;EAiDT,cAAA,CAAA,EAAA,OAAA;;;;;;;cAjDS,qBAAmB,OAAA,CAAA,0BAAA,KAAA,OAAA,CAAA,eAAA;UAAA,CAAA,EAZpB,OAAA,CAAM,SAYc,GAAA,CAAA,CAAA,OAAA,EAAA,MAAA,EAAA,GAZoB,OAAA,CAAM,SAY1B,CAAA;EAAA,OAAA,CAAA,EAAA,OAAA;EAmDpB,SAAA,CAAA,EAAA,MAAA;EAA0B,IAAA,CAAA,EAAA,MAAA,GAAA,IAAA;gBAChB,CAAA,EAAA,OAAA;yBAAf,eAAA,CAAA,CAAA;AADkC,KAA7B,0BAAA,GAA6B,IAAA,CACxC,OAAA,CAAM,cADkC,CACnB,eADmB,CAAA,EAAA,UAAA,CAAA,GAAA;UAI7B,CAAA,EAAA,OAAA,CAAM,SAAA,GAAA,CAAA,CAAA,SAAA,EAAyB,IAAzB,EAAA,GAAkC,OAAA,CAAM,SAAxC,CAAA;SAAyB,CAAA,EAAA,OAAA;WAAS,CAAA,EAAM,MAAA;WAG9C,EAAA,IAAA;QACK,CAAA,EAAA,CAAA,IAAA,EAAA,IAAA,EAAA,GAAA,MAAA;CAAI;AAOrB;;;;AAAkC,cAArB,qBAAqB,EAAA,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,OAAA,CAAA,cAAA,CAAA,eAAA,CAAA,EAAA,UAAA,CAAA,GAAA;UAXtB,CAAA,EAAA,OAAA,CAAM,SAAA,GAAA,CAAA,CAAA,SAAA,EAAyB,IAAzB,EAAA,GAAkC,OAAA,CAAM,SAAxC,CAAA;SAAyB,CAAA,EAAA,OAAA;WAAS,CAAA,EAAM,MAAA;WAG9C,EAAA,IAAA;QACK,CAAA,EAAA,CAAA,IAAA,EAAA,IAAA,EAAA,GAAA,MAAA"}

package/primitives/timeline-item.js

@@ -0,0 +1,145 @@
+import { useRenderElement } from "../utils/use-render-element.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+
+//#region src/primitives/timeline-item.tsx
+/**
+* Generic timeline item wrapper that adds accessibility attributes and resolves the
+* sender type into convenient render props for custom layouts. Works with
+* both MESSAGE and EVENT timeline item types.
+*/
+const TimelineItem = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, item,...props }, ref) => {
+		const isVisitor = item.visitorId !== null;
+		const isAI = item.aiAgentId !== null;
+		const isHuman = item.userId !== null && !isVisitor;
+		const senderType = isVisitor ? "visitor" : isAI ? "ai" : "human";
+		const renderProps = {
+			isVisitor,
+			isAI,
+			isHuman,
+			timestamp: new Date(item.createdAt),
+			text: item.text,
+			senderType,
+			itemType: item.type
+		};
+		const content = typeof children === "function" ? children(renderProps) : children;
+		const itemTypeLabel = item.type === "event" ? "Event" : isVisitor ? "visitor" : isAI ? "AI assistant" : "human agent";
+		return useRenderElement("div", {
+			className,
+			asChild
+		}, {
+			ref,
+			state: renderProps,
+			props: {
+				role: "article",
+				"aria-label": `${item.type === "message" ? "Message" : "Event"} from ${itemTypeLabel}`,
+				...props,
+				children: content
+			}
+		});
+	});
+	Component.displayName = "TimelineItem";
+	return Component;
+})();
+const MemoizedMarkdownBlock = React$1.memo(({ content }) => {
+	return /* @__PURE__ */ jsx(ReactMarkdown, {
+		components: {
+			p: ({ children }) => /* @__PURE__ */ jsx("span", {
+				className: "inline",
+				children
+			}),
+			br: () => /* @__PURE__ */ jsx("br", {}),
+			code: ({ children,...props }) => {
+				return !("className" in props && typeof props.className === "string" && props.className.includes("language-")) ? /* @__PURE__ */ jsx("code", {
+					className: "rounded bg-co-background-300 px-1 py-0.5 text-xs",
+					children
+				}) : /* @__PURE__ */ jsx("pre", {
+					className: "overflow-x-auto rounded bg-co-background-300 p-2",
+					children: /* @__PURE__ */ jsx("code", {
+						className: "text-xs",
+						children
+					})
+				});
+			},
+			strong: ({ children }) => /* @__PURE__ */ jsx("strong", {
+				className: "font-semibold",
+				children
+			}),
+			a: ({ href, children }) => /* @__PURE__ */ jsx("a", {
+				className: "underline hover:opacity-80",
+				href,
+				rel: "noopener noreferrer",
+				target: "_blank",
+				children
+			})
+		},
+		children: content
+	});
+}, (prevProps, nextProps) => {
+	if (prevProps.content !== nextProps.content) return false;
+	return true;
+});
+MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
+/**
+* Renders the content of a timeline item, optionally piping Markdown content through a
+* memoised renderer or handing the raw text to a render prop for custom
+* formatting.
+*/
+const TimelineItemContent = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, text = "", renderMarkdown = true,...props }, ref) => {
+		const content = React$1.useMemo(() => {
+			const textContent = text ?? "";
+			if (typeof children === "function") return children(textContent);
+			if (children) return children;
+			if (renderMarkdown && textContent) return /* @__PURE__ */ jsx(MemoizedMarkdownBlock, { content: textContent });
+			return textContent;
+		}, [
+			children,
+			text,
+			renderMarkdown
+		]);
+		return useRenderElement("div", {
+			className,
+			asChild
+		}, {
+			ref,
+			props: {
+				...props,
+				children: content,
+				style: { ...props.style }
+			}
+		});
+	});
+	Component.displayName = "TimelineItemContent";
+	return Component;
+})();
+/**
+* Timestamp helper that renders a formatted date or allows callers to supply a
+* render prop for custom time displays while preserving semantic markup.
+*/
+const TimelineItemTimestamp = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, timestamp, format = (date) => date.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit"
+	}),...props }, ref) => {
+		const content = typeof children === "function" ? children(timestamp) : children || format(timestamp);
+		return useRenderElement("span", {
+			className,
+			asChild
+		}, {
+			ref,
+			props: {
+				...props,
+				children: content
+			}
+		});
+	});
+	Component.displayName = "TimelineItemTimestamp";
+	return Component;
+})();
+
+//#endregion
+export { TimelineItem, TimelineItemContent, TimelineItemTimestamp };
+//# sourceMappingURL=timeline-item.js.map

package/primitives/timeline-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.js","names":["React","renderProps: TimelineItemRenderProps"],"sources":["../../src/primitives/timeline-item.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Metadata describing the origin of a timeline item and pre-parsed content that can\n * be consumed by render-prop children.\n */\nexport type TimelineItemRenderProps = {\n\tisVisitor: boolean;\n\tisAI: boolean;\n\tisHuman: boolean;\n\ttimestamp: Date;\n\ttext: string | null;\n\tsenderType: \"visitor\" | \"ai\" | \"human\";\n\titemType: \"message\" | \"event\";\n};\n\nexport type TimelineItemProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: TimelineItemRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titem: TimelineItemType;\n};\n\n/**\n * Generic timeline item wrapper that adds accessibility attributes and resolves the\n * sender type into convenient render props for custom layouts. Works with\n * both MESSAGE and EVENT timeline item types.\n */\nexport const TimelineItem = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemProps>(\n\t\t({ children, className, asChild = false, item, ...props }, ref) => {\n\t\t\t// Determine sender type from timeline item properties\n\t\t\tconst isVisitor = item.visitorId !== null;\n\t\t\tconst isAI = item.aiAgentId !== null;\n\t\t\tconst isHuman = item.userId !== null && !isVisitor;\n\n\t\t\tconst senderType = isVisitor ? \"visitor\" : isAI ? \"ai\" : \"human\";\n\n\t\t\tconst renderProps: TimelineItemRenderProps = {\n\t\t\t\tisVisitor,\n\t\t\t\tisAI,\n\t\t\t\tisHuman,\n\t\t\t\ttimestamp: new Date(item.createdAt),\n\t\t\t\ttext: item.text,\n\t\t\t\tsenderType,\n\t\t\t\titemType: item.type,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\tconst itemTypeLabel =\n\t\t\t\titem.type === \"event\"\n\t\t\t\t\t? \"Event\"\n\t\t\t\t\t: isVisitor\n\t\t\t\t\t\t? \"visitor\"\n\t\t\t\t\t\t: isAI\n\t\t\t\t\t\t\t? \"AI assistant\"\n\t\t\t\t\t\t\t: \"human agent\";\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"article\",\n\t\t\t\t\t\t\"aria-label\": `${item.type === \"message\" ? \"Message\" : \"Event\"} from ${itemTypeLabel}`,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItem\";\n\treturn Component;\n})();\n\nconst MemoizedMarkdownBlock = React.memo(\n\t({ content }: { content: string }) => {\n\t\treturn (\n\t\t\t<ReactMarkdown\n\t\t\t\tcomponents={{\n\t\t\t\t\t// Customize paragraph rendering to prevent excessive spacing\n\t\t\t\t\tp: ({ children }) => <span className=\"inline\">{children}</span>,\n\t\t\t\t\t// Ensure proper line break handling\n\t\t\t\t\tbr: () => <br />,\n\t\t\t\t\t// Handle code blocks properly\n\t\t\t\t\tcode: ({ children, ...props }) => {\n\t\t\t\t\t\t// Check if it's inline code by looking at the parent element\n\t\t\t\t\t\tconst isInline = !(\n\t\t\t\t\t\t\t\"className\" in props &&\n\t\t\t\t\t\t\ttypeof props.className === \"string\" &&\n\t\t\t\t\t\t\tprops.className.includes(\"language-\")\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn isInline ? (\n\t\t\t\t\t\t\t<code className=\"rounded bg-co-background-300 px-1 py-0.5 text-xs\">\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</code>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<pre className=\"overflow-x-auto rounded bg-co-background-300 p-2\">\n\t\t\t\t\t\t\t\t<code className=\"text-xs\">{children}</code>\n\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t\t// Handle strong/bold text\n\t\t\t\t\tstrong: ({ children }) => (\n\t\t\t\t\t\t<strong className=\"font-semibold\">{children}</strong>\n\t\t\t\t\t),\n\t\t\t\t\t// Handle links\n\t\t\t\t\ta: ({ href, children }) => (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"underline hover:opacity-80\"\n\t\t\t\t\t\t\thref={href}\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{content}\n\t\t\t</ReactMarkdown>\n\t\t);\n\t},\n\t(prevProps, nextProps) => {\n\t\tif (prevProps.content !== nextProps.content) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t}\n);\n\nMemoizedMarkdownBlock.displayName = \"MemoizedMarkdownBlock\";\n\nexport type TimelineItemContentProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode | ((content: string) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\ttext?: string | null;\n\trenderMarkdown?: boolean;\n};\n\n/**\n * Renders the content of a timeline item, optionally piping Markdown content through a\n * memoised renderer or handing the raw text to a render prop for custom\n * formatting.\n */\nexport const TimelineItemContent = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemContentProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\ttext = \"\",\n\t\t\t\trenderMarkdown = true,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content = React.useMemo(() => {\n\t\t\t\tconst textContent = text ?? \"\";\n\t\t\t\tif (typeof children === \"function\") {\n\t\t\t\t\treturn children(textContent);\n\t\t\t\t}\n\t\t\t\tif (children) {\n\t\t\t\t\treturn children;\n\t\t\t\t}\n\t\t\t\tif (renderMarkdown && textContent) {\n\t\t\t\t\treturn <MemoizedMarkdownBlock content={textContent} />;\n\t\t\t\t}\n\t\t\t\treturn textContent;\n\t\t\t}, [children, text, renderMarkdown]);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t...props.style,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemContent\";\n\treturn Component;\n})();\n\nexport type TimelineItemTimestampProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode | ((timestamp: Date) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\ttimestamp: Date;\n\tformat?: (date: Date) => string;\n};\n\n/**\n * Timestamp helper that renders a formatted date or allows callers to supply a\n * render prop for custom time displays while preserving semantic markup.\n */\nexport const TimelineItemTimestamp = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLSpanElement,\n\t\tTimelineItemTimestampProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\ttimestamp,\n\t\t\t\tformat = (date) =>\n\t\t\t\t\tdate.toLocaleTimeString([], {\n\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t}),\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children(timestamp)\n\t\t\t\t\t: children || format(timestamp);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemTimestamp\";\n\treturn Component;\n})();\n"],"mappings":"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"}