AgentSelector Component

AgentSelector is a React Native component that displays a sleek, animated carousel for selecting different AI agents. It features a dark, futuristic theme with gradient cards and smooth animations.

Features

• Animated Carousel: A horizontal ScrollView with a snapping effect to center each agent card.
• Dynamic Animations: Cards scale and fade in/out as you scroll, creating a cover-flow-like effect.
• Gradient Designs: Uses expo-linear-gradient for beautiful card and screen backgrounds.
• State-Driven UI: The agent's name, description, and color theme change based on the selected card.
• Safe Area Support: Properly adjusts its layout for device notches and system bars using react-native-safe-area-context.

Dependencies

• react
• react-native
• @expo/vector-icons (for icons)
• expo-linear-gradient (for gradient backgrounds)
• react-native-safe-area-context (for safe area insets)

How to Use

1. Component Props

Prop	Type	Description
onAgentSelect	(agentId) => void	Optional: A function that is called when a new agent is selected.
onConfirm	() => void	Optional: A function that is called when the "Select Agent" button is pressed.

2. Example Implementation

Save the component code as AgentSelector.tsx and import it into your app.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { AgentSelector } from './AgentSelector'; // Adjust the import path

export default function App() {
  const handleSelect = (agentId) => {
    console.log('Selected Agent ID:', agentId);
  };

  const handleConfirm = () => {
    console.log('Selection Confirmed!');
  };

  return (
    <SafeAreaProvider>
      <View style={styles.container}>
        <AgentSelector onAgentSelect={handleSelect} onConfirm={handleConfirm} />
      </View>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Customization

To change the agents, simply modify the agentVariants array. Each object in the array defines the properties for one card in the carousel.

The AgentVariant data structure is as follows:

interface AgentVariant {
    id: string;
    name: string;
    tagline: string;
    colors: string[]; // For the card's gradient background
    textColor: string;
    description: string;
}