vibefast-cli 1.1.5 → 1.2.1

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/hooks/use-image-picker.ts

@@ -0,0 +1,122 @@
+import * as ImagePicker from 'expo-image-picker';
+import { useCallback } from 'react';
+import { Alert } from 'react-native';
+
+// Basic image type without upload state (added later in chat-input-bar)
+export type BasicSelectedImage = {
+  uri: string;
+  type: string;
+  fileName?: string;
+};
+
+export const useImagePicker = () => {
+  const handleImagePicker = useCallback(async (): Promise<
+    BasicSelectedImage[]
+  > => {
+    try {
+      // Request permissions
+      const { status } =
+        await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (status !== 'granted') {
+        Alert.alert(
+          'Permission Required',
+          'Sorry, we need camera roll permissions to upload images.',
+        );
+        return [];
+      }
+
+      // Launch image picker with multiple selection enabled
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsMultipleSelection: true,
+        allowsEditing: false,
+        aspect: [4, 3],
+        quality: 0.8,
+      });
+
+      if (!result.canceled && result.assets && result.assets.length > 0) {
+        return result.assets.map((asset) => ({
+          uri: asset.uri,
+          type: asset.mimeType || 'image/jpeg',
+          fileName: asset.fileName || undefined,
+        }));
+      }
+
+      return [];
+    } catch (error) {
+      console.error('Error picking images:', error);
+      Alert.alert('Error', 'Failed to pick images. Please try again.');
+      return [];
+    }
+  }, []);
+
+  const handleCamera =
+    useCallback(async (): Promise<BasicSelectedImage | null> => {
+      try {
+        // Request permissions
+        const { status } = await ImagePicker.requestCameraPermissionsAsync();
+        if (status !== 'granted') {
+          Alert.alert(
+            'Permission Required',
+            'Sorry, we need camera permissions to take photos.',
+          );
+          return null;
+        }
+
+        // Launch camera
+        const result = await ImagePicker.launchCameraAsync({
+          allowsEditing: true,
+          aspect: [4, 3],
+          quality: 0.8,
+        });
+
+        if (!result.canceled && result.assets[0]) {
+          const asset = result.assets[0];
+          return {
+            uri: asset.uri,
+            type: asset.mimeType || 'image/jpeg',
+            fileName: asset.fileName || undefined,
+          };
+        }
+
+        return null;
+      } catch (error) {
+        console.error('Error taking photo:', error);
+        Alert.alert('Error', 'Failed to take photo. Please try again.');
+        return null;
+      }
+    }, []);
+
+  const showImageSourceOptions = useCallback(
+    (onImagesSelected: (images: BasicSelectedImage[]) => void) => {
+      Alert.alert('Select Image', 'Choose an image source:', [
+        {
+          text: 'Camera',
+          onPress: async () => {
+            const image = await handleCamera();
+            if (image) {
+              onImagesSelected([image]);
+            }
+          },
+        },
+        {
+          text: 'Photo Library',
+          onPress: async () => {
+            const images = await handleImagePicker();
+            if (images.length > 0) {
+              onImagesSelected(images);
+            }
+          },
+        },
+        { text: 'Cancel', style: 'cancel' },
+      ]);
+    },
+    [handleCamera, handleImagePicker],
+  );
+
+  return {
+    handleImagePicker,
+    handleCamera,
+    showImageSourceOptions,
+  };
+};

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/hooks/use-keyboard-coordinator.ts

@@ -0,0 +1,161 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { Keyboard } from 'react-native';
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { runOnUI } from 'react-native-worklets';
+
+/**
+ * Hook to coordinate keyboard animations and padding.
+ * Eliminates race conditions in keyboard show/hide animations.
+ *
+ * Features:
+ * - Smooth 300ms animations using Reanimated
+ * - Cancels pending animations to prevent stacking
+ * - Synchronized timing with message submission
+ * - Automatic cleanup on unmount
+ * - 60fps animations using runOnUI
+ *
+ * Requirements addressed:
+ * - 3.1: Animate padding smoothly over 300ms
+ * - 3.2: Reset padding to zero with synchronized timing
+ * - 3.3: Dismiss keyboard and reset padding atomically on message send
+ * - 3.4: Cancel pending animations to prevent stacking
+ * - 3.5: Prioritize submission action over animation completion
+ *
+ * @returns Object containing animated padding value, reset function, and animated style
+ *
+ * @example
+ * ```tsx
+ * const keyboardCoordinator = useKeyboardCoordinator();
+ *
+ * // Use animated style for keyboard padding
+ * <Animated.View style={keyboardCoordinator.keyboardPadding} />
+ *
+ * // Reset padding when sending message
+ * const handleSubmit = async () => {
+ *   await sendMessage();
+ *   keyboardCoordinator.resetPadding();
+ * };
+ * ```
+ */
+export function useKeyboardCoordinator() {
+  // Animated padding value for smooth transitions
+  const height = useSharedValue(0);
+
+  // Pending timeout reference for cancellation
+  const pendingTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  /**
+   * Cancel any pending animations.
+   * Prevents animation stacking when rapid keyboard events occur.
+   */
+  const cancelPending = useCallback(() => {
+    if (pendingTimeout.current) {
+      clearTimeout(pendingTimeout.current);
+      pendingTimeout.current = null;
+    }
+  }, []);
+
+  /**
+   * Reset padding to zero with smooth animation.
+   * Uses runOnUI for 60fps performance.
+   * Cancels any pending animations before starting new one.
+   */
+  const resetPadding = useCallback(() => {
+    cancelPending();
+
+    runOnUI(() => {
+      'worklet';
+      height.value = withTiming(0, { duration: 300 });
+    })();
+  }, [height, cancelPending]);
+
+  /**
+   * Handle keyboard show event.
+   * Animates padding to match keyboard height.
+   *
+   * @param keyboardHeight - Height of the keyboard in pixels
+   */
+  const onKeyboardShow = useCallback(
+    (keyboardHeight: number) => {
+      cancelPending();
+
+      runOnUI(() => {
+        'worklet';
+        height.value = withTiming(keyboardHeight, { duration: 300 });
+      })();
+    },
+    [height, cancelPending],
+  );
+
+  /**
+   * Handle keyboard hide event.
+   * Resets padding to zero with animation.
+   */
+  const onKeyboardHide = useCallback(() => {
+    resetPadding();
+  }, [resetPadding]);
+
+  /**
+   * Animated style for keyboard padding.
+   * Apply this to a View component to create dynamic spacing.
+   */
+  const keyboardPadding = useAnimatedStyle(() => {
+    return {
+      height: height.value,
+    };
+  }, [height]);
+
+  /**
+   * Set up keyboard event listeners.
+   * Uses keyboardWillShow for instant response (iOS) and keyboardDidShow as fallback (Android).
+   * Automatically cleans up on unmount.
+   */
+  useEffect(() => {
+    // Use 'Will' events for instant response on iOS, 'Did' events as fallback for Android
+    const showListener = Keyboard.addListener('keyboardWillShow', (e) => {
+      onKeyboardShow(e.endCoordinates.height);
+    });
+
+    const hideListener = Keyboard.addListener(
+      'keyboardWillHide',
+      onKeyboardHide,
+    );
+
+    // Fallback for Android (doesn't have 'Will' events)
+    const showListenerAndroid = Keyboard.addListener('keyboardDidShow', (e) => {
+      onKeyboardShow(e.endCoordinates.height);
+    });
+
+    const hideListenerAndroid = Keyboard.addListener(
+      'keyboardDidHide',
+      onKeyboardHide,
+    );
+
+    return () => {
+      showListener.remove();
+      hideListener.remove();
+      showListenerAndroid.remove();
+      hideListenerAndroid.remove();
+      cancelPending();
+    };
+  }, [onKeyboardShow, onKeyboardHide, cancelPending]);
+
+  return {
+    // Animated values
+    height,
+    keyboardPadding,
+
+    // Methods
+    resetPadding,
+    cancelPending,
+    onKeyboardShow,
+    onKeyboardHide,
+
+    // Refs
+    pendingTimeout,
+  };
+}

package/recipes/chatbot-supabase/apps/native/src/features/chatbot/hooks/use-smart-scroll-manager.ts

@@ -0,0 +1,213 @@
+import type { FlashListRef } from '@shopify/flash-list';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+const NEAR_BOTTOM_THRESHOLD = 120;
+const SCROLL_DEBOUNCE_MS = 32;
+
+/**
+ * Smart scroll manager for chat message lists.
+ * Handles auto-scrolling based on user intent and scroll position.
+ *
+ * Features:
+ * - Auto-scroll when user is near bottom (within 120px threshold)
+ * - Cancel auto-scroll when user manually scrolls up
+ * - Always scroll on user message send
+ * - Track drag state to prevent scroll interruption
+ * - Debounced scroll scheduling (32ms) for performance
+ *
+ * Requirements addressed:
+ * - 4.1: Auto-scroll when near bottom (120px threshold)
+ * - 4.2: Don't auto-scroll when user scrolls up to read history
+ * - 4.3: Always scroll to bottom when user sends a message
+ * - 4.4: Maintain scroll position during streaming if reading history
+ * - 4.5: Cancel pending auto-scroll operations when user drags
+ *
+ * @param flashListRef - Reference to the FlashList component
+ * @returns Object containing scroll state refs, methods, and event handlers
+ *
+ * @example
+ * ```tsx
+ * const flashListRef = useRef<FlashListRef<Message> | null>(null);
+ * const scrollManager = useSmartScrollManager(flashListRef);
+ *
+ * // In useEffect for message updates
+ * useEffect(() => {
+ *   scrollManager.handleMessagesUpdate(messages, previousMessageIds, { logTelemetry: true });
+ *   previousMessageIds.current = messages.map(m => m.id);
+ * }, [messages, scrollManager]);
+ *
+ * // In FlashList props
+ * <FlashList
+ *   onScroll={scrollManager.onScroll}
+ *   onScrollBeginDrag={scrollManager.onScrollBeginDrag}
+ *   onScrollEndDrag={scrollManager.onScrollEndDrag}
+ *   onMomentumScrollBegin={scrollManager.onMomentumScrollBegin}
+ *   onMomentumScrollEnd={scrollManager.onMomentumScrollEnd}
+ * />
+ * ```
+ */
+export function useSmartScrollManager<T>(
+  flashListRef: React.RefObject<FlashListRef<T> | null>,
+) {
+  // Track if user is near bottom (within 120px)
+  const isNearBottom = useRef(true);
+
+  // Track if user is actively dragging
+  const isDragging = useRef(false);
+
+  // Pending scroll timeout for debouncing
+  const pendingScroll = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  /**
+   * Cancel any pending scroll operation
+   */
+  const cancelScroll = useCallback(() => {
+    if (pendingScroll.current) {
+      clearTimeout(pendingScroll.current);
+      pendingScroll.current = null;
+    }
+  }, []);
+
+  /**
+   * Scroll to bottom immediately
+   * Includes null check to prevent crashes when component unmounts
+   */
+  const scrollToBottom = useCallback(() => {
+    if (flashListRef.current) {
+      try {
+        flashListRef.current.scrollToEnd({ animated: true });
+        isNearBottom.current = true;
+      } catch (error) {
+        // Silently catch scroll errors (e.g., if list is unmounting)
+        console.warn('[ScrollManager] Scroll failed:', error);
+      }
+    }
+  }, [flashListRef]);
+
+  /**
+   * Schedule scroll to bottom with 32ms debounce
+   * Cancels any pending scroll before scheduling new one
+   * This prevents rapid scroll calls during streaming
+   */
+  const scheduleScroll = useCallback(() => {
+    // If already pending, don't schedule another one
+    if (pendingScroll.current) {
+      return;
+    }
+
+    pendingScroll.current = setTimeout(() => {
+      pendingScroll.current = null;
+      scrollToBottom();
+    }, SCROLL_DEBOUNCE_MS);
+  }, [scrollToBottom]);
+
+  /**
+   * Handle scroll events to track near-bottom state
+   * Updates isNearBottom based on 120px threshold
+   */
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, contentSize, layoutMeasurement } =
+        event.nativeEvent;
+      const visibleBottom = contentOffset.y + layoutMeasurement.height;
+      const distanceFromBottom = Math.max(
+        contentSize.height - visibleBottom,
+        0,
+      );
+
+      isNearBottom.current = distanceFromBottom < NEAR_BOTTOM_THRESHOLD;
+    },
+    [],
+  );
+
+  /**
+   * Handle scroll begin drag - cancel pending scrolls
+   */
+  const onScrollBeginDrag = useCallback(() => {
+    isDragging.current = true;
+    cancelScroll();
+  }, [cancelScroll]);
+
+  /**
+   * Handle scroll end drag - mark dragging as complete
+   */
+  const onScrollEndDrag = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+
+  /**
+   * Handle momentum scroll begin - treat as dragging
+   */
+  const onMomentumScrollBegin = useCallback(() => {
+    isDragging.current = true;
+  }, []);
+
+  /**
+   * Handle momentum scroll end - mark dragging as complete
+   */
+  const onMomentumScrollEnd = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+
+  const markNearBottom = useCallback(() => {
+    isNearBottom.current = true;
+  }, []);
+
+  /**
+   * Determine if should auto-scroll based on current state
+   * Always scrolls on user message send
+   * Otherwise only scrolls if user is near bottom and not dragging
+   */
+  const shouldAutoScroll = useCallback((userSentMessage: boolean): boolean => {
+    if (userSentMessage) {
+      return true;
+    }
+    return !isDragging.current && isNearBottom.current;
+  }, []);
+
+  /**
+   * Cleanup pending scrolls on unmount
+   */
+  useEffect(() => {
+    return () => {
+      cancelScroll();
+    };
+  }, [cancelScroll]);
+
+  // Memoize the return object to prevent unnecessary re-renders
+  return useMemo(
+    () => ({
+      // State refs
+      isNearBottom,
+      isDragging,
+      pendingScroll,
+
+      // Methods
+      scheduleScroll,
+      markNearBottom,
+      cancelScroll,
+      scrollToBottom,
+      shouldAutoScroll,
+
+      // Event handlers
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+      onMomentumScrollBegin,
+      onMomentumScrollEnd,
+    }),
+    [
+      scheduleScroll,
+      markNearBottom,
+      cancelScroll,
+      scrollToBottom,
+      shouldAutoScroll,
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+      onMomentumScrollBegin,
+      onMomentumScrollEnd,
+    ],
+  );
+}

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

@@ -0,0 +1,86 @@
+// Import directly to avoid circular dependencies
+import { DEFAULT_MODELS, MODELS } from './models';
+import type { ModelConfig, ModelId, Provider } from './types';
+
+// Re-export models and model functions
+export { DEFAULT_MODELS, getModelDescription, MODELS } from './models';
+// Re-export provider functions
+export {
+  getAllProviders,
+  getProviderConfig,
+  getProviderDisplayName,
+  getProviderIcon,
+  PROVIDER_CONFIGS,
+} from './providers';
+// Re-export types
+export type {
+  ModelCategory,
+  ModelConfig,
+  ModelId,
+  ModelOptions,
+  ModelSpeed,
+  Provider,
+  ProviderConfig,
+} from './types';
+
+// Additional helper functions
+export const getModelById = (id: string): ModelConfig | undefined => {
+  return MODELS.find((model) => model.id === id);
+};
+
+export const getModelsByProvider = (provider: Provider): ModelConfig[] => {
+  return MODELS.filter((model) => model.provider === provider);
+};
+
+export const getPremiumModels = (): ModelConfig[] => {
+  return MODELS.filter((model) => model.category === 'premium');
+};
+
+export const getFreeModels = (): ModelConfig[] => {
+  return MODELS.filter((model) => model.category === 'free');
+};
+
+export const getDefaultModel = (provider: Provider): ModelConfig => {
+  const defaultId = DEFAULT_MODELS[provider];
+  const model = getModelById(defaultId);
+  if (!model) {
+    throw new Error(
+      `Default model ${defaultId} not found for provider ${provider}`,
+    );
+  }
+  return model;
+};
+
+export const isPremiumModel = (modelId: string): boolean => {
+  const model = getModelById(modelId);
+  return model?.category === 'premium';
+};
+
+export const getAllModelIds = (): string[] => {
+  return MODELS.map((model: any) => model.id);
+};
+
+export const getModelsByCategory = (
+  category: 'premium' | 'free' | 'specialized',
+) => {
+  return MODELS.filter((model: any) => model.category === category);
+};
+
+export const getModelProvider = (modelId: string): string | undefined => {
+  const model = getModelById(modelId);
+  return model?.provider;
+};
+
+// Backward compatibility exports (to match old API) - lazy evaluation
+export const ALL_MODELS = (): string[] => {
+  return MODELS.map((model: any) => model.id);
+};
+
+export const PREMIUM_MODELS = (): string[] => {
+  return MODELS.filter((model: any) => model.category === 'premium').map(
+    (model: any) => model.id,
+  );
+};
+
+// Legacy type for backward compatibility
+export type ModelType = ModelId;