@base44/superagent-native 0.0.1

package/src/MarkdownText.tsx

@@ -0,0 +1,317 @@
+import React, { type ReactNode } from 'react';
+import { Linking, ScrollView, Text, View } from 'react-native';
+
+import { markdownStyles } from './markdownStyles';
+import type { SuperagentMarkdownRenderer, SuperagentMessage } from './types';
+
+type MarkdownBlock =
+  | { type: 'code'; text: string }
+  | { type: 'heading'; level: 1 | 2 | 3; text: string }
+  | { type: 'list'; ordered: boolean; items: string[] }
+  | { type: 'paragraph'; text: string }
+  | { type: 'quote'; text: string }
+  | { type: 'table'; headers: string[]; rows: string[][] };
+
+export function MarkdownText({
+  content,
+  isUser,
+  message,
+  onLongPress,
+  renderMarkdown,
+}: {
+  content: string;
+  isUser: boolean;
+  message: SuperagentMessage;
+  onLongPress?: () => void;
+  renderMarkdown?: SuperagentMarkdownRenderer;
+}) {
+  const Renderer = renderMarkdown;
+  if (Renderer) return <Renderer content={content} isUser={isUser} message={message} />;
+
+  const blocks = parseMarkdownBlocks(content);
+  if (blocks.length === 0) return null;
+  const hasWideBlock = blocks.some((block) => block.type === 'code' || block.type === 'table');
+
+  return (
+    <View style={[markdownStyles.root, hasWideBlock && markdownStyles.wideRoot]}>
+      {blocks.map((block, index) => renderBlock(block, index, onLongPress))}
+    </View>
+  );
+}
+
+function renderBlock(block: MarkdownBlock, index: number, onLongPress?: () => void) {
+  if (block.type === 'code') {
+    return (
+      <ScrollView
+        horizontal
+        key={`code-${index}`}
+        nestedScrollEnabled
+        showsHorizontalScrollIndicator
+        style={markdownStyles.codeBlockScroll}
+      >
+        <View style={markdownStyles.codeBlock}>
+          <Text style={markdownStyles.codeBlockText}>{block.text}</Text>
+        </View>
+      </ScrollView>
+    );
+  }
+
+  if (block.type === 'heading') {
+    const style = block.level === 1
+      ? markdownStyles.heading1
+      : block.level === 2 ? markdownStyles.heading2 : markdownStyles.heading3;
+    return <Text key={`heading-${index}`} onLongPress={onLongPress} style={style}>{renderInline(block.text, `h-${index}`)}</Text>;
+  }
+
+  if (block.type === 'quote') {
+    return (
+      <View key={`quote-${index}`} style={markdownStyles.quote}>
+        <Text onLongPress={onLongPress} style={markdownStyles.quoteText}>{renderInline(block.text, `q-${index}`)}</Text>
+      </View>
+    );
+  }
+
+  if (block.type === 'list') {
+    return (
+      <View key={`list-${index}`} style={markdownStyles.list}>
+        {block.items.map((item, itemIndex) => (
+          <View key={`${item}-${itemIndex}`} style={markdownStyles.listItem}>
+            <Text style={markdownStyles.listMarker}>{block.ordered ? `${itemIndex + 1}.` : '\u2022'}</Text>
+            <Text onLongPress={onLongPress} style={markdownStyles.listText}>{renderInline(item, `li-${index}-${itemIndex}`)}</Text>
+          </View>
+        ))}
+      </View>
+    );
+  }
+
+  if (block.type === 'table') {
+    const columnWidths = getTableColumnWidths(block);
+
+    return (
+      <ScrollView
+        directionalLockEnabled
+        horizontal
+        key={`table-${index}`}
+        nestedScrollEnabled
+        showsHorizontalScrollIndicator
+        style={markdownStyles.tableScroll}
+      >
+        <View style={markdownStyles.table}>
+          <View style={[markdownStyles.tableRow, markdownStyles.tableHeaderRow]}>
+            {block.headers.map((header, headerIndex) => (
+              <View
+                key={`${header}-${headerIndex}`}
+                style={[markdownStyles.tableCell, markdownStyles.tableHeaderCell, { width: columnWidths[headerIndex] }]}
+              >
+                <Text numberOfLines={1} style={markdownStyles.tableHeaderText}>{renderInline(header, `th-${index}-${headerIndex}`)}</Text>
+              </View>
+            ))}
+          </View>
+          {block.rows.map((row, rowIndex) => (
+            <View key={`row-${index}-${rowIndex}`} style={markdownStyles.tableRow}>
+              {block.headers.map((_header, cellIndex) => (
+                <View
+                  key={`cell-${index}-${rowIndex}-${cellIndex}`}
+                  style={[markdownStyles.tableCell, { width: columnWidths[cellIndex] }]}
+                >
+                  <Text numberOfLines={1} style={markdownStyles.tableText}>
+                    {renderInline(row[cellIndex] ?? '', `td-${index}-${rowIndex}-${cellIndex}`)}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    );
+  }
+
+  return (
+    <Text key={`p-${index}`} onLongPress={onLongPress} style={markdownStyles.paragraph}>
+      {renderInline(block.text, `p-${index}`)}
+    </Text>
+  );
+}
+
+function parseMarkdownBlocks(content: string) {
+  const lines = decodeEntities(content).replace(/\r\n/g, '\n').split('\n');
+  const blocks: MarkdownBlock[] = [];
+  let index = 0;
+
+  while (index < lines.length) {
+    const line = lines[index];
+    if (!line.trim()) {
+      index += 1;
+    } else if (line.trim().startsWith('```')) {
+      const codeLines: string[] = [];
+      index += 1;
+      while (index < lines.length && !lines[index].trim().startsWith('```')) {
+        codeLines.push(lines[index]);
+        index += 1;
+      }
+      blocks.push({ type: 'code', text: codeLines.join('\n') });
+      index += 1;
+    } else if (parseHeading(line)) {
+      blocks.push(parseHeading(line)!);
+      index += 1;
+    } else if (isTableStart(lines, index)) {
+      const parsedTable = parseTable(lines, index);
+      blocks.push(parsedTable.table);
+      index = parsedTable.nextIndex;
+    } else if (line.trim().startsWith('>')) {
+      const quoteLines: string[] = [];
+      while (index < lines.length && lines[index].trim().startsWith('>')) {
+        quoteLines.push(lines[index].trim().replace(/^>\s?/, ''));
+        index += 1;
+      }
+      blocks.push({ type: 'quote', text: quoteLines.join('\n') });
+    } else if (isListLine(line)) {
+      const ordered = isOrderedListLine(line);
+      const items: string[] = [];
+      while (index < lines.length && isListLine(lines[index]) && isOrderedListLine(lines[index]) === ordered) {
+        items.push(lines[index].replace(/^\s*(?:[-*]|\d+[.)])\s+/, ''));
+        index += 1;
+      }
+      blocks.push({ type: 'list', ordered, items });
+    } else {
+      const paragraphLines: string[] = [];
+      while (index < lines.length && lines[index].trim() && !isBlockStart(lines, index)) {
+        paragraphLines.push(lines[index].trim());
+        index += 1;
+      }
+      blocks.push({ type: 'paragraph', text: paragraphLines.join(' ') });
+    }
+  }
+
+  return blocks;
+}
+
+function parseHeading(line: string): MarkdownBlock | null {
+  const match = line.match(/^(#{1,3})\s+(.+)$/);
+  if (!match) return null;
+  return { type: 'heading', level: match[1].length as 1 | 2 | 3, text: match[2] };
+}
+
+function isBlockStart(lines: string[], index: number) {
+  const line = lines[index];
+  return Boolean(parseHeading(line))
+    || line.trim().startsWith('```')
+    || line.trim().startsWith('>')
+    || isListLine(line)
+    || isTableStart(lines, index);
+}
+
+function isListLine(line: string) {
+  return /^\s*(?:[-*]|\d+[.)])\s+/.test(line);
+}
+
+function isOrderedListLine(line: string) {
+  return /^\s*\d+[.)]\s+/.test(line);
+}
+
+function isTableStart(lines: string[], index: number) {
+  return isTableRow(lines[index]) && isTableSeparator(lines[index + 1]);
+}
+
+function parseTable(lines: string[], startIndex: number): { nextIndex: number; table: Extract<MarkdownBlock, { type: 'table' }> } {
+  const headers = splitTableRow(lines[startIndex]);
+  const rows: string[][] = [];
+  let index = startIndex + 2;
+
+  while (index < lines.length && isTableRow(lines[index]) && !isTableSeparator(lines[index])) {
+    rows.push(splitTableRow(lines[index]));
+    index += 1;
+  }
+
+  return {
+    nextIndex: index,
+    table: { headers, rows, type: 'table' },
+  };
+}
+
+function isTableRow(line?: string) {
+  if (!line) return false;
+  return splitTableRow(line).length >= 2;
+}
+
+function isTableSeparator(line?: string) {
+  if (!line) return false;
+  const cells = splitTableRow(line);
+  return cells.length >= 2 && cells.every((cell) => /^:?-{3,}:?$/.test(cell.replace(/\s+/g, '')));
+}
+
+function splitTableRow(line: string) {
+  const trimmed = line.trim();
+  const withoutOuterPipes = trimmed.replace(/^\|/, '').replace(/\|$/, '');
+  return withoutOuterPipes.split('|').map((cell) => cell.trim());
+}
+
+function getTableColumnWidths(table: Extract<MarkdownBlock, { type: 'table' }>) {
+  return table.headers.map((header, index) => {
+    const longestCell = [header, ...table.rows.map((row) => row[index] ?? '')]
+      .reduce((longest, cell) => Math.max(longest, getVisibleTextLength(cell)), 0);
+    return Math.min(Math.max(longestCell * 8.7 + 32, 104), 340);
+  });
+}
+
+function getVisibleTextLength(value: string) {
+  return value
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/\*([^*]+)\*/g, '$1')
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    .length;
+}
+
+function renderInline(text: string, keyPrefix: string) {
+  const nodes: ReactNode[] = [];
+  const pattern = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\)|https?:\/\/\S+)/gi;
+  let lastIndex = 0;
+
+  text.replace(pattern, (match, _unused, offset) => {
+    if (offset > lastIndex) nodes.push(text.slice(lastIndex, offset));
+    nodes.push(renderInlineToken(match, `${keyPrefix}-${offset}`));
+    lastIndex = offset + match.length;
+    return match;
+  });
+
+  if (lastIndex < text.length) nodes.push(text.slice(lastIndex));
+  return nodes;
+}
+
+function renderInlineToken(token: string, key: string) {
+  const link = parseLink(token);
+  if (link) {
+    return (
+      <Text key={key} onPress={() => openSafeUrl(link.url)} style={markdownStyles.link}>
+        {link.label}
+      </Text>
+    );
+  }
+
+  if (token.startsWith('`')) {
+    return <Text key={key} style={markdownStyles.inlineCode}>{token.slice(1, -1)}</Text>;
+  }
+
+  if (token.startsWith('**')) {
+    return <Text key={key} style={markdownStyles.strong}>{token.slice(2, -2)}</Text>;
+  }
+
+  if (token.startsWith('*')) return <Text key={key} style={markdownStyles.italic}>{token.slice(1, -1)}</Text>;
+  return token;
+}
+
+function parseLink(token: string) {
+  const markdownLink = token.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+  if (markdownLink && isSafeUrl(markdownLink[2])) return { label: markdownLink[1], url: markdownLink[2] };
+  if (isSafeUrl(token)) return { label: token, url: token };
+  return null;
+}
+
+function isSafeUrl(url: string) {
+  return /^https?:\/\//i.test(url.trim());
+}
+
+function openSafeUrl(url: string) { if (isSafeUrl(url)) Linking.openURL(url).catch(() => {}); }
+
+function decodeEntities(value: string) { return value.replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'"); }

package/src/MessageActionBar.tsx

@@ -0,0 +1,126 @@
+import * as ReactNative from 'react-native';
+
+import type { SuperagentCopyMessageInput, SuperagentMessage } from './types';
+
+type MessageAction = {
+  label: string;
+  destructive?: boolean;
+  run: () => Promise<void> | void;
+};
+
+type NativeActionSheet = {
+  showActionSheetWithOptions: (
+    options: {
+      cancelButtonIndex?: number;
+      destructiveButtonIndex?: number;
+      options: string[];
+      userInterfaceStyle?: 'dark' | 'light';
+    },
+    callback: (buttonIndex: number) => void,
+  ) => void;
+};
+
+const { Alert, Platform } = ReactNative;
+const ACTION_SHEET_IOS_KEY = 'ActionSheet' + 'IOS';
+
+export function showMessageActions({
+  message,
+  onCopyMessage,
+  onDeleteMessage,
+  onReplyMessage,
+}: {
+  message: SuperagentMessage;
+  onCopyMessage?: SuperagentCopyMessageInput;
+  onDeleteMessage?: (messageId: string) => Promise<boolean> | boolean;
+  onReplyMessage?: (message: SuperagentMessage) => void;
+}) {
+  const actions = getMessageActions({
+    message,
+    onCopyMessage,
+    onDeleteMessage,
+    onReplyMessage,
+  });
+
+  if (actions.length === 0) return;
+
+  const actionSheet = (ReactNative as unknown as Record<string, NativeActionSheet | undefined>)[ACTION_SHEET_IOS_KEY];
+  if (Platform.OS === 'ios' && actionSheet) {
+    const options = [...actions.map((action) => action.label), 'Cancel'];
+    const cancelButtonIndex = options.length - 1;
+    const destructiveButtonIndex = actions.findIndex((action) => action.destructive);
+
+    actionSheet.showActionSheetWithOptions(
+      {
+        cancelButtonIndex,
+        destructiveButtonIndex: destructiveButtonIndex >= 0 ? destructiveButtonIndex : undefined,
+        options,
+        userInterfaceStyle: 'dark',
+      },
+      (buttonIndex) => {
+        if (buttonIndex === cancelButtonIndex) return;
+        const action = actions[buttonIndex];
+        if (action) void action.run();
+      },
+    );
+    return;
+  }
+
+  Alert.alert(
+    'Message',
+    undefined,
+    [
+      ...actions.map((action) => ({
+        onPress: () => {
+          void action.run();
+        },
+        style: action.destructive ? 'destructive' as const : 'default' as const,
+        text: action.label,
+      })),
+      { style: 'cancel' as const, text: 'Cancel' },
+    ],
+    { cancelable: true },
+  );
+}
+
+function getMessageActions({
+  message,
+  onCopyMessage,
+  onDeleteMessage,
+  onReplyMessage,
+}: {
+  message: SuperagentMessage;
+  onCopyMessage?: SuperagentCopyMessageInput;
+  onDeleteMessage?: (messageId: string) => Promise<boolean> | boolean;
+  onReplyMessage?: (message: SuperagentMessage) => void;
+}): MessageAction[] {
+  const messageId = message.id;
+  const isPreviewMessage = messageId === 'welcome';
+  const hasContent = message.content.trim().length > 0;
+  const actions: MessageAction[] = [];
+
+  if (!isPreviewMessage && hasContent && onReplyMessage) {
+    actions.push({
+      label: 'Reply',
+      run: () => onReplyMessage(message),
+    });
+  }
+
+  if (!isPreviewMessage && hasContent && onCopyMessage) {
+    actions.push({
+      label: 'Copy',
+      run: () => onCopyMessage(message),
+    });
+  }
+
+  if (!isPreviewMessage && messageId && onDeleteMessage) {
+    actions.push({
+      destructive: true,
+      label: 'Delete',
+      run: async () => {
+        await onDeleteMessage(messageId);
+      },
+    });
+  }
+
+  return actions;
+}

package/src/RenameAgentModal.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+import { renameAgentModalStyles as styles } from './renameAgentModalStyles';
+
+export function RenameAgentModal({
+  error,
+  initialName,
+  isSaving,
+  isVisible,
+  onClose,
+  onSave,
+}: {
+  error?: string | null;
+  initialName: string;
+  isSaving: boolean;
+  isVisible: boolean;
+  onClose: () => void;
+  onSave: (name: string) => void;
+}) {
+  const [name, setName] = useState(initialName);
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isVisible) {
+      setName(initialName);
+      setLocalError(null);
+    }
+  }, [initialName, isVisible]);
+
+  const save = () => {
+    const trimmed = name.trim();
+    if (!trimmed) {
+      setLocalError('Name is required.');
+      return;
+    }
+    onSave(trimmed);
+  };
+
+  return (
+    <Modal animationType="fade" transparent visible={isVisible} onRequestClose={onClose}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={styles.backdrop}
+      >
+        <View style={styles.card}>
+          <Text style={styles.title}>Rename Superagent</Text>
+          <TextInput
+            autoCapitalize="words"
+            autoCorrect
+            autoFocus
+            editable={!isSaving}
+            maxLength={80}
+            onChangeText={(value) => {
+              setName(value);
+              setLocalError(null);
+            }}
+            onSubmitEditing={save}
+            placeholder="Superagent name"
+            placeholderTextColor="#8E8E93"
+            returnKeyType="done"
+            selectTextOnFocus
+            style={styles.input}
+            value={name}
+          />
+          {localError || error ? (
+            <Text style={styles.error}>{localError || error}</Text>
+          ) : null}
+          <View style={styles.actions}>
+            <Pressable
+              accessibilityRole="button"
+              disabled={isSaving}
+              onPress={onClose}
+              style={({ pressed }) => [
+                styles.button,
+                styles.secondaryButton,
+                pressed && styles.pressed,
+              ]}
+            >
+              <Text style={styles.secondaryButtonText}>Cancel</Text>
+            </Pressable>
+            <Pressable
+              accessibilityRole="button"
+              disabled={isSaving}
+              onPress={save}
+              style={({ pressed }) => [
+                styles.button,
+                styles.primaryButton,
+                (pressed || isSaving) && styles.primaryPressed,
+              ]}
+            >
+              <Text style={styles.primaryButtonText}>{isSaving ? 'Saving...' : 'Save'}</Text>
+            </Pressable>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}

package/src/ShareAgentModal.styles.ts

@@ -0,0 +1,95 @@
+import { StyleSheet } from 'react-native';
+
+export const shareAgentModalStyles = StyleSheet.create({
+  agentTitle: { alignItems: 'center', flex: 1, flexDirection: 'row', minWidth: 0 },
+  avatarImage: { height: '100%', width: '100%' },
+  avatarWrap: {
+    alignItems: 'center',
+    backgroundColor: '#262626',
+    borderRadius: 20,
+    height: 40,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    width: 40,
+  },
+  backdrop: { backgroundColor: 'rgba(0,0,0,0.58)', flex: 1, justifyContent: 'flex-end' },
+  badge: { color: '#DADADA', fontSize: 11, fontWeight: '800', marginLeft: 6 },
+  closeButton: { alignItems: 'center', height: 38, justifyContent: 'center', width: 38 },
+  disabledButton: { opacity: 0.62 },
+  emptyText: { color: '#8E8E93', fontSize: 13, paddingVertical: 16, textAlign: 'center' },
+  errorText: { color: '#FCA5A5', fontSize: 12, fontWeight: '700', marginTop: 8 },
+  guestActions: { flexDirection: 'row', gap: 10, marginTop: 14 },
+  guestBody: { color: '#DADADA', fontSize: 13, fontWeight: '700', lineHeight: 19, marginTop: 6 },
+  guestCard: {
+    backgroundColor: '#101010',
+    borderColor: '#353535',
+    borderRadius: 20,
+    borderWidth: 1,
+    marginTop: 10,
+    padding: 14,
+  },
+  guestHint: { color: '#F8D77B', fontSize: 12, fontWeight: '800', lineHeight: 17, marginTop: 8 },
+  guestPrimaryButton: {
+    alignItems: 'center',
+    backgroundColor: '#F7F3E7',
+    borderRadius: 17,
+    flex: 1,
+    flexDirection: 'row',
+    gap: 7,
+    justifyContent: 'center',
+    paddingVertical: 10,
+  },
+  guestPrimaryButtonText: { color: '#111111', fontSize: 13, fontWeight: '900' },
+  guestSecondaryButton: {
+    alignItems: 'center',
+    backgroundColor: '#1B1B1B',
+    borderColor: '#333333',
+    borderRadius: 17,
+    borderWidth: 1,
+    flex: 1,
+    flexDirection: 'row',
+    gap: 7,
+    justifyContent: 'center',
+    paddingVertical: 10,
+  },
+  guestSecondaryButtonText: { color: '#F4F4F5', fontSize: 13, fontWeight: '900' },
+  guestTitle: { color: '#F4F4F5', fontSize: 15, fontWeight: '900' },
+  header: { alignItems: 'center', flexDirection: 'row', marginBottom: 16 },
+  input: { color: '#F4F4F5', fontSize: 16, maxHeight: 92, minHeight: 42, paddingVertical: 8 },
+  inputCard: { backgroundColor: '#141414', borderColor: '#2A2A2A', borderRadius: 20, borderWidth: 1, padding: 14 },
+  inputLabel: { color: '#F4F4F5', fontSize: 13, fontWeight: '800' },
+  inviteButton: {
+    alignItems: 'center',
+    backgroundColor: '#F7F3E7',
+    borderRadius: 18,
+    flexDirection: 'row',
+    gap: 7,
+    justifyContent: 'center',
+    marginTop: 12,
+    paddingVertical: 11,
+  },
+  inviteButtonText: { color: '#111111', fontSize: 14, fontWeight: '900' },
+  memberEmail: { color: '#8E8E93', fontSize: 12, marginTop: 2 },
+  memberName: { color: '#F4F4F5', flexShrink: 1, fontSize: 14, fontWeight: '800' },
+  memberNameRow: { alignItems: 'center', flexDirection: 'row', minWidth: 0 },
+  memberRow: { alignItems: 'center', flexDirection: 'row', paddingVertical: 9 },
+  memberTextWrap: { flex: 1, marginLeft: 10, minWidth: 0 },
+  membersHeader: { alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', marginTop: 18 },
+  membersList: { paddingBottom: 6 },
+  membersTitle: { color: '#F4F4F5', fontSize: 15, fontWeight: '900' },
+  sheet: {
+    alignSelf: 'center',
+    backgroundColor: '#0A0A0A',
+    borderColor: '#2A2A2A',
+    borderRadius: 28,
+    borderWidth: 1,
+    marginBottom: 18,
+    maxHeight: '82%',
+    padding: 18,
+    width: '92%',
+  },
+  subtitle: { color: '#8E8E93', fontSize: 13, marginTop: 2 },
+  successText: { color: '#86EFAC', fontSize: 12, fontWeight: '800', marginTop: 8 },
+  title: { color: '#F4F4F5', fontSize: 21, fontWeight: '900' },
+  titleTextWrap: { flex: 1, marginLeft: 10, minWidth: 0 },
+});