@better-zap/react 0.0.4 → 0.1.0

package/dist/index.cjs

@@ -28,6 +28,7 @@ let tailwind_merge = require("tailwind-merge");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _hugeicons_react = require("@hugeicons/react");
 let _hugeicons_core_free_icons = require("@hugeicons/core-free-icons");
+let _legendapp_list_react = require("@legendapp/list/react");
 let class_variance_authority = require("class-variance-authority");
 let better_zap = require("better-zap");
 //#region src/utils.ts
@@ -256,70 +257,80 @@ function MessageViewHeader({ conversation, onBack, onInfoClick, className }) {
 		})]
 	});
 }
-const SCROLL_TOP_THRESHOLD = 50;
+const MessageViewScrollContext = react.default.createContext(null);
 function MessageViewContent({ children, autoScroll = true, onScrollTop, className, ...props }) {
-	const scrollRef = (0, react.useRef)(null);
-	const prevScrollHeightRef = (0, react.useRef)(0);
-	(0, react.useEffect)(() => {
-		if (autoScroll && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-	}, [children, autoScroll]);
-	(0, react.useEffect)(() => {
-		const el = scrollRef.current;
-		if (!el) return;
-		const newScrollHeight = el.scrollHeight;
-		const prevScrollHeight = prevScrollHeightRef.current;
-		if (prevScrollHeight > 0 && newScrollHeight > prevScrollHeight) {
-			const addedHeight = newScrollHeight - prevScrollHeight;
-			if (el.scrollTop < SCROLL_TOP_THRESHOLD + addedHeight) el.scrollTop = addedHeight;
-		}
-		prevScrollHeightRef.current = newScrollHeight;
-	});
-	const handleScroll = (0, react.useCallback)(() => {
-		const el = scrollRef.current;
-		if (!el || !onScrollTop) return;
-		if (el.scrollTop <= SCROLL_TOP_THRESHOLD) onScrollTop();
-	}, [onScrollTop]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: scrollRef,
-		className: cn("flex flex-1 flex-col overflow-y-auto p-4 pb-0 chat-scrollbar", className),
-		onScroll: handleScroll,
-		...props,
-		children
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageViewScrollContext.Provider, {
+		value: {
+			autoScroll,
+			onScrollTop
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn("flex min-h-0 flex-1 flex-col p-4 pb-0", className),
+			...props,
+			children
+		})
 	});
 }
 function MessageList({ messages, renderMessageLabel, className }) {
-	const messageGroups = (0, react.useMemo)(() => {
-		const groups = [];
-		let currentGroup = null;
+	const scrollContext = (0, react.useContext)(MessageViewScrollContext);
+	const autoScroll = scrollContext?.autoScroll ?? true;
+	const onScrollTop = scrollContext?.onScrollTop;
+	const { items, stickyHeaderIndices } = (0, react.useMemo)(() => {
+		const itemsNew = [];
+		const stickyHeaderIndicesNew = [];
+		let currentDate = null;
 		messages.forEach((msg) => {
 			const displayDate = getDisplayDate(msg.sentAt);
-			if (!currentGroup || currentGroup.date !== displayDate) {
-				currentGroup = {
-					date: displayDate,
-					messages: []
-				};
-				groups.push(currentGroup);
+			if (currentDate !== displayDate) {
+				currentDate = displayDate;
+				stickyHeaderIndicesNew.push(itemsNew.length);
+				itemsNew.push({
+					type: "date",
+					id: `date:${displayDate}`,
+					date: displayDate
+				});
 			}
-			currentGroup.messages.push(msg);
+			itemsNew.push({
+				type: "message",
+				id: msg.id,
+				message: msg
+			});
 		});
-		return groups;
+		return {
+			items: itemsNew,
+			stickyHeaderIndices: stickyHeaderIndicesNew
+		};
 	}, [messages]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("flex flex-col pb-4", className),
-		children: messageGroups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex flex-col gap-1",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateDivider, { date: group.date }), group.messages.map((msg) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageBubble, {
-				content: msg.content || "",
-				sender: msg.direction === "incoming" ? "user" : "bot",
-				timestamp: new Date(msg.sentAt).toLocaleTimeString("pt-BR", {
-					hour: "2-digit",
-					minute: "2-digit"
-				}),
-				status: msg.status,
-				templateName: msg.templateName || void 0,
-				label: renderMessageLabel?.(msg)
-			}, msg.id))]
-		}, group.date))
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react.LegendList, {
+		alignItemsAtEnd: true,
+		className: cn("chat-scrollbar", className),
+		contentContainerStyle: { paddingBottom: 16 },
+		data: items,
+		estimatedItemSize: 72,
+		getItemType: (item) => item.type,
+		initialScrollAtEnd: autoScroll,
+		keyExtractor: (item) => item.id,
+		maintainScrollAtEnd: autoScroll,
+		maintainVisibleContentPosition: true,
+		onStartReached: onScrollTop ? () => onScrollTop() : void 0,
+		onStartReachedThreshold: .1,
+		recycleItems: true,
+		renderItem: ({ item }) => item.type === "date" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateDivider, { date: item.date }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageBubble, {
+			content: item.message.content || "",
+			sender: item.message.direction === "incoming" ? "user" : "bot",
+			timestamp: new Date(item.message.sentAt).toLocaleTimeString("pt-BR", {
+				hour: "2-digit",
+				minute: "2-digit"
+			}),
+			status: item.message.status,
+			templateName: item.message.templateName || void 0,
+			label: renderMessageLabel?.(item.message)
+		}),
+		stickyHeaderIndices,
+		style: {
+			height: "100%",
+			minHeight: 0
+		}
 	});
 }
 function DateDivider({ date }) {
@@ -446,7 +457,7 @@ function ConversationList({ conversations, isLoading, isError, selectedConversat
 				unreadCount: unreadConversationsCount
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex-1 overflow-y-auto overflow-x-hidden chat-scrollbar",
+				className: "min-h-0 flex-1",
 				children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex items-center justify-center h-full text-sm text-[#667781]",
 					children: "Carregando..."
@@ -462,11 +473,24 @@ function ConversationList({ conversations, isLoading, isError, selectedConversat
 						className: "text-sm",
 						children: "Nenhuma conversa encontrada"
 					})]
-				}) : filtered.map((conversation) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversationItem, {
-					conversation,
-					isSelected: selectedConversationId === conversation.id,
-					onClick: () => handleSelect(conversation.id)
-				}, conversation.id))
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react.LegendList, {
+					className: "chat-scrollbar",
+					data: filtered,
+					estimatedItemSize: 72,
+					extraData: selectedConversationId,
+					getFixedItemSize: () => 72,
+					keyExtractor: (conversation) => conversation.id,
+					recycleItems: true,
+					renderItem: ({ item: conversation }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversationItem, {
+						conversation,
+						isSelected: selectedConversationId === conversation.id,
+						onClick: () => handleSelect(conversation.id)
+					}),
+					style: {
+						height: "100%",
+						overflowX: "hidden"
+					}
+				})
 			})
 		]
 	});

package/dist/index.mjs

@@ -4,6 +4,7 @@ import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Add01Icon, ArrowLeft02Icon, Clock01Icon, InformationCircleIcon, Message01Icon, Mic01Icon, Search01Icon, Sent02Icon, SmileIcon, UserIcon } from "@hugeicons/core-free-icons";
+import { LegendList } from "@legendapp/list/react";
 import { cva } from "class-variance-authority";
 import { resolveConversationFreeformMessageWindow } from "better-zap";
 //#region src/utils.ts
@@ -232,70 +233,80 @@ function MessageViewHeader({ conversation, onBack, onInfoClick, className }) {
 		})]
 	});
 }
-const SCROLL_TOP_THRESHOLD = 50;
+const MessageViewScrollContext = React.createContext(null);
 function MessageViewContent({ children, autoScroll = true, onScrollTop, className, ...props }) {
-	const scrollRef = useRef(null);
-	const prevScrollHeightRef = useRef(0);
-	useEffect(() => {
-		if (autoScroll && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-	}, [children, autoScroll]);
-	useEffect(() => {
-		const el = scrollRef.current;
-		if (!el) return;
-		const newScrollHeight = el.scrollHeight;
-		const prevScrollHeight = prevScrollHeightRef.current;
-		if (prevScrollHeight > 0 && newScrollHeight > prevScrollHeight) {
-			const addedHeight = newScrollHeight - prevScrollHeight;
-			if (el.scrollTop < SCROLL_TOP_THRESHOLD + addedHeight) el.scrollTop = addedHeight;
-		}
-		prevScrollHeightRef.current = newScrollHeight;
-	});
-	const handleScroll = useCallback(() => {
-		const el = scrollRef.current;
-		if (!el || !onScrollTop) return;
-		if (el.scrollTop <= SCROLL_TOP_THRESHOLD) onScrollTop();
-	}, [onScrollTop]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: scrollRef,
-		className: cn("flex flex-1 flex-col overflow-y-auto p-4 pb-0 chat-scrollbar", className),
-		onScroll: handleScroll,
-		...props,
-		children
+	return /* @__PURE__ */ jsx(MessageViewScrollContext.Provider, {
+		value: {
+			autoScroll,
+			onScrollTop
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex min-h-0 flex-1 flex-col p-4 pb-0", className),
+			...props,
+			children
+		})
 	});
 }
 function MessageList({ messages, renderMessageLabel, className }) {
-	const messageGroups = useMemo(() => {
-		const groups = [];
-		let currentGroup = null;
+	const scrollContext = useContext(MessageViewScrollContext);
+	const autoScroll = scrollContext?.autoScroll ?? true;
+	const onScrollTop = scrollContext?.onScrollTop;
+	const { items, stickyHeaderIndices } = useMemo(() => {
+		const itemsNew = [];
+		const stickyHeaderIndicesNew = [];
+		let currentDate = null;
 		messages.forEach((msg) => {
 			const displayDate = getDisplayDate(msg.sentAt);
-			if (!currentGroup || currentGroup.date !== displayDate) {
-				currentGroup = {
-					date: displayDate,
-					messages: []
-				};
-				groups.push(currentGroup);
+			if (currentDate !== displayDate) {
+				currentDate = displayDate;
+				stickyHeaderIndicesNew.push(itemsNew.length);
+				itemsNew.push({
+					type: "date",
+					id: `date:${displayDate}`,
+					date: displayDate
+				});
 			}
-			currentGroup.messages.push(msg);
+			itemsNew.push({
+				type: "message",
+				id: msg.id,
+				message: msg
+			});
 		});
-		return groups;
+		return {
+			items: itemsNew,
+			stickyHeaderIndices: stickyHeaderIndicesNew
+		};
 	}, [messages]);
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-col pb-4", className),
-		children: messageGroups.map((group) => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-1",
-			children: [/* @__PURE__ */ jsx(DateDivider, { date: group.date }), group.messages.map((msg) => /* @__PURE__ */ jsx(MessageBubble, {
-				content: msg.content || "",
-				sender: msg.direction === "incoming" ? "user" : "bot",
-				timestamp: new Date(msg.sentAt).toLocaleTimeString("pt-BR", {
-					hour: "2-digit",
-					minute: "2-digit"
-				}),
-				status: msg.status,
-				templateName: msg.templateName || void 0,
-				label: renderMessageLabel?.(msg)
-			}, msg.id))]
-		}, group.date))
+	return /* @__PURE__ */ jsx(LegendList, {
+		alignItemsAtEnd: true,
+		className: cn("chat-scrollbar", className),
+		contentContainerStyle: { paddingBottom: 16 },
+		data: items,
+		estimatedItemSize: 72,
+		getItemType: (item) => item.type,
+		initialScrollAtEnd: autoScroll,
+		keyExtractor: (item) => item.id,
+		maintainScrollAtEnd: autoScroll,
+		maintainVisibleContentPosition: true,
+		onStartReached: onScrollTop ? () => onScrollTop() : void 0,
+		onStartReachedThreshold: .1,
+		recycleItems: true,
+		renderItem: ({ item }) => item.type === "date" ? /* @__PURE__ */ jsx(DateDivider, { date: item.date }) : /* @__PURE__ */ jsx(MessageBubble, {
+			content: item.message.content || "",
+			sender: item.message.direction === "incoming" ? "user" : "bot",
+			timestamp: new Date(item.message.sentAt).toLocaleTimeString("pt-BR", {
+				hour: "2-digit",
+				minute: "2-digit"
+			}),
+			status: item.message.status,
+			templateName: item.message.templateName || void 0,
+			label: renderMessageLabel?.(item.message)
+		}),
+		stickyHeaderIndices,
+		style: {
+			height: "100%",
+			minHeight: 0
+		}
 	});
 }
 function DateDivider({ date }) {
@@ -422,7 +433,7 @@ function ConversationList({ conversations, isLoading, isError, selectedConversat
 				unreadCount: unreadConversationsCount
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "flex-1 overflow-y-auto overflow-x-hidden chat-scrollbar",
+				className: "min-h-0 flex-1",
 				children: isLoading ? /* @__PURE__ */ jsx("div", {
 					className: "flex items-center justify-center h-full text-sm text-[#667781]",
 					children: "Carregando..."
@@ -438,11 +449,24 @@ function ConversationList({ conversations, isLoading, isError, selectedConversat
 						className: "text-sm",
 						children: "Nenhuma conversa encontrada"
 					})]
-				}) : filtered.map((conversation) => /* @__PURE__ */ jsx(ConversationItem, {
-					conversation,
-					isSelected: selectedConversationId === conversation.id,
-					onClick: () => handleSelect(conversation.id)
-				}, conversation.id))
+				}) : /* @__PURE__ */ jsx(LegendList, {
+					className: "chat-scrollbar",
+					data: filtered,
+					estimatedItemSize: 72,
+					extraData: selectedConversationId,
+					getFixedItemSize: () => 72,
+					keyExtractor: (conversation) => conversation.id,
+					recycleItems: true,
+					renderItem: ({ item: conversation }) => /* @__PURE__ */ jsx(ConversationItem, {
+						conversation,
+						isSelected: selectedConversationId === conversation.id,
+						onClick: () => handleSelect(conversation.id)
+					}),
+					style: {
+						height: "100%",
+						overflowX: "hidden"
+					}
+				})
 			})
 		]
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-zap/react",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "React components for Better Zap.",
   "license": "ISC",
   "type": "module",
@@ -33,10 +33,11 @@
   "dependencies": {
     "@hugeicons/core-free-icons": "^3.1.1",
     "@hugeicons/react": "^1.1.4",
+    "@legendapp/list": "^3.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.0.0",
-    "better-zap": "0.0.4"
+    "better-zap": "0.1.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",