vibefast-cli 0.1.1

package/recipes/chatbot/apps/native/src/features/chatbot/hooks/use-chat-handlers.ts

@@ -0,0 +1,359 @@
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Alert, Keyboard } from 'react-native';
+
+import { chatbotApi } from '@/api-client/chatbot';
+import { reportingApi } from '@/api-client/reporting';
+import { useToast } from '@/components/ui/utils';
+import type { ReportReason } from '@/features/chatbot/constants/report-reasons';
+import { useChatConfig } from '@/features/chatbot/hooks/use-chat-config';
+import {
+  type AppAttachment,
+  MessageHandlerService,
+} from '@/features/chatbot/services/message-handler-service';
+import type { AppMessage } from '@/features/chatbot/types';
+
+type UseChatHandlersOptions = {
+  conversationId: string | null;
+  authToken?: string;
+  initialMessages?: AppMessage[];
+  preferredProvider?: string;
+  preferredModel?: string;
+  searchMode?: string;
+};
+
+/**
+ * Hook to manage chat interactions, message handling, and reporting
+ */
+export const useChatHandlers = (options: UseChatHandlersOptions) => {
+  const {
+    conversationId,
+    authToken,
+    initialMessages = [],
+    preferredProvider = 'openai',
+    preferredModel = 'gpt-5-nano',
+    searchMode = 'provider',
+  } = options;
+
+  // console.log('[CHATBOT_FRONTEND] 🎣 useChatHandlers hook 1:', {
+  //   conversationId,
+  //   hasAuthToken: !!authToken,
+  //   initialMessagesCount: initialMessages.length,
+  //   preferredProvider,
+  //   preferredModel,
+  //   searchMode,
+  //   file: 'src/features/chatbot/hooks/use-chat-handlers.ts',
+  //   function: 'useChatHandlers',
+  // });
+
+  const [messageToReport, setMessageToReport] = useState<AppMessage | null>(
+    null,
+  );
+  const lastUserAttachments = React.useRef<AppAttachment[] | undefined>(
+    undefined,
+  );
+
+  // Persist attachments per live message ID to avoid disappearing images
+  const attachmentCacheRef = React.useRef<Record<string, AppAttachment[]>>({});
+
+  const storeUserMessageMutation = chatbotApi.useStoreMessage();
+  const clearConversationMutation = chatbotApi.useClearConversation();
+  const deleteUserMessageMutation = chatbotApi.useDeleteUserMessage();
+  const reportChatMessageMutation = reportingApi.useReportChatMessage();
+  const toast = useToast();
+  const handleInputChangeRef = React.useRef<(text: string) => void>(() => {});
+
+  // Define onStreamFailure BEFORE passing it to useChatConfig
+  const onStreamFailure = useCallback(
+    async (details: {
+      userMessageId: string | null;
+      text: string;
+      attachments?: {
+        type: 'image';
+        storageId: string;
+        fileName?: string;
+        mimeType?: string;
+      }[];
+      errorMessage?: string;
+    }) => {
+      const message =
+        details.errorMessage ?? 'Message failed to send. Please try again.';
+
+      // Show error toast to user
+      toast.error(message);
+
+      // Restore user's input text so they can retry
+      handleInputChangeRef.current(details.text ?? '');
+
+      // Delete the failed user message from backend
+      if (details.userMessageId) {
+        try {
+          await deleteUserMessageMutation({
+            messageId: details.userMessageId as Id<'messages'>,
+          });
+        } catch (error) {
+          console.warn('[useChatHandlers] Failed to remove failed message', {
+            messageId: details.userMessageId,
+            error,
+          });
+        }
+        delete attachmentCacheRef.current[details.userMessageId];
+      }
+
+      // Clear attachment cache
+      lastUserAttachments.current = undefined;
+    },
+    [deleteUserMessageMutation, toast],
+  );
+
+  const chatConfig = useChatConfig({
+    conversationId,
+    authToken,
+    initialMessages,
+    preferredProvider,
+    preferredModel,
+    searchMode,
+    onStreamFailure,
+  });
+
+  handleInputChangeRef.current = chatConfig.handleInputChange;
+
+  const displayMessages = useMemo((): AppMessage[] => {
+    return MessageHandlerService.transformDisplayMessages(
+      chatConfig.messages,
+      initialMessages,
+      lastUserAttachments.current,
+      attachmentCacheRef.current,
+    ) as AppMessage[];
+  }, [initialMessages, chatConfig.messages]);
+
+  // After we compute display messages, cache any attachments by live message ID
+  React.useEffect(() => {
+    if (!displayMessages?.length) return;
+    const cache = attachmentCacheRef.current;
+    let changed = false;
+    for (const m of displayMessages) {
+      if (m.attachments && m.attachments.length) {
+        const existing = cache[m.id];
+        if (!existing || existing.length !== m.attachments.length) {
+          cache[m.id] = m.attachments as AppAttachment[];
+          changed = true;
+        }
+      }
+    }
+    if (changed) {
+      // noop: we mutate ref; next memo pass will read updated cache
+    }
+  }, [displayMessages]);
+
+  // useEffect(() => {
+  // console.log(
+  //   '[Client useChatHandlers] DisplayMessages updated count:',
+  //   displayMessages.length
+  // );
+  // if (displayMessages.length > 0) {
+  //   const lastMsg = displayMessages[displayMessages.length - 1];
+  // if (lastMsg) {
+  //   console.log(
+  //     `[Client useChatHandlers] Last display message (ID: ${lastMsg.id}, Role: ${lastMsg.role}, Content Type: ${typeof lastMsg.content}):`,
+  //     JSON.stringify(lastMsg.content)
+  //   );
+  // }
+  // }
+  // }, [displayMessages]);
+
+  const handleReportMessage = useCallback((message: AppMessage) => {
+    setMessageToReport(message);
+  }, []);
+
+  const handleSubmitReport = useCallback(
+    async (reportData: {
+      messageId?: string;
+      reason: ReportReason;
+      details?: string;
+    }): Promise<boolean> => {
+      if (!reportData.messageId) {
+        console.warn(
+          '[Client useChatHandlers] Report dismissed: missing messageId',
+        );
+        return false;
+      }
+      try {
+        await reportChatMessageMutation({
+          messageId: reportData.messageId,
+          reason: reportData.reason,
+          details: reportData.details,
+        });
+        Alert.alert('Report Submitted', 'Thank you for your report.', [
+          { text: 'OK' },
+        ]);
+        return true;
+      } catch (error) {
+        console.error(
+          '[Client useChatHandlers] Failed to submit report:',
+          error,
+        );
+        Alert.alert(
+          'Report Failed',
+          "We couldn't submit your report. Please try again.",
+          [{ text: 'OK' }],
+        );
+        return false;
+      }
+    },
+    [reportChatMessageMutation],
+  );
+
+  const handleCancelReport = useCallback(() => {
+    setMessageToReport(null);
+  }, []);
+
+  const handleTextInputChange = useCallback(
+    (text: string) => {
+      chatConfig.handleInputChange(text);
+    },
+    [chatConfig],
+  );
+
+  const handleMessageSubmit = useCallback(
+    async (
+      attachmentsFromInputBar?: {
+        type: 'image';
+        storageId: string;
+        fileName?: string;
+        mimeType: string;
+      }[],
+    ) => {
+      // Dismiss keyboard when sending a message
+      Keyboard.dismiss();
+
+      // Read the current input value just before submission to prevent stale closure bugs
+      const currentInput = chatConfig.input;
+      const trimmedInput = currentInput.trim();
+
+      // console.log(
+      //   '[Client useChatHandlers handleMessageSubmit] Attempting to submit. Input:',
+      //   currentInput,
+      //   'Attachments from InputBar:',
+      //   attachmentsFromInputBar,
+      //   'ConvID:',
+      //   conversationId
+      // );
+
+      if (!conversationId) {
+        console.error(
+          '[Client useChatHandlers handleMessageSubmit] Missing conversationId.',
+        );
+        Alert.alert(
+          'Error',
+          'Chat session not fully initialized. Cannot send message.',
+        );
+        return;
+      }
+
+      if (
+        !trimmedInput &&
+        (!attachmentsFromInputBar || attachmentsFromInputBar.length === 0)
+      ) {
+        console.log(
+          '[Client useChatHandlers handleMessageSubmit] Empty message and no attachments. Not submitting.',
+        );
+        return;
+      }
+
+      // Store attachments in ref for optimistic UI display
+      lastUserAttachments.current = attachmentsFromInputBar?.map((att) => ({
+        type: 'image' as const,
+        storageId: att.storageId as Id<'_storage'>,
+        fileName: att.fileName,
+        mimeType: att.mimeType,
+      }));
+
+      // Store user message and retrieve the persisted ID before triggering streaming
+      const storedMessageId = await MessageHandlerService.storeUserMessage({
+        currentInput: trimmedInput,
+        conversationId,
+        attachmentsFromInputBar,
+        storeUserMessageMutation,
+      });
+
+      if (!storedMessageId) {
+        console.error(
+          '[Client useChatHandlers] Unable to store user message; aborting streaming request.',
+        );
+        return;
+      }
+
+      // Submit to AI
+      const dummyFormEvent = {
+        preventDefault: () => {},
+      } as React.FormEvent<HTMLFormElement>;
+
+      try {
+        await chatConfig.handleSubmit(dummyFormEvent, {
+          body: {
+            conversationId: conversationId,
+            preferredModel,
+            userMessageId: storedMessageId,
+            text: trimmedInput,
+            attachments:
+              attachmentsFromInputBar && attachmentsFromInputBar.length > 0
+                ? attachmentsFromInputBar
+                : undefined,
+          },
+        });
+      } catch (submitError) {
+        console.error(
+          '[Client useChatHandlers] Streaming submission failed:',
+          submitError,
+        );
+        return;
+      }
+
+      // console.log(
+      //   '[Client useChatHandlers handleMessageSubmit] chatConfig.handleSubmit called for bot response.'
+      // );
+
+      // Note: We don't clear lastUserAttachments here anymore.
+      // Once initialMessages contains the stored user message (with attachments),
+      // the initialEquivalent?.attachments path takes over naturally.
+    },
+    [conversationId, storeUserMessageMutation, chatConfig, preferredModel],
+  );
+
+  const handleClearChat = useCallback(() => {
+    if (!conversationId) {
+      console.error('[handleClearChat] Missing conversationId');
+      return;
+    }
+
+    MessageHandlerService.clearChat({
+      conversationId,
+      clearConversationMutation,
+      onCleared: () => {
+        chatConfig.resetMessages();
+      },
+    });
+    // Reset local caches immediately for a clean slate
+    lastUserAttachments.current = undefined;
+    attachmentCacheRef.current = {};
+  }, [conversationId, clearConversationMutation, chatConfig]);
+
+  // When conversation changes, reset transient caches to prevent leakage
+  React.useEffect(() => {
+    lastUserAttachments.current = undefined;
+    attachmentCacheRef.current = {};
+  }, [conversationId]);
+
+  return {
+    ...chatConfig,
+    messages: displayMessages,
+    messageToReport,
+    handleReportMessage,
+    handleSubmitReport,
+    handleCancelReport,
+    handleTextInputChange,
+    handleMessageSubmit,
+    handleClearChat,
+  };
+};

package/recipes/chatbot/apps/native/src/features/chatbot/hooks/use-chatbot-settings.ts

@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { defaultCacheService } from '@/core/cache';
+
+import type { Provider } from '../constants/models';
+
+export type SearchMode = 'provider' | 'tavily' | 'none';
+
+type ChatbotSettings = {
+  provider: Provider;
+  model: string;
+  searchMode: SearchMode;
+};
+
+const CACHE_KEY = 'chatbot_settings';
+
+const DEFAULT_SETTINGS: ChatbotSettings = {
+  provider: 'openai',
+  model: 'gpt-4.1-nano',
+  searchMode: 'tavily',
+};
+
+export function useChatbotSettings() {
+  const [settings, setSettings] = useState<ChatbotSettings>(DEFAULT_SETTINGS);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  // Load settings from cache on mount
+  useEffect(() => {
+    const loadSettings = async () => {
+      try {
+        const cachedSettings =
+          await defaultCacheService.getItem<ChatbotSettings>(CACHE_KEY);
+        if (cachedSettings) {
+          setSettings(cachedSettings);
+        }
+      } catch (error) {
+        console.error('[useChatbotSettings] Failed to load settings:', error);
+      } finally {
+        setIsLoaded(true);
+      }
+    };
+
+    loadSettings();
+  }, []);
+
+  // Save settings to cache whenever they change
+  const updateSettings = useCallback(
+    async (newSettings: Partial<ChatbotSettings>) => {
+      const updatedSettings = { ...settings, ...newSettings };
+      setSettings(updatedSettings);
+
+      try {
+        await defaultCacheService.setItem(CACHE_KEY, updatedSettings);
+      } catch (error) {
+        console.error('[useChatbotSettings] Failed to save settings:', error);
+      }
+    },
+    [settings],
+  );
+
+  const updateProvider = useCallback(
+    (provider: Provider) => {
+      updateSettings({ provider });
+    },
+    [updateSettings],
+  );
+
+  const updateModel = useCallback(
+    (model: string) => {
+      updateSettings({ model });
+    },
+    [updateSettings],
+  );
+
+  const updateSearchMode = useCallback(
+    (searchMode: SearchMode) => {
+      updateSettings({ searchMode });
+    },
+    [updateSettings],
+  );
+
+  return {
+    settings,
+    isLoaded,
+    updateProvider,
+    updateModel,
+    updateSearchMode,
+  };
+}

package/recipes/chatbot/apps/native/src/features/chatbot/hooks/use-conversation.ts

@@ -0,0 +1,79 @@
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+import { useEffect, useMemo, useState } from 'react';
+
+import { chatbotApi } from '@/api-client/chatbot';
+import type {
+  AppMessage,
+  ConversationMessageFromDB,
+} from '@/features/chatbot/types';
+
+/**
+ * Hook to manage conversation state and load historical messages
+ */
+export const useConversation = (userId?: Id<'users'>) => {
+  const getOrCreateConversation = chatbotApi.useGetOrCreateConversation();
+  const [conversationId, setConversationId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const initializeConversation = async () => {
+      if (userId && !conversationId) {
+        console.log(
+          '[Client useConversation] Initializing conversation for user:',
+          userId,
+        );
+        try {
+          const defaultConversationId = await getOrCreateConversation({});
+          setConversationId(defaultConversationId);
+          console.log(
+            '[Client useConversation] Conversation ID set:',
+            defaultConversationId,
+          );
+        } catch (error) {
+          console.error(
+            '[Client useConversation] Failed to get/create conversation:',
+            error,
+          );
+        }
+      }
+    };
+    initializeConversation();
+  }, [userId, conversationId, getOrCreateConversation]);
+
+  const historicalMessagesResult = chatbotApi.useListMessages(
+    conversationId ? (conversationId as Id<'conversations'>) : undefined,
+    { numItems: 50, cursor: null },
+  );
+
+  const initialMessages = useMemo((): AppMessage[] => {
+    if (!historicalMessagesResult?.page) {
+      console.log('[Client useConversation] No historical messages.');
+      return [];
+    }
+    console.log(
+      '[Client useConversation] Processing historical messages count:',
+      historicalMessagesResult.page.length,
+    );
+    return historicalMessagesResult.page.reverse().map(
+      (msg: ConversationMessageFromDB): AppMessage => ({
+        id: msg._id,
+        role: msg.authorType === 'user' ? 'user' : 'assistant',
+        content: msg.text || '',
+        createdAt: new Date(msg._creationTime),
+        attachments: msg.attachments,
+        toolCalls: msg.toolCalls,
+        metadata: msg.metadata,
+      }),
+    );
+  }, [historicalMessagesResult]);
+
+  useEffect(() => {
+    if (initialMessages.length > 0) {
+      console.log(
+        '[Client useConversation] Initial AppMessages loaded for useChat:',
+        initialMessages.length,
+      );
+    }
+  }, [initialMessages]);
+
+  return { conversationId, initialMessages };
+};

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