vibefast-cli 1.1.5 → 1.3.0

package/recipes/image-generator-supabase/apps/native/src/features/image-generator/components/image-detail-modal.tsx

@@ -0,0 +1,215 @@
+import { Ionicons } from '@expo/vector-icons';
+import React, { useMemo, useState } from 'react';
+import { Alert, ScrollView, View } from 'react-native';
+
+import { reportingApi } from '@/api-client/reporting';
+import { Button, Image, Modal, Text, useModal } from '@/components/ui';
+import { ReportContentModal } from '@/features/chatbot/components/report-content-modal';
+import type { ReportReason } from '@/features/chatbot/constants/report-reasons';
+import type { AppMessage } from '@/features/chatbot/types';
+import type { SavedImageMetadata } from '@/features/image-generator/services/image-gallery-service';
+
+type ImageDetailModalProps = {
+  image: SavedImageMetadata | null;
+  onDelete: (imageId: string) => void;
+  onClose: () => void;
+};
+
+/**
+ * Modal component for displaying detailed image information
+ */
+export const ImageDetailModal: React.FC<ImageDetailModalProps> = ({
+  image,
+  onDelete,
+  onClose,
+}) => {
+  const { ref, dismiss } = useModal();
+  const [isReportModalVisible, setIsReportModalVisible] = useState(false);
+
+  const reportImageMutation = reportingApi.useReportAIGeneratedImage();
+
+  React.useEffect(() => {
+    if (image) {
+      ref.current?.present();
+    } else {
+      ref.current?.dismiss();
+    }
+  }, [image, ref]);
+
+  const handleDelete = () => {
+    if (!image) return;
+
+    Alert.alert('Delete Image', 'Are you sure you want to delete this image?', [
+      { text: 'Cancel', style: 'cancel' },
+      {
+        text: 'Delete',
+        style: 'destructive',
+        onPress: () => {
+          onDelete(image.id);
+          dismiss();
+          onClose();
+        },
+      },
+    ]);
+  };
+
+  const handleReport = () => {
+    console.log('🚩 [ImageDetailModal] Report button pressed!');
+    setIsReportModalVisible(true);
+  };
+
+  const handleReportSubmit = async (reportData: {
+    reason: ReportReason;
+    details?: string;
+  }) => {
+    console.log('🚩 [ImageDetailModal] Report submit called with:', reportData);
+    if (!image) {
+      console.log('🚩 [ImageDetailModal] No image available for reporting');
+      return false;
+    }
+
+    try {
+      console.log('🚩 [ImageDetailModal] Submitting report for image:', {
+        prompt: image.prompt,
+        provider: image.provider,
+        model: image.model,
+      });
+
+      await reportImageMutation({
+        prompt: image.prompt,
+        provider: image.provider,
+        model: image.model,
+        reason: reportData.reason,
+        details: reportData.details,
+        imageId: image.remoteImageId,
+        storageId: image.storageId,
+      });
+
+      console.log('🚩 [ImageDetailModal] Report submitted successfully');
+      setIsReportModalVisible(false);
+      Alert.alert(
+        'Report Submitted',
+        'Thank you for your report. It has been submitted for review.',
+      );
+      return true;
+    } catch (error) {
+      console.error('🚩 [ImageDetailModal] Failed to report image:', error);
+      return false;
+    }
+  };
+
+  const handleReportCancel = () => {
+    console.log('🚩 [ImageDetailModal] Report cancelled');
+    setIsReportModalVisible(false);
+  };
+
+  const handleModalDismiss = () => {
+    onClose();
+  };
+
+  const formatDate = (timestamp: number): string => {
+    return new Date(timestamp).toLocaleString();
+  };
+
+  const reportMessage = useMemo<AppMessage | null>(() => {
+    if (!isReportModalVisible || !image) {
+      return null;
+    }
+    return {
+      id: image.remoteImageId ?? `gallery_image_${image.id}`,
+      role: 'assistant',
+      content: `Image generated with prompt: ${image.prompt}`,
+      createdAt: new Date(image.savedAt),
+    };
+  }, [image, isReportModalVisible]);
+
+  if (!image) return null;
+
+  return (
+    <>
+      <Modal
+        ref={ref}
+        snapPoints={['90%']}
+        title="Image Details"
+        onDismiss={handleModalDismiss}
+      >
+        <ScrollView className="flex-1 px-4 pb-4">
+          <View className="mb-6">
+            <View className="aspect-square w-full overflow-hidden rounded-lg bg-neutral-100 dark:bg-neutral-800">
+              <Image
+                source={{ uri: image.localUri }}
+                className="size-full"
+                contentFit="contain"
+              />
+            </View>
+          </View>
+
+          <View className="mb-4">
+            <Text className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+              Prompt
+            </Text>
+            <Text className="text-base text-neutral-700 dark:text-neutral-300">
+              {image.prompt}
+            </Text>
+          </View>
+
+          <View className="mb-4">
+            <Text className="mb-2 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+              Details
+            </Text>
+            <View className="gap-2">
+              <View className="flex-row justify-between">
+                <Text className="text-neutral-600 dark:text-neutral-400">
+                  Provider:
+                </Text>
+                <Text className="font-medium text-neutral-900 dark:text-neutral-100">
+                  {image.provider}
+                </Text>
+              </View>
+              <View className="flex-row justify-between">
+                <Text className="text-neutral-600 dark:text-neutral-400">
+                  Model:
+                </Text>
+                <Text className="font-medium text-neutral-900 dark:text-neutral-100">
+                  {image.model}
+                </Text>
+              </View>
+              <View className="flex-row justify-between">
+                <Text className="text-neutral-600 dark:text-neutral-400">
+                  Created:
+                </Text>
+                <Text className="font-medium text-neutral-900 dark:text-neutral-100">
+                  {formatDate(image.savedAt)}
+                </Text>
+              </View>
+            </View>
+          </View>
+
+          <View className="gap-3 pt-4">
+            <Button
+              variant="outline"
+              label="Report Image"
+              leftIcon={<Ionicons name="flag" size={16} color="#000000" />}
+              onPress={handleReport}
+              testID="report-image-button"
+              accessibilityLabel="Report this image for inappropriate content"
+            />
+            <Button
+              variant="destructive"
+              label="Delete Image"
+              onPress={handleDelete}
+              testID="delete-image-button"
+              accessibilityLabel="Delete this image"
+            />
+          </View>
+        </ScrollView>
+      </Modal>
+
+      <ReportContentModal
+        message={reportMessage}
+        onSubmit={handleReportSubmit}
+        onCancel={handleReportCancel}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,216 @@
+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 type { ImageGeneratorSettings } 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;
+  settings: ImageGeneratorSettings;
+  onModelChange: (modelId: ImageModelId) => Promise<void> | void;
+};
+
+/**
+ * Image model selector component that mirrors the chatbot model selector UX.
+ */
+export const ImageModelSelector: React.FC<ModelSelectorProps> = ({
+  testID = 'image-model-selector',
+  settings,
+  onModelChange,
+}) => {
+  const theme = useThemeConfig();
+  const modal = useModal();
+
+  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 = async (modelId: ImageModelId) => {
+    try {
+      await onModelChange(modelId);
+    } finally {
+      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/recipes/image-generator-supabase/apps/native/src/features/image-generator/components/image-placeholder.tsx

@@ -0,0 +1,26 @@
+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/recipes/image-generator-supabase/apps/native/src/features/image-generator/hooks/use-image-gallery.ts

@@ -0,0 +1,71 @@
+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/recipes/image-generator-supabase/apps/native/src/features/image-generator/hooks/use-image-generator-settings.ts

@@ -0,0 +1,152 @@
+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,
+  };
+};