vibefast-cli 1.1.5 → 1.3.0

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/report-content-modal.tsx

@@ -0,0 +1,188 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+
+import { Button, Input, Modal, Select, Text, useModal } from '@/components/ui';
+import type { OptionType } from '@/components/ui/core/select';
+
+import { REPORT_REASONS, type ReportReason } from '../constants/report-reasons';
+import type { AppMessage } from '../types';
+
+type ReportContentModalProps = {
+  message: AppMessage | null;
+  onSubmit: (reportData: {
+    messageId?: string;
+    reason: ReportReason;
+    details?: string;
+  }) => Promise<boolean>;
+  onCancel: () => void;
+};
+
+/**
+ * Modal component for reporting AI-generated content in chat messages.
+ * Allows users to select a reason and provide additional details for the report.
+ */
+export const ReportContentModal: React.FC<ReportContentModalProps> = ({
+  message,
+  onSubmit,
+  onCancel,
+}) => {
+  const modal = useModal();
+  const [selectedReason, setSelectedReason] = useState<
+    ReportReason | undefined
+  >();
+  const [details, setDetails] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Convert readonly array to mutable array for Select component
+  const reportReasonOptions: OptionType[] = REPORT_REASONS.map((reason) => ({
+    label: reason.label,
+    value: reason.value,
+  }));
+
+  // Handle modal presentation/dismissal without resetting form
+  React.useEffect(() => {
+    if (message) {
+      modal.present();
+    } else {
+      modal.dismiss();
+    }
+  }, [message, modal]);
+
+  // NO automatic form reset - only reset on explicit user actions
+
+  const handleSubmitReport = async () => {
+    if (!message || !selectedReason) {
+      setError('Please select a reason for reporting');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const success = await onSubmit({
+        messageId: message.id,
+        reason: selectedReason,
+        details: details.trim() || undefined,
+      });
+
+      if (success) {
+        // Reset form and close modal
+        setSelectedReason(undefined);
+        setDetails('');
+        onCancel();
+      } else {
+        setError('Failed to submit report. Please try again.');
+      }
+    } catch {
+      setError('An error occurred while submitting the report.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setSelectedReason(undefined);
+    setDetails('');
+    setError(null);
+    onCancel();
+  };
+
+  // Get message preview text (first 100 characters)
+  const getContentPreview = () => {
+    if (!message) return '';
+
+    let text = '';
+    if (typeof message.content === 'string') {
+      text = message.content;
+    } else if (Array.isArray(message.content)) {
+      text = message.content
+        .filter((part) => part.type === 'text')
+        .map((part) => part.text)
+        .join('\n');
+    }
+
+    return text.length > 100 ? `${text.substring(0, 100)}...` : text;
+  };
+
+  return (
+    <Modal
+      ref={modal.ref}
+      title="Report Content"
+      snapPoints={['80%']}
+      onDismiss={handleCancel}
+    >
+      <View className="flex-1 px-4 pb-8">
+        {/* Message Preview */}
+        <View className="mb-6">
+          <Text className="mb-2 text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            Reporting content:
+          </Text>
+          <View className="rounded-lg border border-neutral-200 bg-neutral-50 p-3 dark:border-neutral-600 dark:bg-neutral-800">
+            <Text
+              className="text-sm text-neutral-800 dark:text-neutral-200"
+              numberOfLines={3}
+            >
+              {getContentPreview() || 'Content preview'}
+            </Text>
+          </View>
+        </View>
+
+        {/* Reason Selection */}
+        <View className="mb-4">
+          <Select
+            label="Reason for reporting"
+            placeholder="Select a reason..."
+            options={reportReasonOptions}
+            value={selectedReason}
+            onSelect={(value) => setSelectedReason(value as ReportReason)}
+            testID="report-reason-select"
+          />
+        </View>
+
+        {/* Additional Details */}
+        <View className="mb-4">
+          <Input
+            label="Additional details (optional)"
+            placeholder="Provide more context about why you're reporting this message..."
+            value={details}
+            onChangeText={setDetails}
+            multiline
+            numberOfLines={4}
+            testID="report-details-input"
+            accessibilityHint="Optional field to provide additional context for the report"
+          />
+        </View>
+
+        {/* Error Message */}
+        {error && (
+          <View className="mb-4">
+            <Text className="text-sm text-red-600 dark:text-red-400">
+              {error}
+            </Text>
+          </View>
+        )}
+
+        {/* Action Buttons */}
+        <View className="mt-auto gap-3">
+          <Button
+            label={isLoading ? 'Submitting...' : 'Submit Report'}
+            onPress={handleSubmitReport}
+            disabled={isLoading || !selectedReason}
+            testID="submit-report-button"
+            accessibilityHint="Submit the report for review"
+          />
+          <Button
+            label="Cancel"
+            variant="outline"
+            onPress={handleCancel}
+            disabled={isLoading}
+            testID="cancel-report-button"
+            accessibilityHint="Cancel reporting and close modal"
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+};

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/suggested-messages.tsx

@@ -0,0 +1,67 @@
+import type React from 'react';
+import { useCallback } from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { Pressable, Text } from '@/components/ui';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+type SuggestedMessagesProps = {
+  onSelectMessage: (message: string) => void;
+  visible?: boolean;
+};
+
+const getSuggestedMessages = () => [
+  translate('chatbot.suggested_messages.help_today'),
+  translate('chatbot.suggested_messages.weather'),
+  translate('chatbot.suggested_messages.fun_fact'),
+  translate('chatbot.suggested_messages.brainstorm'),
+  translate('chatbot.suggested_messages.explain_concept'),
+  translate('chatbot.suggested_messages.capabilities'),
+  translate('chatbot.suggested_messages.writing_tips'),
+  translate('chatbot.suggested_messages.solve_problem'),
+];
+
+/**
+ * Component for displaying suggested messages when conversation is empty
+ */
+export const SuggestedMessages: React.FC<SuggestedMessagesProps> = ({
+  onSelectMessage,
+  visible = false,
+}) => {
+  const theme = useThemeConfig();
+
+  const handleSuggestedMessage = useCallback(
+    (message: string) => {
+      onSelectMessage(message);
+    },
+    [onSelectMessage],
+  );
+
+  if (!visible) return null;
+
+  return (
+    <View className="pb-4 pl-4">
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: 8, paddingHorizontal: 4 }}
+      >
+        {getSuggestedMessages().map((message, index) => (
+          <Pressable
+            key={index}
+            onPress={() => handleSuggestedMessage(message)}
+            className="rounded-2xl bg-neutral-200 p-4 dark:border-neutral-700 dark:bg-neutral-800"
+            style={{ borderColor: theme.colors.border }}
+            accessibilityRole="button"
+            accessibilityLabel={`Suggested message: ${message}`}
+          >
+            <Text className="whitespace-nowrap text-base text-neutral-700 dark:text-neutral-300">
+              {message}
+            </Text>
+          </Pressable>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/constants/models.ts

@@ -0,0 +1,20 @@
+// DEPRECATED: This file has been moved to src/features/chatbot/models/
+// Please import from '@/features/chatbot/models' instead
+// This file is kept for backward compatibility
+
+// Type exports for backward compatibility
+export type { ModelType, Provider } from '../models';
+// Re-export from new location for backward compatibility
+export {
+  DEFAULT_MODELS,
+  getAllProviders,
+  getModelById,
+  getModelDescription,
+  getModelsByProvider,
+  getPremiumModels,
+  getProviderDisplayName,
+  getProviderIcon,
+  isPremiumModel,
+  MODELS,
+  PREMIUM_MODELS,
+} from '../models';

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/constants/report-reasons.ts

@@ -0,0 +1,9 @@
+export const REPORT_REASONS = [
+  { label: 'Inaccurate Information', value: 'inaccurate' },
+  { label: 'Offensive Content', value: 'offensive' },
+  { label: 'Harmful Content', value: 'harmful' },
+  { label: 'Spam / Irrelevant', value: 'spam' },
+  { label: 'Other', value: 'other' },
+] as const;
+
+export type ReportReason = (typeof REPORT_REASONS)[number]['value'];

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/hooks/use-attachment-cache.ts

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Attachment type for caching
+ */
+export type AppAttachment = {
+  type: 'image';
+  storageId: string;
+  fileName?: string;
+  mimeType?: string;
+  url?: string;
+};
+
+/**
+ * Hook to manage attachment caching for chat messages.
+ * Prevents image flickering by maintaining stable attachment references across renders.
+ *
+ * Features:
+ * - O(1) lookups using Map data structure
+ * - Persistent cache across re-renders using useRef
+ * - Automatic cache clearing on conversation switch
+ * - Set/get/clear/remove operations with proper TypeScript types
+ *
+ * Requirements addressed:
+ * - 1.1: Display images immediately in optimistic user message
+ * - 1.2: Maintain visibility during AI response streaming
+ * - 1.3: Seamless transition from optimistic to persisted attachments
+ * - 1.4: Preserve display order consistently across render cycles
+ * - 1.5: Clear cache on conversation switch to prevent data bleeding
+ *
+ * @param conversationId - Current conversation ID for cache invalidation
+ * @returns Object containing cache operations and state
+ *
+ * @example
+ * ```tsx
+ * const attachmentCache = useAttachmentCache(conversationId);
+ *
+ * // Store attachments for a message
+ * attachmentCache.set('message-123', [
+ *   { type: 'image', storageId: 'storage-456', fileName: 'photo.jpg' }
+ * ]);
+ *
+ * // Retrieve cached attachments
+ * const cached = attachmentCache.get('message-123');
+ *
+ * // Clear all cached attachments
+ * attachmentCache.clear();
+ *
+ * // Remove specific message's attachments
+ * attachmentCache.remove('message-123');
+ * ```
+ */
+export function useAttachmentCache(conversationId: string | null) {
+  // Use Map for O(1) lookups instead of plain object
+  const cacheRef = useRef<Map<string, AppAttachment[]>>(new Map());
+
+  /**
+   * Store attachments for a specific message ID.
+   * Updates cache only if attachments actually changed (deep comparison).
+   *
+   * @param messageId - Unique message identifier
+   * @param attachments - Array of attachments to cache
+   */
+  const set = useCallback((messageId: string, attachments: AppAttachment[]) => {
+    const cache = cacheRef.current;
+    const existing = cache.get(messageId);
+
+    // Only update if attachments changed
+    if (
+      !existing ||
+      existing.length !== attachments.length ||
+      !existing.every((a, i) => a.storageId === attachments[i]?.storageId)
+    ) {
+      cache.set(messageId, attachments);
+    }
+  }, []);
+
+  /**
+   * Retrieve cached attachments for a specific message ID.
+   *
+   * @param messageId - Unique message identifier
+   * @returns Cached attachments or undefined if not found
+   */
+  const get = useCallback((messageId: string): AppAttachment[] | undefined => {
+    return cacheRef.current.get(messageId);
+  }, []);
+
+  /**
+   * Clear all cached attachments.
+   * Useful when clearing chat or switching conversations.
+   */
+  const clear = useCallback(() => {
+    cacheRef.current.clear();
+  }, []);
+
+  /**
+   * Remove cached attachments for a specific message ID.
+   *
+   * @param messageId - Unique message identifier
+   */
+  const remove = useCallback((messageId: string) => {
+    cacheRef.current.delete(messageId);
+  }, []);
+
+  /**
+   * Get the current cache size (number of cached messages).
+   * Useful for debugging and monitoring.
+   *
+   * @returns Number of messages with cached attachments
+   */
+  const size = useCallback((): number => {
+    return cacheRef.current.size;
+  }, []);
+
+  /**
+   * Check if a message has cached attachments.
+   *
+   * @param messageId - Unique message identifier
+   * @returns True if message has cached attachments
+   */
+  const has = useCallback((messageId: string): boolean => {
+    return cacheRef.current.has(messageId);
+  }, []);
+
+  /**
+   * Clear cache when conversation changes to prevent data bleeding.
+   * This ensures attachments from one conversation don't appear in another.
+   */
+  useEffect(() => {
+    clear();
+  }, [conversationId, clear]);
+
+  return {
+    set,
+    get,
+    clear,
+    remove,
+    size,
+    has,
+    cacheRef,
+  };
+}