vibefast-cli 0.2.4 → 0.3.0

package/2/apps/native/src/features/tracker-app/components/macro-card.tsx

@@ -0,0 +1,80 @@
+import type React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import AnimatedNumber from './animated-number';
+import CircularProgress from './circular-progress';
+
+interface MacroCardProps {
+  value: number;
+  unit: string;
+  label: string;
+  progress: number;
+  color: string;
+  icon: React.ReactNode;
+  delay?: number;
+}
+
+export default function MacroCard({
+  value,
+  unit,
+  label,
+  progress,
+  color,
+  icon,
+  delay = 0,
+}: MacroCardProps) {
+  const theme = useThemeConfig();
+
+  return (
+    <View
+      className="flex-1 items-start rounded-2xl border p-4"
+      style={{
+        backgroundColor: theme.colors.card,
+        borderColor: theme.colors.border,
+        shadowColor: theme.colors.foreground,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+      }}
+    >
+      <View className="mb-1 flex-row items-baseline">
+        <AnimatedNumber
+          value={value}
+          fontSize={32}
+          fontWeight="700"
+          color={theme.colors.foreground}
+          duration={1200}
+        />
+        <Text
+          className="ml-1 text-xl font-semibold"
+          style={{ color: theme.colors.foreground }}
+        >
+          {unit}
+        </Text>
+      </View>
+      <Text
+        className="mb-4 text-sm"
+        style={{ color: theme.colors.mutedForeground }}
+      >
+        {label}
+      </Text>
+      <View className="self-center">
+        <CircularProgress
+          size={60}
+          strokeWidth={6}
+          progress={progress}
+          color={color}
+          backgroundColor={theme.colors.muted}
+          duration={1800}
+          delay={delay}
+        >
+          <View className="items-center justify-center">{icon}</View>
+        </CircularProgress>
+      </View>
+    </View>
+  );
+}

package/2/apps/native/src/features/tracker-app/components/promo-banner.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function PromoBanner() {
+  const [timeLeft, setTimeLeft] = useState({
+    hours: 71,
+    minutes: 48,
+    seconds: 12,
+  });
+  const theme = useThemeConfig();
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev.seconds > 0) {
+          return { ...prev, seconds: prev.seconds - 1 };
+        }
+        if (prev.minutes > 0) {
+          return { ...prev, minutes: prev.minutes - 1, seconds: 59 };
+        }
+        if (prev.hours > 0) {
+          return { hours: prev.hours - 1, minutes: 59, seconds: 59 };
+        }
+        return prev;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <View
+      className="my-4 flex-row items-center justify-between rounded-2xl border p-5"
+      style={{
+        backgroundColor: theme.colors.muted,
+        borderColor: theme.colors.border,
+        shadowColor: theme.colors.foreground,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+      }}
+    >
+      <View className="flex-1">
+        <View
+          className="mb-2 self-start rounded-2xl border-2 px-3 py-1.5"
+          style={{
+            borderColor: theme.colors.destructive,
+            backgroundColor: theme.colors.card,
+          }}
+        >
+          <Text
+            className="text-sm font-bold"
+            style={{ color: theme.colors.destructive }}
+          >
+            80% off
+          </Text>
+        </View>
+        <Text
+          className="text-lg font-bold leading-5"
+          style={{ color: theme.colors.foreground }}
+        >
+          Your trial ends in
+        </Text>
+        <Text
+          className="text-lg font-bold leading-5"
+          style={{ color: theme.colors.foreground }}
+        >
+          2 days!!
+        </Text>
+      </View>
+      <View className="items-end">
+        <View className="mb-3">
+          <Text
+            className="text-base font-semibold"
+            style={{ color: theme.colors.mutedForeground }}
+          >
+            {timeLeft.hours} : {timeLeft.minutes} : {timeLeft.seconds}
+          </Text>
+        </View>
+        <TouchableOpacity
+          className="rounded-2xl px-5 py-3"
+          style={{ backgroundColor: theme.colors.primary }}
+        >
+          <Text
+            className="text-sm font-semibold"
+            style={{ color: theme.colors.primaryForeground }}
+          >
+            Resubscribe now
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

package/2/apps/native/src/features/tracker-app/components/recently-logged.tsx

@@ -0,0 +1,64 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { Image, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function RecentlyLogged() {
+  const theme = useThemeConfig();
+
+  return (
+    <View className="mt-4">
+      <Text
+        className="mb-4 text-xl font-bold"
+        style={{ color: theme.colors.foreground }}
+      >
+        Recently logged
+      </Text>
+      <View
+        className="flex-row items-center rounded-2xl border p-2 pr-4"
+        style={{
+          backgroundColor: theme.colors.card,
+          borderColor: theme.colors.border,
+          shadowColor: theme.colors.foreground,
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 8,
+          elevation: 4,
+        }}
+      >
+        <Image
+          source={{
+            uri: 'https://images.pexels.com/photos/1435735/pexels-photo-1435735.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&dpr=2',
+          }}
+          style={{ width: 70, height: 70 }}
+          className="mr-3 rounded-xl"
+        />
+        <View className="flex-1">
+          <Text
+            className="mb-1.5 text-base font-semibold"
+            style={{ color: theme.colors.foreground }}
+          >
+            Mixed Fruits and...
+          </Text>
+          <View className="flex-row items-center">
+            <Ionicons name="flame" size={16} color={theme.colors.warning} />
+            <Text
+              className="ml-1 text-sm font-semibold"
+              style={{ color: theme.colors.foreground }}
+            >
+              300 calories
+            </Text>
+          </View>
+        </View>
+        <Text
+          className="text-sm font-medium"
+          style={{ color: theme.colors.mutedForeground }}
+        >
+          12:27 PM
+        </Text>
+      </View>
+    </View>
+  );
+}

package/2/apps/native/src/features/tracker-app/components/week-calendar.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+interface Day {
+  letter: string;
+  number: number;
+  isToday?: boolean;
+}
+
+const days: Day[] = [
+  { letter: 'S', number: 22 },
+  { letter: 'S', number: 23 },
+  { letter: 'M', number: 24 },
+  { letter: 'T', number: 25 },
+  { letter: 'W', number: 26 },
+  { letter: 'T', number: 27, isToday: true },
+  { letter: 'F', number: 28 },
+];
+
+export default function WeekCalendar() {
+  const [selectedDay, setSelectedDay] = useState(5); // Thursday 27
+  const theme = useThemeConfig();
+
+  return (
+    <View className="mb-6 flex-row justify-between px-1">
+      {days.map((day, index) => (
+        <TouchableOpacity
+          key={index}
+          className="items-center justify-center rounded-2xl border-2 border-dashed px-4 py-6"
+          style={{
+            borderColor:
+              index === selectedDay
+                ? theme.colors.primary
+                : theme.colors.border,
+            backgroundColor: 'transparent',
+          }}
+          onPress={() => setSelectedDay(index)}
+        >
+          <Text
+            className="mb-2 text-xs font-medium"
+            style={{
+              color:
+                index === selectedDay
+                  ? theme.colors.primary
+                  : theme.colors.mutedForeground,
+            }}
+          >
+            {day.letter}
+          </Text>
+          <Text
+            className="text-base font-semibold"
+            style={{
+              color:
+                index === selectedDay
+                  ? theme.colors.primary
+                  : theme.colors.foreground,
+            }}
+          >
+            {day.number}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}

package/2/apps/native/src/features/vibefast-features.ts

@@ -0,0 +1,42 @@
+/**
+ * VibeFast CLI Managed Features
+ *
+ * ⚠️ DO NOT EDIT THIS FILE MANUALLY
+ * This file is automatically managed by the VibeFast CLI.
+ *
+ * Features are added/removed via:
+ * - vf add <feature-name>
+ * - vf remove <feature-name>
+ */
+
+export interface VibeFastFeature {
+  id: string;
+  title: string;
+  icon: string;
+  color: string;
+  description: string;
+  route: string;
+  testID: string;
+}
+
+export const vibefastFeatures: VibeFastFeature[] = [
+  // --- @vibefast:features:start ---
+  {
+    id: 'charts',
+    title: 'Charts',
+    icon: '📊',
+    color: '#6366F1',
+    description: 'Charts feature',
+    route: '/charts',
+    testID: 'charts-button',
+  },
+  {
+    id: 'chatbot',
+    title: 'AI Chatbot',
+    icon: '💬',
+    color: '#F43F5E',
+    description: 'AI Chatbot feature',
+    route: '/chatbot',
+    testID: 'chatbot-button',
+  }, // --- @vibefast:features:end ---
+];

package/2/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/2/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/2/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';