@greatapps/greatchat-ui 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/greatchat-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,6 +26,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2",
+    "cmdk": "^1.1.1",
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3"
   },

package/src/components/contact-avatar.tsx

@@ -0,0 +1,59 @@
+import { Avatar, AvatarFallback } from "./ui/avatar";
+import { cn } from "../lib/utils";
+
+const 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",
+];
+
+const SIZE_MAP = {
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-xs",
+  lg: "h-16 w-16 text-lg",
+} as const;
+
+function hashCode(str: string): number {
+  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: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return (name[0] || "?").toUpperCase();
+}
+
+export interface ContactAvatarProps {
+  name: string | null;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function ContactAvatar({
+  name,
+  className,
+  size = "md",
+}: ContactAvatarProps) {
+  const displayName = name || "?";
+  const color = COLORS[hashCode(displayName) % COLORS.length];
+  const initials = getInitials(displayName);
+
+  return (
+    <Avatar className={cn(SIZE_MAP[size], className)}>
+      <AvatarFallback className={cn("font-medium", color)}>
+        {initials}
+      </AvatarFallback>
+    </Avatar>
+  );
+}

package/src/components/contact-info-panel.tsx

@@ -0,0 +1,139 @@
+import type { Contact } from "../types";
+import { ContactAvatar } from "./contact-avatar";
+import { Button } from "./ui/button";
+import { Skeleton } from "./ui/skeleton";
+import { Separator } from "./ui/separator";
+import {
+  X,
+  Phone,
+  Fingerprint,
+  Calendar,
+  CalendarClock,
+  Hash,
+} from "lucide-react";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { cn } from "../lib/utils";
+
+function InfoRow({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: React.ElementType;
+  label: string;
+  value: string | null | undefined;
+}) {
+  if (!value) return null;
+  return (
+    <div className="flex items-start gap-3 py-2">
+      <Icon className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
+      <div className="min-w-0">
+        <p className="text-xs text-muted-foreground">{label}</p>
+        <p className="text-sm break-all">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+export interface ContactInfoPanelProps {
+  contact: Contact | null;
+  isLoading?: boolean;
+  onClose?: () => void;
+  className?: string;
+}
+
+export function ContactInfoPanel({
+  contact,
+  isLoading,
+  onClose,
+  className,
+}: ContactInfoPanelProps) {
+  return (
+    <div
+      className={cn(
+        "flex h-full w-[320px] shrink-0 flex-col border-l",
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between border-b px-4 py-3">
+        <span className="text-sm font-medium">Informações do contato</span>
+        {onClose && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {isLoading ? (
+          <div className="flex flex-col items-center gap-3 pt-4">
+            <Skeleton className="h-16 w-16 rounded-full" />
+            <Skeleton className="h-5 w-32" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        ) : contact ? (
+          <>
+            {/* Avatar + Name */}
+            <div className="flex flex-col items-center gap-2 pb-4">
+              <ContactAvatar name={contact.name} size="lg" />
+              <h3 className="text-base font-medium text-center">
+                {contact.name || "Desconhecido"}
+              </h3>
+            </div>
+
+            <Separator />
+
+            {/* Details */}
+            <div className="mt-3 space-y-1">
+              <InfoRow icon={Hash} label="ID" value={contact.id?.toString()} />
+              <InfoRow
+                icon={Phone}
+                label="Telefone"
+                value={contact.phone_number}
+              />
+              <InfoRow
+                icon={Fingerprint}
+                label="Identificador"
+                value={contact.identifier}
+              />
+              <InfoRow
+                icon={Calendar}
+                label="Criado em"
+                value={
+                  contact.datetime_add
+                    ? format(
+                        new Date(contact.datetime_add),
+                        "dd/MM/yyyy 'às' HH:mm",
+                        { locale: ptBR },
+                      )
+                    : null
+                }
+              />
+              <InfoRow
+                icon={CalendarClock}
+                label="Atualizado em"
+                value={
+                  contact.datetime_alt
+                    ? format(
+                        new Date(contact.datetime_alt),
+                        "dd/MM/yyyy 'às' HH:mm",
+                        { locale: ptBR },
+                      )
+                    : null
+                }
+              />
+            </div>
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/inbox-item.tsx

@@ -0,0 +1,149 @@
+import { useState } from "react";
+import type { Inbox } from "../types";
+import { ContactAvatar } from "./contact-avatar";
+import { Badge } from "./ui/badge";
+import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { formatDistanceToNow } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import { Trash2 } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const statusColors: Record<string, string> = {
+  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",
+};
+
+const statusLabels: Record<string, string> = {
+  open: "Aberta",
+  pending: "Pendente",
+  resolved: "Resolvida",
+};
+
+export interface InboxItemProps {
+  inbox: Inbox;
+  isSelected: boolean;
+  onClick: () => void;
+  onDelete?: (id: number) => void;
+  renderActions?: (inbox: Inbox) => React.ReactNode;
+}
+
+export function InboxItem({
+  inbox,
+  isSelected,
+  onClick,
+  onDelete,
+  renderActions,
+}: InboxItemProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  const timestamp = inbox.last_message_at || inbox.datetime_add;
+  const timeAgo = formatDistanceToNow(new Date(timestamp), {
+    addSuffix: true,
+    locale: ptBR,
+  });
+
+  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ê: " : "";
+
+  return (
+    <>
+      <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={onClick}
+      >
+        <ContactAvatar
+          name={inbox.contact_name}
+          className="mt-0.5"
+          size="md"
+        />
+
+        <div className="flex-1 overflow-hidden">
+          <div className="flex items-center justify-between gap-2">
+            <span className="truncate font-medium text-sm">
+              {inbox.contact_name || "Desconhecido"}
+            </span>
+            <div className="flex items-center gap-1 shrink-0">
+              <span className="text-xs text-muted-foreground">{timeAgo}</span>
+              {renderActions?.(inbox)}
+              {onDelete && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <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);
+                      }}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>Excluir conversa</TooltipContent>
+                </Tooltip>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between gap-2 mt-0.5">
+            <p className="truncate text-xs text-muted-foreground">
+              {lastMessage
+                ? `${directionPrefix}${lastMessage}`
+                : "Sem mensagens"}
+            </p>
+            <Badge
+              variant="outline"
+              className={cn(
+                "shrink-0 text-[10px] px-1.5 py-0",
+                statusColors[inbox.status],
+              )}
+            >
+              {statusLabels[inbox.status] || inbox.status}
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Excluir conversa?</AlertDialogTitle>
+            <AlertDialogDescription>
+              A conversa com {inbox.contact_name || "este contato"} será removida
+              da lista. As mensagens não serão apagadas do WhatsApp.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => onDelete?.(inbox.id)}
+            >
+              Excluir
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/src/components/inbox-sidebar.tsx

@@ -0,0 +1,148 @@
+import { useState, useMemo } from "react";
+import type { Inbox } from "../types";
+import { InboxItem } from "./inbox-item";
+import { Input } from "./ui/input";
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
+import { Button } from "./ui/button";
+import { Skeleton } from "./ui/skeleton";
+import { ScrollArea } from "./ui/scroll-area";
+import { Search, Plus, Inbox as InboxIcon } from "lucide-react";
+
+const STATUS_TABS = [
+  { value: "all", label: "Todas" },
+  { value: "open", label: "Abertas" },
+  { value: "pending", label: "Pendentes" },
+  { value: "resolved", label: "Resolvidas" },
+];
+
+export interface InboxSidebarProps {
+  inboxes: Inbox[] | undefined;
+  isLoading: boolean;
+  selectedInboxId: number | null;
+  onSelectInbox: (inbox: Inbox) => void;
+  onDeleteInbox?: (id: number) => void;
+  onCreateInbox?: () => void;
+  filterChannelId?: number | null;
+  renderHeader?: React.ReactNode;
+  renderFooter?: React.ReactNode;
+}
+
+export function InboxSidebar({
+  inboxes,
+  isLoading,
+  selectedInboxId,
+  onSelectInbox,
+  onDeleteInbox,
+  onCreateInbox,
+  filterChannelId,
+  renderHeader,
+  renderFooter,
+}: InboxSidebarProps) {
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+
+  const filtered = useMemo(() => {
+    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 (
+    <div className="flex h-full flex-col">
+      {renderHeader}
+
+      <div className="flex flex-col gap-3 p-3">
+        <div className="flex items-center justify-between gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Buscar..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9 h-8 text-sm"
+            />
+          </div>
+          {onCreateInbox && (
+            <Button
+              size="icon"
+              className="h-8 w-8 shrink-0"
+              onClick={onCreateInbox}
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+        <Tabs value={statusFilter} onValueChange={setStatusFilter}>
+          <TabsList className="w-full">
+            {STATUS_TABS.map((tab) => (
+              <TabsTrigger
+                key={tab.value}
+                value={tab.value}
+                className="flex-1 text-xs"
+              >
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      </div>
+
+      <ScrollArea className="flex-1 px-2">
+        {isLoading ? (
+          <div className="space-y-2 p-2">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="flex items-center gap-3 p-3">
+                <Skeleton className="h-10 w-10 rounded-full shrink-0" />
+                <div className="flex-1 space-y-1.5">
+                  <Skeleton className="h-4 w-28" />
+                  <Skeleton className="h-3 w-40" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="flex flex-col items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
+            <InboxIcon className="h-8 w-8 opacity-50" />
+            Nenhuma conversa encontrada
+          </div>
+        ) : (
+          filtered.map((inbox) => (
+            <InboxItem
+              key={inbox.id}
+              inbox={inbox}
+              isSelected={inbox.id === selectedInboxId}
+              onClick={() => onSelectInbox(inbox)}
+              onDelete={onDeleteInbox}
+            />
+          ))
+        )}
+      </ScrollArea>
+
+      {renderFooter}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -6,3 +6,18 @@ export type { ChatInputProps } from "./chat-input";
 
 export { MessageBubble } from "./message-bubble";
 export type { MessageBubbleProps } from "./message-bubble";
+
+export { ContactAvatar } from "./contact-avatar";
+export type { ContactAvatarProps } from "./contact-avatar";
+
+export { InboxItem } from "./inbox-item";
+export type { InboxItemProps } from "./inbox-item";
+
+export { InboxSidebar } from "./inbox-sidebar";
+export type { InboxSidebarProps } from "./inbox-sidebar";
+
+export { ContactInfoPanel } from "./contact-info-panel";
+export type { ContactInfoPanelProps } from "./contact-info-panel";
+
+export { NewConversationDialog } from "./new-conversation-dialog";
+export type { NewConversationDialogProps } from "./new-conversation-dialog";

package/src/components/new-conversation-dialog.tsx

@@ -0,0 +1,172 @@
+import { useState, useCallback, useEffect } from "react";
+import type { Contact, Channel, Inbox } from "../types";
+import { ContactAvatar } from "./contact-avatar";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "./ui/dialog";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "./ui/command";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { Button } from "./ui/button";
+import { Loader2 } from "lucide-react";
+
+export interface NewConversationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  contacts: Contact[];
+  channels: Channel[];
+  existingInboxes?: Inbox[];
+  onCreateInbox: (contactId: number, channelId: number) => void;
+  isCreating?: boolean;
+  onCreated?: (inboxId: number) => void;
+}
+
+export function NewConversationDialog({
+  open,
+  onOpenChange,
+  contacts,
+  channels,
+  existingInboxes,
+  onCreateInbox,
+  isCreating,
+  onCreated,
+}: NewConversationDialogProps) {
+  const [selectedContact, setSelectedContact] = useState<Contact | null>(null);
+  const [selectedChannelId, setSelectedChannelId] = useState<number | null>(
+    null,
+  );
+
+  // Auto-select first channel if only one available
+  const effectiveChannelId =
+    selectedChannelId ?? (channels.length === 1 ? channels[0]?.id : null);
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setSelectedContact(null);
+      setSelectedChannelId(null);
+    }
+  }, [open]);
+
+  const handleCreate = useCallback(() => {
+    if (!selectedContact || !effectiveChannelId) return;
+
+    // Dedup check
+    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 (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md p-0 gap-0">
+        <DialogHeader className="px-4 pt-4 pb-2">
+          <DialogTitle>Nova conversa</DialogTitle>
+          <DialogDescription>
+            Selecione um contato para iniciar uma conversa
+          </DialogDescription>
+        </DialogHeader>
+
+        {channels.length > 1 && (
+          <div className="px-4 pb-2">
+            <Select
+              value={selectedChannelId?.toString() ?? ""}
+              onValueChange={(v) => setSelectedChannelId(Number(v))}
+            >
+              <SelectTrigger className="h-9">
+                <SelectValue placeholder="Selecione um canal" />
+              </SelectTrigger>
+              <SelectContent>
+                {channels.map((ch) => (
+                  <SelectItem key={ch.id} value={ch.id.toString()}>
+                    {ch.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        <Command className="rounded-none border-none shadow-none">
+          <div className="px-2">
+            <CommandInput placeholder="Buscar contato..." />
+          </div>
+          <CommandList className="max-h-64 px-2">
+            <CommandEmpty>Nenhum contato encontrado</CommandEmpty>
+            <CommandGroup>
+              {contacts.map((contact) => (
+                <CommandItem
+                  key={contact.id}
+                  value={`${contact.name} ${contact.phone_number || ""}`}
+                  onSelect={() => setSelectedContact(contact)}
+                  data-checked={selectedContact?.id === contact.id}
+                  className="gap-3"
+                >
+                  <ContactAvatar name={contact.name} size="sm" />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">
+                      {contact.name}
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {contact.phone_number ||
+                        contact.identifier ||
+                        "Sem telefone"}
+                    </p>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+
+        <DialogFooter className="px-4 py-3 border-t">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancelar
+          </Button>
+          <Button
+            disabled={!selectedContact || !effectiveChannelId || isCreating}
+            onClick={handleCreate}
+          >
+            {isCreating && <Loader2 className="h-4 w-4 animate-spin" />}
+            Iniciar conversa
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}