vibefast-cli 0.1.1

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

@@ -0,0 +1,664 @@
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { chatbotApi } from '@/api-client/chatbot';
+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;
+};
+
+type SubmitOptions = {
+  body?: {
+    conversationId?: string;
+    userMessageId?: string;
+    preferredModel?: string;
+    attachments?: AttachmentInput[];
+    text?: string;
+  };
+};
+
+type UseChatConfigOptions = {
+  conversationId: string | null;
+  authToken?: string;
+  initialMessages?: AppMessage[];
+  preferredProvider?: string;
+  preferredModel?: string;
+  searchMode?: string;
+  onStreamFailure?: (details: {
+    userMessageId: string | null;
+    text: string;
+    attachments?: AttachmentInput[];
+    errorMessage?: string;
+  }) => void;
+};
+
+const STREAM_TIMEOUT_INITIAL_MS = 45000;
+const STREAM_TIMEOUT_POLL_MS = 15000;
+const STREAM_TIMEOUT_MAX_MS = 180000;
+const STREAM_TIMEOUT_ERROR_MESSAGE =
+  'Request timed out. Please check your connection and try again.';
+
+const extractStreamText = (streamBody: unknown): string => {
+  if (!streamBody) return '';
+  if (typeof streamBody === 'string') {
+    return streamBody;
+  }
+
+  if (typeof streamBody === 'object') {
+    const body = streamBody as Record<string, unknown>;
+    if (typeof body.text === 'string') return body.text;
+    if (typeof body.body === 'string') return body.body;
+  }
+
+  return '';
+};
+
+export const useChatConfig = (options: UseChatConfigOptions) => {
+  const { conversationId } = options;
+
+  const startAgentStream = chatbotApi.useStartAgentStream();
+
+  const sessionData = chatbotApi.useAgentSession(
+    conversationId ? (conversationId as Id<'conversations'>) : undefined,
+  );
+
+  const [input, setInput] = useState('');
+  const [messages, setMessages] = useState<AppMessage[]>(
+    options.initialMessages ?? [],
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [activeStreamId, setActiveStreamId] = useState<string | 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 lastErrorSeenRef = useRef<number | null>(null);
+  const errorTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const latestStatusRef = useRef<AgentStatus | null>(null);
+  const [optimisticStatus, setOptimisticStatus] = useState<AgentStatus | null>(
+    null,
+  );
+
+  const finalizeStreamFailure = useCallback(
+    (errorMessage?: string) => {
+      // Clear any pending error timeout
+      if (errorTimeoutRef.current) {
+        clearTimeout(errorTimeoutRef.current);
+        errorTimeoutRef.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);
+      setActiveStreamId(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 = {};
+      latestStatusRef.current = null;
+      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],
+  );
+
+  const scheduleStreamTimeoutCheck = useCallback(
+    (delayMs: number) => {
+      if (errorTimeoutRef.current) {
+        clearTimeout(errorTimeoutRef.current);
+      }
+
+      errorTimeoutRef.current = setTimeout(() => {
+        const now = Date.now();
+        const requestStart = streamTimingRef.current.requestStart ?? now;
+        const elapsed = now - requestStart;
+        const status = latestStatusRef.current;
+        const isSessionActive =
+          status?.type === 'thinking' || status?.type === 'tool';
+        const withinMaxWait = elapsed < STREAM_TIMEOUT_MAX_MS;
+
+        if (isSessionActive && withinMaxWait) {
+          scheduleStreamTimeoutCheck(STREAM_TIMEOUT_POLL_MS);
+          return;
+        }
+
+        console.warn('[useChatConfig] Stream timeout - no data received', {
+          elapsedMs: elapsed,
+          statusType: status?.type ?? 'none',
+        });
+        finalizeStreamFailure(STREAM_TIMEOUT_ERROR_MESSAGE);
+      }, delayMs);
+    },
+    [finalizeStreamFailure],
+  );
+
+  useEffect(() => {
+    setMessages(options.initialMessages ?? []);
+    setActiveStreamId(null);
+    setStreamingMessageId(null);
+    setIsLoading(false);
+    setError(null);
+    if (telemetryRef.current) {
+      telemetryRef.current.finalize('error', { reason: 'conversationChanged' });
+      telemetryRef.current = null;
+    }
+    if (errorTimeoutRef.current) {
+      clearTimeout(errorTimeoutRef.current);
+      errorTimeoutRef.current = null;
+    }
+    firstStreamChunkLoggedRef.current = false;
+    streamTimingRef.current = {};
+    pendingSubmissionRef.current = null;
+    lastErrorSeenRef.current = null;
+    setOptimisticStatus(null);
+  }, [conversationId, options.initialMessages]);
+
+  useEffect(() => {
+    if (sessionData) {
+      setActiveStreamId(sessionData.activeStreamId ?? null);
+    }
+  }, [sessionData]);
+
+  useEffect(() => {
+    if (!options.initialMessages) {
+      return;
+    }
+
+    setMessages((prev) => {
+      const persistedMap = new Map(
+        options.initialMessages.map((msg) => [msg.id, msg]),
+      );
+      const preserved = prev.filter((msg) => !persistedMap.has(msg.id));
+      return [...options.initialMessages, ...preserved];
+    });
+  }, [options.initialMessages]);
+
+  const effectiveStreamId = useMemo(
+    () => activeStreamId ?? sessionData?.activeStreamId ?? null,
+    [activeStreamId, sessionData?.activeStreamId],
+  );
+
+  const streamBody = chatbotApi.useAgentStreamBody(
+    conversationId ? (conversationId as Id<'conversations'>) : undefined,
+    effectiveStreamId,
+  );
+
+  const sessionStatus: AgentStatus | null = useMemo(() => {
+    const status = sessionData?.currentStatus;
+    if (!status) {
+      return null;
+    }
+
+    if (status.type === 'tool') {
+      return {
+        type: 'tool',
+        toolName: status.toolName ?? 'tool',
+        label: status.label ?? null,
+        startedAt: status.startedAt ?? Date.now(),
+      };
+    }
+
+    return {
+      type: 'thinking',
+      label: status.label ?? null,
+      startedAt: status.startedAt ?? Date.now(),
+    };
+  }, [sessionData?.currentStatus]);
+
+  const computedStatus = useMemo(
+    () => sessionStatus ?? optimisticStatus,
+    [sessionStatus, optimisticStatus],
+  );
+
+  useEffect(() => {
+    latestStatusRef.current = computedStatus;
+    if (sessionStatus) {
+      setOptimisticStatus(null);
+    }
+  }, [computedStatus, sessionStatus]);
+
+  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;
+      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,
+      };
+      lastErrorSeenRef.current = null;
+
+      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 };
+      console.log('[CHATBOT_STREAM_TIMING] request_start', {
+        at: requestStart,
+        conversationId,
+        userMessageId,
+      });
+
+      try {
+        console.log('[CHATBOT_FRONTEND] 🚀 startAgentStream', {
+          conversationId,
+          userMessageId,
+          preferredModel: preferredModelOverride,
+        });
+        telemetryTracker?.mark('mutation.started');
+        latestStatusRef.current = {
+          type: 'thinking',
+          label: null,
+          startedAt: Date.now(),
+        };
+        setOptimisticStatus({
+          type: 'thinking',
+          label: 'Thinking…',
+          startedAt: Date.now(),
+        });
+        const result = await startAgentStream({
+          conversationId: conversationId as Id<'conversations'>,
+          userMessageId: userMessageId as Id<'messages'>,
+          preferredModel: body?.preferredModel ?? options.preferredModel,
+        });
+
+        const streamId = result.streamId;
+        const tempStreamingId = `stream-${streamId}`;
+
+        console.log('[CHATBOT_FRONTEND] ✅ startAgentStream response', {
+          streamId,
+          conversationId,
+          userMessageId,
+        });
+        telemetryTracker?.mark('mutation.succeeded', { streamId });
+
+        setActiveStreamId(streamId);
+        setStreamingMessageId(tempStreamingId);
+        pendingSubmissionRef.current = pendingSubmissionRef.current
+          ? {
+              ...pendingSubmissionRef.current,
+              placeholderId: tempStreamingId,
+            }
+          : {
+              userMessageId,
+              text: currentInput ?? '',
+              attachments: body?.attachments,
+              placeholderId: tempStreamingId,
+            };
+        telemetryTracker?.mark('stream.placeholderCreated', {
+          streamingMessageId: tempStreamingId,
+        });
+
+        setMessages((prev) => {
+          if (prev.some((m) => m.id === tempStreamingId)) {
+            return prev;
+          }
+
+          return [
+            ...prev,
+            {
+              id: tempStreamingId,
+              role: 'assistant',
+              content: '',
+              createdAt: new Date(),
+            },
+          ];
+        });
+        telemetryTracker?.mark('stream.placeholderInserted');
+
+        scheduleStreamTimeoutCheck(STREAM_TIMEOUT_INITIAL_MS);
+      } catch (err) {
+        console.error('[useChatConfig] Failed to start agent stream', err);
+        const message =
+          err instanceof Error
+            ? err.message
+            : typeof err === 'string'
+              ? err
+              : undefined;
+        finalizeStreamFailure(
+          message ?? 'Failed to start agent stream. Please try again.',
+        );
+        throw err;
+      }
+    },
+    [
+      conversationId,
+      input,
+      options.preferredModel,
+      startAgentStream,
+      scheduleStreamTimeoutCheck,
+      finalizeStreamFailure,
+    ],
+  );
+
+  useEffect(() => {
+    if (!effectiveStreamId || !streamBody) {
+      return;
+    }
+
+    const text = extractStreamText(streamBody);
+    if (!text) {
+      return;
+    }
+
+    // CRITICAL FIX: Always clear timeout when we receive ANY data, regardless of telemetry state
+    if (errorTimeoutRef.current) {
+      clearTimeout(errorTimeoutRef.current);
+      errorTimeoutRef.current = null;
+    }
+
+    if (telemetryRef.current && !firstStreamChunkLoggedRef.current) {
+      const now = Date.now();
+      const requestStart = streamTimingRef.current.requestStart;
+      streamTimingRef.current.firstChunk = now;
+      telemetryRef.current.mark('stream.firstChunk', {
+        length: text.length,
+        latencyMs: requestStart ? now - requestStart : undefined,
+      });
+      console.log('[CHATBOT_STREAM_TIMING] first_chunk', {
+        at: now,
+        conversationId,
+        streamId: effectiveStreamId,
+        latencyMs: requestStart ? now - requestStart : null,
+      });
+      firstStreamChunkLoggedRef.current = true;
+    }
+
+    const streamMessageId = streamingMessageId ?? `stream-${effectiveStreamId}`;
+
+    setStreamingMessageId(streamMessageId);
+
+    setMessages((prev) => {
+      const existingIndex = prev.findIndex((m) => m.id === streamMessageId);
+      if (existingIndex === -1) {
+        return [
+          ...prev,
+          {
+            id: streamMessageId,
+            role: 'assistant',
+            content: text,
+            createdAt: new Date(),
+          },
+        ];
+      }
+
+      const existing = prev[existingIndex];
+      if (existing.content === text) {
+        return prev;
+      }
+
+      const updated = [...prev];
+      updated[existingIndex] = {
+        ...existing,
+        content: text,
+      };
+      return updated;
+    });
+  }, [conversationId, effectiveStreamId, streamBody, streamingMessageId]);
+
+  useEffect(() => {
+    if (!streamingMessageId) {
+      return;
+    }
+
+    if (effectiveStreamId) {
+      return;
+    }
+
+    const hasPersistedResponse = messages.some((message) => {
+      if (message.id === streamingMessageId || message.role !== 'assistant') {
+        return false;
+      }
+
+      const hasText =
+        typeof message.content === 'string'
+          ? message.content.trim().length > 0
+          : Array.isArray(message.content) && message.content.length > 0;
+      const hasAttachments =
+        Array.isArray(message.attachments) && message.attachments.length > 0;
+
+      return hasText || hasAttachments;
+    });
+
+    if (!hasPersistedResponse) {
+      return;
+    }
+
+    // CRITICAL FIX: Clear timeout on successful completion
+    if (errorTimeoutRef.current) {
+      clearTimeout(errorTimeoutRef.current);
+      errorTimeoutRef.current = null;
+    }
+
+    setMessages((prev) =>
+      prev.filter((message) => message.id !== streamingMessageId),
+    );
+    setStreamingMessageId(null);
+    setIsLoading(false);
+    pendingSubmissionRef.current = null;
+    lastErrorSeenRef.current = null;
+    setOptimisticStatus(null);
+    if (telemetryRef.current) {
+      telemetryRef.current.mark('stream.persisted', {
+        streamingMessageId,
+      });
+      telemetryRef.current.finalize('ok', { streamingMessageId });
+      telemetryRef.current = null;
+    }
+    const persistedAt = Date.now();
+    const { requestStart, firstChunk } = streamTimingRef.current;
+    console.log('[CHATBOT_STREAM_TIMING] stream_complete', {
+      at: persistedAt,
+      conversationId,
+      streamingMessageId,
+      totalMs: requestStart ? persistedAt - requestStart : null,
+      postFirstChunkMs:
+        firstChunk && requestStart ? persistedAt - firstChunk : null,
+    });
+    streamTimingRef.current = {};
+    firstStreamChunkLoggedRef.current = false;
+  }, [conversationId, effectiveStreamId, streamingMessageId, messages]);
+
+  useEffect(() => {
+    if (streamingMessageId) {
+      return;
+    }
+    if (!telemetryRef.current) {
+      return;
+    }
+    if (isLoading) {
+      return;
+    }
+
+    telemetryRef.current.finalize('error', {
+      reason: 'streamingMessageClearedWithoutPersistedResponse',
+    });
+    telemetryRef.current = null;
+    firstStreamChunkLoggedRef.current = false;
+    streamTimingRef.current = {};
+  }, [streamingMessageId, isLoading]);
+
+  useEffect(() => {
+    const lastErrorAt = sessionData?.lastErrorAt ?? null;
+    if (!lastErrorAt) {
+      return;
+    }
+
+    if (lastErrorSeenRef.current && lastErrorSeenRef.current === lastErrorAt) {
+      return;
+    }
+
+    lastErrorSeenRef.current = lastErrorAt;
+    finalizeStreamFailure(sessionData?.lastErrorMessage ?? undefined);
+  }, [
+    sessionData?.lastErrorAt,
+    sessionData?.lastErrorMessage,
+    finalizeStreamFailure,
+  ]);
+
+  useEffect(() => {
+    if (!pendingSubmissionRef.current) {
+      return;
+    }
+    // Don't trigger failure if we're still loading (stream just started)
+    if (isLoading) {
+      return;
+    }
+    if (sessionData?.activeStreamId || activeStreamId || effectiveStreamId) {
+      return;
+    }
+    finalizeStreamFailure(sessionData?.lastErrorMessage ?? undefined);
+  }, [
+    sessionData?.activeStreamId,
+    sessionData?.lastErrorMessage,
+    activeStreamId,
+    effectiveStreamId,
+    isLoading,
+    finalizeStreamFailure,
+  ]);
+
+  const resetMessages = useCallback(() => {
+    setMessages([]);
+    setActiveStreamId(null);
+    setStreamingMessageId(null);
+    setIsLoading(false);
+    setError(null);
+  }, []);
+
+  return {
+    messages,
+    input,
+    isLoading,
+    error,
+    handleInputChange,
+    handleSubmit,
+    resetMessages,
+    currentStatus: computedStatus,
+  };
+};