@better-zap/react 0.0.4 → 0.2.0

package/dist/index.cjs

@@ -1,663 +0,0 @@
-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");
-let better_zap = require("better-zap");
-//#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/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/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/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/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/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 [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");
-	};
-	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)(ConversationFilterChips, {
-				value: filter,
-				onValueChange: setFilter,
-				unreadCount: unreadConversationsCount
-			}),
-			/* @__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/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);
-	const textareaRef = (0, react.useRef)(null);
-	const isContextWindowOpen = (conversation ? (0, better_zap.resolveConversationFreeformMessageWindow)(conversation, messages) : {
-		isOpen: contextWindowOpen,
-		lastIncomingMessageAt: null,
-		expiresAt: null
-	}).isOpen;
-	const isDisabled = disabled || isSending || !isContextWindowOpen;
-	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 (!isContextWindowOpen) 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.ConversationFilterChips = ConversationFilterChips;
-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.getDisplayDate = getDisplayDate;
-exports.useWhatsappDashboard = useWhatsappDashboard;