@better-zap/react 0.0.3 → 0.1.0

package/dist/index.cjs

@@ -28,14 +28,30 @@ 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/react/utils.ts
+//#region src/utils.ts
 function cn(...inputs) {
 	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
 }
+function getDisplayDate(dateStr) {
+	const dateObj = new Date(dateStr);
+	const now = /* @__PURE__ */ new Date();
+	const isToday = dateObj.toDateString() === now.toDateString();
+	const yesterday = new Date(now);
+	yesterday.setDate(yesterday.getDate() - 1);
+	const isYesterday = dateObj.toDateString() === yesterday.toDateString();
+	if (isToday) return "HOJE";
+	else if (isYesterday) return "ONTEM";
+	else return dateObj.toLocaleDateString("pt-BR", {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	});
+}
 //#endregion
-//#region src/react/whatsapp-dashboard.tsx
+//#region src/whatsapp-dashboard.tsx
 const MOBILE_BREAKPOINT = 1024;
 function useIsMobile() {
 	const [isMobile, setIsMobile] = (0, react.useState)(false);
@@ -76,7 +92,7 @@ function WhatsappDashboard({ children, className, defaultMobileView = "list", ..
 	});
 }
 //#endregion
-//#region src/react/message-bubble.tsx
+//#region src/message-bubble.tsx
 const bubbleVariants = (0, class_variance_authority.cva)("relative shadow-[0_1px_0.5px_rgba(11,20,26,0.13)] rounded-lg px-3 py-2 max-w-[65%]", { variants: { variant: {
 	outgoing: "bg-green-100 text-green-900 rounded-tr-none",
 	incoming: "bg-gray-100 text-gray-900 rounded-tl-none",
@@ -174,24 +190,7 @@ function FormattedMessage({ text }) {
 	}) });
 }
 //#endregion
-//#region src/date.ts
-function getDisplayDate(dateStr) {
-	const dateObj = new Date(dateStr);
-	const now = /* @__PURE__ */ new Date();
-	const isToday = dateObj.toDateString() === now.toDateString();
-	const yesterday = new Date(now);
-	yesterday.setDate(yesterday.getDate() - 1);
-	const isYesterday = dateObj.toDateString() === yesterday.toDateString();
-	if (isToday) return "HOJE";
-	else if (isYesterday) return "ONTEM";
-	else return dateObj.toLocaleDateString("pt-BR", {
-		day: "2-digit",
-		month: "2-digit",
-		year: "numeric"
-	});
-}
-//#endregion
-//#region src/react/message-view.tsx
+//#region src/message-view.tsx
 function MessageView({ children, className, ...props }) {
 	const { isMobile, mobileView } = useWhatsappDashboard();
 	const hasContent = react.default.Children.count(children) > 0;
@@ -258,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 }) {
@@ -368,7 +377,7 @@ function MessageViewEmpty({ className, ...props }) {
 	});
 }
 //#endregion
-//#region src/react/conversation-search.tsx
+//#region src/conversation-search.tsx
 function ConversationSearch({ value, onChange, className }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: cn("border-b border-[#e9edef] shrink-0 p-2", className),
@@ -389,11 +398,46 @@ function ConversationSearch({ value, onChange, className }) {
 	});
 }
 //#endregion
-//#region src/react/conversation-list.tsx
+//#region src/conversation-filter-chips.tsx
+const chips = [{
+	label: "Tudo",
+	value: "all"
+}, {
+	label: "Não lidas",
+	value: "unread"
+}];
+function ConversationFilterChips({ value, onValueChange, unreadCount = 0, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("flex items-center gap-2 px-3 py-3", className),
+		children: chips.map((chip) => {
+			const isActive = chip.value === value;
+			const showCount = chip.value === "unread" && unreadCount > 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				onClick: () => onValueChange(chip.value),
+				"aria-pressed": isActive,
+				className: cn("inline-flex h-8 items-center rounded-full border px-4 text-[15px] font-medium transition-colors", isActive ? "border-[#b8e6c1] bg-[#e7fce3] text-[#017561]" : "border-[#d1d7db] bg-white text-[#54656f] hover:bg-[#f5f6f6]"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: chip.label }), showCount ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "ml-1",
+					children: unreadCount
+				}) : null]
+			}, chip.value);
+		})
+	});
+}
+//#endregion
+//#region src/conversation-list.tsx
 function ConversationList({ conversations, isLoading, isError, selectedConversationId, onSelect, className }) {
 	const { isMobile, mobileView, setMobileView } = useWhatsappDashboard();
 	const [search, setSearch] = (0, react.useState)("");
-	const filtered = conversations.filter((c) => c.phone.includes(search) || c.contactName?.toLowerCase().includes(search.toLowerCase()));
+	const [filter, setFilter] = (0, react.useState)("all");
+	const normalizedSearch = search.trim().toLowerCase();
+	const unreadConversationsCount = conversations.filter((c) => c.unreadCount > 0).length;
+	const filtered = conversations.filter((conversation) => {
+		const matchesSearch = normalizedSearch.length === 0 || conversation.phone.toLowerCase().includes(normalizedSearch) || conversation.contactName?.toLowerCase().includes(normalizedSearch);
+		const matchesFilter = filter === "all" || conversation.unreadCount > 0;
+		return matchesSearch && matchesFilter;
+	});
 	const handleSelect = (id) => {
 		onSelect(id);
 		setMobileView("chat");
@@ -402,32 +446,53 @@ function ConversationList({ conversations, isLoading, isError, selectedConversat
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("flex flex-col h-full bg-white border-r border-[#e9edef]", isMobile ? "w-full" : "min-w-[320px] max-w-105", className),
 		style: isVisible ? void 0 : { display: "none" },
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversationSearch, {
-			value: search,
-			onChange: setSearch
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex-1 overflow-y-auto overflow-x-hidden chat-scrollbar",
-			children: isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex items-center justify-center h-full text-sm text-[#667781]",
-				children: "Carregando..."
-			}) : isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex items-center justify-center h-full text-sm text-red-500",
-				children: "Erro ao carregar conversas"
-			}) : filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-col items-center justify-center h-full gap-2 text-[#667781]",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
-					icon: _hugeicons_core_free_icons.Message01Icon,
-					size: 32
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					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))
-		})]
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversationSearch, {
+				value: search,
+				onChange: setSearch
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversationFilterChips, {
+				value: filter,
+				onValueChange: setFilter,
+				unreadCount: unreadConversationsCount
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				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..."
+				}) : isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center justify-center h-full text-sm text-red-500",
+					children: "Erro ao carregar conversas"
+				}) : filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center justify-center h-full gap-2 text-[#667781]",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+						icon: _hugeicons_core_free_icons.Message01Icon,
+						size: 32
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-sm",
+						children: "Nenhuma conversa encontrada"
+					})]
+				}) : /* @__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"
+					}
+				})
+			})
+		]
 	});
 }
 function ConversationItem({ conversation, isSelected, onClick }) {
@@ -490,7 +555,7 @@ function formatTime(dateStr) {
 	}
 }
 //#endregion
-//#region src/react/message-input.tsx
+//#region src/message-input.tsx
 function MessageInput({ onSend, conversation, messages, disabled, placeholder = "Digite uma mensagem", className, contextWindowOpen = true }) {
 	const [text, setText] = (0, react.useState)("");
 	const [isSending, setIsSending] = (0, react.useState)(false);
@@ -605,6 +670,7 @@ function MessageInput({ onSend, conversation, messages, disabled, placeholder =
 	});
 }
 //#endregion
+exports.ConversationFilterChips = ConversationFilterChips;
 exports.ConversationItem = ConversationItem;
 exports.ConversationList = ConversationList;
 exports.FormattedMessage = FormattedMessage;
@@ -617,4 +683,5 @@ exports.MessageViewEmpty = MessageViewEmpty;
 exports.MessageViewHeader = MessageViewHeader;
 exports.WhatsappDashboard = WhatsappDashboard;
 exports.cn = cn;
+exports.getDisplayDate = getDisplayDate;
 exports.useWhatsappDashboard = useWhatsappDashboard;

package/dist/index.d.cts

@@ -3,7 +3,7 @@ import React from "react";
 import { Conversation, Conversation as Conversation$1, ConversationRecord, FreeformMessageWindow, UIMessage, UIMessage as UIMessage$1, UIMessageStatus, UIMessageStatus as UIMessageStatus$1 } from "better-zap";
 import { ClassValue } from "clsx";
 
-//#region src/react/whatsapp-dashboard.d.ts
+//#region src/whatsapp-dashboard.d.ts
 type MobileView = "list" | "chat";
 interface WhatsappDashboardContextValue {
   isMobile: boolean;
@@ -22,7 +22,7 @@ declare function WhatsappDashboard({
   ...props
 }: WhatsappDashboardProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/react/message-view.d.ts
+//#region src/message-view.d.ts
 interface MessageViewProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
 }
@@ -71,7 +71,7 @@ declare function MessageViewEmpty({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/react/message-bubble.d.ts
+//#region src/message-bubble.d.ts
 interface MessageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
   content: string;
   sender: "user" | "bot";
@@ -96,7 +96,7 @@ declare function FormattedMessage({
   text: string;
 }): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-//#region src/react/conversation-list.d.ts
+//#region src/conversation-list.d.ts
 interface ConversationListProps {
   conversations: Conversation$1[];
   isLoading: boolean;
@@ -124,10 +124,26 @@ declare function ConversationItem({
   onClick
 }: ConversationItemProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/react/utils.d.ts
+//#region src/conversation-filter-chips.d.ts
+type ConversationFilterValue = "all" | "unread";
+interface ConversationFilterChipsProps {
+  value: ConversationFilterValue;
+  onValueChange: (value: ConversationFilterValue) => void;
+  unreadCount?: number;
+  className?: string;
+}
+declare function ConversationFilterChips({
+  value,
+  onValueChange,
+  unreadCount,
+  className
+}: ConversationFilterChipsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/utils.d.ts
 declare function cn(...inputs: ClassValue[]): string;
+declare function getDisplayDate(dateStr: string): string;
 //#endregion
-//#region src/react/message-input.d.ts
+//#region src/message-input.d.ts
 interface MessageInputProps {
   onSend: (text: string) => void | Promise<void>;
   conversation?: Conversation$1 | null;
@@ -148,4 +164,4 @@ declare function MessageInput({
   contextWindowOpen
 }: MessageInputProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { type Conversation, ConversationItem, ConversationList, type ConversationRecord, FormattedMessage, type FreeformMessageWindow, MessageBubble, MessageBubbleProps, MessageInput, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader, type UIMessage, type UIMessageStatus, WhatsappDashboard, cn, useWhatsappDashboard };
+export { type Conversation, ConversationFilterChips, ConversationFilterValue, ConversationItem, ConversationList, type ConversationRecord, FormattedMessage, type FreeformMessageWindow, MessageBubble, MessageBubbleProps, MessageInput, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader, type UIMessage, type UIMessageStatus, WhatsappDashboard, cn, getDisplayDate, useWhatsappDashboard };

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import { ClassValue } from "clsx";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Conversation, Conversation as Conversation$1, ConversationRecord, FreeformMessageWindow, UIMessage, UIMessage as UIMessage$1, UIMessageStatus, UIMessageStatus as UIMessageStatus$1 } from "better-zap";
 
-//#region src/react/whatsapp-dashboard.d.ts
+//#region src/whatsapp-dashboard.d.ts
 type MobileView = "list" | "chat";
 interface WhatsappDashboardContextValue {
   isMobile: boolean;
@@ -22,7 +22,7 @@ declare function WhatsappDashboard({
   ...props
 }: WhatsappDashboardProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/react/message-view.d.ts
+//#region src/message-view.d.ts
 interface MessageViewProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
 }
@@ -71,7 +71,7 @@ declare function MessageViewEmpty({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/react/message-bubble.d.ts
+//#region src/message-bubble.d.ts
 interface MessageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
   content: string;
   sender: "user" | "bot";
@@ -96,7 +96,7 @@ declare function FormattedMessage({
   text: string;
 }): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-//#region src/react/conversation-list.d.ts
+//#region src/conversation-list.d.ts
 interface ConversationListProps {
   conversations: Conversation$1[];
   isLoading: boolean;
@@ -124,10 +124,26 @@ declare function ConversationItem({
   onClick
 }: ConversationItemProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/react/utils.d.ts
+//#region src/conversation-filter-chips.d.ts
+type ConversationFilterValue = "all" | "unread";
+interface ConversationFilterChipsProps {
+  value: ConversationFilterValue;
+  onValueChange: (value: ConversationFilterValue) => void;
+  unreadCount?: number;
+  className?: string;
+}
+declare function ConversationFilterChips({
+  value,
+  onValueChange,
+  unreadCount,
+  className
+}: ConversationFilterChipsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/utils.d.ts
 declare function cn(...inputs: ClassValue[]): string;
+declare function getDisplayDate(dateStr: string): string;
 //#endregion
-//#region src/react/message-input.d.ts
+//#region src/message-input.d.ts
 interface MessageInputProps {
   onSend: (text: string) => void | Promise<void>;
   conversation?: Conversation$1 | null;
@@ -148,4 +164,4 @@ declare function MessageInput({
   contextWindowOpen
 }: MessageInputProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { type Conversation, ConversationItem, ConversationList, type ConversationRecord, FormattedMessage, type FreeformMessageWindow, MessageBubble, MessageBubbleProps, MessageInput, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader, type UIMessage, type UIMessageStatus, WhatsappDashboard, cn, useWhatsappDashboard };
+export { type Conversation, ConversationFilterChips, ConversationFilterValue, ConversationItem, ConversationList, type ConversationRecord, FormattedMessage, type FreeformMessageWindow, MessageBubble, MessageBubbleProps, MessageInput, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader, type UIMessage, type UIMessageStatus, WhatsappDashboard, cn, getDisplayDate, useWhatsappDashboard };

package/dist/index.mjs

@@ -4,14 +4,30 @@ 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/react/utils.ts
+//#region src/utils.ts
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
+function getDisplayDate(dateStr) {
+	const dateObj = new Date(dateStr);
+	const now = /* @__PURE__ */ new Date();
+	const isToday = dateObj.toDateString() === now.toDateString();
+	const yesterday = new Date(now);
+	yesterday.setDate(yesterday.getDate() - 1);
+	const isYesterday = dateObj.toDateString() === yesterday.toDateString();
+	if (isToday) return "HOJE";
+	else if (isYesterday) return "ONTEM";
+	else return dateObj.toLocaleDateString("pt-BR", {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	});
+}
 //#endregion
-//#region src/react/whatsapp-dashboard.tsx
+//#region src/whatsapp-dashboard.tsx
 const MOBILE_BREAKPOINT = 1024;
 function useIsMobile() {
 	const [isMobile, setIsMobile] = useState(false);
@@ -52,7 +68,7 @@ function WhatsappDashboard({ children, className, defaultMobileView = "list", ..
 	});
 }
 //#endregion
-//#region src/react/message-bubble.tsx
+//#region src/message-bubble.tsx
 const bubbleVariants = cva("relative shadow-[0_1px_0.5px_rgba(11,20,26,0.13)] rounded-lg px-3 py-2 max-w-[65%]", { variants: { variant: {
 	outgoing: "bg-green-100 text-green-900 rounded-tr-none",
 	incoming: "bg-gray-100 text-gray-900 rounded-tl-none",
@@ -150,24 +166,7 @@ function FormattedMessage({ text }) {
 	}) });
 }
 //#endregion
-//#region src/date.ts
-function getDisplayDate(dateStr) {
-	const dateObj = new Date(dateStr);
-	const now = /* @__PURE__ */ new Date();
-	const isToday = dateObj.toDateString() === now.toDateString();
-	const yesterday = new Date(now);
-	yesterday.setDate(yesterday.getDate() - 1);
-	const isYesterday = dateObj.toDateString() === yesterday.toDateString();
-	if (isToday) return "HOJE";
-	else if (isYesterday) return "ONTEM";
-	else return dateObj.toLocaleDateString("pt-BR", {
-		day: "2-digit",
-		month: "2-digit",
-		year: "numeric"
-	});
-}
-//#endregion
-//#region src/react/message-view.tsx
+//#region src/message-view.tsx
 function MessageView({ children, className, ...props }) {
 	const { isMobile, mobileView } = useWhatsappDashboard();
 	const hasContent = React.Children.count(children) > 0;
@@ -234,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 }) {
@@ -344,7 +353,7 @@ function MessageViewEmpty({ className, ...props }) {
 	});
 }
 //#endregion
-//#region src/react/conversation-search.tsx
+//#region src/conversation-search.tsx
 function ConversationSearch({ value, onChange, className }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("border-b border-[#e9edef] shrink-0 p-2", className),
@@ -365,11 +374,46 @@ function ConversationSearch({ value, onChange, className }) {
 	});
 }
 //#endregion
-//#region src/react/conversation-list.tsx
+//#region src/conversation-filter-chips.tsx
+const chips = [{
+	label: "Tudo",
+	value: "all"
+}, {
+	label: "Não lidas",
+	value: "unread"
+}];
+function ConversationFilterChips({ value, onValueChange, unreadCount = 0, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2 px-3 py-3", className),
+		children: chips.map((chip) => {
+			const isActive = chip.value === value;
+			const showCount = chip.value === "unread" && unreadCount > 0;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => onValueChange(chip.value),
+				"aria-pressed": isActive,
+				className: cn("inline-flex h-8 items-center rounded-full border px-4 text-[15px] font-medium transition-colors", isActive ? "border-[#b8e6c1] bg-[#e7fce3] text-[#017561]" : "border-[#d1d7db] bg-white text-[#54656f] hover:bg-[#f5f6f6]"),
+				children: [/* @__PURE__ */ jsx("span", { children: chip.label }), showCount ? /* @__PURE__ */ jsx("span", {
+					className: "ml-1",
+					children: unreadCount
+				}) : null]
+			}, chip.value);
+		})
+	});
+}
+//#endregion
+//#region src/conversation-list.tsx
 function ConversationList({ conversations, isLoading, isError, selectedConversationId, onSelect, className }) {
 	const { isMobile, mobileView, setMobileView } = useWhatsappDashboard();
 	const [search, setSearch] = useState("");
-	const filtered = conversations.filter((c) => c.phone.includes(search) || c.contactName?.toLowerCase().includes(search.toLowerCase()));
+	const [filter, setFilter] = useState("all");
+	const normalizedSearch = search.trim().toLowerCase();
+	const unreadConversationsCount = conversations.filter((c) => c.unreadCount > 0).length;
+	const filtered = conversations.filter((conversation) => {
+		const matchesSearch = normalizedSearch.length === 0 || conversation.phone.toLowerCase().includes(normalizedSearch) || conversation.contactName?.toLowerCase().includes(normalizedSearch);
+		const matchesFilter = filter === "all" || conversation.unreadCount > 0;
+		return matchesSearch && matchesFilter;
+	});
 	const handleSelect = (id) => {
 		onSelect(id);
 		setMobileView("chat");
@@ -378,32 +422,53 @@ function ConversationList({ conversations, isLoading, isError, selectedConversat
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex flex-col h-full bg-white border-r border-[#e9edef]", isMobile ? "w-full" : "min-w-[320px] max-w-105", className),
 		style: isVisible ? void 0 : { display: "none" },
-		children: [/* @__PURE__ */ jsx(ConversationSearch, {
-			value: search,
-			onChange: setSearch
-		}), /* @__PURE__ */ jsx("div", {
-			className: "flex-1 overflow-y-auto overflow-x-hidden chat-scrollbar",
-			children: isLoading ? /* @__PURE__ */ jsx("div", {
-				className: "flex items-center justify-center h-full text-sm text-[#667781]",
-				children: "Carregando..."
-			}) : isError ? /* @__PURE__ */ jsx("div", {
-				className: "flex items-center justify-center h-full text-sm text-red-500",
-				children: "Erro ao carregar conversas"
-			}) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col items-center justify-center h-full gap-2 text-[#667781]",
-				children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
-					icon: Message01Icon,
-					size: 32
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-sm",
-					children: "Nenhuma conversa encontrada"
-				})]
-			}) : filtered.map((conversation) => /* @__PURE__ */ jsx(ConversationItem, {
-				conversation,
-				isSelected: selectedConversationId === conversation.id,
-				onClick: () => handleSelect(conversation.id)
-			}, conversation.id))
-		})]
+		children: [
+			/* @__PURE__ */ jsx(ConversationSearch, {
+				value: search,
+				onChange: setSearch
+			}),
+			/* @__PURE__ */ jsx(ConversationFilterChips, {
+				value: filter,
+				onValueChange: setFilter,
+				unreadCount: unreadConversationsCount
+			}),
+			/* @__PURE__ */ jsx("div", {
+				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..."
+				}) : isError ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center h-full text-sm text-red-500",
+					children: "Erro ao carregar conversas"
+				}) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-center h-full gap-2 text-[#667781]",
+					children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+						icon: Message01Icon,
+						size: 32
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm",
+						children: "Nenhuma conversa encontrada"
+					})]
+				}) : /* @__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"
+					}
+				})
+			})
+		]
 	});
 }
 function ConversationItem({ conversation, isSelected, onClick }) {
@@ -466,7 +531,7 @@ function formatTime(dateStr) {
 	}
 }
 //#endregion
-//#region src/react/message-input.tsx
+//#region src/message-input.tsx
 function MessageInput({ onSend, conversation, messages, disabled, placeholder = "Digite uma mensagem", className, contextWindowOpen = true }) {
 	const [text, setText] = useState("");
 	const [isSending, setIsSending] = useState(false);
@@ -581,4 +646,4 @@ function MessageInput({ onSend, conversation, messages, disabled, placeholder =
 	});
 }
 //#endregion
-export { ConversationItem, ConversationList, FormattedMessage, MessageBubble, MessageInput, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader, WhatsappDashboard, cn, useWhatsappDashboard };
+export { ConversationFilterChips, ConversationItem, ConversationList, FormattedMessage, MessageBubble, MessageInput, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader, WhatsappDashboard, cn, getDisplayDate, useWhatsappDashboard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-zap/react",
-  "version": "0.0.3",
+  "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.3"
+    "better-zap": "0.1.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",