vibefast-cli 1.1.3 → 1.2.1

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

@@ -0,0 +1,217 @@
+import { Stack, useRouter } from 'expo-router';
+import React from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Platform,
+  ScrollView,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  Button,
+  FocusAwareStatusBar,
+  Gallery,
+  Pressable,
+  Text,
+} from '@/components/ui';
+import type { GalleryItem } from '@/components/ui/gallery';
+import { Trash2 } from '@/components/ui/icons';
+import { ImageDetailModal } from '@/features/image-generator/components/image-detail-modal';
+import { useImageGallery } from '@/features/image-generator/hooks/use-image-gallery';
+import type { SavedImageMetadata } from '@/features/image-generator/services/image-gallery-service';
+import { translate } from '@/lib';
+import { useScreenOptions } from '@/lib/hooks/use-navigation-options';
+
+// Set static options to prevent initial flash
+export const unstable_settings = {
+  initialRouteName: 'gallery',
+};
+
+/**
+ * Screen component for displaying the local image gallery
+ */
+export default function ImageGalleryScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const { images, isLoading, error, removeImage, clearGallery } =
+    useImageGallery();
+
+  const [selectedImage, setSelectedImage] =
+    React.useState<SavedImageMetadata | null>(null);
+
+  const screenOptions = useScreenOptions(
+    {
+      title: `${translate('image_generator.gallery_title')} (${images.length})`,
+      headerRight: () =>
+        images.length > 0 ? (
+          <Pressable
+            onPress={handleClearGallery}
+            className="pl-2"
+            style={{ marginRight: 8 }}
+            testID="clear-gallery-button"
+            accessibilityLabel="Clear all images from gallery"
+            accessibilityRole="button"
+          >
+            <Text className="font-medium text-danger-500">
+              <Trash2 color="#ef4444" />
+            </Text>
+          </Pressable>
+        ) : null,
+    },
+    'scrollable',
+  );
+
+  const handleImagePress = (item: GalleryItem) => {
+    const image = images.find((img) => img.id === item.id);
+    if (image) {
+      setSelectedImage(image);
+    }
+  };
+
+  const handleImageLongPress = (item: GalleryItem) => {
+    const image = images.find((img) => img.id === item.id);
+    if (!image) return;
+
+    Alert.alert(
+      translate('image_generator.image_options'),
+      `${translate('image_generator.image_options_description')}\n\nPrompt: ${image.prompt.substring(0, 100)}...\n\nModel:${image.model}`,
+      [
+        { text: translate('common.cancel'), style: 'cancel' },
+        {
+          text: translate('common.delete'),
+          style: 'destructive',
+          onPress: () => {
+            Alert.alert(
+              translate('image_detail.delete_image'),
+              translate('image_detail.delete_image_confirmation'),
+              [
+                { text: translate('common.cancel'), style: 'cancel' },
+                {
+                  text: translate('common.delete'),
+                  style: 'destructive',
+                  onPress: () => removeImage(image.id),
+                },
+              ],
+            );
+          },
+        },
+      ],
+    );
+  };
+
+  // Convert SavedImageMetadata to GalleryItem format
+  const galleryItems: GalleryItem[] = images.map((img) => ({
+    id: img.id,
+    uri: img.localUri,
+    title: img.prompt,
+  }));
+
+  const handleCloseModal = () => {
+    setSelectedImage(null);
+  };
+
+  const handleDeleteFromModal = (imageId: string) => {
+    removeImage(imageId);
+  };
+
+  const handleClearGallery = () => {
+    if (images.length === 0) return;
+
+    Alert.alert(
+      translate('image_generator.clear_gallery'),
+      translate('image_generator.clear_gallery_confirmation'),
+      [
+        { text: translate('common.cancel'), style: 'cancel' },
+        {
+          text: translate('image_generator.clear_all'),
+          style: 'destructive',
+          onPress: clearGallery,
+        },
+      ],
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center bg-white dark:bg-neutral-950">
+        <FocusAwareStatusBar />
+        <ActivityIndicator size="large" />
+        <Text className="mt-4 text-neutral-900 dark:text-neutral-100">
+          {translate('common.loading')}...
+        </Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View className="flex-1 items-center justify-center bg-white p-4 dark:bg-neutral-950">
+        <FocusAwareStatusBar />
+        <Text className="mb-4 text-center text-neutral-900 dark:text-neutral-100">
+          {translate('common.error')}: {error}
+        </Text>
+        <Button
+          onPress={() => router.back()}
+          label={translate('image_generator.go_back')}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View className="flex-1">
+      <FocusAwareStatusBar />
+      <Stack.Screen
+        options={{
+          ...screenOptions,
+          title: `${translate('image_generator.gallery_title')} (${images.length})`,
+        }}
+      />
+
+      {images.length === 0 ? (
+        <View
+          className="flex-1 items-center justify-center p-8"
+          style={{ paddingBottom: insets.bottom + 32 }}
+        >
+          <Text className="mb-4 text-center text-xl font-semibold text-neutral-900 dark:text-neutral-100">
+            {translate('image_generator.no_images_title')}
+          </Text>
+          <Text className="mb-6 text-center text-neutral-500 dark:text-neutral-400">
+            {translate('image_generator.no_images_description')}
+          </Text>
+          <Button
+            onPress={() => router.back()}
+            label={translate('image_generator.generate_images_button')}
+          />
+        </View>
+      ) : (
+        <ScrollView
+          contentContainerStyle={{
+            padding: 16,
+            paddingTop: Platform.OS === 'ios' ? 84 : 16,
+            paddingBottom: insets.bottom + 16,
+          }}
+        >
+          <Gallery
+            items={galleryItems}
+            columns={2}
+            columnsTablet={4}
+            spacing={8}
+            borderRadius={12}
+            aspectRatio={1}
+            onPressItem={handleImagePress}
+            onLongPressItem={handleImageLongPress}
+          />
+        </ScrollView>
+      )}
+
+      <ImageDetailModal
+        image={selectedImage}
+        onDelete={handleDeleteFromModal}
+        onClose={handleCloseModal}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,251 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { router, Stack } from 'expo-router';
+import React, { useState } from 'react';
+import {
+  Keyboard,
+  ScrollView,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+import { reportingApi } from '@/api-client/reporting';
+import {
+  Button,
+  FocusAwareStatusBar,
+  Image,
+  Input,
+  Pressable,
+  Text,
+} from '@/components/ui';
+import { ReportContentModal } from '@/features/chatbot/components/report-content-modal';
+import type { ReportReason } from '@/features/chatbot/constants/report-reasons';
+import { ImageModelSelector } from '@/features/image-generator/components/image-model-selector';
+import { ImagePlaceholder } from '@/features/image-generator/components/image-placeholder';
+import { useImageGenerator } from '@/features/image-generator/hooks/use-image-generator';
+import { useImageGeneratorSettings } from '@/features/image-generator/hooks/use-image-generator-settings';
+import { ImageSaveService } from '@/features/image-generator/services/image-save-service';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function ImageGeneratorScreen() {
+  const {
+    settings,
+    isLoaded: isSettingsLoaded,
+    updateModel,
+  } = useImageGeneratorSettings();
+
+  const {
+    prompt,
+    setPrompt,
+    isLoading,
+    generatedImageData,
+    generatedImageUri,
+    handleGenerateImage,
+  } = useImageGenerator({
+    settings,
+    isSettingsLoaded,
+  });
+
+  const [isReportModalVisible, setIsReportModalVisible] = useState(false);
+  const theme = useThemeConfig();
+  // Use a ref to store a stable ID for the report modal
+  const reportIdRef = React.useRef<string>(`generated_image_${Date.now()}`);
+
+  const reportImageMutation = reportingApi.useReportAIGeneratedImage();
+
+  const handleSaveImage = async () => {
+    if (!generatedImageData) {
+      return;
+    }
+    await ImageSaveService.saveImageToGallery(generatedImageData.imageUri, {
+      prompt: generatedImageData.prompt,
+      provider: generatedImageData.provider,
+      model: generatedImageData.model,
+      remoteImageId: generatedImageData.imageId,
+      storageId: generatedImageData.storageId,
+    });
+  };
+
+  const handleReportImage = () => {
+    setIsReportModalVisible(true);
+  };
+
+  const handleReportSubmit = async (reportData: {
+    reason: ReportReason;
+    details?: string;
+  }) => {
+    if (!generatedImageData) {
+      return false;
+    }
+
+    try {
+      await reportImageMutation({
+        prompt: generatedImageData.prompt,
+        provider: generatedImageData.provider,
+        model: generatedImageData.model,
+        reason: reportData.reason,
+        details: reportData.details,
+        imageId: generatedImageData.imageId,
+        storageId: generatedImageData.storageId,
+      });
+
+      setIsReportModalVisible(false);
+      return true;
+    } catch (error) {
+      console.error('Failed to report image:', error);
+      return false;
+    }
+  };
+
+  const handleReportCancel = () => {
+    setIsReportModalVisible(false);
+  };
+
+  const isGenerateDisabled = isLoading || !prompt.trim();
+
+  // Create a mock message object for the ReportContentModal
+  const mockMessage = React.useMemo(() => {
+    const result =
+      isReportModalVisible && generatedImageData
+        ? {
+            id: generatedImageData.imageId ?? reportIdRef.current,
+            content: `Generated image with prompt: ${generatedImageData.prompt}`,
+            role: 'assistant' as const,
+            createdAt: new Date(),
+          }
+        : null;
+
+    console.log('🚩 [ImageGenerator] mockMessage created:', {
+      id: result?.id,
+      hasContent: !!result?.content,
+      isVisible: isReportModalVisible,
+      hasImageData: !!generatedImageData,
+    });
+
+    return result;
+  }, [isReportModalVisible, generatedImageData]);
+
+  const galleryButton = (
+    <Pressable
+      onPress={() => router.push('/image-generator/gallery')}
+      className="pl-2"
+      style={{ marginRight: 8 }}
+      testID="gallery-button"
+      accessibilityLabel="Open image gallery"
+      accessibilityRole="button"
+    >
+      <MaterialIcons
+        name="photo-library"
+        size={22}
+        color={theme.colors.foreground}
+      />
+    </Pressable>
+  );
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <Stack.Screen
+        options={{
+          title: translate('image_generator.title'),
+          headerRight: () => galleryButton,
+        }}
+      />
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View className="flex-1 px-4 pt-4">
+          <ScrollView
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+            automaticallyAdjustKeyboardInsets={true}
+          >
+            {/* Image Display Area */}
+            <View className="flex-1">
+              <View className="mb-4 flex-row items-center justify-between">
+                <Text className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+                  Generated Image
+                </Text>
+                <ImageModelSelector
+                  testID="image-model-selector-inline"
+                  settings={settings}
+                  onModelChange={updateModel}
+                />
+              </View>
+              {generatedImageUri ? (
+                <Image
+                  source={{ uri: generatedImageUri }}
+                  className="aspect-square w-full rounded-lg"
+                  accessibilityRole="image"
+                  accessibilityLabel="Generated AI image"
+                  testID="generated-image"
+                  contentFit="contain"
+                />
+              ) : (
+                <ImagePlaceholder />
+              )}
+            </View>
+
+            {/* Input and Generate Section */}
+            <View className="gap-2 pt-8">
+              <View>
+                <Text className="mb-2 text-base font-semibold text-neutral-900 dark:text-neutral-100">
+                  Image Prompt
+                </Text>
+                <Input
+                  value={prompt}
+                  onChangeText={setPrompt}
+                  placeholder="Describe the image you want to generate..."
+                  multiline
+                  numberOfLines={3}
+                  textAlignVertical="top"
+                  testID="prompt-input"
+                  editable={!isLoading}
+                  accessibilityLabel="Image generation prompt input"
+                  accessibilityHint="Enter a description for the AI to generate an image"
+                />
+              </View>
+
+              <Button
+                onPress={handleGenerateImage}
+                disabled={isGenerateDisabled}
+                testID="generate-button"
+                accessibilityLabel="Generate image"
+                accessibilityHint="Generate an AI image based on your prompt"
+                accessibilityState={{ disabled: isGenerateDisabled }}
+                label={isLoading ? 'Generating...' : 'Generate Image'}
+                loading={isLoading}
+              />
+
+              {/* Action buttons for generated image */}
+              {generatedImageUri && !isLoading && (
+                <View className="flex-row gap-2">
+                  <Button
+                    onPress={handleSaveImage}
+                    variant="outline"
+                    testID="save-gallery-button"
+                    className="flex-1"
+                    label="Save to Gallery"
+                  />
+                  <Button
+                    onPress={handleReportImage}
+                    variant="outline"
+                    testID="report-image-button"
+                    className="flex-1"
+                    label="Report Image"
+                  />
+                </View>
+              )}
+            </View>
+          </ScrollView>
+          <ReportContentModal
+            message={mockMessage}
+            onSubmit={async (reportData) => {
+              const success = await handleReportSubmit(reportData);
+              return success;
+            }}
+            onCancel={handleReportCancel}
+          />
+        </View>
+      </TouchableWithoutFeedback>
+    </>
+  );
+}

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

@@ -0,0 +1,25 @@
+import type React from 'react';
+
+import { Image, Pressable } from '@/components/ui';
+import type { SavedImageMetadata } from '@/features/image-generator/services/image-gallery-service';
+
+export const GalleryImageItem: React.FC<{
+  image: SavedImageMetadata;
+  onPress(): void;
+  onLongPress(): void;
+}> = ({ image, onPress, onLongPress }) => (
+  <Pressable
+    onPress={onPress}
+    onLongPress={onLongPress}
+    className="w-full"
+    testID={`gallery-image-${image.id}`}
+    accessibilityRole="button"
+    accessibilityLabel={`Generated image from ${image.provider} using ${image.model}`}
+  >
+    <Image
+      source={{ uri: image.localUri }}
+      className="aspect-square w-full rounded-lg"
+      contentFit="cover"
+    />
+  </Pressable>
+);

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}
+      />
+    </>
+  );
+};