@greatapps/greatchat-ui 0.1.0 → 0.1.2

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,173 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { Check, ChevronRight } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={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}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <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}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-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 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,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute right-2 flex items-center justify-center pointer-events-none">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-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 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 z-50 overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/src/components/ui/select.tsx

@@ -0,0 +1,156 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { Check, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <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}
+      <SelectPrimitive.Icon asChild>
+        <ChevronsUpDown className="text-muted-foreground size-4 pointer-events-none" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <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={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <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}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <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}
+    >
+      <ChevronUp />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <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}
+    >
+      <ChevronDown />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectTrigger,
+  SelectValue,
+};

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,16 @@
+import { cn } from "../../lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-muted rounded-md animate-pulse", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <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}
+    />
+  );
+}
+
+export { Textarea };

package/src/hooks/index.ts

@@ -0,0 +1,14 @@
+// Config & Defaults
+export { type GchatHookConfig, DEFAULT_INBOX_POLLING, DEFAULT_MESSAGES_POLLING, DEFAULT_CHANNEL_STATUS_POLLING, DEFAULT_QR_POLLING } from "./types";
+
+// Inboxes
+export { useInboxes, useInbox, useInboxStats, useCreateInbox, useUpdateInbox, useDeleteInbox } from "./use-inboxes";
+
+// Inbox Messages
+export { useInboxMessages, useSendMessage, useRetryMessage, useRevokeMessage, useEditMessage } from "./use-inbox-messages";
+
+// Contacts
+export { useContacts, useGetContact, useCreateContact, useUpdateContact, useDeleteContact } from "./use-contacts";
+
+// Channels
+export { useChannels, useCreateChannel, useUpdateChannel, useDeleteChannel, useConnectChannel, useChannelWhatsappStatus, useChannelQR, useDisconnectChannel, useLogoutChannel } from "./use-channels";

package/src/hooks/types.ts

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import { createGchatClient } from "../client";
+
+// ---------------------------------------------------------------------------
+// Hook Configuration
+// ---------------------------------------------------------------------------
+
+export interface GchatHookConfig {
+  accountId: number;
+  token: string;
+  baseUrl: string;
+  language?: string;
+  idWl?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Polling Defaults (ms)
+// ---------------------------------------------------------------------------
+
+export const DEFAULT_INBOX_POLLING = 5000;
+export const DEFAULT_MESSAGES_POLLING = 3000;
+export const DEFAULT_CHANNEL_STATUS_POLLING = 5000;
+export const DEFAULT_QR_POLLING = 2000;
+
+// ---------------------------------------------------------------------------
+// Internal helper — memoized client from config
+// ---------------------------------------------------------------------------
+
+export function useGchatClient(config: GchatHookConfig) {
+  return useMemo(
+    () =>
+      createGchatClient({
+        baseUrl: config.baseUrl,
+        token: config.token,
+        language: config.language,
+        idWl: config.idWl,
+      }),
+    [config.baseUrl, config.token, config.language, config.idWl],
+  );
+}

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