vibefast-cli 1.1.5 → 1.3.0

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

@@ -0,0 +1,458 @@
+/**
+ * Chat Configuration Hook
+ *
+ * Manages chat state and streaming with Supabase backend.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { chatbotApi } from '@/api-client';
+import type { AgentStatus, AppMessage } from '@/features/chatbot/types';
+import {
+  type ChatTelemetryTracker,
+  createChatTelemetryTracker,
+} from '@/features/chatbot/utils/chat-telemetry';
+
+type AttachmentInput = {
+  type: 'image';
+  storageId: string;
+  fileName?: string;
+  mimeType?: string;
+  url?: string;
+};
+
+type SubmitOptions = {
+  body?: {
+    conversationId?: string;
+    userMessageId?: string;
+    preferredModel?: string;
+    attachments?: AttachmentInput[];
+    text?: string;
+  };
+};
+
+type UseChatConfigOptions = {
+  conversationId: string | null;
+  initialMessages?: AppMessage[];
+  preferredProvider?: string;
+  preferredModel?: string;
+  searchMode?: string;
+  onStreamFailure?: (details: {
+    userMessageId: string | null;
+    text: string;
+    attachments?: AttachmentInput[];
+    errorMessage?: string;
+  }) => void;
+};
+
+const STREAM_TIMEOUT_MS = 60000;
+const STREAM_TIMEOUT_ERROR_MESSAGE =
+  'Request timed out. Please check your connection and try again.';
+
+export const useChatConfig = (options: UseChatConfigOptions) => {
+  const { conversationId } = options;
+
+  const chatStream = chatbotApi.useChatStream();
+
+  const [input, setInput] = useState('');
+  const [messages, setMessages] = useState<AppMessage[]>(
+    options.initialMessages ?? [],
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [streamingMessageId, setStreamingMessageId] = useState<string | null>(
+    null,
+  );
+  const telemetryRef = useRef<ChatTelemetryTracker | null>(null);
+  const firstStreamChunkLoggedRef = useRef(false);
+  const streamTimingRef = useRef<{
+    requestStart?: number;
+    firstChunk?: number;
+  }>({});
+  const pendingSubmissionRef = useRef<{
+    userMessageId: string;
+    text: string;
+    attachments?: AttachmentInput[];
+    placeholderId?: string;
+  } | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [optimisticStatus, setOptimisticStatus] = useState<AgentStatus | null>(
+    null,
+  );
+
+  const finalizeStreamFailure = useCallback(
+    (errorMessage?: string) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+
+      const pending = pendingSubmissionRef.current;
+      const placeholderId =
+        pending?.placeholderId ?? streamingMessageId ?? null;
+
+      console.log('[useChatConfig] finalizeStreamFailure called', {
+        errorMessage,
+        hasPending: !!pending,
+        placeholderId,
+      });
+
+      setMessages((prev) =>
+        prev.filter((message) => {
+          if (pending && message.id === pending.userMessageId) {
+            return false;
+          }
+          if (placeholderId && message.id === placeholderId) {
+            return false;
+          }
+          return true;
+        }),
+      );
+
+      setStreamingMessageId(null);
+      setIsLoading(false);
+      if (errorMessage) {
+        setError(new Error(errorMessage));
+      }
+      if (telemetryRef.current) {
+        telemetryRef.current.mark('stream.failure', {
+          reason: errorMessage ?? 'unknown',
+        });
+        telemetryRef.current.finalize('error', {
+          reason: 'streamFailed',
+          errorMessage: errorMessage ?? null,
+        });
+        telemetryRef.current = null;
+      }
+      firstStreamChunkLoggedRef.current = false;
+      streamTimingRef.current = {};
+      setOptimisticStatus(null);
+
+      const restoredText = pending?.text ?? '';
+      if (pending) {
+        setInput(restoredText);
+      }
+
+      options.onStreamFailure?.({
+        userMessageId: pending?.userMessageId ?? null,
+        text: restoredText,
+        attachments: pending?.attachments,
+        errorMessage,
+      });
+
+      pendingSubmissionRef.current = null;
+    },
+    [options, streamingMessageId],
+  );
+
+  // Reset state when conversation ID changes (not when messages update)
+  useEffect(() => {
+    setMessages(options.initialMessages ?? []);
+    setStreamingMessageId(null);
+    setIsLoading(false);
+    setError(null);
+    if (telemetryRef.current) {
+      telemetryRef.current.finalize('error', { reason: 'conversationChanged' });
+      telemetryRef.current = null;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    firstStreamChunkLoggedRef.current = false;
+    streamTimingRef.current = {};
+    pendingSubmissionRef.current = null;
+    setOptimisticStatus(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [conversationId]); // Only reset on conversation change, not on initialMessages change
+
+  // Sync initial messages from server
+  useEffect(() => {
+    const incoming = options.initialMessages ?? [];
+    if (incoming.length === 0) {
+      return;
+    }
+
+    // Merge server messages without dropping local streaming placeholders
+    setMessages((prev) => {
+      const incomingById = new Map(incoming.map((msg) => [msg.id, msg]));
+      const existingIds = new Set(prev.map((msg) => msg.id));
+
+      const updatedPrev = prev.map((msg) => {
+        const next = incomingById.get(msg.id);
+        if (!next) return msg;
+
+        return {
+          ...msg,
+          ...next,
+          content: next.content ?? msg.content,
+          attachments: next.attachments ?? msg.attachments,
+          toolCalls: next.toolCalls ?? msg.toolCalls,
+          metadata: next.metadata ?? msg.metadata,
+          createdAt: next.createdAt ?? msg.createdAt,
+        };
+      });
+
+      const newMessages = incoming.filter((msg) => !existingIds.has(msg.id));
+      return [...updatedPrev, ...newMessages];
+    });
+  }, [options.initialMessages]);
+
+  const handleInputChange = useCallback((event: any) => {
+    if (typeof event === 'string') {
+      setInput(event);
+      return;
+    }
+
+    const value = event?.target?.value ?? '';
+    setInput(value);
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (
+      event?: React.FormEvent<HTMLFormElement>,
+      submitOptions?: SubmitOptions,
+    ) => {
+      event?.preventDefault?.();
+
+      if (!conversationId) {
+        const err = new Error('Conversation is not initialised.');
+        setError(err);
+        return;
+      }
+
+      const body = submitOptions?.body;
+      const userMessageId = body?.userMessageId;
+      const preferredModelOverride =
+        body?.preferredModel ?? options.preferredModel ?? null;
+
+      if (!userMessageId) {
+        const err = new Error('Missing user message identifier.');
+        setError(err);
+        return;
+      }
+
+      const currentInput = body?.text ?? input;
+
+      // Setup telemetry
+      if (telemetryRef.current) {
+        telemetryRef.current.finalize('error', {
+          reason: 'supersededByNewSubmit',
+        });
+      }
+      const telemetryTracker = createChatTelemetryTracker('chat.handleSubmit', {
+        conversationId,
+        userMessageId,
+        preferredModel: preferredModelOverride,
+      });
+      telemetryRef.current = telemetryTracker;
+      firstStreamChunkLoggedRef.current = false;
+      telemetryTracker?.mark('optimistic.enqueue');
+
+      pendingSubmissionRef.current = {
+        userMessageId,
+        text: currentInput ?? '',
+        attachments: body?.attachments,
+      };
+
+      // Add optimistic user message
+      setMessages((prev) => {
+        if (prev.some((m) => m.id === userMessageId)) {
+          return prev;
+        }
+
+        return [
+          ...prev,
+          {
+            id: userMessageId,
+            role: 'user',
+            content: currentInput ?? '',
+            createdAt: new Date(),
+          },
+        ];
+      });
+      telemetryTracker?.mark('optimistic.userMessageAdded');
+
+      setInput('');
+      setIsLoading(true);
+      setError(null);
+      const requestStart = Date.now();
+      streamTimingRef.current = { requestStart };
+
+      // Create streaming placeholder
+      const tempStreamingId = `stream-${Date.now()}`;
+      setStreamingMessageId(tempStreamingId);
+      pendingSubmissionRef.current = {
+        ...pendingSubmissionRef.current!,
+        placeholderId: tempStreamingId,
+      };
+
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: tempStreamingId,
+          role: 'assistant',
+          content: '',
+          createdAt: new Date(),
+        },
+      ]);
+
+      // Set optimistic status
+      setOptimisticStatus({
+        type: 'thinking',
+        label: 'Thinking…',
+        startedAt: Date.now(),
+      });
+
+      // Set timeout
+      timeoutRef.current = setTimeout(() => {
+        finalizeStreamFailure(STREAM_TIMEOUT_ERROR_MESSAGE);
+      }, STREAM_TIMEOUT_MS);
+
+      try {
+        console.log('[CHATBOT_FRONTEND] 🚀 Starting SSE stream', {
+          conversationId,
+          userMessageId,
+          preferredModel: preferredModelOverride,
+        });
+        telemetryTracker?.mark('stream.started');
+
+        await chatStream.startStream({
+          conversationId,
+          message: currentInput ?? '',
+          attachments: body?.attachments?.map((a) => ({
+            type: a.type,
+            url: a.url ?? a.storageId, // Prefer signed URL, fallback to storage ID
+            mimeType: a.mimeType,
+            name: a.fileName,
+          })),
+          preferredModel: preferredModelOverride ?? undefined,
+          onText: (text) => {
+            // Clear timeout on first chunk
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+              timeoutRef.current = null;
+            }
+
+            if (!firstStreamChunkLoggedRef.current) {
+              const now = Date.now();
+              streamTimingRef.current.firstChunk = now;
+              telemetryTracker?.mark('stream.firstChunk', {
+                latencyMs: requestStart ? now - requestStart : undefined,
+              });
+              firstStreamChunkLoggedRef.current = true;
+            }
+
+            // Update streaming message with accumulated text (replace, don't append)
+            setMessages((prev) => {
+              const idx = prev.findIndex((m) => m.id === tempStreamingId);
+              if (idx === -1) {
+                console.log(
+                  '[useChatConfig] Message not found for streaming:',
+                  tempStreamingId,
+                );
+                return prev;
+              }
+
+              const existing = prev[idx];
+              const updated = [...prev];
+              updated[idx] = {
+                ...existing,
+                content: text, // Replace with full accumulated text
+              };
+              console.log(
+                '[useChatConfig] Updated message content length:',
+                text.length,
+              );
+              return updated;
+            });
+          },
+          onToolCall: (toolCall) => {
+            setOptimisticStatus({
+              type: 'tool',
+              toolName: toolCall.name,
+              label: `Using ${toolCall.name}...`,
+              startedAt: Date.now(),
+            });
+          },
+          onDone: async (messageId) => {
+            console.log('[CHATBOT_FRONTEND] ✅ Stream completed', {
+              messageId,
+            });
+
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+              timeoutRef.current = null;
+            }
+
+            // Replace the temp streaming message with the real message ID
+            // Keep the content so it's visible until refetch arrives
+            setMessages((prev) => {
+              return prev.map((m) => {
+                if (m.id === tempStreamingId) {
+                  return {
+                    ...m,
+                    id: messageId || m.id, // Use real ID from server
+                  };
+                }
+                return m;
+              });
+            });
+
+            setStreamingMessageId(null);
+            setIsLoading(false);
+            setOptimisticStatus(null);
+            pendingSubmissionRef.current = null;
+
+            telemetryTracker?.mark('stream.completed', { messageId });
+            telemetryTracker?.finalize('ok', { messageId });
+            telemetryRef.current = null;
+          },
+          onError: (err) => {
+            console.error('[CHATBOT_FRONTEND] Stream error:', err);
+            finalizeStreamFailure(err.message);
+          },
+        });
+      } catch (err) {
+        console.error('[useChatConfig] Failed to start stream', err);
+        const message =
+          err instanceof Error
+            ? err.message
+            : typeof err === 'string'
+              ? err
+              : undefined;
+        finalizeStreamFailure(
+          message ?? 'Failed to start chat stream. Please try again.',
+        );
+        throw err;
+      }
+    },
+    [
+      conversationId,
+      input,
+      options.preferredModel,
+      chatStream,
+      finalizeStreamFailure,
+    ],
+  );
+
+  const resetMessages = useCallback(() => {
+    setMessages([]);
+    setStreamingMessageId(null);
+    setIsLoading(false);
+    setError(null);
+    setOptimisticStatus(null);
+    chatStream.stopStream();
+  }, [chatStream]);
+
+  return {
+    messages,
+    input,
+    isLoading: isLoading || chatStream.isStreaming,
+    error,
+    handleInputChange,
+    handleSubmit,
+    resetMessages,
+    currentStatus: optimisticStatus,
+  };
+};