@greatapps/greatchat-ui 0.1.0 → 0.1.2

package/src/hooks/use-inbox-messages.ts

@@ -0,0 +1,405 @@
+import { useMemo, useSyncExternalStore } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { InboxMessage } from "../types";
+import {
+  type GchatHookConfig,
+  DEFAULT_MESSAGES_POLLING,
+  useGchatClient,
+} from "./types";
+
+// ---------------------------------------------------------------------------
+// Optimistic message store (module-level — survives server refetches)
+// ---------------------------------------------------------------------------
+
+const optimisticStore = new Map<string, InboxMessage[]>();
+let nextOptimisticId = -1;
+
+// useSyncExternalStore subscription — guarantees synchronous re-renders
+let storeVersion = 0;
+const listeners = new Set<() => void>();
+
+function subscribeStore(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function getStoreVersion() {
+  return storeVersion;
+}
+
+function storeKey(accountId: number, idInbox: number) {
+  return `${accountId}:${idInbox}`;
+}
+
+function getOptimistic(accountId: number, idInbox: number): InboxMessage[] {
+  return optimisticStore.get(storeKey(accountId, idInbox)) || [];
+}
+
+function setOptimistic(
+  accountId: number,
+  idInbox: number,
+  msgs: InboxMessage[],
+) {
+  const key = storeKey(accountId, idInbox);
+  if (msgs.length === 0) {
+    optimisticStore.delete(key);
+  } else {
+    optimisticStore.set(key, msgs);
+  }
+  storeVersion++;
+  listeners.forEach((fn) => fn());
+}
+
+/**
+ * Silently clean up the store without notifying listeners (avoids render loops).
+ * Used inside useMemo to remove optimistic messages confirmed by the server.
+ */
+function cleanupOptimistic(
+  accountId: number,
+  idInbox: number,
+  msgs: InboxMessage[],
+) {
+  const key = storeKey(accountId, idInbox);
+  if (msgs.length === 0) {
+    optimisticStore.delete(key);
+  } else {
+    optimisticStore.set(key, msgs);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Query
+// ---------------------------------------------------------------------------
+
+export function useInboxMessages(
+  config: GchatHookConfig,
+  idInbox: number | null,
+  pollingInterval?: number,
+) {
+  const client = useGchatClient(config);
+
+  // Subscribe to optimistic store — re-renders when store changes
+  const optimisticVersion = useSyncExternalStore(
+    subscribeStore,
+    getStoreVersion,
+    getStoreVersion,
+  );
+
+  const query = useQuery({
+    queryKey: ["greatchat", "inbox-messages", config.accountId, idInbox],
+    queryFn: () =>
+      client.listInboxMessages(config.accountId, {
+        id_inbox: String(idInbox!),
+        sort: "datetime_add:asc",
+        limit: "100",
+      }),
+    enabled: !!config.accountId && !!config.token && !!idInbox,
+    refetchInterval: pollingInterval ?? DEFAULT_MESSAGES_POLLING,
+    select: (res) => res.data || [],
+  });
+
+  // Merge server data with optimistic messages
+  const messages = useMemo(() => {
+    const serverMessages = query.data || [];
+    if (!config.accountId || !idInbox) return serverMessages;
+
+    const optimistic = getOptimistic(config.accountId, idInbox);
+    if (!optimistic.length) return serverMessages;
+
+    // Separate overrides (positive ID = retry) from new messages (negative ID = send)
+    const overrides = new Map<number, InboxMessage>();
+    const newOptimistic: InboxMessage[] = [];
+    for (const om of optimistic) {
+      if (om.id > 0) {
+        overrides.set(om.id, om);
+      } else {
+        newOptimistic.push(om);
+      }
+    }
+
+    // Apply overrides to server messages (replace in-place)
+    const merged =
+      overrides.size > 0
+        ? serverMessages.map((sm) => overrides.get(sm.id) ?? sm)
+        : serverMessages;
+
+    // Auto-cleanup: remove overrides when server no longer shows "failed"
+    if (overrides.size > 0) {
+      for (const [id] of overrides) {
+        const sm = serverMessages.find((s) => s.id === id);
+        if (sm && sm.status !== "failed") {
+          overrides.delete(id);
+        }
+      }
+    }
+
+    // One-to-one matching for new optimistic messages (negative IDs)
+    const stillNeeded: InboxMessage[] = [];
+    const claimed = new Set<number>();
+
+    for (const om of newOptimistic) {
+      // Always keep failed messages (until user retries or dismisses)
+      if (om.status === "failed") {
+        stillNeeded.push(om);
+        continue;
+      }
+
+      // Find a matching server message that hasn't been claimed yet
+      const matchIdx = merged.findIndex(
+        (sm, i) =>
+          !claimed.has(i) &&
+          sm.direction === "outbound" &&
+          sm.content === om.content &&
+          sm.content_type === om.content_type &&
+          sm.source === om.source,
+      );
+
+      if (matchIdx >= 0) {
+        claimed.add(matchIdx); // server confirmed this one
+      } else {
+        stillNeeded.push(om); // keep showing optimistic
+      }
+    }
+
+    // Silently clean up confirmed messages (no re-notification)
+    const allKept = [...Array.from(overrides.values()), ...stillNeeded];
+    if (allKept.length !== optimistic.length) {
+      cleanupOptimistic(config.accountId, idInbox, allKept);
+    }
+
+    // Sort by datetime to keep chronological order
+    const result = [...merged, ...stillNeeded];
+    result.sort(
+      (a, b) =>
+        new Date(a.datetime_add).getTime() -
+        new Date(b.datetime_add).getTime(),
+    );
+    return result;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query.data, config.accountId, idInbox, optimisticVersion]);
+
+  return { ...query, data: messages };
+}
+
+// ---------------------------------------------------------------------------
+// Send mutation
+// ---------------------------------------------------------------------------
+
+export function useSendMessage(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      idInbox,
+      content,
+    }: {
+      idInbox: number;
+      content: string;
+    }) => {
+      const result = await client.sendMessage(config.accountId, {
+        id_inbox: idInbox,
+        content,
+        content_type: "text",
+        source: "agent",
+        direction: "outbound",
+      });
+
+      if (result.status === 0) {
+        throw new Error(result.message || "Erro desconhecido ao enviar");
+      }
+
+      return result;
+    },
+
+    onMutate: (variables) => {
+      const msg: InboxMessage = {
+        id: nextOptimisticId--,
+        id_account: config.accountId,
+        id_inbox: variables.idInbox,
+        id_contact: null,
+        direction: "outbound",
+        content: variables.content,
+        content_type: "text",
+        content_url: null,
+        metadata: null,
+        external_id: null,
+        status: "pending",
+        source: "agent",
+        is_private: false,
+        datetime_add: new Date().toISOString(),
+        datetime_alt: null,
+      };
+
+      const current = getOptimistic(config.accountId, variables.idInbox);
+      setOptimistic(config.accountId, variables.idInbox, [...current, msg]);
+
+      return { optimisticMsg: msg };
+    },
+
+    onError: (error, variables, context) => {
+      if (!context) return;
+      const { optimisticMsg } = context;
+
+      const current = getOptimistic(config.accountId, variables.idInbox);
+      setOptimistic(
+        config.accountId,
+        variables.idInbox,
+        current.map((m) =>
+          m.id === optimisticMsg.id
+            ? { ...m, status: "failed" as const, _error: error.message }
+            : m,
+        ),
+      );
+    },
+
+    onSuccess: (_result, variables, context) => {
+      if (!context) return;
+      const { optimisticMsg } = context;
+
+      const current = getOptimistic(config.accountId, variables.idInbox);
+      setOptimistic(
+        config.accountId,
+        variables.idInbox,
+        current.filter((m) => m.id !== optimisticMsg.id),
+      );
+      queryClient.invalidateQueries({
+        queryKey: [
+          "greatchat",
+          "inbox-messages",
+          config.accountId,
+          variables.idInbox,
+        ],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"],
+      });
+    },
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Retry failed message (updates in-place, same bubble transitions states)
+// ---------------------------------------------------------------------------
+
+export function useRetryMessage(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return async (message: InboxMessage) => {
+    if (!config.accountId || !config.token || !message.content) return;
+
+    // Add as override with status "pending"
+    const current = getOptimistic(config.accountId, message.id_inbox);
+    setOptimistic(config.accountId, message.id_inbox, [
+      ...current.filter((m) => m.id !== message.id),
+      {
+        ...message,
+        status: "pending" as const,
+        _error: undefined,
+        datetime_add: new Date().toISOString(),
+      },
+    ]);
+
+    try {
+      const result = await client.sendMessage(config.accountId, {
+        id_inbox: message.id_inbox,
+        content: message.content,
+        content_type: message.content_type,
+        source: "agent",
+        direction: "outbound",
+      });
+
+      if (result.status === 0) {
+        throw new Error(result.message || "Erro desconhecido ao enviar");
+      }
+
+      const after = getOptimistic(config.accountId, message.id_inbox);
+      setOptimistic(
+        config.accountId,
+        message.id_inbox,
+        after.filter((m) => m.id !== message.id),
+      );
+      queryClient.invalidateQueries({
+        queryKey: [
+          "greatchat",
+          "inbox-messages",
+          config.accountId,
+          message.id_inbox,
+        ],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"],
+      });
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Erro ao enviar mensagem";
+      const after = getOptimistic(config.accountId, message.id_inbox);
+      setOptimistic(
+        config.accountId,
+        message.id_inbox,
+        after.map((m) =>
+          m.id === message.id
+            ? { ...m, status: "failed" as const, _error: errorMessage }
+            : m,
+        ),
+      );
+    }
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Revoke message
+// ---------------------------------------------------------------------------
+
+export function useRevokeMessage(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id }: { id: number; idInbox: number }) =>
+      client.revokeMessage(config.accountId, id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "greatchat",
+          "inbox-messages",
+          config.accountId,
+          variables.idInbox,
+        ],
+      });
+    },
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Edit message
+// ---------------------------------------------------------------------------
+
+export function useEditMessage(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      id,
+      content,
+    }: {
+      id: number;
+      idInbox: number;
+      content: string;
+    }) => client.editMessage(config.accountId, id, { content }),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "greatchat",
+          "inbox-messages",
+          config.accountId,
+          variables.idInbox,
+        ],
+      });
+    },
+  });
+}

package/src/hooks/use-inboxes.ts

@@ -0,0 +1,127 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { Inbox, InboxStats } from "../types";
+import {
+  type GchatHookConfig,
+  DEFAULT_INBOX_POLLING,
+  useGchatClient,
+} from "./types";
+
+// ---------------------------------------------------------------------------
+// Queries
+// ---------------------------------------------------------------------------
+
+export function useInboxes(
+  config: GchatHookConfig,
+  statusFilter?: string,
+  pollingInterval?: number,
+) {
+  const client = useGchatClient(config);
+
+  return useQuery({
+    queryKey: ["greatchat", "inboxes", config.accountId, statusFilter],
+    queryFn: () => {
+      const params: Record<string, string> = {};
+      if (statusFilter && statusFilter !== "all") {
+        params.status = statusFilter;
+      }
+      return client.listInboxes(config.accountId, params);
+    },
+    enabled: !!config.accountId && !!config.token,
+    refetchInterval: pollingInterval ?? DEFAULT_INBOX_POLLING,
+    select: (res) => res.data || [],
+  });
+}
+
+export function useInbox(config: GchatHookConfig, id: number | null) {
+  const client = useGchatClient(config);
+
+  return useQuery({
+    queryKey: ["greatchat", "inbox", config.accountId, id],
+    queryFn: () => client.getInbox(config.accountId, id!),
+    enabled: !!config.accountId && !!config.token && !!id,
+    select: (res) => {
+      const d = res.data;
+      return (Array.isArray(d) ? d[0] : d) as Inbox;
+    },
+  });
+}
+
+export function useInboxStats(
+  config: GchatHookConfig,
+  pollingInterval?: number,
+) {
+  const client = useGchatClient(config);
+
+  return useQuery({
+    queryKey: ["greatchat", "inbox-stats", config.accountId],
+    queryFn: () => client.getInboxStats(config.accountId),
+    enabled: !!config.accountId && !!config.token,
+    refetchInterval: pollingInterval ?? DEFAULT_INBOX_POLLING,
+    select: (res) => {
+      const d = res.data;
+      return (Array.isArray(d) ? d[0] : d) as InboxStats;
+    },
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Mutations
+// ---------------------------------------------------------------------------
+
+export function useCreateInbox(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: { id_channel: number; id_contact: number }) =>
+      client.createInbox(config.accountId, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inbox-stats"],
+      });
+    },
+  });
+}
+
+export function useUpdateInbox(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      body,
+    }: {
+      id: number;
+      body: Partial<Pick<Inbox, "status" | "id_agent">>;
+    }) => client.updateInbox(config.accountId, id, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inbox-stats"],
+      });
+    },
+  });
+}
+
+export function useDeleteInbox(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: number) => client.deleteInbox(config.accountId, id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inboxes"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "inbox-stats"],
+      });
+    },
+  });
+}

package/src/index.ts

@@ -16,3 +16,11 @@ export type { GchatClientConfig } from "./client";
 
 // Utils
 export { cn } from "./lib/utils";
+export { groupMessagesByDate, formatDateGroup, formatMessageTime } from "./utils";
+
+// Hooks
+export * from "./hooks";
+
+// Components
+export { ChatView, ChatInput, MessageBubble } from "./components";
+export type { ChatViewProps, ChatInputProps, MessageBubbleProps } from "./components";

package/src/utils/format-date.ts

@@ -0,0 +1,13 @@
+import { format, isToday, isYesterday } from "date-fns";
+import { ptBR } from "date-fns/locale";
+
+export function formatDateGroup(dateStr: string): string {
+  const date = new Date(dateStr);
+  if (isToday(date)) return "Hoje";
+  if (isYesterday(date)) return "Ontem";
+  return format(date, "dd 'de' MMMM", { locale: ptBR });
+}
+
+export function formatMessageTime(dateStr: string): string {
+  return format(new Date(dateStr), "HH:mm");
+}

package/src/utils/group-messages.ts

@@ -0,0 +1,22 @@
+import type { InboxMessage } from "../types";
+
+/**
+ * Groups messages by date. Assumes messages are pre-sorted by datetime_add (ascending).
+ */
+export function groupMessagesByDate(
+  messages: InboxMessage[],
+): { date: string; messages: InboxMessage[] }[] {
+  const groups: { date: string; messages: InboxMessage[] }[] = [];
+  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;
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { groupMessagesByDate } from "./group-messages";
+export { formatDateGroup, formatMessageTime } from "./format-date";