vibefast-cli 0.2.4 → 0.3.0

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

@@ -0,0 +1,237 @@
+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 { 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 {
+    prompt,
+    setPrompt,
+    isLoading,
+    generatedImageData,
+    generatedImageUri,
+    handleGenerateImage,
+  } = useImageGenerator();
+
+  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" />
+              </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/2/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/2/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/2/apps/native/src/features/image-generator/components/image-model-selector.tsx

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