vibefast-cli 1.1.3 → 1.2.1

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/models/models.ts

@@ -0,0 +1,162 @@
+import type { ModelConfig, Provider } from './types';
+
+export const MODELS: ModelConfig[] = [
+  // Claude Models
+  {
+    id: 'claude-4-sonnet',
+    name: 'Claude 4 Sonnet',
+    provider: 'claude',
+    description: 'Most capable • Great at coding',
+    category: 'premium',
+    capabilities: ['coding', 'reasoning', 'analysis', 'writing'],
+    contextWindow: 200000,
+    speed: 'medium',
+    released: '2024',
+    tags: ['latest', 'most-capable'],
+  },
+  {
+    id: 'claude-4.5-sonnet',
+    name: 'Claude 4.5 Sonnet',
+    provider: 'claude',
+    description: 'Fast & efficient • Perfect for chat',
+    category: 'premium',
+    capabilities: ['chat', 'reasoning', 'coding', 'analysis'],
+    contextWindow: 200000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['balanced', 'chat-optimized'],
+  },
+
+  // OpenAI Models
+  {
+    id: 'gpt-5',
+    name: 'GPT-5',
+    provider: 'openai',
+    description: 'For complex tasks and thinking',
+    category: 'premium',
+    capabilities: ['reasoning', 'coding', 'analysis', 'mathematics'],
+    contextWindow: 200000,
+    speed: 'medium',
+    released: '2024',
+    tags: ['most-capable', 'complex-tasks'],
+  },
+  {
+    id: 'gpt-5-mini',
+    name: 'GPT-5 Mini',
+    provider: 'openai',
+    description: 'Quick thinking & reliable',
+    category: 'free',
+    capabilities: ['chat', 'reasoning', 'coding', 'analysis'],
+    contextWindow: 128000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['balanced', 'efficient'],
+  },
+  {
+    id: 'gpt-5-nano',
+    name: 'GPT-5 Nano',
+    provider: 'openai',
+    description: 'Very fast • Great for basic work',
+    category: 'free',
+    capabilities: ['chat', 'basic-tasks', 'quick-responses'],
+    contextWindow: 16000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['fastest', 'basic-tasks'],
+  },
+  {
+    id: 'gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    provider: 'openai',
+    description: 'Very fast • Great for basic work',
+    category: 'free',
+    capabilities: ['chat', 'basic-tasks', 'quick-responses'],
+    contextWindow: 16000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['fastest', 'basic-tasks'],
+  },
+
+  // Gemini Models
+  {
+    id: 'gemini-2.0-flash',
+    name: 'Gemini 2.0 Flash',
+    provider: 'gemini',
+    description: 'Latest model • Ultra fast',
+    category: 'free',
+    capabilities: ['chat', 'reasoning', 'multimodal', 'coding'],
+    contextWindow: 1000000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['latest', 'multimodal', 'fast'],
+  },
+  {
+    id: 'gemini-2.5-flash',
+    name: 'Gemini 2.5 Flash',
+    provider: 'gemini',
+    description: 'Balanced • Great performance',
+    category: 'free',
+    capabilities: ['chat', 'reasoning', 'multimodal', 'analysis'],
+    contextWindow: 1000000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['balanced', 'multimodal'],
+  },
+  {
+    id: 'gemini-2.5-pro',
+    name: 'Gemini 2.5 Pro',
+    provider: 'gemini',
+    description: 'Advanced reasoning',
+    category: 'premium',
+    capabilities: ['reasoning', 'coding', 'mathematics', 'analysis'],
+    contextWindow: 2000000,
+    speed: 'medium',
+    released: '2024',
+    tags: ['most-capable', 'advanced-reasoning'],
+  },
+];
+
+// Helper to get models by provider
+export const getModelsByProvider = (provider: Provider): ModelConfig[] => {
+  return MODELS.filter((model) => model.provider === provider);
+};
+
+// Helper to get premium models
+export const getPremiumModels = (): ModelConfig[] => {
+  return MODELS.filter((model) => model.category === 'premium');
+};
+
+// Helper to get free models
+export const getFreeModels = (): ModelConfig[] => {
+  return MODELS.filter((model) => model.category === 'free');
+};
+
+// Helper to get model by ID
+export const getModelById = (id: string): ModelConfig | undefined => {
+  return MODELS.find((model) => model.id === id);
+};
+
+// Default models for each provider
+export const DEFAULT_MODELS: Record<Provider, string> = {
+  claude: 'claude-4.5-sonnet',
+  openai: 'gpt-5-nano',
+  gemini: 'gemini-2.0-flash',
+};
+
+// Get default model for a provider
+export const getDefaultModel = (provider: Provider): ModelConfig => {
+  const defaultId = DEFAULT_MODELS[provider];
+  const model = getModelById(defaultId);
+  if (!model) {
+    throw new Error(
+      `Default model ${defaultId} not found for provider ${provider}`,
+    );
+  }
+  return model;
+};
+
+// Get model description (single source of truth)
+export const getModelDescription = (modelId: string): string => {
+  const model = getModelById(modelId);
+  return model?.description || 'AI model';
+};

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/models/providers.ts

@@ -0,0 +1,62 @@
+import type React from 'react';
+
+import { ClaudeIcon } from '@/components/ui/icons/claude';
+import { GeminiIcon } from '@/components/ui/icons/gemini';
+import { OpenaiIcon } from '@/components/ui/icons/openai';
+
+import type { Provider, ProviderConfig } from './types';
+
+export const PROVIDER_CONFIGS: Record<Provider, ProviderConfig> = {
+  claude: {
+    id: 'claude',
+    name: 'claude',
+    displayName: 'Anthropic Claude',
+    icon: ClaudeIcon,
+    defaultModel: 'claude-4.5-sonnet',
+    description: 'Advanced AI assistant with strong reasoning capabilities',
+    website: 'https://anthropic.com',
+    color: '#D97706',
+  },
+  openai: {
+    id: 'openai',
+    name: 'openai',
+    displayName: 'OpenAI',
+    icon: OpenaiIcon,
+    defaultModel: 'gpt-5-nano',
+    description: 'Leading AI research lab and ChatGPT creator',
+    website: 'https://openai.com',
+    color: '#10A37F',
+  },
+  gemini: {
+    id: 'gemini',
+    name: 'gemini',
+    displayName: 'Google Gemini',
+    icon: GeminiIcon,
+    defaultModel: 'gemini-2.0-flash',
+    description: "Google's multimodal AI models",
+    website: 'https://gemini.google.com',
+    color: '#4285F4',
+  },
+};
+
+// Get provider config by ID
+export const getProviderConfig = (provider: Provider): ProviderConfig => {
+  return PROVIDER_CONFIGS[provider];
+};
+
+// Get all providers
+export const getAllProviders = (): Provider[] => {
+  return Object.keys(PROVIDER_CONFIGS) as Provider[];
+};
+
+// Get provider icon component
+export const getProviderIcon = (
+  provider: Provider,
+): React.ComponentType<any> => {
+  return PROVIDER_CONFIGS[provider].icon;
+};
+
+// Get provider display name
+export const getProviderDisplayName = (provider: Provider): string => {
+  return PROVIDER_CONFIGS[provider].displayName;
+};

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/models/types.ts

@@ -0,0 +1,40 @@
+export type Provider = 'claude' | 'openai' | 'gemini';
+
+export type ModelCategory = 'free' | 'premium' | 'specialized';
+
+export type ModelSpeed = 'fast' | 'medium' | 'slow';
+
+export interface ModelConfig {
+  id: string;
+  name: string;
+  provider: Provider;
+  description: string;
+  category: ModelCategory;
+  capabilities: string[];
+  contextWindow?: number;
+  speed?: ModelSpeed;
+  released?: string;
+  tags?: string[];
+}
+
+export interface ProviderConfig {
+  id: Provider;
+  name: string;
+  displayName: string;
+  icon: React.ComponentType<any>;
+  defaultModel: string;
+  description: string;
+  website?: string;
+  color?: string;
+}
+
+export interface ModelOptions {
+  models: ModelConfig[];
+  providers: ProviderConfig[];
+  categories: Record<ModelCategory, ModelConfig[]>;
+  byProvider: Record<Provider, ModelConfig[]>;
+  premium: ModelConfig[];
+  free: ModelConfig[];
+}
+
+export type ModelId = string;

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/services/file-uploader.ts

@@ -0,0 +1,287 @@
+import { Buffer } from 'buffer';
+// Use legacy FS API to avoid deprecation errors in RN runtime
+import * as FileSystem from 'expo-file-system/legacy';
+import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';
+import { Image } from 'react-native';
+
+import { getSupabase } from '@/api-client/supabase/client';
+import { handleError } from '@/components/ui';
+import { error as logError, info } from '@/core/logging';
+
+// Configuration constants for Supabase uploads
+const CONFIG = {
+  MAX_IMAGE_DIMENSION: 1024,
+  COMPRESSION_QUALITY: 0.7,
+  MAX_FILE_SIZE_MB: 2,
+  MAX_FILE_SIZE_BYTES: 2 * 1024 * 1024, // 2MB
+} as const;
+
+const TARGET_ASPECT_RATIO = 16 / 9;
+
+/**
+ * Service for uploading images to Supabase Storage
+ */
+export class FileUploadService {
+  /**
+   * Uploads an image file to Supabase storage
+   */
+  async uploadImage(
+    fileUri: string,
+    fileName?: string,
+    mimeTypeHint?: string,
+  ): Promise<string> {
+    try {
+      info('Starting image upload process', {
+        feature: 'chatbot.file_upload',
+        fileUri,
+      });
+
+      // Step 1: Compress and optimize the image
+      const optimizedUri = await this.optimizeImage(fileUri);
+      if (!optimizedUri) {
+        throw new Error('Failed to optimize image');
+      }
+
+      // Step 2: Validate file size using FileSystem (works on React Native)
+      const infoResult = await FileSystem.getInfoAsync(optimizedUri);
+      if (!infoResult.exists) {
+        throw new Error('Optimized file is missing');
+      }
+
+      const fileSize = infoResult.size ?? 0;
+
+      if (fileSize > CONFIG.MAX_FILE_SIZE_BYTES) {
+        throw new Error(
+          `File size (${(fileSize / 1024 / 1024).toFixed(1)}MB) exceeds maximum allowed size of ${CONFIG.MAX_FILE_SIZE_MB}MB`,
+        );
+      }
+
+      info('Image optimized and validated', {
+        feature: 'chatbot.file_upload',
+        originalUri: fileUri,
+        optimizedUri,
+        fileSize,
+      });
+
+      const supabase = getSupabase();
+      const contentType = mimeTypeHint || 'image/jpeg';
+      const finalFileName = fileName ?? this.buildFileName(contentType);
+
+      const { data: sessionData, error: sessionError } =
+        await supabase.auth.getSession();
+      if (sessionError || !sessionData.session?.access_token) {
+        throw new Error('Not authenticated');
+      }
+
+      const {
+        data: { user },
+        error: authError,
+      } = await supabase.auth.getUser();
+      if (authError || !user) {
+        throw new Error('Not authenticated');
+      }
+
+      const storagePath = `${user.id}/${finalFileName}`;
+      // Read file as base64 and convert to binary for upload
+      const base64 = await FileSystem.readAsStringAsync(optimizedUri, {
+        encoding: FileSystem.EncodingType.Base64,
+      });
+      const fileBytes = Buffer.from(base64, 'base64');
+
+      const { data: uploadData, error: uploadError } = await supabase.storage
+        .from('chat-attachments')
+        .upload(storagePath, fileBytes, {
+          contentType,
+          upsert: true,
+        });
+
+      if (uploadError) {
+        console.error('[chatbot.file_upload] Storage upload failed', {
+          message: uploadError.message,
+        });
+        throw new Error(
+          uploadError.message || 'Failed to upload image to storage',
+        );
+      }
+
+      info('Image uploaded successfully', {
+        feature: 'chatbot.file_upload',
+        storageId: uploadData?.path ?? storagePath,
+        fileSize,
+      });
+
+      return uploadData?.path ?? storagePath;
+    } catch (error) {
+      const err =
+        error instanceof Error
+          ? error
+          : new Error(
+              typeof error === 'string' ? error : 'Unknown upload error',
+            );
+
+      handleError(err, {
+        feature: 'chatbot.file_upload',
+        fallbackMessage: 'Failed to upload image',
+      });
+
+      throw err;
+    }
+  }
+
+  /**
+   * Optimizes an image by resizing and compressing it while preserving aspect ratio and alpha
+   */
+  private async optimizeImage(fileUri: string): Promise<string | null> {
+    try {
+      // Detect image format to preserve alpha channels
+      const response = await fetch(fileUri);
+      const blob = await response.blob();
+      const isPng = blob.type?.includes('png');
+      const isWebp = blob.type?.includes('webp');
+
+      const actions: Parameters<typeof manipulateAsync>[1][number][] = [];
+
+      try {
+        const { width, height } = await this.getImageDimensions(fileUri);
+        const cropRect = this.calculateCenterCrop(width, height);
+
+        if (cropRect) {
+          actions.push({ crop: cropRect });
+        }
+
+        const workingWidth = cropRect ? cropRect.width : width;
+        const workingHeight = cropRect ? cropRect.height : height;
+        const resize = this.calculateResizeDimensions(
+          workingWidth,
+          workingHeight,
+        );
+
+        if (resize) {
+          actions.push({ resize });
+        }
+      } catch (dimensionError) {
+        logError(
+          dimensionError instanceof Error
+            ? dimensionError
+            : new Error('Failed to read image dimensions'),
+          { feature: 'chatbot.file_upload', fileUri },
+        );
+
+        actions.push({
+          resize: {
+            width: CONFIG.MAX_IMAGE_DIMENSION,
+          },
+        });
+      }
+
+      const result = await manipulateAsync(fileUri, actions, {
+        compress: CONFIG.COMPRESSION_QUALITY,
+        format: isPng
+          ? SaveFormat.PNG
+          : isWebp
+            ? SaveFormat.WEBP
+            : SaveFormat.JPEG,
+      });
+
+      return result.uri;
+    } catch (error) {
+      logError(
+        error instanceof Error ? error : new Error('Failed to optimize image'),
+        { feature: 'chatbot.file_upload', fileUri },
+      );
+      return null;
+    }
+  }
+
+  private getImageDimensions(
+    uri: string,
+  ): Promise<{ width: number; height: number }> {
+    return new Promise((resolve, reject) => {
+      Image.getSize(
+        uri,
+        (width, height) => resolve({ width, height }),
+        (error) => reject(error),
+      );
+    });
+  }
+
+  private calculateCenterCrop(
+    width: number,
+    height: number,
+  ): {
+    originX: number;
+    originY: number;
+    width: number;
+    height: number;
+  } | null {
+    const aspectRatio = width / height;
+
+    if (Math.abs(aspectRatio - TARGET_ASPECT_RATIO) < 0.01) {
+      return null;
+    }
+
+    if (aspectRatio > TARGET_ASPECT_RATIO) {
+      const targetWidth = Math.round(height * TARGET_ASPECT_RATIO);
+      const originX = Math.round((width - targetWidth) / 2);
+
+      return {
+        originX,
+        originY: 0,
+        width: targetWidth,
+        height,
+      };
+    }
+
+    const targetHeight = Math.round(width / TARGET_ASPECT_RATIO);
+    const originY = Math.round((height - targetHeight) / 2);
+
+    return {
+      originX: 0,
+      originY,
+      width,
+      height: targetHeight,
+    };
+  }
+
+  private calculateResizeDimensions(
+    width: number,
+    height: number,
+  ): { width: number; height: number } | null {
+    const largestSide = Math.max(width, height);
+
+    if (largestSide <= CONFIG.MAX_IMAGE_DIMENSION) {
+      return null;
+    }
+
+    const scale = CONFIG.MAX_IMAGE_DIMENSION / largestSide;
+
+    return {
+      width: Math.round(width * scale),
+      height: Math.round(height * scale),
+    };
+  }
+
+  private buildFileName(contentType: string): string {
+    const ext = this.mapContentTypeToExtension(contentType);
+    const rand = Math.random().toString(36).slice(2, 8);
+    return `chat-${Date.now()}-${rand}.${ext}`;
+  }
+
+  private mapContentTypeToExtension(contentType?: string): string {
+    if (!contentType) return 'jpg';
+    if (contentType.includes('png')) return 'png';
+    if (contentType.includes('webp')) return 'webp';
+    if (contentType.includes('heic')) return 'heic';
+    if (contentType.includes('heif')) return 'heif';
+    return 'jpg';
+  }
+}
+
+/**
+ * Hook to create a FileUploadService instance
+ *
+ * @returns FileUploadService instance with the mutation hook bound
+ */
+export function useFileUploadService(): FileUploadService {
+  return new FileUploadService();
+}