[NOTICKET] Fix rendering answer in bubble chat answer

src/app/components/Main.tsx

@@ -103,6 +103,13 @@ export default function Main() {
         timestamp: new Date(m.created_at).getTime(),
         sources: m.sources ?? [],
       }));
+      const asstMsgs = messages.filter(m => m.role === "assistant");
+      const lastAsst = asstMsgs[asstMsgs.length - 1];
+      if (lastAsst) {
+        const hasCR = lastAsst.content.includes("\r");
+        console.log("[loadRoomMessages] last assistant contentLen=", lastAsst.content.length, "hasCR=", hasCR);
+        console.log("[loadRoomMessages] CONTENT JSON →", JSON.stringify(lastAsst.content.slice(0, 600)));
+      }
       console.log("[loadRoomMessages] room", roomId, "→", messages.length, "messages from server");
       setChats((prev) =>
         prev.map((chat) =>
@@ -171,7 +178,7 @@ export default function Main() {
     abortControllerRef.current?.abort();
   };
 
-  const handleSend = useCallback(async (text: string) => {
+  const handleSend = useCallback(async (text: string, skipReload = false) => {
     console.log("[handleSend] called, user:", user?.user_id ?? "null", "text:", text.slice(0, 40));
     if (!user) {
       console.warn("[handleSend] early return: no user");
@@ -240,6 +247,58 @@ export default function Main() {
       const decoder = new TextDecoder();
       let buffer = "";
       let currentEvent = "";
+      let currentDataLines: string[] = [];
+      let streamDone = false;
+
+      const dispatchEvent = (eventType: string, data: string) => {
+        if (eventType === "sources" && data) {
+          const sources: ChatSource[] = JSON.parse(data);
+          setChats((prev) =>
+            prev.map((chat) =>
+              chat.id === roomId
+                ? {
+                    ...chat,
+                    messages: chat.messages.map((m) =>
+                      m.id === assistantMsgId ? { ...m, sources } : m
+                    ),
+                  }
+                : chat
+            )
+          );
+        } else if (eventType === "chunk") {
+          setChats((prev) =>
+            prev.map((chat) =>
+              chat.id === roomId
+                ? {
+                    ...chat,
+                    messages: chat.messages.map((m) =>
+                      m.id === assistantMsgId
+                        ? { ...m, content: m.content + data }
+                        : m
+                    ),
+                  }
+                : chat
+            )
+          );
+        } else if (eventType === "message" && data) {
+          setChats((prev) =>
+            prev.map((chat) =>
+              chat.id === roomId
+                ? {
+                    ...chat,
+                    messages: chat.messages.map((m) =>
+                      m.id === assistantMsgId ? { ...m, content: data } : m
+                    ),
+                  }
+                : chat
+            )
+          );
+        } else if (eventType === "audio_text" && data) {
+          audioText = data;
+        } else if (eventType === "done") {
+          streamDone = true;
+        }
+      };
 
       while (true) {
         const { done, value } = await reader.read();
@@ -250,79 +309,57 @@ export default function Main() {
         buffer = lines.pop() ?? "";
 
         for (const line of lines) {
-          if (line.startsWith("event:")) {
+          if (line === "") {
+            // Blank line = end of SSE event — dispatch with all accumulated data lines joined by \n
+            if (currentEvent) {
+              dispatchEvent(currentEvent, currentDataLines.join("\n"));
+            }
+            currentEvent = "";
+            currentDataLines = [];
+          } else if (line.startsWith("event:")) {
             currentEvent = line.replace("event:", "").trim();
           } else if (line.startsWith("data:")) {
-            const data = line.replace(/^data: ?/, "");
-
-            if (currentEvent === "sources" && data) {
-              const sources: ChatSource[] = JSON.parse(data);
-              setChats((prev) =>
-                prev.map((chat) =>
-                  chat.id === roomId
-                    ? {
-                        ...chat,
-                        messages: chat.messages.map((m) =>
-                          m.id === assistantMsgId ? { ...m, sources } : m
-                        ),
-                      }
-                    : chat
-                )
-              );
-            } else if (currentEvent === "chunk" && data) {
-              setChats((prev) =>
-                prev.map((chat) =>
-                  chat.id === roomId
-                    ? {
-                        ...chat,
-                        messages: chat.messages.map((m) =>
-                          m.id === assistantMsgId
-                            ? { ...m, content: m.content + data }
-                            : m
-                        ),
-                      }
-                    : chat
-                )
-              );
-            } else if (currentEvent === "message" && data) {
-              setChats((prev) =>
-                prev.map((chat) =>
-                  chat.id === roomId
-                    ? {
-                        ...chat,
-                        messages: chat.messages.map((m) =>
-                          m.id === assistantMsgId ? { ...m, content: data } : m
-                        ),
-                      }
-                    : chat
-                )
-              );
-            } else if (currentEvent === "audio_text" && data) {
-              audioText = data;
-            } else if (currentEvent === "done") {
-              break;
-            }
+            currentDataLines.push(line.replace(/^data: ?/, ""));
           }
         }
+        if (streamDone) break;
+      }
+
+      if (skipReload) {
+        // Voice mode: skip GET /room, return immediately so TTS can start without delay.
+        // audioText and audioChunks will be stored on the temp assistantMsgId.
+        if (audioText) {
+          setChats((prev) =>
+            prev.map((chat) =>
+              chat.id === roomId
+                ? {
+                    ...chat,
+                    messages: chat.messages.map((m) =>
+                      m.id === assistantMsgId ? { ...m, audioText } : m
+                    ),
+                  }
+                : chat
+            )
+          );
+        }
+        return { audioText, assistantMsgId };
       }
 
-      const loadedMessages = await loadRoomMessages(roomId);
-      const lastAssistantMsg = [...loadedMessages].reverse().find((m) => m.role === "assistant");
-      if (audioText && lastAssistantMsg) {
+      if (audioText) {
         setChats((prev) =>
           prev.map((chat) =>
             chat.id === roomId
               ? {
                   ...chat,
                   messages: chat.messages.map((m) =>
-                    m.id === lastAssistantMsg.id ? { ...m, audioText } : m
+                    m.id === assistantMsgId ? { ...m, audioText } : m
                   ),
                 }
               : chat
           )
         );
       }
-      return { audioText, lastAssistantId: lastAssistantMsg?.id };
+      return { audioText, assistantMsgId };
     } catch (err: unknown) {
       if ((err as Error).name !== "AbortError") {
         console.error("[handleSend] streamChat error:", err);
@@ -346,11 +383,12 @@ export default function Main() {
         audioText = "";
       }
     } finally {
+      console.log("[handleSend] finally: clearing streamingMsgId →", assistantMsgId, "| skipReload:", skipReload);
       setIsStreaming(false);
       setStreamingMsgId(null);
       abortControllerRef.current = null;
     }
-  }, [user, ensureRoom, loadRoomMessages]);
+  }, [user, ensureRoom]);
 
   const playTtsAudio = useCallback(async (
     ttsText: string,
@@ -389,21 +427,23 @@ export default function Main() {
   const { voiceState, start, stop, stopRecording, setStateExternal, isActive: isVoiceActive } = useVoiceSession({
     onTranscript: async (text: string) => {
       console.log("[onTranscript] received:", text);
-      const result = await handleSend(text);
-      const { audioText = "", lastAssistantId } = result ?? {};
+      // Pass skipReload=true so handleSend returns immediately after streaming
+      // without waiting for GET /room — TTS starts with zero extra delay.
+      const result = await handleSend(text, true);
+      const { audioText = "", assistantMsgId } = result ?? {};
       console.log("[onTranscript] handleSend done, audioText:", audioText ? audioText.slice(0, 40) : "(empty)");
       if (audioText && isVoiceActiveRef.current) {
         const { chunks, sampleRate } = await playTtsAudio(audioText, () => {
           if (isVoiceActiveRef.current) setVoiceStateRef.current?.("SPEAKING");
         });
-        if (lastAssistantId && chunks.length > 0) {
+        if (assistantMsgId && chunks.length > 0) {
           setChats((prev) =>
             prev.map((chat) =>
               chat.id === currentChatIdRef.current
                 ? {
                     ...chat,
                     messages: chat.messages.map((m) =>
-                      m.id === lastAssistantId
+                      m.id === assistantMsgId
                         ? { ...m, audioChunks: chunks, audioSampleRate: sampleRate }
                         : m
                     ),

src/app/components/chat/MessageBubble.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { motion } from "motion/react";
 import { Bot } from "lucide-react";
 import type { Message } from "./types";
@@ -11,6 +12,14 @@ interface MessageBubbleProps {
 }
 
 export default function MessageBubble({ message, isStreamingPlaceholder }: MessageBubbleProps) {
+  useEffect(() => {
+    if (message.role === "assistant") {
+      console.log(
+        `[MessageBubble] id=...${message.id.slice(-6)} isStreamingPlaceholder=${isStreamingPlaceholder} contentLen=${message.content.length}`
+      );
+    }
+  }, [isStreamingPlaceholder, message.id, message.role, message.content.length]);
+
   if (message.role === "user") {
     return (
       <motion.div
@@ -43,7 +52,11 @@ export default function MessageBubble({ message, isStreamingPlaceholder }: Messa
         </div>
 
         <div className="max-w-[92%] sm:max-w-[88%] xl:max-w-[80%] bg-white border border-neutral-100 rounded-2xl rounded-tl-sm shadow-sm px-4 xl:px-5 py-3 xl:py-4">
-          <MarkdownRenderer content={message.content} skipPreprocess={isStreamingPlaceholder} />
+          <MarkdownRenderer
+            key={isStreamingPlaceholder ? "streaming" : "final"}
+            content={message.content}
+            skipPreprocess={isStreamingPlaceholder}
+          />
 
           {message.sources && message.sources.length > 0 && (
             <div className="mt-3 pt-2 border-t border-neutral-100">

src/app/components/chat/renderers/MarkdownRenderer.tsx

@@ -113,6 +113,14 @@ interface MarkdownRendererProps {
 
 export default function MarkdownRenderer({ content, skipPreprocess }: MarkdownRendererProps) {
   const processed = skipPreprocess ? content : preprocessMarkdown(content);
+  if (!skipPreprocess) {
+    const hasCR = content.includes("\r");
+    const hasDoubleNewline = content.includes("\n\n");
+    console.log(
+      `[MarkdownRenderer] skipPreprocess=false contentLen=${content.length} same=${content === processed} hasCR=${hasCR} hasDoubleNewline=${hasDoubleNewline}`
+    );
+    console.log("[MarkdownRenderer] CONTENT JSON →", JSON.stringify(content.slice(0, 600)));
+  }
 
   return (
     <ReactMarkdown

src/audio/AudioPlayer.ts

@@ -40,16 +40,20 @@ export class AudioPlayer {
       this.pendingBuffers.push(audioBuffer);
       if (this.pendingBytes >= this.bufferThresholdBytes) {
         this.started = true;
-        this.nextPlayTime = this.context.currentTime;
-        onStarted?.();
-        for (const buf of this.pendingBuffers) {
-          const source = this.context.createBufferSource();
-          source.buffer = buf;
-          source.connect(this.context.destination);
-          source.start(this.nextPlayTime);
-          this.nextPlayTime += buf.duration;
-        }
+        const buffered = this.pendingBuffers.splice(0);
         this.pendingBuffers = [];
+        void this.context.resume().then(() => {
+          if (!this.context) return;
+          this.nextPlayTime = this.context.currentTime;
+          onStarted?.();
+          for (const buf of buffered) {
+            const source = this.context.createBufferSource();
+            source.buffer = buf;
+            source.connect(this.context.destination);
+            source.start(this.nextPlayTime);
+            this.nextPlayTime += buf.duration;
+          }
+        });
       }
     } else {
       const source = this.context.createBufferSource();

src/hooks/useVoiceSession.ts

@@ -33,8 +33,11 @@ export interface UseVoiceSessionReturn {
 
 const BUFFER_SOUNDS = [
   "/sounds/01_Pertanyaan_bagus_mohon_ditunggu_sebentar.wav",
+  "/sounds/03_Siap_saya_tangkap_Sebentar_ya_saya_lagi.wav",
+  "/sounds/05_Oke_terima_kasih_sudah_bertanya_Mohon_tu.wav",
   "/sounds/02_Oke_menararik_banget_Sebentar_ya_saya_se.wav",
-  "/sounds/03_Sip_aku_sudah_dengar_pertanyaanmu_Tunggu.wav",
+  "/sounds/04_Baik_sebentar_ya_Saya_sedang_memproses_p.wav",
+  "/sounds/06_Sip_aku_sudah_dengar_pertanyaanmu_Tunggu.wav",
 ];
 
 const RECORDER_SAMPLE_RATE = 16000;

src/services/voiceApi.ts

@@ -47,11 +47,14 @@ export async function textToSpeechStreaming(
   text: string,
   provider = "gemini"
 ): Promise<{ sampleRate: number; stream: ReadableStream<Uint8Array> }> {
+  const abort = new AbortController();
+  const timer = setTimeout(() => abort.abort(), 90_000);
   const res = await fetch(`${VOICE_BASE_URL}/tts`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ text, provider }),
-  });
+    signal: abort.signal,
+  }).finally(() => clearTimeout(timer));
   if (!res.ok) throw new Error(`TTS error: ${res.status}`);
   if (!res.body) throw new Error("TTS response has no body");
   const sampleRate = parseInt(res.headers.get("X-Sample-Rate") ?? "24000", 10);
@@ -62,11 +65,14 @@ export async function textToSpeech(
   text: string,
   provider = "gemini"
 ): Promise<{ pcm: ArrayBuffer; sampleRate: number }> {
+  const abort = new AbortController();
+  const timer = setTimeout(() => abort.abort(), 90_000);
   const response = await fetch(`${VOICE_BASE_URL}/tts`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ text, provider }),
-  });
+    signal: abort.signal,
+  }).finally(() => clearTimeout(timer));
   if (!response.ok) throw new Error(`TTS error: ${response.status}`);
   const sampleRate = parseInt(
     response.headers.get("X-Sample-Rate") ?? "24000",