@greatapps/greatchat-ui 0.1.1 → 0.1.2

package/src/hooks/use-channels.ts

@@ -0,0 +1,163 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { Channel, WhatsappStatus } from "../types";
+import {
+  type GchatHookConfig,
+  DEFAULT_CHANNEL_STATUS_POLLING,
+  DEFAULT_QR_POLLING,
+  useGchatClient,
+} from "./types";
+
+// ---------------------------------------------------------------------------
+// Queries
+// ---------------------------------------------------------------------------
+
+export function useChannels(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+
+  return useQuery({
+    queryKey: ["greatchat", "channels", config.accountId],
+    queryFn: () => client.listChannels(config.accountId),
+    enabled: !!config.accountId && !!config.token,
+    select: (res) => res.data || [],
+  });
+}
+
+export function useChannelWhatsappStatus(
+  config: GchatHookConfig,
+  channelId: number | null,
+  enabled = true,
+  pollingInterval?: number,
+) {
+  const client = useGchatClient(config);
+
+  return useQuery({
+    queryKey: ["greatchat", "channel-status", config.accountId, channelId],
+    queryFn: () =>
+      client.getChannelWhatsappStatus(config.accountId, channelId!),
+    enabled: !!config.accountId && !!config.token && !!channelId && enabled,
+    refetchInterval: pollingInterval ?? DEFAULT_CHANNEL_STATUS_POLLING,
+    select: (res) => {
+      const d = res.data;
+      return (Array.isArray(d) ? d[0] : d) as WhatsappStatus;
+    },
+  });
+}
+
+export function useChannelQR(
+  config: GchatHookConfig,
+  channelId: number | null,
+  enabled = false,
+  pollingInterval?: number,
+) {
+  const client = useGchatClient(config);
+
+  return useQuery({
+    queryKey: ["greatchat", "channel-qr", config.accountId, channelId],
+    queryFn: () => client.getChannelQR(config.accountId, channelId!),
+    enabled: !!config.accountId && !!config.token && !!channelId && enabled,
+    refetchInterval: pollingInterval ?? DEFAULT_QR_POLLING,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Mutations
+// ---------------------------------------------------------------------------
+
+export function useCreateChannel(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (
+      body: Pick<Channel, "name" | "type" | "provider"> &
+        Partial<Pick<Channel, "identifier" | "id_agent">>,
+    ) => client.createChannel(config.accountId, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"],
+      });
+    },
+  });
+}
+
+export function useUpdateChannel(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      body,
+    }: {
+      id: number;
+      body: Partial<
+        Pick<Channel, "name" | "identifier" | "status" | "id_agent">
+      >;
+    }) => client.updateChannel(config.accountId, id, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"],
+      });
+    },
+  });
+}
+
+export function useDeleteChannel(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (channelId: number) =>
+      client.deleteChannel(config.accountId, channelId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"],
+      });
+    },
+  });
+}
+
+export function useConnectChannel(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+
+  return useMutation({
+    mutationFn: (channelId: number) =>
+      client.connectChannel(config.accountId, channelId),
+  });
+}
+
+export function useDisconnectChannel(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (channelId: number) =>
+      client.disconnectChannel(config.accountId, channelId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channel-status"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"],
+      });
+    },
+  });
+}
+
+export function useLogoutChannel(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (channelId: number) =>
+      client.logoutChannel(config.accountId, channelId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channel-status"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "channels"],
+      });
+    },
+  });
+}

package/src/hooks/use-contacts.ts

@@ -0,0 +1,94 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { Contact } from "../types";
+import { type GchatHookConfig, useGchatClient } from "./types";
+
+// ---------------------------------------------------------------------------
+// Queries
+// ---------------------------------------------------------------------------
+
+export function useContacts(
+  config: GchatHookConfig,
+  params?: Record<string, string>,
+) {
+  const client = useGchatClient(config);
+
+  return useQuery({
+    queryKey: ["greatchat", "contacts", config.accountId, params],
+    queryFn: () => client.listContacts(config.accountId, params),
+    enabled: !!config.accountId && !!config.token,
+    select: (res) => ({ data: res.data || [], total: res.total || 0 }),
+  });
+}
+
+export function useGetContact(
+  config: GchatHookConfig,
+  contactId: number | null,
+) {
+  const client = useGchatClient(config);
+
+  return useQuery({
+    queryKey: ["greatchat", "contact", config.accountId, contactId],
+    queryFn: () => client.getContact(config.accountId, contactId!),
+    enabled: !!config.accountId && !!config.token && !!contactId,
+    select: (res) => {
+      const d = res.data;
+      return (Array.isArray(d) ? d[0] : d) as Contact;
+    },
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Mutations
+// ---------------------------------------------------------------------------
+
+export function useCreateContact(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: {
+      name: string;
+      phone_number?: string;
+      identifier?: string;
+    }) => client.createContact(config.accountId, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "contacts"],
+      });
+    },
+  });
+}
+
+export function useUpdateContact(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      body,
+    }: {
+      id: number;
+      body: { name?: string; phone_number?: string; identifier?: string };
+    }) => client.updateContact(config.accountId, id, body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "contacts"],
+      });
+    },
+  });
+}
+
+export function useDeleteContact(config: GchatHookConfig) {
+  const client = useGchatClient(config);
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: number) => client.deleteContact(config.accountId, id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["greatchat", "contacts"],
+      });
+    },
+  });
+}

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,
+        ],
+      });
+    },
+  });
+}