@better-zap/react 0.2.0 → 0.2.2

package/dist/message-input-DcEzHQ9t.cjs

@@ -0,0 +1,191 @@
+const require_utils = require("./utils-Bp9IahGG.cjs");
+const require_composer = require("./composer.cjs");
+let react = require("react");
+react = require_utils.__toESM(react);
+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 better_zap = require("better-zap");
+//#region src/use-freeform-message-window.ts
+const CLOSED_WINDOW = {
+	isOpen: false,
+	lastIncomingMessageAt: null,
+	expiresAt: null
+};
+const MAX_TIMEOUT_MS = 2 ** 31 - 1;
+function useFreeformMessageWindow(conversation, messages) {
+	const [now, setNow] = (0, react.useState)(() => /* @__PURE__ */ new Date());
+	const freeformWindow = conversation ? (0, better_zap.resolveConversationFreeformMessageWindow)(conversation, messages, now) : CLOSED_WINDOW;
+	const revalidate = (0, react.useCallback)(() => {
+		const freshNow = /* @__PURE__ */ new Date();
+		setNow(freshNow);
+		if (!conversation) return CLOSED_WINDOW;
+		return (0, better_zap.resolveConversationFreeformMessageWindow)(conversation, messages, freshNow);
+	}, [conversation, messages]);
+	(0, react.useEffect)(() => {
+		if (!conversation || !freeformWindow.isOpen || !freeformWindow.expiresAt) return;
+		const expiresAtMs = new Date(freeformWindow.expiresAt).getTime();
+		if (!Number.isFinite(expiresAtMs)) return;
+		const delay = Math.min(Math.max(0, expiresAtMs - Date.now()), MAX_TIMEOUT_MS);
+		const timeoutId = globalThis.setTimeout(() => {
+			setNow(/* @__PURE__ */ new Date());
+		}, delay);
+		return () => {
+			globalThis.clearTimeout(timeoutId);
+		};
+	}, [
+		conversation,
+		freeformWindow.isOpen,
+		freeformWindow.expiresAt,
+		now
+	]);
+	return {
+		...freeformWindow,
+		revalidate
+	};
+}
+//#endregion
+//#region src/message-input.tsx
+var FreeformWindowClosedError = class extends Error {
+	window;
+	constructor(freeformWindow) {
+		super("Freeform messaging window is closed");
+		this.name = "FreeformWindowClosedError";
+		this.window = freeformWindow;
+	}
+};
+const DEFAULT_LABELS = {
+	sending: "Enviando...",
+	expired: "A janela de 24h expirou. Mensagens de texto livre só podem ser enviadas dentro de 24h após a última mensagem do contato.",
+	emoji: "Emojis",
+	attach: "Anexar arquivo",
+	send: "Enviar",
+	mic: "Gravar áudio",
+	textarea: "Mensagem",
+	sendFailed: "Falha ao enviar. Tente novamente."
+};
+function MessageInputBody({ labels, placeholder, onEmojiClick, onAttachClick, onMicClick, showDefaultError }) {
+	const { isSending, hasText } = require_composer.useComposerState();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		(onEmojiClick || onAttachClick) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-1 text-[#54656f] shrink-0",
+			children: [onEmojiClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_composer.ComposerButton, {
+				"aria-label": labels.emoji,
+				title: labels.emoji,
+				onClick: onEmojiClick,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: _hugeicons_core_free_icons.SmileIcon,
+					size: 24
+				})
+			}), onAttachClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_composer.ComposerButton, {
+				"aria-label": labels.attach,
+				title: "Anexar",
+				onClick: onAttachClick,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: _hugeicons_core_free_icons.Add01Icon,
+					size: 24
+				})
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex-1 flex items-center min-h-[40px] py-2 px-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_composer.ComposerTextarea, {
+				"aria-label": labels.textarea,
+				placeholder: isSending ? labels.sending : placeholder
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex items-center pr-1 shrink-0",
+			children: hasText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_composer.ComposerSend, { "aria-label": labels.send }) : onMicClick ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_composer.ComposerButton, {
+				"aria-label": labels.mic,
+				className: "text-[#54656f]",
+				onClick: onMicClick,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: _hugeicons_core_free_icons.Mic01Icon,
+					size: 24
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_composer.ComposerSend, { "aria-label": labels.send })
+		}),
+		showDefaultError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_composer.ComposerError, {
+			className: "px-2 pb-1 text-[13px] leading-[18px] text-red-600",
+			children: labels.sendFailed
+		})
+	] });
+}
+function MessageInput({ onSend, conversation, messages, disabled, placeholder = "Digite uma mensagem", className, contextWindowOpen = true, onSendError, onEmojiClick, onAttachClick, onMicClick, labels: labelsProp }) {
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const freeformFromHook = useFreeformMessageWindow(conversation, messages);
+	const freeformMessageWindow = conversation ? freeformFromHook : {
+		isOpen: contextWindowOpen,
+		lastIncomingMessageAt: null,
+		expiresAt: null,
+		revalidate: () => ({
+			isOpen: contextWindowOpen,
+			lastIncomingMessageAt: null,
+			expiresAt: null
+		})
+	};
+	const isContextWindowOpen = freeformMessageWindow.isOpen;
+	const revalidate = freeformMessageWindow.revalidate;
+	const handleSubmit = (0, react.useCallback)(async (text) => {
+		const windowState = revalidate();
+		if (!windowState.isOpen) throw new FreeformWindowClosedError(windowState);
+		return onSend(text);
+	}, [onSend, revalidate]);
+	const handleError = (0, react.useCallback)((error, context) => {
+		onSendError?.(error, context);
+	}, [onSendError]);
+	const showDefaultError = !(onSendError != null && labelsProp?.sendFailed === "");
+	if (!isContextWindowOpen) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("w-full flex flex-col px-4 py-3 z-10 shrink-0", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-3 px-4 py-3 min-h-[52px] bg-[#ffeecd] rounded-[7.5px] shadow-[0_1px_0.5px_rgba(11,20,26,0.13)]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.Clock01Icon,
+				size: 20,
+				className: "text-[#54656f] shrink-0"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[13px] leading-[18px] text-[#54656f]",
+				children: labels.expired
+			})]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("w-full flex flex-col px-4 py-3 z-10 shrink-0", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_composer.Composer, {
+			onSubmit: handleSubmit,
+			onError: handleError,
+			disabled,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageInputBody, {
+				labels,
+				placeholder,
+				onEmojiClick,
+				onAttachClick,
+				onMicClick,
+				showDefaultError
+			})
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "FreeformWindowClosedError", {
+	enumerable: true,
+	get: function() {
+		return FreeformWindowClosedError;
+	}
+});
+Object.defineProperty(exports, "MessageInput", {
+	enumerable: true,
+	get: function() {
+		return MessageInput;
+	}
+});
+Object.defineProperty(exports, "useFreeformMessageWindow", {
+	enumerable: true,
+	get: function() {
+		return useFreeformMessageWindow;
+	}
+});

package/dist/message-input.cjs

@@ -0,0 +1,6 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./composer.cjs");
+const require_message_input = require("./message-input-DcEzHQ9t.cjs");
+exports.FreeformWindowClosedError = require_message_input.FreeformWindowClosedError;
+exports.MessageInput = require_message_input.MessageInput;

package/dist/message-input.d.cts

@@ -0,0 +1,51 @@
+import React from "react";
+import { Conversation, FreeformMessageWindow, UIMessage } from "better-zap";
+
+//#region src/message-input.d.ts
+declare class FreeformWindowClosedError extends Error {
+  readonly window: FreeformMessageWindow;
+  constructor(freeformWindow: FreeformMessageWindow);
+}
+interface MessageInputLabels {
+  sending: string;
+  expired: string;
+  emoji: string;
+  attach: string;
+  send: string;
+  mic: string;
+  textarea: string;
+  sendFailed: string;
+}
+interface MessageInputProps {
+  onSend: (text: string) => void | Promise<void>;
+  conversation?: Conversation | null;
+  messages?: UIMessage[];
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  /** @deprecated Prefer `conversation` (and optional `messages`) so the library owns window state. */
+  contextWindowOpen?: boolean;
+  onSendError?: (error: unknown, context: {
+    text: string;
+  }) => void;
+  onEmojiClick?: () => void;
+  onAttachClick?: () => void;
+  onMicClick?: () => void;
+  labels?: Partial<MessageInputLabels>;
+}
+declare function MessageInput({
+  onSend,
+  conversation,
+  messages,
+  disabled,
+  placeholder,
+  className,
+  contextWindowOpen,
+  onSendError,
+  onEmojiClick,
+  onAttachClick,
+  onMicClick,
+  labels: labelsProp
+}: MessageInputProps): React.JSX.Element;
+//#endregion
+export { FreeformWindowClosedError, MessageInput, MessageInputLabels, MessageInputProps };

package/dist/message-input.d.mts

@@ -0,0 +1,51 @@
+import React from "react";
+import { Conversation, FreeformMessageWindow, UIMessage } from "better-zap";
+
+//#region src/message-input.d.ts
+declare class FreeformWindowClosedError extends Error {
+  readonly window: FreeformMessageWindow;
+  constructor(freeformWindow: FreeformMessageWindow);
+}
+interface MessageInputLabels {
+  sending: string;
+  expired: string;
+  emoji: string;
+  attach: string;
+  send: string;
+  mic: string;
+  textarea: string;
+  sendFailed: string;
+}
+interface MessageInputProps {
+  onSend: (text: string) => void | Promise<void>;
+  conversation?: Conversation | null;
+  messages?: UIMessage[];
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  /** @deprecated Prefer `conversation` (and optional `messages`) so the library owns window state. */
+  contextWindowOpen?: boolean;
+  onSendError?: (error: unknown, context: {
+    text: string;
+  }) => void;
+  onEmojiClick?: () => void;
+  onAttachClick?: () => void;
+  onMicClick?: () => void;
+  labels?: Partial<MessageInputLabels>;
+}
+declare function MessageInput({
+  onSend,
+  conversation,
+  messages,
+  disabled,
+  placeholder,
+  className,
+  contextWindowOpen,
+  onSendError,
+  onEmojiClick,
+  onAttachClick,
+  onMicClick,
+  labels: labelsProp
+}: MessageInputProps): React.JSX.Element;
+//#endregion
+export { FreeformWindowClosedError, MessageInput, MessageInputLabels, MessageInputProps };

package/dist/message-input.mjs

@@ -0,0 +1,5 @@
+"use client";
+import "./utils.mjs";
+import "./composer.mjs";
+import { n as MessageInput, t as FreeformWindowClosedError } from "./message-input-CkaL6fb4.mjs";
+export { FreeformWindowClosedError, MessageInput };

package/dist/message-view.cjs

@@ -0,0 +1,273 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("./utils-Bp9IahGG.cjs");
+const require_whatsapp_dashboard = require("./whatsapp-dashboard.cjs");
+const require_message_bubble = require("./message-bubble.cjs");
+let react = require("react");
+react = require_utils.__toESM(react);
+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");
+//#region src/message-view.tsx
+function MessageView({ children, className, style, ...props }) {
+	const ctx = require_whatsapp_dashboard.useOptionalWhatsappDashboard();
+	const isMobile = ctx?.isMobile ?? false;
+	const mobileView = ctx?.mobileView ?? "chat";
+	const hasContent = react.default.Children.count(children) > 0;
+	const isVisible = !isMobile || mobileView === "chat";
+	if (!hasContent) {
+		if (isMobile) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageViewEmpty, {
+			className,
+			style,
+			...props
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.cn("relative flex flex-1 flex-col bg-[#efeae2]", className),
+		style: {
+			...style,
+			...isVisible ? null : { display: "none" }
+		},
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+			position: "absolute",
+			backgroundImage: `url(${new URL("./wpp-bg.webp", require("url").pathToFileURL(__filename).href).href})`,
+			backgroundRepeat: "repeat",
+			opacity: .15,
+			inset: 0
+		} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "relative flex flex-1 flex-col min-h-0",
+			children
+		})]
+	});
+}
+const DEFAULT_HEADER_LABELS = {
+	back: "Voltar",
+	info: "Informações"
+};
+const iconButtonClassName = "inline-flex h-10 w-10 items-center justify-center rounded-full text-[#54656f] hover:bg-black/5 focus-visible:outline-2 focus-visible:outline-offset-2";
+function MessageViewHeader({ conversation, onBack, onInfoClick, showBackButton, actions, labels: labelsProp, children, className, ...props }) {
+	const ctx = require_whatsapp_dashboard.useOptionalWhatsappDashboard();
+	const labels = {
+		...DEFAULT_HEADER_LABELS,
+		...labelsProp
+	};
+	const showBack = showBackButton ?? ctx?.isMobile ?? false;
+	const handleBack = () => {
+		ctx?.setMobileView("list");
+		onBack?.();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.cn("flex h-[59px] shrink-0 items-center justify-between bg-[#f0f2f5] px-4 z-20", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-3",
+			children: [showBack && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": labels.back,
+				className: iconButtonClassName,
+				onClick: handleBack,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: _hugeicons_core_free_icons.ArrowLeft02Icon,
+					size: 20
+				})
+			}), children ?? (conversation ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#dfe5e7]",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: _hugeicons_core_free_icons.UserIcon,
+					size: 24,
+					className: "text-white"
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: "text-[16px] font-medium text-[#111b21] leading-tight",
+					children: conversation.contactName || conversation.phone
+				}), conversation.contactName && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[13px] text-[#667781] leading-tight",
+					children: conversation.phone
+				})]
+			})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "flex flex-col" }))]
+		}), actions ?? (onInfoClick ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": labels.info,
+			className: iconButtonClassName,
+			onClick: onInfoClick,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.InformationCircleIcon,
+				size: 20
+			})
+		}) : null)]
+	});
+}
+const MessageViewScrollContext = react.default.createContext(null);
+function MessageViewContent({ children, autoScroll = true, onScrollTop, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageViewScrollContext.Provider, {
+		value: {
+			autoScroll,
+			onScrollTop
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_utils.cn("flex min-h-0 flex-1 flex-col p-4 pb-0", className),
+			...props,
+			children
+		})
+	});
+}
+const MemoizedMessageBubble = react.default.memo(require_message_bubble.MessageBubble);
+const MemoizedDateDivider = react.default.memo(DateDivider);
+function defaultFormatTime(isoDate) {
+	return new Date(isoDate).toLocaleTimeString("pt-BR", {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function sameGroup(a, b, resolveFormatDate) {
+	return resolveFormatDate(a.sentAt) === resolveFormatDate(b.sentAt) && a.direction === b.direction;
+}
+function getGroupPosition(messages, index, resolveFormatDate) {
+	const n = messages.length;
+	const prevSame = index > 0 && sameGroup(messages[index - 1], messages[index], resolveFormatDate);
+	const nextSame = index < n - 1 && sameGroup(messages[index], messages[index + 1], resolveFormatDate);
+	if (!prevSame && !nextSame) return "single";
+	if (!prevSame && nextSame) return "first";
+	if (prevSame && nextSame) return "middle";
+	return "last";
+}
+function MessageList({ messages, renderMessage, renderDateDivider, formatDate, formatTime, renderMessageLabel, autoScroll: autoScrollProp, onScrollTop: onScrollTopProp, className }) {
+	const scrollContext = (0, react.useContext)(MessageViewScrollContext);
+	const resolvedAutoScroll = autoScrollProp ?? scrollContext?.autoScroll ?? true;
+	const resolvedOnScrollTop = onScrollTopProp ?? scrollContext?.onScrollTop;
+	const resolveFormatDate = formatDate ?? require_utils.getDisplayDate;
+	const resolveFormatTime = formatTime ?? defaultFormatTime;
+	const { items, stickyHeaderIndices } = (0, react.useMemo)(() => {
+		const itemsNew = [];
+		const stickyHeaderIndicesNew = [];
+		let currentLabel = null;
+		const labelCounts = /* @__PURE__ */ new Map();
+		messages.forEach((msg, index) => {
+			const label = resolveFormatDate(msg.sentAt);
+			if (currentLabel !== label) {
+				currentLabel = label;
+				stickyHeaderIndicesNew.push(itemsNew.length);
+				const seen = labelCounts.get(label) ?? 0;
+				labelCounts.set(label, seen + 1);
+				const id = seen === 0 ? `date:${label}` : `date:${label}:${seen}`;
+				itemsNew.push({
+					type: "date",
+					id,
+					label,
+					date: msg.sentAt
+				});
+			}
+			itemsNew.push({
+				type: "message",
+				id: msg.id,
+				message: msg,
+				groupPosition: getGroupPosition(messages, index, resolveFormatDate)
+			});
+		});
+		return {
+			items: itemsNew,
+			stickyHeaderIndices: stickyHeaderIndicesNew
+		};
+	}, [messages, resolveFormatDate]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react.LegendList, {
+		alignItemsAtEnd: true,
+		className: require_utils.cn("chat-scrollbar", className),
+		contentContainerStyle: { paddingBottom: 16 },
+		data: items,
+		estimatedItemSize: 72,
+		getItemType: (item) => item.type,
+		initialScrollAtEnd: resolvedAutoScroll,
+		keyExtractor: (item) => item.id,
+		maintainScrollAtEnd: resolvedAutoScroll,
+		maintainVisibleContentPosition: true,
+		onStartReached: resolvedOnScrollTop ? () => resolvedOnScrollTop() : void 0,
+		onStartReachedThreshold: .1,
+		recycleItems: true,
+		renderItem: ({ item }) => {
+			if (item.type === "date") return renderDateDivider?.({
+				label: item.label,
+				date: item.date
+			}) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedDateDivider, { children: item.label });
+			const { message, groupPosition } = item;
+			const label = renderMessageLabel?.(message);
+			const direction = message.direction;
+			const align = direction === "incoming" ? "start" : "end";
+			const ctx = {
+				message,
+				id: message.id,
+				direction,
+				align,
+				groupPosition,
+				label
+			};
+			return renderMessage?.(ctx) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedMessageBubble, {
+				content: message.content || "",
+				sender: direction === "incoming" ? "user" : "bot",
+				timestamp: resolveFormatTime(message.sentAt),
+				status: message.status,
+				templateName: message.templateName || void 0,
+				label,
+				groupPosition
+			});
+		},
+		stickyHeaderIndices,
+		style: {
+			height: "100%",
+			minHeight: 0
+		}
+	});
+}
+function DateDivider({ children, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("sticky top-0 z-10 flex justify-center w-full py-2 pointer-events-none", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "bg-white shadow-[0_1px_0.5px_rgba(11,20,26,0.13)] text-[#54656f] text-[12.5px] font-medium px-3 py-[5px] rounded-[7.5px] uppercase pointer-events-auto",
+			children
+		})
+	});
+}
+function MessageViewEmpty({ className, children, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn("relative flex flex-1 flex-col items-center justify-center bg-[#f0f2f5] text-[#667781] p-6 border-b-[6px] border-[#25d366]", className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.Message01Icon,
+				size: 96,
+				strokeWidth: 1,
+				className: "mb-6 text-[#c6cdd2]"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "mb-4 text-[32px] font-light text-[#41525d]",
+				children: "Better Zap"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "max-w-md space-y-3 text-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "text-sm leading-[20px]",
+					children: [
+						"Esta é uma interface dedicada para visualização e monitoramento de mensagens da ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: "API Oficial do WhatsApp" }),
+						"."
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "text-sm leading-[20px] opacity-80",
+					children: "Acompanhe o histórico de conversas, verifique o status de entrega e gerencie as interações do Cloud API de forma profissional."
+				})]
+			})
+		] })
+	});
+}
+//#endregion
+exports.DateDivider = DateDivider;
+exports.MessageList = MessageList;
+exports.MessageView = MessageView;
+exports.MessageViewContent = MessageViewContent;
+exports.MessageViewEmpty = MessageViewEmpty;
+exports.MessageViewHeader = MessageViewHeader;

package/dist/message-view.d.cts

@@ -0,0 +1,109 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Conversation, UIMessage } from "better-zap";
+
+//#region src/message-view.d.ts
+interface MessageViewProps extends React.ComponentProps<"div"> {
+  children?: React.ReactNode;
+}
+declare function MessageView({
+  children,
+  className,
+  style,
+  ...props
+}: MessageViewProps): react_jsx_runtime0.JSX.Element | null;
+interface MessageViewHeaderLabels {
+  back: string;
+  info: string;
+}
+interface MessageViewHeaderProps extends React.ComponentProps<"div"> {
+  conversation?: Conversation;
+  onBack?: () => void;
+  onInfoClick?: () => void;
+  /** Force the back button outside dashboard context. Default: ctx?.isMobile ?? false */
+  showBackButton?: boolean;
+  /** Replaces the right-side default info button entirely. */
+  actions?: React.ReactNode;
+  labels?: Partial<MessageViewHeaderLabels>;
+  /** children replace the identity block (name + phone) when provided. */
+  children?: React.ReactNode;
+}
+declare function MessageViewHeader({
+  conversation,
+  onBack,
+  onInfoClick,
+  showBackButton,
+  actions,
+  labels: labelsProp,
+  children,
+  className,
+  ...props
+}: MessageViewHeaderProps): react_jsx_runtime0.JSX.Element;
+interface MessageViewContentProps extends React.ComponentProps<"div"> {
+  children?: React.ReactNode;
+  autoScroll?: boolean;
+  /** Called when the user scrolls to the top of the container. */
+  onScrollTop?: () => void;
+}
+declare function MessageViewContent({
+  children,
+  autoScroll,
+  onScrollTop,
+  className,
+  ...props
+}: MessageViewContentProps): react_jsx_runtime0.JSX.Element;
+type MessageGroupPosition = "single" | "first" | "middle" | "last";
+interface MessageRenderContext {
+  message: UIMessage;
+  /** Stable list identity — always message.id. */
+  id: string;
+  direction: "incoming" | "outgoing";
+  /** Presentation alignment: incoming → "start", outgoing → "end". */
+  align: "start" | "end";
+  groupPosition: MessageGroupPosition;
+  /** Result of renderMessageLabel, when provided. */
+  label?: string;
+}
+interface DateDividerRenderContext {
+  /** Formatted label (output of formatDate / getDisplayDate). */
+  label: string;
+  /** sentAt of the first message under this divider (raw ISO string). */
+  date: string;
+}
+interface MessageListProps {
+  messages: UIMessage[];
+  renderMessage?: (context: MessageRenderContext) => React.ReactNode;
+  renderDateDivider?: (context: DateDividerRenderContext) => React.ReactNode;
+  /** Formats divider labels. Default: getDisplayDate (pt-BR HOJE/ONTEM). */
+  formatDate?: (isoDate: string) => string;
+  /** Formats the in-bubble timestamp used by the DEFAULT renderer. Default: pt-BR HH:mm. */
+  formatTime?: (isoDate: string) => string;
+  renderMessageLabel?: (message: UIMessage) => string | undefined;
+  /** Direct props — context from MessageViewContent still works; these win over it. */
+  autoScroll?: boolean;
+  onScrollTop?: () => void;
+  className?: string;
+}
+declare function MessageList({
+  messages,
+  renderMessage,
+  renderDateDivider,
+  formatDate,
+  formatTime,
+  renderMessageLabel,
+  autoScroll: autoScrollProp,
+  onScrollTop: onScrollTopProp,
+  className
+}: MessageListProps): react_jsx_runtime0.JSX.Element;
+declare function DateDivider({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function MessageViewEmpty({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DateDivider, DateDividerRenderContext, MessageGroupPosition, MessageList, MessageListProps, MessageRenderContext, MessageView, MessageViewContent, MessageViewContentProps, MessageViewEmpty, MessageViewHeader, MessageViewHeaderLabels, MessageViewHeaderProps, MessageViewProps };