vibefast-cli 0.1.1

package/recipes/chatbot/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/apps/native/src/features/chatbot/services/file-uploader.ts

@@ -0,0 +1,238 @@
+import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';
+import { Image } from 'react-native';
+
+import { sharedApi } from '@/api-client/shared';
+import { handleError } from '@/components/ui';
+import { error as logError, info } from '@/core/logging';
+
+// Configuration constants from Convex config
+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 Convex File Storage
+ */
+export class FileUploadService {
+  private generateUploadUrl: (args: any) => Promise<string>;
+
+  constructor(generateUploadUrlMutation: (args: any) => Promise<string>) {
+    this.generateUploadUrl = generateUploadUrlMutation;
+  }
+
+  /**
+   * Uploads an image file to Convex storage
+   */
+  async uploadImage(fileUri: string): Promise<string | null> {
+    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
+      const response = await fetch(optimizedUri);
+      const blob = await response.blob();
+
+      if (blob.size > CONFIG.MAX_FILE_SIZE_BYTES) {
+        throw new Error(
+          `File size (${(blob.size / 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: blob.size,
+      });
+
+      // Step 3: Get upload URL from Convex
+      const uploadUrl = await this.generateUploadUrl({});
+
+      // Step 4: Upload the file to Convex storage
+      const uploadResponse = await fetch(uploadUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': blob.type },
+        body: blob,
+      });
+
+      if (!uploadResponse.ok) {
+        throw new Error(`Upload failed: ${uploadResponse.statusText}`);
+      }
+
+      // Step 5: Get the storage ID from the response
+      const { storageId } = await uploadResponse.json();
+
+      info('Image uploaded successfully', {
+        feature: 'chatbot.file_upload',
+        storageId,
+        fileSize: blob.size,
+      });
+
+      return storageId;
+    } catch (error) {
+      handleError(error, {
+        feature: 'chatbot.file_upload',
+        fallbackMessage: 'Failed to upload image',
+      });
+
+      return null;
+    }
+  }
+
+  /**
+   * 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),
+    };
+  }
+}
+
+/**
+ * Hook to create a FileUploadService instance
+ *
+ * @returns FileUploadService instance with the mutation hook bound
+ */
+export function useFileUploadService(): FileUploadService {
+  const generateUploadUrl = sharedApi.useGenerateUploadUrl();
+
+  return new FileUploadService(generateUploadUrl);
+}

package/recipes/chatbot/apps/native/src/features/chatbot/services/message-handler-service.ts

@@ -0,0 +1,180 @@
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+import { Alert } from 'react-native';
+
+import { defaultCacheService } from '@/core/cache';
+import type { AppMessage } from '@/features/chatbot/types';
+import { translate } from '@/lib';
+
+export type AppAttachment = {
+  storageId: Id<'_storage'>;
+  url?: string;
+  mimeType?: string;
+  type: 'image';
+  fileName?: string;
+};
+
+type MessageSubmissionOptions = {
+  currentInput: string;
+  conversationId: string;
+  attachmentsFromInputBar?: {
+    type: 'image';
+    storageId: string;
+    fileName?: string;
+    mimeType: string;
+  }[];
+  storeUserMessageMutation: (args: {
+    conversationId: Id<'conversations'>;
+    authorType: 'user';
+    text?: string;
+    attachments?: {
+      type: 'image';
+      storageId: Id<'_storage'>;
+      fileName?: string;
+      mimeType?: string;
+    }[];
+  }) => Promise<Id<'messages'>>;
+};
+
+type ClearChatOptions = {
+  conversationId: string;
+  clearConversationMutation: (args: {
+    conversationId: Id<'conversations'>;
+  }) => Promise<any>;
+  onCleared?: () => void;
+};
+
+/**
+ * Service for handling message submission and chat operations
+ */
+export class MessageHandlerService {
+  /**
+   * Store a user message to the database before sending to AI
+   */
+  static async storeUserMessage(
+    options: MessageSubmissionOptions,
+  ): Promise<Id<'messages'> | null> {
+    const {
+      currentInput,
+      conversationId,
+      attachmentsFromInputBar,
+      storeUserMessageMutation,
+    } = options;
+
+    try {
+      console.log('[MessageHandlerService] Storing user message to DB...');
+      const messageId = await storeUserMessageMutation({
+        conversationId: conversationId as Id<'conversations'>,
+        authorType: 'user',
+        text: currentInput.trim() || undefined,
+        attachments: attachmentsFromInputBar?.map((att) => ({
+          type: 'image',
+          storageId: att.storageId as Id<'_storage'>,
+          fileName: att.fileName,
+          mimeType: att.mimeType,
+        })),
+      });
+      console.log('[MessageHandlerService] User message stored successfully.');
+      return messageId as Id<'messages'>;
+    } catch (dbError) {
+      console.error(
+        '[MessageHandlerService] Failed to store user message:',
+        dbError,
+      );
+      Alert.alert(translate('common.error'), translate('chatbot.send_failed'), [
+        {
+          text: translate('common.ok'),
+          onPress: () => {
+            // Reset the useChat hook by reloading the data
+            defaultCacheService.removeItem(`conversation_${conversationId}`);
+          },
+        },
+      ]);
+      return null;
+    }
+  }
+
+  /**
+   * Handle clearing a chat conversation
+   */
+  static clearChat(options: ClearChatOptions): void {
+    const { conversationId, clearConversationMutation } = options;
+
+    Alert.alert(
+      'Clear Chat',
+      'Are you sure you want to clear all messages? This action cannot be undone.',
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Clear',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              console.log(
+                '[MessageHandlerService] Clearing conversation:',
+                conversationId,
+              );
+              await clearConversationMutation({
+                conversationId: conversationId as Id<'conversations'>,
+              });
+              console.log(
+                '[MessageHandlerService] Conversation cleared successfully',
+              );
+
+              // Reset the useChat hook by reloading the data
+              defaultCacheService.removeItem(`conversation_${conversationId}`);
+              options.onCleared?.();
+            } catch (error) {
+              console.error(
+                '[MessageHandlerService] Failed to clear conversation:',
+                error,
+              );
+              Alert.alert('Error', 'Failed to clear chat. Please try again.');
+            }
+          },
+        },
+      ],
+    );
+  }
+
+  /**
+   * Transform display messages with stable attachment mapping
+   */
+  static transformDisplayMessages(
+    liveMessages: AppMessage[],
+    persistedMessages: AppMessage[],
+    lastUserAttachments?: AppAttachment[],
+    attachmentCache?: Record<string, AppAttachment[]>,
+  ): AppMessage[] {
+    const persisted = new Map(persistedMessages.map((m) => [m.id, m]));
+    const lastUserIdx = [...liveMessages]
+      .map((m, i) => ({ m, i }))
+      .reverse()
+      .find((x) => x.m.role === 'user')?.i;
+
+    return liveMessages.map((m, i) => {
+      const fromDb = persisted.get(m.id);
+      const isMostRecentUser = m.role === 'user' && i === lastUserIdx;
+      // Attachment precedence:
+      // 1) Cached attachments for this live message ID (persist across renders)
+      // 2) Most recent user's optimistic attachments (for immediate display)
+      // 3) Attachments from persisted DB messages when IDs align
+      const fromCache = attachmentCache?.[m.id];
+      const attachments =
+        fromCache && fromCache.length
+          ? fromCache
+          : ((isMostRecentUser && lastUserAttachments?.length
+              ? lastUserAttachments
+              : fromDb?.attachments) ?? undefined);
+
+      return {
+        ...m,
+        attachments,
+        toolCalls: m.toolCalls ?? fromDb?.toolCalls,
+        metadata: m.metadata ?? fromDb?.metadata,
+      };
+    });
+  }
+}

package/recipes/chatbot/apps/native/src/features/chatbot/types/index.ts

@@ -0,0 +1,60 @@
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+import type { Message } from 'ai';
+
+export type LocalMessageContentPart =
+  | { type: 'text'; text: string }
+  | { type: 'image'; image: string | URL };
+
+export type ConvexMessageAttachment = {
+  type: 'image';
+  storageId: Id<'_storage'>;
+  url?: string;
+  fileName?: string;
+  mimeType?: string;
+};
+
+export type ToolCallRecord = {
+  toolName: string;
+  args: unknown;
+  result?: unknown;
+};
+
+export type MessageMetadata = {
+  streamId?: string;
+  status?: string;
+  usage?: {
+    promptTokens?: number;
+    completionTokens?: number;
+    totalTokens?: number;
+  };
+};
+
+export type AgentStatus =
+  | {
+      type: 'thinking';
+      label?: string | null;
+      startedAt: number;
+    }
+  | {
+      type: 'tool';
+      toolName: string;
+      label?: string | null;
+      startedAt: number;
+    };
+
+export type AppMessage = Omit<Message, 'content'> & {
+  content: string | LocalMessageContentPart[];
+  attachments?: ConvexMessageAttachment[];
+  toolCalls?: ToolCallRecord[];
+  metadata?: MessageMetadata;
+};
+
+export type ConversationMessageFromDB = {
+  _id: string;
+  _creationTime: number;
+  authorType: 'user' | 'bot';
+  text?: string;
+  attachments?: ConvexMessageAttachment[];
+  toolCalls?: ToolCallRecord[];
+  metadata?: MessageMetadata;
+};

package/recipes/chatbot/apps/native/src/features/chatbot/utils/chat-telemetry.ts

@@ -0,0 +1,91 @@
+import type { TelemetryMode } from '@/core/config';
+import { getChatTelemetryMode } from '@/core/config/telemetry';
+
+const DEFAULT_SAMPLE_PROBABILITY = 0.1;
+
+type TimelineEntry = {
+  label: string;
+  msFromStart: number;
+  data?: Record<string, unknown>;
+};
+
+export type ChatTelemetryTracker = {
+  readonly event: string;
+  mark: (label: string, data?: Record<string, unknown>) => void;
+  finalize: (status: 'ok' | 'error', extra?: Record<string, unknown>) => void;
+};
+
+function shouldTrack(mode: TelemetryMode, probability: number): boolean {
+  if (mode === 'off') {
+    return false;
+  }
+  if (mode === 'debug') {
+    return true;
+  }
+
+  const clampedProbability = Math.min(Math.max(probability, 0), 1);
+  return Math.random() < clampedProbability;
+}
+
+export function createChatTelemetryTracker(
+  event: string,
+  baseContext: Record<string, unknown>,
+  sampleProbability = DEFAULT_SAMPLE_PROBABILITY,
+): ChatTelemetryTracker | null {
+  const mode = getChatTelemetryMode();
+  if (!shouldTrack(mode, sampleProbability)) {
+    return null;
+  }
+
+  const start = Date.now();
+  const timeline: TimelineEntry[] = [{ label: 'start', msFromStart: 0 }];
+  let finalized = false;
+
+  return {
+    event,
+    mark(label, data) {
+      if (finalized) {
+        return;
+      }
+      const elapsed = Date.now() - start;
+      timeline.push({
+        label,
+        msFromStart: elapsed,
+        data,
+      });
+    },
+    finalize(status, extra) {
+      if (finalized) {
+        return;
+      }
+      finalized = true;
+      const totalMs = Date.now() - start;
+      console.log('[chat][telemetry]', {
+        event,
+        mode,
+        status,
+        totalMs,
+        ...baseContext,
+        ...(extra ?? {}),
+        timeline,
+      });
+    },
+  };
+}
+
+export function logChatTelemetryEvent(
+  event: string,
+  payload: Record<string, unknown>,
+  sampleProbability = DEFAULT_SAMPLE_PROBABILITY,
+) {
+  const mode = getChatTelemetryMode();
+  if (!shouldTrack(mode, sampleProbability)) {
+    return;
+  }
+
+  console.log('[chat][telemetry]', {
+    event,
+    mode,
+    ...payload,
+  });
+}

package/recipes/chatbot/recipe.json

@@ -0,0 +1,22 @@
+{
+  "name": "chatbot",
+  "version": "1.0.0",
+  "description": "AI-powered chat assistant",
+  "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"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/chatbot",
+    "label": "AI Chatbot",
+    "icon": "💬",
+    "color": "#F43F5E"
+  },
+  "target": "native"
+}

package/recipes/image-generator/apps/native/src/app/image-generator/gallery.tsx

@@ -0,0 +1,3 @@
+import ImageGalleryScreen from '@/features/image-generator/app/gallery';
+
+export default ImageGalleryScreen;

package/recipes/image-generator/apps/native/src/app/image-generator/index.tsx

@@ -0,0 +1,3 @@
+import ImageGeneratorScreen from '@/features/image-generator/app';
+
+export default ImageGeneratorScreen;

package/recipes/image-generator/apps/native/src/features/image-generator/app/_layout.tsx

@@ -0,0 +1,25 @@
+import { Stack } from 'expo-router';
+import { translate } from '@/lib';
+
+export default function ImageGeneratorLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: true,
+      }}
+    >
+      <Stack.Screen
+        name="index"
+        options={{
+          title: translate('image_generator.title'),
+        }}
+      />
+      <Stack.Screen
+        name="gallery"
+        options={{
+          title: `${translate('image_generator.gallery_title')} (0)`,
+        }}
+      />
+    </Stack>
+  );
+}