@base44/superagent-native 0.0.1

package/src/editorTabs.ts

@@ -0,0 +1,26 @@
+import type { SuperagentEditorTab } from './types';
+
+export const EDITOR_TAB_SECTIONS: Array<{
+  title?: string;
+  tabs: Array<{ id: SuperagentEditorTab; label: string; detail?: string }>;
+}> = [
+  {
+    tabs: [
+      { id: 'chat', label: 'Chat', detail: 'Talk to the agent' },
+      { id: 'integrations', label: 'Integrations', detail: 'Connect tools' },
+      { id: 'tasks', label: 'Tasks', detail: 'Automations' },
+      { id: 'files', label: 'Files', detail: 'Generated project files' },
+      { id: 'channels', label: 'Channels', detail: 'Messaging surfaces' },
+      { id: 'agent_settings', label: 'Agent Settings', detail: 'Access and sharing' },
+    ],
+  },
+];
+
+export function getEditorTabLabel(tab: SuperagentEditorTab) {
+  for (const section of EDITOR_TAB_SECTIONS) {
+    const match = section.tabs.find((item) => item.id === tab);
+    if (match) return match.label;
+  }
+
+  return 'Chat';
+}

package/src/fileTreeUtils.ts

@@ -0,0 +1,165 @@
+import type { SuperagentSandboxFileNode } from './types';
+
+const HIDDEN_FILE_NAMES = new Set(['.gitignore', '.gitkeep', 'BOOTSTRAP.md', 'bootstrap.md']);
+
+export const DEFAULT_SANDBOX_FILE_PATHS = [
+  '.agents/',
+  '.agents/rules/',
+  '.agents/skills/',
+  '.agents/mcps/',
+  '.agents/hooks/',
+  '.agents/cron/',
+  '.agents/memory/',
+  'incoming_files/',
+];
+
+export type SuperagentFileCategory = 'code' | 'html' | 'image' | 'markdown' | 'pdf' | 'text';
+
+export function normalizeFilePaths(paths: string[] = []) {
+  return paths
+    .filter((path) => typeof path === 'string' && path.trim().length > 0)
+    .map((path) => path.replace(/^\/+/, ''))
+    .filter((path) => !path.includes('\0'))
+    .filter((path) => !HIDDEN_FILE_NAMES.has(getFileName(path)));
+}
+
+export function buildFileTree(paths: string[]) {
+  const root: Record<string, unknown> = {};
+  let fileCount = 0;
+  let folderCount = 0;
+
+  for (const path of normalizeFilePaths(paths)) {
+    const parts = path.split('/').filter(Boolean);
+    let current = root;
+    for (let index = 0; index < parts.length; index += 1) {
+      const part = parts[index];
+      const isFile = index === parts.length - 1 && !path.endsWith('/');
+      if (!(part in current)) {
+        current[part] = isFile ? null : {};
+      }
+      if (current[part] !== null) {
+        current = current[part] as Record<string, unknown>;
+      }
+    }
+  }
+
+  const toNodes = (value: Record<string, unknown>): SuperagentSandboxFileNode[] => Object.entries(value)
+    .map(([name, children]) => {
+      if (children === null) {
+        fileCount += 1;
+        return { name, type: 'file' as const };
+      }
+
+      folderCount += 1;
+      return {
+        children: toNodes(children as Record<string, unknown>),
+        name,
+        type: 'folder' as const,
+      };
+    })
+    .sort((first, second) => {
+      if (first.type !== second.type) {
+        return first.type === 'folder' ? -1 : 1;
+      }
+      return first.name.localeCompare(second.name);
+    });
+
+  const tree = toNodes(root);
+
+  return { fileCount, folderCount, tree };
+}
+
+export function flattenFileTree(nodes: SuperagentSandboxFileNode[], parentPath = '') {
+  const paths: string[] = [];
+
+  for (const node of nodes) {
+    const path = parentPath ? `${parentPath}/${node.name}` : node.name;
+    if (node.type === 'file') {
+      paths.push(path);
+    } else {
+      paths.push(...flattenFileTree(node.children ?? [], path));
+    }
+  }
+
+  return paths;
+}
+
+export function getFileCategory(filePath: string): SuperagentFileCategory {
+  const extension = getFileExtension(filePath);
+  if (extension === 'html' || extension === 'htm') {
+    return 'html';
+  }
+  if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'ico', 'bmp'].includes(extension)) {
+    return 'image';
+  }
+  if (extension === 'pdf') {
+    return 'pdf';
+  }
+  if (extension === 'md' || extension === 'mdx') {
+    return 'markdown';
+  }
+  if ([
+    'bash',
+    'css',
+    'env',
+    'gitignore',
+    'graphql',
+    'js',
+    'json',
+    'jsx',
+    'py',
+    'sh',
+    'sql',
+    'toml',
+    'ts',
+    'tsx',
+    'xml',
+    'yaml',
+    'yml',
+  ].includes(extension)) {
+    return 'code';
+  }
+
+  return 'text';
+}
+
+export function isEditableFile(filePath: string) {
+  const category = getFileCategory(filePath);
+  return category !== 'image' && category !== 'pdf';
+}
+
+export function getFileName(path: string) {
+  return path.split('/').filter(Boolean).pop() ?? path;
+}
+
+export function getFolderPath(path: string) {
+  const parts = path.split('/').filter(Boolean);
+  parts.pop();
+  return parts.join('/');
+}
+
+export function getFileExtension(path: string) {
+  const fileName = getFileName(path).toLowerCase();
+  const dotIndex = fileName.lastIndexOf('.');
+  return dotIndex >= 0 ? fileName.slice(dotIndex + 1) : '';
+}
+
+export function getImageMimeType(filePath: string) {
+  switch (getFileExtension(filePath)) {
+    case 'bmp':
+      return 'image/bmp';
+    case 'gif':
+      return 'image/gif';
+    case 'ico':
+      return 'image/x-icon';
+    case 'jpg':
+    case 'jpeg':
+      return 'image/jpeg';
+    case 'svg':
+      return 'image/svg+xml';
+    case 'webp':
+      return 'image/webp';
+    default:
+      return 'image/png';
+  }
+}

package/src/index.ts

@@ -0,0 +1,110 @@
+export { createSuperagentNativeClient } from './apiClient';
+export { createSuperagentApiClient } from './superagentApiClient';
+export { SUPERAGENT_CONNECTOR_CATALOG } from './connectorCatalog';
+export { MarkdownText } from './MarkdownText';
+export { createSuperagentSocketClient } from './realtimeClient';
+export {
+  SUPERAGENT_ATTACHMENT_SIZE_LIMIT_MB,
+  SUPERAGENT_SUPPORTED_ATTACHMENT_EXTENSIONS,
+} from './mediaUtils';
+export { EditorDrawer } from './EditorDrawer';
+export { EditorTabPanel } from './EditorTabPanel';
+export { superagentPaperTheme } from './paperTheme';
+export { SuperagentHomeScreen } from './SuperagentHomeScreen';
+export { ToolCallSummary } from './ToolCallSummary';
+export { useSuperagentAttachmentPicker } from './useSuperagentAttachmentPicker';
+export { useSuperagentConversation } from './useSuperagentConversation';
+export { useSuperagentRuntime } from './useSuperagentRuntime';
+export type { SuperagentSocketClientConfig, SuperagentSocketLike } from './realtimeClient';
+export type {
+  ConnectorConnectionStatus,
+  InitiateConnectorConnectionResult,
+  SuperagentApiClientConfig,
+  SuperagentConnectorsResult,
+  SuperagentVoiceLiveSession,
+} from './superagentApiClient';
+export type {
+  SuperagentAttachmentPickerAdapters,
+  SuperagentAttachmentPickerMode,
+  SuperagentNativeMediaItem,
+} from './useSuperagentAttachmentPicker';
+export type {
+  SuperagentLiveAudioCapture,
+  SuperagentLiveAudioCaptureInput,
+  SuperagentLiveAudioChunk,
+  SuperagentExternalAuthCallbackEvent,
+  SuperagentExternalAuthCallbackStatus,
+  SuperagentLiveVoiceAudioAdapters,
+  SuperagentNativeRuntimeAdapters,
+  SuperagentRealtimeSocketFactoryInput,
+  SuperagentRuntimeConfig,
+  SuperagentRuntimeSocket,
+  SuperagentSandboxPickedFile,
+} from './useSuperagentRuntime';
+export type {
+  QueuedSuperagentMessage,
+  SuperagentAgent,
+  SuperagentAgentActionInput,
+  SuperagentAutomation,
+  SuperagentAutomationActionInput,
+  SuperagentAutomationCreditsSummary,
+  SuperagentAutomationType,
+  SuperagentChannelActionInput,
+  SuperagentChannelId,
+  SuperagentChannelStatus,
+  SuperagentChannelUrlActionInput,
+  SuperagentCollaborator,
+  SuperagentConnector,
+  SuperagentConnectorAccessMode,
+  SuperagentConnectorActionInput,
+  SuperagentConnectorStatus,
+  SuperagentConversation,
+  SuperagentEditorTab,
+  SuperagentHomeScreenProps,
+  SuperagentIMessageActivation,
+  SuperagentIMessageChannelStatus,
+  SuperagentIMessageCodeShareInput,
+  SuperagentLineActivation,
+  SuperagentLineChannelStatus,
+  SuperagentLineCodeShareInput,
+  SuperagentLiveVoiceInput,
+  SuperagentInviteCollaboratorResult,
+  SuperagentInviteCollaboratorsResult,
+  SuperagentMarkdownRenderer,
+  SuperagentMarkdownRendererProps,
+  SuperagentMediaActionContext,
+  SuperagentMediaAttachment,
+  SuperagentMediaPicker,
+  SuperagentMessage,
+  SuperagentModelChoice,
+  SuperagentModelUpdateInput,
+  SuperagentNativeClient,
+  SuperagentNativeClientConfig,
+  SuperagentOpenWorkspaceMembersInput,
+  SuperagentPaginatedMessages,
+  SuperagentCopyMessageInput,
+  SuperagentRealtimeClient,
+  SuperagentRealtimeHandlers,
+  SuperagentRenameAgentInput,
+  SuperagentRoute,
+  SuperagentSandboxFileActionInput,
+  SuperagentSandboxFileContent,
+  SuperagentSandboxFileNode,
+  SuperagentSandboxFileSaveInput,
+  SuperagentSandboxFileUploadInput,
+  SuperagentSandboxFileUploadResult,
+  SuperagentSecret,
+  SuperagentSecretDeleteInput,
+  SuperagentSecretSaveInput,
+  SuperagentShareAgentInput,
+  SuperagentTelegramChannelStatus,
+  SuperagentTelegramSetupInput,
+  SuperagentToolCall,
+  SuperagentToolPermissionConfig,
+  SuperagentToolPermissionsUpdateInput,
+  SuperagentToolRenderer,
+  SuperagentToolRendererProps,
+  SuperagentToolRenderers,
+  SuperagentVoiceInput,
+  SuperagentWhatsAppChannelStatus,
+} from './types';

package/src/markdownStyles.ts

@@ -0,0 +1,64 @@
+import { StyleSheet } from 'react-native';
+
+export const markdownStyles = StyleSheet.create({
+  root: {},
+  wideRoot: { width: '100%' },
+  paragraph: { color: '#F4F4F5', fontSize: 17, lineHeight: 25, marginVertical: 3 },
+  heading1: { color: '#FFFFFF', fontSize: 22, fontWeight: '800', lineHeight: 29, marginBottom: 6, marginTop: 8 },
+  heading2: { color: '#FFFFFF', fontSize: 20, fontWeight: '800', lineHeight: 27, marginBottom: 5, marginTop: 7 },
+  heading3: { color: '#FFFFFF', fontSize: 18, fontWeight: '800', lineHeight: 25, marginBottom: 4, marginTop: 6 },
+  list: { marginVertical: 4 },
+  listItem: { flexDirection: 'row', marginVertical: 3 },
+  listMarker: { color: '#F4F4F5', fontSize: 18, lineHeight: 25, marginRight: 8, minWidth: 18, textAlign: 'center' },
+  listText: { color: '#F4F4F5', flex: 1, fontSize: 17, lineHeight: 25 },
+  quote: {
+    backgroundColor: '#111111',
+    borderLeftColor: '#3F3F46',
+    borderLeftWidth: 2,
+    borderRadius: 10,
+    marginVertical: 6,
+    paddingHorizontal: 11,
+    paddingVertical: 8,
+  },
+  quoteText: { color: '#C7C7CC', fontSize: 16, fontStyle: 'italic', lineHeight: 23 },
+  codeBlockScroll: { marginVertical: 8, width: '100%' },
+  codeBlock: {
+    backgroundColor: '#101010',
+    borderColor: '#27272A',
+    borderRadius: 12,
+    borderWidth: 1,
+    minWidth: '100%',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  codeBlockText: { color: '#A1A1AA', fontFamily: 'Menlo', fontSize: 14, lineHeight: 21 },
+  tableScroll: { marginVertical: 8, width: '100%' },
+  table: {
+    backgroundColor: '#0B0B0C',
+    borderColor: '#27272A',
+    borderRadius: 12,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  tableRow: { borderTopColor: '#242429', borderTopWidth: 1, flexDirection: 'row' },
+  tableHeaderRow: { backgroundColor: '#151515', borderTopWidth: 0 },
+  tableCell: {
+    borderLeftColor: '#242429',
+    borderLeftWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+  tableHeaderCell: { borderLeftWidth: 1 },
+  tableText: { color: '#E4E4E7', fontSize: 14, lineHeight: 20 },
+  tableHeaderText: { color: '#F4F4F5', fontSize: 14, fontWeight: '800', lineHeight: 20 },
+  inlineCode: {
+    backgroundColor: '#171717',
+    borderRadius: 5,
+    color: '#A1A1AA',
+    fontFamily: 'Menlo',
+    fontSize: 15,
+  },
+  strong: { color: '#FFFFFF', fontWeight: '800' },
+  italic: { fontStyle: 'italic' },
+  link: { color: '#8AB4F8', textDecorationLine: 'underline' },
+});

package/src/mediaUtils.ts

@@ -0,0 +1,75 @@
+import type { SuperagentMediaAttachment } from './types';
+
+export const MAX_ATTACHMENTS = 10;
+export const SUPERAGENT_SUPPORTED_ATTACHMENT_EXTENSIONS = [
+  '.jpg',
+  '.jpeg',
+  '.png',
+  '.webp',
+  '.pdf',
+  '.txt',
+  '.html',
+  '.csv',
+  '.xlsx',
+  '.docx',
+  '.json',
+  '.md',
+] as const;
+
+export const SUPERAGENT_ATTACHMENT_SIZE_LIMIT_MB: Record<string, number> = {
+  '.jpg': 40,
+  '.jpeg': 40,
+  '.png': 40,
+  '.webp': 40,
+  '.pdf': 10,
+  '.txt': 5,
+  '.html': 5,
+  '.csv': 10,
+  '.xlsx': 15,
+  '.docx': 5,
+  '.json': 10,
+  '.md': 5,
+};
+
+export function normalizeMediaAttachments(input: unknown) {
+  const attachments = Array.isArray(input) ? input : input ? [input] : [];
+
+  return attachments.filter(isAttachment).filter((attachment) => isSafeAttachmentUrl(attachment.url));
+}
+
+export function buildAttachmentPrompt(attachments: SuperagentMediaAttachment[]) {
+  const images = attachments.filter(isImageAttachment);
+  const allImages = images.length === attachments.length;
+
+  if (allImages && attachments.length === 1) return "What's in this image?";
+  if (allImages && attachments.length > 1) return `What's in these ${attachments.length} images?`;
+  if (attachments.length === 1) return `Here's a file: ${getAttachmentName(attachments[0])}`;
+  return `Here are ${attachments.length} files.`;
+}
+
+export function getAttachmentName(attachment: SuperagentMediaAttachment) {
+  if (attachment.name) return attachment.name;
+  const cleanUrl = attachment.url.split('?')[0];
+  const filename = cleanUrl.split('/').pop();
+  if (!filename) return 'file';
+
+  try {
+    return decodeURIComponent(filename);
+  } catch {
+    return filename;
+  }
+}
+
+export function isImageAttachment(attachment: SuperagentMediaAttachment) {
+  if (attachment.kind === 'image') return true;
+  if (attachment.mimeType?.startsWith('image/')) return true;
+  return /\.(jpg|jpeg|png|gif|webp|bmp)(?:\?|$)/i.test(attachment.url);
+}
+
+function isAttachment(value: unknown): value is SuperagentMediaAttachment {
+  return Boolean(value && typeof value === 'object' && typeof (value as { url?: unknown }).url === 'string');
+}
+
+function isSafeAttachmentUrl(url: string) {
+  return /^https?:\/\//i.test(url.trim()) && !url.includes('\0');
+}

package/src/messageActionStyles.ts

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+
+export const messageActionStyles = StyleSheet.create({
+  bar: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    marginTop: 5,
+  },
+  barUser: { alignSelf: 'flex-end' },
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#0F0F10',
+    borderColor: '#252529',
+    borderRadius: 15,
+    borderWidth: 1,
+    flexDirection: 'row',
+    marginRight: 6,
+    minHeight: 30,
+    paddingHorizontal: 8,
+  },
+  buttonDanger: { borderColor: '#3B2222' },
+  buttonDisabled: { opacity: 0.45 },
+  label: { color: '#A1A1AA', fontSize: 11, fontWeight: '700', marginLeft: 4 },
+  labelDanger: { color: '#FCA5A5' },
+});

package/src/messageUtils.ts

@@ -0,0 +1,58 @@
+import type { SuperagentMessage, SuperagentReplyTo, SuperagentToolCall } from './types';
+
+export function getMessageFiles(message: SuperagentMessage) {
+  return message.fileUrls ?? message.file_urls ?? [];
+}
+
+export function getMessageToolCalls(message: SuperagentMessage): SuperagentToolCall[] {
+  return message.toolCalls ?? message.tool_calls ?? [];
+}
+
+export function getReplyTo(message: SuperagentMessage): SuperagentReplyTo | undefined {
+  if (message.replyTo) return message.replyTo;
+
+  const params = message.additional_message_params;
+  const replyTo = params && typeof params === 'object' ? params.reply_to : undefined;
+  if (replyTo && typeof replyTo === 'object' && typeof replyTo.content === 'string') {
+    return {
+      content: replyTo.content,
+      messageId: typeof replyTo.message_id === 'string' ? replyTo.message_id : undefined,
+    };
+  }
+
+  return undefined;
+}
+
+export function shouldShowDateSeparator(
+  message: SuperagentMessage,
+  previousMessage?: SuperagentMessage,
+) {
+  const currentLabel = formatDateLabel(message.createdAt);
+  if (!currentLabel) return false;
+  return currentLabel !== formatDateLabel(previousMessage?.createdAt);
+}
+
+export function formatDateLabel(value?: string) {
+  if (!value) return '';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+
+  const today = new Date();
+  if (date.toDateString() === today.toDateString()) return 'Today';
+
+  return date.toLocaleDateString([], {
+    day: 'numeric',
+    month: 'short',
+  });
+}
+
+export function getFileName(url: string) {
+  const withoutQuery = url.split('?')[0] ?? url;
+  const fileName = withoutQuery.split('/').pop() ?? 'File';
+
+  try {
+    return decodeURIComponent(fileName);
+  } catch {
+    return fileName;
+  }
+}

package/src/nativeActionSheet.ts

@@ -0,0 +1,25 @@
+import { ActionSheetIOS, Platform } from 'react-native';
+
+export type NativeActionSheetOption = {
+  label: string;
+  onPress: () => void;
+};
+
+export function showNativeActionSheet(title: string, actions: NativeActionSheetOption[]) {
+  if (Platform.OS !== 'ios' || !ActionSheetIOS?.showActionSheetWithOptions) {
+    return false;
+  }
+
+  ActionSheetIOS.showActionSheetWithOptions(
+    {
+      cancelButtonIndex: actions.length,
+      options: [...actions.map((action) => action.label), 'Cancel'],
+      title,
+    },
+    (selectedIndex) => {
+      actions[selectedIndex]?.onPress();
+    },
+  );
+
+  return true;
+}

package/src/nativeActionSheet.web.ts

@@ -0,0 +1,5 @@
+import type { NativeActionSheetOption } from './nativeActionSheet';
+
+export function showNativeActionSheet(_title: string, _actions: NativeActionSheetOption[]) {
+  return false;
+}

package/src/paperTheme.ts

@@ -0,0 +1,52 @@
+import type { ProviderProps } from 'react-native-paper';
+
+export const superagentPaperTheme = {
+  animation: { scale: 1 },
+  dark: true,
+  isV3: true,
+  mode: 'adaptive',
+  roundness: 4,
+  version: 3,
+  colors: {
+    background: '#000000',
+    backdrop: 'rgba(0,0,0,0.5)',
+    elevation: {
+      level0: 'transparent',
+      level1: '#111111',
+      level2: '#151515',
+      level3: '#171717',
+      level4: '#1C1C1E',
+      level5: '#242427',
+    },
+    error: '#FCA5A5',
+    errorContainer: '#3F1212',
+    inverseOnSurface: '#111111',
+    inversePrimary: '#111111',
+    inverseSurface: '#F4F4F5',
+    onBackground: '#F4F4F5',
+    onError: '#111111',
+    onErrorContainer: '#FCA5A5',
+    onPrimary: '#111111',
+    onPrimaryContainer: '#F4F4F5',
+    onSecondary: '#111111',
+    onSecondaryContainer: '#F4F4F5',
+    onSurface: '#F4F4F5',
+    onSurfaceDisabled: 'rgba(244,244,245,0.38)',
+    onSurfaceVariant: '#A1A1AA',
+    onTertiary: '#111111',
+    onTertiaryContainer: '#F4F4F5',
+    outline: '#2A2A2A',
+    outlineVariant: '#242427',
+    primary: '#F4F4F5',
+    primaryContainer: '#242427',
+    scrim: 'rgba(0,0,0,0.6)',
+    secondary: '#D4D4D8',
+    secondaryContainer: '#171717',
+    shadow: '#000000',
+    surface: '#111111',
+    surfaceDisabled: 'rgba(244,244,245,0.12)',
+    surfaceVariant: '#171717',
+    tertiary: '#FF5A1F',
+    tertiaryContainer: '#3A180C',
+  },
+} as ProviderProps['theme'];