@greatapps/greatchat-ui 0.1.2 → 0.1.3

package/dist/index.js

@@ -1537,14 +1537,956 @@ function ChatView({
     /* @__PURE__ */ jsx9(ChatInput, { onSend, disabled: sendDisabled })
   ] });
 }
+
+// src/components/ui/avatar.tsx
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    AvatarPrimitive.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    AvatarPrimitive.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "flex size-full items-center justify-center rounded-full bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/contact-avatar.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var COLORS = [
+  "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+  "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
+  "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
+  "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
+  "bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300",
+  "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+  "bg-violet-100 text-violet-700 dark:bg-violet-900 dark:text-violet-300",
+  "bg-pink-100 text-pink-700 dark:bg-pink-900 dark:text-pink-300"
+];
+var SIZE_MAP = {
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-xs",
+  lg: "h-16 w-16 text-lg"
+};
+function hashCode(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash);
+}
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return (name[0] || "?").toUpperCase();
+}
+function ContactAvatar({
+  name,
+  className,
+  size = "md"
+}) {
+  const displayName = name || "?";
+  const color = COLORS[hashCode(displayName) % COLORS.length];
+  const initials = getInitials(displayName);
+  return /* @__PURE__ */ jsx11(Avatar, { className: cn(SIZE_MAP[size], className), children: /* @__PURE__ */ jsx11(AvatarFallback, { className: cn("font-medium", color), children: initials }) });
+}
+
+// src/components/inbox-item.tsx
+import { useState as useState3 } from "react";
+
+// src/components/ui/badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        secondary: "bg-secondary text-secondary-foreground",
+        destructive: "bg-destructive/10 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "span";
+  return /* @__PURE__ */ jsx12(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(TooltipProvider, { children: /* @__PURE__ */ jsx13(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx13(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+
+// src/components/inbox-item.tsx
+import { formatDistanceToNow } from "date-fns";
+import { ptBR as ptBR2 } from "date-fns/locale";
+import { Trash2 as Trash22 } from "lucide-react";
+import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var statusColors = {
+  open: "bg-green-500/10 text-green-600 border-green-200",
+  pending: "bg-yellow-500/10 text-yellow-600 border-yellow-200",
+  resolved: "bg-zinc-500/10 text-zinc-500 border-zinc-200"
+};
+var statusLabels = {
+  open: "Aberta",
+  pending: "Pendente",
+  resolved: "Resolvida"
+};
+function InboxItem({
+  inbox,
+  isSelected,
+  onClick,
+  onDelete,
+  renderActions
+}) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState3(false);
+  const timestamp = inbox.last_message_at || inbox.datetime_add;
+  const timeAgo = formatDistanceToNow(new Date(timestamp), {
+    addSuffix: true,
+    locale: ptBR2
+  });
+  const lastMessage = inbox.last_message_content_type === "text" ? inbox.last_message_content : inbox.last_message_content_type ? `[${inbox.last_message_content_type}]` : null;
+  const directionPrefix = inbox.last_message_direction === "outbound" ? "Voc\xEA: " : "";
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-start gap-3 rounded-md p-3 text-left transition-colors hover:bg-accent group relative cursor-pointer",
+          isSelected && "bg-accent"
+        ),
+        onClick,
+        children: [
+          /* @__PURE__ */ jsx14(
+            ContactAvatar,
+            {
+              name: inbox.contact_name,
+              className: "mt-0.5",
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ jsxs7("div", { className: "flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx14("span", { className: "truncate font-medium text-sm", children: inbox.contact_name || "Desconhecido" }),
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1 shrink-0", children: [
+                /* @__PURE__ */ jsx14("span", { className: "text-xs text-muted-foreground", children: timeAgo }),
+                renderActions?.(inbox),
+                onDelete && /* @__PURE__ */ jsxs7(Tooltip, { children: [
+                  /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(
+                    "button",
+                    {
+                      className: "h-5 w-5 rounded flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-muted text-destructive",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setShowDeleteDialog(true);
+                      },
+                      children: /* @__PURE__ */ jsx14(Trash22, { className: "h-3.5 w-3.5" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx14(TooltipContent, { children: "Excluir conversa" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2 mt-0.5", children: [
+              /* @__PURE__ */ jsx14("p", { className: "truncate text-xs text-muted-foreground", children: lastMessage ? `${directionPrefix}${lastMessage}` : "Sem mensagens" }),
+              /* @__PURE__ */ jsx14(
+                Badge,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "shrink-0 text-[10px] px-1.5 py-0",
+                    statusColors[inbox.status]
+                  ),
+                  children: statusLabels[inbox.status] || inbox.status
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx14(AlertDialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx14(AlertDialogTitle, { children: "Excluir conversa?" }),
+        /* @__PURE__ */ jsxs7(AlertDialogDescription, { children: [
+          "A conversa com ",
+          inbox.contact_name || "este contato",
+          " ser\xE1 removida da lista. As mensagens n\xE3o ser\xE3o apagadas do WhatsApp."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs7(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx14(AlertDialogCancel, { children: "Cancelar" }),
+        /* @__PURE__ */ jsx14(
+          AlertDialogAction,
+          {
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            onClick: () => onDelete?.(inbox.id),
+            children: "Excluir"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/inbox-sidebar.tsx
+import { useState as useState4, useMemo as useMemo3 } from "react";
+
+// src/components/ui/input.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/tabs.tsx
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "inline-flex items-center justify-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/scroll-area.tsx
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs8(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx17(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit] [&>div]:!block", children }),
+        /* @__PURE__ */ jsx17(ScrollBar, {}),
+        /* @__PURE__ */ jsx17(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
+    ScrollAreaPrimitive.Scrollbar,
+    {
+      "data-slot": "scroll-bar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx17(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-full bg-border" })
+    }
+  );
+}
+
+// src/components/inbox-sidebar.tsx
+import { Search, Plus, Inbox as InboxIcon } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var STATUS_TABS = [
+  { value: "all", label: "Todas" },
+  { value: "open", label: "Abertas" },
+  { value: "pending", label: "Pendentes" },
+  { value: "resolved", label: "Resolvidas" }
+];
+function InboxSidebar({
+  inboxes,
+  isLoading,
+  selectedInboxId,
+  onSelectInbox,
+  onDeleteInbox,
+  onCreateInbox,
+  filterChannelId,
+  renderHeader,
+  renderFooter
+}) {
+  const [search, setSearch] = useState4("");
+  const [statusFilter, setStatusFilter] = useState4("all");
+  const filtered = useMemo3(() => {
+    if (!inboxes) return [];
+    let list = inboxes;
+    if (filterChannelId != null) {
+      list = list.filter((i) => i.id_channel === filterChannelId);
+    }
+    if (statusFilter !== "all") {
+      list = list.filter((i) => i.status === statusFilter);
+    }
+    if (search) {
+      const q = search.toLowerCase();
+      list = list.filter(
+        (i) => i.contact_name?.toLowerCase().includes(q) || i.contact_phone?.toLowerCase().includes(q) || i.contact_identifier?.toLowerCase().includes(q) || i.last_message_content?.toLowerCase().includes(q)
+      );
+    }
+    return [...list].sort((a, b) => {
+      const dateA = a.last_message_at || a.datetime_add;
+      const dateB = b.last_message_at || b.datetime_add;
+      return new Date(dateB).getTime() - new Date(dateA).getTime();
+    });
+  }, [inboxes, statusFilter, search, filterChannelId]);
+  return /* @__PURE__ */ jsxs9("div", { className: "flex h-full flex-col", children: [
+    renderHeader,
+    /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-3 p-3", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ jsx18(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsx18(
+            Input,
+            {
+              placeholder: "Buscar...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              className: "pl-9 h-8 text-sm"
+            }
+          )
+        ] }),
+        onCreateInbox && /* @__PURE__ */ jsx18(
+          Button,
+          {
+            size: "icon",
+            className: "h-8 w-8 shrink-0",
+            onClick: onCreateInbox,
+            children: /* @__PURE__ */ jsx18(Plus, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx18(Tabs, { value: statusFilter, onValueChange: setStatusFilter, children: /* @__PURE__ */ jsx18(TabsList, { className: "w-full", children: STATUS_TABS.map((tab) => /* @__PURE__ */ jsx18(
+        TabsTrigger,
+        {
+          value: tab.value,
+          className: "flex-1 text-xs",
+          children: tab.label
+        },
+        tab.value
+      )) }) })
+    ] }),
+    /* @__PURE__ */ jsx18(ScrollArea, { className: "flex-1 px-2", children: isLoading ? /* @__PURE__ */ jsx18("div", { className: "space-y-2 p-2", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 p-3", children: [
+      /* @__PURE__ */ jsx18(Skeleton, { className: "h-10 w-10 rounded-full shrink-0" }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex-1 space-y-1.5", children: [
+        /* @__PURE__ */ jsx18(Skeleton, { className: "h-4 w-28" }),
+        /* @__PURE__ */ jsx18(Skeleton, { className: "h-3 w-40" })
+      ] })
+    ] }, i)) }) : filtered.length === 0 ? /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center justify-center gap-2 py-8 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx18(InboxIcon, { className: "h-8 w-8 opacity-50" }),
+      "Nenhuma conversa encontrada"
+    ] }) : filtered.map((inbox) => /* @__PURE__ */ jsx18(
+      InboxItem,
+      {
+        inbox,
+        isSelected: inbox.id === selectedInboxId,
+        onClick: () => onSelectInbox(inbox),
+        onDelete: onDeleteInbox
+      },
+      inbox.id
+    )) }),
+    renderFooter
+  ] });
+}
+
+// src/components/ui/separator.tsx
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx19(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/contact-info-panel.tsx
+import {
+  X,
+  Phone,
+  Fingerprint,
+  Calendar,
+  CalendarClock,
+  Hash
+} from "lucide-react";
+import { format as format2 } from "date-fns";
+import { ptBR as ptBR3 } from "date-fns/locale";
+import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+function InfoRow({
+  icon: Icon,
+  label,
+  value
+}) {
+  if (!value) return null;
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-3 py-2", children: [
+    /* @__PURE__ */ jsx20(Icon, { className: "h-4 w-4 text-muted-foreground mt-0.5 shrink-0" }),
+    /* @__PURE__ */ jsxs10("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx20("p", { className: "text-sm break-all", children: value })
+    ] })
+  ] });
+}
+function ContactInfoPanel({
+  contact,
+  isLoading,
+  onClose,
+  className
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-[320px] shrink-0 flex-col border-l",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
+          /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium", children: "Informa\xE7\xF5es do contato" }),
+          onClose && /* @__PURE__ */ jsx20(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-7 w-7",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx20(X, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx20("div", { className: "flex-1 overflow-y-auto p-4", children: isLoading ? /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center gap-3 pt-4", children: [
+          /* @__PURE__ */ jsx20(Skeleton, { className: "h-16 w-16 rounded-full" }),
+          /* @__PURE__ */ jsx20(Skeleton, { className: "h-5 w-32" }),
+          /* @__PURE__ */ jsx20(Skeleton, { className: "h-4 w-24" })
+        ] }) : contact ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+          /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center gap-2 pb-4", children: [
+            /* @__PURE__ */ jsx20(ContactAvatar, { name: contact.name, size: "lg" }),
+            /* @__PURE__ */ jsx20("h3", { className: "text-base font-medium text-center", children: contact.name || "Desconhecido" })
+          ] }),
+          /* @__PURE__ */ jsx20(Separator, {}),
+          /* @__PURE__ */ jsxs10("div", { className: "mt-3 space-y-1", children: [
+            /* @__PURE__ */ jsx20(InfoRow, { icon: Hash, label: "ID", value: contact.id?.toString() }),
+            /* @__PURE__ */ jsx20(
+              InfoRow,
+              {
+                icon: Phone,
+                label: "Telefone",
+                value: contact.phone_number
+              }
+            ),
+            /* @__PURE__ */ jsx20(
+              InfoRow,
+              {
+                icon: Fingerprint,
+                label: "Identificador",
+                value: contact.identifier
+              }
+            ),
+            /* @__PURE__ */ jsx20(
+              InfoRow,
+              {
+                icon: Calendar,
+                label: "Criado em",
+                value: contact.datetime_add ? format2(
+                  new Date(contact.datetime_add),
+                  "dd/MM/yyyy '\xE0s' HH:mm",
+                  { locale: ptBR3 }
+                ) : null
+              }
+            ),
+            /* @__PURE__ */ jsx20(
+              InfoRow,
+              {
+                icon: CalendarClock,
+                label: "Atualizado em",
+                value: contact.datetime_alt ? format2(
+                  new Date(contact.datetime_alt),
+                  "dd/MM/yyyy '\xE0s' HH:mm",
+                  { locale: ptBR3 }
+                ) : null
+              }
+            )
+          ] })
+        ] }) : null })
+      ]
+    }
+  );
+}
+
+// src/components/new-conversation-dialog.tsx
+import { useState as useState5, useCallback, useEffect as useEffect2 } from "react";
+
+// src/components/ui/dialog.tsx
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { X as X2 } from "lucide-react";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs11(DialogPortal, { children: [
+    /* @__PURE__ */ jsx21(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs11(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs11(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ jsx21(X2, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/command.tsx
+import { Command as CommandPrimitive } from "cmdk";
+import { Search as Search2 } from "lucide-react";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx22(
+    CommandPrimitive,
+    {
+      "data-slot": "command",
+      className: cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs12("div", { className: "flex h-9 items-center gap-2 border-b px-3", "data-slot": "command-input-wrapper", children: [
+    /* @__PURE__ */ jsx22(Search2, { className: "size-4 shrink-0 opacity-50" }),
+    /* @__PURE__ */ jsx22(
+      CommandPrimitive.Input,
+      {
+        "data-slot": "command-input",
+        className: cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx22(
+    CommandPrimitive.List,
+    {
+      "data-slot": "command-list",
+      className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx22(
+    CommandPrimitive.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx22(
+    CommandPrimitive.Group,
+    {
+      "data-slot": "command-group",
+      className: cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx22(
+    CommandPrimitive.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/new-conversation-dialog.tsx
+import { Loader2 } from "lucide-react";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+function NewConversationDialog({
+  open,
+  onOpenChange,
+  contacts,
+  channels,
+  existingInboxes,
+  onCreateInbox,
+  isCreating,
+  onCreated
+}) {
+  const [selectedContact, setSelectedContact] = useState5(null);
+  const [selectedChannelId, setSelectedChannelId] = useState5(
+    null
+  );
+  const effectiveChannelId = selectedChannelId ?? (channels.length === 1 ? channels[0]?.id : null);
+  useEffect2(() => {
+    if (!open) {
+      setSelectedContact(null);
+      setSelectedChannelId(null);
+    }
+  }, [open]);
+  const handleCreate = useCallback(() => {
+    if (!selectedContact || !effectiveChannelId) return;
+    if (existingInboxes) {
+      const existing = existingInboxes.find(
+        (i) => i.id_contact === selectedContact.id && i.id_channel === effectiveChannelId
+      );
+      if (existing) {
+        onCreated?.(existing.id);
+        onOpenChange(false);
+        return;
+      }
+    }
+    onCreateInbox(selectedContact.id, effectiveChannelId);
+  }, [
+    selectedContact,
+    effectiveChannelId,
+    existingInboxes,
+    onCreateInbox,
+    onCreated,
+    onOpenChange
+  ]);
+  return /* @__PURE__ */ jsx23(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs13(DialogContent, { className: "sm:max-w-md p-0 gap-0", children: [
+    /* @__PURE__ */ jsxs13(DialogHeader, { className: "px-4 pt-4 pb-2", children: [
+      /* @__PURE__ */ jsx23(DialogTitle, { children: "Nova conversa" }),
+      /* @__PURE__ */ jsx23(DialogDescription, { children: "Selecione um contato para iniciar uma conversa" })
+    ] }),
+    channels.length > 1 && /* @__PURE__ */ jsx23("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsxs13(
+      Select,
+      {
+        value: selectedChannelId?.toString() ?? "",
+        onValueChange: (v) => setSelectedChannelId(Number(v)),
+        children: [
+          /* @__PURE__ */ jsx23(SelectTrigger, { className: "h-9", children: /* @__PURE__ */ jsx23(SelectValue, { placeholder: "Selecione um canal" }) }),
+          /* @__PURE__ */ jsx23(SelectContent, { children: channels.map((ch) => /* @__PURE__ */ jsx23(SelectItem, { value: ch.id.toString(), children: ch.name }, ch.id)) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs13(Command, { className: "rounded-none border-none shadow-none", children: [
+      /* @__PURE__ */ jsx23("div", { className: "px-2", children: /* @__PURE__ */ jsx23(CommandInput, { placeholder: "Buscar contato..." }) }),
+      /* @__PURE__ */ jsxs13(CommandList, { className: "max-h-64 px-2", children: [
+        /* @__PURE__ */ jsx23(CommandEmpty, { children: "Nenhum contato encontrado" }),
+        /* @__PURE__ */ jsx23(CommandGroup, { children: contacts.map((contact) => /* @__PURE__ */ jsxs13(
+          CommandItem,
+          {
+            value: `${contact.name} ${contact.phone_number || ""}`,
+            onSelect: () => setSelectedContact(contact),
+            "data-checked": selectedContact?.id === contact.id,
+            className: "gap-3",
+            children: [
+              /* @__PURE__ */ jsx23(ContactAvatar, { name: contact.name, size: "sm" }),
+              /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx23("p", { className: "truncate text-sm font-medium", children: contact.name }),
+                /* @__PURE__ */ jsx23("p", { className: "truncate text-xs text-muted-foreground", children: contact.phone_number || contact.identifier || "Sem telefone" })
+              ] })
+            ]
+          },
+          contact.id
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs13(DialogFooter, { className: "px-4 py-3 border-t", children: [
+      /* @__PURE__ */ jsx23(Button, { variant: "outline", onClick: () => onOpenChange(false), children: "Cancelar" }),
+      /* @__PURE__ */ jsxs13(
+        Button,
+        {
+          disabled: !selectedContact || !effectiveChannelId || isCreating,
+          onClick: handleCreate,
+          children: [
+            isCreating && /* @__PURE__ */ jsx23(Loader2, { className: "h-4 w-4 animate-spin" }),
+            "Iniciar conversa"
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
 export {
   ChatInput,
   ChatView,
+  ContactAvatar,
+  ContactInfoPanel,
   DEFAULT_CHANNEL_STATUS_POLLING,
   DEFAULT_INBOX_POLLING,
   DEFAULT_MESSAGES_POLLING,
   DEFAULT_QR_POLLING,
+  InboxItem,
+  InboxSidebar,
   MessageBubble,
+  NewConversationDialog,
   cn,
   createGchatClient,
   formatDateGroup,