@better-zap/react 0.0.1

package/dist/index.mjs

@@ -0,0 +1,578 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { clsx } from "clsx";
+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 { cva } from "class-variance-authority";
+//#region src/react/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region src/react/whatsapp-dashboard.tsx
+const MOBILE_BREAKPOINT = 1024;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = useState(false);
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = (e) => {
+			setIsMobile(e.matches);
+		};
+		onChange(mql);
+		mql.addEventListener("change", onChange);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return isMobile;
+}
+const WhatsappDashboardContext = createContext(null);
+function useWhatsappDashboard() {
+	const ctx = useContext(WhatsappDashboardContext);
+	if (!ctx) throw new Error("useWhatsappDashboard must be used within <WhatsappDashboard>");
+	return ctx;
+}
+function WhatsappDashboard({ children, className, defaultMobileView = "list", ...props }) {
+	const isMobile = useIsMobile();
+	const [mobileView, setMobileView] = useState(defaultMobileView);
+	const handleSetMobileView = useCallback((view) => {
+		setMobileView(view);
+	}, []);
+	return /* @__PURE__ */ jsx(WhatsappDashboardContext.Provider, {
+		value: {
+			isMobile,
+			mobileView,
+			setMobileView: handleSetMobileView
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("bg-background flex h-full w-full overflow-hidden", className),
+			...props,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/react/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",
+	failed: "bg-red-100 text-red-900 rounded-tr-none border border-red-200"
+} } });
+const statusVariants = cva("text-[13px] leading-none", {
+	variants: { variant: {
+		default: "opacity-60",
+		read: "text-blue-500",
+		failed: "text-red-500"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function MessageBubble({ content, sender, timestamp, status, templateName, label, className, ...props }) {
+	const isIncoming = sender === "user";
+	const isFailed = status === "failed";
+	const bubbleVariant = isIncoming ? "incoming" : isFailed ? "failed" : "outgoing";
+	const statusVariant = status === "read" ? "read" : isFailed ? "failed" : "default";
+	const displayContent = content || (templateName ? `[Template: ${templateName}]` : "[Conteúdo não disponível]");
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full mb-1", isIncoming ? "justify-start" : "justify-end", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: bubbleVariants({ variant: bubbleVariant }),
+			children: [
+				label && !isIncoming && /* @__PURE__ */ jsx("span", {
+					className: "mb-1 block text-xs font-medium opacity-70",
+					children: label
+				}),
+				templateName && !label && /* @__PURE__ */ jsx("div", {
+					className: "mb-1 border-b border-black/5 pb-1",
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "text-[11px] font-medium opacity-70",
+						children: ["📋 ", templateName]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-[14.5px] leading-normal whitespace-pre-wrap break-words select-text",
+					children: [
+						/* @__PURE__ */ jsx(FormattedMessage, { text: displayContent }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "float-right -mb-1 ml-2 mt-1.5 flex items-center justify-end gap-1 shrink-0 h-[15px] select-none",
+							children: [timestamp && /* @__PURE__ */ jsx("span", {
+								className: "text-[11px] opacity-60 leading-none whitespace-nowrap",
+								children: timestamp
+							}), !isIncoming && status && /* @__PURE__ */ jsx("span", {
+								className: statusVariants({ variant: statusVariant }),
+								children: status === "read" || status === "delivered" ? "✓✓" : isFailed ? "✕" : "✓"
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", { className: "clear-both" })
+					]
+				})
+			]
+		})
+	});
+}
+function FormattedMessage({ text }) {
+	if (!text) return null;
+	return /* @__PURE__ */ jsx(Fragment, { children: text.split(/(\n)/g).map((line, lineIndex) => {
+		if (line === "\n") return /* @__PURE__ */ jsx("br", {}, lineIndex);
+		if (!line) return null;
+		const parts = line.split(/(```[\s\S]*?```|`[^`]+`|\*[^\s*](?:[^*]*[^\s*])?\*|_[^\s_](?:[^_]*[^\s_])?_|~[^\s~](?:[^~]*[^\s~])?~|https?:\/\/[^\s]+)/g);
+		return /* @__PURE__ */ jsx(React.Fragment, { children: parts.map((part, index) => {
+			if (!part) return null;
+			if (part.startsWith("```") && part.endsWith("```")) return /* @__PURE__ */ jsx("code", {
+				className: "my-1 block whitespace-pre-wrap rounded bg-black/5 px-1 py-0.5 font-mono text-[13px]",
+				children: part.slice(3, -3)
+			}, index);
+			if (part.startsWith("`") && part.endsWith("`")) return /* @__PURE__ */ jsx("code", {
+				className: "rounded bg-black/5 px-1 font-mono text-[13px] text-[#df0165]",
+				children: part.slice(1, -1)
+			}, index);
+			if (part.startsWith("*") && part.endsWith("*")) return /* @__PURE__ */ jsx("strong", {
+				className: "font-bold",
+				children: part.slice(1, -1)
+			}, index);
+			if (part.startsWith("_") && part.endsWith("_")) return /* @__PURE__ */ jsx("em", {
+				className: "italic",
+				children: part.slice(1, -1)
+			}, index);
+			if (part.startsWith("~") && part.endsWith("~")) return /* @__PURE__ */ jsx("del", {
+				className: "text-gray-500 line-through",
+				children: part.slice(1, -1)
+			}, index);
+			if (part.match(/^https?:\/\/[^\s]+$/)) return /* @__PURE__ */ jsx("a", {
+				href: part,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: "text-[#027eb5] hover:underline",
+				children: part
+			}, index);
+			return /* @__PURE__ */ jsx("span", { children: part }, index);
+		}) }, lineIndex);
+	}) });
+}
+//#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
+function MessageView({ children, className, ...props }) {
+	const { isMobile, mobileView } = useWhatsappDashboard();
+	const hasContent = React.Children.count(children) > 0;
+	const isVisible = !isMobile || mobileView === "chat";
+	if (!hasContent) {
+		if (isMobile) return null;
+		return /* @__PURE__ */ jsx(MessageViewEmpty, {
+			className,
+			...props
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-1 flex-col bg-[#efeae2]", className),
+		style: isVisible ? void 0 : { display: "none" },
+		...props,
+		children: [/* @__PURE__ */ jsx("div", { style: {
+			position: "absolute",
+			backgroundImage: `url(${new URL("./wpp-bg.webp", import.meta.url).href})`,
+			backgroundRepeat: "repeat",
+			opacity: .15,
+			inset: 0
+		} }), /* @__PURE__ */ jsx("div", {
+			className: "relative flex flex-1 flex-col min-h-0",
+			children
+		})]
+	});
+}
+function MessageViewHeader({ conversation, onBack, onInfoClick, className }) {
+	const { isMobile, setMobileView } = useWhatsappDashboard();
+	const handleBack = () => {
+		setMobileView("list");
+		onBack?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-16 shrink-0 items-center justify-between border-b bg-[#f0f2f5] px-4 z-20", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [isMobile && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-black/5",
+				onClick: handleBack,
+				children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+					icon: ArrowLeft02Icon,
+					size: 20
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-[15px] font-medium text-[#111b21] leading-tight",
+					children: conversation.contactName || conversation.phone
+				}), conversation.contactName && /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-[#667781] leading-tight",
+					children: conversation.phone
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "inline-flex h-9 w-9 items-center justify-center rounded-md hover:bg-black/5",
+			onClick: onInfoClick,
+			children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: InformationCircleIcon,
+				size: 20
+			})
+		})]
+	});
+}
+const SCROLL_TOP_THRESHOLD = 50;
+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
+	});
+}
+function MessageList({ messages, renderMessageLabel, className }) {
+	const messageGroups = useMemo(() => {
+		const groups = [];
+		let currentGroup = null;
+		messages.forEach((msg) => {
+			const displayDate = getDisplayDate(msg.sentAt);
+			if (!currentGroup || currentGroup.date !== displayDate) {
+				currentGroup = {
+					date: displayDate,
+					messages: []
+				};
+				groups.push(currentGroup);
+			}
+			currentGroup.messages.push(msg);
+		});
+		return groups;
+	}, [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))
+	});
+}
+function DateDivider({ date }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "sticky top-0 z-10 flex justify-center w-full py-2 pointer-events-none",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "bg-white border border-[#e9edef] shadow-[0_1px_0.5px_rgba(11,20,26,0.13)] text-[#54656f] text-[12.5px] font-medium px-3 py-1.5 rounded-lg uppercase pointer-events-auto",
+			children: date
+		})
+	});
+}
+function MessageViewEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-1 flex-col items-center justify-center bg-[#f8f9fa] text-[#667781] p-6", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-8 flex h-48 w-48 items-center justify-center rounded-full bg-[#f0f2f5] shadow-sm",
+				children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+					icon: Message01Icon,
+					size: 80,
+					className: "text-[#bbc5cb]"
+				})
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-3 text-2xl font-semibold text-[#41525d]",
+				children: "Better Zap"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "max-w-sm space-y-3 text-center",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: "text-[15px] leading-relaxed",
+					children: [
+						"Esta é uma interface dedicada para visualização e monitoramento de mensagens da ",
+						/* @__PURE__ */ jsx("strong", { children: "API Oficial do WhatsApp" }),
+						"."
+					]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-sm 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
+//#region src/react/conversation-search.tsx
+function ConversationSearch({ value, onChange, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("border-b border-[#e9edef] shrink-0 p-2", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center bg-[#f0f2f5] rounded-full px-4 h-[38px] gap-3 focus-within:bg-white focus-within:ring-1 focus-within:ring-green-200 focus-within:shadow-md transition-all border border-transparent focus-within:border-transparent",
+			children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: Search01Icon,
+				size: 18,
+				className: "text-[#54656f] shrink-0"
+			}), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				placeholder: "Buscar conversa",
+				value,
+				onChange: (e) => onChange(e.target.value),
+				className: "flex-1 border-none bg-transparent text-[15px] text-[#111b21] focus:outline-none h-full placeholder:text-[#667781]"
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/react/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 handleSelect = (id) => {
+		onSelect(id);
+		setMobileView("chat");
+	};
+	const isVisible = !isMobile || mobileView === "list";
+	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))
+		})]
+	});
+}
+function ConversationItem({ conversation, isSelected, onClick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		onClick,
+		"data-selected": isSelected,
+		className: "group flex items-center w-full h-[72px] px-3 gap-3 transition-all cursor-pointer text-left relative overflow-hidden hover:bg-[#f5f6f6] data-[selected=true]:bg-[#075e54] data-[selected=true]:hover:bg-[#064940]",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "w-[49px] h-[49px] rounded-full bg-[#dfe5e7] flex items-center justify-center shrink-0 group-data-[selected=true]:bg-white/20",
+			children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: UserIcon,
+				size: 28,
+				className: "text-[#aebac1] group-data-[selected=true]:text-white/80"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-0 border-b border-[#f2f2f2] h-full flex flex-col justify-center pr-1 group-last:border-none group-data-[selected=true]:border-transparent",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between items-baseline mb-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[17px] font-normal text-[#111b21] truncate group-data-[selected=true]:text-white",
+					children: conversation.contactName || formatPhone(conversation.phone)
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-[#667781] shrink-0 group-data-[selected=true]:text-white/90",
+					children: formatTime(conversation.lastMessageAt)
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: "text-[14px] text-[#667781] truncate group-data-[selected=true]:text-white/90",
+					children: [conversation.lastDirection === "incoming" ? "" : "Você: ", conversation.lastMessagePreview || "Sem mensagem"]
+				}), conversation.unreadCount > 0 && /* @__PURE__ */ jsx("span", {
+					className: "bg-[#25d366] text-white text-[11px] font-bold rounded-full min-w-[20px] h-[20px] flex items-center justify-center px-1.5 shrink-0 group-data-[selected=true]:bg-white",
+					children: conversation.unreadCount
+				})]
+			})]
+		})]
+	});
+}
+function formatPhone(phone) {
+	if (phone.length === 13 && phone.startsWith("55")) return `(${phone.slice(2, 4)}) ${phone.slice(4, 9)}-${phone.slice(9)}`;
+	return phone;
+}
+function formatTime(dateStr) {
+	try {
+		const date = new Date(dateStr);
+		const now = /* @__PURE__ */ new Date();
+		if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString("pt-BR", {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		const yesterday = new Date(now);
+		yesterday.setDate(yesterday.getDate() - 1);
+		if (date.toDateString() === yesterday.toDateString()) return "Ontem";
+		return date.toLocaleDateString("pt-BR", {
+			day: "2-digit",
+			month: "2-digit"
+		});
+	} catch {
+		return "";
+	}
+}
+//#endregion
+//#region src/react/message-input.tsx
+function MessageInput({ onSend, disabled, placeholder = "Digite uma mensagem", className, contextWindowOpen = true }) {
+	const [text, setText] = useState("");
+	const [isSending, setIsSending] = useState(false);
+	const textareaRef = useRef(null);
+	const isDisabled = disabled || isSending || !contextWindowOpen;
+	const handleSend = async () => {
+		const trimmedText = text.trim();
+		if (!trimmedText || isDisabled) return;
+		setIsSending(true);
+		try {
+			await onSend(trimmedText);
+			setText("");
+			if (textareaRef.current) textareaRef.current.style.height = "auto";
+		} finally {
+			setIsSending(false);
+		}
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSend();
+		}
+	};
+	useEffect(() => {
+		if (textareaRef.current) {
+			textareaRef.current.style.height = "auto";
+			textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+		}
+	}, [text]);
+	const hasText = text.trim().length > 0;
+	if (!contextWindowOpen) return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full flex flex-col p-4 z-10 shrink-0", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 px-4 py-3 min-h-[62px] bg-[#fef3c7] rounded-2xl border border-[#f59e0b]/20",
+			children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: Clock01Icon,
+				size: 20,
+				className: "text-[#92400e] shrink-0"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-[13px] leading-[18px] text-[#92400e]",
+				children: "A janela de 24h expirou. Mensagens de texto livre só podem ser enviadas dentro de 24h após a última mensagem do contato."
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full flex flex-col p-4 z-10 shrink-0", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 px-2 py-1 min-h-[62px] bg-white rounded-2xl shadow-lg border border-gray-100",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1 text-[#54656f] shrink-0",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Emojis",
+						className: "p-2 rounded-full hover:bg-black/5 transition-colors",
+						title: "Emojis",
+						children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+							icon: SmileIcon,
+							size: 24
+						})
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Anexar arquivo",
+						className: "p-2 rounded-full hover:bg-black/5 transition-colors",
+						title: "Anexar",
+						children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+							icon: Add01Icon,
+							size: 24
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1 flex items-center min-h-[42px] py-3 px-2",
+					children: /* @__PURE__ */ jsx("textarea", {
+						ref: textareaRef,
+						className: "flex-1 bg-transparent border-none text-[15px] leading-[22px] text-[#111b21] resize-none focus:outline-none max-h-[120px] placeholder:text-[#8696a0]",
+						name: "message",
+						"aria-label": "Mensagem",
+						autoComplete: "off",
+						placeholder: isSending ? "Enviando..." : placeholder,
+						value: text,
+						onChange: (e) => setText(e.target.value),
+						onKeyDown: handleKeyDown,
+						rows: 1,
+						disabled: isDisabled
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex items-center pr-1 shrink-0",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": hasText ? "Enviar" : "Gravar áudio",
+						className: cn("p-2 rounded-full transition-colors disabled:opacity-40 disabled:cursor-not-allowed", hasText ? "text-[#00a884]" : "text-[#54656f] hover:bg-black/5"),
+						onClick: hasText ? handleSend : void 0,
+						disabled: isDisabled,
+						children: hasText ? /* @__PURE__ */ jsx(HugeiconsIcon, {
+							icon: Sent02Icon,
+							size: 24
+						}) : /* @__PURE__ */ jsx(HugeiconsIcon, {
+							icon: Mic01Icon,
+							size: 24
+						})
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { ConversationItem, ConversationList, FormattedMessage, MessageBubble, MessageInput, MessageList, MessageView, MessageViewContent, MessageViewEmpty, MessageViewHeader, WhatsappDashboard, cn, useWhatsappDashboard };

package/dist/tailwind.css

@@ -0,0 +1,11 @@
+/*
+ * Tailwind CSS source manifest for @better-zap/react components.
+ *
+ * Consuming apps should import this file (e.g. `@import "@better-zap/react/tailwind.css"`)
+ * so that Tailwind's JIT scanner picks up every utility class used by the components.
+ *
+ * The `@source "."` directive tells Tailwind to scan all recognised file types
+ * in this directory, and the path resolves relative to THIS file — so it works
+ * regardless of where the consuming app lives in the monorepo.
+ */
+@source ".";

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@better-zap/react",
+  "version": "0.0.1",
+  "description": "React components for Better Zap.",
+  "license": "ISC",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./tailwind.css": "./dist/tailwind.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./dist/tailwind.css"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@hugeicons/core-free-icons": "^3.1.1",
+    "@hugeicons/react": "^1.1.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.0",
+    "better-zap": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsdown": "^0.21.2",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests"
+  }
+}