vibefast-cli 1.1.5 → 1.3.0

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/components/chat-input-bar.tsx

@@ -0,0 +1,485 @@
+import { AntDesign, Feather } from '@expo/vector-icons';
+import type React from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Alert, View } from 'react-native';
+
+import { sharedApi } from '@/api-client/shared';
+import { getSupabase } from '@/api-client/supabase/client';
+import { Input, Pressable } from '@/components/ui';
+import type { SelectedImage } from '@/features/chatbot/components/image-preview-list';
+import { ImagePreviewList } from '@/features/chatbot/components/image-preview-list';
+import { ModelSelector } from '@/features/chatbot/components/model-selector';
+import { SuggestedMessages } from '@/features/chatbot/components/suggested-messages';
+import type { ModelType } from '@/features/chatbot/constants/models';
+import { DEFAULT_MODELS } from '@/features/chatbot/constants/models';
+import { useImagePicker } from '@/features/chatbot/hooks/use-image-picker';
+import { useFileUploadService } from '@/features/chatbot/services/file-uploader';
+import {
+  createChatTelemetryTracker,
+  logChatTelemetryEvent,
+} from '@/features/chatbot/utils/chat-telemetry';
+import { useEntitlement } from '@/features/payments/hooks/use-entitlement';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+// Helper to generate unique IDs
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+type ChatInputBarProps = {
+  /** Current text input value */
+  input: string;
+  /** Handler for text input changes */
+  onInputChange: (text: string) => void;
+  /** Handler for sending message with text and/or images */
+  onSubmit: (
+    attachments?: {
+      type: 'image';
+      storageId: string;
+      fileName?: string;
+      mimeType?: string;
+      url?: string;
+    }[],
+  ) => Promise<void>;
+  /** Whether the chat is currently loading/sending */
+  isLoading: boolean;
+  /** Whether to show suggested messages (only when conversation is empty) */
+  showSuggestedMessages?: boolean;
+  /** Currently selected AI model */
+  selectedModel?: ModelType;
+  /** Handler for model selection changes */
+  onModelChange?: (model: ModelType) => void;
+  /** Test ID for E2E testing */
+  testID?: string;
+};
+
+/**
+ * Chat input bar component with support for text input and multiple image attachments.
+ * Handles image selection, preview, removal, and upload progress.
+ */
+export const ChatInputBar: React.FC<ChatInputBarProps> = ({
+  input,
+  onInputChange,
+  onSubmit,
+  isLoading,
+  showSuggestedMessages = false,
+  selectedModel = DEFAULT_MODELS.openai,
+  onModelChange,
+  testID = 'chat-input-bar',
+}) => {
+  const theme = useThemeConfig();
+  const fileUploadService = useFileUploadService();
+  const { showImageSourceOptions } = useImagePicker();
+  const deleteFileMutation = sharedApi.useDeleteUploadedFile();
+
+  const [selectedImages, setSelectedImages] = useState<SelectedImage[]>([]);
+  const uploadAbortControllersRef = useRef<Map<string, AbortController>>(
+    new Map(),
+  );
+
+  // Entitlement-based attachment limits
+  const { isEntitled: hasPremium } = useEntitlement('premium_access');
+  const maxImages = hasPremium ? 5 : 1;
+
+  // Update image state helper
+  const updateImageState = useCallback(
+    (
+      id: string,
+      updates:
+        | Partial<SelectedImage>
+        | ((prev: SelectedImage) => SelectedImage),
+    ) => {
+      setSelectedImages((prev) =>
+        prev.map((img) => {
+          if (img.id !== id) return img;
+          return typeof updates === 'function'
+            ? updates(img)
+            : { ...img, ...updates };
+        }),
+      );
+    },
+    [],
+  );
+
+  // Upload image immediately
+  const uploadImageImmediately = useCallback(
+    async (image: SelectedImage) => {
+      const telemetry = createChatTelemetryTracker(
+        'chat.imageUpload.immediate',
+        { imageId: image.id, fileName: image.fileName },
+        0.25,
+      );
+
+      try {
+        // Update to uploading state
+        updateImageState(image.id, {
+          uploadState: { status: 'uploading', progress: 10 },
+        });
+        telemetry?.mark('upload.started');
+
+        // Optimize and upload
+        updateImageState(image.id, {
+          uploadState: { status: 'uploading', progress: 30 },
+        });
+
+        const storageId = await fileUploadService.uploadImage(
+          image.uri,
+          image.fileName,
+          image.mimeType || image.type,
+        );
+
+        updateImageState(image.id, {
+          uploadState: { status: 'uploading', progress: 90 },
+        });
+
+        // Generate a signed URL for immediate display + model input
+        const supabase = getSupabase();
+        const { data: signed, error: signedErr } = await supabase.storage
+          .from('chat-attachments')
+          .createSignedUrl(storageId, 60 * 60); // 1 hour
+        if (signedErr) {
+          console.warn(
+            '[CHATBOT_FRONTEND] Failed to sign chat attachment:',
+            signedErr.message,
+          );
+        }
+
+        // Update to completed state
+        updateImageState(image.id, {
+          uploadState: { status: 'completed', storageId, progress: 100 },
+          storageId,
+          mimeType: image.type,
+          signedUrl: signed?.signedUrl ?? undefined,
+        });
+
+        telemetry?.mark('upload.completed', { storageId });
+        telemetry?.finalize('ok', { storageId });
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : 'Unknown error';
+
+        updateImageState(image.id, {
+          uploadState: { status: 'error', error: errorMessage, progress: 0 },
+        });
+
+        telemetry?.mark('upload.failed', { error: errorMessage });
+        telemetry?.finalize('error', { error: errorMessage });
+
+        console.error('[CHATBOT_FRONTEND] Immediate upload failed:', {
+          error: errorMessage,
+          imageId: image.id,
+        });
+      }
+    },
+    [fileUploadService, updateImageState],
+  );
+
+  const handleImageSelection = useCallback(
+    (newImages: { uri: string; type: string; fileName?: string }[]) => {
+      setSelectedImages((prev) => {
+        const remaining = Math.max(0, maxImages - prev.length);
+        if (remaining <= 0) {
+          Alert.alert(
+            'Limit reached',
+            hasPremium
+              ? 'You can attach up to 5 images per message.'
+              : 'Free plan allows 1 image per message.',
+          );
+          return prev;
+        }
+
+        const toAdd = newImages.slice(0, remaining);
+
+        if (newImages.length > toAdd.length) {
+          Alert.alert(
+            'Some images not added',
+            hasPremium
+              ? 'You reached the 5-image limit for premium.'
+              : 'Free plan allows only 1 image.',
+          );
+        }
+
+        // Convert to SelectedImage with upload state
+        const imagesWithState: SelectedImage[] = toAdd.map((img) => ({
+          ...img,
+          id: generateId(),
+          uploadState: { status: 'pending', progress: 0 },
+        }));
+
+        // Start uploads immediately
+        imagesWithState.forEach((img) => {
+          uploadImageImmediately(img);
+        });
+
+        return [...prev, ...imagesWithState];
+      });
+    },
+    [maxImages, hasPremium, uploadImageImmediately],
+  );
+
+  const removeSelectedImage = useCallback(
+    async (id: string) => {
+      const image = selectedImages.find((img) => img.id === id);
+
+      if (!image) return;
+
+      // If upload completed, delete from storage
+      if (image.uploadState.status === 'completed' && image.storageId) {
+        try {
+          await deleteFileMutation({ storageId: image.storageId });
+        } catch (error) {
+          console.error('[CHATBOT_FRONTEND] Failed to delete file:', error);
+          // Continue with UI removal even if deletion fails
+        }
+      }
+
+      // Remove from state
+      setSelectedImages((prev) => prev.filter((img) => img.id !== id));
+
+      // Clean up abort controller if exists
+      uploadAbortControllersRef.current.delete(id);
+    },
+    [selectedImages, deleteFileMutation],
+  );
+
+  const retryUpload = useCallback(
+    (id: string) => {
+      const image = selectedImages.find((img) => img.id === id);
+      if (!image) return;
+
+      // Reset to pending state
+      updateImageState(id, {
+        uploadState: { status: 'pending', progress: 0 },
+      });
+
+      // Retry upload
+      uploadImageImmediately(image);
+    },
+    [selectedImages, updateImageState, uploadImageImmediately],
+  );
+
+  const handleSubmit = useCallback(async () => {
+    const hasText = input.trim();
+    const hasImages = selectedImages.length > 0;
+
+    if (!hasText && !hasImages) {
+      return;
+    }
+
+    // Check upload states
+    const hasErrors = selectedImages.some(
+      (img) => img.uploadState.status === 'error',
+    );
+    const isUploading = selectedImages.some(
+      (img) =>
+        img.uploadState.status === 'uploading' ||
+        img.uploadState.status === 'pending',
+    );
+
+    if (hasErrors) {
+      Alert.alert(
+        'Upload Error',
+        'Some images failed to upload. Please remove them or retry before sending.',
+      );
+      return;
+    }
+
+    if (isUploading) {
+      Alert.alert(
+        'Upload in Progress',
+        'Please wait for all images to finish uploading.',
+      );
+      return;
+    }
+
+    logChatTelemetryEvent(
+      'chat.inputBar.submitTapped',
+      {
+        hasText: Boolean(hasText),
+        imageCount: selectedImages.length,
+        isLoading,
+      },
+      0.05,
+    );
+
+    try {
+      // Extract completed attachments
+      const attachments = selectedImages
+        .filter((img) => img.uploadState.status === 'completed')
+        .map((img) => ({
+          type: 'image' as const,
+          storageId: img.storageId!,
+          url: img.signedUrl,
+          fileName: img.fileName,
+          mimeType: img.mimeType || img.type,
+        }));
+
+      await onSubmit(attachments.length > 0 ? attachments : undefined);
+
+      logChatTelemetryEvent(
+        'chat.inputBar.submitCompleted',
+        {
+          attachmentsCount: attachments.length,
+          hadText: Boolean(hasText),
+        },
+        0.05,
+      );
+
+      // Clear selected images after successful submission
+      setSelectedImages([]);
+    } catch (error) {
+      console.error('[CHATBOT_FRONTEND] Message submission failed:', {
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+      Alert.alert('Error', 'Failed to send message. Please try again.');
+      logChatTelemetryEvent(
+        'chat.inputBar.submitFailed',
+        {
+          hasText: Boolean(hasText),
+          imageCount: selectedImages.length,
+          error:
+            error instanceof Error
+              ? error.message
+              : 'Unknown error encountered',
+        },
+        0.05,
+      );
+    }
+  }, [input, isLoading, onSubmit, selectedImages]);
+
+  const canSend = useMemo(() => {
+    const hasText = input.trim().length > 0;
+    const hasImages = selectedImages.length > 0;
+    const allUploaded = selectedImages.every(
+      (img) => img.uploadState.status === 'completed',
+    );
+    const hasErrors = selectedImages.some(
+      (img) => img.uploadState.status === 'error',
+    );
+    const isUploading = selectedImages.some(
+      (img) =>
+        img.uploadState.status === 'uploading' ||
+        img.uploadState.status === 'pending',
+    );
+
+    return (
+      (hasText || (hasImages && allUploaded)) &&
+      !isLoading &&
+      !hasErrors &&
+      !isUploading
+    );
+  }, [input, selectedImages, isLoading]);
+
+  return (
+    <View className="">
+      <SuggestedMessages
+        visible={showSuggestedMessages}
+        onSelectMessage={onInputChange}
+      />
+
+      <View
+        className="m-2 mb-4 mt-0 rounded-[30px] border border-neutral-300/60 bg-neutral-50 p-4 dark:border-neutral-700/70 dark:bg-neutral-900"
+        testID={testID}
+      >
+        <ImagePreviewList
+          images={selectedImages}
+          onRemoveImage={removeSelectedImage}
+          onRetryUpload={retryUpload}
+        />
+
+        {/* Model Selector Row */}
+
+        <Input
+          value={input}
+          onChangeText={onInputChange}
+          placeholder="Message..."
+          multiline
+          showClearButton={false}
+          className="max-h-32 min-h-12 rounded-2xl border-none px-4 py-0 text-base dark:text-white"
+          placeholderTextColor={theme.dark ? '#94a3b8' : '#64748b'}
+          accessibilityLabel="Message input"
+          accessibilityHint="Type your message to the AI assistant"
+          testID="message-input"
+        />
+
+        {/* Input Row */}
+        <View className="w-full flex-row items-center justify-between gap-3">
+          <View className="flex-row gap-2">
+            <Pressable
+              onPress={() => {
+                if (selectedImages.length >= maxImages) {
+                  Alert.alert(
+                    'Limit reached',
+                    hasPremium
+                      ? 'You can attach up to 5 images per message.'
+                      : 'Free plan allows 1 image per message.',
+                  );
+                  return;
+                }
+                showImageSourceOptions(handleImageSelection);
+              }}
+              className="mb-2 rounded-full bg-neutral-100 p-3 dark:bg-neutral-800"
+              accessibilityLabel="Attach images"
+              accessibilityHint="Attach images from camera or gallery"
+              accessibilityRole="button"
+              testID="attach-image-button"
+            >
+              <Feather
+                name="paperclip"
+                size={20}
+                color={theme.dark ? '#94a3b8' : '#64748b'}
+              />
+            </Pressable>
+            <View className="flex-row items-center justify-between">
+              <ModelSelector
+                selectedModel={selectedModel}
+                onModelSelect={onModelChange || (() => {})}
+                testID="chat-model-selector"
+              />
+            </View>
+          </View>
+
+          {/* <View className="flex-1">
+            <Input
+              value={input}
+              onChangeText={onInputChange}
+              placeholder="Message..."
+              multiline
+              className="max-h-32 min-h-12 rounded-2xl border border-neutral-300 bg-neutral-50 px-4 py-3 text-base dark:border-neutral-600 dark:bg-neutral-800 dark:text-white"
+              placeholderTextColor={theme.dark ? '#94a3b8' : '#64748b'}
+              accessibilityLabel="Message input"
+              accessibilityHint="Type your message to the AI assistant"
+              testID="message-input"
+            />
+          </View> */}
+
+          <Pressable
+            onPress={handleSubmit}
+            disabled={!canSend}
+            className={`mb-2 size-12 items-center justify-center rounded-full ${
+              canSend
+                ? 'bg-neutral-900 dark:bg-white'
+                : 'bg-neutral-300 dark:bg-neutral-700'
+            }`}
+            accessibilityLabel="Send message"
+            accessibilityHint="Send your message to the AI assistant"
+            testID="send-button"
+          >
+            {isLoading ? (
+              <ActivityIndicator
+                size="small"
+                color={canSend ? (theme.dark ? '#000' : '#fff') : '#94a3b8'}
+              />
+            ) : (
+              <AntDesign
+                name="arrow-up"
+                size={20}
+                color={canSend ? (theme.dark ? '#000' : '#fff') : '#94a3b8'}
+              />
+            )}
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+};