@arcote.tech/arc-chat 0.5.1 → 0.5.5

package/src/react/chat-component.tsx

@@ -0,0 +1,589 @@
+import { useState, useCallback, 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 { 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 =
+  | { 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 };
+
+export function createChatComponent(
+  config: ChatComponentConfig,
+): ComponentType<{ scope: any; identifyBy: string }> {
+  const {
+    chatName,
+    tools,
+    messageElementName,
+    showModelSelector = true,
+    showWebSearch = true,
+    renderSendButton,
+    labels,
+  } = config;
+  const toolsMap = new Map(tools.map((t) => [t.name, t]));
+
+  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);
+    const currentAssistantIdRef = useRef<string | null>(null);
+    const lastHistoryLenRef = useRef(0);
+
+    const queries = scope.useQuery();
+    const mutations = scope.useMutation();
+    const messageQueries = queries[messageElementName];
+    const messageMutations = mutations[messageElementName];
+
+    const scopeId = identifyBy;
+    const historyResult = scopeId && messageQueries?.getByScope
+      ? messageQueries.getByScope({ scopeId })
+      : [undefined, false];
+    const historyData = historyResult?.[0];
+    const historyLen = historyData?.length ?? 0;
+
+    // ─── Restore timeline from DB history ───────────────────────
+    useEffect(() => {
+      if (isStreaming || !historyData || historyLen === 0) return;
+      if (historyLen === lastHistoryLenRef.current) return;
+      lastHistoryLenRef.current = historyLen;
+
+      const resultIds = new Set<string>();
+      const resultMap = new Map<string, { content: string; isError?: boolean }>();
+      for (const msg of historyData) {
+        if (msg.role === "tool_result" && msg.toolCallId) {
+          resultIds.add(msg.toolCallId);
+          resultMap.set(msg.toolCallId, { content: msg.content, isError: msg.isError });
+        }
+      }
+
+      const items: TimelineItem[] = [];
+      let hasActiveGeneration = false;
+
+      for (const msg of historyData) {
+        // 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: "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;
+        }
+      }
+
+      setTimeline(items);
+      if (!isStreaming && hasActiveGeneration) {
+        setIsStreaming(true);
+      }
+    }, [historyLen, isStreaming]);
+
+    // ─── SSE event processing ───────────────────────────────────
+    const processEvent = useCallback(
+      async (event: ChatStreamEvent) => {
+        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.
+            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) {
+              // 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;
+
+          case "server_tool_result":
+            if (event.toolResult) {
+              setTimeline((prev) =>
+                prev.map((item) =>
+                  item.type === "tool" && item.toolCallId === event.toolResult!.toolCallId
+                    ? {
+                        ...item,
+                        result: tryParseJson(event.toolResult!.content),
+                        calling: false,
+                        error: event.toolResult!.isError ? event.toolResult!.content : undefined,
+                      }
+                    : item,
+                ),
+              );
+            }
+            break;
+
+          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 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":
+            // 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":
+            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 ───────────────────────────────────────────
+    const handleSend = useCallback(
+      async (content: string, options: SendMessageOptions) => {
+        if (isStreaming || !scopeId) return;
+
+        setIsStreaming(true);
+
+        const userMsgId = `user_${Date.now()}`;
+        setTimeline((prev) => [
+          ...prev,
+          { type: "message", id: userMsgId, role: "user", content },
+        ]);
+
+        try {
+          const sendResult = await messageMutations.sendMessage({
+            scopeId,
+            content,
+            model: options.model,
+          });
+
+          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.
+          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 {}
+          }
+
+          setIsStreaming(false);
+          sessionIdRef.current = null;
+          currentAssistantIdRef.current = null;
+        } catch (err) {
+          const errorMsg = err instanceof Error ? err.message : chatLabels.errorLabel;
+          setTimeline((prev) => [
+            ...prev,
+            { type: "message", id: `error_${Date.now()}`, role: "assistant", content: `${chatLabels.errorLabel}: ${errorMsg}` },
+          ]);
+          setIsStreaming(false);
+          sessionIdRef.current = null;
+          currentAssistantIdRef.current = null;
+        }
+      },
+      [isStreaming, scopeId, messageMutations, processEvent, chatLabels],
+    );
+
+    // ─── Build messages for Chat DS (only user/assistant) ───────
+    const chatMessages: ChatMessageData[] = timeline
+      .filter((item): item is TimelineItem & { type: "message" } => item.type === "message")
+      .map((item) => ({
+        id: item.id,
+        role: item.role,
+        content: item.content,
+        isStreaming: item.isStreaming,
+      }));
+
+    // ─── Render tool view ───────────────────────────────────────
+    const renderToolItem = (item: TimelineItem & { type: "tool" }) => {
+      const tool = toolsMap.get(item.toolName);
+      const ViewComponent = tool?.viewComponent;
+
+      if (!ViewComponent) {
+        return createElement(ChatToolLog, {
+          calling: item.calling,
+          label: item.toolName,
+        }, item.calling ? chatLabels.toolCallingLabel : item.error ?? chatLabels.toolDoneLabel);
+      }
+
+      if (tool.isServerTool) {
+        return createElement(ViewComponent, {
+          params: item.params,
+          result: item.result,
+          calling: item.calling,
+          error: item.error,
+        });
+      }
+
+      // Interactive tool
+      const respond = async (result: unknown) => {
+        if (!scopeId) return;
+
+        // Update timeline immediately
+        setTimeline((prev) =>
+          prev.map((t) =>
+            t.type === "tool" && t.toolCallId === item.toolCallId
+              ? { ...t, calling: false, result }
+              : t,
+          ),
+        );
+
+        // Send response — returns new sessionId for SSE
+        const respondResult = await messageMutations.respondToTool({
+          scopeId,
+          toolCallId: item.toolCallId,
+          toolName: item.toolName,
+          result: JSON.stringify(result),
+        });
+
+        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;
+        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 {}
+          }
+        } catch (err) {
+          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;
+          currentAssistantIdRef.current = null;
+        }
+      };
+
+      return createElement(ViewComponent, {
+        params: item.params,
+        respond,
+        calling: item.calling,
+        result: item.result,
+      });
+    };
+
+    // ─── Render full timeline ───────────────────────────────────
+    // Streaming message renders last (after tools) for correct visual order
+    const sortedTimeline = [...timeline].sort((a, b) => {
+      const aStreaming = a.type === "message" && a.isStreaming ? 1 : 0;
+      const bStreaming = b.type === "message" && b.isStreaming ? 1 : 0;
+      return aStreaming - bStreaming;
+    });
+
+    const timelineElements: ReactNode[] = [];
+    for (const item of sortedTimeline) {
+      if (item.type === "message") {
+        timelineElements.push(
+          createElement(ChatMessage, {
+            key: item.id,
+            message: { id: item.id, role: item.role, content: item.content, isStreaming: item.isStreaming },
+          }),
+        );
+      } else if (item.type === "tool") {
+        timelineElements.push(
+          createElement("div", { key: item.id }, renderToolItem(item)),
+        );
+      }
+    }
+
+    // Check if any interactive tool is waiting for response
+    const hasWaitingInteractive = timeline.some(
+      (item) => item.type === "tool" && item.calling && !toolsMap.get(item.toolName)?.isServerTool,
+    );
+
+    return createElement(
+      ChatInputProvider,
+      null,
+      createElement(
+        "div",
+        { className: "flex flex-col h-full" },
+        createElement(
+          "div",
+          { className: "max-w-3xl mx-auto w-full space-y-4 flex-1" },
+          ...timelineElements,
+        ),
+        createElement(Chat, {
+          messages: [],
+          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) },
+    );
+  };
+}
+
+function tryParseJson(str: string): unknown {
+  try {
+    return JSON.parse(str);
+  } catch {
+    return str;
+  }
+}

package/src/react/index.ts

@@ -10,6 +10,5 @@ export type {
   QuestionAnswers,
 } from "@arcote.tech/arc-ds";
 
-// Chat hook
-export { useChat } from "./use-chat";
-export type { UseChatConfig, UseChatReturn } from "./use-chat";
+// Internal — chat component factory (used by chat-builder.ts toReactComponent)
+export { createChatComponent } from "./chat-component";