vibefast-cli 0.1.1

package/recipes/voice-bot/apps/native/src/features/voice-bot/README.md

@@ -0,0 +1,185 @@
+# Voice Bot Feature
+
+A real-time voice conversation feature powered by ElevenLabs Conversational AI SDK.
+
+## Features
+
+- **Real-time Voice Conversations**: Have natural voice conversations with AI
+- **Text Messaging**: Send text messages and contextual updates during conversations
+- **Feedback System**: Provide feedback on AI responses with like/dislike buttons
+- **Connection Status**: Visual indicators for connection status and speaking state
+- **Auto-Cleanup**: Automatically ends conversations when user leaves the screen to prevent resource waste
+- **VibeFast Integration**: Fully integrated with VibeFast theming and component system
+
+## Setup
+
+### 1. ElevenLabs Account Setup
+
+1. Go to [ElevenLabs](https://elevenlabs.io/)
+2. Create an account or sign in
+3. Navigate to **Conversational AI** section
+4. Create a new agent
+5. Copy the agent ID from your agent settings
+
+### 2. Environment Configuration
+
+Add your ElevenLabs agent ID to your environment file:
+
+```bash
+# .env.local
+ELEVENLABS_AGENT_ID=your_agent_id_here
+```
+
+### 3. Required Dependencies
+
+The following dependencies are automatically installed:
+
+- `@elevenlabs/react-native` - ElevenLabs React Native SDK
+- `@livekit/react-native-expo-plugin` - WebRTC support for Expo
+- `@config-plugins/react-native-webrtc` - WebRTC configuration plugin
+
+### 4. Permissions
+
+The app.config.ts has been updated with the required permissions:
+
+**iOS:**
+
+- `NSMicrophoneUsageDescription` - For voice input
+
+**Android:**
+
+- `android.permission.RECORD_AUDIO` - For voice input
+- `android.permission.ACCESS_NETWORK_STATE` - For network connectivity
+- `android.permission.INTERNET` - For internet access
+- `android.permission.MODIFY_AUDIO_SETTINGS` - For audio configuration
+- `android.permission.BLUETOOTH` - For Bluetooth audio devices
+
+## Usage
+
+### Basic Implementation
+
+```tsx
+import { VoiceBotScreen } from '@/features/voice-bot';
+
+function MyVoiceBotScreen() {
+  return (
+    <VoiceBotScreen
+      config={{ agentId: 'your-agent-id' }}
+      title="Voice Assistant"
+      subtitle="Start a conversation with your AI assistant"
+    />
+  );
+}
+```
+
+### Custom Hook Usage
+
+```tsx
+import { useVoiceBot } from '@/features/voice-bot';
+
+function CustomVoiceBotComponent() {
+  const { state, actions, textInput, setTextInput } = useVoiceBot(
+    { agentId: 'your-agent-id' },
+    {
+      onConnect: (conversationId) => {
+        console.log('Connected:', conversationId);
+      },
+      onMessage: (message) => {
+        console.log('New message:', message);
+      },
+    },
+  );
+
+  return (
+    <View>
+      <Text>Status: {state.status}</Text>
+      <Button
+        label="Start Conversation"
+        onPress={actions.startConversation}
+        disabled={state.status !== 'disconnected'}
+      />
+    </View>
+  );
+}
+```
+
+## Components
+
+### VoiceBotScreen
+
+Main screen component that provides a complete voice bot interface.
+
+**Props:**
+
+- `config: VoiceBotConfig` - Configuration object with agent ID
+- `title?: string` - Screen title (optional)
+- `subtitle?: string` - Screen subtitle (optional)
+
+### ConversationStatusIndicator
+
+Displays the current connection status and conversation information.
+
+### VoiceControls
+
+Provides start/stop conversation buttons and feedback controls.
+
+### MessageInput
+
+Text input component for sending messages and contextual updates.
+
+## Development Build Required
+
+**Important**: This feature requires a development build and cannot run in Expo Go due to WebRTC native dependencies.
+
+### Building for Development
+
+```bash
+# Prebuild (required for native dependencies)
+pnpx expo prebuild
+
+# iOS
+pnpm ios -d
+
+# Android
+pnpm android -d
+```
+
+### Simulator Audio Settings
+
+When running on simulators, adjust audio settings:
+
+**iOS Simulator:**
+
+- In I/O menu, set correct audio input/output devices
+- Increase volume (defaults to 0)
+
+**Android Emulator:**
+
+- In Extended Controls, enable "Virtual microphone uses host audio input"
+
+## Architecture
+
+The voice bot feature follows VibeFast architecture patterns:
+
+- **Services**: `useVoiceBot` hook for state management and API interactions
+- **Components**: Modular UI components following VibeFast design system
+- **Types**: TypeScript interfaces for type safety
+- **Environment**: Secure configuration through environment variables
+- **Lifecycle Management**: Automatic cleanup on component unmount and screen navigation
+
+## Security Considerations
+
+- Agent ID is configured through environment variables
+- For production apps, consider generating short-lived signed URLs server-side
+- See [ElevenLabs Authentication Docs](https://elevenlabs.io/docs/conversational-ai/customization/authentication) for advanced security
+
+## Troubleshooting
+
+1. **Build Errors**: Ensure you're using development builds, not Expo Go
+2. **Audio Issues**: Check simulator audio settings and permissions
+3. **Connection Issues**: Verify agent ID and network connectivity
+4. **WebRTC Errors**: Ensure all native dependencies are properly installed
+
+## API Reference
+
+See the [ElevenLabs React Native SDK Documentation](https://elevenlabs.io/docs/conversational-ai/libraries/react-native) for detailed API reference.

package/recipes/voice-bot/apps/native/src/features/voice-bot/components/conversation-status.tsx

@@ -0,0 +1,76 @@
+import type { ConversationStatus } from '@elevenlabs/react-native';
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+interface ConversationStatusIndicatorProps {
+  status: ConversationStatus;
+  conversationId?: string | null;
+  isSpeaking?: boolean;
+}
+
+export function ConversationStatusIndicator({
+  status,
+  conversationId,
+  isSpeaking,
+}: ConversationStatusIndicatorProps) {
+  const getStatusColor = (status: ConversationStatus): string => {
+    switch (status) {
+      case 'connected':
+        return 'bg-success-500';
+      case 'connecting':
+        return 'bg-warning-500';
+      case 'disconnected':
+        return 'bg-neutral-400';
+      default:
+        return 'bg-neutral-400';
+    }
+  };
+
+  const getStatusText = (status: ConversationStatus): string => {
+    return status.charAt(0).toUpperCase() + status.slice(1);
+  };
+
+  return (
+    <View className="items-center gap-4">
+      {/* Status Indicator */}
+      <View className="flex-row items-center gap-2">
+        <View className={`size-3 rounded-full ${getStatusColor(status)}`} />
+        <Text className="text-base font-medium text-foreground">
+          {getStatusText(status)}
+        </Text>
+      </View>
+
+      {/* Conversation ID Display */}
+      {status === 'connected' && conversationId && (
+        <View className="w-full rounded-lg border border-border bg-muted p-3">
+          <Text className="text-mutedForeground mb-1 text-xs font-semibold">
+            Conversation ID:
+          </Text>
+          <Text className="rounded border border-border bg-background p-2 font-mono text-sm text-foreground">
+            {conversationId}
+          </Text>
+        </View>
+      )}
+
+      {/* Speaking Indicator */}
+      {status === 'connected' && (
+        <View className="flex-row items-center gap-2">
+          <View
+            className={`size-3 rounded-full ${
+              isSpeaking ? 'bg-success' : 'bg-muted'
+            }`}
+          />
+          <Text
+            className={`text-sm font-medium ${
+              isSpeaking ? 'text-success' : 'text-mutedForeground'
+            }`}
+          >
+            {isSpeaking ? '🎤 AI Speaking' : '👂 AI Listening'}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/recipes/voice-bot/apps/native/src/features/voice-bot/components/index.ts

@@ -0,0 +1,4 @@
+export * from './conversation-status';
+export * from './message-input';
+export * from './voice-bot-screen';
+export * from './voice-controls';

package/recipes/voice-bot/apps/native/src/features/voice-bot/components/message-input.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Keyboard, View } from 'react-native';
+
+import { Button, Input, Text } from '@/components/ui';
+
+interface MessageInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  onSendMessage: () => void;
+  onSendContext: () => void;
+  onUserActivity: () => void;
+  isConnected: boolean;
+}
+
+export function MessageInput({
+  value,
+  onChangeText,
+  onSendMessage,
+  onSendContext,
+  onUserActivity,
+  isConnected,
+}: MessageInputProps) {
+  const handleTextChange = (text: string) => {
+    onChangeText(text);
+    // Prevent agent from interrupting while user is typing
+    if (text.length > 0) {
+      onUserActivity();
+    }
+  };
+
+  const handleSendMessage = () => {
+    if (value.trim()) {
+      onSendMessage();
+      Keyboard.dismiss();
+    }
+  };
+
+  const handleSendContext = () => {
+    if (value.trim()) {
+      onSendContext();
+      Keyboard.dismiss();
+    }
+  };
+
+  const handleSubmitEditing = () => {
+    handleSendMessage();
+  };
+
+  if (!isConnected) {
+    return (
+      <View className="rounded-2xl border border-border/50 bg-card/90 p-6 opacity-50 shadow-lg backdrop-blur-md">
+        <Text className="text-mutedForeground text-center">
+          Connect to start sending messages
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View className="rounded-2xl border border-border/50 bg-card/90 p-6 shadow-lg backdrop-blur-md">
+      <View className="w-full gap-4">
+        <Text className="text-base font-medium text-foreground">
+          Send Text Message
+        </Text>
+
+        <Input
+          value={value}
+          onChangeText={handleTextChange}
+          placeholder="Type your message or context..."
+          multiline
+          numberOfLines={4}
+          textAlignVertical="top"
+          onSubmitEditing={handleSubmitEditing}
+          returnKeyType="send"
+          blurOnSubmit={true}
+          testID="message-input"
+        />
+
+        <View className="gap-3">
+          <Button
+            label="💬 Send Message"
+            onPress={handleSendMessage}
+            disabled={!value.trim()}
+            variant="default"
+            testID="send-message-button"
+          />
+          <Button
+            label="📝 Send Context"
+            onPress={handleSendContext}
+            disabled={!value.trim()}
+            variant="secondary"
+            testID="send-context-button"
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

package/recipes/voice-bot/apps/native/src/features/voice-bot/components/voice-bot-screen.tsx

@@ -0,0 +1,173 @@
+import { ElevenLabsProvider } from '@elevenlabs/react-native';
+import { BlurView } from 'expo-blur';
+import React from 'react';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useScrollOffset,
+} from 'react-native-reanimated';
+import type { AnimatedScrollView } from 'react-native-reanimated/lib/typescript/component/ScrollView';
+
+import { Text } from '@/components/ui';
+
+import { useVoiceBot } from '../services';
+import type { VoiceBotConfig } from '../types';
+import { ConversationStatusIndicator } from './conversation-status';
+import { MessageInput } from './message-input';
+import { VoiceControls } from './voice-controls';
+
+interface VoiceBotScreenProps {
+  config: VoiceBotConfig;
+  title?: string;
+  subtitle?: string;
+}
+
+function VoiceBotContent({ config, title, subtitle }: VoiceBotScreenProps) {
+  const { state, actions, textInput, setTextInput } = useVoiceBot(config, {
+    onConnect: (conversationId) => {
+      console.log('Voice bot connected:', conversationId);
+    },
+    onDisconnect: (details) => {
+      console.log('Voice bot disconnected:', details);
+    },
+    onError: (message, context) => {
+      console.error('Voice bot error:', message, context);
+    },
+    onMessage: (message) => {
+      console.log('Voice bot message:', message);
+    },
+  });
+
+  // Animated scroll effects (for blur intensity only)
+  const ref = useAnimatedRef<AnimatedScrollView>();
+  const scroll = useScrollOffset(ref);
+
+  const blurStyle = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(scroll.value, [0, 200], [0, 1], 'clamp'),
+    };
+  });
+
+  const handleSendMessage = () => {
+    actions.sendMessage(textInput);
+    setTextInput('');
+  };
+
+  const handleSendContext = () => {
+    actions.sendContextualUpdate(textInput);
+    setTextInput('');
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Blur Overlay */}
+      <Animated.View
+        style={[StyleSheet.absoluteFill, { zIndex: -1 }, blurStyle]}
+      >
+        <BlurView
+          style={{ flex: 1 }}
+          tint="systemUltraThinMaterial"
+          intensity={80}
+        />
+      </Animated.View>
+
+      <Animated.ScrollView
+        ref={ref}
+        showsVerticalScrollIndicator={false}
+        automaticallyAdjustsScrollIndicatorInsets={true}
+        contentInsetAdjustmentBehavior="never"
+        style={{ backgroundColor: 'transparent' }}
+      >
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={{ backgroundColor: 'transparent' }}
+        >
+          <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+            <View style={{ backgroundColor: 'transparent' }}>
+              {/* Spacer so the header area feels roomy */}
+              <View
+                style={{
+                  alignItems: 'center',
+                  gap: 8,
+                  padding: 16,
+                  flex: 1,
+                  minHeight: 200,
+                  backgroundColor: 'transparent',
+                }}
+              />
+
+              {/* Voice Bot Content */}
+              <View style={{ paddingHorizontal: 24, gap: 24 }}>
+                {/* Header */}
+                <View className="items-center gap-4 rounded-3xl border border-border/50 bg-card/50 p-6 shadow-lg backdrop-blur-md">
+                  <View className="mb-2 rounded-full bg-primary/20 p-4">
+                    <Text className="text-4xl">🗣️</Text>
+                  </View>
+                  <Text className="text-center text-3xl font-bold text-foreground">
+                    {title || 'Voice Assistant'}
+                  </Text>
+                  {subtitle && (
+                    <Text className="text-mutedForeground text-center text-lg leading-6">
+                      {subtitle}
+                    </Text>
+                  )}
+                </View>
+
+                {/* Status Indicator */}
+                <View className="rounded-2xl border border-border/50 bg-card/90 p-6 shadow-lg backdrop-blur-md">
+                  <ConversationStatusIndicator
+                    status={state.status}
+                    conversationId={state.conversationId}
+                    isSpeaking={state.isSpeaking}
+                  />
+                </View>
+
+                {/* Voice Controls */}
+                <View className="rounded-2xl border border-border/50 bg-card/90 p-6 shadow-lg backdrop-blur-md">
+                  <VoiceControls
+                    status={state.status}
+                    isStarting={state.isStarting}
+                    canSendFeedback={state.canSendFeedback}
+                    onStartConversation={actions.startConversation}
+                    onEndConversation={actions.endConversation}
+                    onSendFeedback={actions.sendFeedback}
+                  />
+                </View>
+
+                {/* Message Input */}
+                <MessageInput
+                  value={textInput}
+                  onChangeText={setTextInput}
+                  onSendMessage={handleSendMessage}
+                  onSendContext={handleSendContext}
+                  onUserActivity={actions.sendUserActivity}
+                  isConnected={state.status === 'connected'}
+                />
+
+                {/* Bottom spacing */}
+                <View style={{ height: 80 }} />
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      </Animated.ScrollView>
+    </View>
+  );
+}
+
+export function VoiceBotScreen(props: VoiceBotScreenProps) {
+  return (
+    <ElevenLabsProvider>
+      <VoiceBotContent {...props} />
+    </ElevenLabsProvider>
+  );
+}

package/recipes/voice-bot/apps/native/src/features/voice-bot/components/voice-controls.tsx

@@ -0,0 +1,73 @@
+import type { ConversationStatus } from '@elevenlabs/react-native';
+import React from 'react';
+import { View } from 'react-native';
+
+import { Button, Text } from '@/components/ui';
+
+interface VoiceControlsProps {
+  status: ConversationStatus;
+  isStarting: boolean;
+  canSendFeedback: boolean;
+  onStartConversation: () => void;
+  onEndConversation: () => void;
+  onSendFeedback: (isPositive: boolean) => void;
+}
+
+export function VoiceControls({
+  status,
+  isStarting,
+  canSendFeedback,
+  onStartConversation,
+  onEndConversation,
+  onSendFeedback,
+}: VoiceControlsProps) {
+  const canStart = status === 'disconnected' && !isStarting;
+  const canEnd = status === 'connected';
+
+  return (
+    <View className="w-full gap-2">
+      {/* Main Controls - Vertical stack for long button text */}
+      <View className="gap-2">
+        <Button
+          label={isStarting ? 'Starting...' : 'Start Conversation'}
+          onPress={onStartConversation}
+          disabled={!canStart}
+          variant={canStart ? 'default' : 'outline'}
+          testID="start-conversation-button"
+        />
+        <Button
+          label="End Conversation"
+          onPress={onEndConversation}
+          disabled={!canEnd}
+          variant={canEnd ? 'destructive' : 'outline'}
+          testID="end-conversation-button"
+        />
+      </View>
+
+      {/* Feedback Controls */}
+      {status === 'connected' && canSendFeedback && (
+        <View className="mt-4 items-center gap-3">
+          <Text className="text-base font-medium text-foreground">
+            How was that response?
+          </Text>
+          <View className="flex-row gap-4">
+            <Button
+              label="👍 Like"
+              onPress={() => onSendFeedback(true)}
+              variant="outline"
+              size="sm"
+              testID="feedback-like-button"
+            />
+            <Button
+              label="👎 Dislike"
+              onPress={() => onSendFeedback(false)}
+              variant="outline"
+              size="sm"
+              testID="feedback-dislike-button"
+            />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/recipes/voice-bot/apps/native/src/features/voice-bot/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './services';
+export * from './types';

package/recipes/voice-bot/apps/native/src/features/voice-bot/services/index.ts

@@ -0,0 +1 @@
+export * from './use-voice-bot';