@base44/superagent-native 0.0.1

package/src/ShareAgentModal.tsx

@@ -0,0 +1,320 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  Modal,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { Building2, MailPlus, User, UserPlus, X } from 'lucide-react-native';
+
+import { AgentSphereIcon } from './AgentSphereIcon';
+import { shareAgentModalStyles as localStyles } from './ShareAgentModal.styles';
+import { styles as sharedStyles } from './styles';
+import type {
+  SuperagentAgent,
+  SuperagentCollaborator,
+  SuperagentHomeScreenProps,
+  SuperagentInviteCollaboratorsResult,
+} from './types';
+
+const NOT_WORKSPACE_MEMBER_CODE = 'not_workspace_member';
+
+type ShareAgentModalProps = {
+  agent: SuperagentAgent;
+  collaborators?: SuperagentCollaborator[];
+  isLoading?: boolean;
+  isVisible: boolean;
+  onClose: () => void;
+  onOpenWorkspaceMembers?: SuperagentHomeScreenProps['onOpenWorkspaceMembers'];
+  onRefreshCollaborators?: SuperagentHomeScreenProps['onRefreshCollaborators'];
+  onShareAgent?: SuperagentHomeScreenProps['onShareAgent'];
+};
+
+type GuestInvitePrompt = {
+  emails: string[];
+  pendingInvitationEmails: string[];
+};
+
+export function ShareAgentModal({
+  agent,
+  collaborators = [],
+  isLoading,
+  isVisible,
+  onClose,
+  onOpenWorkspaceMembers,
+  onRefreshCollaborators,
+  onShareAgent,
+}: ShareAgentModalProps) {
+  const [emailText, setEmailText] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [guestInvitePrompt, setGuestInvitePrompt] = useState<GuestInvitePrompt | null>(null);
+  const [isInviting, setIsInviting] = useState(false);
+  const [success, setSuccess] = useState<string | null>(null);
+  useEffect(() => {
+    if (isVisible) {
+      onRefreshCollaborators?.(agent.id);
+      return;
+    }
+
+    setEmailText('');
+    setError(null);
+    setGuestInvitePrompt(null);
+    setSuccess(null);
+  }, [agent.id, isVisible, onRefreshCollaborators]);
+  const parsedEmails = useMemo(() => parseEmails(emailText), [emailText]);
+  const memberCount = collaborators.length;
+  const sendInvites = async (emails: string[], addAsGuest = false) => {
+    setError(null);
+    setSuccess(null);
+    setGuestInvitePrompt(null);
+    if (!onShareAgent) {
+      setError('Sharing is not available in this app build.');
+      return;
+    }
+    if (emails.length === 0) {
+      setError('Enter at least one email.');
+      return;
+    }
+    const invalidEmails = emails.filter((email) => !isValidEmail(email));
+    if (invalidEmails.length > 0) {
+      setError(`Invalid email: ${invalidEmails[0]}`);
+      return;
+    }
+    setIsInviting(true);
+    try {
+      const result = await onShareAgent({agentId: agent.id, addAsGuest, emails});
+      const summary = applyInviteResult(
+        result,
+        emails.length,
+        setError,
+        setSuccess,
+        addAsGuest ? [] : [NOT_WORKSPACE_MEMBER_CODE],
+      );
+      if (!addAsGuest && summary.notWorkspaceMembers.length > 0) {
+        setGuestInvitePrompt({
+          emails: summary.notWorkspaceMembers.map((item) => item.email),
+          pendingInvitationEmails: summary.notWorkspaceMembers
+            .filter((item) => item.has_pending_invitation)
+            .map((item) => item.email),
+        });
+      } else if (summary.failed.length === 0) {
+        setEmailText('');
+      }
+      await onRefreshCollaborators?.(agent.id);
+    } catch (inviteError) {
+      const message = inviteError instanceof Error ? inviteError.message : 'Failed to invite collaborators.';
+      if (!addAsGuest && isNotWorkspaceMemberMessage(message)) {
+        setGuestInvitePrompt({
+          emails,
+          pendingInvitationEmails: [],
+        });
+        return;
+      }
+
+      setError(message);
+    } finally {
+      setIsInviting(false);
+    }
+  };
+  const invite = async () => {
+    await sendInvites(parsedEmails);
+  };
+  const inviteGuests = async () => {
+    if (!guestInvitePrompt) {
+      return;
+    }
+
+    await sendInvites(guestInvitePrompt.emails, true);
+  };
+  const openWorkspaceMembers = async () => {
+    setGuestInvitePrompt(null);
+    onClose();
+    await onOpenWorkspaceMembers?.({agentId: agent.id, organizationId: agent.organizationId});
+  };
+  return (
+    <Modal animationType="fade" transparent visible={isVisible} onRequestClose={onClose}>
+      <View style={localStyles.backdrop}>
+        <View style={localStyles.sheet}>
+          <View style={localStyles.header}>
+            <View style={localStyles.agentTitle}>
+              <AgentSphereIcon agent={agent} size="md" />
+              <View style={localStyles.titleTextWrap}>
+                <Text numberOfLines={1} style={localStyles.title}>Share chat</Text>
+                <Text numberOfLines={1} style={localStyles.subtitle}>
+                  {memberCount === 1 ? '1 person has access' : `${memberCount} people have access`}
+                </Text>
+              </View>
+            </View>
+            <Pressable accessibilityLabel="Close share" accessibilityRole="button" onPress={onClose} style={localStyles.closeButton}>
+              <X color="#F4F4F5" size={20} strokeWidth={2.4} />
+            </Pressable>
+          </View>
+          <View style={localStyles.inputCard}>
+            <Text style={localStyles.inputLabel}>Invite by email</Text>
+            <TextInput
+              autoCapitalize="none"
+              autoCorrect={false}
+              editable={!isInviting}
+              keyboardType="email-address"
+              multiline
+              onChangeText={setEmailText}
+              placeholder="name@company.com"
+              placeholderTextColor="#71717A"
+              style={localStyles.input}
+              value={emailText}
+            />
+            {error ? <Text style={localStyles.errorText}>{error}</Text> : null}
+            {success ? <Text style={localStyles.successText}>{success}</Text> : null}
+            <Pressable
+              accessibilityLabel="Invite collaborators"
+              accessibilityRole="button"
+              disabled={isInviting}
+              onPress={invite}
+              style={({ pressed }) => [
+                localStyles.inviteButton,
+                isInviting && localStyles.disabledButton,
+                pressed && sharedStyles.pressed,
+              ]}
+            >
+              {isInviting ? <ActivityIndicator color="#111111" size="small" /> : <MailPlus color="#111111" size={18} strokeWidth={2.5} />}
+              <Text style={localStyles.inviteButtonText}>Invite</Text>
+            </Pressable>
+          </View>
+          {guestInvitePrompt ? (
+            <View style={localStyles.guestCard}>
+              <Text style={localStyles.guestTitle}>Invite outside workspace?</Text>
+              <Text style={localStyles.guestBody}>
+                {formatEmailList(guestInvitePrompt.emails)} {guestInvitePrompt.emails.length === 1 ? 'is' : 'are'} not in this workspace.
+                Add {guestInvitePrompt.emails.length === 1 ? 'them' : 'these people'} as guests to this Superagent, or manage workspace members first.
+              </Text>
+              {guestInvitePrompt.pendingInvitationEmails.length > 0 ? (
+                <Text style={localStyles.guestHint}>
+                  Pending workspace invite: {formatEmailList(guestInvitePrompt.pendingInvitationEmails)}
+                </Text>
+              ) : null}
+              <View style={localStyles.guestActions}>
+                <Pressable
+                  accessibilityLabel="Add invitees as guests"
+                  accessibilityRole="button"
+                  disabled={isInviting}
+                  onPress={inviteGuests}
+                  style={({ pressed }) => [
+                    localStyles.guestPrimaryButton,
+                    isInviting && localStyles.disabledButton,
+                    pressed && sharedStyles.pressed,
+                  ]}
+                >
+                  {isInviting ? <ActivityIndicator color="#111111" size="small" /> : <UserPlus color="#111111" size={16} strokeWidth={2.6} />}
+                  <Text style={localStyles.guestPrimaryButtonText}>Add as guest</Text>
+                </Pressable>
+                <Pressable
+                  accessibilityLabel="Open workspace members"
+                  accessibilityRole="button"
+                  disabled={!onOpenWorkspaceMembers}
+                  onPress={openWorkspaceMembers}
+                  style={({ pressed }) => [
+                    localStyles.guestSecondaryButton,
+                    !onOpenWorkspaceMembers && localStyles.disabledButton,
+                    pressed && sharedStyles.pressed,
+                  ]}
+                >
+                  <Building2 color="#F4F4F5" size={16} strokeWidth={2.3} />
+                  <Text style={localStyles.guestSecondaryButtonText}>Add to workspace</Text>
+                </Pressable>
+              </View>
+            </View>
+          ) : null}
+          <View style={localStyles.membersHeader}>
+            <Text style={localStyles.membersTitle}>People</Text>
+            {isLoading ? <ActivityIndicator color="#F4F4F5" size="small" /> : null}
+          </View>
+          <ScrollView contentContainerStyle={localStyles.membersList} showsVerticalScrollIndicator={false}>
+            {collaborators.map((collaborator) => (
+              <CollaboratorRow collaborator={collaborator} key={`${collaborator.id}-${collaborator.email}`} />
+            ))}
+            {!isLoading && collaborators.length === 0 ? (
+              <Text style={localStyles.emptyText}>No collaborators loaded yet.</Text>
+            ) : null}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+function CollaboratorRow({collaborator}: {collaborator: SuperagentCollaborator}) {
+  const displayName = collaborator.full_name || collaborator.email.split('@')[0] || collaborator.email;
+  return (
+    <View style={localStyles.memberRow}>
+      <View style={localStyles.avatarWrap}>
+        {collaborator.profile_image_url && !collaborator.is_pending ? (
+          <Image source={{uri: collaborator.profile_image_url}} style={localStyles.avatarImage} />
+        ) : (
+          <User color="#F4F4F5" size={17} strokeWidth={2.2} />
+        )}
+      </View>
+      <View style={localStyles.memberTextWrap}>
+        <View style={localStyles.memberNameRow}>
+          <Text numberOfLines={1} style={localStyles.memberName}>{displayName}</Text>
+          {collaborator.is_owner ? <Text style={localStyles.badge}>Owner</Text> : null}
+          {collaborator.is_pending ? <Text style={localStyles.badge}>Pending</Text> : null}
+        </View>
+        <Text numberOfLines={1} style={localStyles.memberEmail}>{collaborator.email}</Text>
+      </View>
+    </View>
+  );
+}
+function parseEmails(value: string) {
+  return [...new Set(value.split(/[,\s]+/).map((email) => email.trim().toLowerCase()).filter(Boolean))];
+}
+function isValidEmail(email: string) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+function applyInviteResult(
+  result: SuperagentInviteCollaboratorsResult | void,
+  invitedCount: number,
+  setError: (error: string | null) => void,
+  setSuccess: (success: string | null) => void,
+  ignoredErrorCodes: string[] = [],
+) {
+  const results = result?.results ?? [];
+  const ignoredErrorCodeSet = new Set(ignoredErrorCodes);
+  const shouldIgnoreFailure = (item: { error?: string; error_code?: string; success: boolean }) => {
+    if (item.success) {
+      return false;
+    }
+    if (ignoredErrorCodeSet.has(item.error_code ?? '')) {
+      return true;
+    }
+    return ignoredErrorCodeSet.has(NOT_WORKSPACE_MEMBER_CODE) && isNotWorkspaceMemberFailure(item);
+  };
+  const notWorkspaceMembers = results.filter(isNotWorkspaceMemberFailure);
+  const failed = results.filter((item) => !item.success && !shouldIgnoreFailure(item));
+  const successful = results.filter((item) => item.success);
+  if (failed.length > 0) {
+    setError(failed.map((item) => `${item.email}: ${item.error || 'Invite failed'}`).join('\n'));
+  }
+  if (successful.length > 0 || results.length === 0) {
+    const count = successful.length || invitedCount;
+    setSuccess(count === 1 ? 'Invitation sent.' : `${count} invitations sent.`);
+  }
+  return { failed, notWorkspaceMembers, successful };
+}
+function formatEmailList(emails: string[]) {
+  if (emails.length <= 2) {
+    return emails.join(' and ');
+  }
+
+  return `${emails.slice(0, 2).join(', ')} and ${emails.length - 2} more`;
+}
+
+function isNotWorkspaceMemberFailure(item: { error?: string; error_code?: string; success: boolean }) {
+  return !item.success && (item.error_code === NOT_WORKSPACE_MEMBER_CODE || isNotWorkspaceMemberMessage(item.error));
+}
+
+function isNotWorkspaceMemberMessage(message?: string) {
+  return /not (?:a )?member of this workspace|not in this workspace/i.test(message ?? '');
+}

package/src/SuperagentHomeScreen.tsx

@@ -0,0 +1,318 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  SafeAreaView,
+  ScrollView,
+  Text,
+  View,
+} from 'react-native';
+
+import { AgentCard, AgentRow, CreateAgentButton, EmptyState, PlaceholderPage } from './screenParts';
+import { ConversationScreen } from './ConversationScreen';
+import { styles } from './styles';
+import type { SuperagentAgent, SuperagentHomeScreenProps, SuperagentRoute } from './types';
+
+const DEFAULT_ROUTE: SuperagentRoute = { name: 'home' };
+
+export function SuperagentHomeScreen(props: SuperagentHomeScreenProps) {
+  return <SuperagentHomeScreenContent {...props} />;
+}
+
+function SuperagentHomeScreenContent({
+  agents = [],
+  automations,
+  automationCredits,
+  availableConnectors,
+  channelStatus,
+  collaborators,
+  connectingChannelId,
+  connectedConnectors,
+  connectingConnectorId,
+  latestMessages = [],
+  messagesByAgentId = {},
+  apiClient,
+  isLoadingConnectors,
+  isLoadingAutomations,
+  isLoadingChannels,
+  isLoading = false,
+  isSendingMessage = false,
+  navigationMode = 'internal',
+  currentUserAvatarUrl,
+  currentUserName,
+  fileLoadError,
+  fileLoadFailed,
+  filePaths,
+  headerAccessory,
+  initialRoute = DEFAULT_ROUTE,
+  isLoadingAgentSettings,
+  isLoadingCollaborators,
+  isLoadingFiles,
+  secrets,
+  onAgentBack,
+  onAgentMessageDone,
+  onCancelConnectorConnection,
+  onArchiveAutomation,
+  onCloneAgent,
+  onConnectConnector,
+  onCopyMessage,
+  onCreateAgent,
+  onDeleteAgent,
+  onDeleteAutomation,
+  onDeleteSecret,
+  onDisconnectConnector,
+  onDisconnectIMessage,
+  onDisconnectTelegram,
+  onEditAutomation,
+  onGenerateLineCode,
+  onGenerateIMessageCode,
+  onImportFromDrive,
+  onOpenIMessage,
+  onOpenLine,
+  onOpenAgent,
+  onOpenTelegram,
+  onOpenWhatsApp,
+  onOpenSandboxFile,
+  onOpenWorkspaceMembers,
+  onPickFiles,
+  onPickPhotos,
+  onRemoveConnector,
+  onRenameAgent,
+  onRefreshAgentSettings,
+  onRefreshAutomations,
+  onRefreshChannels,
+  onRefreshCollaborators,
+  onRefreshFiles,
+  onRestoreAutomation,
+  onRouteChange,
+  onRunAutomationNow,
+  onSaveSandboxFile,
+  onSaveSecret,
+  onSendMessage,
+  onShareAgent,
+  onShareAgentLink,
+  onShareIMessageCode,
+  onShareLineCode,
+  onStartLiveVoice,
+  onStartVoiceInput,
+  onSetupTelegram,
+  onTakePhoto,
+  onToggleAutomation,
+  onUpdateAgentModel,
+  onUpdateToolPermissions,
+  onUploadSandboxFiles,
+  realtimeClient,
+  renderMarkdown,
+  toolRenderers,
+}: SuperagentHomeScreenProps) {
+  const [route, setRoute] = useState<SuperagentRoute>(initialRoute);
+  const [isCreating, setIsCreating] = useState(false);
+  const latestAgent = agents[0] ?? null;
+  const automationCount = automations?.length ?? 0;
+  const connectedConnectorCount = connectedConnectors?.length ?? 0;
+
+  const navigate = useCallback((nextRoute: SuperagentRoute) => {
+    setRoute(nextRoute);
+    onRouteChange?.(nextRoute);
+  }, [onRouteChange]);
+
+  const openAgent = useCallback((agentId: string) => {
+    if (navigationMode === 'internal') {
+      navigate({ name: 'agent', agentId });
+    }
+    onOpenAgent?.(agentId);
+  }, [navigate, navigationMode, onOpenAgent]);
+
+  const createAgent = useCallback(async () => {
+    if (!onCreateAgent) {
+      navigate({ name: 'create-agent' });
+      return;
+    }
+
+    setIsCreating(true);
+    try {
+      const createdAgent = await onCreateAgent();
+      if (createdAgent?.id) {
+        openAgent(createdAgent.id);
+      } else {
+        navigate({ name: 'create-agent' });
+      }
+    } finally {
+      setIsCreating(false);
+    }
+  }, [navigate, onCreateAgent, openAgent]);
+
+  const recentAgents = useMemo(() => agents.slice(1, 5), [agents]);
+
+  if (route.name === 'agent') {
+    const activeAgent = findAgentById(agents, route.agentId);
+    const routeMessages = messagesByAgentId[route.agentId] ?? (
+      latestAgent?.id === route.agentId ? latestMessages : []
+    );
+
+    return (
+      <ConversationScreen
+        apiClient={apiClient}
+        agent={activeAgent ?? createUnknownAgent(route.agentId)}
+        automationCredits={automationCredits}
+        automations={automations}
+        availableConnectors={availableConnectors}
+        channelStatus={channelStatus}
+        collaborators={collaborators}
+        connectingChannelId={connectingChannelId}
+        connectedConnectors={connectedConnectors}
+        connectingConnectorId={connectingConnectorId}
+        currentUserAvatarUrl={currentUserAvatarUrl}
+        fileLoadError={fileLoadError}
+        fileLoadFailed={fileLoadFailed}
+        filePaths={filePaths}
+        isLoadingAgentSettings={isLoadingAgentSettings}
+        isLoadingAutomations={isLoadingAutomations}
+        isLoadingChannels={isLoadingChannels}
+        isLoadingCollaborators={isLoadingCollaborators}
+        isLoadingConnectors={isLoadingConnectors}
+        isLoadingFiles={isLoadingFiles}
+        isSending={isSendingMessage}
+        messages={routeMessages}
+        secrets={secrets}
+        onAgentMessageDone={onAgentMessageDone}
+        onBack={() => {
+          if (onAgentBack) {
+            onAgentBack();
+            return;
+          }
+
+          navigate({ name: 'home' });
+        }}
+        onCancelConnectorConnection={onCancelConnectorConnection}
+        onArchiveAutomation={onArchiveAutomation}
+        onCloneAgent={onCloneAgent}
+        onCopyMessage={onCopyMessage}
+        onConnectConnector={onConnectConnector}
+        onDeleteAgent={onDeleteAgent}
+        onDeleteAutomation={onDeleteAutomation}
+        onDeleteSecret={onDeleteSecret}
+        onDisconnectConnector={onDisconnectConnector}
+        onDisconnectIMessage={onDisconnectIMessage}
+        onDisconnectTelegram={onDisconnectTelegram}
+        onEditAutomation={onEditAutomation}
+        onGenerateLineCode={onGenerateLineCode}
+        onGenerateIMessageCode={onGenerateIMessageCode}
+        onImportFromDrive={onImportFromDrive}
+        onOpenIMessage={onOpenIMessage}
+        onOpenLine={onOpenLine}
+        onOpenSandboxFile={onOpenSandboxFile}
+        onOpenTelegram={onOpenTelegram}
+        onOpenWhatsApp={onOpenWhatsApp}
+        onOpenWorkspaceMembers={onOpenWorkspaceMembers}
+        onPickFiles={onPickFiles}
+        onPickPhotos={onPickPhotos}
+        onRemoveConnector={onRemoveConnector}
+        onRenameAgent={onRenameAgent}
+        onRefreshAgentSettings={onRefreshAgentSettings}
+        onRefreshAutomations={onRefreshAutomations}
+        onRefreshChannels={onRefreshChannels}
+        onRefreshCollaborators={onRefreshCollaborators}
+        onRefreshFiles={onRefreshFiles}
+        onRestoreAutomation={onRestoreAutomation}
+        onRunAutomationNow={onRunAutomationNow}
+        onSaveSandboxFile={onSaveSandboxFile}
+        onSaveSecret={onSaveSecret}
+        onSendMessage={onSendMessage}
+        onShareAgent={onShareAgent}
+        onShareAgentLink={onShareAgentLink}
+        onShareIMessageCode={onShareIMessageCode}
+        onShareLineCode={onShareLineCode}
+        onStartLiveVoice={onStartLiveVoice}
+        onStartVoiceInput={onStartVoiceInput}
+        onSetupTelegram={onSetupTelegram}
+        onTakePhoto={onTakePhoto}
+        onToggleAutomation={onToggleAutomation}
+        onUpdateAgentModel={onUpdateAgentModel}
+        onUpdateToolPermissions={onUpdateToolPermissions}
+        onUploadSandboxFiles={onUploadSandboxFiles}
+        realtimeClient={realtimeClient}
+        renderMarkdown={renderMarkdown}
+        toolRenderers={toolRenderers}
+      />
+    );
+  }
+
+  if (route.name === 'create-agent') {
+    return (
+      <PlaceholderPage
+        title="Create Superagent"
+        body="Creation flow will live inside this package."
+        onBack={() => navigate({ name: 'home' })}
+      />
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.homeTopBar}>
+        <View style={styles.topBarSide} />
+        <View style={styles.topBarTitleWrap}>
+          <Text style={styles.topBarTitle}>Superagent</Text>
+        </View>
+        <View style={[styles.topBarSide, styles.topBarRight]}>
+          {headerAccessory}
+        </View>
+      </View>
+      <ScrollView contentContainerStyle={styles.container}>
+        <View style={styles.homeIntro}>
+          <Text style={styles.subtitle}>
+            {currentUserName ? `Ready when you are, ${currentUserName}.` : 'Agents, tools, and tasks.'}
+          </Text>
+        </View>
+
+        {isLoading ? (
+          <View style={styles.loadingPanel}>
+            <ActivityIndicator color="#FF5A1F" />
+          </View>
+        ) : latestAgent ? (
+          <AgentCard
+            agent={latestAgent}
+            automationCount={automationCount}
+            connectorCount={connectedConnectorCount}
+            latestMessages={latestMessages}
+            onPress={() => openAgent(latestAgent.id)}
+          />
+        ) : (
+          <EmptyState onCreateAgent={createAgent} isCreating={isCreating} />
+        )}
+
+        {latestAgent ? (
+          <CreateAgentButton isCreating={isCreating} onPress={createAgent} />
+        ) : null}
+
+        {recentAgents.length > 0 ? (
+          <View style={styles.recentSection}>
+            <View style={styles.sectionHeader}>
+              <Text style={styles.sectionTitle}>Recent</Text>
+              <Text style={styles.sectionCount}>{recentAgents.length}</Text>
+            </View>
+            {recentAgents.map((agent) => (
+              <AgentRow
+                key={agent.id}
+                agent={agent}
+                latestMessages={messagesByAgentId[agent.id] ?? []}
+                onPress={() => openAgent(agent.id)}
+              />
+            ))}
+          </View>
+        ) : null}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+function findAgentById(agents: SuperagentAgent[], agentId: string) {
+  return agents.find((agent) => agent.id === agentId);
+}
+
+function createUnknownAgent(agentId: string): SuperagentAgent {
+  return {
+    id: agentId,
+    name: 'Superagent',
+  };
+}