@greatapps/greatagents-ui 0.3.3 → 0.3.4

package/src/components/capabilities/integration-card.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import type { IntegrationCardData, IntegrationCardState } from "../../hooks/use-integrations";
+import { Badge, Button, Tooltip, TooltipContent, TooltipTrigger } from "@greatapps/greatauth-ui/ui";
+import {
+  CalendarSync,
+  Plug,
+  Settings,
+  RefreshCw,
+  Users,
+  Clock,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "../../lib";
+
+// ---------------------------------------------------------------------------
+// Icon mapping — extend as new integrations are added
+// ---------------------------------------------------------------------------
+
+const ICON_MAP: Record<string, LucideIcon> = {
+  CalendarSync,
+  Plug,
+  Settings,
+  RefreshCw,
+  Users,
+  Clock,
+};
+
+function resolveIcon(name: string): LucideIcon {
+  return ICON_MAP[name] ?? Plug;
+}
+
+// ---------------------------------------------------------------------------
+// Badge helpers
+// ---------------------------------------------------------------------------
+
+interface BadgeVariant {
+  label: string;
+  className: string;
+}
+
+const STATE_BADGES: Record<IntegrationCardState, BadgeVariant> = {
+  available: {
+    label: "Disponível",
+    className: "bg-muted text-muted-foreground",
+  },
+  connected: {
+    label: "Conectado",
+    className: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+  },
+  expired: {
+    label: "Expirado",
+    className: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
+  },
+  coming_soon: {
+    label: "Em breve",
+    className: "bg-muted text-muted-foreground",
+  },
+};
+
+function getActionLabel(state: IntegrationCardState): string {
+  switch (state) {
+    case "available":
+      return "Conectar";
+    case "connected":
+      return "Configurar";
+    case "expired":
+      return "Reconectar";
+    default:
+      return "";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export interface IntegrationCardProps {
+  card: IntegrationCardData;
+  onConnect: (card: IntegrationCardData) => void;
+}
+
+export function IntegrationCard({ card, onConnect }: IntegrationCardProps) {
+  const { definition, state, sharedByAgentsCount } = card;
+  const Icon = resolveIcon(definition.icon);
+  const badge = STATE_BADGES[state];
+  const actionLabel = getActionLabel(state);
+  const isComingSoon = state === "coming_soon";
+
+  return (
+    <div
+      className={cn(
+        "group relative flex flex-col gap-3 rounded-xl border bg-card p-5 transition-shadow",
+        isComingSoon
+          ? "opacity-60 cursor-default"
+          : "hover:shadow-md cursor-pointer",
+      )}
+      role="button"
+      tabIndex={isComingSoon ? -1 : 0}
+      aria-label={`${definition.name} — ${badge.label}`}
+      aria-disabled={isComingSoon}
+      onClick={() => !isComingSoon && onConnect(card)}
+      onKeyDown={(e) => {
+        if (!isComingSoon && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onConnect(card);
+        }
+      }}
+    >
+      {/* Header row */}
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <Icon className="h-5 w-5" />
+        </div>
+        <Badge variant="outline" className={cn("text-xs", badge.className)}>
+          {badge.label}
+        </Badge>
+      </div>
+
+      {/* Name + description */}
+      <div className="space-y-1">
+        <h3 className="text-sm font-semibold leading-tight">{definition.name}</h3>
+        <p className="text-xs text-muted-foreground leading-relaxed">
+          {definition.description}
+        </p>
+      </div>
+
+      {/* Footer */}
+      <div className="mt-auto flex items-center justify-between gap-2 pt-1">
+        {sharedByAgentsCount > 0 ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400">
+                <Users className="h-3.5 w-3.5" />
+                Compartilhada
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              Esta credencial está disponível para todos os agentes da conta
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <span />
+        )}
+
+        {!isComingSoon && (
+          <Button
+            variant={state === "expired" ? "destructive" : "outline"}
+            size="sm"
+            className="text-xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              onConnect(card);
+            }}
+          >
+            {actionLabel}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/capabilities/integration-wizard.tsx

@@ -0,0 +1,537 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Button,
+} from "@greatapps/greatauth-ui/ui";
+import { Loader2, ChevronLeft, ChevronRight, Check } from "lucide-react";
+import { toast } from "sonner";
+
+import type { GagentsHookConfig } from "../../hooks/types";
+import type { IntegrationDefinition } from "../../data/integrations-registry";
+import type {
+  WizardIntegrationMeta,
+  OAuthResult,
+  OAuthStatus,
+  WizardStep,
+} from "./types";
+import { InfoStep } from "./wizard-steps/info-step";
+import { CredentialsStep } from "./wizard-steps/credentials-step";
+import { ConfigStep, type ConfigOption } from "./wizard-steps/config-step";
+import { ConfirmStep } from "./wizard-steps/confirm-step";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const STEPS: WizardStep[] = ["info", "credentials", "config", "confirm"];
+
+const STEP_LABELS: Record<WizardStep, string> = {
+  info: "Informação",
+  credentials: "Credenciais",
+  config: "Configuração",
+  confirm: "Confirmação",
+};
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface IntegrationWizardProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Base integration definition from registry */
+  integration: IntegrationDefinition;
+  /** Wizard-specific metadata (capabilities, requirements, etc.) */
+  meta: WizardIntegrationMeta;
+  agentId: string | number;
+  config: GagentsHookConfig;
+  onComplete: () => void;
+  /** gagents-r3-api base URL (used to build OAuth URLs) */
+  gagentsApiUrl: string;
+  /**
+   * Existing credential ID -- when set, the wizard opens in edit mode
+   * (step 2 shows "Reconectar" and step 3 is pre-filled).
+   */
+  existingCredentialId?: number;
+  /**
+   * Callback to load config options after OAuth completes.
+   * e.g. load Google Calendar list. Returns ConfigOption[].
+   */
+  loadConfigOptions?: (credentialId: number) => Promise<ConfigOption[]>;
+  /**
+   * Existing config value to pre-fill the config step in edit/reconnect mode.
+   */
+  existingConfigValue?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function IntegrationWizard({
+  open,
+  onOpenChange,
+  integration,
+  meta,
+  agentId: _agentId,
+  config,
+  onComplete,
+  gagentsApiUrl,
+  existingCredentialId,
+  loadConfigOptions,
+  existingConfigValue,
+}: IntegrationWizardProps) {
+  const isReconnect = !!existingCredentialId;
+
+  // Step navigation
+  const [currentStep, setCurrentStep] = useState<WizardStep>("info");
+  const currentIndex = STEPS.indexOf(currentStep);
+
+  // OAuth state
+  const [oauthStatus, setOauthStatus] = useState<OAuthStatus>("idle");
+  const [oauthResult, setOauthResult] = useState<OAuthResult | null>(null);
+  const popupRef = useRef<Window | null>(null);
+  const popupPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // API Key state
+  const [apiKey, setApiKey] = useState("");
+
+  // Config state
+  const [configOptions, setConfigOptions] = useState<ConfigOption[]>([]);
+  const [configLoading, setConfigLoading] = useState(false);
+  const [selectedConfigValue, setSelectedConfigValue] = useState("");
+
+  // Confirm state
+  const [enableOnComplete, setEnableOnComplete] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Clean up popup poll interval on unmount
+  useEffect(() => {
+    return () => {
+      if (popupPollRef.current) {
+        clearInterval(popupPollRef.current);
+      }
+    };
+  }, []);
+
+  // Reset state when dialog opens/closes
+  useEffect(() => {
+    if (open) {
+      setCurrentStep("info");
+      setOauthStatus("idle");
+      setOauthResult(null);
+      setApiKey("");
+      setConfigOptions([]);
+      setConfigLoading(false);
+      setSelectedConfigValue(existingConfigValue ?? "");
+      setEnableOnComplete(true);
+      setIsSubmitting(false);
+    } else {
+      // Close any lingering popup
+      if (popupRef.current && !popupRef.current.closed) {
+        popupRef.current.close();
+      }
+      // Clear popup poll interval
+      if (popupPollRef.current) {
+        clearInterval(popupPollRef.current);
+        popupPollRef.current = null;
+      }
+    }
+  }, [open]);
+
+  // -----------------------------------------------------------------------
+  // OAuth popup message listener
+  // -----------------------------------------------------------------------
+
+  const handleOAuthMessage = useCallback(
+    (event: MessageEvent) => {
+      // Validate origin against gagents API URL
+      try {
+        if (event.origin !== new URL(gagentsApiUrl).origin) return;
+      } catch {
+        return;
+      }
+
+      // Only accept messages from our popup -- check for known data shape
+      if (!event.data || typeof event.data !== "object") return;
+      const msg = event.data as {
+        type?: string;
+        success?: boolean;
+        email?: string;
+        error?: string;
+        credentialId?: number;
+      };
+
+      if (msg.type !== "oauth-callback") return;
+
+      if (msg.success) {
+        setOauthStatus("success");
+        setOauthResult({
+          success: true,
+          email: msg.email,
+          credentialId: msg.credentialId,
+        });
+
+        // Auto-load config options if available
+        const credId = msg.credentialId || existingCredentialId;
+        if (credId && loadConfigOptions && meta.hasConfigStep) {
+          setConfigLoading(true);
+          loadConfigOptions(credId)
+            .then((opts) => {
+              setConfigOptions(opts);
+              if (opts.length === 1) {
+                setSelectedConfigValue(opts[0].id);
+              }
+            })
+            .catch(() => setConfigOptions([]))
+            .finally(() => setConfigLoading(false));
+        }
+
+        // Auto-advance to next step after a brief delay
+        setTimeout(() => {
+          setCurrentStep(meta.hasConfigStep ? "config" : "confirm");
+        }, 1200);
+      } else {
+        setOauthStatus("error");
+        setOauthResult({
+          success: false,
+          error: msg.error || "Falha na autorização",
+        });
+      }
+    },
+    [gagentsApiUrl, existingCredentialId, meta.hasConfigStep, loadConfigOptions],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener("message", handleOAuthMessage);
+    return () => window.removeEventListener("message", handleOAuthMessage);
+  }, [open, handleOAuthMessage]);
+
+  // -----------------------------------------------------------------------
+  // OAuth start
+  // -----------------------------------------------------------------------
+
+  function startOAuth() {
+    const { language = "pt-br", idWl = 1, accountId } = config;
+
+    // Build OAuth authorize URL -- the backend already handles the full flow
+    const redirectUri = `${window.location.origin}/oauth/callback`;
+    const url = new URL(
+      `${gagentsApiUrl}/v1/${language}/${idWl}/accounts/${accountId}/oauth/authorize/${integration.slug}`,
+    );
+    url.searchParams.set("redirect_uri", redirectUri);
+
+    setOauthStatus("waiting");
+
+    // Open popup
+    const popup = window.open(
+      url.toString(),
+      "oauth-popup",
+      "width=500,height=600,scrollbars=yes,resizable=yes",
+    );
+    popupRef.current = popup;
+
+    // Poll for popup closed without completing
+    if (popup) {
+      // Clear any previous poll interval
+      if (popupPollRef.current) {
+        clearInterval(popupPollRef.current);
+      }
+      popupPollRef.current = setInterval(() => {
+        if (popup.closed) {
+          if (popupPollRef.current) {
+            clearInterval(popupPollRef.current);
+            popupPollRef.current = null;
+          }
+          // Only set error if we're still waiting (no success message received)
+          setOauthStatus((prev) =>
+            prev === "waiting" ? "error" : prev,
+          );
+          setOauthResult((prev) =>
+            prev === null
+              ? { success: false, error: "Janela fechada antes de concluir" }
+              : prev,
+          );
+        }
+      }, 500);
+    }
+  }
+
+  // -----------------------------------------------------------------------
+  // Navigation
+  // -----------------------------------------------------------------------
+
+  function canAdvance(): boolean {
+    switch (currentStep) {
+      case "info":
+        return true;
+      case "credentials":
+        if (integration.authType === "oauth2") {
+          return oauthStatus === "success";
+        }
+        return apiKey.trim().length > 0;
+      case "config":
+        // Config step is optional -- can always advance
+        return true;
+      case "confirm":
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  function goNext() {
+    if (!canAdvance()) return;
+
+    // Skip config step if not needed
+    if (currentStep === "credentials" && !meta.hasConfigStep) {
+      setCurrentStep("confirm");
+      return;
+    }
+
+    const nextIndex = currentIndex + 1;
+    if (nextIndex < STEPS.length) {
+      setCurrentStep(STEPS[nextIndex]);
+    }
+  }
+
+  function goPrev() {
+    // Skip config step backwards if not needed
+    if (currentStep === "confirm" && !meta.hasConfigStep) {
+      setCurrentStep("credentials");
+      return;
+    }
+
+    const prevIndex = currentIndex - 1;
+    if (prevIndex >= 0) {
+      setCurrentStep(STEPS[prevIndex]);
+    }
+  }
+
+  // -----------------------------------------------------------------------
+  // Complete
+  // -----------------------------------------------------------------------
+
+  async function handleComplete() {
+    setIsSubmitting(true);
+    try {
+      // The actual credential creation happened during OAuth callback
+      // or will happen via API key submission. Here we just finalize.
+      //
+      // For OAuth, the credential was already created by the backend callback.
+      // The parent component handles any additional linking (agent_tool creation)
+      // via the onComplete callback.
+
+      onComplete();
+      onOpenChange(false);
+      toast.success(
+        `${integration.name} ${isReconnect ? "reconectado" : "configurado"} com sucesso!`,
+      );
+    } catch {
+      toast.error("Erro ao finalizar configuração");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  // -----------------------------------------------------------------------
+  // Render
+  // -----------------------------------------------------------------------
+
+  const selectedConfigOption =
+    configOptions.find((o) => o.id === selectedConfigValue) || null;
+
+  const isLastStep = currentStep === "confirm";
+
+  // Effective steps (may skip config)
+  const effectiveSteps = meta.hasConfigStep
+    ? STEPS
+    : STEPS.filter((s) => s !== "config");
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{integration.name}</DialogTitle>
+        </DialogHeader>
+
+        {/* Step indicator */}
+        <StepIndicator steps={effectiveSteps} currentStep={currentStep} />
+
+        {/* Step content */}
+        <div className="min-h-[280px] py-2">
+          {currentStep === "info" && (
+            <InfoStep
+              integration={integration}
+              meta={meta}
+            />
+          )}
+          {currentStep === "credentials" && (
+            <CredentialsStep
+              integration={integration}
+              meta={meta}
+              oauthStatus={oauthStatus}
+              oauthResult={oauthResult}
+              apiKey={apiKey}
+              onApiKeyChange={setApiKey}
+              onStartOAuth={startOAuth}
+              isReconnect={isReconnect}
+            />
+          )}
+          {currentStep === "config" && (
+            <ConfigStep
+              integration={integration}
+              options={configOptions}
+              isLoading={configLoading}
+              selectedValue={selectedConfigValue}
+              onValueChange={setSelectedConfigValue}
+            />
+          )}
+          {currentStep === "confirm" && (
+            <ConfirmStep
+              integration={integration}
+              oauthResult={oauthResult}
+              selectedConfigOption={selectedConfigOption}
+              enableOnComplete={enableOnComplete}
+              onEnableChange={setEnableOnComplete}
+            />
+          )}
+        </div>
+
+        {/* Footer */}
+        <DialogFooter className="flex-row justify-between sm:justify-between">
+          <div>
+            {currentStep === "info" ? (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancelar
+              </Button>
+            ) : (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={goPrev}
+                className="gap-1"
+              >
+                <ChevronLeft aria-hidden="true" className="h-4 w-4" />
+                Voltar
+              </Button>
+            )}
+          </div>
+          <div>
+            {isLastStep ? (
+              <Button
+                type="button"
+                onClick={handleComplete}
+                disabled={isSubmitting}
+                className="gap-1"
+              >
+                {isSubmitting ? (
+                  <Loader2
+                    aria-hidden="true"
+                    className="h-4 w-4 animate-spin"
+                  />
+                ) : (
+                  <Check aria-hidden="true" className="h-4 w-4" />
+                )}
+                Concluir
+              </Button>
+            ) : (
+              <Button
+                type="button"
+                onClick={goNext}
+                disabled={!canAdvance()}
+                className="gap-1"
+              >
+                Continuar
+                <ChevronRight aria-hidden="true" className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step Indicator
+// ---------------------------------------------------------------------------
+
+function StepIndicator({
+  steps,
+  currentStep,
+}: {
+  steps: WizardStep[];
+  currentStep: WizardStep;
+}) {
+  const currentIndex = steps.indexOf(currentStep);
+
+  return (
+    <div
+      className="flex items-center justify-center gap-1 py-2"
+      role="list"
+      aria-label="Passos do assistente"
+    >
+      {steps.map((step, i) => {
+        const isCompleted = i < currentIndex;
+        const isCurrent = step === currentStep;
+
+        return (
+          <div key={step} className="flex items-center" role="listitem">
+            {/* Circle */}
+            <div
+              className={`
+                flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium
+                transition-colors duration-200
+                ${
+                  isCurrent
+                    ? "bg-primary text-primary-foreground"
+                    : isCompleted
+                      ? "bg-green-600 text-white"
+                      : "bg-muted text-muted-foreground"
+                }
+              `}
+              aria-current={isCurrent ? "step" : undefined}
+              aria-label={`${STEP_LABELS[step]}${isCompleted ? " (concluído)" : isCurrent ? " (atual)" : ""}`}
+            >
+              {isCompleted ? (
+                <Check aria-hidden="true" className="h-3.5 w-3.5" />
+              ) : (
+                i + 1
+              )}
+            </div>
+            {/* Label */}
+            <span
+              className={`
+                ml-1.5 hidden text-xs sm:inline
+                ${isCurrent ? "font-medium text-foreground" : "text-muted-foreground"}
+              `}
+            >
+              {STEP_LABELS[step]}
+            </span>
+            {/* Connector line */}
+            {i < steps.length - 1 && (
+              <div
+                className={`
+                  mx-2 h-px w-6
+                  ${i < currentIndex ? "bg-green-600" : "bg-border"}
+                `}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}