@better-zap/react 0.0.1

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026 Better Zap
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @better-zap/react
+
+React UI components for Better Zap conversations and message views.

package/dist/index.cjs

@@ -0,0 +1,614 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react);
+let clsx = require("clsx");
+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 class_variance_authority = require("class-variance-authority");
+//#region src/react/utils.ts
+function cn(...inputs) {
+	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+}
+//#endregion
+//#region src/react/whatsapp-dashboard.tsx
+const MOBILE_BREAKPOINT = 1024;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = (0, react.useState)(false);
+	(0, react.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 = (0, react.createContext)(null);
+function useWhatsappDashboard() {
+	const ctx = (0, react.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] = (0, react.useState)(defaultMobileView);
+	const handleSetMobileView = (0, react.useCallback)((view) => {
+		setMobileView(view);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WhatsappDashboardContext.Provider, {
+		value: {
+			isMobile,
+			mobileView,
+			setMobileView: handleSetMobileView
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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 = (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",
+	failed: "bg-red-100 text-red-900 rounded-tr-none border border-red-200"
+} } });
+const statusVariants = (0, class_variance_authority.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("flex w-full mb-1", isIncoming ? "justify-start" : "justify-end", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: bubbleVariants({ variant: bubbleVariant }),
+			children: [
+				label && !isIncoming && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "mb-1 block text-xs font-medium opacity-70",
+					children: label
+				}),
+				templateName && !label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mb-1 border-b border-black/5 pb-1",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-[11px] font-medium opacity-70",
+						children: ["📋 ", templateName]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-[14.5px] leading-normal whitespace-pre-wrap break-words select-text",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormattedMessage, { text: displayContent }),
+						/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-[11px] opacity-60 leading-none whitespace-nowrap",
+								children: timestamp
+							}), !isIncoming && status && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: statusVariants({ variant: statusVariant }),
+								children: status === "read" || status === "delivered" ? "✓✓" : isFailed ? "✕" : "✓"
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "clear-both" })
+					]
+				})
+			]
+		})
+	});
+}
+function FormattedMessage({ text }) {
+	if (!text) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: text.split(/(\n)/g).map((line, lineIndex) => {
+		if (line === "\n") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}, lineIndex);
+		if (!line) return null;
+		const parts = line.split(/(```[\s\S]*?```|`[^`]+`|\*[^\s*](?:[^*]*[^\s*])?\*|_[^\s_](?:[^_]*[^\s_])?_|~[^\s~](?:[^~]*[^\s~])?~|https?:\/\/[^\s]+)/g);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: parts.map((part, index) => {
+			if (!part) return null;
+			if (part.startsWith("```") && part.endsWith("```")) return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("strong", {
+				className: "font-bold",
+				children: part.slice(1, -1)
+			}, index);
+			if (part.startsWith("_") && part.endsWith("_")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("em", {
+				className: "italic",
+				children: part.slice(1, -1)
+			}, index);
+			if (part.startsWith("~") && part.endsWith("~")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("del", {
+				className: "text-gray-500 line-through",
+				children: part.slice(1, -1)
+			}, index);
+			if (part.match(/^https?:\/\/[^\s]+$/)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				href: part,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: "text-[#027eb5] hover:underline",
+				children: part
+			}, index);
+			return /* @__PURE__ */ (0, react_jsx_runtime.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.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,
+			...props
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("relative flex flex-1 flex-col bg-[#efeae2]", className),
+		style: isVisible ? void 0 : { 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
+		})]
+	});
+}
+function MessageViewHeader({ conversation, onBack, onInfoClick, className }) {
+	const { isMobile, setMobileView } = useWhatsappDashboard();
+	const handleBack = () => {
+		setMobileView("list");
+		onBack?.();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("flex h-16 shrink-0 items-center justify-between border-b bg-[#f0f2f5] px-4 z-20", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-3",
+			children: [isMobile && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: _hugeicons_core_free_icons.ArrowLeft02Icon,
+					size: 20
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: "text-[15px] font-medium text-[#111b21] leading-tight",
+					children: conversation.contactName || conversation.phone
+				}), conversation.contactName && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-sm text-[#667781] leading-tight",
+					children: conversation.phone
+				})]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.InformationCircleIcon,
+				size: 20
+			})
+		})]
+	});
+}
+const SCROLL_TOP_THRESHOLD = 50;
+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
+	});
+}
+function MessageList({ messages, renderMessageLabel, className }) {
+	const messageGroups = (0, react.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__ */ (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))
+	});
+}
+function DateDivider({ date }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "sticky top-0 z-10 flex justify-center w-full py-2 pointer-events-none",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("relative flex flex-1 flex-col items-center justify-center bg-[#f8f9fa] text-[#667781] p-6", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mb-8 flex h-48 w-48 items-center justify-center rounded-full bg-[#f0f2f5] shadow-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: _hugeicons_core_free_icons.Message01Icon,
+					size: 80,
+					className: "text-[#bbc5cb]"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+				className: "mb-3 text-2xl font-semibold text-[#41525d]",
+				children: "Better Zap"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "max-w-sm space-y-3 text-center",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "text-[15px] leading-relaxed",
+					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 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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("border-b border-[#e9edef] shrink-0 p-2", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.Search01Icon,
+				size: 18,
+				className: "text-[#54656f] shrink-0"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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] = (0, react.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__ */ (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))
+		})]
+	});
+}
+function ConversationItem({ conversation, isSelected, onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.UserIcon,
+				size: 28,
+				className: "text-[#aebac1] group-data-[selected=true]:text-white/80"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-between items-baseline mb-0.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[17px] font-normal text-[#111b21] truncate group-data-[selected=true]:text-white",
+					children: conversation.contactName || formatPhone(conversation.phone)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-[#667781] shrink-0 group-data-[selected=true]:text-white/90",
+					children: formatTime(conversation.lastMessageAt)
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex justify-between items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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] = (0, react.useState)("");
+	const [isSending, setIsSending] = (0, react.useState)(false);
+	const textareaRef = (0, react.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();
+		}
+	};
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("w-full flex flex-col p-4 z-10 shrink-0", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.Clock01Icon,
+				size: 20,
+				className: "text-[#92400e] shrink-0"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("w-full flex flex-col p-4 z-10 shrink-0", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-1 text-[#54656f] shrink-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": "Emojis",
+						className: "p-2 rounded-full hover:bg-black/5 transition-colors",
+						title: "Emojis",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+							icon: _hugeicons_core_free_icons.SmileIcon,
+							size: 24
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": "Anexar arquivo",
+						className: "p-2 rounded-full hover:bg-black/5 transition-colors",
+						title: "Anexar",
+						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-[42px] py-3 px-2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex items-center pr-1 shrink-0",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+							icon: _hugeicons_core_free_icons.Sent02Icon,
+							size: 24
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+							icon: _hugeicons_core_free_icons.Mic01Icon,
+							size: 24
+						})
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+exports.ConversationItem = ConversationItem;
+exports.ConversationList = ConversationList;
+exports.FormattedMessage = FormattedMessage;
+exports.MessageBubble = MessageBubble;
+exports.MessageInput = MessageInput;
+exports.MessageList = MessageList;
+exports.MessageView = MessageView;
+exports.MessageViewContent = MessageViewContent;
+exports.MessageViewEmpty = MessageViewEmpty;
+exports.MessageViewHeader = MessageViewHeader;
+exports.WhatsappDashboard = WhatsappDashboard;
+exports.cn = cn;
+exports.useWhatsappDashboard = useWhatsappDashboard;