@greatapps/greatchat-ui 0.1.3 → 0.1.5

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@greatapps/greatchat-ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     }
   },
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"
@@ -24,6 +28,8 @@
     "sonner": "*"
   },
   "dependencies": {
+    "@greatapps/greatauth-ui": "^0.1.4",
+    "@greatapps/greatchat-ui": "^0.1.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2",
     "cmdk": "^1.1.1",

package/src/components/channel-card.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { Channel } from "../types";
+import type { GchatHookConfig } from "../hooks/types";
+import { useChannelWhatsappStatus } from "../hooks/use-channels";
+import { WhatsappStatusBadge } from "./whatsapp-status-badge";
+import { Button } from "./ui/button";
+
+export interface ChannelCardProps {
+  channel: Channel;
+  config: GchatHookConfig;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  linkedAgentName?: string;
+  linkedAgentActive?: boolean;
+  actions?: ReactNode;
+}
+
+export function ChannelCard({
+  channel,
+  config,
+  onEdit,
+  onDelete,
+  linkedAgentName,
+  linkedAgentActive = true,
+  actions,
+}: ChannelCardProps) {
+  const { data: status } = useChannelWhatsappStatus(config, channel.id);
+  const hasSession = !!channel.external_id;
+
+  return (
+    <div className="rounded-lg border bg-card text-card-foreground shadow-sm">
+      <div className="flex flex-row items-start justify-between p-4 pb-2">
+        <div className="flex items-center gap-2">
+          <div className="flex h-9 w-9 items-center justify-center rounded-md bg-green-500/10">
+            <svg className="h-5 w-5 text-green-600" viewBox="0 0 24 24" fill="currentColor">
+              <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" />
+            </svg>
+          </div>
+          <div>
+            <h3 className="text-sm font-medium">{channel.name}</h3>
+            <p className="text-xs text-muted-foreground">
+              {channel.identifier || "Sem número"}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-1">
+          {onEdit && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={onEdit}
+            >
+              <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                <path d="m15 5 4 4" />
+              </svg>
+            </Button>
+          )}
+          {onDelete && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 text-destructive hover:text-destructive"
+              onClick={onDelete}
+            >
+              <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M3 6h18" />
+                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+              </svg>
+            </Button>
+          )}
+          <WhatsappStatusBadge status={status} hasSession={hasSession} />
+        </div>
+      </div>
+      <div className="p-4 pt-0 space-y-3">
+        {linkedAgentName && (
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 8V4H8" />
+              <rect width="16" height="12" x="4" y="8" rx="2" />
+              <path d="M2 14h2" />
+              <path d="M20 14h2" />
+              <path d="M15 13v2" />
+              <path d="M9 13v2" />
+            </svg>
+            <span>Agent: <strong>{linkedAgentName}</strong></span>
+            {!linkedAgentActive && (
+              <span className="text-[10px] px-1 py-0 border rounded">inativo</span>
+            )}
+          </div>
+        )}
+        {actions}
+      </div>
+    </div>
+  );
+}

package/src/components/index.ts

@@ -21,3 +21,9 @@ export type { ContactInfoPanelProps } from "./contact-info-panel";
 
 export { NewConversationDialog } from "./new-conversation-dialog";
 export type { NewConversationDialogProps } from "./new-conversation-dialog";
+
+export { ChannelCard } from "./channel-card";
+export type { ChannelCardProps } from "./channel-card";
+
+export { WhatsappStatusBadge } from "./whatsapp-status-badge";
+export type { WhatsappStatusBadgeProps } from "./whatsapp-status-badge";

package/src/components/whatsapp-status-badge.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import type { WhatsappStatus } from "../types";
+import { Badge } from "./ui/badge";
+
+export interface WhatsappStatusBadgeProps {
+  status: WhatsappStatus | undefined | null;
+  hasSession: boolean;
+}
+
+export function WhatsappStatusBadge({
+  status,
+  hasSession,
+}: WhatsappStatusBadgeProps) {
+  if (!hasSession) {
+    return (
+      <Badge variant="outline" className="text-xs text-zinc-500 border-zinc-300">
+        Sem sessão
+      </Badge>
+    );
+  }
+
+  if (!status) {
+    return (
+      <Badge variant="outline" className="text-xs text-zinc-500 border-zinc-300">
+        Verificando...
+      </Badge>
+    );
+  }
+
+  if (status.connected && status.logged_in) {
+    return (
+      <Badge
+        variant="outline"
+        className="text-xs bg-green-500/10 text-green-600 border-green-200"
+      >
+        Conectado
+      </Badge>
+    );
+  }
+
+  if (status.connected && !status.logged_in) {
+    return (
+      <Badge
+        variant="outline"
+        className="text-xs bg-yellow-500/10 text-yellow-600 border-yellow-200"
+      >
+        Reconectando...
+      </Badge>
+    );
+  }
+
+  if (status.logged_in && !status.connected) {
+    return (
+      <Badge
+        variant="outline"
+        className="text-xs bg-yellow-500/10 text-yellow-600 border-yellow-200"
+      >
+        Desconectado
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge
+      variant="outline"
+      className="text-xs bg-red-500/10 text-red-600 border-red-200"
+    >
+      Offline
+    </Badge>
+  );
+}

package/src/index.ts

@@ -31,6 +31,8 @@ export {
   InboxSidebar,
   ContactInfoPanel,
   NewConversationDialog,
+  ChannelCard,
+  WhatsappStatusBadge,
 } from "./components";
 export type {
   ChatViewProps,
@@ -41,4 +43,6 @@ export type {
   InboxSidebarProps,
   ContactInfoPanelProps,
   NewConversationDialogProps,
+  ChannelCardProps,
+  WhatsappStatusBadgeProps,
 } from "./components";