@onairos/react-native 3.1.11 → 3.1.13

package/src/components/PersonaImage.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  Image,
+  Animated,
+  StyleSheet,
+} from 'react-native';
+
+interface PersonaImageProps {
+  level: number; // 1-5 based on connected platforms
+  style?: any;
+}
+
+const PersonaImage: React.FC<PersonaImageProps> = ({
+  level,
+  style,
+}) => {
+  const fadeAnims = useRef([
+    new Animated.Value(1), // persona1
+    new Animated.Value(0), // persona2  
+    new Animated.Value(0), // persona3
+    new Animated.Value(0), // persona4
+    new Animated.Value(0), // persona5
+  ]).current;
+
+  const personaImages = [
+    require('../assets/images/persona1.png'),
+    require('../assets/images/persona2.png'), 
+    require('../assets/images/persona3.png'),
+    require('../assets/images/persona4.png'),
+    require('../assets/images/persona5.png'),
+  ];
+
+  useEffect(() => {
+    // Animate to show the correct persona level
+    fadeAnims.forEach((anim, index) => {
+      Animated.timing(anim, {
+        toValue: index === level - 1 ? 1 : 0,
+        duration: 400,
+        useNativeDriver: true,
+      }).start();
+    });
+  }, [level, fadeAnims]);
+
+  return (
+    <View style={[styles.container, style]}>
+      {personaImages.map((image, index) => (
+        <Animated.Image
+          key={index}
+          source={image}
+          style={[
+            styles.personaImage,
+            {
+              opacity: fadeAnims[index],
+              position: index === 0 ? 'relative' : 'absolute',
+            },
+          ]}
+          resizeMode="contain"
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 200,
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  
+  personaImage: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default PersonaImage;

package/src/components/PersonaLoadingScreen.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  Easing,
+} from 'react-native';
+import { COLORS, SPACING } from '../theme';
+import PrimaryButton from './PrimaryButton';
+
+interface PersonaLoadingScreenProps {
+  visible: boolean;
+  onComplete: () => void;
+  progress: number; // 0-100
+  status: string;
+}
+
+const PersonaLoadingScreen: React.FC<PersonaLoadingScreenProps> = ({
+  visible,
+  onComplete,
+  progress,
+  status,
+}) => {
+  const [dotsAnimation] = useState(new Animated.Value(0));
+  const [showCompleteButton, setShowCompleteButton] = useState(false);
+
+  // Animate dots
+  useEffect(() => {
+    if (visible && progress < 100) {
+      const animation = Animated.loop(
+        Animated.timing(dotsAnimation, {
+          toValue: 1,
+          duration: 1500,
+          easing: Easing.linear,
+          useNativeDriver: false,
+        })
+      );
+      animation.start();
+      
+      return () => animation.stop();
+    }
+  }, [visible, progress, dotsAnimation]);
+
+  // Show complete button when progress reaches 100
+  useEffect(() => {
+    if (progress >= 100) {
+      setShowCompleteButton(true);
+    }
+  }, [progress]);
+
+  const getDots = () => {
+    // const animatedValue = dotsAnimation._value; // _value is deprecated
+    const animatedValue = Math.random(); // Use random for animation effect
+    if (animatedValue < 0.33) return '.';
+    if (animatedValue < 0.66) return '..';
+    return '...';
+  };
+
+  const getStatusMessage = (progress: number) => {
+    if (progress === 0) return 'Initializing';
+    if (progress < 25) return 'Connecting to your data';
+    if (progress < 50) return 'Training your persona';
+    if (progress < 75) return 'Running test inference';
+    if (progress < 100) return 'Finalizing your profile';
+    return 'Complete!';
+  };
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        {/* Header */}
+        <View style={styles.header}>
+          <Text style={styles.title}>Building your persona</Text>
+          <Text style={styles.subtitle}>
+            {progress < 100 
+              ? 'This will only take a moment. We\'re personalizing your experience.'
+              : 'Your persona is ready!'
+            }
+          </Text>
+        </View>
+
+        {/* Progress Bar */}
+        <View style={styles.progressContainer}>
+          <View style={styles.progressBar}>
+            <View 
+              style={[
+                styles.progressFill, 
+                { width: `${progress}%` }
+              ]} 
+            />
+          </View>
+          <Text style={styles.progressText}>{Math.round(progress)}%</Text>
+          {!showCompleteButton && (
+            <Text style={styles.statusText}>
+              {status || getStatusMessage(progress)}
+              {progress < 100 && (
+                <Animated.Text>
+                  {getDots()}
+                </Animated.Text>
+              )}
+            </Text>
+          )}
+        </View>
+
+        {/* Complete Button */}
+        {showCompleteButton && (
+          <View style={styles.completeContainer}>
+            <PrimaryButton
+              label="Continue"
+              onPress={onComplete}
+            />
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.surface,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+  
+  content: {
+    alignItems: 'center',
+  },
+  
+  header: {
+    alignItems: 'center',
+    marginBottom: 48,
+  },
+  
+  title: {
+    fontSize: 24,
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700',
+    color: COLORS.grey800,
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  
+  subtitle: {
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  
+  progressContainer: {
+    width: '100%',
+    alignItems: 'center',
+    marginBottom: 48,
+  },
+  
+  progressBar: {
+    width: '100%',
+    height: 8,
+    backgroundColor: '#F5F5F5',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 16,
+  },
+  
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#1BA9D4',
+    borderRadius: 4,
+  },
+  
+  progressText: {
+    fontSize: 18,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    color: COLORS.grey800,
+    marginBottom: 8,
+  },
+  
+  statusText: {
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    textAlign: 'center',
+  },
+  
+  completeContainer: {
+    width: '100%',
+  },
+});
+
+export default PersonaLoadingScreen;

package/src/components/PersonalizationConsentScreen.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import { COLORS, SPACING } from '../theme';
+import { triggerHaptic, HapticType } from '../utils/haptics';
+import {
+  EnochE,
+  Basicproficon,
+  Basicprofile,
+  Contenticon,
+  Contentanalysis,
+  Personalityicon,
+  Personalityprofile,
+  Personalitytraits,
+  Userpreferences,
+  Checkbox,
+  Checkmark,
+} from './icons';
+
+interface PersonalizationConsentScreenProps {
+  visible: boolean;
+  onAccept: () => void;
+  onDecline: () => void;
+}
+
+const PersonalizationConsentScreen: React.FC<PersonalizationConsentScreenProps> = ({
+  visible,
+  onAccept,
+  onDecline,
+}) => {
+  const [selectedOptions, setSelectedOptions] = useState({
+    basicProfile: false,
+    contentAnalysis: false,
+    personalityProfile: false,
+  });
+
+  const handleOptionToggle = (option: 'basicProfile' | 'contentAnalysis' | 'personalityProfile') => {
+    triggerHaptic(HapticType.BUTTON_PRESS);
+    setSelectedOptions(prev => ({
+      ...prev,
+      [option]: !prev[option]
+    }));
+  };
+
+  // Check if at least one option is selected
+  const hasSelectedOptions = Object.values(selectedOptions).some(value => value);
+
+  if (!visible) return null;
+
+  return (
+    <View style={styles.container}>
+      {/* Header Icons */}
+      <View style={styles.headerContainer}>
+        <View style={styles.iconContainer}>
+          <Image 
+            source={require('../assets/images/Onairoslogo.png')} 
+            style={styles.headerIcon}
+            resizeMode="contain"
+          />
+        </View>
+        <Text style={styles.arrow}>→</Text>
+        <Image 
+          source={require('../assets/images/Enochicon1.png')} 
+          style={styles.enochAppIcon}
+          resizeMode="contain"
+        />
+      </View>
+
+      {/* Title and Subtitle */}
+      <View style={styles.titleContainer}>
+        <Text style={styles.title}>Enoch wants to personalize your experience</Text>
+        <Text style={styles.subtitle}>Choose what to share:</Text>
+      </View>
+
+      {/* Options */}
+      <View style={styles.optionsContainer}>
+        {/* Basic Profile */}
+        <TouchableOpacity 
+          style={styles.optionRow}
+          onPress={() => handleOptionToggle('basicProfile')}
+        >
+          <View style={styles.optionLeft}>
+            <Basicproficon 
+              width={32} 
+              height={32} 
+              fill={COLORS.grey700}
+              style={styles.optionIcon}
+            />
+            <Basicprofile 
+              height={24} 
+              fill={COLORS.grey800}
+              style={styles.optionText}
+            />
+          </View>
+          <View style={styles.checkboxContainer}>
+            {selectedOptions.basicProfile ? (
+              <Checkmark 
+                width={24} 
+                height={24} 
+                fill="#4CD964"
+                style={styles.checkbox}
+              />
+            ) : (
+              <Checkbox 
+                width={24} 
+                height={24} 
+                stroke={COLORS.grey400}
+                style={styles.checkbox}
+              />
+            )}
+          </View>
+        </TouchableOpacity>
+
+        {/* Content Analysis */}
+        <TouchableOpacity 
+          style={styles.optionRow}
+          onPress={() => handleOptionToggle('contentAnalysis')}
+        >
+          <View style={styles.optionLeft}>
+            <Contenticon 
+              width={32} 
+              height={32} 
+              fill={COLORS.grey700}
+              style={styles.optionIcon}
+            />
+            <Userpreferences 
+              height={24} 
+              fill={COLORS.grey800}
+              style={styles.optionText}
+            />
+          </View>
+          <View style={styles.checkboxContainer}>
+            {selectedOptions.contentAnalysis ? (
+              <Checkmark 
+                width={24} 
+                height={24} 
+                fill="#4CD964"
+                style={styles.checkbox}
+              />
+            ) : (
+              <Checkbox 
+                width={24} 
+                height={24} 
+                stroke={COLORS.grey400}
+                style={styles.checkbox}
+              />
+            )}
+          </View>
+        </TouchableOpacity>
+
+        {/* Personality Profile */}
+        <TouchableOpacity 
+          style={styles.optionRow}
+          onPress={() => handleOptionToggle('personalityProfile')}
+        >
+          <View style={styles.optionLeft}>
+            <Personalityicon 
+              width={32} 
+              height={32} 
+              fill={COLORS.grey700}
+              style={styles.optionIcon}
+            />
+            <Personalitytraits 
+              height={24} 
+              fill={COLORS.grey800}
+              style={styles.optionText}
+            />
+          </View>
+          <View style={styles.checkboxContainer}>
+            {selectedOptions.personalityProfile ? (
+              <Checkmark 
+                width={24} 
+                height={24} 
+                fill="#4CD964"
+                style={styles.checkbox}
+              />
+            ) : (
+              <Checkbox 
+                width={24} 
+                height={24} 
+                stroke={COLORS.grey400}
+                style={styles.checkbox}
+              />
+            )}
+          </View>
+        </TouchableOpacity>
+      </View>
+
+      {/* Buttons */}
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity 
+          style={[
+            styles.acceptButton, 
+            hasSelectedOptions && styles.acceptButtonActive
+          ]} 
+          onPress={() => {
+            triggerHaptic(HapticType.BUTTON_PRESS);
+            onAccept();
+          }}
+        >
+          <Text style={[
+            styles.acceptButtonText,
+            hasSelectedOptions && styles.acceptButtonTextActive
+          ]}>Accept & Continue</Text>
+          <Text style={[
+            styles.buttonArrow,
+            hasSelectedOptions && styles.buttonArrowActive
+          ]}>→</Text>
+        </TouchableOpacity>
+        
+        <TouchableOpacity 
+          style={styles.declineButton} 
+          onPress={() => {
+            triggerHaptic(HapticType.BUTTON_PRESS);
+            onDecline();
+          }}
+        >
+          <Text style={styles.declineButtonText}>Decline</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.surface,
+    paddingHorizontal: 4,
+    paddingTop: 5,
+    paddingBottom: 10,
+  },
+
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 32,
+  },
+
+  iconContainer: {
+    width: 72,
+    height: 72,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+
+  headerIcon: {
+    width: 48,
+    height: 48,
+  },
+
+  enochAppIcon: {
+    width: 80,
+    height: 80,
+    marginHorizontal: 10,
+  },
+
+  enochLetter: {
+    fontSize: 28,
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700',
+    color: COLORS.grey800,
+  },
+
+  arrow: {
+    fontSize: 24,
+    color: COLORS.grey600,
+    marginHorizontal: 16,
+  },
+
+  titleContainer: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+
+  title: {
+    fontSize: 20,
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '600',
+    color: COLORS.grey800,
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+
+  subtitle: {
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    textAlign: 'center',
+  },
+
+  optionsContainer: {
+    flex: 1,
+    marginBottom: 40,
+  },
+
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 2,
+    backgroundColor: '#F8F9FA',
+    borderRadius: 12,
+    marginBottom: 8,
+    marginHorizontal: 0,
+  },
+
+  optionLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+
+  optionIcon: {
+    marginRight: 12,
+    marginLeft: 2,
+    marginTop: -4,
+  },
+
+  optionText: {
+    flex: 1,
+    marginLeft: 2,
+  },
+
+  checkboxContainer: {
+    paddingLeft: 4,
+    paddingRight: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  checkbox: {
+    // SVG components handle their own sizing
+  },
+
+  buttonContainer: {
+    gap: 16,
+    paddingHorizontal: 0,
+  },
+
+  acceptButton: {
+    backgroundColor: '#E5E5E5',
+    borderRadius: 25,
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  acceptButtonActive: {
+    backgroundColor: '#2D3436',
+  },
+
+  acceptButtonText: {
+    color: '#999999',
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    marginRight: 8,
+  },
+
+  acceptButtonTextActive: {
+    color: '#FFFFFF',
+  },
+
+  buttonArrow: {
+    color: '#999999',
+    fontSize: 16,
+  },
+
+  buttonArrowActive: {
+    color: '#FFFFFF',
+  },
+
+  declineButton: {
+    backgroundColor: '#E5E5E5',
+    borderRadius: 25,
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  declineButtonText: {
+    color: COLORS.grey600,
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '500',
+  },
+});
+
+export { PersonalizationConsentScreen };
+export default PersonalizationConsentScreen;