@base44/superagent-native 0.0.1

package/src/AgentSphereIcon.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Image, Text, View } from 'react-native';
+import { User } from 'lucide-react-native';
+import Svg, {
+  Circle,
+  ClipPath,
+  Defs,
+  Ellipse,
+  G,
+  LinearGradient,
+  Path,
+  RadialGradient,
+  Rect,
+  Stop,
+} from 'react-native-svg';
+
+import { agentSphereStyles } from './agentSphereStyles';
+import type { SuperagentAgent } from './types';
+
+const SIZES = { header: 34, md: 30, sm: 24 };
+
+const SPHERE_PALETTES = [
+  ['#FF4F00', '#FF9867', '#F5D3A2', '#A9B0ED', '#FFF3E2'],
+  ['#23AEE0', '#3874FF', '#93C5F7', '#33EBFF', '#D1F3FF'],
+  ['#119C72', '#5FE6A3', '#C8FACC', '#2F7D6D', '#F0FFF4'],
+  ['#9BE266', '#D9F99D', '#5AC27C', '#F4FFE7', '#7EA650'],
+  ['#0A0A0F', '#2A2A36', '#73717F', '#F4F4F5', '#15151C'],
+] as const;
+
+export function AgentSphereIcon({
+  agent,
+  isUser = false,
+  size = 'md',
+  userAvatarUrl,
+}: {
+  agent?: SuperagentAgent;
+  isUser?: boolean;
+  size?: keyof typeof SIZES;
+  userAvatarUrl?: string | null;
+}) {
+  const dimension = SIZES[size];
+  const borderRadius = dimension / 2;
+  const logo = getAgentLogo(agent);
+  const [userImageFailed, setUserImageFailed] = React.useState(false);
+  const normalizedUserAvatarUrl = userAvatarUrl?.trim();
+
+  React.useEffect(() => {
+    setUserImageFailed(false);
+  }, [normalizedUserAvatarUrl]);
+
+  if (isUser) {
+    if (normalizedUserAvatarUrl && !userImageFailed) {
+      return (
+        <View style={[
+          agentSphereStyles.frame,
+          agentSphereStyles.userFrame,
+          { borderRadius, height: dimension, width: dimension },
+        ]}>
+          <Image
+            onError={() => setUserImageFailed(true)}
+            resizeMode="cover"
+            source={{ uri: normalizedUserAvatarUrl }}
+            style={agentSphereStyles.image}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View style={[
+        agentSphereStyles.frame,
+        agentSphereStyles.userFrame,
+        { borderRadius, height: dimension, width: dimension },
+      ]}>
+        <User color="#D4D4D8" size={dimension * 0.48} strokeWidth={2.4} />
+      </View>
+    );
+  }
+
+  if (logo.emoji) {
+    return (
+      <View style={[
+        agentSphereStyles.frame,
+        agentSphereStyles.emojiFrame,
+        { borderRadius, height: dimension, width: dimension },
+      ]}>
+        <Text style={[agentSphereStyles.emoji, { fontSize: dimension * 0.48, lineHeight: dimension * 0.62 }]}>
+          {logo.emoji}
+        </Text>
+      </View>
+    );
+  }
+
+  if (logo.url) {
+    return (
+      <View style={[
+        agentSphereStyles.frame,
+        { borderRadius, height: dimension, width: dimension },
+      ]}>
+        <Image resizeMode="cover" source={{ uri: logo.url }} style={agentSphereStyles.image} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[
+      agentSphereStyles.frame,
+      agentSphereStyles.builtInFrame,
+      { borderRadius, height: dimension, width: dimension },
+    ]}>
+      <SphereAvatar avatarIndex={agent?.avatarIndex} size={dimension} />
+    </View>
+  );
+}
+
+function SphereAvatar({ avatarIndex, size }: { avatarIndex?: number | null; size: number }) {
+  const palette = getSpherePalette(avatarIndex);
+  const rawId = React.useId();
+  const id = rawId.replace(/[^a-zA-Z0-9_-]/g, '');
+  const clipId = `agentSphereClip${id}`;
+  const glowId = `agentSphereGlow${id}`;
+  const sheenId = `agentSphereSheen${id}`;
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 48 48">
+      <Defs>
+        <ClipPath id={clipId}>
+          <Circle cx="24" cy="24" r="19" />
+        </ClipPath>
+        <RadialGradient id={glowId} cx="38%" cy="30%" r="72%">
+          <Stop offset="0%" stopColor={palette[4]} stopOpacity="0.95" />
+          <Stop offset="36%" stopColor={palette[2]} stopOpacity="0.92" />
+          <Stop offset="72%" stopColor={palette[1]} stopOpacity="0.92" />
+          <Stop offset="100%" stopColor={palette[0]} stopOpacity="1" />
+        </RadialGradient>
+        <LinearGradient id={sheenId} x1="7" y1="3" x2="44" y2="47">
+          <Stop offset="0%" stopColor="#FFFFFF" stopOpacity="0" />
+          <Stop offset="42%" stopColor="#FFFFFF" stopOpacity="0.08" />
+          <Stop offset="100%" stopColor="#FFFFFF" stopOpacity="0.24" />
+        </LinearGradient>
+      </Defs>
+      <G clipPath={`url(#${clipId})`}>
+        <Rect width="48" height="48" fill={`url(#${glowId})`} />
+        <Ellipse cx="12" cy="18" rx="17" ry="8" fill={palette[1]} opacity="0.95" transform="rotate(-26 12 18)" />
+        <Ellipse cx="31" cy="13" rx="18" ry="7" fill={palette[2]} opacity="0.94" transform="rotate(25 31 13)" />
+        <Ellipse cx="34" cy="31" rx="18" ry="10" fill={palette[3]} opacity="0.68" transform="rotate(-18 34 31)" />
+        <Ellipse cx="16" cy="37" rx="18" ry="5" fill={palette[4]} opacity="0.72" transform="rotate(-5 16 37)" />
+        <Path d="M6 30 C15 16 27 18 41 27 C36 40 14 44 6 30Z" fill="#FFFFFF" opacity="0.16" />
+        <Rect x="-5" y="-2" width="58" height="54" fill={`url(#${sheenId})`} />
+      </G>
+    </Svg>
+  );
+}
+
+function getAgentLogo(agent?: SuperagentAgent) {
+  const logoUrl = agent?.logoUrl?.trim();
+  if (logoUrl?.startsWith('emoji:')) {
+    return { emoji: logoUrl.replace('emoji:', ''), url: null };
+  }
+
+  return {
+    emoji: agent?.emoji?.trim() || null,
+    url: logoUrl || null,
+  };
+}
+
+function getSpherePalette(avatarIndex?: number | null) {
+  const index = ((avatarIndex ?? 0) % SPHERE_PALETTES.length + SPHERE_PALETTES.length) % SPHERE_PALETTES.length;
+  return SPHERE_PALETTES[index];
+}

package/src/AttachmentPickerStatusModal.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {ActivityIndicator, Modal, Pressable, StyleSheet, Text, View} from 'react-native';
+
+export function AttachmentPickerStatusModal({
+  isError,
+  message,
+  onClose,
+  title,
+}: {
+  isError?: boolean;
+  message: string;
+  onClose?: () => void;
+  title: string;
+}) {
+  return (
+    <Modal animationType="fade" transparent visible onRequestClose={onClose}>
+      <View style={styles.backdrop}>
+        <View style={styles.sheet}>
+          {isError ? null : <ActivityIndicator color="#F4F4F5" style={styles.loader} />}
+          <Text style={styles.title}>{title}</Text>
+          <Text style={[styles.message, isError ? styles.error : undefined]}>{message}</Text>
+          {isError ? (
+            <Pressable accessibilityRole="button" onPress={onClose} style={styles.closeButton}>
+              <Text style={styles.closeText}>Close</Text>
+            </Pressable>
+          ) : null}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.62)',
+    flex: 1,
+    justifyContent: 'flex-end',
+    padding: 16,
+  },
+  closeButton: {
+    alignItems: 'center',
+    borderRadius: 16,
+    height: 48,
+    justifyContent: 'center',
+    marginTop: 10,
+  },
+  closeText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  error: {
+    color: '#FF6B6B',
+  },
+  loader: {
+    marginBottom: 10,
+  },
+  message: {
+    color: '#A1A1AA',
+    fontSize: 13,
+    lineHeight: 18,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  sheet: {
+    backgroundColor: '#050505',
+    borderColor: '#2A2A2D',
+    borderRadius: 28,
+    borderWidth: 1,
+    padding: 16,
+    width: '100%',
+  },
+  title: {
+    color: '#FFFFFF',
+    fontSize: 20,
+    fontWeight: '800',
+    textAlign: 'center',
+  },
+});

package/src/AttachmentPreviewStrip.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+
+import { composerStyles } from './composerStyles';
+import { getAttachmentName, isImageAttachment } from './mediaUtils';
+import type { SuperagentMediaAttachment } from './types';
+
+export function AttachmentPreviewStrip({
+  attachments,
+  onRemove,
+}: {
+  attachments: SuperagentMediaAttachment[];
+  onRemove: (index: number) => void;
+}) {
+  if (attachments.length === 0) return null;
+
+  return (
+    <View style={composerStyles.attachmentStrip}>
+      {attachments.map((attachment, index) => (
+        <View key={attachment.id ?? `${attachment.url}-${index}`} style={composerStyles.attachmentItem}>
+          {isImageAttachment(attachment) ? (
+            <Image source={{ uri: attachment.previewUri ?? attachment.url }} style={composerStyles.attachmentImage} />
+          ) : (
+            <View style={composerStyles.attachmentFile}>
+              <Text style={composerStyles.attachmentFileIcon}>File</Text>
+              <Text numberOfLines={1} style={composerStyles.attachmentName}>
+                {getAttachmentName(attachment)}
+              </Text>
+            </View>
+          )}
+          <Pressable accessibilityRole="button" onPress={() => onRemove(index)} style={composerStyles.removeAttachment}>
+            <Text style={composerStyles.removeAttachmentText}>x</Text>
+          </Pressable>
+        </View>
+      ))}
+    </View>
+  );
+}