@greatapps/greatagents-ui 0.3.2 → 0.3.4

package/src/components/capabilities/wizard-steps/config-step.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { Loader2 } from "lucide-react";
+import {
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@greatapps/greatauth-ui/ui";
+import type { IntegrationDefinition } from "../../../data/integrations-registry";
+
+export interface ConfigOption {
+  id: string;
+  label: string;
+  description?: string;
+}
+
+interface ConfigStepProps {
+  integration: IntegrationDefinition;
+  /** Available options loaded from backend (e.g. calendars) */
+  options: ConfigOption[];
+  isLoading: boolean;
+  selectedValue: string;
+  onValueChange: (value: string) => void;
+  /** Custom label for the select dropdown */
+  selectLabel?: string;
+  /** Custom placeholder */
+  selectPlaceholder?: string;
+}
+
+export function ConfigStep({
+  integration,
+  options,
+  isLoading,
+  selectedValue,
+  onValueChange,
+  selectLabel,
+  selectPlaceholder,
+}: ConfigStepProps) {
+  const label = selectLabel || getDefaultLabel(integration.slug);
+  const placeholder =
+    selectPlaceholder || getDefaultPlaceholder(integration.slug);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Configuração</h3>
+        <p className="text-sm text-muted-foreground">
+          Configure as opções específicas da integração.
+        </p>
+      </div>
+
+      {isLoading ? (
+        <div className="flex flex-col items-center gap-3 py-8">
+          <Loader2
+            aria-hidden="true"
+            className="h-6 w-6 animate-spin text-muted-foreground"
+          />
+          <p className="text-sm text-muted-foreground">
+            Carregando opções...
+          </p>
+        </div>
+      ) : options.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-6 text-center">
+          <p className="text-sm text-muted-foreground">
+            Nenhuma opção disponível. A configuração padrão será usada.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          <Label htmlFor="integration-config-select">{label}</Label>
+          <Select value={selectedValue} onValueChange={onValueChange}>
+            <SelectTrigger id="integration-config-select">
+              <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((opt) => (
+                <SelectItem key={opt.id} value={opt.id}>
+                  <span>{opt.label}</span>
+                  {opt.description && (
+                    <span className="ml-2 text-xs text-muted-foreground">
+                      ({opt.description})
+                    </span>
+                  )}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function getDefaultLabel(slug: string): string {
+  switch (slug) {
+    case "google_calendar":
+      return "Calendário";
+    default:
+      return "Opção";
+  }
+}
+
+function getDefaultPlaceholder(slug: string): string {
+  switch (slug) {
+    case "google_calendar":
+      return "Selecione o calendário...";
+    default:
+      return "Selecione uma opção...";
+  }
+}

package/src/components/capabilities/wizard-steps/confirm-step.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { CheckCircle2 } from "lucide-react";
+import { Label } from "@greatapps/greatauth-ui/ui";
+import type { IntegrationDefinition } from "../../../data/integrations-registry";
+import type { OAuthResult } from "../types";
+import type { ConfigOption } from "./config-step";
+
+interface ConfirmStepProps {
+  integration: IntegrationDefinition;
+  oauthResult: OAuthResult | null;
+  selectedConfigOption: ConfigOption | null;
+  enableOnComplete: boolean;
+  onEnableChange: (enabled: boolean) => void;
+}
+
+export function ConfirmStep({
+  integration,
+  oauthResult,
+  selectedConfigOption,
+  enableOnComplete,
+  onEnableChange,
+}: ConfirmStepProps) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Confirmação</h3>
+        <p className="text-sm text-muted-foreground">
+          Revise as configurações antes de concluir.
+        </p>
+      </div>
+
+      {/* Summary */}
+      <div className="space-y-3 rounded-lg border p-4">
+        <SummaryRow label="Integração" value={integration.name} />
+
+        {oauthResult?.email && (
+          <SummaryRow label="Conta conectada" value={oauthResult.email} />
+        )}
+
+        {selectedConfigOption && (
+          <SummaryRow
+            label={getConfigLabel(integration.slug)}
+            value={selectedConfigOption.label}
+          />
+        )}
+
+        <SummaryRow
+          label="Tipo de autenticação"
+          value={integration.authType === "oauth2" ? "OAuth 2.0" : "API Key"}
+        />
+      </div>
+
+      {/* Enable toggle */}
+      <div className="flex items-center justify-between rounded-lg border p-4">
+        <div className="space-y-0.5">
+          <Label htmlFor="enable-on-complete" className="text-sm font-medium">
+            Ativar imediatamente
+          </Label>
+          <p className="text-xs text-muted-foreground">
+            A integração ficará ativa assim que concluir o assistente.
+          </p>
+        </div>
+        <button
+          id="enable-on-complete"
+          role="switch"
+          type="button"
+          aria-checked={enableOnComplete}
+          onClick={() => onEnableChange(!enableOnComplete)}
+          className={`
+            relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent
+            transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2
+            focus-visible:ring-ring focus-visible:ring-offset-2
+            ${enableOnComplete ? "bg-primary" : "bg-muted"}
+          `}
+        >
+          <span
+            aria-hidden="true"
+            className={`
+              pointer-events-none inline-block h-5 w-5 transform rounded-full bg-background shadow-lg
+              ring-0 transition duration-200 ease-in-out
+              ${enableOnComplete ? "translate-x-5" : "translate-x-0"}
+            `}
+          />
+        </button>
+      </div>
+
+      {/* Success indicator */}
+      <div className="flex items-center gap-2 rounded-md bg-green-50 p-3 dark:bg-green-950/20">
+        <CheckCircle2
+          aria-hidden="true"
+          className="h-4 w-4 shrink-0 text-green-600"
+        />
+        <p className="text-xs text-green-700 dark:text-green-400">
+          Tudo pronto! Clique em &quot;Concluir&quot; para finalizar a
+          configuração.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function SummaryRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between text-sm">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-medium">{value}</span>
+    </div>
+  );
+}
+
+function getConfigLabel(slug: string): string {
+  switch (slug) {
+    case "google_calendar":
+      return "Calendário";
+    default:
+      return "Configuração";
+  }
+}

package/src/components/capabilities/wizard-steps/credentials-step.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import { CheckCircle2, Loader2, AlertCircle, Shield } from "lucide-react";
+import { Button, Input, Label } from "@greatapps/greatauth-ui/ui";
+import type { IntegrationDefinition } from "../../../data/integrations-registry";
+import type { WizardIntegrationMeta, OAuthStatus, OAuthResult } from "../types";
+
+interface CredentialsStepProps {
+  integration: IntegrationDefinition;
+  meta: WizardIntegrationMeta;
+  oauthStatus: OAuthStatus;
+  oauthResult: OAuthResult | null;
+  apiKey: string;
+  onApiKeyChange: (value: string) => void;
+  onStartOAuth: () => void;
+  isReconnect?: boolean;
+}
+
+export function CredentialsStep({
+  integration,
+  meta,
+  oauthStatus,
+  oauthResult,
+  apiKey,
+  onApiKeyChange,
+  onStartOAuth,
+  isReconnect = false,
+}: CredentialsStepProps) {
+  if (integration.authType === "oauth2") {
+    return (
+      <OAuthCredentials
+        integration={integration}
+        meta={meta}
+        oauthStatus={oauthStatus}
+        oauthResult={oauthResult}
+        onStartOAuth={onStartOAuth}
+        isReconnect={isReconnect}
+      />
+    );
+  }
+
+  return <ApiKeyCredentials apiKey={apiKey} onApiKeyChange={onApiKeyChange} />;
+}
+
+// ---------------------------------------------------------------------------
+// OAuth flow UI
+// ---------------------------------------------------------------------------
+
+function OAuthCredentials({
+  integration,
+  meta,
+  oauthStatus,
+  oauthResult,
+  onStartOAuth,
+  isReconnect,
+}: {
+  integration: IntegrationDefinition;
+  meta: WizardIntegrationMeta;
+  oauthStatus: OAuthStatus;
+  oauthResult: OAuthResult | null;
+  onStartOAuth: () => void;
+  isReconnect: boolean;
+}) {
+  const providerLabel = meta.providerLabel || integration.name;
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Autenticação</h3>
+        <p className="text-sm text-muted-foreground">
+          {isReconnect
+            ? `Reconecte sua conta ${providerLabel} para renovar a autorização.`
+            : `Conecte sua conta ${providerLabel} para permitir o acesso.`}
+        </p>
+      </div>
+
+      {/* OAuth status area */}
+      <div className="flex flex-col items-center gap-4 rounded-lg border p-6">
+        {oauthStatus === "idle" && (
+          <Button onClick={onStartOAuth} size="lg" className="gap-2">
+            {meta.icon}
+            {isReconnect
+              ? `Reconectar com ${providerLabel}`
+              : `Conectar com ${providerLabel}`}
+          </Button>
+        )}
+
+        {oauthStatus === "waiting" && (
+          <div className="flex flex-col items-center gap-3 text-center">
+            <Loader2
+              aria-hidden="true"
+              className="h-8 w-8 animate-spin text-muted-foreground"
+            />
+            <div>
+              <p className="text-sm font-medium">Aguardando autorização...</p>
+              <p className="text-xs text-muted-foreground">
+                Complete o login na janela que foi aberta.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {oauthStatus === "success" && oauthResult && (
+          <div className="flex flex-col items-center gap-3 text-center">
+            <CheckCircle2
+              aria-hidden="true"
+              className="h-8 w-8 text-green-600"
+            />
+            <div>
+              <p className="text-sm font-medium text-green-700">
+                Conectado com sucesso!
+              </p>
+              {oauthResult.email && (
+                <p className="text-xs text-muted-foreground">
+                  {oauthResult.email}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {oauthStatus === "error" && (
+          <div className="flex flex-col items-center gap-3 text-center">
+            <AlertCircle
+              aria-hidden="true"
+              className="h-8 w-8 text-destructive"
+            />
+            <div>
+              <p className="text-sm font-medium text-destructive">
+                Falha na conexão
+              </p>
+              {oauthResult?.error && (
+                <p className="text-xs text-muted-foreground">
+                  {oauthResult.error}
+                </p>
+              )}
+            </div>
+            <Button variant="outline" onClick={onStartOAuth} size="sm">
+              Tentar novamente
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Security note */}
+      <div className="flex items-start gap-2 rounded-md bg-muted/50 p-3">
+        <Shield
+          aria-hidden="true"
+          className="mt-0.5 h-4 w-4 shrink-0 text-green-600"
+        />
+        <p className="text-xs text-muted-foreground">
+          Seus dados estão seguros. Usamos OAuth 2.0 para autenticação — nunca
+          armazenamos sua senha. Você pode revogar o acesso a qualquer momento
+          nas configurações da sua conta {providerLabel}.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// API Key flow UI
+// ---------------------------------------------------------------------------
+
+function ApiKeyCredentials({
+  apiKey,
+  onApiKeyChange,
+}: {
+  apiKey: string;
+  onApiKeyChange: (value: string) => void;
+}) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold">Autenticação</h3>
+        <p className="text-sm text-muted-foreground">
+          Insira a chave de API para conectar a integração.
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="integration-api-key">Chave de API</Label>
+        <Input
+          id="integration-api-key"
+          type="password"
+          autoComplete="off"
+          placeholder="Insira sua chave de API..."
+          value={apiKey}
+          onChange={(e) => onApiKeyChange(e.target.value)}
+        />
+      </div>
+
+      <div className="flex items-start gap-2 rounded-md bg-muted/50 p-3">
+        <Shield
+          aria-hidden="true"
+          className="mt-0.5 h-4 w-4 shrink-0 text-green-600"
+        />
+        <p className="text-xs text-muted-foreground">
+          Sua chave de API é armazenada de forma segura e encriptada. Nunca é
+          exposta no frontend.
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/components/capabilities/wizard-steps/info-step.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { Check, Info } from "lucide-react";
+import type { IntegrationDefinition } from "../../../data/integrations-registry";
+import type { WizardIntegrationMeta } from "../types";
+
+interface InfoStepProps {
+  integration: IntegrationDefinition;
+  meta: WizardIntegrationMeta;
+}
+
+export function InfoStep({ integration, meta }: InfoStepProps) {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start gap-4">
+        {meta.icon && (
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-muted">
+            {meta.icon}
+          </div>
+        )}
+        <div className="space-y-1">
+          <h3 className="text-lg font-semibold">{integration.name}</h3>
+          <p className="text-sm text-muted-foreground">
+            {integration.description}
+          </p>
+        </div>
+      </div>
+
+      {/* Capabilities */}
+      {meta.capabilities.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium">O que esta integração permite:</h4>
+          <ul className="space-y-2">
+            {meta.capabilities.map((cap, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm">
+                <Check
+                  aria-hidden="true"
+                  className="mt-0.5 h-4 w-4 shrink-0 text-green-600"
+                />
+                <div>
+                  <span className="font-medium">{cap.label}</span>
+                  {cap.description && (
+                    <span className="text-muted-foreground">
+                      {" "}
+                      — {cap.description}
+                    </span>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Requirements */}
+      {meta.requirements.length > 0 && (
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium">Requisitos:</h4>
+          <ul className="space-y-2">
+            {meta.requirements.map((req, i) => (
+              <li
+                key={i}
+                className="flex items-start gap-2 text-sm text-muted-foreground"
+              >
+                <Info
+                  aria-hidden="true"
+                  className="mt-0.5 h-4 w-4 shrink-0 text-blue-500"
+                />
+                <span>{req}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/conversations/agent-conversations-table.tsx

@@ -89,11 +89,21 @@ export function AgentConversationsTable({
             <TableRow
               key={conversation.id}
               className="cursor-pointer"
+              role="button"
+              tabIndex={0}
               onClick={() =>
                 setSelectedId(
                   selectedId === conversation.id ? null : conversation.id,
                 )
               }
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setSelectedId(
+                    selectedId === conversation.id ? null : conversation.id,
+                  );
+                }
+              }}
               data-state={selectedId === conversation.id ? "selected" : undefined}
             >
               <TableCell className="font-mono text-xs">
@@ -111,10 +121,10 @@ export function AgentConversationsTable({
                   <span className="text-xs text-muted-foreground">—</span>
                 )}
               </TableCell>
-              <TableCell className="text-right">
+              <TableCell className="text-right tabular-nums">
                 {conversation.message_count ?? "—"}
               </TableCell>
-              <TableCell className="text-right">
+              <TableCell className="text-right tabular-nums">
                 {conversation.usage_tokens ?? "—"}
               </TableCell>
               <TableCell>
@@ -133,6 +143,7 @@ export function AgentConversationsTable({
                     <a
                       href={`/gchat/inbox/${conversation.id_external}`}
                       title="Ver no Chat"
+                      aria-label="Ver no Chat"
                       onClick={(e) => e.stopPropagation()}
                       className="inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
                     >

package/src/components/conversations/conversation-view.tsx

@@ -45,7 +45,7 @@ export function ConversationView({
           <p className="text-sm text-muted-foreground">
             Conversa não encontrada.
           </p>
-          <Button variant="ghost" size="icon" onClick={onClose}>
+          <Button variant="ghost" size="icon" aria-label="Fechar" onClick={onClose}>
             <X className="h-4 w-4" />
           </Button>
         </div>
@@ -58,7 +58,7 @@ export function ConversationView({
       <div className="flex items-center justify-between">
         <h3 className="font-semibold">Detalhes da conversa #{conversation.id}</h3>
         <div className="flex items-center gap-1">
-          <Button variant="ghost" size="icon" onClick={onClose}>
+          <Button variant="ghost" size="icon" aria-label="Fechar" onClick={onClose}>
             <X className="h-4 w-4" />
           </Button>
         </div>