vibefast-cli 1.1.5 → 1.3.0

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

@@ -0,0 +1,429 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Alert, Keyboard } from 'react-native';
+
+import { chatbotApi } from '@/api-client';
+import { getSupabase } from '@/api-client/supabase/client';
+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;
+  initialMessages?: AppMessage[];
+  preferredProvider?: string;
+  preferredModel?: string;
+  searchMode?: string;
+};
+
+/**
+ * Hook to manage chat interactions, message handling, and reporting
+ */
+export const useChatHandlers = (options: UseChatHandlersOptions) => {
+  const {
+    conversationId,
+    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 [isPreflightSending, setIsPreflightSending] = useState(false);
+  const [signedUrlMap, setSignedUrlMap] = useState<Record<string, string>>({});
+  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 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 && conversationId) {
+        try {
+          await deleteUserMessageMutation.mutateAsync({
+            messageId: details.userMessageId,
+            conversationId,
+          });
+        } 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;
+    },
+    [conversationId, deleteUserMessageMutation, toast],
+  );
+
+  const chatConfig = useChatConfig({
+    conversationId,
+    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]);
+
+  // Fetch signed URLs for any attachments missing urls (e.g., historical messages)
+  React.useEffect(() => {
+    const supabase = getSupabase();
+    const missing = new Set<string>();
+
+    for (const msg of displayMessages) {
+      if (!msg.attachments?.length) continue;
+      for (const att of msg.attachments) {
+        if (att.type !== 'image') continue;
+        if (att.url || signedUrlMap[att.storageId]) continue;
+        missing.add(att.storageId);
+      }
+    }
+
+    if (missing.size === 0) return;
+    let cancelled = false;
+
+    (async () => {
+      const updates: Record<string, string> = {};
+      for (const storageId of missing) {
+        const { data, error } = await supabase.storage
+          .from('chat-attachments')
+          .createSignedUrl(storageId, 60 * 60);
+        if (error) {
+          console.warn('[useChatHandlers] Failed to sign attachment', {
+            storageId,
+            error: error.message,
+          });
+          continue;
+        }
+        if (data?.signedUrl) {
+          updates[storageId] = data.signedUrl;
+        }
+      }
+
+      if (!cancelled && Object.keys(updates).length > 0) {
+        setSignedUrlMap((prev) => ({ ...prev, ...updates }));
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [displayMessages, signedUrlMap]);
+
+  const messagesWithSignedUrls = useMemo((): AppMessage[] => {
+    if (!Object.keys(signedUrlMap).length) return displayMessages;
+    return displayMessages.map((msg) => {
+      if (!msg.attachments?.length) return msg;
+      return {
+        ...msg,
+        attachments: msg.attachments.map((att) =>
+          att.type === 'image'
+            ? { ...att, url: att.url ?? signedUrlMap[att.storageId] }
+            : att,
+        ),
+      };
+    });
+  }, [displayMessages, signedUrlMap]);
+
+  // 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 {
+        // TODO: Implement reporting via Supabase when needed
+        console.log('[Client useChatHandlers] Report submitted:', reportData);
+        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;
+      }
+    },
+    [],
+  );
+
+  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;
+        url?: 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;
+      }
+
+      // Clear the input immediately and mark preflight sending so UI responds fast
+      setIsPreflightSending(true);
+      handleInputChangeRef.current('');
+
+      // Store attachments in ref for optimistic UI display
+      lastUserAttachments.current = attachmentsFromInputBar?.map((att) => ({
+        type: 'image' as const,
+        storageId: att.storageId,
+        fileName: att.fileName,
+        mimeType: att.mimeType,
+        url: att.url,
+      }));
+
+      // 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.',
+        );
+        setIsPreflightSending(false);
+        handleInputChangeRef.current(currentInput);
+        lastUserAttachments.current = undefined;
+        return;
+      }
+
+      // Submit to AI
+      const dummyFormEvent = {
+        preventDefault: () => {},
+      } as React.FormEvent<HTMLFormElement>;
+
+      try {
+        const submitPromise = chatConfig.handleSubmit(dummyFormEvent, {
+          body: {
+            conversationId: conversationId,
+            preferredModel,
+            userMessageId: storedMessageId,
+            text: trimmedInput,
+            attachments:
+              attachmentsFromInputBar && attachmentsFromInputBar.length > 0
+                ? attachmentsFromInputBar
+                : undefined,
+          },
+        });
+        // Handover loading state to chatConfig once stream starts
+        setIsPreflightSending(false);
+        await submitPromise;
+      } catch (submitError) {
+        console.error(
+          '[Client useChatHandlers] Streaming submission failed:',
+          submitError,
+        );
+        setIsPreflightSending(false);
+        handleInputChangeRef.current(currentInput);
+        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,
+    isLoading: chatConfig.isLoading || isPreflightSending,
+    messages: messagesWithSignedUrls,
+    messageToReport,
+    handleReportMessage,
+    handleSubmitReport,
+    handleCancelReport,
+    handleTextInputChange,
+    handleMessageSubmit,
+    handleClearChat,
+  };
+};

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

@@ -0,0 +1,90 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { chatbotApi } from '@/api-client';
+import type {
+  AppMessage,
+  MessageAttachment,
+  MessageMetadata,
+  ToolCallRecord,
+} from '@/features/chatbot/types';
+
+/**
+ * Hook to manage conversation state and load historical messages
+ */
+export const useConversation = (userId?: string) => {
+  const getOrCreateConversation = chatbotApi.useGetOrCreateConversation();
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const lastUserIdRef = useRef<string | undefined>(undefined);
+  const initializingRef = useRef(false);
+
+  useEffect(() => {
+    // Reset if user changed
+    if (userId !== lastUserIdRef.current) {
+      lastUserIdRef.current = userId;
+      initializingRef.current = false;
+      setConversationId(null);
+    }
+
+    const initializeConversation = async () => {
+      // Guard: skip if no user, already have conversation, or already initializing
+      if (!userId || conversationId || initializingRef.current) {
+        return;
+      }
+
+      initializingRef.current = true;
+      console.log(
+        '[Client useConversation] Initializing conversation for user:',
+        userId,
+      );
+
+      try {
+        const conversation = await getOrCreateConversation.mutateAsync();
+        if (conversation?.id) {
+          setConversationId(conversation.id);
+          console.log(
+            '[Client useConversation] Conversation ID set:',
+            conversation.id,
+          );
+        } else {
+          // No conversation returned, allow retry
+          initializingRef.current = false;
+        }
+      } catch (error) {
+        console.error(
+          '[Client useConversation] Failed to get/create conversation:',
+          error,
+        );
+        initializingRef.current = false;
+      }
+    };
+
+    initializeConversation();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId, conversationId]);
+
+  const historicalMessagesResult = chatbotApi.useListMessages(conversationId);
+
+  const initialMessages = useMemo((): AppMessage[] => {
+    const pages = historicalMessagesResult.data?.pages;
+    if (!pages || pages.length === 0) {
+      return [];
+    }
+
+    // Flatten all pages and get messages
+    const allMessages = pages.flatMap((page) => page?.messages || []);
+
+    return allMessages.map(
+      (msg): AppMessage => ({
+        id: msg.id,
+        role: msg.author_type === 'user' ? 'user' : 'assistant',
+        content: msg.text || '',
+        createdAt: new Date(msg.created_at),
+        attachments: msg.attachments as MessageAttachment[] | undefined,
+        toolCalls: msg.tool_calls as ToolCallRecord[] | undefined,
+        metadata: msg.metadata as MessageMetadata | undefined,
+      }),
+    );
+  }, [historicalMessagesResult.data]);
+
+  return { conversationId, initialMessages };
+};