@onairos/react-native 3.1.16 → 3.1.18

package/src/components/PersonaImage.tsx

@@ -1,79 +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;
+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

@@ -1,201 +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;
+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;