@base44/superagent-native 0.0.1

package/src/ToolApprovalCard.tsx

@@ -0,0 +1,592 @@
+import React, { useMemo, useState } from 'react';
+import { ActivityIndicator, Pressable, Text, TextInput, View } from 'react-native';
+import { CheckCircle2, KeyRound, Package, Plug, ShieldAlert } from 'lucide-react-native';
+
+import { ConnectorBrandIcon, hasConnectorBrandIcon } from './connectorBrandIcons';
+import { conversationStyles } from './conversationStyles';
+import type {
+  SuperagentAgent,
+  SuperagentConnector,
+  SuperagentConnectorActionInput,
+  SuperagentConversation,
+  SuperagentToolCall,
+} from './types';
+
+type SubmitToolCallInput = (
+  toolCallId: string,
+  approve: boolean,
+  extraUserInput?: unknown,
+  originRequestId?: string,
+) => Promise<SuperagentConversation | null>;
+
+type ApprovalKind = 'channel' | 'connector' | 'customConnector' | 'package' | 'payment' | 'secrets' | 'guard' | 'generic';
+
+type SecretSchemaItem = {
+  description?: string;
+  name: string;
+};
+
+export function ToolApprovalCard({
+  agent,
+  availableConnectors,
+  isLastAssistantMessage,
+  onConnectConnector,
+  submitToolCallInput,
+  toolCall,
+}: {
+  agent: SuperagentAgent;
+  availableConnectors?: SuperagentConnector[];
+  isLastAssistantMessage: boolean;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  submitToolCallInput?: SubmitToolCallInput;
+  toolCall: SuperagentToolCall;
+}) {
+  const args = useMemo(() => getToolArgs(toolCall), [toolCall]);
+  const guardData = useMemo(() => getGuardData(toolCall.results), [toolCall.results]);
+  const kind = getApprovalKind(toolCall, guardData);
+  const connectorId = getStringArg(args, ['integration_type', 'connector_id', 'provider']);
+  const connector = availableConnectors?.find((item) => item.id === connectorId);
+  const connectorName = connector?.name || formatConnectorName(connectorId);
+  const paymentProvider = getStringArg(args, ['provider']);
+  const paymentName = getPaymentName(paymentProvider || toolCall.name);
+  const channelName = toolCall.name === 'setup_telegram_connection' ? 'Telegram' : 'Slack';
+  const customConnectorName = getStringArg(args, ['name', 'integration_type']) || 'connector';
+  const scopes = getStringArrayArg(args, 'scopes');
+  const reason = getStringArg(args, ['reason', 'description', 'message']);
+  const packages = getPackageSpecs(args);
+  const secretSchema = getSecretSchema(args);
+  const displayName = kind === 'payment'
+    ? paymentName
+    : kind === 'channel'
+      ? channelName
+      : kind === 'customConnector'
+        ? formatConnectorName(customConnectorName)
+        : connectorName;
+  const title = getApprovalTitle(kind, displayName);
+  const body = getApprovalBody(kind, reason, guardData, displayName);
+  const primaryLabel = getPrimaryLabel(kind, displayName);
+  const rejectLabel = kind === 'connector' || kind === 'channel' ? 'Skip' : 'Reject';
+  const canAct = Boolean(toolCall.id && submitToolCallInput && isLastAssistantMessage);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [formValues, setFormValues] = useState<Record<string, string>>({
+    connectorName: customConnectorName === 'connector' ? '' : formatConnectorName(customConnectorName),
+    scopes: scopes.join('\n'),
+  });
+  const [secretValues, setSecretValues] = useState<Record<string, string>>({});
+  const needsSecrets = kind === 'secrets' && secretSchema.length > 0;
+  const secretsComplete = !needsSecrets || secretSchema.every((secret) => secretValues[secret.name]?.trim());
+  const channelComplete = kind !== 'channel' || isChannelFormComplete(toolCall.name, formValues);
+  const customConnectorComplete = kind !== 'customConnector' ||
+    Boolean(formValues.connectorName?.trim() && formValues.clientId?.trim() && formValues.clientSecret?.trim());
+  const disablePrimary = !canAct || isSubmitting || !secretsComplete || !channelComplete || !customConnectorComplete;
+
+  const submitApproval = async () => {
+    if (!toolCall.id || !submitToolCallInput) return;
+
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      if (kind === 'connector' && onConnectConnector && connectorId) {
+        const connected = await onConnectConnector({
+          accessMode: 'full_access',
+          agentId: agent.id,
+          connectorId,
+          forceReconnect: false,
+          scopes: scopes.length > 0 ? scopes : connector?.scopes,
+        });
+        if (connected === false) {
+          throw new Error(`${connectorName} was not connected.`);
+        }
+      }
+
+      await submitToolCallInput(toolCall.id, true, getApprovalPayload(kind, secretValues, paymentProvider, toolCall.name, formValues));
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : 'Unable to approve this request.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const rejectApproval = async () => {
+    if (!toolCall.id || !submitToolCallInput) return;
+
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await submitToolCallInput(toolCall.id, false, {});
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : 'Unable to reject this request.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <View style={conversationStyles.toolApprovalCard}>
+      <View style={conversationStyles.toolApprovalHeader}>
+        <ApprovalIcon connector={connector} connectorId={connectorId} kind={kind} />
+        <View style={conversationStyles.toolApprovalHeaderText}>
+          <Text style={conversationStyles.toolApprovalTitle}>{title}</Text>
+          <Text style={conversationStyles.toolApprovalSubtitle}>Waiting For User Input</Text>
+        </View>
+      </View>
+
+      {body ? <Text style={conversationStyles.toolApprovalBody}>{body}</Text> : null}
+
+      {kind === 'connector' && scopes.length > 0 ? (
+        <View style={conversationStyles.toolApprovalScopeWrap}>
+          <Text style={conversationStyles.toolApprovalMuted}>Requested access</Text>
+          <View style={conversationStyles.toolApprovalChipWrap}>
+            {scopes.slice(0, 4).map((scope) => (
+              <View key={scope} style={conversationStyles.toolApprovalChip}>
+                <Text numberOfLines={1} style={conversationStyles.toolApprovalChipText}>{scope}</Text>
+              </View>
+            ))}
+            {scopes.length > 4 ? (
+              <View style={conversationStyles.toolApprovalChip}>
+                <Text style={conversationStyles.toolApprovalChipText}>+{scopes.length - 4}</Text>
+              </View>
+            ) : null}
+          </View>
+        </View>
+      ) : null}
+
+      {kind === 'package' && packages.length > 0 ? (
+        <View style={conversationStyles.toolApprovalChipWrap}>
+          {packages.map((packageSpec) => (
+            <View key={packageSpec} style={conversationStyles.toolApprovalChip}>
+              <Text numberOfLines={1} style={conversationStyles.toolApprovalChipText}>{packageSpec}</Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+
+      {needsSecrets ? (
+        <View style={conversationStyles.toolApprovalInputs}>
+          {secretSchema.map((secret) => (
+            <ApprovalInput
+              canAct={canAct}
+              help={secret.description}
+              isSubmitting={isSubmitting}
+              key={secret.name}
+              label={secret.name}
+              onChange={(value) => setSecretValues((current) => ({ ...current, [secret.name]: value }))}
+              placeholder={`Enter ${secret.name}`}
+              secure
+              value={secretValues[secret.name] ?? ''}
+            />
+          ))}
+        </View>
+      ) : null}
+
+      {kind === 'channel' ? (
+        <View style={conversationStyles.toolApprovalInputs}>
+          {toolCall.name === 'setup_telegram_connection' ? (
+            <ApprovalInput
+              canAct={canAct}
+              help="Paste the bot token from BotFather."
+              isSubmitting={isSubmitting}
+              label="Bot Token"
+              onChange={(value) => setFormValues((current) => ({ ...current, botToken: extractTelegramToken(value) }))}
+              placeholder="123456789:ABC..."
+              secure
+              value={formValues.botToken ?? ''}
+            />
+          ) : (
+            <>
+              <ApprovalInput
+                canAct={canAct}
+                help="From OAuth & Permissions. Starts with xoxb-."
+                isSubmitting={isSubmitting}
+                label="Bot User OAuth Token"
+                onChange={(value) => setFormValues((current) => ({ ...current, botToken: value }))}
+                placeholder="xoxb-..."
+                secure
+                value={formValues.botToken ?? ''}
+              />
+              <ApprovalInput
+                canAct={canAct}
+                help="From Basic Information > App Credentials."
+                isSubmitting={isSubmitting}
+                label="Signing Secret"
+                onChange={(value) => setFormValues((current) => ({ ...current, signingSecret: value }))}
+                placeholder="Enter signing secret"
+                secure
+                value={formValues.signingSecret ?? ''}
+              />
+            </>
+          )}
+        </View>
+      ) : null}
+
+      {kind === 'customConnector' ? (
+        <View style={conversationStyles.toolApprovalInputs}>
+          <ApprovalInput
+            canAct={canAct}
+            isSubmitting={isSubmitting}
+            label="Connector name"
+            onChange={(value) => setFormValues((current) => ({ ...current, connectorName: value }))}
+            placeholder="Calendar"
+            value={formValues.connectorName ?? ''}
+          />
+          <ApprovalInput
+            canAct={canAct}
+            isSubmitting={isSubmitting}
+            label="Client ID"
+            onChange={(value) => setFormValues((current) => ({ ...current, clientId: value }))}
+            placeholder="OAuth client id"
+            value={formValues.clientId ?? ''}
+          />
+          <ApprovalInput
+            canAct={canAct}
+            isSubmitting={isSubmitting}
+            label="Client Secret"
+            onChange={(value) => setFormValues((current) => ({ ...current, clientSecret: value }))}
+            placeholder="OAuth client secret"
+            secure
+            value={formValues.clientSecret ?? ''}
+          />
+          <ApprovalInput
+            canAct={canAct}
+            help="One scope per line."
+            isSubmitting={isSubmitting}
+            label="Scopes"
+            multiline
+            onChange={(value) => setFormValues((current) => ({ ...current, scopes: value }))}
+            placeholder="https://www.googleapis.com/auth/calendar.readonly"
+            value={formValues.scopes ?? ''}
+          />
+        </View>
+      ) : null}
+
+      {canAct ? (
+        <View style={conversationStyles.toolApprovalActions}>
+          <Pressable
+            accessibilityRole="button"
+            disabled={disablePrimary}
+            onPress={submitApproval}
+            style={[
+              conversationStyles.toolApprovalPrimaryButton,
+              disablePrimary && conversationStyles.toolApprovalButtonDisabled,
+            ]}
+          >
+            {isSubmitting ? <ActivityIndicator color="#111111" size="small" /> : <CheckCircle2 color="#111111" size={15} strokeWidth={2.5} />}
+            <Text style={conversationStyles.toolApprovalPrimaryText}>{isSubmitting ? 'Working...' : primaryLabel}</Text>
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            disabled={isSubmitting}
+            onPress={rejectApproval}
+            style={[
+              conversationStyles.toolApprovalSecondaryButton,
+              isSubmitting && conversationStyles.toolApprovalButtonDisabled,
+            ]}
+          >
+            <Text style={conversationStyles.toolApprovalSecondaryText}>{rejectLabel}</Text>
+          </Pressable>
+        </View>
+      ) : (
+        <Text style={conversationStyles.toolApprovalPreviousText}>
+          {isLastAssistantMessage ? 'Approval controls are not available in this build.' : 'This request belongs to an earlier message.'}
+        </Text>
+      )}
+
+      {error ? <Text style={conversationStyles.toolApprovalError}>{error}</Text> : null}
+    </View>
+  );
+}
+
+function ApprovalIcon({
+  connector,
+  connectorId,
+  kind,
+}: {
+  connector?: SuperagentConnector;
+  connectorId: string;
+  kind: ApprovalKind;
+}) {
+  if (kind === 'connector' && connectorId && hasConnectorBrandIcon(connectorId)) {
+    return (
+      <View style={conversationStyles.toolApprovalBrandIcon}>
+        <ConnectorBrandIcon connectorId={connectorId} size={20} />
+      </View>
+    );
+  }
+
+  const iconColor = kind === 'guard' ? '#FDE047' : '#F4F4F5';
+  const fallbackLabel = connector?.iconFallbackLabel || connectorId.slice(0, 2).toUpperCase();
+  if (kind === 'connector' && fallbackLabel) {
+    return (
+      <View style={conversationStyles.toolApprovalBrandIcon}>
+        <Text style={conversationStyles.toolApprovalBrandFallback}>{fallbackLabel}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={conversationStyles.toolApprovalIcon}>
+      {kind === 'package' ? <Package color={iconColor} size={18} strokeWidth={2.3} /> : null}
+      {kind === 'payment' ? <Plug color={iconColor} size={18} strokeWidth={2.3} /> : null}
+      {kind === 'secrets' ? <KeyRound color={iconColor} size={18} strokeWidth={2.3} /> : null}
+      {kind === 'guard' ? <ShieldAlert color={iconColor} size={18} strokeWidth={2.3} /> : null}
+      {kind === 'generic' ? <Plug color={iconColor} size={18} strokeWidth={2.3} /> : null}
+    </View>
+  );
+}
+
+function ApprovalInput({
+  canAct,
+  help,
+  isSubmitting,
+  label,
+  multiline,
+  onChange,
+  placeholder,
+  secure,
+  value,
+}: {
+  canAct: boolean;
+  help?: string;
+  isSubmitting: boolean;
+  label: string;
+  multiline?: boolean;
+  onChange: (value: string) => void;
+  placeholder: string;
+  secure?: boolean;
+  value: string;
+}) {
+  return (
+    <View style={conversationStyles.toolApprovalInputGroup}>
+      <Text style={conversationStyles.toolApprovalInputLabel}>{label}</Text>
+      {help ? <Text style={conversationStyles.toolApprovalInputHelp}>{help}</Text> : null}
+      <TextInput
+        autoCapitalize="none"
+        autoCorrect={false}
+        editable={!isSubmitting && canAct}
+        multiline={multiline}
+        onChangeText={onChange}
+        placeholder={placeholder}
+        placeholderTextColor="#6F6F76"
+        secureTextEntry={secure}
+        style={[
+          conversationStyles.toolApprovalInput,
+          multiline && conversationStyles.toolApprovalMultilineInput,
+        ]}
+        textAlignVertical={multiline ? 'top' : 'center'}
+        value={value}
+      />
+    </View>
+  );
+}
+
+function getApprovalKind(toolCall: SuperagentToolCall, guardData: Record<string, unknown> | null): ApprovalKind {
+  if (guardData) return 'guard';
+  if (toolCall.name === 'setup_slack_connection' || toolCall.name === 'setup_telegram_connection') return 'channel';
+  if (toolCall.name === 'set_app_user_connector') return 'customConnector';
+  if (toolCall.name === 'request_oauth_authorization') return 'connector';
+  if (toolCall.name === 'install_npm_package') return 'package';
+  if (toolCall.name === 'suggest_payments_installation' || toolCall.name === 'suggest_stripe_installation') return 'payment';
+  if (toolCall.name === 'request_secrets' || toolCall.name === 'set_secrets') return 'secrets';
+  return 'generic';
+}
+
+function getApprovalTitle(kind: ApprovalKind, displayName: string) {
+  if (kind === 'channel') return `Connect ${displayName}`;
+  if (kind === 'connector') return `Connect to ${displayName}`;
+  if (kind === 'customConnector') return `Set up ${displayName}`;
+  if (kind === 'payment') return `Connect ${displayName}`;
+  if (kind === 'package') return 'Approve package install';
+  if (kind === 'secrets') return 'Provide secrets';
+  if (kind === 'guard') return 'Approve protected change';
+  return 'Approval required';
+}
+
+function getApprovalBody(
+  kind: ApprovalKind,
+  reason: string,
+  guardData: Record<string, unknown> | null,
+  displayName: string,
+) {
+  if (kind === 'channel') return reason || `Paste your ${displayName} credentials to connect this channel.`;
+  if (kind === 'connector') return reason || `${displayName} needs authorization before this agent can continue.`;
+  if (kind === 'customConnector') return reason || 'Provide OAuth credentials for this custom connector.';
+  if (kind === 'payment') return reason || `Approve setting up ${displayName} for this app.`;
+  if (kind === 'package') return reason || 'Approve installing the packages required for this step.';
+  if (kind === 'secrets') return reason || 'Enter the requested secret values to continue.';
+  if (kind === 'guard') return String(guardData?.reason || 'Review and approve this protected change to continue.');
+  return reason || 'Review this request to continue.';
+}
+
+function getPrimaryLabel(kind: ApprovalKind, displayName: string) {
+  if (kind === 'channel' || kind === 'connector') return `Connect ${displayName}`;
+  if (kind === 'customConnector') return 'Connect';
+  if (kind === 'payment') return 'Connect';
+  if (kind === 'secrets') return 'Submit';
+  return 'Approve';
+}
+
+function getApprovalPayload(
+  kind: ApprovalKind,
+  secretValues: Record<string, string>,
+  paymentProvider: string,
+  toolName: string,
+  formValues: Record<string, string>,
+) {
+  if (kind === 'channel' && toolName === 'setup_telegram_connection') {
+    return { bot_token: formValues.botToken };
+  }
+  if (kind === 'channel') {
+    return { bot_token: formValues.botToken, signing_secret: formValues.signingSecret };
+  }
+  if (kind === 'customConnector') {
+    return {
+      client_id: formValues.clientId?.trim(),
+      client_secret: formValues.clientSecret?.trim(),
+      name: formValues.connectorName?.trim(),
+      scopes: splitLines(formValues.scopes),
+    };
+  }
+  if (kind === 'secrets') return { secrets: secretValues };
+  if (kind === 'payment' && paymentProvider === 'wix_payments') return { tos_accepted: true };
+  if (kind === 'payment' && paymentProvider === 'payments_by_wix') return { confirmed: true };
+  return {};
+}
+
+function getToolArgs(toolCall: SuperagentToolCall): Record<string, unknown> | string | null {
+  const raw = toolCall.arguments_string ?? toolCall.arguments ?? null;
+  if (!raw) return null;
+  if (typeof raw !== 'string') return raw as Record<string, unknown>;
+
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === 'object' ? parsed as Record<string, unknown> : raw;
+  } catch {
+    return raw;
+  }
+}
+
+function getStringArg(args: Record<string, unknown> | string | null, keys: string[]) {
+  if (!args || typeof args === 'string') return '';
+  for (const key of keys) {
+    const value = args[key];
+    if (typeof value === 'string' && value.trim()) return value.trim();
+  }
+  return '';
+}
+
+function getStringArrayArg(args: Record<string, unknown> | string | null, key: string) {
+  if (!args || typeof args === 'string') return [];
+  const value = args[key];
+  if (Array.isArray(value)) return value.filter((item): item is string => typeof item === 'string' && item.trim().length > 0);
+  if (typeof value === 'string' && value.trim()) return [value.trim()];
+  return [];
+}
+
+function getPackageSpecs(args: Record<string, unknown> | string | null) {
+  if (!args || typeof args === 'string') return [];
+  const packages = args.packages;
+  if (Array.isArray(packages)) {
+    return packages
+      .map((packageEntry) => {
+        if (packageEntry && typeof packageEntry === 'object') {
+          const name = String((packageEntry as Record<string, unknown>).name || '').trim();
+          const semver = String((packageEntry as Record<string, unknown>).semver || '').trim();
+          return name ? (semver ? `${name}@${semver}` : name) : '';
+        }
+        return String(packageEntry || '').trim();
+      })
+      .filter(Boolean);
+  }
+  if (typeof packages === 'string' && packages.trim()) {
+    return packages.split(packages.includes(',') ? ',' : /\s+/).map((item) => item.trim()).filter(Boolean);
+  }
+
+  const packageName = getStringArg(args, ['package_name']);
+  const version = getStringArg(args, ['version']);
+  return packageName ? [version ? `${packageName}@${version}` : packageName] : [];
+}
+
+function getSecretSchema(args: Record<string, unknown> | string | null): SecretSchemaItem[] {
+  if (!args || typeof args === 'string') return [];
+  let schema = args.secrets_schema;
+  if (typeof schema === 'string') {
+    try {
+      schema = JSON.parse(schema);
+    } catch {
+      schema = [];
+    }
+  }
+  if (!Array.isArray(schema)) return [];
+
+  const secretItems: SecretSchemaItem[] = [];
+  schema.forEach((item) => {
+    if (!item || typeof item !== 'object') return;
+      const record = item as Record<string, unknown>;
+      const name = String(record.secretName || record.name || record.key || '').trim();
+      if (!name) return;
+      secretItems.push({
+        description: typeof record.description === 'string' ? record.description : undefined,
+        name,
+      });
+  });
+
+  return secretItems;
+}
+
+function isChannelFormComplete(toolName: string, formValues: Record<string, string>) {
+  if (toolName === 'setup_telegram_connection') {
+    return /^\d+:[A-Za-z0-9_-]{35,}$/.test(formValues.botToken?.trim() || '');
+  }
+
+  return Boolean(
+    formValues.botToken?.trim().startsWith('xoxb-') &&
+      (formValues.botToken?.trim().length ?? 0) >= 20 &&
+      (formValues.signingSecret?.trim().length ?? 0) >= 16,
+  );
+}
+
+function extractTelegramToken(value: string) {
+  const trimmed = value.trim();
+  if (/^\d+:[A-Za-z0-9_-]{35,}$/.test(trimmed)) return trimmed;
+  const match = trimmed.match(/\d{5,15}:[A-Za-z0-9_-]{35,50}/);
+  return match?.[0] ?? value;
+}
+
+function splitLines(value?: string) {
+  return (value || '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+}
+
+function getGuardData(result: unknown) {
+  if (!result) return null;
+  const value = typeof result === 'string' ? parseJson(result) : result;
+  if (value && typeof value === 'object' && 'guard' in value) return value as Record<string, unknown>;
+  return null;
+}
+
+function parseJson(value: string) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+function formatConnectorName(connectorId: string) {
+  if (!connectorId) return 'connector';
+  return connectorId
+    .split(/[_-]/)
+    .filter(Boolean)
+    .map((part) => part.slice(0, 1).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function getPaymentName(provider: string) {
+  if (provider === 'wix_payments') return 'Base44 Payments';
+  if (provider === 'payments_by_wix') return 'Payments by Wix';
+  if (provider === 'stripe' || provider === 'suggest_stripe_installation') return 'Stripe';
+  return 'payments';
+}