vibefast-cli 1.1.3 → 1.2.1

package/recipes/chatbot-supabase/packages/backend/supabase/migrations/chatbot.sql

@@ -0,0 +1,104 @@
+-- Chatbot Feature Migration
+-- Creates tables for conversations and messages
+-- Run this migration when adding the chatbot feature via CLI
+
+-- ============================================================================
+-- CONVERSATIONS TABLE
+-- Stores chat conversations for each user
+-- ============================================================================
+CREATE TABLE IF NOT EXISTS conversations (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  name TEXT,
+  created_at TIMESTAMPTZ DEFAULT now()
+);
+
+-- ============================================================================
+-- MESSAGES TABLE
+-- Stores individual messages within conversations
+-- ============================================================================
+CREATE TABLE IF NOT EXISTS messages (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  conversation_id UUID NOT NULL REFERENCES conversations(id) ON DELETE CASCADE,
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  author_type TEXT NOT NULL CHECK (author_type IN ('user', 'bot')),
+  text TEXT,
+  ai_provider TEXT,
+  ai_model TEXT,
+  tool_calls JSONB,
+  metadata JSONB,
+  attachments JSONB,
+  created_at TIMESTAMPTZ DEFAULT now()
+);
+
+-- ============================================================================
+-- INDEXES
+-- ============================================================================
+CREATE INDEX IF NOT EXISTS idx_conversations_user_id ON conversations(user_id);
+CREATE INDEX IF NOT EXISTS idx_messages_conversation_id ON messages(conversation_id);
+CREATE INDEX IF NOT EXISTS idx_messages_user_id ON messages(user_id);
+CREATE INDEX IF NOT EXISTS idx_messages_created_at ON messages(created_at);
+
+-- ============================================================================
+-- RLS POLICIES - CONVERSATIONS
+-- ============================================================================
+ALTER TABLE conversations ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "conversations_select_own" ON conversations
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "conversations_insert_own" ON conversations
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "conversations_update_own" ON conversations
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "conversations_delete_own" ON conversations
+  FOR DELETE USING (auth.uid() = user_id);
+
+-- ============================================================================
+-- RLS POLICIES - MESSAGES
+-- ============================================================================
+ALTER TABLE messages ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "messages_select_own" ON messages
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "messages_insert_own" ON messages
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "messages_update_own" ON messages
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "messages_delete_own" ON messages
+  FOR DELETE USING (auth.uid() = user_id);
+
+-- ============================================================================
+-- STORAGE BUCKET - chat-attachments
+-- ============================================================================
+INSERT INTO storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
+VALUES (
+  'chat-attachments',
+  'chat-attachments',
+  false,
+  52428800,  -- 50MB limit
+  ARRAY['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'application/pdf', 'text/plain', 'audio/mpeg', 'audio/wav', 'video/mp4']
+) ON CONFLICT (id) DO NOTHING;
+
+-- Storage RLS for chat-attachments
+CREATE POLICY "Users can view their own chat attachments"
+ON storage.objects FOR SELECT TO authenticated
+USING (bucket_id = 'chat-attachments' AND name LIKE auth.uid() || '/%');
+
+CREATE POLICY "Users can upload their own chat attachments"
+ON storage.objects FOR INSERT TO authenticated
+WITH CHECK (bucket_id = 'chat-attachments' AND name LIKE auth.uid() || '/%');
+
+CREATE POLICY "Users can update their own chat attachments"
+ON storage.objects FOR UPDATE TO authenticated
+USING (bucket_id = 'chat-attachments' AND name LIKE auth.uid() || '/%')
+WITH CHECK (bucket_id = 'chat-attachments' AND name LIKE auth.uid() || '/%');
+
+CREATE POLICY "Users can delete their own chat attachments"
+ON storage.objects FOR DELETE TO authenticated
+USING (bucket_id = 'chat-attachments' AND name LIKE auth.uid() || '/%');

package/recipes/chatbot-supabase/recipe.json

@@ -0,0 +1,79 @@
+{
+  "name": "chatbot",
+  "version": "1.0.0",
+  "description": "AI-powered chat assistant with Supabase backend",
+  "copy": [
+    {
+      "from": "apps/native/src/app/chatbot",
+      "to": "apps/native/src/app/(root)/(protected)/chatbot"
+    },
+    {
+      "from": "apps/native/src/features/chatbot",
+      "to": "apps/native/src/features/chatbot"
+    },
+    {
+      "from": "apps/native/src/api-client/supabase/chatbot.ts",
+      "to": "apps/native/src/api-client/supabase/chatbot.ts"
+    },
+    {
+      "from": "packages/backend/supabase/functions/chat-stream",
+      "to": "packages/backend/supabase/functions/chat-stream"
+    },
+    {
+      "from": "packages/backend/supabase/migrations/chatbot.sql",
+      "to": "packages/backend/supabase/migrations/chatbot.sql"
+    },
+    {
+      "from": "packages/backend/src/services/conversations.ts",
+      "to": "packages/backend/src/services/conversations.ts"
+    },
+    {
+      "from": "packages/backend/src/services/messages.ts",
+      "to": "packages/backend/src/services/messages.ts"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/chatbot",
+    "label": "AI Chatbot",
+    "icon": "💬",
+    "color": "#F43F5E"
+  },
+  "target": "native",
+  "dependencies": {
+    "expo": [
+      "@supabase/supabase-js",
+      "@tanstack/react-query",
+      "expo-clipboard",
+      "markdown-it",
+      "react-native-markdown-display",
+      "react-syntax-highlighter",
+      "react-native-reanimated",
+      "react-native-safe-area-context"
+    ]
+  },
+  "env": [
+    {
+      "key": "OPENAI_API_KEY",
+      "description": "OpenAI API key for chat completions",
+      "example": "sk-...",
+      "link": "https://platform.openai.com/api-keys",
+      "file": "packages/backend/supabase/.env",
+      "required": true
+    }
+  ],
+  "manualSteps": [
+    {
+      "title": "Apply Supabase migration",
+      "description": "Run: cd packages/backend && supabase db push",
+      "content": "supabase db push"
+    },
+    {
+      "title": "Deploy Edge Function",
+      "description": "Run: cd packages/backend && supabase functions deploy chat-stream",
+      "content": "supabase functions deploy chat-stream"
+    }
+  ],
+  "postInstall": {
+    "message": "📦 Remember to run 'supabase db push' and 'supabase functions deploy chat-stream'"
+  }
+}

package/recipes/image-analysis/packages/backend/convex/imageAnalysis/index.ts

@@ -2,7 +2,7 @@
  * Image Analysis Domain Aggregator
  *
  * Single entry point for all image analysis Convex functions.
- * Re-exports functions from imageAnalysisFunctions.ts to decouple
+ * Re-exports functions from imageAnalysis.ts to decouple
  * frontend from internal file structure.
  */
 
@@ -15,4 +15,4 @@ export {
   getUserImageAnalyses,
   performAiAnalysis,
   updateAnalysisResults,
-} from '../imageAnalysisFunctions';
+} from '../imageAnalysis';

package/recipes/image-analysis/packages/backend/convex/{imageAnalysisFunctions.ts → imageAnalysis.ts}

@@ -44,7 +44,7 @@ export const analyzeImages = action({
 
     // Create analysis record
     const analysisId = await ctx.runMutation(
-      internal.imageAnalysisFunctions.createAnalysisRecord,
+      internal.imageAnalysis.createAnalysisRecord,
       {
         userId,
         imageStorageIds,
@@ -56,7 +56,7 @@ export const analyzeImages = action({
     // Schedule background AI analysis
     await ctx.scheduler.runAfter(
       0,
-      internal.imageAnalysisFunctions.performAiAnalysis,
+      internal.imageAnalysis.performAiAnalysis,
       {
         analysisId,
       },
@@ -101,7 +101,7 @@ export const performAiAnalysis = internalAction({
     try {
       // Get analysis record
       const analysis = await ctx.runQuery(
-        internal.imageAnalysisFunctions.getAnalysisRecord,
+        internal.imageAnalysis.getAnalysisRecord,
         {
           analysisId: args.analysisId,
         },
@@ -178,7 +178,7 @@ export const performAiAnalysis = internalAction({
 
       // Update analysis record with results
       await ctx.runMutation(
-        internal.imageAnalysisFunctions.updateAnalysisResults,
+        internal.imageAnalysis.updateAnalysisResults,
         {
           analysisId: args.analysisId,
           results,
@@ -190,7 +190,7 @@ export const performAiAnalysis = internalAction({
 
       // Update analysis record with error
       await ctx.runMutation(
-        internal.imageAnalysisFunctions.updateAnalysisResults,
+        internal.imageAnalysis.updateAnalysisResults,
         {
           analysisId: args.analysisId,
           status: 'failed',

package/recipes/image-analysis/recipe.json

@@ -1,12 +1,8 @@
 {
   "name": "image-analysis",
-  "version": "1.1.0",
-  "description": "Multi-step AI image analyzer with configurable flows",
+  "version": "1.0.0",
+  "description": "AI-powered image analysis",
   "copy": [
-    {
-      "from": "apps/native/src/app/(root)/(protected)/analysis",
-      "to": "apps/native/src/app/(root)/(protected)/analysis"
-    },
     {
       "from": "apps/native/src/features/image-analyzer",
       "to": "apps/native/src/features/image-analyzer"
@@ -15,64 +11,28 @@
       "from": "apps/native/src/api-client/image-analyzer.ts",
       "to": "apps/native/src/api-client/image-analyzer.ts"
     },
-    {
-      "from": "apps/native/assets/features/image-analyzer",
-      "to": "apps/native/assets/features/image-analyzer"
-    },
-    {
-      "from": "packages/backend/convex/imageAnalysis",
-      "to": "packages/backend/convex/imageAnalysis"
-    },
     {
       "from": "packages/backend/convex/imageAnalysis.ts",
       "to": "packages/backend/convex/imageAnalysis.ts"
     },
     {
-      "from": "packages/backend/convex/lib/ai/imageAnalysisAdapter.ts",
-      "to": "packages/backend/convex/lib/ai/imageAnalysisAdapter.ts"
+      "from": "packages/backend/convex/imageAnalysis",
+      "to": "packages/backend/convex/imageAnalysis"
     }
   ],
+  "configuration": {
+    "apiClient": {
+      "exports": [
+        "export { type ImageAnalyzerApi, imageAnalyzerApi } from './image-analyzer';"
+      ]
+    }
+  },
   "nav": {
-    "href": "/(root)/(protected)/analysis/face-analysis",
-    "label": "AI Analysis",
+    "href": "/(root)/(protected)/image-analyzer",
+    "label": "Image Analyzer",
     "icon": "🔍",
-    "color": "#06B6D4"
+    "color": "#3B82F6"
   },
   "target": "native",
-  "env": [
-    {
-      "key": "OPENAI_API_KEY",
-      "description": "OpenAI API key for image analysis (optional - use this OR Gemini, not both).",
-      "example": "sk-abc123def456",
-      "link": "https://platform.openai.com/account/api-keys",
-      "file": "packages/backend/.env.local"
-    },
-    {
-      "key": "GEMINI_API_KEY",
-      "description": "Google Generative AI key for image analysis (optional - use this OR OpenAI, not both).",
-      "example": "AIzaSyExampleGeminiKey",
-      "link": "https://aistudio.google.com/api-keys",
-      "file": "packages/backend/.env.local"
-    },
-    {
-      "key": "AI_PROVIDER",
-      "description": "Provider to use for the analyzer (openai or gemini). Defaults to openai if unset.",
-      "example": "openai",
-      "file": "packages/backend/.env.local",
-      "required": false
-    }
-  ],
-  "manualSteps": [
-    {
-      "title": "Get an LLM API key (OpenAI or Gemini)",
-      "description": "Start with either provider (OpenAI or Gemini). You can add both later if you like.\\n\\n  Option A: OpenAI\\n    Visit https://platform.openai.com/account/api-keys and create an API key\\n\\n  Option B: Google Gemini\\n    Visit https://aistudio.google.com/api-keys and create an API key",
-      "link": "https://platform.openai.com/account/api-keys"
-    },
-    {
-      "title": "Add keys to backend .env file",
-      "description": "Open packages/backend/.env.local and add at least one provider key. You can add both. Optionally set AI_PROVIDER to choose it explicitly.",
-      "file": "packages/backend/.env.local",
-      "content": "# Add one or both:\\nOPENAI_API_KEY=sk-...\\nGEMINI_API_KEY=AIzaSy...\\n# Optional override:\\nAI_PROVIDER=openai\\n"
-    }
-  ]
+  "dependencies": { "expo": ["expo-camera", "expo-image-picker"] }
 }

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/app/analysis-options-screen.tsx

@@ -0,0 +1,304 @@
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import { useCallback, useMemo, useState } from 'react';
+import {
+  Alert,
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { Image, ScreenFooter, Text } from '@/components/ui';
+import type {
+  AnalysisGoal,
+  FeedbackStyle,
+} from '@/features/image-analyzer/config/analysis-config';
+import type { AnalysisFlowConfig } from '@/features/image-analyzer/config/master-analysis-config';
+import { useNavigationOptions } from '@/lib/hooks/use-navigation-options';
+
+type DynamicAnalysisOptionsProps = {
+  config: AnalysisFlowConfig;
+};
+
+// Enhanced goal options with colors and icons
+const createEnhancedGoals = (goals: readonly AnalysisGoal[]) => [
+  {
+    ...goals[0],
+    color: 'bg-blue-500',
+    icon: '🔍',
+    accent:
+      'border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20',
+  },
+  {
+    ...goals[1],
+    color: 'bg-green-500',
+    icon: '⚡',
+    accent:
+      'border-green-200 bg-green-50 dark:border-green-700 dark:bg-green-900/20',
+  },
+  {
+    ...goals[2],
+    color: 'bg-purple-500',
+    icon: '🎯',
+    accent:
+      'border-purple-200 bg-purple-50 dark:border-purple-700 dark:bg-purple-900/20',
+  },
+  {
+    ...goals[3],
+    color: 'bg-orange-500',
+    icon: '⚖️',
+    accent:
+      'border-orange-200 bg-orange-50 dark:border-orange-700 dark:bg-orange-900/20',
+  },
+];
+
+// Enhanced feedback styles with colors and icons
+const createEnhancedStyles = (styles: readonly FeedbackStyle[]) => [
+  {
+    ...styles[0],
+    color: 'bg-neutral-600',
+    icon: '👔',
+    accent:
+      'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900/20',
+  },
+  {
+    ...styles[1],
+    color: 'bg-cyan-500',
+    icon: '😊',
+    accent:
+      'border-cyan-200 bg-cyan-50 dark:border-cyan-700 dark:bg-cyan-900/20',
+  },
+  {
+    ...styles[2],
+    color: 'bg-indigo-600',
+    icon: '🔬',
+    accent:
+      'border-indigo-200 bg-indigo-50 dark:border-indigo-700 dark:bg-indigo-900/20',
+  },
+  {
+    ...styles[3],
+    color: 'bg-pink-500',
+    icon: '🎨',
+    accent:
+      'border-pink-200 bg-pink-50 dark:border-pink-700 dark:bg-pink-900/20',
+  },
+];
+
+export function DynamicAnalysisOptionsScreen({
+  config,
+}: DynamicAnalysisOptionsProps) {
+  const router = useRouter();
+  const { standard } = useNavigationOptions();
+  const params = useLocalSearchParams();
+
+  const imageUris: string[] = useMemo(
+    () => (params.imageUris ? JSON.parse(params.imageUris as string) : []),
+    [params.imageUris],
+  );
+
+  const [selectedGoal, setSelectedGoal] = useState<string>('');
+  const [selectedFeedbackStyle, setSelectedFeedbackStyle] =
+    useState<string>('');
+
+  // Create enhanced versions with emojis and colors
+  const enhancedGoals = useMemo(
+    () => createEnhancedGoals(config.availableGoals),
+    [config.availableGoals],
+  );
+  const enhancedStyles = useMemo(
+    () => createEnhancedStyles(config.availableFeedbackStyles),
+    [config.availableFeedbackStyles],
+  );
+
+  const handleStartAnalysis = useCallback(() => {
+    if (!selectedGoal || !selectedFeedbackStyle) {
+      Alert.alert(
+        'Selection Required',
+        'Please select both an analysis goal and feedback style to continue.',
+      );
+      return;
+    }
+
+    router.push({
+      pathname: '/analysis/[type]/loading' as any,
+      params: {
+        type: config.id,
+        imageUris: JSON.stringify(imageUris),
+        analysisGoal: selectedGoal,
+        feedbackStyle: selectedFeedbackStyle,
+      },
+    });
+  }, [selectedGoal, selectedFeedbackStyle, imageUris, router, config.id]);
+
+  const handleBackToCapture = useCallback(() => {
+    router.back();
+  }, [router]);
+
+  const selectedGoalData = enhancedGoals.find(
+    (goal) => goal.id === selectedGoal,
+  );
+  const selectedStyleData = enhancedStyles.find(
+    (style) => style.id === selectedFeedbackStyle,
+  );
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          ...standard,
+          title: config.name,
+          headerBackButtonDisplayMode: 'generic',
+        }}
+      />
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{
+          paddingBottom: 120,
+          paddingTop: Platform.OS === 'ios' ? 78 : 0,
+        }}
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="px-6 py-8">
+          {/* Image Preview Section */}
+          <View className="mb-8 rounded-2xl bg-white p-4 py-2 shadow-sm dark:bg-neutral-800">
+            <Text className="mb-4 ml-1 text-base font-medium text-neutral-800 dark:text-neutral-200">
+              📷 {imageUris.length} Images Ready
+            </Text>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+              <View className="flex-row gap-3">
+                {imageUris.map((uri, index) => (
+                  <View key={index} className="items-center">
+                    <View className="size-20 overflow-hidden rounded-xl bg-neutral-200 dark:bg-neutral-700">
+                      <Image
+                        source={{ uri }}
+                        className="size-full"
+                        contentFit="cover"
+                      />
+                    </View>
+                    <Text className="mt-1 text-xs text-neutral-500">
+                      {index + 1}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            </ScrollView>
+          </View>
+
+          {/* Analysis Goal Selection */}
+          <View className="mb-8">
+            <Text className="mb-4 text-xl font-bold text-neutral-900 dark:text-white">
+              Analysis Goal
+            </Text>
+            <View className="gap-y-3">
+              {enhancedGoals.map((goal) => (
+                <TouchableOpacity
+                  key={goal.id}
+                  onPress={() => setSelectedGoal(goal.id)}
+                  className={`flex-row items-center rounded-2xl border-2 p-4 ${
+                    selectedGoal === goal.id
+                      ? goal.accent
+                      : 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800'
+                  }`}
+                >
+                  <View
+                    className={`mr-4 size-12 items-center justify-center rounded-xl ${goal.color}`}
+                  >
+                    <Text className="text-xl">{goal.icon}</Text>
+                  </View>
+                  <View className="flex-1">
+                    <Text className="mb-1 text-base font-semibold text-neutral-900 dark:text-white">
+                      {goal.label}
+                    </Text>
+                    <Text className="text-sm text-neutral-600 dark:text-neutral-400">
+                      {goal.description}
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+
+          {/* Feedback Style Selection */}
+          <View className="mb-8">
+            <Text className="mb-4 text-xl font-bold text-neutral-900 dark:text-white">
+              Feedback Tone
+            </Text>
+            <View className="gap-y-3">
+              {enhancedStyles.map((style) => (
+                <TouchableOpacity
+                  key={style.id}
+                  onPress={() => setSelectedFeedbackStyle(style.id)}
+                  className={`flex-row items-center rounded-2xl border-2 p-4 ${
+                    selectedFeedbackStyle === style.id
+                      ? style.accent
+                      : 'border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800'
+                  }`}
+                >
+                  <View
+                    className={`mr-4 size-12 items-center justify-center rounded-xl ${style.color}`}
+                  >
+                    <Text className="text-xl">{style.icon}</Text>
+                  </View>
+                  <View className="flex-1">
+                    <Text className="mb-1 text-base font-semibold text-neutral-900 dark:text-white">
+                      {style.label}
+                    </Text>
+                    <Text className="text-sm text-neutral-600 dark:text-neutral-400">
+                      {style.description}
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+
+          {/* Selection Summary */}
+          <View className="mb-8 min-h-[100px]">
+            {selectedGoal || selectedFeedbackStyle ? (
+              <View className="rounded-2xl border border-border p-4 dark:bg-card">
+                <Text className="mb-2 text-lg font-semibold">
+                  Your Selection
+                </Text>
+                {selectedGoalData && (
+                  <Text className="mb-2 text-sm">
+                    {selectedGoalData.icon} Goal: {selectedGoalData.label}
+                  </Text>
+                )}
+                {selectedStyleData && (
+                  <Text className="text-sm">
+                    {selectedStyleData.icon} Tone: {selectedStyleData.label}
+                  </Text>
+                )}
+              </View>
+            ) : (
+              <View className="rounded-2xl border border-neutral-200 bg-neutral-50 p-4 opacity-50 dark:border-neutral-700 dark:bg-neutral-800">
+                <Text className="mb-2 text-lg font-semibold text-neutral-500 dark:text-neutral-400">
+                  Your Selection
+                </Text>
+                <Text className="text-sm text-neutral-400 dark:text-neutral-500">
+                  Please select your analysis preferences above
+                </Text>
+              </View>
+            )}
+          </View>
+        </View>
+      </ScrollView>
+
+      <ScreenFooter
+        buttons={[
+          {
+            text: 'Back to Capture',
+            onPress: handleBackToCapture,
+            variant: 'outline',
+          },
+          {
+            text: 'Start Analysis',
+            onPress: handleStartAnalysis,
+            variant: 'default',
+            disabled: !selectedGoal || !selectedFeedbackStyle,
+          },
+        ]}
+      />
+    </>
+  );
+}