@greatapps/greatchat-ui 0.1.0 → 0.1.2

package/dist/index.js

@@ -101,8 +101,1479 @@ import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// src/utils/group-messages.ts
+function groupMessagesByDate(messages) {
+  const groups = [];
+  let currentDate = "";
+  for (const msg of messages) {
+    const dateStr = msg.datetime_add.split("T")[0];
+    if (dateStr !== currentDate) {
+      currentDate = dateStr;
+      groups.push({ date: msg.datetime_add, messages: [] });
+    }
+    groups[groups.length - 1].messages.push(msg);
+  }
+  return groups;
+}
+
+// src/utils/format-date.ts
+import { format, isToday, isYesterday } from "date-fns";
+import { ptBR } from "date-fns/locale";
+function formatDateGroup(dateStr) {
+  const date = new Date(dateStr);
+  if (isToday(date)) return "Hoje";
+  if (isYesterday(date)) return "Ontem";
+  return format(date, "dd 'de' MMMM", { locale: ptBR });
+}
+function formatMessageTime(dateStr) {
+  return format(new Date(dateStr), "HH:mm");
+}
+
+// src/hooks/types.ts
+import { useMemo } from "react";
+var DEFAULT_INBOX_POLLING = 5e3;
+var DEFAULT_MESSAGES_POLLING = 3e3;
+var DEFAULT_CHANNEL_STATUS_POLLING = 5e3;
+var DEFAULT_QR_POLLING = 2e3;
+function useGchatClient(config) {
+  return useMemo(
+    () => createGchatClient({
+      baseUrl: config.baseUrl,
+      token: config.token,
+      language: config.language,
+      idWl: config.idWl
+    }),
+    [config.baseUrl, config.token, config.language, config.idWl]
+  );
+}
+
+// src/hooks/use-inboxes.ts
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+function useInboxes(config, statusFilter, pollingInterval) {
+  const client = useGchatClient(config);
+  return useQuery({
+    queryKey: ["greatchat", "inboxes", config.accountId, statusFilter],
+    queryFn: () => {
+      const params = {};
+      if (statusFilter && statusFilter !== "all") {
+        params.status = statusFilter;
+      }
+      return client.listInboxes(config.accountId, params);
+    },
+    enabled: !!config.accountId && !!config.token,
+    refetchInterval: pollingInterval ?? DEFAULT_INBOX_POLLING,
+    select: (res) => res.data || []
+  });
+}
+function useInbox(config, id) {
+  const client = useGchatClient(config);
+  return useQuery({
+    queryKey: ["greatchat", "inbox", config.accountId, id],
+    queryFn: () => client.getInbox(config.accountId, id),
+    enabled: !!config.accountId && !!config.token && !!id,
+    select: (res) => {
+      const d = res.data;
+      return Array.isArray(d) ? d[0] : d;
+    }
+  });
+}
+function useInboxStats(config, pollingInterval) {
+  const client = useGchatClient(config);
+  return useQuery({
+    queryKey: ["greatchat", "inbox-stats", config.accountId],
+    queryFn: () => client.getInboxStats(config.accountId),
+    enabled: !!config.accountId && !!config.token,
+    refetchInterval: pollingInterval ?? DEFAULT_INBOX_POLLING,
+    select: (res) => {
+      const d = res.data;
+      return Array.isArray(d) ? d[0] : d;
+    }
+  });
+}
+function useCreateInbox(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (body) => client.createInbox(config.accountId, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"]
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inbox-stats"]
+      });
+    }
+  });
+}
+function useUpdateInbox(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      body
+    }) => client.updateInbox(config.accountId, id, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"]
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inbox-stats"]
+      });
+    }
+  });
+}
+function useDeleteInbox(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id) => client.deleteInbox(config.accountId, id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"]
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inbox-stats"]
+      });
+    }
+  });
+}
+
+// src/hooks/use-inbox-messages.ts
+import { useMemo as useMemo2, useSyncExternalStore } from "react";
+import { useQuery as useQuery2, useMutation as useMutation2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+var optimisticStore = /* @__PURE__ */ new Map();
+var nextOptimisticId = -1;
+var storeVersion = 0;
+var listeners = /* @__PURE__ */ new Set();
+function subscribeStore(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getStoreVersion() {
+  return storeVersion;
+}
+function storeKey(accountId, idInbox) {
+  return `${accountId}:${idInbox}`;
+}
+function getOptimistic(accountId, idInbox) {
+  return optimisticStore.get(storeKey(accountId, idInbox)) || [];
+}
+function setOptimistic(accountId, idInbox, msgs) {
+  const key = storeKey(accountId, idInbox);
+  if (msgs.length === 0) {
+    optimisticStore.delete(key);
+  } else {
+    optimisticStore.set(key, msgs);
+  }
+  storeVersion++;
+  listeners.forEach((fn) => fn());
+}
+function cleanupOptimistic(accountId, idInbox, msgs) {
+  const key = storeKey(accountId, idInbox);
+  if (msgs.length === 0) {
+    optimisticStore.delete(key);
+  } else {
+    optimisticStore.set(key, msgs);
+  }
+}
+function useInboxMessages(config, idInbox, pollingInterval) {
+  const client = useGchatClient(config);
+  const optimisticVersion = useSyncExternalStore(
+    subscribeStore,
+    getStoreVersion,
+    getStoreVersion
+  );
+  const query = useQuery2({
+    queryKey: ["greatchat", "inbox-messages", config.accountId, idInbox],
+    queryFn: () => client.listInboxMessages(config.accountId, {
+      id_inbox: String(idInbox),
+      sort: "datetime_add:asc",
+      limit: "100"
+    }),
+    enabled: !!config.accountId && !!config.token && !!idInbox,
+    refetchInterval: pollingInterval ?? DEFAULT_MESSAGES_POLLING,
+    select: (res) => res.data || []
+  });
+  const messages = useMemo2(() => {
+    const serverMessages = query.data || [];
+    if (!config.accountId || !idInbox) return serverMessages;
+    const optimistic = getOptimistic(config.accountId, idInbox);
+    if (!optimistic.length) return serverMessages;
+    const overrides = /* @__PURE__ */ new Map();
+    const newOptimistic = [];
+    for (const om of optimistic) {
+      if (om.id > 0) {
+        overrides.set(om.id, om);
+      } else {
+        newOptimistic.push(om);
+      }
+    }
+    const merged = overrides.size > 0 ? serverMessages.map((sm) => overrides.get(sm.id) ?? sm) : serverMessages;
+    if (overrides.size > 0) {
+      for (const [id] of overrides) {
+        const sm = serverMessages.find((s) => s.id === id);
+        if (sm && sm.status !== "failed") {
+          overrides.delete(id);
+        }
+      }
+    }
+    const stillNeeded = [];
+    const claimed = /* @__PURE__ */ new Set();
+    for (const om of newOptimistic) {
+      if (om.status === "failed") {
+        stillNeeded.push(om);
+        continue;
+      }
+      const matchIdx = merged.findIndex(
+        (sm, i) => !claimed.has(i) && sm.direction === "outbound" && sm.content === om.content && sm.content_type === om.content_type && sm.source === om.source
+      );
+      if (matchIdx >= 0) {
+        claimed.add(matchIdx);
+      } else {
+        stillNeeded.push(om);
+      }
+    }
+    const allKept = [...Array.from(overrides.values()), ...stillNeeded];
+    if (allKept.length !== optimistic.length) {
+      cleanupOptimistic(config.accountId, idInbox, allKept);
+    }
+    const result = [...merged, ...stillNeeded];
+    result.sort(
+      (a, b) => new Date(a.datetime_add).getTime() - new Date(b.datetime_add).getTime()
+    );
+    return result;
+  }, [query.data, config.accountId, idInbox, optimisticVersion]);
+  return { ...query, data: messages };
+}
+function useSendMessage(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient2();
+  return useMutation2({
+    mutationFn: async ({
+      idInbox,
+      content
+    }) => {
+      const result = await client.sendMessage(config.accountId, {
+        id_inbox: idInbox,
+        content,
+        content_type: "text",
+        source: "agent",
+        direction: "outbound"
+      });
+      if (result.status === 0) {
+        throw new Error(result.message || "Erro desconhecido ao enviar");
+      }
+      return result;
+    },
+    onMutate: (variables) => {
+      const msg = {
+        id: nextOptimisticId--,
+        id_account: config.accountId,
+        id_inbox: variables.idInbox,
+        id_contact: null,
+        direction: "outbound",
+        content: variables.content,
+        content_type: "text",
+        content_url: null,
+        metadata: null,
+        external_id: null,
+        status: "pending",
+        source: "agent",
+        is_private: false,
+        datetime_add: (/* @__PURE__ */ new Date()).toISOString(),
+        datetime_alt: null
+      };
+      const current = getOptimistic(config.accountId, variables.idInbox);
+      setOptimistic(config.accountId, variables.idInbox, [...current, msg]);
+      return { optimisticMsg: msg };
+    },
+    onError: (error, variables, context) => {
+      if (!context) return;
+      const { optimisticMsg } = context;
+      const current = getOptimistic(config.accountId, variables.idInbox);
+      setOptimistic(
+        config.accountId,
+        variables.idInbox,
+        current.map(
+          (m) => m.id === optimisticMsg.id ? { ...m, status: "failed", _error: error.message } : m
+        )
+      );
+    },
+    onSuccess: (_result, variables, context) => {
+      if (!context) return;
+      const { optimisticMsg } = context;
+      const current = getOptimistic(config.accountId, variables.idInbox);
+      setOptimistic(
+        config.accountId,
+        variables.idInbox,
+        current.filter((m) => m.id !== optimisticMsg.id)
+      );
+      queryClient.invalidateQueries({
+        queryKey: [
+          "greatchat",
+          "inbox-messages",
+          config.accountId,
+          variables.idInbox
+        ]
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"]
+      });
+    }
+  });
+}
+function useRetryMessage(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient2();
+  return async (message) => {
+    if (!config.accountId || !config.token || !message.content) return;
+    const current = getOptimistic(config.accountId, message.id_inbox);
+    setOptimistic(config.accountId, message.id_inbox, [
+      ...current.filter((m) => m.id !== message.id),
+      {
+        ...message,
+        status: "pending",
+        _error: void 0,
+        datetime_add: (/* @__PURE__ */ new Date()).toISOString()
+      }
+    ]);
+    try {
+      const result = await client.sendMessage(config.accountId, {
+        id_inbox: message.id_inbox,
+        content: message.content,
+        content_type: message.content_type,
+        source: "agent",
+        direction: "outbound"
+      });
+      if (result.status === 0) {
+        throw new Error(result.message || "Erro desconhecido ao enviar");
+      }
+      const after = getOptimistic(config.accountId, message.id_inbox);
+      setOptimistic(
+        config.accountId,
+        message.id_inbox,
+        after.filter((m) => m.id !== message.id)
+      );
+      queryClient.invalidateQueries({
+        queryKey: [
+          "greatchat",
+          "inbox-messages",
+          config.accountId,
+          message.id_inbox
+        ]
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"]
+      });
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Erro ao enviar mensagem";
+      const after = getOptimistic(config.accountId, message.id_inbox);
+      setOptimistic(
+        config.accountId,
+        message.id_inbox,
+        after.map(
+          (m) => m.id === message.id ? { ...m, status: "failed", _error: errorMessage } : m
+        )
+      );
+    }
+  };
+}
+function useRevokeMessage(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient2();
+  return useMutation2({
+    mutationFn: async ({ id }) => client.revokeMessage(config.accountId, id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "greatchat",
+          "inbox-messages",
+          config.accountId,
+          variables.idInbox
+        ]
+      });
+    }
+  });
+}
+function useEditMessage(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient2();
+  return useMutation2({
+    mutationFn: async ({
+      id,
+      content
+    }) => client.editMessage(config.accountId, id, { content }),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "greatchat",
+          "inbox-messages",
+          config.accountId,
+          variables.idInbox
+        ]
+      });
+    }
+  });
+}
+
+// src/hooks/use-contacts.ts
+import { useQuery as useQuery3, useMutation as useMutation3, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
+function useContacts(config, params) {
+  const client = useGchatClient(config);
+  return useQuery3({
+    queryKey: ["greatchat", "contacts", config.accountId, params],
+    queryFn: () => client.listContacts(config.accountId, params),
+    enabled: !!config.accountId && !!config.token,
+    select: (res) => ({ data: res.data || [], total: res.total || 0 })
+  });
+}
+function useGetContact(config, contactId) {
+  const client = useGchatClient(config);
+  return useQuery3({
+    queryKey: ["greatchat", "contact", config.accountId, contactId],
+    queryFn: () => client.getContact(config.accountId, contactId),
+    enabled: !!config.accountId && !!config.token && !!contactId,
+    select: (res) => {
+      const d = res.data;
+      return Array.isArray(d) ? d[0] : d;
+    }
+  });
+}
+function useCreateContact(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient3();
+  return useMutation3({
+    mutationFn: (body) => client.createContact(config.accountId, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "contacts"]
+      });
+    }
+  });
+}
+function useUpdateContact(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient3();
+  return useMutation3({
+    mutationFn: ({
+      id,
+      body
+    }) => client.updateContact(config.accountId, id, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "contacts"]
+      });
+    }
+  });
+}
+function useDeleteContact(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient3();
+  return useMutation3({
+    mutationFn: (id) => client.deleteContact(config.accountId, id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "contacts"]
+      });
+    }
+  });
+}
+
+// src/hooks/use-channels.ts
+import { useQuery as useQuery4, useMutation as useMutation4, useQueryClient as useQueryClient4 } from "@tanstack/react-query";
+function useChannels(config) {
+  const client = useGchatClient(config);
+  return useQuery4({
+    queryKey: ["greatchat", "channels", config.accountId],
+    queryFn: () => client.listChannels(config.accountId),
+    enabled: !!config.accountId && !!config.token,
+    select: (res) => res.data || []
+  });
+}
+function useChannelWhatsappStatus(config, channelId, enabled = true, pollingInterval) {
+  const client = useGchatClient(config);
+  return useQuery4({
+    queryKey: ["greatchat", "channel-status", config.accountId, channelId],
+    queryFn: () => client.getChannelWhatsappStatus(config.accountId, channelId),
+    enabled: !!config.accountId && !!config.token && !!channelId && enabled,
+    refetchInterval: pollingInterval ?? DEFAULT_CHANNEL_STATUS_POLLING,
+    select: (res) => {
+      const d = res.data;
+      return Array.isArray(d) ? d[0] : d;
+    }
+  });
+}
+function useChannelQR(config, channelId, enabled = false, pollingInterval) {
+  const client = useGchatClient(config);
+  return useQuery4({
+    queryKey: ["greatchat", "channel-qr", config.accountId, channelId],
+    queryFn: () => client.getChannelQR(config.accountId, channelId),
+    enabled: !!config.accountId && !!config.token && !!channelId && enabled,
+    refetchInterval: pollingInterval ?? DEFAULT_QR_POLLING
+  });
+}
+function useCreateChannel(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient4();
+  return useMutation4({
+    mutationFn: (body) => client.createChannel(config.accountId, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"]
+      });
+    }
+  });
+}
+function useUpdateChannel(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient4();
+  return useMutation4({
+    mutationFn: ({
+      id,
+      body
+    }) => client.updateChannel(config.accountId, id, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"]
+      });
+    }
+  });
+}
+function useDeleteChannel(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient4();
+  return useMutation4({
+    mutationFn: (channelId) => client.deleteChannel(config.accountId, channelId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"]
+      });
+    }
+  });
+}
+function useConnectChannel(config) {
+  const client = useGchatClient(config);
+  return useMutation4({
+    mutationFn: (channelId) => client.connectChannel(config.accountId, channelId)
+  });
+}
+function useDisconnectChannel(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient4();
+  return useMutation4({
+    mutationFn: (channelId) => client.disconnectChannel(config.accountId, channelId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channel-status"]
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"]
+      });
+    }
+  });
+}
+function useLogoutChannel(config) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient4();
+  return useMutation4({
+    mutationFn: (channelId) => client.logoutChannel(config.accountId, channelId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channel-status"]
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"]
+      });
+    }
+  });
+}
+
+// src/components/chat-view.tsx
+import { useRef as useRef2, useEffect } from "react";
+
+// src/components/message-bubble.tsx
+import { useState } from "react";
+import {
+  Check as Check2,
+  CheckCheck,
+  AlertCircle,
+  Clock,
+  Video,
+  File,
+  MapPin,
+  Headphones,
+  RotateCcw,
+  MoreHorizontal,
+  Trash2,
+  Pencil,
+  Ban
+} from "lucide-react";
+
+// src/components/ui/dropdown-menu.tsx
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { Check, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      align,
+      className: cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 z-50 overflow-x-hidden overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/alert-dialog.tsx
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+
+// src/components/ui/button.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border border-transparent text-sm font-medium focus-visible:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:bg-destructive/20 text-destructive",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-2.5",
+        xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-2.5",
+        lg: "h-10 gap-1.5 px-2.5",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/alert-dialog.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AlertDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    AlertDialogPrimitive.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx3(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx3(
+      AlertDialogPrimitive.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        className: cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 sm:max-w-lg fixed top-1/2 left-1/2 z-50 grid w-full max-w-xs -translate-x-1/2 -translate-y-1/2 outline-none",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("grid gap-1.5 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    AlertDialogPrimitive.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-medium", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    AlertDialogPrimitive.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx3(
+    AlertDialogPrimitive.Action,
+    {
+      "data-slot": "alert-dialog-action",
+      className: cn(className),
+      ...props
+    }
+  ) });
+}
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx3(
+    AlertDialogPrimitive.Cancel,
+    {
+      "data-slot": "alert-dialog-cancel",
+      className: cn(className),
+      ...props
+    }
+  ) });
+}
+
+// src/components/ui/textarea.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/message-bubble.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var statusIcons = {
+  pending: /* @__PURE__ */ jsx5(Clock, { className: "h-3 w-3 animate-pulse" }),
+  sent: /* @__PURE__ */ jsx5(Check2, { className: "h-3 w-3" }),
+  delivered: /* @__PURE__ */ jsx5(CheckCheck, { className: "h-3 w-3" }),
+  read: /* @__PURE__ */ jsx5(CheckCheck, { className: "h-3 w-3 text-blue-500" }),
+  failed: /* @__PURE__ */ jsx5(AlertCircle, { className: "h-3 w-3 text-destructive" })
+};
+function parseMetadata(metadata) {
+  if (!metadata) return {};
+  try {
+    return JSON.parse(metadata);
+  } catch {
+    return {};
+  }
+}
+function MediaContent({ message }) {
+  switch (message.content_type) {
+    case "image":
+      return /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+        message.content_url && /* @__PURE__ */ jsx5(
+          "img",
+          {
+            src: message.content_url,
+            alt: "Imagem",
+            className: "max-w-[240px] rounded-md"
+          }
+        ),
+        message.content && /* @__PURE__ */ jsx5("p", { className: "text-sm", children: message.content })
+      ] });
+    case "audio":
+      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx5(Headphones, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx5("span", { className: "text-sm", children: "Mensagem de \xE1udio" })
+      ] });
+    case "video":
+      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx5(Video, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx5("span", { className: "text-sm", children: "V\xEDdeo" }),
+        message.content && /* @__PURE__ */ jsx5("p", { className: "text-sm", children: message.content })
+      ] });
+    case "document": {
+      const meta = parseMetadata(message.metadata);
+      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx5(File, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx5("span", { className: "text-sm", children: meta.filename || "Documento" })
+      ] });
+    }
+    case "location":
+      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx5(MapPin, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx5("span", { className: "text-sm", children: "Localiza\xE7\xE3o" })
+      ] });
+    default:
+      return null;
+  }
+}
+function MessageBubble({
+  message,
+  onRetry,
+  onRevoke,
+  onEdit,
+  renderActions
+}) {
+  const [showRevokeDialog, setShowRevokeDialog] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editContent, setEditContent] = useState(message.content || "");
+  const isOutbound = message.direction === "outbound";
+  const isPending = message.status === "pending";
+  const isFailed = message.status === "failed";
+  const time = formatMessageTime(message.datetime_add);
+  const meta = parseMetadata(message.metadata);
+  const isRevoked = meta.revoked === true;
+  const isEdited = meta.edited === true;
+  const agentLabel = isOutbound && message.source !== "contact" ? meta.agent_name || (message.source === "bot" ? "Bot" : "Agente") : null;
+  const canAct = isOutbound && message.id > 0 && !isPending && !isFailed && !isRevoked && !!message.external_id;
+  const canEdit = canAct && message.content_type === "text";
+  function handleSaveEdit() {
+    const trimmed = editContent.trim();
+    if (!trimmed || trimmed === message.content) {
+      setEditing(false);
+      return;
+    }
+    onEdit?.(message, trimmed);
+    setEditing(false);
+  }
+  if (isRevoked) {
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn("flex", isOutbound ? "justify-end" : "justify-start"),
+        children: /* @__PURE__ */ jsx5("div", { className: "max-w-[75%]", children: /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: cn(
+              "rounded-lg px-3 py-2",
+              isOutbound ? "bg-primary/40" : "bg-muted/60"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx5(
+                  Ban,
+                  {
+                    className: cn(
+                      "h-3.5 w-3.5",
+                      isOutbound ? "text-primary-foreground/50" : "text-muted-foreground"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "p",
+                  {
+                    className: cn(
+                      "text-sm italic",
+                      isOutbound ? "text-primary-foreground/50" : "text-muted-foreground"
+                    ),
+                    children: "Mensagem apagada"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  className: cn(
+                    "mt-1 flex items-center justify-end gap-1",
+                    isOutbound ? "text-primary-foreground/40" : "text-muted-foreground/60"
+                  ),
+                  children: /* @__PURE__ */ jsx5("span", { className: "text-[10px]", children: time })
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "flex group",
+        isOutbound ? "justify-end" : "justify-start"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "max-w-[75%] relative", children: [
+          canAct && /* @__PURE__ */ jsx5("div", { className: "absolute -top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity z-10", children: /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx5(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx5("button", { className: "h-6 w-6 rounded-full bg-background/80 shadow-sm flex items-center justify-center hover:bg-background", children: /* @__PURE__ */ jsx5(MoreHorizontal, { className: "h-3.5 w-3.5 text-muted-foreground" }) }) }),
+            /* @__PURE__ */ jsxs3(DropdownMenuContent, { align: "end", className: "w-40", children: [
+              canEdit && /* @__PURE__ */ jsxs3(
+                DropdownMenuItem,
+                {
+                  onSelect: (e) => {
+                    e.preventDefault();
+                    setEditing(true);
+                    setEditContent(message.content || "");
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(Pencil, { className: "h-4 w-4 mr-2" }),
+                    "Editar"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                DropdownMenuItem,
+                {
+                  onSelect: (e) => {
+                    e.preventDefault();
+                    setShowRevokeDialog(true);
+                  },
+                  className: "text-destructive focus:text-destructive",
+                  children: [
+                    /* @__PURE__ */ jsx5(Trash2, { className: "h-4 w-4 mr-2" }),
+                    "Apagar para todos"
+                  ]
+                }
+              )
+            ] })
+          ] }) }),
+          renderActions?.(message),
+          /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: cn(
+                "rounded-lg px-3 py-2",
+                isOutbound ? "bg-primary text-primary-foreground" : "bg-muted",
+                isPending && "opacity-70",
+                isFailed && "bg-destructive/10 border border-destructive/30"
+              ),
+              children: [
+                agentLabel && /* @__PURE__ */ jsx5(
+                  "p",
+                  {
+                    className: cn(
+                      "mb-0.5 text-[10px] font-medium",
+                      isFailed ? "text-destructive/70" : isOutbound ? "text-primary-foreground/70" : "text-muted-foreground"
+                    ),
+                    children: agentLabel
+                  }
+                ),
+                editing ? /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx5(
+                    Textarea,
+                    {
+                      value: editContent,
+                      onChange: (e) => setEditContent(e.target.value),
+                      rows: 2,
+                      className: "min-h-[36px] max-h-[120px] resize-none bg-background text-foreground text-sm",
+                      autoFocus: true,
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" && !e.shiftKey) {
+                          e.preventDefault();
+                          handleSaveEdit();
+                        }
+                        if (e.key === "Escape") {
+                          setEditing(false);
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-1.5", children: [
+                    /* @__PURE__ */ jsx5(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "ghost",
+                        className: "h-6 text-xs px-2",
+                        onClick: () => setEditing(false),
+                        children: "Cancelar"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5(
+                      Button,
+                      {
+                        size: "sm",
+                        className: "h-6 text-xs px-2",
+                        onClick: handleSaveEdit,
+                        disabled: !editContent.trim() || editContent.trim() === message.content,
+                        children: "Salvar"
+                      }
+                    )
+                  ] })
+                ] }) : message.content_type === "text" ? /* @__PURE__ */ jsx5(
+                  "p",
+                  {
+                    className: cn(
+                      "text-sm whitespace-pre-wrap break-words",
+                      isFailed && "text-foreground"
+                    ),
+                    children: message.content
+                  }
+                ) : /* @__PURE__ */ jsx5(MediaContent, { message }),
+                !editing && /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    className: cn(
+                      "mt-1 flex items-center justify-end gap-1",
+                      isFailed ? "text-destructive" : isOutbound ? "text-primary-foreground/60" : "text-muted-foreground"
+                    ),
+                    children: [
+                      isEdited && /* @__PURE__ */ jsx5("span", { className: "text-[10px] italic", children: "editada" }),
+                      /* @__PURE__ */ jsx5("span", { className: "text-[10px]", children: time }),
+                      isOutbound && statusIcons[message.status]
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          isFailed && /* @__PURE__ */ jsxs3("div", { className: "mt-1 flex items-center gap-1.5 justify-end px-1", children: [
+            /* @__PURE__ */ jsx5(AlertCircle, { className: "h-3 w-3 shrink-0 text-destructive" }),
+            /* @__PURE__ */ jsx5("span", { className: "text-[11px] text-destructive", children: message._error || "Erro ao enviar" }),
+            onRetry && /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                onClick: () => onRetry(message),
+                className: "inline-flex items-center gap-0.5 text-[11px] text-destructive font-medium hover:text-destructive/80 hover:underline cursor-pointer ml-1",
+                children: [
+                  /* @__PURE__ */ jsx5(RotateCcw, { className: "h-3 w-3" }),
+                  "Reenviar"
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5(AlertDialog, { open: showRevokeDialog, onOpenChange: setShowRevokeDialog, children: /* @__PURE__ */ jsxs3(AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxs3(AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsx5(AlertDialogTitle, { children: "Apagar mensagem?" }),
+            /* @__PURE__ */ jsx5(AlertDialogDescription, { children: 'A mensagem ser\xE1 apagada para todos no WhatsApp. Ela continuar\xE1 vis\xEDvel aqui como "mensagem apagada".' })
+          ] }),
+          /* @__PURE__ */ jsxs3(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx5(AlertDialogCancel, { children: "Cancelar" }),
+            /* @__PURE__ */ jsx5(
+              AlertDialogAction,
+              {
+                className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                onClick: () => onRevoke?.(message),
+                children: "Apagar para todos"
+              }
+            )
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/components/chat-input.tsx
+import { useState as useState2, useRef } from "react";
+import { Send } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChatInput({ onSend, disabled }) {
+  const [content, setContent] = useState2("");
+  const textareaRef = useRef(null);
+  function handleSend() {
+    const text = content.trim();
+    if (!text || disabled) return;
+    setContent("");
+    onSend(text);
+    textareaRef.current?.focus();
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+  return /* @__PURE__ */ jsx6("div", { className: "border-t p-3", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
+    /* @__PURE__ */ jsx6(
+      Textarea,
+      {
+        ref: textareaRef,
+        placeholder: "Digite uma mensagem...",
+        value: content,
+        onChange: (e) => setContent(e.target.value),
+        onKeyDown: handleKeyDown,
+        rows: 1,
+        className: "min-h-[40px] max-h-[120px] resize-none"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        size: "icon",
+        onClick: handleSend,
+        disabled: !content.trim() || disabled,
+        className: "shrink-0",
+        children: /* @__PURE__ */ jsx6(Send, { className: "h-4 w-4" })
+      }
+    )
+  ] }) });
+}
+
+// src/components/ui/skeleton.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("bg-muted rounded-md animate-pulse", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/select.tsx
+import { Select as SelectPrimitive } from "radix-ui";
+import { Check as Check3, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(ChevronsUpDown, { className: "text-muted-foreground size-4 pointer-events-none" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) overflow-x-hidden overflow-y-auto",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx8(SelectPrimitive.Viewport, { children }),
+        /* @__PURE__ */ jsx8(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx8("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(Check3, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx8(ChevronUp, {})
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx8(ChevronDown, {})
+    }
+  );
+}
+
+// src/components/chat-view.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChatView({
+  messages,
+  isLoading,
+  inboxStatus,
+  onStatusChange,
+  onSend,
+  onRetry,
+  onRevoke,
+  onEdit,
+  sendDisabled,
+  renderHeader,
+  renderStatusDropdown
+}) {
+  const scrollRef = useRef2(null);
+  const prevMessageCount = useRef2(0);
+  useEffect(() => {
+    if (messages && messages.length > prevMessageCount.current) {
+      const el = scrollRef.current;
+      if (el) {
+        setTimeout(() => {
+          el.scrollTop = el.scrollHeight;
+        }, 50);
+      }
+    }
+    prevMessageCount.current = messages?.length || 0;
+  }, [messages]);
+  const groups = messages ? groupMessagesByDate(messages) : [];
+  return /* @__PURE__ */ jsxs6("div", { className: "flex h-full flex-col", children: [
+    renderHeader !== void 0 ? renderHeader : /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+      /* @__PURE__ */ jsx9("div", { className: "flex-1" }),
+      renderStatusDropdown !== void 0 ? renderStatusDropdown : onStatusChange ? /* @__PURE__ */ jsxs6(
+        Select,
+        {
+          value: inboxStatus,
+          onValueChange: onStatusChange,
+          children: [
+            /* @__PURE__ */ jsx9(SelectTrigger, { className: "w-[130px] h-8 text-xs", children: /* @__PURE__ */ jsx9(SelectValue, { placeholder: "Status" }) }),
+            /* @__PURE__ */ jsxs6(SelectContent, { children: [
+              /* @__PURE__ */ jsx9(SelectItem, { value: "open", children: "Aberta" }),
+              /* @__PURE__ */ jsx9(SelectItem, { value: "pending", children: "Pendente" }),
+              /* @__PURE__ */ jsx9(SelectItem, { value: "resolved", children: "Resolvida" })
+            ] })
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx9("div", { ref: scrollRef, className: "flex-1 overflow-y-auto p-4", children: isLoading ? /* @__PURE__ */ jsx9("div", { className: "space-y-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: `flex ${i % 2 === 0 ? "justify-start" : "justify-end"}`,
+        children: /* @__PURE__ */ jsx9(Skeleton, { className: "h-12 w-64 rounded-lg" })
+      },
+      i
+    )) }) : groups.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "Nenhuma mensagem ainda" }) : /* @__PURE__ */ jsx9("div", { className: "space-y-4", children: groups.map((group, gi) => /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx9("div", { className: "mb-3 flex justify-center", children: /* @__PURE__ */ jsx9("span", { className: "rounded-full bg-muted px-3 py-1 text-[11px] text-muted-foreground", children: formatDateGroup(group.date) }) }),
+      /* @__PURE__ */ jsx9("div", { className: "space-y-1", children: group.messages.map((msg) => /* @__PURE__ */ jsx9(
+        MessageBubble,
+        {
+          message: msg,
+          onRetry,
+          onRevoke,
+          onEdit
+        },
+        msg.id
+      )) })
+    ] }, gi)) }) }),
+    /* @__PURE__ */ jsx9(ChatInput, { onSend, disabled: sendDisabled })
+  ] });
+}
 export {
+  ChatInput,
+  ChatView,
+  DEFAULT_CHANNEL_STATUS_POLLING,
+  DEFAULT_INBOX_POLLING,
+  DEFAULT_MESSAGES_POLLING,
+  DEFAULT_QR_POLLING,
+  MessageBubble,
   cn,
-  createGchatClient
+  createGchatClient,
+  formatDateGroup,
+  formatMessageTime,
+  groupMessagesByDate,
+  useChannelQR,
+  useChannelWhatsappStatus,
+  useChannels,
+  useConnectChannel,
+  useContacts,
+  useCreateChannel,
+  useCreateContact,
+  useCreateInbox,
+  useDeleteChannel,
+  useDeleteContact,
+  useDeleteInbox,
+  useDisconnectChannel,
+  useEditMessage,
+  useGetContact,
+  useInbox,
+  useInboxMessages,
+  useInboxStats,
+  useInboxes,
+  useLogoutChannel,
+  useRetryMessage,
+  useRevokeMessage,
+  useSendMessage,
+  useUpdateChannel,
+  useUpdateContact,
+  useUpdateInbox
 };
 //# sourceMappingURL=index.js.map