vibefast-cli 0.6.2 → 0.7.1

package/2/apps/native/src/features/image-generator/components/image-model-selector.tsx

@@ -1,210 +0,0 @@
-import { Feather } from '@expo/vector-icons';
-import type React from 'react';
-import { ScrollView, View } from 'react-native';
-
-import { Pressable, Text } from '@/components/ui';
-import colors from '@/components/ui/colors';
-import { Modal, useModal } from '@/components/ui/core/overlays/modal';
-import { GeminiIcon } from '@/components/ui/icons/gemini';
-import { OpenaiIcon } from '@/components/ui/icons/openai';
-import { useImageGeneratorSettings } from '@/features/image-generator/hooks/use-image-generator-settings';
-import {
-  DEFAULT_IMAGE_MODEL_ID,
-  getImageModelById,
-  getImageModelsByProvider,
-  getProviderDisplayName,
-  IMAGE_MODEL_PROVIDERS,
-  type ImageModel,
-  type ImageModelId,
-  type ImageProvider,
-} from '@/features/image-generator/models/models';
-import { useThemeConfig } from '@/lib/use-theme-config';
-
-const getProviderIcon = (provider: ImageProvider): React.ComponentType<any> => {
-  switch (provider) {
-    case 'openai':
-      return OpenaiIcon;
-    case 'gemini':
-      return GeminiIcon;
-    default:
-      return OpenaiIcon;
-  }
-};
-
-type ModelSelectorProps = {
-  testID?: string;
-};
-
-/**
- * Image model selector component that mirrors the chatbot model selector UX.
- */
-export const ImageModelSelector: React.FC<ModelSelectorProps> = ({
-  testID = 'image-model-selector',
-}) => {
-  const theme = useThemeConfig();
-  const modal = useModal();
-  const { settings, updateModel } = useImageGeneratorSettings();
-
-  const currentModel =
-    getImageModelById(settings.modelId) ??
-    getImageModelById(DEFAULT_IMAGE_MODEL_ID);
-
-  const getCurrentModelIcon = () => {
-    if (!currentModel) return null;
-    const IconComponent = getProviderIcon(currentModel.provider);
-    return <IconComponent />;
-  };
-
-  const handleModelSelect = (modelId: ImageModelId) => {
-    updateModel(modelId);
-    modal.dismiss();
-  };
-
-  return (
-    <>
-      <Pressable
-        onPress={modal.present}
-        className="flex-row items-center gap-2.5 rounded-full border border-neutral-300/60 bg-neutral-50 px-4 py-3.5 dark:border-neutral-800 dark:bg-neutral-800"
-        style={{ alignSelf: 'flex-start' }}
-        accessibilityLabel={`Current model: ${currentModel?.name ?? 'Select image model'}`}
-        accessibilityHint="Tap to change image generation model"
-        accessibilityRole="button"
-        testID={testID}
-      >
-        <View className="size-4">{getCurrentModelIcon()}</View>
-        <View className="max-w-[140px]">
-          <Text
-            className="text-xs font-medium text-neutral-800 dark:text-neutral-200"
-            numberOfLines={1}
-          >
-            {currentModel?.name ?? 'Select image model'}
-          </Text>
-          {/* <Text className="text-[10px] text-neutral-500 dark:text-neutral-400">
-            {currentModel?.provider
-              ? getProviderDisplayName(currentModel.provider)
-              : getProviderDisplayName("gemini")}
-          </Text> */}
-        </View>
-        <Feather
-          name="chevron-down"
-          size={14}
-          color={theme.dark ? colors.neutral[400] : colors.neutral[500]}
-        />
-      </Pressable>
-
-      <Modal ref={modal.ref} index={0} snapPoints={['70%']}>
-        <ScrollView
-          className="flex-1"
-          showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ paddingHorizontal: 24 }}
-        >
-          <View className="mb-6 mt-2 items-center">
-            <Text className="text-xl font-semibold text-neutral-900 dark:text-neutral-50">
-              Choose an image model
-            </Text>
-            <Text className="mt-1 text-center text-xs text-neutral-500 dark:text-neutral-400">
-              Different models balance quality, speed, and style. Pick the one
-              that fits your workflow.
-            </Text>
-          </View>
-
-          {IMAGE_MODEL_PROVIDERS.map((provider) => {
-            const providerModels = getImageModelsByProvider(provider);
-            if (!providerModels.length) {
-              return null;
-            }
-
-            const ProviderIcon = getProviderIcon(provider);
-
-            return (
-              <View key={provider} className="mb-6">
-                <View className="mb-4 flex-row items-center gap-3">
-                  <View className="size-6">
-                    <ProviderIcon />
-                  </View>
-                  <Text className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
-                    {getProviderDisplayName(provider)}
-                  </Text>
-                </View>
-
-                {providerModels.map((model) => (
-                  <ModelOption
-                    key={model.id}
-                    model={model}
-                    isSelected={settings.modelId === model.id}
-                    onSelect={() => handleModelSelect(model.id)}
-                    testID={`${testID}-${model.id}`}
-                  />
-                ))}
-              </View>
-            );
-          })}
-        </ScrollView>
-      </Modal>
-    </>
-  );
-};
-
-type ModelOptionProps = {
-  model: ImageModel;
-  isSelected: boolean;
-  onSelect: () => void;
-  testID?: string;
-};
-
-const ModelOption: React.FC<ModelOptionProps> = ({
-  model,
-  isSelected,
-  onSelect,
-  testID,
-}) => {
-  const theme = useThemeConfig();
-
-  return (
-    <Pressable
-      onPress={onSelect}
-      className="mb-3 rounded-2xl border p-4"
-      style={{
-        borderColor: isSelected
-          ? theme.dark
-            ? 'rgba(96, 165, 250, 0.7)'
-            : 'rgba(37, 99, 235, 0.7)'
-          : theme.dark
-            ? 'rgba(71, 85, 105, 0.6)'
-            : 'rgba(203, 213, 225, 0.7)',
-        backgroundColor: isSelected
-          ? theme.dark
-            ? 'rgba(37, 99, 235, 0.14)'
-            : 'rgba(219, 234, 254, 0.6)'
-          : theme.dark
-            ? 'rgba(51, 65, 85, 0.35)'
-            : 'rgba(248, 250, 252, 0.5)',
-      }}
-      accessibilityLabel={`Select ${model.name}`}
-      accessibilityHint="Applies this model for future image generations"
-      accessibilityState={{ selected: isSelected }}
-      testID={testID}
-    >
-      <View className="flex-row items-center justify-between">
-        <Text className="text-base font-semibold text-neutral-900 dark:text-neutral-100">
-          {model.name}
-        </Text>
-        <View className="flex-row items-center gap-2">
-          {model.isPremium ? (
-            <Text className="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-400/20 dark:text-amber-200">
-              Premium
-            </Text>
-          ) : null}
-          {model.defaultSize || model.defaultAspectRatio ? (
-            <Text className="text-[10px] font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-              {model.defaultSize ?? model.defaultAspectRatio}
-            </Text>
-          ) : null}
-        </View>
-      </View>
-      <Text className="mt-2 text-xs text-neutral-600 dark:text-neutral-300">
-        {model.description}
-      </Text>
-    </Pressable>
-  );
-};

package/2/apps/native/src/features/image-generator/components/image-placeholder.tsx

@@ -1,26 +0,0 @@
-import { MaterialIcons } from '@expo/vector-icons';
-import type React from 'react';
-import { View } from 'react-native';
-
-import { Text } from '@/components/ui';
-/**
- * Placeholder component to show before first generation
- */
-export const ImagePlaceholder: React.FC = () => (
-  <View
-    className="aspect-square w-full items-center justify-center rounded-lg border-2 border-dashed border-neutral-300 bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800"
-    testID="image-placeholder"
-  >
-    <View className="items-center justify-center">
-      <MaterialIcons
-        name="brush"
-        size={32}
-        color="#9CA3AF"
-        style={{ marginBottom: 8 }}
-      />
-      <Text className="text-center text-neutral-500 dark:text-neutral-400">
-        Generated image will appear here
-      </Text>
-    </View>
-  </View>
-);

package/2/apps/native/src/features/image-generator/hooks/use-image-gallery.ts

@@ -1,71 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import {
-  ImageGalleryService,
-  type SavedImageMetadata,
-} from '@/features/image-generator/services/image-gallery-service';
-
-/**
- * Hook for managing the local image gallery
- */
-export const useImageGallery = () => {
-  const [images, setImages] = useState<SavedImageMetadata[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Load images from storage
-  const loadImages = useCallback(async () => {
-    try {
-      setIsLoading(true);
-      setError(null);
-      const galleryImages = await ImageGalleryService.getAllImages();
-      setImages(galleryImages);
-    } catch (_err) {
-      console.error('Failed to load gallery images:', _err);
-      setError('Failed to load images');
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  // Remove an image from the gallery
-  const removeImage = useCallback(async (imageId: string) => {
-    try {
-      await ImageGalleryService.removeImage(imageId);
-      setImages((prev) => prev.filter((img) => img.id !== imageId));
-    } catch (_err) {
-      console.error('Failed to remove image:', _err);
-      setError('Failed to remove image');
-    }
-  }, []);
-
-  // Clear all images from the gallery
-  const clearGallery = useCallback(async () => {
-    try {
-      await ImageGalleryService.clearGallery();
-      setImages([]);
-    } catch (_err) {
-      console.error('Failed to clear gallery:', _err);
-      setError('Failed to clear gallery');
-    }
-  }, []);
-
-  // Refresh the gallery
-  const refreshGallery = useCallback(() => {
-    loadImages();
-  }, [loadImages]);
-
-  // Load images on mount
-  useEffect(() => {
-    loadImages();
-  }, [loadImages]);
-
-  return {
-    images,
-    isLoading,
-    error,
-    removeImage,
-    clearGallery,
-    refreshGallery,
-  };
-};

package/2/apps/native/src/features/image-generator/hooks/use-image-generator-settings.ts

@@ -1,152 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { defaultCacheService } from '@/core/cache';
-import {
-  DEFAULT_IMAGE_MODEL_ID,
-  getImageModelById,
-  getImageModelsByProvider,
-  IMAGE_MODELS,
-  type ImageModelId,
-  type ImageProvider,
-} from '@/features/image-generator/models/models';
-
-export type ImageGeneratorSettings = {
-  provider: ImageProvider;
-  modelId: ImageModelId;
-};
-
-const CACHE_KEY = 'image_generator_settings_v3';
-
-const DEFAULT_SETTINGS: ImageGeneratorSettings = {
-  provider: 'gemini',
-  modelId: DEFAULT_IMAGE_MODEL_ID,
-};
-
-type RawSettings = Partial<ImageGeneratorSettings> & {
-  provider?: unknown;
-  modelId?: unknown;
-};
-
-const providerHasModel = (
-  provider: ImageProvider,
-  modelId: ImageModelId,
-): boolean => {
-  return getImageModelsByProvider(provider).some(
-    (model) => model.id === modelId,
-  );
-};
-
-const normalizeSettings = (
-  rawSettings: RawSettings | null | undefined,
-): ImageGeneratorSettings => {
-  if (!rawSettings) {
-    return DEFAULT_SETTINGS;
-  }
-
-  const provider =
-    rawSettings.provider === 'openai' || rawSettings.provider === 'gemini'
-      ? rawSettings.provider
-      : DEFAULT_SETTINGS.provider;
-
-  const modelId =
-    typeof rawSettings.modelId === 'string' &&
-    IMAGE_MODELS.some((model) => model.id === rawSettings.modelId) &&
-    providerHasModel(provider, rawSettings.modelId)
-      ? (rawSettings.modelId as ImageModelId)
-      : DEFAULT_IMAGE_MODEL_ID;
-
-  return {
-    provider,
-    modelId,
-  };
-};
-
-/**
- * Hook for managing image generator settings with persistent storage
- */
-export const useImageGeneratorSettings = () => {
-  const [settings, setSettings] =
-    useState<ImageGeneratorSettings>(DEFAULT_SETTINGS);
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  // Load settings from cache on mount
-  useEffect(() => {
-    const loadSettings = async () => {
-      try {
-        const cached =
-          await defaultCacheService.getItem<RawSettings>(CACHE_KEY);
-        setSettings(normalizeSettings(cached));
-      } catch (error) {
-        console.error('Failed to load image generator settings:', error);
-      } finally {
-        setIsLoaded(true);
-      }
-    };
-
-    loadSettings();
-  }, []);
-
-  // Save settings to cache
-  const saveSettings = useCallback(
-    async (newSettings: ImageGeneratorSettings) => {
-      try {
-        const normalized = normalizeSettings(newSettings);
-        await defaultCacheService.setItem(CACHE_KEY, normalized);
-        setSettings(normalized);
-      } catch (error) {
-        console.error('Failed to save image generator settings:', error);
-      }
-    },
-    [],
-  );
-
-  const updateProvider = useCallback(
-    async (provider: ImageProvider) => {
-      const providerModels = getImageModelsByProvider(provider);
-      const defaultModelForProvider =
-        providerModels[0]?.id ?? DEFAULT_IMAGE_MODEL_ID;
-      const newSettings: ImageGeneratorSettings = {
-        provider,
-        modelId: defaultModelForProvider,
-      };
-      await saveSettings(newSettings);
-    },
-    [saveSettings],
-  );
-
-  const updateModel = useCallback(
-    async (model: string) => {
-      if (typeof model !== 'string') {
-        return;
-      }
-
-      const selectedModel = getImageModelById(model as ImageModelId);
-      if (!selectedModel) {
-        console.warn(
-          `[useImageGeneratorSettings] Unsupported model "${model}" received. Reverting to default.`,
-        );
-        await saveSettings(DEFAULT_SETTINGS);
-        return;
-      }
-
-      const provider =
-        settings.provider === selectedModel.provider
-          ? settings.provider
-          : selectedModel.provider;
-
-      const newSettings: ImageGeneratorSettings = {
-        provider,
-        modelId: selectedModel.id,
-      };
-      await saveSettings(newSettings);
-    },
-    [settings.provider, saveSettings],
-  );
-
-  return {
-    settings,
-    isLoaded,
-    updateProvider,
-    updateModel,
-  };
-};

package/2/apps/native/src/features/image-generator/hooks/use-image-generator.ts

@@ -1,93 +0,0 @@
-import type { Id } from '@vibefast/backend/_generated/dataModel';
-import { useState } from 'react';
-import { Alert } from 'react-native';
-
-import { imageGeneratorApi } from '@/api-client/image-generator';
-
-import { getImageModelById } from '../models/models';
-import { useImageGeneratorSettings } from './use-image-generator-settings';
-
-type GeneratedImageData = {
-  imageUri: string;
-  prompt: string;
-  provider: string;
-  model: string;
-  mimeType: string;
-  imageId?: Id<'generatedImages'>;
-  storageId?: Id<'_storage'>;
-};
-
-/**
- * Custom hook for managing image generation state and operations
- */
-export const useImageGenerator = () => {
-  const [prompt, setPrompt] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [generatedImageData, setGeneratedImageData] =
-    useState<GeneratedImageData | null>(null);
-
-  const { settings, isLoaded } = useImageGeneratorSettings();
-
-  const generateImage = imageGeneratorApi.useGenerateImage();
-
-  /**
-   * Generate an image based on the current prompt
-   */
-  const handleGenerateImage = async () => {
-    if (!prompt.trim()) {
-      Alert.alert('Warning', 'Please enter a prompt to generate an image');
-      return;
-    }
-
-    if (!isLoaded) {
-      Alert.alert('Please wait', 'Settings are still loading...');
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const selectedModel = getImageModelById(settings.modelId);
-      const provider = selectedModel?.provider ?? settings.provider;
-      const result = await generateImage({
-        prompt: prompt.trim(),
-        provider,
-        model: selectedModel?.id ?? settings.modelId,
-      });
-
-      console.log('Frontend received result:', {
-        mimeType: result.mimeType,
-        dataUriLength: result.imageDataUri.length,
-        dataUriPreview: result.imageDataUri.substring(0, 100),
-      });
-
-      setGeneratedImageData({
-        imageUri: result.imageDataUri,
-        prompt: result.prompt,
-        provider: result.provider,
-        model: result.model,
-        mimeType: result.mimeType,
-        imageId: result.imageId,
-        storageId: result.storageId,
-      });
-      // Alert.alert('Success', 'Image generated successfully!');
-    } catch (error) {
-      console.error('Image generation error:', error);
-      Alert.alert(
-        'Error',
-        error instanceof Error ? error.message : 'Failed to generate image',
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return {
-    prompt,
-    setPrompt,
-    isLoading,
-    generatedImageData,
-    generatedImageUri: generatedImageData?.imageUri || null, // backward compatibility
-    handleGenerateImage,
-    settings,
-  };
-};

package/2/apps/native/src/features/image-generator/models/models.ts

@@ -1,66 +0,0 @@
-export type ImageProvider = 'openai' | 'gemini';
-
-export type ImageModelId =
-  | 'dall-e-3'
-  | 'gpt-image-1'
-  | 'gemini-2.5-flash-image';
-
-export type ImageModel = {
-  id: ImageModelId;
-  name: string;
-  description: string;
-  provider: ImageProvider;
-  defaultSize?: string;
-  defaultAspectRatio?: string;
-  isPremium?: boolean;
-};
-
-export const IMAGE_MODELS: ImageModel[] = [
-  {
-    id: 'dall-e-3',
-    name: 'DALL·E 3',
-    description:
-      'OpenAI’s flagship model for creative storytelling and illustration.',
-    provider: 'openai',
-    defaultSize: '1024x1024',
-  },
-  {
-    id: 'gpt-image-1',
-    name: 'GPT Image 1',
-    description:
-      'GPT-4o based image model with strong photorealism and typography.',
-    provider: 'openai',
-    defaultSize: '1024x1024',
-  },
-  {
-    id: 'gemini-2.5-flash-image',
-    name: 'Gemini 2.5 Flash Image',
-    description:
-      'Fast and cost-effective image generation ideal for rapid iteration.',
-    provider: 'gemini',
-    defaultSize: '1024x1024',
-  },
-];
-
-export const DEFAULT_IMAGE_MODEL_ID: ImageModelId = 'gemini-2.5-flash-image';
-
-export const getImageModelsByProvider = (provider: ImageProvider) =>
-  IMAGE_MODELS.filter((model) => model.provider === provider);
-
-export const getImageModelById = (id: ImageModelId) =>
-  IMAGE_MODELS.find((model) => model.id === id) ?? null;
-
-export const getProviderDisplayName = (provider: ImageProvider) => {
-  switch (provider) {
-    case 'openai':
-      return 'OpenAI';
-    case 'gemini':
-      return 'Google Gemini';
-    default:
-      return provider;
-  }
-};
-
-export const IMAGE_MODEL_PROVIDERS: ImageProvider[] = Array.from(
-  new Set(IMAGE_MODELS.map((model) => model.provider)),
-) as ImageProvider[];