vibefast-cli 1.1.3 → 1.2.1

package/recipes/chatbot-supabase/apps/native/src/api-client/supabase/chatbot.ts

@@ -0,0 +1,515 @@
+/**
+ * Supabase Chatbot API Hooks
+ *
+ * This module provides React hooks for chatbot operations
+ * including conversations, messages, and AI chat streaming.
+ *
+ * Requirements: 13.3
+ */
+
+import { Env } from '@env';
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
+import {
+  clearConversationMessages,
+  createConversation,
+  deleteConversation,
+  deleteUserMessage,
+  getOrCreateDefault,
+  listConversations,
+  listMessages,
+  storeMessage,
+  type StoreMessageInput,
+} from '@vibefast/backend';
+import { useCallback, useRef, useState } from 'react';
+
+import { getSupabase } from './client';
+
+// Query keys for cache management
+export const chatbotQueryKeys = {
+  conversations: ['chatbot', 'conversations'] as const,
+  conversation: (id: string) => ['chatbot', 'conversation', id] as const,
+  messages: (conversationId: string) =>
+    ['chatbot', 'messages', conversationId] as const,
+};
+
+/**
+ * Hook to get or create the default conversation
+ */
+export function useGetOrCreateConversation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      const supabase = getSupabase();
+      const result = await getOrCreateDefault(supabase);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to get or create conversation');
+      }
+
+      return result.conversation;
+    },
+    onSuccess: (data) => {
+      if (data) {
+        queryClient.setQueryData(chatbotQueryKeys.conversation(data.id), data);
+        queryClient.invalidateQueries({
+          queryKey: chatbotQueryKeys.conversations,
+        });
+      }
+    },
+  });
+}
+
+/**
+ * Hook to create a new conversation
+ */
+export function useCreateConversation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ name }: { name?: string } = {}) => {
+      const supabase = getSupabase();
+      const result = await createConversation(supabase, name);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to create conversation');
+      }
+
+      return result.conversation;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: chatbotQueryKeys.conversations,
+      });
+    },
+  });
+}
+
+/**
+ * Hook to list all conversations
+ */
+export function useListConversations() {
+  return useQuery({
+    queryKey: chatbotQueryKeys.conversations,
+    queryFn: async () => {
+      const supabase = getSupabase();
+      const result = await listConversations(supabase);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to list conversations');
+      }
+
+      return result.conversations;
+    },
+  });
+}
+
+/**
+ * Hook to delete a conversation
+ */
+export function useDeleteConversation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ conversationId }: { conversationId: string }) => {
+      const supabase = getSupabase();
+      const result = await deleteConversation(supabase, conversationId);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete conversation');
+      }
+
+      return { success: true };
+    },
+    onSuccess: (_, { conversationId }) => {
+      queryClient.removeQueries({
+        queryKey: chatbotQueryKeys.conversation(conversationId),
+      });
+      queryClient.removeQueries({
+        queryKey: chatbotQueryKeys.messages(conversationId),
+      });
+      queryClient.invalidateQueries({
+        queryKey: chatbotQueryKeys.conversations,
+      });
+    },
+  });
+}
+
+/**
+ * Hook to list messages for a conversation with pagination
+ */
+export function useListMessages(conversationId: string | null | undefined) {
+  return useInfiniteQuery({
+    queryKey: chatbotQueryKeys.messages(conversationId || ''),
+    queryFn: async ({ pageParam }) => {
+      if (!conversationId) {
+        return { messages: [], hasMore: false };
+      }
+
+      const supabase = getSupabase();
+      const result = await listMessages(supabase, conversationId, {
+        limit: 50,
+        cursor: pageParam,
+      });
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to list messages');
+      }
+
+      return { messages: result.messages, hasMore: result.hasMore };
+    },
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage?.hasMore
+        ? lastPage.messages?.[lastPage.messages.length - 1]?.created_at
+        : undefined,
+    enabled: !!conversationId,
+  });
+}
+
+/**
+ * Hook to store a message
+ */
+export function useStoreMessage() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (input: StoreMessageInput) => {
+      const supabase = getSupabase();
+      const result = await storeMessage(supabase, input);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to store message');
+      }
+
+      return result.message;
+    },
+    onSuccess: (_, input) => {
+      queryClient.invalidateQueries({
+        queryKey: chatbotQueryKeys.messages(input.conversationId),
+      });
+    },
+  });
+}
+
+/**
+ * Hook to delete a user message
+ */
+export function useDeleteUserMessage() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      messageId,
+      conversationId,
+    }: {
+      messageId: string;
+      conversationId: string;
+    }) => {
+      const supabase = getSupabase();
+      const result = await deleteUserMessage(supabase, messageId);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete message');
+      }
+
+      return { success: true, conversationId };
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: chatbotQueryKeys.messages(data.conversationId),
+      });
+    },
+  });
+}
+
+/**
+ * Hook to clear all messages in a conversation
+ */
+export function useClearConversation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ conversationId }: { conversationId: string }) => {
+      const supabase = getSupabase();
+      const result = await clearConversationMessages(supabase, conversationId);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to clear conversation');
+      }
+
+      return { success: true, conversationId };
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: chatbotQueryKeys.messages(data.conversationId),
+      });
+    },
+  });
+}
+
+// Chat stream types
+interface ChatStreamOptions {
+  conversationId: string;
+  message: string;
+  attachments?: {
+    type: string;
+    url: string;
+    name?: string;
+  }[];
+  preferredModel?: string;
+  onText?: (text: string) => void;
+  onToolCall?: (toolCall: {
+    name: string;
+    args: Record<string, unknown>;
+  }) => void;
+  onDone?: (messageId: string) => void;
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Hook for chat streaming using Supabase Realtime Broadcast
+ *
+ * Flow:
+ * 1. Generate unique stream ID
+ * 2. Subscribe to broadcast channel
+ * 3. Call edge function with stream ID
+ * 4. Receive chunks via broadcast
+ * 5. Complete when 'done' event received
+ */
+export function useChatStream() {
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamingText, setStreamingText] = useState('');
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const channelRef = useRef<ReturnType<
+    ReturnType<typeof getSupabase>['channel']
+  > | null>(null);
+  const queryClient = useQueryClient();
+
+  const startStream = useCallback(
+    async (options: ChatStreamOptions) => {
+      const {
+        conversationId,
+        message,
+        attachments,
+        preferredModel,
+        onText,
+        onDone,
+        onError,
+      } = options;
+
+      // Cleanup previous
+      if (channelRef.current) {
+        const supabase = getSupabase();
+        supabase.removeChannel(channelRef.current);
+        channelRef.current = null;
+      }
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      setIsStreaming(true);
+      setStreamingText('');
+
+      // Generate unique stream ID
+      const streamId = `${conversationId}-${Date.now()}`;
+      let receivedDone = false;
+
+      try {
+        const supabase = getSupabase();
+        const {
+          data: { session },
+        } = await supabase.auth.getSession();
+
+        if (!session?.access_token) {
+          throw new Error('Not authenticated');
+        }
+
+        // Subscribe to broadcast channel BEFORE calling edge function
+        const channelName = `stream:${streamId}`;
+        console.log('[ChatStream] Subscribing to channel:', channelName);
+
+        const channel = supabase.channel(channelName);
+        channelRef.current = channel;
+
+        // Set up event handlers
+        channel
+          .on('broadcast', { event: 'chunk' }, (payload) => {
+            const { accumulated } = payload.payload as {
+              chunk: string;
+              accumulated: string;
+            };
+            console.log(
+              '[ChatStream] Received chunk, total length:',
+              accumulated.length,
+            );
+            setStreamingText(accumulated);
+            onText?.(accumulated);
+          })
+          .on('broadcast', { event: 'done' }, (payload) => {
+            const { content, msgId } = payload.payload as {
+              content: string;
+              msgId: string;
+            };
+            console.log('[ChatStream] Stream done, messageId:', msgId);
+            receivedDone = true;
+            setStreamingText(content);
+            onText?.(content);
+            onDone?.(msgId);
+            setIsStreaming(false);
+
+            // Cleanup
+            supabase.removeChannel(channel);
+            channelRef.current = null;
+
+            // Invalidate cache
+            queryClient.invalidateQueries({
+              queryKey: chatbotQueryKeys.messages(conversationId),
+            });
+          })
+          .on('broadcast', { event: 'error' }, (payload) => {
+            const { error } = payload.payload as { error: string };
+            console.error('[ChatStream] Received error:', error);
+            onError?.(new Error(error));
+            setIsStreaming(false);
+            supabase.removeChannel(channel);
+            channelRef.current = null;
+          });
+
+        // Wait for subscription to be ready
+        await new Promise<void>((resolve, reject) => {
+          const timeout = setTimeout(
+            () => reject(new Error('Channel subscription timeout')),
+            5000,
+          );
+          channel.subscribe((status) => {
+            if (status === 'SUBSCRIBED') {
+              clearTimeout(timeout);
+              console.log('[ChatStream] Channel subscribed');
+              resolve();
+            } else if (status === 'CHANNEL_ERROR') {
+              clearTimeout(timeout);
+              reject(new Error('Channel subscription failed'));
+            }
+          });
+        });
+
+        // Now call edge function with streamId
+        const streamUrl = `${Env.SUPABASE_URL}/functions/v1/chat-stream`;
+        console.log(
+          '[ChatStream] Calling edge function with streamId:',
+          streamId,
+        );
+
+        const response = await fetch(streamUrl, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${session.access_token}`,
+          },
+          body: JSON.stringify({
+            conversationId,
+            message,
+            attachments,
+            preferredModel,
+            streamId, // Pass streamId so edge function knows which channel to use
+          }),
+          signal: abortController.signal,
+        });
+
+        const result = await response.json();
+        console.log('[ChatStream] Edge function returned:', {
+          success: result.success,
+          messageId: result.messageId,
+        });
+
+        // If we didn't receive done event via broadcast, handle it here
+        if (!receivedDone && result.success) {
+          const content = result.content || '';
+          setStreamingText(content);
+          onText?.(content);
+          onDone?.(result.messageId || 'unknown');
+          setIsStreaming(false);
+
+          if (channelRef.current) {
+            supabase.removeChannel(channelRef.current);
+            channelRef.current = null;
+          }
+
+          queryClient.invalidateQueries({
+            queryKey: chatbotQueryKeys.messages(conversationId),
+          });
+        }
+
+        if (!result.success) {
+          throw new Error(result.error || 'Failed to generate response');
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name === 'AbortError') {
+          return;
+        }
+
+        const err = error instanceof Error ? error : new Error(String(error));
+        console.error('[ChatStream] Error:', err);
+        onError?.(err);
+        setIsStreaming(false);
+
+        // Cleanup
+        if (channelRef.current) {
+          const supabase = getSupabase();
+          supabase.removeChannel(channelRef.current);
+          channelRef.current = null;
+        }
+
+        throw err;
+      }
+    },
+    [queryClient],
+  );
+
+  const stopStream = useCallback(() => {
+    if (channelRef.current) {
+      const supabase = getSupabase();
+      supabase.removeChannel(channelRef.current);
+      channelRef.current = null;
+    }
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    setIsStreaming(false);
+  }, []);
+
+  return {
+    startStream,
+    stopStream,
+    isStreaming,
+    streamingText,
+  };
+}
+
+/**
+ * Supabase Chatbot API object for consistent access pattern
+ */
+export const supabaseChatbotApi = {
+  useGetOrCreateConversation,
+  useCreateConversation,
+  useListConversations,
+  useDeleteConversation,
+  useListMessages,
+  useStoreMessage,
+  useDeleteUserMessage,
+  useClearConversation,
+  useChatStream,
+  queryKeys: chatbotQueryKeys,
+};
+
+export type SupabaseChatbotApi = typeof supabaseChatbotApi;