@greatapps/greatchat-ui 0.1.3 → 0.1.5

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { ClassValue } from 'clsx';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import * as _tanstack_query_core from '@tanstack/query-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 interface ApiResponse<T> {
     status: 0 | 1;
@@ -466,4 +467,21 @@ interface NewConversationDialogProps {
 }
 declare function NewConversationDialog({ open, onOpenChange, contacts, channels, existingInboxes, onCreateInbox, isCreating, onCreated, }: NewConversationDialogProps): react_jsx_runtime.JSX.Element;
 
-export { type ApiResponse, type Channel, ChatInput, type ChatInputProps, ChatView, type ChatViewProps, type Contact, ContactAvatar, type ContactAvatarProps, ContactInfoPanel, type ContactInfoPanelProps, DEFAULT_CHANNEL_STATUS_POLLING, DEFAULT_INBOX_POLLING, DEFAULT_MESSAGES_POLLING, DEFAULT_QR_POLLING, type GchatClientConfig, type GchatHookConfig, type Inbox, InboxItem, type InboxItemProps, type InboxMessage, InboxSidebar, type InboxSidebarProps, type InboxStats, MessageBubble, type MessageBubbleProps, type MessageContentType, NewConversationDialog, type NewConversationDialogProps, type WhatsappStatus, cn, createGchatClient, formatDateGroup, formatMessageTime, groupMessagesByDate, useChannelQR, useChannelWhatsappStatus, useChannels, useConnectChannel, useContacts, useCreateChannel, useCreateContact, useCreateInbox, useDeleteChannel, useDeleteContact, useDeleteInbox, useDisconnectChannel, useEditMessage, useGetContact, useInbox, useInboxMessages, useInboxStats, useInboxes, useLogoutChannel, useRetryMessage, useRevokeMessage, useSendMessage, useUpdateChannel, useUpdateContact, useUpdateInbox };
+interface ChannelCardProps {
+    channel: Channel;
+    config: GchatHookConfig;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    linkedAgentName?: string;
+    linkedAgentActive?: boolean;
+    actions?: ReactNode;
+}
+declare function ChannelCard({ channel, config, onEdit, onDelete, linkedAgentName, linkedAgentActive, actions, }: ChannelCardProps): react_jsx_runtime.JSX.Element;
+
+interface WhatsappStatusBadgeProps {
+    status: WhatsappStatus | undefined | null;
+    hasSession: boolean;
+}
+declare function WhatsappStatusBadge({ status, hasSession, }: WhatsappStatusBadgeProps): react_jsx_runtime.JSX.Element;
+
+export { type ApiResponse, type Channel, ChannelCard, type ChannelCardProps, ChatInput, type ChatInputProps, ChatView, type ChatViewProps, type Contact, ContactAvatar, type ContactAvatarProps, ContactInfoPanel, type ContactInfoPanelProps, DEFAULT_CHANNEL_STATUS_POLLING, DEFAULT_INBOX_POLLING, DEFAULT_MESSAGES_POLLING, DEFAULT_QR_POLLING, type GchatClientConfig, type GchatHookConfig, type Inbox, InboxItem, type InboxItemProps, type InboxMessage, InboxSidebar, type InboxSidebarProps, type InboxStats, MessageBubble, type MessageBubbleProps, type MessageContentType, NewConversationDialog, type NewConversationDialogProps, type WhatsappStatus, WhatsappStatusBadge, type WhatsappStatusBadgeProps, cn, createGchatClient, formatDateGroup, formatMessageTime, groupMessagesByDate, useChannelQR, useChannelWhatsappStatus, useChannels, useConnectChannel, useContacts, useCreateChannel, useCreateContact, useCreateInbox, useDeleteChannel, useDeleteContact, useDeleteInbox, useDisconnectChannel, useEditMessage, useGetContact, useInbox, useInboxMessages, useInboxStats, useInboxes, useLogoutChannel, useRetryMessage, useRevokeMessage, useSendMessage, useUpdateChannel, useUpdateContact, useUpdateInbox };

package/dist/index.js

@@ -2474,7 +2474,134 @@ function NewConversationDialog({
     ] })
   ] }) });
 }
+
+// src/components/whatsapp-status-badge.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function WhatsappStatusBadge({
+  status,
+  hasSession
+}) {
+  if (!hasSession) {
+    return /* @__PURE__ */ jsx24(Badge, { variant: "outline", className: "text-xs text-zinc-500 border-zinc-300", children: "Sem sess\xE3o" });
+  }
+  if (!status) {
+    return /* @__PURE__ */ jsx24(Badge, { variant: "outline", className: "text-xs text-zinc-500 border-zinc-300", children: "Verificando..." });
+  }
+  if (status.connected && status.logged_in) {
+    return /* @__PURE__ */ jsx24(
+      Badge,
+      {
+        variant: "outline",
+        className: "text-xs bg-green-500/10 text-green-600 border-green-200",
+        children: "Conectado"
+      }
+    );
+  }
+  if (status.connected && !status.logged_in) {
+    return /* @__PURE__ */ jsx24(
+      Badge,
+      {
+        variant: "outline",
+        className: "text-xs bg-yellow-500/10 text-yellow-600 border-yellow-200",
+        children: "Reconectando..."
+      }
+    );
+  }
+  if (status.logged_in && !status.connected) {
+    return /* @__PURE__ */ jsx24(
+      Badge,
+      {
+        variant: "outline",
+        className: "text-xs bg-yellow-500/10 text-yellow-600 border-yellow-200",
+        children: "Desconectado"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx24(
+    Badge,
+    {
+      variant: "outline",
+      className: "text-xs bg-red-500/10 text-red-600 border-red-200",
+      children: "Offline"
+    }
+  );
+}
+
+// src/components/channel-card.tsx
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+function ChannelCard({
+  channel,
+  config,
+  onEdit,
+  onDelete,
+  linkedAgentName,
+  linkedAgentActive = true,
+  actions
+}) {
+  const { data: status } = useChannelWhatsappStatus(config, channel.id);
+  const hasSession = !!channel.external_id;
+  return /* @__PURE__ */ jsxs14("div", { className: "rounded-lg border bg-card text-card-foreground shadow-sm", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-start justify-between p-4 pb-2", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx25("div", { className: "flex h-9 w-9 items-center justify-center rounded-md bg-green-500/10", children: /* @__PURE__ */ jsx25("svg", { className: "h-5 w-5 text-green-600", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx25("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }) }),
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx25("h3", { className: "text-sm font-medium", children: channel.name }),
+          /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground", children: channel.identifier || "Sem n\xFAmero" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1", children: [
+        onEdit && /* @__PURE__ */ jsx25(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-7 w-7",
+            onClick: onEdit,
+            children: /* @__PURE__ */ jsxs14("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx25("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+              /* @__PURE__ */ jsx25("path", { d: "m15 5 4 4" })
+            ] })
+          }
+        ),
+        onDelete && /* @__PURE__ */ jsx25(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-7 w-7 text-destructive hover:text-destructive",
+            onClick: onDelete,
+            children: /* @__PURE__ */ jsxs14("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx25("path", { d: "M3 6h18" }),
+              /* @__PURE__ */ jsx25("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+              /* @__PURE__ */ jsx25("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx25(WhatsappStatusBadge, { status, hasSession })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "p-4 pt-0 space-y-3", children: [
+      linkedAgentName && /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs14("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx25("path", { d: "M12 8V4H8" }),
+          /* @__PURE__ */ jsx25("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+          /* @__PURE__ */ jsx25("path", { d: "M2 14h2" }),
+          /* @__PURE__ */ jsx25("path", { d: "M20 14h2" }),
+          /* @__PURE__ */ jsx25("path", { d: "M15 13v2" }),
+          /* @__PURE__ */ jsx25("path", { d: "M9 13v2" })
+        ] }),
+        /* @__PURE__ */ jsxs14("span", { children: [
+          "Agent: ",
+          /* @__PURE__ */ jsx25("strong", { children: linkedAgentName })
+        ] }),
+        !linkedAgentActive && /* @__PURE__ */ jsx25("span", { className: "text-[10px] px-1 py-0 border rounded", children: "inativo" })
+      ] }),
+      actions
+    ] })
+  ] });
+}
 export {
+  ChannelCard,
   ChatInput,
   ChatView,
   ContactAvatar,
@@ -2487,6 +2614,7 @@ export {
   InboxSidebar,
   MessageBubble,
   NewConversationDialog,
+  WhatsappStatusBadge,
   cn,
   createGchatClient,
   formatDateGroup,