@base44/superagent-native 0.0.1

package/src/ChannelsPanel.tsx

@@ -0,0 +1,705 @@
+import React, { useMemo, useState } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import {
+  CheckCircle2,
+  Copy,
+  ExternalLink,
+  MessageCircle,
+  MessageSquare,
+  RefreshCw,
+  Send,
+  Unplug,
+} from 'lucide-react-native';
+
+import { editorShellStyles } from './editorShellStyles';
+import { styles } from './styles';
+import type {
+  SuperagentAgent,
+  SuperagentChannelId,
+  SuperagentChannelStatus,
+  SuperagentHomeScreenProps,
+} from './types';
+
+const TELEGRAM_TOKEN_PATTERN = /^\d{5,15}:[A-Za-z0-9_-]{35,50}$/;
+const TELEGRAM_TOKEN_SEARCH = /\d{5,15}:[A-Za-z0-9_-]{35,50}/;
+
+export function ChannelsPanel({
+  agent,
+  channelStatus,
+  connectingChannelId,
+  isLoading,
+  onDisconnectTelegram,
+  onDisconnectIMessage,
+  onGenerateIMessageCode,
+  onGenerateLineCode,
+  onOpenIMessage,
+  onOpenLine,
+  onOpenTelegram,
+  onOpenWhatsApp,
+  onRefreshChannels,
+  onSetupTelegram,
+  onShareIMessageCode,
+  onShareLineCode,
+}: {
+  agent: SuperagentAgent;
+  channelStatus?: SuperagentChannelStatus;
+  connectingChannelId?: SuperagentChannelId | null;
+  isLoading?: boolean;
+  onDisconnectTelegram?: SuperagentHomeScreenProps['onDisconnectTelegram'];
+  onDisconnectIMessage?: SuperagentHomeScreenProps['onDisconnectIMessage'];
+  onGenerateIMessageCode?: SuperagentHomeScreenProps['onGenerateIMessageCode'];
+  onGenerateLineCode?: SuperagentHomeScreenProps['onGenerateLineCode'];
+  onOpenIMessage?: SuperagentHomeScreenProps['onOpenIMessage'];
+  onOpenLine?: SuperagentHomeScreenProps['onOpenLine'];
+  onOpenTelegram?: SuperagentHomeScreenProps['onOpenTelegram'];
+  onOpenWhatsApp?: SuperagentHomeScreenProps['onOpenWhatsApp'];
+  onRefreshChannels?: SuperagentHomeScreenProps['onRefreshChannels'];
+  onSetupTelegram?: SuperagentHomeScreenProps['onSetupTelegram'];
+  onShareIMessageCode?: SuperagentHomeScreenProps['onShareIMessageCode'];
+  onShareLineCode?: SuperagentHomeScreenProps['onShareLineCode'];
+}) {
+  const imessage = channelStatus?.imessage;
+  const telegram = channelStatus?.telegram;
+  const line = channelStatus?.line;
+  const whatsapp = channelStatus?.whatsapp;
+  const supportedCount = 4;
+
+  return (
+    <View style={editorShellStyles.settingsStack}>
+      <View style={editorShellStyles.panel}>
+        <View style={editorShellStyles.panelHeader}>
+          <View>
+            <Text style={editorShellStyles.panelTitle}>Channels</Text>
+            <Text style={editorShellStyles.panelSubtitle}>Messaging surfaces this agent can use.</Text>
+          </View>
+          <View style={channelStyles.headerActions}>
+            {isLoading ? <ActivityIndicator color="#FF5A1F" size="small" /> : null}
+            {onRefreshChannels ? (
+              <Pressable
+                accessibilityLabel="Refresh channels"
+                accessibilityRole="button"
+                disabled={isLoading}
+                onPress={() => onRefreshChannels(agent.id)}
+                style={({ pressed }) => [
+                  channelStyles.iconButton,
+                  isLoading && channelStyles.disabled,
+                  pressed && styles.pressed,
+                ]}
+              >
+                <RefreshCw color="#F4F4F5" size={17} strokeWidth={2.4} />
+              </Pressable>
+            ) : null}
+            <Text style={editorShellStyles.countBadge}>{supportedCount}</Text>
+          </View>
+        </View>
+
+        <View style={channelStyles.stack}>
+          <WhatsAppChannel
+            agentId={agent.id}
+            isBusy={connectingChannelId === 'whatsapp'}
+            isReady={!!whatsapp?.connectUrl}
+            onOpenWhatsApp={onOpenWhatsApp}
+          />
+          <IMessageChannel
+            agentId={agent.id}
+            imessage={imessage}
+            isBusy={connectingChannelId === 'imessage'}
+            onDisconnectIMessage={onDisconnectIMessage}
+            onGenerateIMessageCode={onGenerateIMessageCode}
+            onOpenIMessage={onOpenIMessage}
+            onShareIMessageCode={onShareIMessageCode}
+          />
+          <TelegramChannel
+            agentId={agent.id}
+            isBusy={connectingChannelId === 'telegram'}
+            onDisconnectTelegram={onDisconnectTelegram}
+            onOpenTelegram={onOpenTelegram}
+            onSetupTelegram={onSetupTelegram}
+            telegram={telegram}
+          />
+          <LineChannel
+            agentId={agent.id}
+            isBusy={connectingChannelId === 'line'}
+            line={line}
+            onGenerateLineCode={onGenerateLineCode}
+            onOpenLine={onOpenLine}
+            onShareLineCode={onShareLineCode}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function WhatsAppChannel({
+  agentId,
+  isBusy,
+  isReady,
+  onOpenWhatsApp,
+}: {
+  agentId: string;
+  isBusy: boolean;
+  isReady: boolean;
+  onOpenWhatsApp?: SuperagentHomeScreenProps['onOpenWhatsApp'];
+}) {
+  return (
+    <ChannelCard
+      accent="#25D366"
+      body="Open WhatsApp with the generated activation message for this Superagent."
+      icon={<MessageCircle color="#111111" size={20} strokeWidth={2.45} />}
+      status={isReady ? 'Setup link ready' : 'Needs auth token'}
+      title="WhatsApp"
+    >
+      <View style={channelStyles.actionRow}>
+        <ChannelButton
+          disabled={!isReady || !onOpenWhatsApp || isBusy}
+          icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+          isBusy={isBusy}
+          label="Open WhatsApp"
+          onPress={() => onOpenWhatsApp?.({ agentId })}
+        />
+      </View>
+    </ChannelCard>
+  );
+}
+
+function IMessageChannel({
+  agentId,
+  imessage,
+  isBusy,
+  onDisconnectIMessage,
+  onGenerateIMessageCode,
+  onOpenIMessage,
+  onShareIMessageCode,
+}: {
+  agentId: string;
+  imessage?: SuperagentChannelStatus['imessage'];
+  isBusy: boolean;
+  onDisconnectIMessage?: SuperagentHomeScreenProps['onDisconnectIMessage'];
+  onGenerateIMessageCode?: SuperagentHomeScreenProps['onGenerateIMessageCode'];
+  onOpenIMessage?: SuperagentHomeScreenProps['onOpenIMessage'];
+  onShareIMessageCode?: SuperagentHomeScreenProps['onShareIMessageCode'];
+}) {
+  const activation = imessage?.activation;
+  const phoneNumber = imessage?.phoneNumber ?? activation?.phoneNumber ?? null;
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const connectIMessage = async () => {
+    if (!onGenerateIMessageCode) {
+      return;
+    }
+
+    setLocalError(null);
+    try {
+      const generated = await onGenerateIMessageCode({ agentId });
+      if (generated && onOpenIMessage) {
+        await onOpenIMessage({ agentId, ...generated });
+      }
+    } catch (error) {
+      setLocalError(error instanceof Error ? error.message : 'iMessage setup failed.');
+    }
+  };
+
+  return (
+    <ChannelCard
+      accent="#3B82F6"
+      body={imessage?.connected ? 'Connected and active via iMessage.' : 'Open Messages with the activation code ready to send.'}
+      icon={<MessageSquare color="#FFFFFF" size={20} strokeWidth={2.45} />}
+      status={imessage?.connected ? 'Active' : activation ? 'Code ready' : 'Not connected'}
+      title="iMessage"
+    >
+      {imessage?.connected ? (
+        <View style={channelStyles.connectedBox}>
+          <View style={channelStyles.connectedTitleRow}>
+            <CheckCircle2 color="#34D399" size={17} strokeWidth={2.4} />
+            <Text style={channelStyles.connectedTitle}>iMessage connection</Text>
+          </View>
+          {phoneNumber ? <Text style={channelStyles.connectedBody}>Number: {phoneNumber}</Text> : null}
+          <View style={channelStyles.actionRow}>
+            <ChannelButton
+              danger
+              disabled={!onDisconnectIMessage || isBusy}
+              icon={<Unplug color="#FCA5A5" size={15} strokeWidth={2.4} />}
+              isBusy={isBusy}
+              label="Disconnect"
+              onPress={() => onDisconnectIMessage?.({ agentId })}
+            />
+          </View>
+        </View>
+      ) : (
+        <View style={channelStyles.setupStack}>
+          {localError ? <Text style={channelStyles.errorText}>{localError}</Text> : null}
+          {activation ? (
+            <View style={channelStyles.connectedBox}>
+              <Text style={channelStyles.codeLabel}>Text this activation code</Text>
+              <Text selectable style={channelStyles.activationCode}>{activation.code}</Text>
+              <Text selectable style={channelStyles.connectedBody}>To: {activation.phoneNumber}</Text>
+              <Text style={channelStyles.expiryText}>Code expires in 30 minutes.</Text>
+            </View>
+          ) : null}
+          <View style={channelStyles.actionRow}>
+            <ChannelButton
+              disabled={!onGenerateIMessageCode || isBusy}
+              icon={<MessageSquare color="#FFFFFF" size={15} strokeWidth={2.4} />}
+              isBusy={isBusy}
+              label="Connect via iMessage"
+              onPress={connectIMessage}
+              secondary
+            />
+            {activation ? (
+              <>
+                <ChannelButton
+                  disabled={!onOpenIMessage || isBusy}
+                  icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+                  label="Open Messages"
+                  onPress={() => onOpenIMessage?.({ agentId, ...activation })}
+                />
+                <ChannelButton
+                  secondary
+                  disabled={!onShareIMessageCode}
+                  icon={<Copy color="#F4F4F5" size={15} strokeWidth={2.4} />}
+                  label="Share code"
+                  onPress={() => onShareIMessageCode?.({ agentId, ...activation })}
+                />
+              </>
+            ) : null}
+          </View>
+        </View>
+      )}
+    </ChannelCard>
+  );
+}
+
+function TelegramChannel({
+  agentId,
+  isBusy,
+  onDisconnectTelegram,
+  onOpenTelegram,
+  onSetupTelegram,
+  telegram,
+}: {
+  agentId: string;
+  isBusy: boolean;
+  onDisconnectTelegram?: SuperagentHomeScreenProps['onDisconnectTelegram'];
+  onOpenTelegram?: SuperagentHomeScreenProps['onOpenTelegram'];
+  onSetupTelegram?: SuperagentHomeScreenProps['onSetupTelegram'];
+  telegram?: SuperagentChannelStatus['telegram'];
+}) {
+  const [tokenText, setTokenText] = useState('');
+  const [tokenError, setTokenError] = useState<string | null>(null);
+  const token = useMemo(() => extractTelegramToken(tokenText), [tokenText]);
+  const botTitle = telegram?.botName || telegram?.botUsername || 'Telegram bot';
+
+  const setupTelegram = async () => {
+    if (!token) {
+      setTokenError('Paste the BotFather token to connect Telegram.');
+      return;
+    }
+
+    setTokenError(null);
+    try {
+      await onSetupTelegram?.({ agentId, token });
+      setTokenText('');
+    } catch (error) {
+      setTokenError(error instanceof Error ? error.message : 'Telegram setup failed.');
+    }
+  };
+
+  return (
+    <ChannelCard
+      accent="#37AEE2"
+      body={telegram?.connected ? `Connected as ${botTitle}.` : 'Paste a BotFather token to register the webhook.'}
+      icon={<Send color="#FFFFFF" size={19} strokeWidth={2.45} />}
+      status={telegram?.connected ? 'Active' : 'Not connected'}
+      title="Telegram"
+    >
+      {telegram?.connected ? (
+        <View style={channelStyles.connectedBox}>
+          <View style={channelStyles.connectedTitleRow}>
+            <CheckCircle2 color="#34D399" size={17} strokeWidth={2.4} />
+            <Text style={channelStyles.connectedTitle}>{botTitle}</Text>
+          </View>
+          {telegram.botUsername ? <Text style={channelStyles.connectedBody}>@{telegram.botUsername}</Text> : null}
+          <View style={channelStyles.actionRow}>
+            {telegram.botLink ? (
+              <ChannelButton
+                icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+                label="Open bot"
+                onPress={() => onOpenTelegram?.({ agentId, url: telegram.botLink || '' })}
+              />
+            ) : null}
+            <ChannelButton
+              danger
+              disabled={!onDisconnectTelegram || isBusy}
+              icon={<Unplug color="#FCA5A5" size={15} strokeWidth={2.4} />}
+              isBusy={isBusy}
+              label="Disconnect"
+              onPress={() => onDisconnectTelegram?.({ agentId })}
+            />
+          </View>
+        </View>
+      ) : (
+        <View style={channelStyles.setupStack}>
+          <Text style={channelStyles.helpText}>
+            Create a bot in BotFather, then paste the full token here.
+          </Text>
+          <TextInput
+            autoCapitalize="none"
+            autoCorrect={false}
+            multiline
+            onChangeText={(value) => {
+              setTokenText(value);
+              if (tokenError) {
+                setTokenError(null);
+              }
+            }}
+            placeholder="123456789:AA..."
+            placeholderTextColor="#71717A"
+            style={channelStyles.tokenInput}
+            value={tokenText}
+          />
+          {tokenError ? <Text style={channelStyles.errorText}>{tokenError}</Text> : null}
+          <View style={channelStyles.actionRow}>
+            <ChannelButton
+              disabled={!onSetupTelegram || isBusy}
+              icon={<CheckCircle2 color="#111111" size={15} strokeWidth={2.4} />}
+              isBusy={isBusy}
+              label="Connect bot"
+              onPress={setupTelegram}
+            />
+          </View>
+        </View>
+      )}
+    </ChannelCard>
+  );
+}
+
+function LineChannel({
+  agentId,
+  isBusy,
+  line,
+  onGenerateLineCode,
+  onOpenLine,
+  onShareLineCode,
+}: {
+  agentId: string;
+  isBusy: boolean;
+  line?: SuperagentChannelStatus['line'];
+  onGenerateLineCode?: SuperagentHomeScreenProps['onGenerateLineCode'];
+  onOpenLine?: SuperagentHomeScreenProps['onOpenLine'];
+  onShareLineCode?: SuperagentHomeScreenProps['onShareLineCode'];
+}) {
+  const activation = line?.activation;
+
+  return (
+    <ChannelCard
+      accent="#06C755"
+      body={activation ? 'Activation code is ready. Add the bot in LINE, then send this code.' : 'Generate a short-lived activation code for the shared LINE bot.'}
+      icon={<MessageCircle color="#FFFFFF" size={20} strokeWidth={2.45} />}
+      status={activation ? 'Code ready' : 'Not connected'}
+      title="LINE"
+    >
+      {activation ? (
+        <View style={channelStyles.connectedBox}>
+          <Text style={channelStyles.codeLabel}>Activation code</Text>
+          <Text selectable style={channelStyles.activationCode}>{activation.code}</Text>
+          <View style={channelStyles.actionRow}>
+            <ChannelButton
+              icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+              label="Open LINE"
+              onPress={() => onOpenLine?.({ agentId, url: activation.addFriendUrl })}
+            />
+            <ChannelButton
+              secondary
+              icon={<Copy color="#F4F4F5" size={15} strokeWidth={2.4} />}
+              label="Share code"
+              onPress={() => onShareLineCode?.({ agentId, ...activation })}
+            />
+          </View>
+        </View>
+      ) : (
+        <View style={channelStyles.actionRow}>
+          <ChannelButton
+            disabled={!onGenerateLineCode || isBusy}
+            icon={<RefreshCw color="#111111" size={15} strokeWidth={2.4} />}
+            isBusy={isBusy}
+            label="Generate code"
+            onPress={() => onGenerateLineCode?.({ agentId })}
+          />
+        </View>
+      )}
+    </ChannelCard>
+  );
+}
+
+function ChannelCard({
+  accent,
+  body,
+  children,
+  icon,
+  status,
+  title,
+}: {
+  accent: string;
+  body: string;
+  children: React.ReactNode;
+  icon: React.ReactNode;
+  status: string;
+  title: string;
+}) {
+  return (
+    <View style={channelStyles.card}>
+      <View style={channelStyles.cardHeader}>
+        <View style={[channelStyles.channelIcon, { backgroundColor: accent }]}>
+          {icon}
+        </View>
+        <View style={channelStyles.channelText}>
+          <View style={channelStyles.titleRow}>
+            <Text style={channelStyles.channelTitle}>{title}</Text>
+            <Text style={channelStyles.statusBadge}>{status}</Text>
+          </View>
+          <Text style={channelStyles.channelBody}>{body}</Text>
+        </View>
+      </View>
+      {children}
+    </View>
+  );
+}
+
+function ChannelButton({
+  danger,
+  disabled,
+  icon,
+  isBusy,
+  label,
+  onPress,
+  secondary,
+}: {
+  danger?: boolean;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  isBusy?: boolean;
+  label: string;
+  onPress?: () => void;
+  secondary?: boolean;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        channelStyles.button,
+        secondary && channelStyles.buttonSecondary,
+        danger && channelStyles.buttonDanger,
+        disabled && channelStyles.disabled,
+        pressed && styles.pressed,
+      ]}
+    >
+      {isBusy ? <ActivityIndicator color={danger || secondary ? '#F4F4F5' : '#111111'} size="small" /> : icon}
+      <Text style={[
+        channelStyles.buttonText,
+        secondary && channelStyles.buttonTextSecondary,
+        danger && channelStyles.buttonTextDanger,
+      ]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function extractTelegramToken(value: string) {
+  const trimmed = value.trim();
+  if (TELEGRAM_TOKEN_PATTERN.test(trimmed)) {
+    return trimmed;
+  }
+
+  return TELEGRAM_TOKEN_SEARCH.exec(trimmed)?.[0] ?? null;
+}
+
+const channelStyles = StyleSheet.create({
+  actionRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    marginTop: 12,
+  },
+  activationCode: {
+    color: '#F4F4F5',
+    fontFamily: 'Courier',
+    fontSize: 20,
+    fontWeight: '900',
+    letterSpacing: 0,
+    marginTop: 5,
+  },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 999,
+    flexDirection: 'row',
+    gap: 6,
+    minHeight: 34,
+    paddingHorizontal: 12,
+  },
+  buttonDanger: {
+    backgroundColor: '#351516',
+    borderColor: '#552022',
+    borderWidth: 1,
+  },
+  buttonSecondary: {
+    backgroundColor: '#242427',
+    borderColor: '#353539',
+    borderWidth: 1,
+  },
+  buttonText: {
+    color: '#111111',
+    fontSize: 12,
+    fontWeight: '900',
+  },
+  buttonTextDanger: {
+    color: '#FCA5A5',
+  },
+  buttonTextSecondary: {
+    color: '#F4F4F5',
+  },
+  card: {
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 14,
+    borderWidth: 1,
+    marginBottom: 10,
+    padding: 12,
+  },
+  cardHeader: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+  },
+  channelBody: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '600',
+    lineHeight: 17,
+    marginTop: 4,
+  },
+  channelIcon: {
+    alignItems: 'center',
+    borderRadius: 12,
+    height: 40,
+    justifyContent: 'center',
+    marginRight: 11,
+    width: 40,
+  },
+  channelText: {
+    flex: 1,
+    minWidth: 0,
+  },
+  channelTitle: {
+    color: '#F4F4F5',
+    flexShrink: 1,
+    fontSize: 14,
+    fontWeight: '900',
+  },
+  codeLabel: {
+    color: '#8E8E93',
+    fontSize: 11,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  connectedBody: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '700',
+    marginTop: 4,
+  },
+  connectedBox: {
+    backgroundColor: '#101012',
+    borderColor: '#2A2A2A',
+    borderRadius: 12,
+    borderWidth: 1,
+    marginTop: 12,
+    padding: 11,
+  },
+  connectedTitle: {
+    color: '#F4F4F5',
+    flex: 1,
+    fontSize: 13,
+    fontWeight: '900',
+    marginLeft: 6,
+  },
+  connectedTitleRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  disabled: {
+    opacity: 0.55,
+  },
+  errorText: {
+    color: '#FCA5A5',
+    fontSize: 12,
+    fontWeight: '700',
+    marginTop: 7,
+  },
+  expiryText: {
+    color: '#71717A',
+    fontSize: 11,
+    fontWeight: '700',
+    marginTop: 7,
+  },
+  headerActions: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8,
+  },
+  helpText: {
+    color: '#A1A1AA',
+    fontSize: 12,
+    fontWeight: '600',
+    lineHeight: 17,
+  },
+  iconButton: {
+    alignItems: 'center',
+    backgroundColor: '#1F1F23',
+    borderColor: '#2A2A2A',
+    borderRadius: 11,
+    borderWidth: 1,
+    height: 34,
+    justifyContent: 'center',
+    width: 34,
+  },
+  setupStack: {
+    marginTop: 12,
+  },
+  stack: {
+    padding: 10,
+  },
+  statusBadge: {
+    backgroundColor: '#242427',
+    borderRadius: 10,
+    color: '#C7C7CC',
+    fontSize: 10,
+    fontWeight: '900',
+    marginLeft: 8,
+    overflow: 'hidden',
+    paddingHorizontal: 7,
+    paddingVertical: 4,
+  },
+  titleRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  tokenInput: {
+    backgroundColor: '#0B0B0C',
+    borderColor: '#2A2A2A',
+    borderRadius: 12,
+    borderWidth: 1,
+    color: '#F4F4F5',
+    fontFamily: 'Courier',
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 17,
+    marginTop: 9,
+    minHeight: 72,
+    paddingHorizontal: 11,
+    paddingVertical: 10,
+    textAlignVertical: 'top',
+  },
+});