@greatapps/greatchat-ui 0.1.0 → 0.1.1

package/dist/index.js

@@ -101,8 +101,888 @@ 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/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,
+  MessageBubble,
   cn,
-  createGchatClient
+  createGchatClient,
+  formatDateGroup,
+  formatMessageTime,
+  groupMessagesByDate
 };
 //# sourceMappingURL=index.js.map