vibefast-cli 0.1.1

package/recipes/chatbot/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/apps/native/src/features/chatbot/hooks/use-smart-scroll-manager.ts

@@ -0,0 +1,207 @@
+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;
+  }, []);
+
+  /**
+   * 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,
+      cancelScroll,
+      scrollToBottom,
+      shouldAutoScroll,
+
+      // Event handlers
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+      onMomentumScrollBegin,
+      onMomentumScrollEnd,
+    }),
+    [
+      scheduleScroll,
+      cancelScroll,
+      scrollToBottom,
+      shouldAutoScroll,
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+      onMomentumScrollBegin,
+      onMomentumScrollEnd,
+    ],
+  );
+}

package/recipes/chatbot/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;

package/recipes/chatbot/apps/native/src/features/chatbot/models/models.ts

@@ -0,0 +1,162 @@
+import type { ModelConfig, Provider } from './types';
+
+export const MODELS: ModelConfig[] = [
+  // Claude Models
+  {
+    id: 'claude-4-sonnet',
+    name: 'Claude 4 Sonnet',
+    provider: 'claude',
+    description: 'Most capable • Great at coding',
+    category: 'premium',
+    capabilities: ['coding', 'reasoning', 'analysis', 'writing'],
+    contextWindow: 200000,
+    speed: 'medium',
+    released: '2024',
+    tags: ['latest', 'most-capable'],
+  },
+  {
+    id: 'claude-4.5-sonnet',
+    name: 'Claude 4.5 Sonnet',
+    provider: 'claude',
+    description: 'Fast & efficient • Perfect for chat',
+    category: 'premium',
+    capabilities: ['chat', 'reasoning', 'coding', 'analysis'],
+    contextWindow: 200000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['balanced', 'chat-optimized'],
+  },
+
+  // OpenAI Models
+  {
+    id: 'gpt-5',
+    name: 'GPT-5',
+    provider: 'openai',
+    description: 'For complex tasks and thinking',
+    category: 'premium',
+    capabilities: ['reasoning', 'coding', 'analysis', 'mathematics'],
+    contextWindow: 200000,
+    speed: 'medium',
+    released: '2024',
+    tags: ['most-capable', 'complex-tasks'],
+  },
+  {
+    id: 'gpt-5-mini',
+    name: 'GPT-5 Mini',
+    provider: 'openai',
+    description: 'Quick thinking & reliable',
+    category: 'free',
+    capabilities: ['chat', 'reasoning', 'coding', 'analysis'],
+    contextWindow: 128000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['balanced', 'efficient'],
+  },
+  {
+    id: 'gpt-5-nano',
+    name: 'GPT-5 Nano',
+    provider: 'openai',
+    description: 'Very fast • Great for basic work',
+    category: 'free',
+    capabilities: ['chat', 'basic-tasks', 'quick-responses'],
+    contextWindow: 16000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['fastest', 'basic-tasks'],
+  },
+  {
+    id: 'gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    provider: 'openai',
+    description: 'Very fast • Great for basic work',
+    category: 'free',
+    capabilities: ['chat', 'basic-tasks', 'quick-responses'],
+    contextWindow: 16000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['fastest', 'basic-tasks'],
+  },
+
+  // Gemini Models
+  {
+    id: 'gemini-2.0-flash',
+    name: 'Gemini 2.0 Flash',
+    provider: 'gemini',
+    description: 'Latest model • Ultra fast',
+    category: 'free',
+    capabilities: ['chat', 'reasoning', 'multimodal', 'coding'],
+    contextWindow: 1000000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['latest', 'multimodal', 'fast'],
+  },
+  {
+    id: 'gemini-2.5-flash',
+    name: 'Gemini 2.5 Flash',
+    provider: 'gemini',
+    description: 'Balanced • Great performance',
+    category: 'free',
+    capabilities: ['chat', 'reasoning', 'multimodal', 'analysis'],
+    contextWindow: 1000000,
+    speed: 'fast',
+    released: '2024',
+    tags: ['balanced', 'multimodal'],
+  },
+  {
+    id: 'gemini-2.5-pro',
+    name: 'Gemini 2.5 Pro',
+    provider: 'gemini',
+    description: 'Advanced reasoning',
+    category: 'premium',
+    capabilities: ['reasoning', 'coding', 'mathematics', 'analysis'],
+    contextWindow: 2000000,
+    speed: 'medium',
+    released: '2024',
+    tags: ['most-capable', 'advanced-reasoning'],
+  },
+];
+
+// Helper to get models by provider
+export const getModelsByProvider = (provider: Provider): ModelConfig[] => {
+  return MODELS.filter((model) => model.provider === provider);
+};
+
+// Helper to get premium models
+export const getPremiumModels = (): ModelConfig[] => {
+  return MODELS.filter((model) => model.category === 'premium');
+};
+
+// Helper to get free models
+export const getFreeModels = (): ModelConfig[] => {
+  return MODELS.filter((model) => model.category === 'free');
+};
+
+// Helper to get model by ID
+export const getModelById = (id: string): ModelConfig | undefined => {
+  return MODELS.find((model) => model.id === id);
+};
+
+// Default models for each provider
+export const DEFAULT_MODELS: Record<Provider, string> = {
+  claude: 'claude-4.5-sonnet',
+  openai: 'gpt-5-nano',
+  gemini: 'gemini-2.0-flash',
+};
+
+// Get default model for a provider
+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;
+};
+
+// Get model description (single source of truth)
+export const getModelDescription = (modelId: string): string => {
+  const model = getModelById(modelId);
+  return model?.description || 'AI model';
+};

package/recipes/chatbot/apps/native/src/features/chatbot/models/providers.ts

@@ -0,0 +1,62 @@
+import type React from 'react';
+
+import { ClaudeIcon } from '@/components/ui/icons/claude';
+import { GeminiIcon } from '@/components/ui/icons/gemini';
+import { OpenaiIcon } from '@/components/ui/icons/openai';
+
+import type { Provider, ProviderConfig } from './types';
+
+export const PROVIDER_CONFIGS: Record<Provider, ProviderConfig> = {
+  claude: {
+    id: 'claude',
+    name: 'claude',
+    displayName: 'Anthropic Claude',
+    icon: ClaudeIcon,
+    defaultModel: 'claude-4.5-sonnet',
+    description: 'Advanced AI assistant with strong reasoning capabilities',
+    website: 'https://anthropic.com',
+    color: '#D97706',
+  },
+  openai: {
+    id: 'openai',
+    name: 'openai',
+    displayName: 'OpenAI',
+    icon: OpenaiIcon,
+    defaultModel: 'gpt-5-nano',
+    description: 'Leading AI research lab and ChatGPT creator',
+    website: 'https://openai.com',
+    color: '#10A37F',
+  },
+  gemini: {
+    id: 'gemini',
+    name: 'gemini',
+    displayName: 'Google Gemini',
+    icon: GeminiIcon,
+    defaultModel: 'gemini-2.0-flash',
+    description: "Google's multimodal AI models",
+    website: 'https://gemini.google.com',
+    color: '#4285F4',
+  },
+};
+
+// Get provider config by ID
+export const getProviderConfig = (provider: Provider): ProviderConfig => {
+  return PROVIDER_CONFIGS[provider];
+};
+
+// Get all providers
+export const getAllProviders = (): Provider[] => {
+  return Object.keys(PROVIDER_CONFIGS) as Provider[];
+};
+
+// Get provider icon component
+export const getProviderIcon = (
+  provider: Provider,
+): React.ComponentType<any> => {
+  return PROVIDER_CONFIGS[provider].icon;
+};
+
+// Get provider display name
+export const getProviderDisplayName = (provider: Provider): string => {
+  return PROVIDER_CONFIGS[provider].displayName;
+};