@greatapps/greatchat-ui 0.1.0 → 0.1.2

package/src/components/message-bubble.tsx

@@ -0,0 +1,394 @@
+import { useState } from "react";
+import type { InboxMessage } from "../types";
+import { cn } from "../lib/utils";
+import { formatMessageTime } from "../utils/format-date";
+import {
+  Check,
+  CheckCheck,
+  AlertCircle,
+  Clock,
+  Video,
+  File,
+  MapPin,
+  Headphones,
+  RotateCcw,
+  MoreHorizontal,
+  Trash2,
+  Pencil,
+  Ban,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
+
+const statusIcons: Record<string, React.ReactNode> = {
+  pending: <Clock className="h-3 w-3 animate-pulse" />,
+  sent: <Check className="h-3 w-3" />,
+  delivered: <CheckCheck className="h-3 w-3" />,
+  read: <CheckCheck className="h-3 w-3 text-blue-500" />,
+  failed: <AlertCircle className="h-3 w-3 text-destructive" />,
+};
+
+function parseMetadata(metadata: string | null): Record<string, unknown> {
+  if (!metadata) return {};
+  try {
+    return JSON.parse(metadata);
+  } catch {
+    return {};
+  }
+}
+
+function MediaContent({ message }: { message: InboxMessage }) {
+  switch (message.content_type) {
+    case "image":
+      return (
+        <div className="space-y-1">
+          {message.content_url && (
+            <img
+              src={message.content_url}
+              alt="Imagem"
+              className="max-w-[240px] rounded-md"
+            />
+          )}
+          {message.content && <p className="text-sm">{message.content}</p>}
+        </div>
+      );
+    case "audio":
+      return (
+        <div className="flex items-center gap-2">
+          <Headphones className="h-4 w-4" />
+          <span className="text-sm">Mensagem de áudio</span>
+        </div>
+      );
+    case "video":
+      return (
+        <div className="flex items-center gap-2">
+          <Video className="h-4 w-4" />
+          <span className="text-sm">Vídeo</span>
+          {message.content && <p className="text-sm">{message.content}</p>}
+        </div>
+      );
+    case "document": {
+      const meta = parseMetadata(message.metadata);
+      return (
+        <div className="flex items-center gap-2">
+          <File className="h-4 w-4" />
+          <span className="text-sm">
+            {(meta.filename as string) || "Documento"}
+          </span>
+        </div>
+      );
+    }
+    case "location":
+      return (
+        <div className="flex items-center gap-2">
+          <MapPin className="h-4 w-4" />
+          <span className="text-sm">Localização</span>
+        </div>
+      );
+    default:
+      return null;
+  }
+}
+
+export interface MessageBubbleProps {
+  message: InboxMessage;
+  onRetry?: (message: InboxMessage) => void;
+  onRevoke?: (message: InboxMessage) => void;
+  onEdit?: (message: InboxMessage, newContent: string) => void;
+  renderActions?: (message: InboxMessage) => React.ReactNode;
+}
+
+export function MessageBubble({
+  message,
+  onRetry,
+  onRevoke,
+  onEdit,
+  renderActions,
+}: MessageBubbleProps) {
+  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 as string) ||
+        (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 (
+      <div
+        className={cn("flex", isOutbound ? "justify-end" : "justify-start")}
+      >
+        <div className="max-w-[75%]">
+          <div
+            className={cn(
+              "rounded-lg px-3 py-2",
+              isOutbound ? "bg-primary/40" : "bg-muted/60",
+            )}
+          >
+            <div className="flex items-center gap-1.5">
+              <Ban
+                className={cn(
+                  "h-3.5 w-3.5",
+                  isOutbound
+                    ? "text-primary-foreground/50"
+                    : "text-muted-foreground",
+                )}
+              />
+              <p
+                className={cn(
+                  "text-sm italic",
+                  isOutbound
+                    ? "text-primary-foreground/50"
+                    : "text-muted-foreground",
+                )}
+              >
+                Mensagem apagada
+              </p>
+            </div>
+            <div
+              className={cn(
+                "mt-1 flex items-center justify-end gap-1",
+                isOutbound
+                  ? "text-primary-foreground/40"
+                  : "text-muted-foreground/60",
+              )}
+            >
+              <span className="text-[10px]">{time}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex group",
+        isOutbound ? "justify-end" : "justify-start",
+      )}
+    >
+      <div className="max-w-[75%] relative">
+        {canAct && (
+          <div className="absolute -top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="h-6 w-6 rounded-full bg-background/80 shadow-sm flex items-center justify-center hover:bg-background">
+                  <MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-40">
+                {canEdit && (
+                  <DropdownMenuItem
+                    onSelect={(e) => {
+                      e.preventDefault();
+                      setEditing(true);
+                      setEditContent(message.content || "");
+                    }}
+                  >
+                    <Pencil className="h-4 w-4 mr-2" />
+                    Editar
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    setShowRevokeDialog(true);
+                  }}
+                  className="text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Apagar para todos
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )}
+
+        {renderActions?.(message)}
+
+        <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",
+          )}
+        >
+          {agentLabel && (
+            <p
+              className={cn(
+                "mb-0.5 text-[10px] font-medium",
+                isFailed
+                  ? "text-destructive/70"
+                  : isOutbound
+                    ? "text-primary-foreground/70"
+                    : "text-muted-foreground",
+              )}
+            >
+              {agentLabel}
+            </p>
+          )}
+
+          {editing ? (
+            <div className="space-y-2">
+              <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
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSaveEdit();
+                  }
+                  if (e.key === "Escape") {
+                    setEditing(false);
+                  }
+                }}
+              />
+              <div className="flex justify-end gap-1.5">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-6 text-xs px-2"
+                  onClick={() => setEditing(false)}
+                >
+                  Cancelar
+                </Button>
+                <Button
+                  size="sm"
+                  className="h-6 text-xs px-2"
+                  onClick={handleSaveEdit}
+                  disabled={
+                    !editContent.trim() ||
+                    editContent.trim() === message.content
+                  }
+                >
+                  Salvar
+                </Button>
+              </div>
+            </div>
+          ) : message.content_type === "text" ? (
+            <p
+              className={cn(
+                "text-sm whitespace-pre-wrap break-words",
+                isFailed && "text-foreground",
+              )}
+            >
+              {message.content}
+            </p>
+          ) : (
+            <MediaContent message={message} />
+          )}
+
+          {!editing && (
+            <div
+              className={cn(
+                "mt-1 flex items-center justify-end gap-1",
+                isFailed
+                  ? "text-destructive"
+                  : isOutbound
+                    ? "text-primary-foreground/60"
+                    : "text-muted-foreground",
+              )}
+            >
+              {isEdited && (
+                <span className="text-[10px] italic">editada</span>
+              )}
+              <span className="text-[10px]">{time}</span>
+              {isOutbound && statusIcons[message.status]}
+            </div>
+          )}
+        </div>
+
+        {isFailed && (
+          <div className="mt-1 flex items-center gap-1.5 justify-end px-1">
+            <AlertCircle className="h-3 w-3 shrink-0 text-destructive" />
+            <span className="text-[11px] text-destructive">
+              {message._error || "Erro ao enviar"}
+            </span>
+            {onRetry && (
+              <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"
+              >
+                <RotateCcw className="h-3 w-3" />
+                Reenviar
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      <AlertDialog open={showRevokeDialog} onOpenChange={setShowRevokeDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Apagar mensagem?</AlertDialogTitle>
+            <AlertDialogDescription>
+              A mensagem será apagada para todos no WhatsApp. Ela continuará
+              visível aqui como &quot;mensagem apagada&quot;.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => onRevoke?.(message)}
+            >
+              Apagar para todos
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,167 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+
+import { cn } from "../../lib/utils";
+import { Button } from "./button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <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
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <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}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("grid gap-1.5 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <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
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Partial<Pick<React.ComponentProps<typeof Button>, "variant" | "size">>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Partial<Pick<React.ComponentProps<typeof Button>, "variant" | "size">>) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/badge.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "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
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "../../lib/utils";
+
+const 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
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };