@arcote.tech/arc-chat 0.5.1 → 0.5.2

package/src/react/chat-component.tsx

@@ -0,0 +1,457 @@
+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";
+
+interface ChatComponentConfig {
+  chatName: string;
+  tools: ArcToolAny[];
+  messageElementName: string;
+}
+
+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 } = config;
+  const toolsMap = new Map(tools.map((t) => [t.name, t]));
+
+  return function ChatComponent({ scope, identifyBy }: { scope: any; identifyBy: string }) {
+    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) {
+        if (msg.role === "user" || msg.role === "assistant") {
+          if (msg.isGenerating && !msg.content) {
+            if (msg.sessionId) sessionIdRef.current = msg.sessionId;
+            hasActiveGeneration = msg.isGenerating === true;
+            continue;
+          }
+          items.push({
+            type: "message",
+            id: msg._id,
+            role: msg.role,
+            content: msg.content,
+            isStreaming: msg.isGenerating === true,
+          });
+          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,
+          });
+        }
+      }
+
+      setTimeline(items);
+      if (!isStreaming && hasActiveGeneration) {
+        setIsStreaming(true);
+      }
+    }, [historyLen, isStreaming]);
+
+    // ─── 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
+                    ? { ...item, content: item.content + event.content }
+                    : item,
+                ),
+              );
+            }
+            break;
+
+          case "server_tool_start":
+            if (event.toolCall) {
+              setTimeline((prev) => [
+                ...prev,
+                {
+                  type: "tool",
+                  id: `tc_${event.toolCall!.id}`,
+                  toolCallId: event.toolCall!.id,
+                  toolName: event.toolCall!.name,
+                  params: event.toolCall!.arguments ?? {},
+                  calling: true,
+                },
+              ]);
+            }
+            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) {
+              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,
+                })),
+              ]);
+            }
+            break;
+
+          case "done":
+            if (assistantId) {
+              setTimeline((prev) =>
+                prev.map((item) =>
+                  item.type === "message" && item.id === assistantId
+                    ? { ...item, isStreaming: false }
+                    : item,
+                ),
+              );
+            }
+            setIsStreaming(false);
+            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 }
+                    : item,
+                ),
+              );
+            }
+            setIsStreaming(false);
+            break;
+        }
+      },
+      [],
+    );
+
+    // ─── 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}`);
+
+          const assistantMsgId = `assistant_${Date.now()}`;
+          currentAssistantIdRef.current = assistantMsgId;
+          setTimeline((prev) => [
+            ...prev,
+            { type: "message", id: assistantMsgId, role: "assistant", content: "", isStreaming: true },
+          ]);
+
+          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 : "Unknown error";
+          setTimeline((prev) => [
+            ...prev,
+            { type: "message", id: `error_${Date.now()}`, role: "assistant", content: `Error: ${errorMsg}` },
+          ]);
+          setIsStreaming(false);
+          sessionIdRef.current = null;
+          currentAssistantIdRef.current = null;
+        }
+      },
+      [isStreaming, scopeId, messageMutations, processEvent],
+    );
+
+    // ─── 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 ? "Wykonuję..." : item.error ?? "Gotowe");
+      }
+
+      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
+        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 },
+        ]);
+
+        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.map((t) =>
+              t.type === "message" && t.id === assistantMsgId
+                ? { ...t, content: `Error: ${err instanceof Error ? err.message : "Unknown"}`, isStreaming: false }
+                : t,
+            ),
+          );
+        } 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-nano", label: "GPT-5.4 Nano" }],
+          defaultModel: "gpt-5.4-nano",
+          onSend: handleSend,
+          disabled: isStreaming || hasWaitingInteractive,
+        }),
+      ),
+    );
+  };
+}
+
+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";