devnonla-ui 0.1.0

package/src/chat/common/useAgentStream.ts

@@ -0,0 +1,351 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { parseSseStream } from "./sse";
+import type { AgentHistoryMessage, AgentMessage, AgentPanelEndpoint, AgentToolAction } from "./types";
+import { formatToolName } from "./utils";
+
+let _id = 0;
+function nextId(prefix: string) {
+  return `${prefix}-${Date.now()}-${++_id}`;
+}
+
+function thinkingDurationSec(startedAt: number): number {
+  if (!startedAt) return 0;
+  return Math.round((Date.now() - startedAt) / 1000);
+}
+
+export function buildAgentHistory(messages: AgentMessage[]): AgentHistoryMessage[] {
+  return messages
+    .filter((m) => {
+      if (m.role === "user") return m.content.trim() !== "";
+      if (m.role === "assistant") return m.content.trim() !== "";
+      if (m.role === "tool-call") return m.toolOutput != null;
+      return false;
+    })
+    .map((m) => {
+      if (m.role === "tool-call") {
+        return {
+          role: "tool-call" as const,
+          content: "" as const,
+          toolCallId: m.toolCallId,
+          toolName: m.toolName,
+          toolInput: m.toolInput,
+          toolOutput: m.toolOutput,
+        };
+      }
+      return { role: m.role as "user" | "assistant", content: m.content };
+    });
+}
+
+function finalizeStreaming(prev: AgentMessage[]): AgentMessage[] {
+  return prev
+    .map((m) => {
+      if (m.role === "assistant" && m.streaming) {
+        if (!m.content.trim() && m.meta?.thinking) {
+          return {
+            ...m,
+            role: "thinking" as const,
+            content: String(m.meta.thinking),
+            streaming: false,
+          };
+        }
+        return { ...m, streaming: false };
+      }
+      return m;
+    })
+    .filter((m) => !(m.role === "assistant" && !m.content.trim() && !m.meta?.thinking));
+}
+
+function failOpenTools(prev: AgentMessage[], error: string): AgentMessage[] {
+  return prev.map((m) => {
+    if (m.role !== "tool-call" || m.toolOutput != null || m.toolError) return m;
+    return { ...m, toolError: error, toolOutput: JSON.stringify({ success: false, error }) };
+  });
+}
+
+export type UseAgentStreamOptions = {
+  endpoint: AgentPanelEndpoint;
+  extraBody?: Record<string, unknown> | (() => Record<string, unknown>);
+  headers?: Record<string, string>;
+  fetcher?: typeof fetch;
+  initialMessages?: AgentMessage[];
+  onToolAction?: (event: AgentToolAction) => void;
+};
+
+export function useAgentStream({ endpoint, extraBody, headers, fetcher = fetch, initialMessages, onToolAction }: UseAgentStreamOptions) {
+  const [messages, setMessages] = useState<AgentMessage[]>(() => initialMessages ?? []);
+  const [generating, setGenerating] = useState(false);
+  const thinkingRef = useRef("");
+  const thinkingStartRef = useRef(0);
+  const abortRef = useRef<AbortController | null>(null);
+  const onToolActionRef = useRef(onToolAction);
+  onToolActionRef.current = onToolAction;
+  const extraBodyRef = useRef(extraBody);
+  extraBodyRef.current = extraBody;
+  const endpointRef = useRef(endpoint);
+  endpointRef.current = endpoint;
+
+  useEffect(() => {
+    return () => {
+      abortRef.current?.abort();
+      abortRef.current = null;
+    };
+  }, []);
+
+  const cancel = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Cancelled")));
+    setGenerating(false);
+    thinkingRef.current = "";
+    thinkingStartRef.current = 0;
+  }, []);
+
+  const clear = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setMessages([]);
+    setGenerating(false);
+    thinkingRef.current = "";
+    thinkingStartRef.current = 0;
+  }, []);
+
+  const send = useCallback(
+    async (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed || generating) return;
+
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      const userMsg: AgentMessage = { id: nextId("u"), role: "user", content: trimmed, timestamp: new Date() };
+      const assistantId = nextId("a");
+      const assistantMsg: AgentMessage = { id: assistantId, role: "assistant", content: "", streaming: true, timestamp: new Date() };
+      const historySnapshot = messages;
+
+      setMessages((prev) => [...prev, userMsg, assistantMsg]);
+      setGenerating(true);
+      thinkingRef.current = "";
+      thinkingStartRef.current = 0;
+
+      const history = buildAgentHistory(historySnapshot);
+      let assistantText = "";
+      let currentId = assistantId;
+      let needsNewBubble = false;
+
+      const freezeOpen = () => {
+        const freezeId = currentId;
+        if (freezeId) {
+          const thinkingSnapshot = thinkingRef.current;
+          const liveDuration = thinkingStartRef.current > 0 ? thinkingDurationSec(thinkingStartRef.current) : undefined;
+          if (assistantText.trim()) {
+            setMessages((prev) =>
+              prev.map((m) => {
+                if (m.id !== freezeId) return m;
+                const existing = typeof m.meta?.thinkingDuration === "number" ? m.meta.thinkingDuration : undefined;
+                return {
+                  ...m,
+                  content: assistantText,
+                  streaming: false,
+                  meta: thinkingSnapshot ? { ...m.meta, thinking: thinkingSnapshot, thinkingDuration: liveDuration ?? existing ?? 0 } : m.meta,
+                };
+              }),
+            );
+          } else if (thinkingSnapshot) {
+            setMessages((prev) =>
+              prev.map((m) =>
+                m.id === freezeId
+                  ? {
+                      id: freezeId,
+                      role: "thinking" as const,
+                      content: thinkingSnapshot,
+                      streaming: false,
+                      timestamp: m.timestamp,
+                      meta: { thinking: thinkingSnapshot, thinkingDuration: liveDuration ?? 0 },
+                    }
+                  : m,
+              ),
+            );
+          } else {
+            setMessages((prev) => prev.filter((m) => m.id !== freezeId));
+          }
+        }
+        thinkingRef.current = "";
+        thinkingStartRef.current = 0;
+        assistantText = "";
+        currentId = "";
+        needsNewBubble = true;
+      };
+
+      const ensureBubble = (seed?: { content?: string; thinking?: string }): string => {
+        if (!needsNewBubble && currentId) return currentId;
+        const newId = nextId("a");
+        currentId = newId;
+        needsNewBubble = false;
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: newId,
+            role: "assistant",
+            content: seed?.content ?? "",
+            streaming: true,
+            timestamp: new Date(),
+            meta: seed?.thinking ? { thinking: seed.thinking } : undefined,
+          },
+        ]);
+        return newId;
+      };
+
+      const stampThinkingDuration = () => {
+        if (!thinkingRef.current || !thinkingStartRef.current) return;
+        const duration = thinkingDurationSec(thinkingStartRef.current);
+        const targetId = currentId;
+        if (targetId) {
+          setMessages((prev) => prev.map((m) => (m.id === targetId ? { ...m, meta: { ...m.meta, thinkingDuration: duration } } : m)));
+        }
+        thinkingStartRef.current = 0;
+      };
+
+      try {
+        const extra = typeof extraBodyRef.current === "function" ? extraBodyRef.current() : extraBodyRef.current;
+        const payload = [...history, { role: "user" as const, content: trimmed }];
+        const ep = endpointRef.current;
+        const response =
+          typeof ep === "function"
+            ? await ep({ messages: payload, signal: controller.signal })
+            : await fetcher(ep, {
+                method: "POST",
+                credentials: "include",
+                headers: { "Content-Type": "application/json", ...headers },
+                body: JSON.stringify({ messages: payload, ...extra }),
+                signal: controller.signal,
+              });
+
+        if (!response.ok || !response.body) {
+          const errText = await response.text();
+          throw new Error(errText || `HTTP ${response.status}`);
+        }
+
+        const result = await parseSseStream(
+          response.body,
+          {
+            onTextDelta: (delta) => {
+              stampThinkingDuration();
+              if (needsNewBubble || !currentId) {
+                assistantText = delta;
+                thinkingRef.current = "";
+                thinkingStartRef.current = 0;
+                ensureBubble({ content: delta });
+              } else {
+                assistantText += delta;
+                const targetId = currentId;
+                setMessages((prev) => prev.map((m) => (m.id === targetId ? { ...m, content: assistantText, streaming: true } : m)));
+              }
+            },
+            onThinkingDelta: (delta) => {
+              if (needsNewBubble || !currentId) {
+                thinkingRef.current = delta;
+                thinkingStartRef.current = Date.now();
+                assistantText = "";
+                ensureBubble({ thinking: delta });
+                return;
+              }
+              if (!thinkingRef.current) thinkingStartRef.current = Date.now();
+              thinkingRef.current += delta;
+              const thinking = thinkingRef.current;
+              const targetId = currentId;
+              setMessages((prev) => prev.map((m) => (m.id === targetId ? { ...m, meta: { ...m.meta, thinking } } : m)));
+            },
+            onToolCall: (event) => {
+              const label = event.toolLabel ? (event.toolLabel.includes(" ") ? event.toolLabel : formatToolName(event.toolLabel)) : formatToolName(event.toolName);
+              freezeOpen();
+              setMessages((prev) => [
+                ...prev,
+                {
+                  id: nextId("tc"),
+                  role: "tool-call",
+                  content: event.toolName,
+                  toolCallId: event.toolCallId,
+                  toolName: event.toolName,
+                  toolLabel: label,
+                  toolInput: event.input,
+                  timestamp: new Date(),
+                },
+              ]);
+              onToolActionRef.current?.({ type: "tool-call", toolName: event.toolName, toolLabel: label, input: event.input });
+            },
+            onToolResult: (event) => {
+              const raw = event.result;
+              const resultStr = typeof raw === "string" ? raw : JSON.stringify(raw);
+              setMessages((prev) => {
+                let matchIdx = -1;
+                if (event.toolCallId) {
+                  matchIdx = prev.findIndex((m) => m.role === "tool-call" && m.toolCallId === event.toolCallId && m.toolOutput == null);
+                }
+                if (matchIdx === -1) {
+                  const rev = [...prev].reverse().findIndex((m) => m.role === "tool-call" && m.toolName === event.toolName && !m.toolOutput);
+                  matchIdx = rev === -1 ? -1 : prev.length - 1 - rev;
+                }
+                if (matchIdx === -1) return prev;
+                return prev.map((m, i) => (i === matchIdx ? { ...m, toolOutput: resultStr } : m));
+              });
+              onToolActionRef.current?.({ type: "tool-result", toolName: event.toolName, output: raw });
+            },
+            onDone: () => {
+              setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Tool did not return a result")));
+              setGenerating(false);
+              thinkingRef.current = "";
+              thinkingStartRef.current = 0;
+            },
+            onError: (error) => {
+              if (error === "Connection lost") {
+                setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Connection lost")));
+                setGenerating(false);
+                thinkingRef.current = "";
+                thinkingStartRef.current = 0;
+                return;
+              }
+              setMessages((prev) => [
+                ...finalizeStreaming(failOpenTools(prev, error === "cancelled" ? "Cancelled" : error)),
+                ...(error === "cancelled" ? [] : [{ id: nextId("err"), role: "error" as const, content: error, timestamp: new Date() }]),
+              ]);
+              setGenerating(false);
+              thinkingRef.current = "";
+              thinkingStartRef.current = 0;
+            },
+          },
+          { signal: controller.signal },
+        );
+
+        if (result === "aborted") {
+          setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Cancelled")));
+          setGenerating(false);
+          thinkingRef.current = "";
+          thinkingStartRef.current = 0;
+          return;
+        }
+
+        setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Tool did not return a result")));
+        setGenerating(false);
+      } catch (err: unknown) {
+        if ((err as Error)?.name === "AbortError") {
+          setMessages((prev) => finalizeStreaming(failOpenTools(prev, "Cancelled")));
+          setGenerating(false);
+          thinkingRef.current = "";
+          thinkingStartRef.current = 0;
+          return;
+        }
+        setMessages((prev) => [
+          ...finalizeStreaming(failOpenTools(prev, err instanceof Error ? err.message : String(err))),
+          { id: nextId("err"), role: "error", content: err instanceof Error ? err.message : String(err), timestamp: new Date() },
+        ]);
+        setGenerating(false);
+      } finally {
+        abortRef.current = null;
+      }
+    },
+    [generating, messages, fetcher, headers],
+  );
+
+  return { messages, generating, send, cancel, clear };
+}

package/src/chat/common/utils.ts

@@ -0,0 +1,73 @@
+/** snake_case / camelCase → Title Case (e.g. edit_code → Edit Code). */
+export function formatToolName(name: string): string {
+  return name
+    .replace(/([A-Z])/g, " $1")
+    .replace(/[_-]+/g, " ")
+    .trim()
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export function prettyJson(raw: unknown): string {
+  if (typeof raw === "string") {
+    try {
+      return JSON.stringify(JSON.parse(raw), null, 2);
+    } catch {
+      return raw;
+    }
+  }
+  try {
+    return JSON.stringify(raw, null, 2);
+  } catch {
+    return String(raw);
+  }
+}
+
+export function hasMeaningfulInput(input: unknown): boolean {
+  if (input == null) return false;
+  if (typeof input === "string") {
+    const trimmed = input.trim();
+    return trimmed.length > 0 && trimmed !== "{}" && trimmed !== "[]";
+  }
+  if (Array.isArray(input)) return input.length > 0;
+  if (typeof input === "object") return Object.keys(input as object).length > 0;
+  return true;
+}
+
+export function parseJsonObject<T extends object>(raw: unknown): T | null {
+  if (raw == null) return null;
+  if (typeof raw === "object") return raw as T;
+  if (typeof raw !== "string") return null;
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (parsed && typeof parsed === "object") return parsed as T;
+  } catch {
+    /* ignore */
+  }
+  return null;
+}
+
+const CALL_AGENT_PREFIX = "call_agent__";
+
+/** True for legacy `call_agent` and per-target `call_agent__<uuid>` tools. */
+export function isCallAgentToolName(name: string | null | undefined): boolean {
+  if (!name) return false;
+  return name === "call_agent" || name.startsWith(CALL_AGENT_PREFIX);
+}
+
+/** Reconstruct target agent UUID from `call_agent__<uuid_with_underscores>`. */
+export function parseCallAgentToolTargetId(toolName: string): string | null {
+  if (!toolName.startsWith(CALL_AGENT_PREFIX)) return null;
+  const parts = toolName.slice(CALL_AGENT_PREFIX.length).split("_");
+  if (parts.length !== 5) return null;
+  return parts.join("-");
+}
+
+export function timestampMs(value: unknown): number {
+  if (value instanceof Date) return value.getTime();
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const parsed = Date.parse(value);
+    if (!Number.isNaN(parsed)) return parsed;
+  }
+  return Date.now();
+}

package/src/chat/index.ts

@@ -0,0 +1,56 @@
+export { ChatThinking } from "./message-ui/ChatThinking";
+export type { ChatThinkingProps } from "./message-ui/ChatThinking";
+
+export { ChatUserMessage } from "./message-ui/ChatUserMessage";
+export type { ChatUserMessageProps } from "./message-ui/ChatUserMessage";
+
+export { ChatAgentMessage } from "./message-ui/ChatAgentMessage";
+export type { ChatAgentMessageProps } from "./message-ui/ChatAgentMessage";
+
+export { ChatError } from "./message-ui/ChatError";
+export type { ChatErrorProps } from "./message-ui/ChatError";
+
+export { ChatToolCall } from "./tool-ui/ChatToolCall";
+export type { ChatToolCallProps } from "./tool-ui/ChatToolCall";
+
+export { resolveToolUI } from "./tool-ui/registry";
+export type { ToolUIProps, ChatToolMessage } from "./tool-ui/types";
+export { CallAgentToolUI } from "./tool-ui/CallAgentToolUI";
+export { WebFetchToolUI } from "./tool-ui/WebFetchToolUI";
+export { GetCurrentTimeToolUI } from "./tool-ui/GetCurrentTimeToolUI";
+export { ReadSkillToolUI } from "./tool-ui/ReadSkillToolUI";
+export { RunJsToolUI } from "./tool-ui/RunJsToolUI";
+export { BackgroundTaskToolUI } from "./tool-ui/BackgroundTaskToolUI";
+export { BackgroundTasksBar } from "./tool-ui/BackgroundTasksBar";
+export { ToolUiTrailing } from "./tool-ui/ToolUiTrailing";
+export type { BackgroundTasksBarProps } from "./tool-ui/BackgroundTasksBar";
+
+export { ChatInput } from "./message-ui/ChatInput";
+export type { ChatInputProps } from "./message-ui/ChatInput";
+
+export { ChatWelcome } from "./message-ui/ChatWelcome";
+export type { ChatWelcomeProps } from "./message-ui/ChatWelcome";
+
+export { ChatSpinner } from "./message-ui/ChatSpinner";
+
+export { ChatMarkdown, createChatMarkdownComponents, chatMarkdownComponents, chatMarkdownClass, chatBodyClass } from "./message-ui/ChatMarkdown";
+export type { ChatMarkdownProps, ChatMarkdownStreamState } from "./message-ui/ChatMarkdown";
+
+export { MermaidBlock } from "./message-ui/MermaidBlock";
+export type { MermaidBlockProps } from "./message-ui/MermaidBlock";
+
+export { AgentPanel } from "./AgentPanel";
+export type { AgentPanelProps } from "./AgentPanel";
+
+export { useAgentStream, buildAgentHistory } from "./common/useAgentStream";
+export type { UseAgentStreamOptions } from "./common/useAgentStream";
+
+export { parseSseStream, normalizeSseEvent } from "./common/sse";
+export type { AgentSseEvent, AgentSseCallbacks, ParseSseResult } from "./common/sse";
+
+export type { AgentMessage, AgentMessageRole, AgentHistoryMessage, AgentStreamRequest, AgentPanelEndpoint, AgentToolAction } from "./common/types";
+
+export { formatToolName, prettyJson, isCallAgentToolName, parseCallAgentToolTargetId } from "./common/utils";
+
+export { parseBgTaskRef, formatBgElapsed } from "./common/bgTasks";
+export type { ChatBgTask, ChatBgTaskStatus } from "./common/bgTasks";

package/src/chat/message-ui/ChatAgentMessage.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+import { ChatThinking } from "./ChatThinking";
+
+export type ChatAgentMessageProps = {
+  /** Plain text fallback when `children` is omitted. */
+  content?: string;
+  /** Prefer passing rendered markdown / rich content as children. */
+  children?: ReactNode;
+  thinking?: string;
+  thinkingDuration?: number;
+  thinkingStreaming?: boolean;
+  className?: string;
+};
+
+export function ChatAgentMessage({ content, children, thinking, thinkingDuration, thinkingStreaming, className }: ChatAgentMessageProps) {
+  const body = children ?? (content ? <p className="m-0 whitespace-pre-wrap wrap-break-word">{content}</p> : null);
+
+  return (
+    <div className={cn("nonla-chat-agent mt-1", className)}>
+      {thinking ? <ChatThinking thinking={thinking} duration={thinkingDuration ?? 0} streaming={thinkingStreaming} /> : null}
+      {body ? (
+        <div className="min-w-0 px-4 pb-0.5">
+          <div className="nonla-chat-body text-(length:--chat-body-size) leading-(--chat-body-leading) text-[var(--nonla-ink)]">{body}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/chat/message-ui/ChatError.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export type ChatErrorProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function ChatError({ children, className }: ChatErrorProps) {
+  return (
+    <div className={cn("nonla-chat-error px-4 py-1", className)}>
+      <div
+        role="alert"
+        className="flex items-center gap-2 rounded-lg border border-destructive/40 bg-[color-mix(in_oklab,var(--destructive)_14%,var(--nonla-surface))] px-3 py-2 text-(length:--chat-body-size) leading-(--chat-body-leading) text-destructive"
+      >
+        <svg className="size-4 shrink-0" viewBox="0 0 16 16" fill="none" aria-hidden>
+          <circle cx="8" cy="8" r="5.75" stroke="currentColor" strokeWidth="1.4" />
+          <path d="M6 6l4 4M10 6l-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+        </svg>
+        <div className="min-w-0">{children}</div>
+      </div>
+    </div>
+  );
+}