@arcote.tech/arc-chat 0.5.2 → 0.5.5

package/src/react/chat-component.tsx

@@ -1,12 +1,26 @@
 import { useState, useCallback, useRef, useEffect, type ComponentType, createElement, type ReactNode } from "react";
 import type { ChatStreamEvent, ArcToolAny } from "@arcote.tech/arc-ai";
-import type { ChatMessageData, SendMessageOptions } from "@arcote.tech/arc-ds";
-import { Chat, ChatMessage, ChatInputProvider, ChatToolLog } from "@arcote.tech/arc-ds";
+import type { ChatLabels, ChatMessageData, SendMessageOptions } from "@arcote.tech/arc-ds";
+import { Chat, ChatMessage, ChatInputProvider, ChatLabelsProvider, ChatToolLog, useChatLabels } from "@arcote.tech/arc-ds";
 
 interface ChatComponentConfig {
   chatName: string;
   tools: ArcToolAny[];
   messageElementName: string;
+  /** Show the model selector dropdown in ChatInput. Default true. */
+  showModelSelector?: boolean;
+  /** Show the web search toggle in ChatInput. Default true. */
+  showWebSearch?: boolean;
+  /**
+   * Render slot for ChatInput's send button. Receives `onClick` and
+   * `disabled` — caller renders its own button (e.g. branded with a logo).
+   */
+  renderSendButton?: (props: {
+    onClick: () => void;
+    disabled: boolean;
+  }) => ReactNode;
+  /** Partial overrides for chat i18n labels. Falls back to English defaults. */
+  labels?: Partial<ChatLabels>;
 }
 
 type TimelineItem =
@@ -16,10 +30,19 @@ type TimelineItem =
 export function createChatComponent(
   config: ChatComponentConfig,
 ): ComponentType<{ scope: any; identifyBy: string }> {
-  const { chatName, tools, messageElementName } = config;
+  const {
+    chatName,
+    tools,
+    messageElementName,
+    showModelSelector = true,
+    showWebSearch = true,
+    renderSendButton,
+    labels,
+  } = config;
   const toolsMap = new Map(tools.map((t) => [t.name, t]));
 
-  return function ChatComponent({ scope, identifyBy }: { scope: any; identifyBy: string }) {
+  function ChatComponentInner({ scope, identifyBy }: { scope: any; identifyBy: string }) {
+    const chatLabels = useChatLabels();
     const [timeline, setTimeline] = useState<TimelineItem[]>([]);
     const [isStreaming, setIsStreaming] = useState(false);
     const sessionIdRef = useRef<string | null>(null);
@@ -57,32 +80,75 @@ export function createChatComponent(
       let hasActiveGeneration = false;
 
       for (const msg of historyData) {
-        if (msg.role === "user" || msg.role === "assistant") {
-          if (msg.isGenerating && !msg.content) {
-            if (msg.sessionId) sessionIdRef.current = msg.sessionId;
-            hasActiveGeneration = msg.isGenerating === true;
-            continue;
-          }
+        // System messages are developer-injected priming prompts. They go
+        // to the LLM via buildHistory() but must not appear in the user's
+        // chat timeline.
+        if (msg.role === "system") continue;
+
+        if (msg.role === "user") {
           items.push({
             type: "message",
             id: msg._id,
-            role: msg.role,
-            content: msg.content,
-            isStreaming: msg.isGenerating === true,
+            role: "user",
+            content: msg.content ?? "",
           });
+          continue;
+        }
+
+        if (msg.role === "assistant") {
+          // Placeholder row created at the start of generation. We track its
+          // session for SSE reconnect, but don't render it yet — the loop
+          // will save the real assistant row with `blocks` once streaming
+          // completes.
+          const blocksStr = msg.blocks ?? "";
+          if (msg.isGenerating && !blocksStr) {
+            if (msg.sessionId) sessionIdRef.current = msg.sessionId;
+            hasActiveGeneration = true;
+            continue;
+          }
+
+          // Walk the assistant's blocks in order — each TextBlock becomes a
+          // message item, each ToolCallBlock becomes a tool item paired with
+          // its result row.
+          const blocks =
+            (tryParseJson(blocksStr) as Array<
+              | { type: "text"; text: string }
+              | {
+                  type: "tool_call";
+                  id: string;
+                  name: string;
+                  arguments: Record<string, unknown>;
+                }
+            >) ?? [];
+
+          let blockIdx = 0;
+          for (const block of blocks) {
+            if (block.type === "text") {
+              if (block.text) {
+                items.push({
+                  type: "message",
+                  id: `${msg._id}_b${blockIdx}`,
+                  role: "assistant",
+                  content: block.text,
+                });
+              }
+            } else {
+              const result = resultMap.get(block.id);
+              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,
+              });
+            }
+            blockIdx++;
+          }
+
           if (msg.isGenerating === true) hasActiveGeneration = true;
-        } else if (msg.role === "tool_call" && msg.toolCallId) {
-          const result = resultMap.get(msg.toolCallId);
-          items.push({
-            type: "tool",
-            id: msg._id,
-            toolCallId: msg.toolCallId,
-            toolName: msg.toolName ?? "",
-            params: tryParseJson(msg.content) as Record<string, unknown>,
-            result: result ? tryParseJson(result.content) : undefined,
-            calling: !resultIds.has(msg.toolCallId),
-            error: result?.isError ? result.content : undefined,
-          });
         }
       }
 
@@ -95,34 +161,63 @@ export function createChatComponent(
     // ─── SSE event processing ───────────────────────────────────
     const processEvent = useCallback(
       async (event: ChatStreamEvent) => {
-        const assistantId = currentAssistantIdRef.current;
-
         switch (event.type) {
           case "content_delta":
-            if (event.content && assistantId) {
-              setTimeline((prev) =>
-                prev.map((item) =>
-                  item.type === "message" && item.id === assistantId
+            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.
+            setTimeline((prev) => {
+              const last = prev[prev.length - 1];
+              if (
+                last &&
+                last.type === "message" &&
+                last.role === "assistant" &&
+                last.isStreaming
+              ) {
+                return prev.map((item, i) =>
+                  i === prev.length - 1 && item.type === "message"
                     ? { ...item, content: item.content + event.content }
                     : item,
-                ),
-              );
-            }
+                );
+              }
+              const newId = `assistant_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`;
+              currentAssistantIdRef.current = newId;
+              return [
+                ...prev,
+                {
+                  type: "message",
+                  id: newId,
+                  role: "assistant",
+                  content: event.content!,
+                  isStreaming: true,
+                },
+              ];
+            });
             break;
 
           case "server_tool_start":
             if (event.toolCall) {
-              setTimeline((prev) => [
-                ...prev,
-                {
+              // Finalize any streaming text bubble before the tool — next
+              // content_delta will start a fresh bubble after the tool.
+              setTimeline((prev) => {
+                const next = prev.map((item) =>
+                  item.type === "message" && item.isStreaming
+                    ? { ...item, isStreaming: false }
+                    : item,
+                );
+                next.push({
                   type: "tool",
                   id: `tc_${event.toolCall!.id}`,
                   toolCallId: event.toolCall!.id,
                   toolName: event.toolCall!.name,
                   params: event.toolCall!.arguments ?? {},
                   calling: true,
-                },
-              ]);
+                });
+                return next;
+              });
+              currentAssistantIdRef.current = null;
             }
             break;
 
@@ -145,48 +240,78 @@ export function createChatComponent(
 
           case "interactive_tool_request":
             if (event.toolCalls) {
-              setTimeline((prev) => [
-                ...prev,
-                ...event.toolCalls!.map((tc) => ({
-                  type: "tool" as const,
-                  id: `tc_${tc.id}`,
-                  toolCallId: tc.id,
-                  toolName: tc.name,
-                  params: tc.arguments ?? {},
-                  calling: true,
-                })),
-              ]);
+              // Finalize current text bubble and append the interactive tool
+              // items. After this, the loop pauses until userResponded.
+              setTimeline((prev) => {
+                const next = prev.map((item) =>
+                  item.type === "message" && item.isStreaming
+                    ? { ...item, isStreaming: false }
+                    : item,
+                );
+                for (const tc of event.toolCalls!) {
+                  next.push({
+                    type: "tool",
+                    id: `tc_${tc.id}`,
+                    toolCallId: tc.id,
+                    toolName: tc.name,
+                    params: tc.arguments ?? {},
+                    calling: true,
+                  });
+                }
+                return next;
+              });
+              currentAssistantIdRef.current = null;
             }
             break;
 
           case "done":
-            if (assistantId) {
-              setTimeline((prev) =>
-                prev.map((item) =>
-                  item.type === "message" && item.id === assistantId
-                    ? { ...item, isStreaming: false }
-                    : item,
-                ),
-              );
-            }
+            // Mark any trailing streaming bubble as done.
+            setTimeline((prev) =>
+              prev.map((item) =>
+                item.type === "message" && item.isStreaming
+                  ? { ...item, isStreaming: false }
+                  : item,
+              ),
+            );
             setIsStreaming(false);
+            currentAssistantIdRef.current = null;
             break;
 
           case "error":
-            if (assistantId) {
-              setTimeline((prev) =>
-                prev.map((item) =>
-                  item.type === "message" && item.id === assistantId
-                    ? { ...item, content: item.content || event.error || "Error", isStreaming: false }
+            setTimeline((prev) => {
+              const last = prev[prev.length - 1];
+              if (
+                last &&
+                last.type === "message" &&
+                last.role === "assistant" &&
+                last.isStreaming
+              ) {
+                return prev.map((item, i) =>
+                  i === prev.length - 1 && item.type === "message"
+                    ? {
+                        ...item,
+                        content: item.content || event.error || chatLabels.errorLabel,
+                        isStreaming: false,
+                      }
                     : item,
-                ),
-              );
-            }
+                );
+              }
+              return [
+                ...prev,
+                {
+                  type: "message",
+                  id: `error_${Date.now()}`,
+                  role: "assistant",
+                  content: event.error || chatLabels.errorLabel,
+                },
+              ];
+            });
             setIsStreaming(false);
+            currentAssistantIdRef.current = null;
             break;
         }
       },
-      [],
+      [chatLabels],
     );
 
     // ─── Send message ───────────────────────────────────────────
@@ -220,12 +345,11 @@ export function createChatComponent(
 
           if (!response.ok) throw new Error(`Stream failed: ${response.status}`);
 
-          const assistantMsgId = `assistant_${Date.now()}`;
-          currentAssistantIdRef.current = assistantMsgId;
-          setTimeline((prev) => [
-            ...prev,
-            { type: "message", id: assistantMsgId, role: "assistant", content: "", isStreaming: true },
-          ]);
+          // 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.
+          currentAssistantIdRef.current = null;
 
           const reader = response.body!.getReader();
           const decoder = new TextDecoder();
@@ -260,17 +384,17 @@ export function createChatComponent(
           sessionIdRef.current = null;
           currentAssistantIdRef.current = null;
         } catch (err) {
-          const errorMsg = err instanceof Error ? err.message : "Unknown error";
+          const errorMsg = err instanceof Error ? err.message : chatLabels.errorLabel;
           setTimeline((prev) => [
             ...prev,
-            { type: "message", id: `error_${Date.now()}`, role: "assistant", content: `Error: ${errorMsg}` },
+            { type: "message", id: `error_${Date.now()}`, role: "assistant", content: `${chatLabels.errorLabel}: ${errorMsg}` },
           ]);
           setIsStreaming(false);
           sessionIdRef.current = null;
           currentAssistantIdRef.current = null;
         }
       },
-      [isStreaming, scopeId, messageMutations, processEvent],
+      [isStreaming, scopeId, messageMutations, processEvent, chatLabels],
     );
 
     // ─── Build messages for Chat DS (only user/assistant) ───────
@@ -292,7 +416,7 @@ export function createChatComponent(
         return createElement(ChatToolLog, {
           calling: item.calling,
           label: item.toolName,
-        }, item.calling ? "Wykonuję..." : item.error ?? "Gotowe");
+        }, item.calling ? chatLabels.toolCallingLabel : item.error ?? chatLabels.toolDoneLabel);
       }
 
       if (tool.isServerTool) {
@@ -328,16 +452,12 @@ export function createChatComponent(
         const { sessionId: newSessionId } = respondResult as { sessionId: string };
         if (!newSessionId) return;
 
-        // Connect to new SSE stream for resumed generation
+        // 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;
         setIsStreaming(true);
-
-        const assistantMsgId = `assistant_${Date.now()}`;
-        currentAssistantIdRef.current = assistantMsgId;
-        setTimeline((prev) => [
-          ...prev,
-          { type: "message", id: assistantMsgId, role: "assistant", content: "", isStreaming: true },
-        ]);
+        currentAssistantIdRef.current = null;
 
         try {
           const streamUrl = `/route/chat/${chatName}/stream/${newSessionId}`;
@@ -374,13 +494,15 @@ export function createChatComponent(
             } catch {}
           }
         } catch (err) {
-          setTimeline((prev) =>
-            prev.map((t) =>
-              t.type === "message" && t.id === assistantMsgId
-                ? { ...t, content: `Error: ${err instanceof Error ? err.message : "Unknown"}`, isStreaming: false }
-                : t,
-            ),
-          );
+          setTimeline((prev) => [
+            ...prev,
+            {
+              type: "message",
+              id: `error_${Date.now()}`,
+              role: "assistant",
+              content: `${chatLabels.errorLabel}: ${err instanceof Error ? err.message : chatLabels.errorLabel}`,
+            },
+          ]);
         } finally {
           setIsStreaming(false);
           sessionIdRef.current = null;
@@ -438,13 +560,23 @@ export function createChatComponent(
         ),
         createElement(Chat, {
           messages: [],
-          models: [{ value: "gpt-5.4-nano", label: "GPT-5.4 Nano" }],
-          defaultModel: "gpt-5.4-nano",
+          models: [{ value: "gpt-5.4-mini", label: "GPT-5.4 Mini" }],
+          defaultModel: "gpt-5.4-mini",
           onSend: handleSend,
+          showModelSelector,
+          showWebSearch,
+          renderSendButton,
           disabled: isStreaming || hasWaitingInteractive,
         }),
       ),
     );
+  }
+
+  return function ChatComponent(props: { scope: any; identifyBy: string }) {
+    return createElement(
+      ChatLabelsProvider,
+      { labels, children: createElement(ChatComponentInner, props) },
+    );
   };
 }
 

package/src/tools/ask-questions.tsx

@@ -1,11 +1,15 @@
 import { useEffect } from "react";
 import { tool } from "@arcote.tech/arc-ai";
 import { string, array, object } from "@arcote.tech/arc";
-import { ChatToolQuestion, QuestionTabs, useChatInput } from "@arcote.tech/arc-ds";
+import {
+  ChatToolQuestion,
+  QuestionTabs,
+  useChatInput,
+  useChatLabels,
+} from "@arcote.tech/arc-ds";
 import type { Question, QuestionAnswers } from "@arcote.tech/arc-ds";
 
 type AskQuestionsParams = {
-  readonly comment: string;
   readonly questions: readonly {
     readonly id: string;
     readonly label: string;
@@ -14,6 +18,13 @@ type AskQuestionsParams = {
   }[];
 };
 
+/** Result shape returned by respond() — includes a discuss flag. */
+export interface AskQuestionsResult {
+  answers: QuestionAnswers;
+  /** User clicked "Continue discussion" instead of submitting answers. */
+  wantsToDiscuss: boolean;
+}
+
 function AskQuestionsView({
   params,
   respond,
@@ -21,11 +32,12 @@ function AskQuestionsView({
   result,
 }: {
   params: AskQuestionsParams;
-  respond: (result: QuestionAnswers) => void;
+  respond: (result: AskQuestionsResult) => void;
   calling: boolean;
-  result?: QuestionAnswers;
+  result?: AskQuestionsResult;
 }) {
   const { registerInputOverride, clearInputOverride } = useChatInput();
+  const { answerBelowLabel } = useChatLabels();
 
   useEffect(() => {
     if (calling) {
@@ -39,8 +51,8 @@ function AskQuestionsView({
       registerInputOverride(
         <QuestionTabs
           questions={questions}
-          onSubmit={(answers) => {
-            respond(answers);
+          onSubmit={(answers, { wantsToDiscuss }) => {
+            respond({ answers, wantsToDiscuss });
             clearInputOverride();
           }}
         />,
@@ -52,14 +64,14 @@ function AskQuestionsView({
 
   // Answered — show summary
   if (!calling && result) {
-    const answers = result as Record<string, { selected?: string[]; text?: string }>;
+    const { answers } = result;
+    const entries = Object.entries(answers) as Array<
+      [string, { selected?: string[]; text?: string }]
+    >;
     return (
       <ChatToolQuestion calling={false}>
-        {params.comment && (
-          <p className="text-sm mb-2">{params.comment}</p>
-        )}
         <div className="space-y-1.5">
-          {Object.entries(answers).map(([questionId, answer]) => {
+          {entries.map(([questionId, answer]) => {
             const question = params.questions.find((q) => q.id === questionId);
             const selected = answer?.selected?.length ? answer.selected.join(", ") : "";
             const text = answer?.text || "";
@@ -79,22 +91,29 @@ function AskQuestionsView({
   // Waiting for response
   return (
     <ChatToolQuestion calling={true}>
-      {params.comment && (
-        <p className="text-sm mb-1">{params.comment}</p>
-      )}
-      <p className="text-xs text-muted-foreground">
-        Odpowiedz na pytania poniżej
-      </p>
+      <p className="text-xs text-muted-foreground">{answerBelowLabel}</p>
     </ChatToolQuestion>
   );
 }
 
 export const askQuestions = tool("askQuestions")
   .description(
-    "Zadaj użytkownikowi pytania z predefiniowanymi odpowiedziami. ZAWSZE podaj comment — krótki, entuzjastyczny komentarz do tego co użytkownik napisał.",
+    "Zadaj użytkownikowi **zamknięte** pytanie z predefiniowanymi opcjami — " +
+    "gdy wiesz jakich konkretnie odpowiedzi się spodziewasz i możesz je " +
+    "wymienić jako 3–6 opcji (np. preferowany ton, zakres tematyczny, " +
+    "formalność). Każde pytanie ma id, label, description i tablicę opcji. " +
+    "Komentarz/insight napisz jako zwykły tekst PRZED wywołaniem toola — " +
+    "nie wkładaj komentarzy do parametrów.\n\n" +
+    "NIE używaj do otwartych pytań narracyjnych (np. 'opowiedz o swoim " +
+    "zespole', 'opisz przełomowy moment') — na te pytaj zwykłym tekstem " +
+    "w jednym zdaniu, użytkownik odpowie własnymi słowami.\n\n" +
+    "Tool result: `{ answers, wantsToDiscuss }`. Gdy `wantsToDiscuss === true` " +
+    "— user kliknął 'Kontynuuj rozmowę' zamiast odpowiadać. W TEJ turze NIE " +
+    "wolno wołać żadnego toola (ani askQuestions ani innego). Zwróć zwykły " +
+    "tekst: krótkie podsumowanie (2-3 zdania) + jedno open-ended pytanie " +
+    "w prozie.",
   )
   .withParams({
-    comment: string(),
     questions: array(
       object({
         id: string(),