@arcote.tech/arc-chat 0.7.8 → 0.7.9

package/src/react/chat-component.tsx

@@ -1,7 +1,13 @@
 import { useState, useCallback, useMemo, useRef, useEffect, type ComponentType, createElement, type ReactNode } from "react";
 import type { ChatStreamEvent, ArcToolAny } from "@arcote.tech/arc-ai";
-import type { ChatLabels, ChatMessageData, SendMessageOptions } from "@arcote.tech/arc-ds";
+import type {
+  ChatInputTextareaSlotProps,
+  ChatLabels,
+  ChatMessageData,
+  SendMessageOptions,
+} from "@arcote.tech/arc-ds";
 import { Chat, ChatMessage, ChatInputProvider, ChatLabelsProvider, ChatToolLog, useChatLabels } from "@arcote.tech/arc-ds";
+import { VoiceTextarea } from "@arcote.tech/arc-ai-voice";
 
 interface ChatComponentConfig {
   chatName: string;
@@ -19,6 +25,12 @@ interface ChatComponentConfig {
     onClick: () => void;
     disabled: boolean;
   }) => ReactNode;
+  /**
+   * Slot na pole tekstowe ChatInput. Konsument może podpiąć `VoiceTextarea`
+   * z `@arcote.tech/arc-ai-voice` żeby włączyć dyktowanie głosowe. Bez
+   * propsa — używany domyślny `TextareaField` z DS.
+   */
+  renderTextarea?: (props: ChatInputTextareaSlotProps) => ReactNode;
   /** Partial overrides for chat i18n labels. Falls back to English defaults. */
   labels?: Partial<ChatLabels>;
   /**
@@ -28,9 +40,22 @@ interface ChatComponentConfig {
   footer?: ReactNode;
 }
 
+type ToolStatus = "pending" | "executing" | "complete" | "error";
+
 type TimelineItem =
   | { type: "message"; id: string; role: "user" | "assistant"; content: string; isStreaming?: boolean }
-  | { type: "tool"; id: string; toolCallId: string; toolName: string; params: Record<string, unknown>; result?: unknown; calling: boolean; error?: string };
+  | {
+      type: "tool";
+      id: string; // = toolCallId, stabilne pomiędzy SSE i DB rebuild
+      toolCallId: string;
+      toolName: string;
+      params: Record<string, unknown>;
+      result?: unknown;
+      status: ToolStatus;
+      /** Legacy compat — true gdy status !== complete. Renderowane przez stary ChatToolLog. */
+      calling: boolean;
+      error?: string;
+    };
 
 export function createChatComponent(
   config: ChatComponentConfig,
@@ -42,6 +67,7 @@ export function createChatComponent(
     showModelSelector = true,
     showWebSearch = true,
     renderSendButton,
+    renderTextarea,
     labels,
     footer,
   } = config;
@@ -54,6 +80,10 @@ export function createChatComponent(
     const sessionIdRef = useRef<string | null>(null);
     const currentAssistantIdRef = useRef<string | null>(null);
     const resumedSessionRef = useRef<string | null>(null);
+    /** Last seq applied per session — dedup dla replay buffer + double subscribe. */
+    const lastSeqBySessionRef = useRef<Map<string, number>>(new Map());
+    /** afterSeq dla SSE resume — read once z partialLastSeq w DB rebuild. */
+    const resumeAfterSeqRef = useRef<number>(0);
 
     const queries = scope.useQuery();
     const mutations = scope.useMutation();
@@ -76,15 +106,22 @@ export function createChatComponent(
         historyData
           ?.map(
             (m: any) =>
-              `${m._id}:${m.isGenerating ? 1 : 0}:${m.blocks ? "f" : "e"}:${m.content?.length ?? 0}`,
+              `${m._id}:${m.isGenerating ? 1 : 0}:${m.blocks ? "f" : "e"}:${m.content?.length ?? 0}:${m.partialLastSeq ?? 0}`,
           )
           .join("|") ?? "",
       [historyData],
     );
 
     // ─── Restore timeline from DB history ───────────────────────
+    // Podczas streamingu SSE jest źródłem prawdy dla aktualnie generowanej
+    // wiadomości — rebuild byłby kolizją. Snapshoty do `partialBlocks` służą
+    // wyłącznie do hydratacji po reload (gdy `isStreaming` jest jeszcze
+    // `false` na mount). Po `done` SSE klient ustawia `isStreaming=false` i
+    // ten useEffect refireuje (dep `isStreaming`) — zaaplikuje final blocks
+    // z `assistantTurnCompleted`.
     useEffect(() => {
-      if (isStreaming || !historyData || historyLen === 0) return;
+      if (isStreaming) return;
+      if (!historyData || historyLen === 0) return;
 
       const resultIds = new Set<string>();
       const resultMap = new Map<string, { content: string; isError?: boolean }>();
@@ -115,30 +152,11 @@ export function createChatComponent(
         }
 
         if (msg.role === "assistant") {
-          // Open turn (in progress). The row exists with `isGenerating: true`
-          // and no blocks; the SSE stream identified by `sessionId` will
-          // populate this bubble live. Use msg._id as the bubble id so the
-          // next rebuild (after `assistantTurnCompleted` flips the flag and
-          // sets blocks) replaces this bubble naturally.
-          if (msg.isGenerating === true) {
-            if (msg.sessionId) sessionIdRef.current = msg.sessionId;
-            hasActiveGeneration = true;
-            items.push({
-              type: "message",
-              id: msg._id,
-              role: "assistant",
-              content: "",
-              isStreaming: true,
-            });
-            currentAssistantIdRef.current = msg._id;
-            continue;
-          }
-
-          // Closed turn — render from blocks. Each TextBlock becomes a
-          // message item, each ToolCallBlock becomes a tool item paired with
-          // its result row.
-          const blocks =
-            (tryParseJson(msg.blocks ?? "") as Array<
+          // Helper — renderuje block array jako TimelineItem-y do `items`.
+          // Tool block id = block.id (toolCallId) — JEDEN klucz wszędzie,
+          // bez `${msg._id}_b${idx}` mismatchu z SSE path'a (tc_${id}).
+          const renderBlocks = (
+            blocks: Array<
               | { type: "text"; text: string }
               | {
                   type: "tool_call";
@@ -146,34 +164,81 @@ export function createChatComponent(
                   name: string;
                   arguments: Record<string, unknown>;
                 }
-            >) ?? [];
-
-          let blockIdx = 0;
-          for (const block of blocks) {
-            if (block.type === "text") {
-              if (block.text) {
+            >,
+            options: { isStreaming?: boolean } = {},
+          ) => {
+            let textCount = 0;
+            for (const block of blocks) {
+              if (block.type === "text") {
+                if (block.text) {
+                  items.push({
+                    type: "message",
+                    id: `${msg._id}_t${textCount}`,
+                    role: "assistant",
+                    content: block.text,
+                    isStreaming: options.isStreaming,
+                  });
+                }
+                textCount++;
+              } else {
+                const result = resultMap.get(block.id);
+                const hasResult = resultIds.has(block.id);
+                // Brak result w DB = tool wciąż w toku:
+                //   - server tool podczas exec → "executing"
+                //   - interactive tool czekający na user response → "pending"
+                //   (z perspektywy klienta różnica jest tylko semantyczna,
+                //   `calling: true` w obu przypadkach utrzymuje loader/input override)
+                const status: ToolStatus = result?.isError
+                  ? "error"
+                  : hasResult
+                    ? "complete"
+                    : options.isStreaming
+                      ? "executing"
+                      : "pending";
                 items.push({
-                  type: "message",
-                  id: `${msg._id}_b${blockIdx}`,
-                  role: "assistant",
-                  content: block.text,
+                  type: "tool",
+                  id: block.id, // = toolCallId
+                  toolCallId: block.id,
+                  toolName: block.name,
+                  params: block.arguments,
+                  result: result ? tryParseJson(result.content) : undefined,
+                  status,
+                  calling: !hasResult,
+                  error: result?.isError ? result.content : undefined,
                 });
               }
+            }
+          };
+
+          // Open turn (in progress). The row exists with `isGenerating: true`.
+          // SQLite zwraca booleany jako 0/1 — używamy truthy check zamiast
+          // `=== true` żeby zaakceptować zarówno true jak i 1.
+          if (msg.isGenerating) {
+            if (msg.sessionId) sessionIdRef.current = msg.sessionId;
+            hasActiveGeneration = true;
+            currentAssistantIdRef.current = msg._id;
+            resumeAfterSeqRef.current = msg.partialLastSeq ?? 0;
+            const partial =
+              (tryParseJson(msg.partialBlocks ?? "") as Array<any>) ?? [];
+            if (partial.length > 0) {
+              renderBlocks(partial, { isStreaming: true });
             } else {
-              const result = resultMap.get(block.id);
+              // brak partial — pusty streaming bubble jako placeholder
               items.push({
-                type: "tool",
-                id: `${msg._id}_b${blockIdx}`,
-                toolCallId: block.id,
-                toolName: block.name,
-                params: block.arguments,
-                result: result ? tryParseJson(result.content) : undefined,
-                calling: !resultIds.has(block.id),
-                error: result?.isError ? result.content : undefined,
+                type: "message",
+                id: msg._id,
+                role: "assistant",
+                content: "",
+                isStreaming: true,
               });
             }
-            blockIdx++;
+            continue;
           }
+
+          // Closed turn — render z final blocks.
+          const blocks =
+            (tryParseJson(msg.blocks ?? "") as Array<any>) ?? [];
+          renderBlocks(blocks);
         }
       }
 
@@ -181,15 +246,21 @@ export function createChatComponent(
       if (!isStreaming && hasActiveGeneration) {
         setIsStreaming(true);
       }
-    }, [historySig, isStreaming]);
+      // Dep TYLKO `historySig` — bez `isStreaming`. Gdyby `isStreaming` było
+      // w deps: po `done` SSE flips isStreaming=false → useEffect refires →
+      // może zobaczyć STAREJ `isGenerating:1` row (DB jeszcze nie zaprojektowała
+      // assistantTurnCompleted) → reset do streaming mode → caret nigdy nie znika.
+      // Rebuild fires tylko gdy faktycznie zmienia się stan w DB.
+    }, [historySig]);
 
     // ─── SSE stream consumer ────────────────────────────────────
     // Reusable: handles fetch + read loop + processEvent dispatch.
     // Caller is responsible for setting isStreaming/sessionIdRef before
     // and clearing them after (different lifecycle in send vs respond vs resume).
     const consumeStream = useCallback(
-      async (sessionId: string): Promise<void> => {
-        const streamUrl = `/route/chat/${chatName}/stream/${sessionId}`;
+      async (sessionId: string, afterSeq = 0): Promise<void> => {
+        const query = afterSeq > 0 ? `?afterSeq=${afterSeq}` : "";
+        const streamUrl = `/route/chat/${chatName}/stream/${sessionId}${query}`;
         const response = await fetch(streamUrl, {
           credentials: "include",
           headers: { Accept: "text/event-stream" },
@@ -211,6 +282,10 @@ export function createChatComponent(
               try {
                 const event = JSON.parse(line.slice(6)) as ChatStreamEvent;
                 await processEventRef.current?.(event);
+                // Yield między eventami w tym samym TCP chunku — gdy server
+                // wypycha kilka eventów naraz (np. replay buffer), bez tego
+                // wszystkie setTimeline batchują się w jeden render.
+                await new Promise<void>((r) => setTimeout(r, 0));
               } catch {}
             }
           }
@@ -229,28 +304,35 @@ export function createChatComponent(
     const processEventRef = useRef<((event: ChatStreamEvent) => Promise<void>) | null>(null);
     const processEvent = useCallback(
       async (event: ChatStreamEvent) => {
+        // Seq dedup — replay buffer może wysłać te same eventy ponownie po
+        // reconnect. Klient odrzuca seq <= lastSeq.
+        if (event.seq != null && event.sessionId) {
+          const lastSeq = lastSeqBySessionRef.current.get(event.sessionId) ?? 0;
+          if (event.seq <= lastSeq) return;
+          lastSeqBySessionRef.current.set(event.sessionId, event.seq);
+        }
+
         switch (event.type) {
-          case "content_delta":
-            if (!event.content) break;
-            // Append to the trailing assistant text bubble. If there isn't
-            // one (e.g. just finished a tool, or no streaming bubble yet),
-            // create a new one. This produces correctly interleaved
-            // text/tool/text/tool ordering during streaming.
+          case "text_delta":
+            if (!event.textDelta) break;
             setTimeline((prev) => {
               const last = prev[prev.length - 1];
-              if (
+              const willAppend = !!(
                 last &&
                 last.type === "message" &&
                 last.role === "assistant" &&
                 last.isStreaming
-              ) {
+              );
+              if (willAppend) {
                 return prev.map((item, i) =>
                   i === prev.length - 1 && item.type === "message"
-                    ? { ...item, content: item.content + event.content }
+                    ? { ...item, content: item.content + event.textDelta }
                     : item,
                 );
               }
-              const newId = `assistant_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+              const newId = event.messageId
+                ? `${event.messageId}_streaming_${prev.length}`
+                : `assistant_${Date.now()}`;
               currentAssistantIdRef.current = newId;
               return [
                 ...prev,
@@ -258,18 +340,31 @@ export function createChatComponent(
                   type: "message",
                   id: newId,
                   role: "assistant",
-                  content: event.content!,
+                  content: event.textDelta!,
                   isStreaming: true,
                 },
               ];
             });
             break;
 
-          case "server_tool_start":
-            if (event.toolCall) {
-              // Finalize any streaming text bubble before the tool — next
-              // content_delta will start a fresh bubble after the tool.
+          case "tool_call_pending":
+            // AI właśnie zaczyna tool call. Dla SERVER tools pokazujemy loader
+            // "Przygotowuje: {name}…" od razu — ViewComponent dostaje `params: {}`
+            // ale to OK bo server tool nie używa params do init'a UI.
+            //
+            // Dla INTERACTIVE tools NIE pushujemy do timeline tutaj — ich
+            // ViewComponent (np. AskQuestionsView) używa `params.questions`
+            // od mount-time do registerInputOverride, więc musi dostać pełne
+            // args. Czekamy na `interactive_tool_request` które niesie pełne args.
+            if (event.toolCallId) {
+              const toolDef = event.toolCallName
+                ? toolsMap.get(event.toolCallName)
+                : undefined;
+              if (toolDef && !toolDef.isServerTool) break;
               setTimeline((prev) => {
+                if (prev.some((it) => it.type === "tool" && it.id === event.toolCallId)) {
+                  return prev;
+                }
                 const next = prev.map((item) =>
                   item.type === "message" && item.isStreaming
                     ? { ...item, isStreaming: false }
@@ -277,10 +372,11 @@ export function createChatComponent(
                 );
                 next.push({
                   type: "tool",
-                  id: `tc_${event.toolCall!.id}`,
-                  toolCallId: event.toolCall!.id,
-                  toolName: event.toolCall!.name,
-                  params: event.toolCall!.arguments ?? {},
+                  id: event.toolCallId!,
+                  toolCallId: event.toolCallId!,
+                  toolName: event.toolCallName ?? "",
+                  params: {},
+                  status: "pending",
                   calling: true,
                 });
                 return next;
@@ -289,7 +385,59 @@ export function createChatComponent(
             }
             break;
 
-          case "server_tool_result":
+          case "tool_call_arguments_delta":
+            // Args lecą znak po znaku — UI zwykle nie potrzebuje tej granularności.
+            // Pomijamy update'y żeby nie re-renderować bez powodu.
+            break;
+
+          case "tool_call_arguments_complete":
+            // Pełne args dostępne. Trzy przypadki:
+            //   1. Server tool już jest w timeline (od tool_call_pending) → update params/status.
+            //   2. Interactive tool jeszcze nie jest w timeline (skipnięty w pending) → ADD tutaj
+            //      żeby zachować kolejność emisji przez AI (np. [tool, text]).
+            //   3. Tool już dodany przez interactive_tool_request → no-op.
+            if (event.toolCallId) {
+              setTimeline((prev) => {
+                const existing = prev.find(
+                  (it): it is Extract<TimelineItem, { type: "tool" }> =>
+                    it.type === "tool" && it.toolCallId === event.toolCallId,
+                );
+                if (existing) {
+                  return prev.map((item) =>
+                    item.type === "tool" && item.toolCallId === event.toolCallId
+                      ? {
+                          ...item,
+                          params: event.arguments ?? item.params,
+                          status: "executing",
+                          calling: true,
+                          toolName: event.toolCallName ?? item.toolName,
+                        }
+                      : item,
+                  );
+                }
+                // Brak w timeline → interactive tool, dodaj teraz w odpowiednim
+                // miejscu (po finalizacji ewentualnej trwającej streaming bubble).
+                const next = prev.map((item) =>
+                  item.type === "message" && item.isStreaming
+                    ? { ...item, isStreaming: false }
+                    : item,
+                );
+                next.push({
+                  type: "tool",
+                  id: event.toolCallId!,
+                  toolCallId: event.toolCallId!,
+                  toolName: event.toolCallName ?? "",
+                  params: event.arguments ?? {},
+                  status: "pending",
+                  calling: true,
+                });
+                return next;
+              });
+              currentAssistantIdRef.current = null;
+            }
+            break;
+
+          case "tool_call_executed":
             if (event.toolResult) {
               setTimeline((prev) =>
                 prev.map((item) =>
@@ -297,6 +445,7 @@ export function createChatComponent(
                     ? {
                         ...item,
                         result: tryParseJson(event.toolResult!.content),
+                        status: event.toolResult!.isError ? "error" : "complete",
                         calling: false,
                         error: event.toolResult!.isError ? event.toolResult!.content : undefined,
                       }
@@ -308,21 +457,42 @@ export function createChatComponent(
 
           case "interactive_tool_request":
             if (event.toolCalls) {
-              // Finalize current text bubble and append the interactive tool
-              // items. After this, the loop pauses until userResponded.
               setTimeline((prev) => {
+                const byId = new Map(
+                  prev
+                    .filter((it) => it.type === "tool")
+                    .map((it) => [(it as any).id, it]),
+                );
                 const next = prev.map((item) =>
                   item.type === "message" && item.isStreaming
                     ? { ...item, isStreaming: false }
                     : item,
                 );
                 for (const tc of event.toolCalls!) {
+                  const existing = byId.get(tc.id);
+                  if (existing) {
+                    // Tool już istnieje (dodany przez tool_call_arguments_complete).
+                    // Upewnij się że toolName + params są aktualne — fallback
+                    // gdyby serwer wcześniej wysłał je puste.
+                    const idx = next.findIndex(
+                      (it) => it.type === "tool" && (it as any).id === tc.id,
+                    );
+                    if (idx >= 0) {
+                      next[idx] = {
+                        ...(next[idx] as any),
+                        toolName: tc.name || (next[idx] as any).toolName,
+                        params: tc.arguments ?? (next[idx] as any).params,
+                      };
+                    }
+                    continue;
+                  }
                   next.push({
                     type: "tool",
-                    id: `tc_${tc.id}`,
+                    id: tc.id,
                     toolCallId: tc.id,
                     toolName: tc.name,
                     params: tc.arguments ?? {},
+                    status: "pending",
                     calling: true,
                   });
                 }
@@ -333,7 +503,6 @@ export function createChatComponent(
             break;
 
           case "done":
-            // Mark any trailing streaming bubble as done.
             setTimeline((prev) =>
               prev.map((item) =>
                 item.type === "message" && item.isStreaming
@@ -385,28 +554,35 @@ export function createChatComponent(
     // Keep ref in sync so consumeStream (stable callback) can call latest version
     processEventRef.current = processEvent;
 
-    // ─── Resume SSE on mount if there's an active generation ────
-    // After page reload, if the DB shows isGenerating=true with sessionId,
-    // we reconnect to the stream registry to consume any in-flight events.
+    // ─── Resume/auto-open SSE dla isGenerating rowsów ────────────
+    // Każdy `isGenerating: true` row z `sessionId` w DB triggers SSE subscribe.
+    // Obejmuje: (a) reload mid-stream, (b) welcome-message-style auto-trigger
+    // gdzie onEnter listener tworzy assistant turn bez user message.
+    // `consumeStream` z `afterSeq` (zhydratowane z `partialLastSeq`) sprawia
+    // że replay buffer skipuje już zaaplikowane chunki.
     useEffect(() => {
       if (!scopeId) return;
       const sid = sessionIdRef.current;
       if (!sid) return;
       if (resumedSessionRef.current === sid) return;
-      if (!isStreaming) return;
       resumedSessionRef.current = sid;
+      const afterSeq = resumeAfterSeqRef.current;
+      // Inicjalizujemy lastSeq dla tej sesji od `afterSeq` żeby uniknąć
+      // ponownej aplikacji już-zhydratowanych chunków (gdyby replay pominął).
+      lastSeqBySessionRef.current.set(sid, afterSeq);
+      setIsStreaming(true);
       (async () => {
         try {
-          await consumeStream(sid);
+          await consumeStream(sid, afterSeq);
         } catch {
-          // Stream may have already ended or been GC'd — fall through
+          // Stream może już skończony / GC'd
         } finally {
           setIsStreaming(false);
           sessionIdRef.current = null;
           currentAssistantIdRef.current = null;
         }
       })();
-    }, [isStreaming, scopeId, consumeStream]);
+    }, [historySig, scopeId, consumeStream]);
 
     // ─── Send message ───────────────────────────────────────────
     const handleSend = useCallback(
@@ -430,53 +606,18 @@ export function createChatComponent(
 
           const { sessionId } = sendResult as { sessionId: string; messageId: string };
           sessionIdRef.current = sessionId;
-
-          const streamUrl = `/route/chat/${chatName}/stream/${sessionId}`;
-          const response = await fetch(streamUrl, {
-            credentials: "include",
-            headers: { Accept: "text/event-stream" },
-          });
-
-          if (!response.ok) throw new Error(`Stream failed: ${response.status}`);
-
-          // Don't pre-create an assistant bubble here — the SSE handler will
-          // create one lazily on the first content_delta. This way, if the
-          // model jumps straight to a tool call (no text), we don't render an
-          // empty bubble.
+          // Zapobiega dwukrotnemu konsumpowaniu SSE — resume effect zobaczy
+          // że ten sessionId już jest "resumed" i pominie.
+          resumedSessionRef.current = sessionId;
           currentAssistantIdRef.current = null;
 
-          const reader = response.body!.getReader();
-          const decoder = new TextDecoder();
-          let partialLine = "";
-
-          while (true) {
-            const { value, done } = await reader.read();
-            if (done) break;
-
-            const text = partialLine + decoder.decode(value, { stream: true });
-            const lines = text.split("\n");
-            partialLine = lines.pop() ?? "";
-
-            for (const line of lines) {
-              if (line.startsWith("data: ")) {
-                try {
-                  const event = JSON.parse(line.slice(6)) as ChatStreamEvent;
-                  await processEvent(event);
-                } catch {}
-              }
-            }
-          }
-
-          if (partialLine.startsWith("data: ")) {
-            try {
-              const event = JSON.parse(partialLine.slice(6)) as ChatStreamEvent;
-              await processEvent(event);
-            } catch {}
+          try {
+            await consumeStream(sessionId, 0);
+          } finally {
+            setIsStreaming(false);
+            sessionIdRef.current = null;
+            currentAssistantIdRef.current = null;
           }
-
-          setIsStreaming(false);
-          sessionIdRef.current = null;
-          currentAssistantIdRef.current = null;
         } catch (err) {
           const errorMsg = err instanceof Error ? err.message : chatLabels.errorLabel;
           setTimeline((prev) => [
@@ -546,47 +687,13 @@ export function createChatComponent(
         const { sessionId: newSessionId } = respondResult as { sessionId: string };
         if (!newSessionId) return;
 
-        // Connect to new SSE stream for resumed generation. Don't pre-create
-        // an assistant bubble — the SSE handler creates one lazily on the
-        // first content_delta (same pattern as handleSend).
         sessionIdRef.current = newSessionId;
+        resumedSessionRef.current = newSessionId; // skip auto-resume
         setIsStreaming(true);
         currentAssistantIdRef.current = null;
 
         try {
-          const streamUrl = `/route/chat/${chatName}/stream/${newSessionId}`;
-          const response = await fetch(streamUrl, {
-            credentials: "include",
-            headers: { Accept: "text/event-stream" },
-          });
-
-          if (!response.ok) throw new Error(`Stream failed: ${response.status}`);
-
-          const reader = response.body!.getReader();
-          const decoder = new TextDecoder();
-          let partialLine = "";
-
-          while (true) {
-            const { value, done } = await reader.read();
-            if (done) break;
-            const text = partialLine + decoder.decode(value, { stream: true });
-            const lines = text.split("\n");
-            partialLine = lines.pop() ?? "";
-            for (const line of lines) {
-              if (line.startsWith("data: ")) {
-                try {
-                  const evt = JSON.parse(line.slice(6)) as ChatStreamEvent;
-                  await processEvent(evt);
-                } catch {}
-              }
-            }
-          }
-          if (partialLine.startsWith("data: ")) {
-            try {
-              const evt = JSON.parse(partialLine.slice(6)) as ChatStreamEvent;
-              await processEvent(evt);
-            } catch {}
-          }
+          await consumeStream(newSessionId, 0);
         } catch (err) {
           setTimeline((prev) => [
             ...prev,
@@ -655,12 +762,24 @@ export function createChatComponent(
         ),
         createElement(Chat, {
           messages: [],
-          models: [{ value: "gpt-5.4-mini", label: "GPT-5.4 Mini" }],
-          defaultModel: "gpt-5.4-mini",
+          models: [{ value: "gpt-5", label: "GPT-5" }],
+          defaultModel: "gpt-5",
           onSend: handleSend,
           showModelSelector,
           showWebSearch,
           renderSendButton,
+          // Default = VoiceTextarea (chat z dyktowaniem out-of-the-box).
+          // Konsument może podać własny `renderTextarea` (np. czysty
+          // TextareaField gdy świadomie wyłącza voice).
+          renderTextarea:
+            renderTextarea ??
+            (({ value, onChange, placeholder, rows }) =>
+              createElement(VoiceTextarea, {
+                value,
+                onChange,
+                placeholder,
+                rows,
+              })),
           disabled: isStreaming || hasWaitingInteractive,
         }),
       ),