@openhex-ai/agent-sdk 0.0.1 → 0.1.0

package/dist/react/index.js

@@ -0,0 +1,1529 @@
+// src/react/ChatWidget.tsx
+import { useCallback as useCallback3, useState as useState3 } from "react";
+
+// src/react/ChatBox.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useLayoutEffect,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/react/useOpenhexChat.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+// src/chat/events.ts
+function isAgentRecord(record) {
+  return record.sender === "assistant" || record.sender === "agent";
+}
+function isTurnComplete(record) {
+  return isAgentRecord(record) && record.raw?.type === "result";
+}
+function contentBlocks(record) {
+  const msg = record.raw.message;
+  if (msg && typeof msg === "object" && Array.isArray(msg.content)) {
+    return msg.content;
+  }
+  return [];
+}
+function extractText(record) {
+  if (record.raw?.type === "user" && typeof record.raw.message === "string") {
+    return record.raw.message;
+  }
+  return contentBlocks(record).filter((b) => b.type === "text").map((b) => b.text).join("");
+}
+function extractToolCalls(record) {
+  return contentBlocks(record).filter((b) => b.type === "tool_use").map((b) => ({ id: b.id, name: b.name, input: b.input }));
+}
+
+// src/http/sse.ts
+function fieldValue(raw) {
+  return raw.startsWith(" ") ? raw.slice(1) : raw;
+}
+async function* parseSSEStream(stream, signal) {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let dataLines = [];
+  let eventType;
+  let lastId;
+  const onAbort = () => {
+    reader.cancel().catch(() => {
+    });
+  };
+  if (signal) {
+    if (signal.aborted) onAbort();
+    else signal.addEventListener("abort", onAbort, { once: true });
+  }
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      let nlIndex;
+      while ((nlIndex = buffer.indexOf("\n")) !== -1) {
+        let line = buffer.slice(0, nlIndex);
+        buffer = buffer.slice(nlIndex + 1);
+        if (line.endsWith("\r")) line = line.slice(0, -1);
+        if (line === "") {
+          if (dataLines.length > 0) {
+            yield { id: lastId, event: eventType, data: dataLines.join("\n") };
+          }
+          dataLines = [];
+          eventType = void 0;
+          continue;
+        }
+        if (line.startsWith(":")) continue;
+        const colon = line.indexOf(":");
+        const field = colon === -1 ? line : line.slice(0, colon);
+        const rawVal = colon === -1 ? "" : line.slice(colon + 1);
+        const val = fieldValue(rawVal);
+        switch (field) {
+          case "data":
+            dataLines.push(val);
+            break;
+          case "id":
+            lastId = val;
+            break;
+          case "event":
+            eventType = val;
+            break;
+        }
+      }
+    }
+    if (dataLines.length > 0) {
+      yield { id: lastId, event: eventType, data: dataLines.join("\n") };
+    }
+  } finally {
+    signal?.removeEventListener("abort", onAbort);
+    reader.releaseLock();
+  }
+}
+
+// src/http/backoff.ts
+var Backoff = class {
+  attempt = 0;
+  initialMs;
+  maxMs;
+  factor;
+  constructor(opts = {}) {
+    this.initialMs = opts.initialMs ?? 1e3;
+    this.maxMs = opts.maxMs ?? 15e3;
+    this.factor = opts.factor ?? 2;
+  }
+  /** Next delay in ms (advances the attempt counter). */
+  next() {
+    const delay2 = Math.min(this.maxMs, this.initialMs * Math.pow(this.factor, this.attempt));
+    this.attempt += 1;
+    return delay2;
+  }
+  /** Reset after a successful connection. */
+  reset() {
+    this.attempt = 0;
+  }
+};
+function delay(ms, signal) {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) return reject(new DOMException("Aborted", "AbortError"));
+    const timer = setTimeout(() => {
+      signal?.removeEventListener("abort", onAbort);
+      resolve();
+    }, ms);
+    const onAbort = () => {
+      clearTimeout(timer);
+      reject(new DOMException("Aborted", "AbortError"));
+    };
+    signal?.addEventListener("abort", onAbort, { once: true });
+  });
+}
+
+// src/errors.ts
+var OpenhexSdkError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "OpenhexSdkError";
+  }
+};
+var AuthenticationError = class extends OpenhexSdkError {
+  constructor(message = "No Openhex API key provided. Set OPENHEX_API_KEY or pass { apiKey }.") {
+    super(message);
+    this.name = "AuthenticationError";
+  }
+};
+var ApiError = class extends OpenhexSdkError {
+  constructor(message, status, body) {
+    super(message);
+    this.status = status;
+    this.body = body;
+    this.name = "ApiError";
+  }
+};
+var AbortError = class extends OpenhexSdkError {
+  constructor(message = "The agent run was aborted.") {
+    super(message);
+    this.name = "AbortError";
+  }
+};
+
+// src/chat/chatClient.ts
+function anySignal(signals) {
+  const controller = new AbortController();
+  const handlers = [];
+  for (const s of signals) {
+    if (!s) continue;
+    if (s.aborted) {
+      controller.abort(s.reason);
+      break;
+    }
+    const handler = () => controller.abort(s.reason);
+    s.addEventListener("abort", handler, { once: true });
+    handlers.push([s, handler]);
+  }
+  return {
+    signal: controller.signal,
+    cleanup: () => handlers.forEach(([s, h]) => s.removeEventListener("abort", h))
+  };
+}
+function parseRecord(evt) {
+  if (evt.data === "[DONE]") return null;
+  let parsed;
+  try {
+    parsed = JSON.parse(evt.data);
+  } catch {
+    return null;
+  }
+  if (parsed._meta === true) return null;
+  const record = parsed;
+  if (evt.id) record.id = evt.id;
+  return record;
+}
+var AgentChatClient = class {
+  constructor(http) {
+    this.http = http;
+  }
+  /**
+   * Create or continue a conversation and route a message to its agent(s).
+   * Returns immediately (non-blocking); consume {@link stream} for the reply.
+   */
+  async send(req, opts = {}) {
+    return this.http.requestJson("/conversations/send", {
+      method: "POST",
+      body: req,
+      signal: opts.signal
+    });
+  }
+  /** Interrupt the conversation's currently-running turn. */
+  async interrupt(conversationId, opts = {}) {
+    return this.http.requestJson(`/conversations/${conversationId}/interrupt`, {
+      method: "POST",
+      signal: opts.signal
+    });
+  }
+  /** Full conversation history (all messages as JSON). */
+  async messages(conversationId, opts = {}) {
+    return this.http.requestJson(`/conversations/${conversationId}/messages`, { signal: opts.signal });
+  }
+  /** A page of older history, before a cursor. */
+  async history(conversationId, params, opts = {}) {
+    const q = new URLSearchParams({ before: params.before });
+    if (params.turns != null) q.set("turns", String(params.turns));
+    if (params.maxEntries != null) q.set("maxEntries", String(params.maxEntries));
+    return this.http.requestJson(`/conversations/${conversationId}/history?${q.toString()}`, {
+      signal: opts.signal
+    });
+  }
+  /**
+   * Open the conversation's SSE record stream. Yields every record
+   * (replayed history then live tail), auto-reconnecting with capped
+   * backoff on drop. The generator ends when the consumer breaks/returns
+   * or `signal` aborts.
+   */
+  async *stream(conversationId, opts = {}) {
+    const { signal, reconnect = true } = opts;
+    let cursor = opts.lastEventId;
+    const backoff = new Backoff();
+    const internal = new AbortController();
+    const onAbort = () => internal.abort();
+    if (signal) {
+      if (signal.aborted) internal.abort();
+      else signal.addEventListener("abort", onAbort, { once: true });
+    }
+    const buildPath = () => {
+      const q = new URLSearchParams();
+      if (cursor) q.set("lastEventId", cursor);
+      if (opts.turns != null) q.set("turns", String(opts.turns));
+      if (opts.maxEntries != null) q.set("maxEntries", String(opts.maxEntries));
+      const qs = q.toString();
+      return `/conversations/${conversationId}/stream${qs ? `?${qs}` : ""}`;
+    };
+    try {
+      while (!internal.signal.aborted) {
+        let body = null;
+        try {
+          const response = await this.http.requestRaw(
+            buildPath(),
+            { signal: internal.signal, timeoutMs: 0 },
+            "text/event-stream"
+          );
+          body = response.body;
+          backoff.reset();
+        } catch (err) {
+          if (internal.signal.aborted) return;
+          if (!reconnect) throw err;
+          await delay(backoff.next(), internal.signal);
+          continue;
+        }
+        if (body) {
+          try {
+            for await (const evt of parseSSEStream(body, internal.signal)) {
+              if (evt.data === "[DONE]") return;
+              const record = parseRecord(evt);
+              if (!record) continue;
+              cursor = record.id ?? evt.id ?? cursor;
+              yield record;
+            }
+          } catch (err) {
+            if (internal.signal.aborted) return;
+            if (!reconnect) throw err;
+          }
+        }
+        if (!reconnect || internal.signal.aborted) return;
+        await delay(backoff.next(), internal.signal);
+      }
+    } finally {
+      signal?.removeEventListener("abort", onAbort);
+      internal.abort();
+    }
+  }
+  /**
+   * Stream a single turn over an existing conversation: resume the event
+   * stream strictly after `opts.lastEventId` (the user message's event id)
+   * and stop at the agent's terminal `result`. Reconnects on drop; an
+   * `idleTimeoutMs` gap with no events aborts (covers cold-start pod
+   * provisioning). Use when you sent the message yourself via {@link send}.
+   */
+  async *resumeTurn(conversationId, opts = {}) {
+    const { signal, idleTimeoutMs = 18e4 } = opts;
+    const cursor = opts.lastEventId;
+    const idleController = new AbortController();
+    const merged = anySignal([signal, idleController.signal]);
+    let idleTimer;
+    const armIdle = () => {
+      if (idleTimer) clearTimeout(idleTimer);
+      idleTimer = setTimeout(() => idleController.abort(new Error("idle timeout")), idleTimeoutMs);
+    };
+    armIdle();
+    try {
+      for await (const record of this.stream(conversationId, {
+        lastEventId: cursor,
+        signal: merged.signal
+      })) {
+        armIdle();
+        yield record;
+        if (isTurnComplete(record)) return;
+      }
+      if (idleController.signal.aborted && !signal?.aborted) {
+        throw new AbortError("Turn timed out waiting for the agent to respond.");
+      }
+    } finally {
+      if (idleTimer) clearTimeout(idleTimer);
+      merged.cleanup();
+      idleController.abort();
+    }
+  }
+  /**
+   * Send a message and stream just this turn's records, ending when the
+   * agent's `result` event arrives.
+   *
+   * The message is sent first; the stream then resumes precisely from the
+   * user message's event id, so only the agent's reply is surfaced — no
+   * history, no heuristics. To learn the (possibly new) conversation id
+   * while streaming, use {@link sendMessage} or the stateful
+   * {@link Conversation}.
+   *
+   * The first message in a new conversation auto-provisions the agent's
+   * pod, so the first turn can take tens of seconds before any record
+   * arrives; `idleTimeoutMs` (default 180s) bounds the wait.
+   */
+  async *runTurn(req, opts = {}) {
+    const result = await this.send(req, { signal: opts.signal });
+    yield* this.resumeTurn(result.conversationId, { ...opts, lastEventId: result.userEventId });
+  }
+  /**
+   * Send a message and resolve with the aggregated turn (assistant text,
+   * tool calls, all records, conversation id, and a resume cursor).
+   */
+  async sendMessage(req, opts = {}) {
+    const result = await this.send(req, { signal: opts.signal });
+    const turn = {
+      conversationId: result.conversationId,
+      text: "",
+      toolCalls: [],
+      records: [],
+      sessionId: null
+    };
+    for await (const record of this.resumeTurn(result.conversationId, {
+      ...opts,
+      lastEventId: result.userEventId
+    })) {
+      turn.records.push(record);
+      if (record.id) turn.lastEventId = record.id;
+      if (record.sessionId) turn.sessionId = record.sessionId;
+      if (record.sender === "assistant" || record.sender === "agent") {
+        turn.text += extractText(record);
+        turn.toolCalls.push(...extractToolCalls(record));
+      }
+      if (isTurnComplete(record)) turn.result = record.raw;
+    }
+    return turn;
+  }
+  /**
+   * Start a stateful conversation handle that remembers its id across
+   * turns. The first {@link Conversation.send} creates the conversation
+   * (routed to `targetAgentIds`); subsequent sends continue it.
+   */
+  conversation(opts = {}) {
+    return new Conversation(this, opts.conversationId, opts.targetAgentIds);
+  }
+};
+var Conversation = class {
+  constructor(client, conversationId, targetAgentIds) {
+    this.client = client;
+    this.conversationId = conversationId;
+    this.targetAgentIds = targetAgentIds;
+  }
+  /** The conversation id, once the first message has been sent. */
+  get id() {
+    return this.conversationId;
+  }
+  /** Build the send request for the next turn (create vs continue). */
+  buildRequest(message, extra) {
+    return this.conversationId ? { message, conversationId: this.conversationId, ...extra } : { message, targetAgentIds: this.targetAgentIds, ...extra };
+  }
+  /** Send a turn and resolve with the aggregated result. */
+  async send(message, opts = {}) {
+    const turn = await this.client.sendMessage(this.buildRequest(message, opts), opts);
+    this.conversationId = turn.conversationId;
+    return turn;
+  }
+  /** Send a turn and stream its records as they arrive. */
+  async *stream(message, opts = {}) {
+    const sent = await this.client.send(this.buildRequest(message, opts), { signal: opts.signal });
+    this.conversationId = sent.conversationId;
+    yield* this.client.resumeTurn(sent.conversationId, {
+      ...opts,
+      lastEventId: sent.userEventId
+    });
+  }
+  /** Interrupt the running turn in this conversation. */
+  async interrupt() {
+    if (!this.conversationId) return { ok: true, interrupted: false, reason: "No conversation yet" };
+    return this.client.interrupt(this.conversationId);
+  }
+};
+
+// src/transport.ts
+var DEFAULT_BASE_URL = "https://api.openhex.tech";
+
+// src/http/httpClient.ts
+var API_PREFIX = "/api/v2";
+function resolveApiKey(apiKey) {
+  const key = apiKey ?? (typeof process !== "undefined" ? process.env?.OPENHEX_API_KEY : void 0);
+  if (!key) throw new AuthenticationError();
+  return key;
+}
+function withTimeout(signal, timeoutMs) {
+  if (!timeoutMs || timeoutMs <= 0) {
+    return { signal: signal ?? new AbortController().signal, cancel: () => {
+    } };
+  }
+  const controller = new AbortController();
+  const onAbort = () => controller.abort(signal?.reason);
+  if (signal) {
+    if (signal.aborted) controller.abort();
+    else signal.addEventListener("abort", onAbort, { once: true });
+  }
+  const timer = setTimeout(() => controller.abort(new Error(`Request timed out after ${timeoutMs}ms`)), timeoutMs);
+  return {
+    signal: controller.signal,
+    cancel: () => {
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", onAbort);
+    }
+  };
+}
+var HttpClient = class {
+  apiKey;
+  baseUrl;
+  loginType;
+  actAs;
+  extraHeaders;
+  timeoutMs;
+  fetchImpl;
+  constructor(config = {}) {
+    this.apiKey = resolveApiKey(config.apiKey);
+    this.baseUrl = (config.baseUrl ?? DEFAULT_BASE_URL).replace(/\/+$/, "");
+    this.loginType = config.loginType;
+    this.actAs = config.actAs;
+    this.extraHeaders = config.headers ?? {};
+    this.timeoutMs = config.timeoutMs ?? 3e4;
+    const f = config.fetch ?? (typeof fetch !== "undefined" ? fetch : void 0);
+    if (!f) {
+      throw new Error("No fetch implementation available. Pass { fetch } in the client config.");
+    }
+    this.fetchImpl = f.bind(globalThis);
+  }
+  /** Build the full URL for an API path (prefixing `/api/v2` if needed). */
+  url(path) {
+    if (/^https?:\/\//.test(path)) return path;
+    const p = path.startsWith("/") ? path : `/${path}`;
+    const withPrefix = p.startsWith(API_PREFIX) ? p : `${API_PREFIX}${p}`;
+    return `${this.baseUrl}${withPrefix}`;
+  }
+  /** Headers common to every request. `accept` differs for SSE vs JSON. */
+  buildHeaders(accept, extra) {
+    const headers = {
+      Authorization: `Bearer ${this.apiKey}`,
+      Accept: accept,
+      ...this.extraHeaders,
+      ...extra
+    };
+    if (this.loginType) headers["X-Login-Type"] = this.loginType;
+    if (this.actAs) headers["X-Act-As"] = this.actAs;
+    return headers;
+  }
+  /** Map a non-2xx response to an {@link ApiError}, extracting `detail`. */
+  async toError(response) {
+    let body;
+    let detail;
+    try {
+      body = await response.json();
+      detail = body?.detail;
+    } catch {
+      try {
+        detail = await response.text();
+      } catch {
+      }
+    }
+    if (response.status === 401 || response.status === 403) {
+      return new ApiError(detail || "Unauthorized", response.status, body);
+    }
+    return new ApiError(detail || `Request failed with status ${response.status}`, response.status, body);
+  }
+  /** Perform a JSON request and parse the response body. */
+  async requestJson(path, options = {}) {
+    const response = await this.requestRaw(path, options, "application/json");
+    if (response.status === 204) return void 0;
+    return await response.json();
+  }
+  /** Perform a request and return the raw {@link Response} (used for SSE). */
+  async requestRaw(path, options = {}, accept = "application/json") {
+    const { method = "GET", body, headers, signal } = options;
+    const timeoutMs = options.timeoutMs ?? this.timeoutMs;
+    const { signal: combined, cancel } = withTimeout(signal, timeoutMs);
+    const reqHeaders = this.buildHeaders(accept, headers);
+    if (body !== void 0) reqHeaders["Content-Type"] = "application/json";
+    let response;
+    try {
+      response = await this.fetchImpl(this.url(path), {
+        method,
+        headers: reqHeaders,
+        body: body !== void 0 ? JSON.stringify(body) : void 0,
+        signal: combined
+      });
+    } finally {
+      if (accept !== "text/event-stream") cancel();
+    }
+    if (!response.ok) {
+      if (accept !== "text/event-stream") cancel();
+      throw await this.toError(response);
+    }
+    return response;
+  }
+};
+
+// src/react/auth.ts
+function isAgentChatClient(c) {
+  return c instanceof AgentChatClient;
+}
+function tokenInjectingFetch(baseFetch, getToken) {
+  const wrapped = async (input, init) => {
+    const token = await getToken();
+    const headers = new Headers(init?.headers ?? {});
+    headers.set("Authorization", `Bearer ${token}`);
+    return baseFetch(input, { ...init, headers });
+  };
+  return wrapped;
+}
+function resolveChatClient(conn) {
+  if (conn.client) {
+    return isAgentChatClient(conn.client) ? conn.client : conn.client.chat;
+  }
+  if (!conn.token && !conn.getToken) {
+    throw new Error(
+      "useOpenhexChat needs a credential: pass { token } or { getToken } (a member session token minted on your backend), or a ready-made { client }."
+    );
+  }
+  const baseFetch = conn.fetch ?? (typeof fetch !== "undefined" ? fetch.bind(globalThis) : void 0);
+  if (!baseFetch) {
+    throw new Error("No fetch implementation available. Pass { fetch } in the connection options.");
+  }
+  const http = new HttpClient({
+    // With `getToken`, the real token is injected per-request by the wrapped
+    // fetch below; `apiKey` just satisfies HttpClient's non-empty check.
+    apiKey: conn.token ?? "session",
+    baseUrl: conn.baseUrl,
+    loginType: conn.loginType,
+    actAs: conn.actAs,
+    fetch: conn.getToken ? tokenInjectingFetch(baseFetch, conn.getToken) : baseFetch
+  });
+  return new AgentChatClient(http);
+}
+
+// src/react/fold.ts
+function foldRecords(records, idPrefix = "h") {
+  const out = [];
+  let current = null;
+  let n = 0;
+  const flush = () => {
+    if (current && (current.text.length > 0 || (current.toolCalls?.length ?? 0) > 0)) {
+      out.push(current);
+    }
+    current = null;
+  };
+  for (const record of records) {
+    const createdAt = typeof record.timestamp === "number" ? record.timestamp : 0;
+    if (record.sender === "user") {
+      flush();
+      const text = extractText(record);
+      if (text.length > 0) {
+        out.push({ id: `${idPrefix}${n++}`, role: "user", text, createdAt });
+      }
+      continue;
+    }
+    if (isAgentRecord(record)) {
+      if (!current) {
+        current = {
+          id: `${idPrefix}${n++}`,
+          role: "assistant",
+          text: "",
+          createdAt,
+          toolCalls: []
+        };
+      }
+      current.text += extractText(record);
+      const tools = extractToolCalls(record);
+      if (tools.length > 0) current.toolCalls = [...current.toolCalls ?? [], ...tools];
+      continue;
+    }
+  }
+  flush();
+  return out.map(
+    (m) => m.toolCalls && m.toolCalls.length === 0 ? { ...m, toolCalls: void 0 } : m
+  );
+}
+
+// src/react/useOpenhexChat.ts
+function useIdFactory() {
+  const counter = useRef(0);
+  return useCallback(() => `m${counter.current++}`, []);
+}
+function useOpenhexChat(options) {
+  const {
+    agentId,
+    conversationId: initialConversationId,
+    senderName,
+    senderAvatar,
+    loadHistory = true,
+    idleTimeoutMs,
+    onTurnComplete,
+    onError
+  } = options;
+  const nextId = useIdFactory();
+  const [messages, setMessages] = useState([]);
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const [conversationId, setConversationId] = useState(initialConversationId);
+  const client = useMemo(
+    () => resolveChatClient(options),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [options.client, options.baseUrl, options.token, options.actAs, options.loginType]
+  );
+  const convoRef = useRef(null);
+  useMemo(() => {
+    convoRef.current = client.conversation({
+      conversationId: initialConversationId,
+      targetAgentIds: agentId ? [agentId] : void 0
+    });
+  }, [client, initialConversationId, agentId]);
+  const abortRef = useRef(null);
+  const lastUserTextRef = useRef(null);
+  const cbRef = useRef({ onTurnComplete, onError });
+  cbRef.current = { onTurnComplete, onError };
+  const historyLoadedFor = useRef(null);
+  useEffect(() => {
+    if (!loadHistory || !initialConversationId) return;
+    if (historyLoadedFor.current === initialConversationId) return;
+    historyLoadedFor.current = initialConversationId;
+    let cancelled = false;
+    (async () => {
+      try {
+        const { entries } = await client.messages(initialConversationId);
+        if (cancelled) return;
+        const prior = foldRecords(
+          entries.map((e) => e.data),
+          "h"
+        );
+        setMessages((cur) => cur.length === 0 ? prior : cur);
+      } catch (err) {
+        cbRef.current.onError?.(err instanceof Error ? err : new Error(String(err)));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, initialConversationId, loadHistory]);
+  const patch = useCallback((id, next) => {
+    setMessages((cur) => cur.map((m) => m.id === id ? { ...m, ...next } : m));
+  }, []);
+  const runTurn = useCallback(
+    async (text) => {
+      const convo = convoRef.current;
+      if (!convo) {
+        const e = new Error(
+          "No target agent: pass { agentId } (for a new conversation) or { conversationId }."
+        );
+        cbRef.current.onError?.(e);
+        setError(e);
+        setStatus("error");
+        return;
+      }
+      lastUserTextRef.current = text;
+      setError(null);
+      const assistantId = nextId();
+      setMessages((cur) => [
+        ...cur,
+        { id: nextId(), role: "user", text, createdAt: Date.now() },
+        {
+          id: assistantId,
+          role: "assistant",
+          text: "",
+          createdAt: Date.now(),
+          pending: true,
+          streaming: true
+        }
+      ]);
+      setStatus("connecting");
+      const controller = new AbortController();
+      abortRef.current = controller;
+      let acc = "";
+      let streaming = false;
+      const tools = [];
+      try {
+        for await (const record of convo.stream(text, {
+          signal: controller.signal,
+          idleTimeoutMs,
+          senderName,
+          senderAvatar
+        })) {
+          if (convo.id) setConversationId(convo.id);
+          if (!isAgentRecord(record)) continue;
+          acc += extractText(record);
+          for (const t of extractToolCalls(record)) tools.push(t);
+          patch(assistantId, {
+            text: acc,
+            pending: false,
+            streaming: true,
+            toolCalls: tools.length ? [...tools] : void 0
+          });
+          if (!streaming) {
+            streaming = true;
+            setStatus("streaming");
+          }
+        }
+        const empty = acc.length === 0 && tools.length === 0;
+        if (empty) {
+          setMessages((cur) => cur.filter((m) => m.id !== assistantId));
+        } else {
+          patch(assistantId, { streaming: false, pending: false });
+        }
+        setStatus("idle");
+        if (!empty) {
+          cbRef.current.onTurnComplete?.({
+            id: assistantId,
+            role: "assistant",
+            text: acc,
+            createdAt: Date.now(),
+            toolCalls: tools.length ? tools : void 0
+          });
+        }
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        if (controller.signal.aborted) {
+          const empty = acc.length === 0 && tools.length === 0;
+          if (empty) setMessages((cur) => cur.filter((m) => m.id !== assistantId));
+          else patch(assistantId, { streaming: false, pending: false });
+          setStatus("idle");
+          return;
+        }
+        patch(assistantId, { streaming: false, pending: false, error: true });
+        setError(e);
+        setStatus("error");
+        cbRef.current.onError?.(e);
+      } finally {
+        if (abortRef.current === controller) abortRef.current = null;
+      }
+    },
+    // `status` is read for a micro-optimization only; excluded to keep `send`
+    // stable across renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [idleTimeoutMs, senderName, senderAvatar, nextId, patch]
+  );
+  const send = useCallback(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || abortRef.current) return;
+      await runTurn(trimmed);
+    },
+    [runTurn]
+  );
+  const interrupt = useCallback(() => {
+    const convo = convoRef.current;
+    abortRef.current?.abort();
+    void convo?.interrupt().catch(() => {
+    });
+  }, []);
+  const retry = useCallback(() => {
+    if (abortRef.current) return;
+    const last = lastUserTextRef.current;
+    if (last) void runTurn(last);
+  }, [runTurn]);
+  const clear = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    lastUserTextRef.current = null;
+    historyLoadedFor.current = null;
+    setMessages([]);
+    setError(null);
+    setStatus("idle");
+    setConversationId(void 0);
+    convoRef.current = client.conversation({
+      targetAgentIds: agentId ? [agentId] : void 0
+    });
+  }, [client, agentId]);
+  useEffect(() => () => abortRef.current?.abort(), []);
+  const isResponding = status === "connecting" || status === "streaming";
+  return {
+    messages,
+    status,
+    error,
+    conversationId,
+    isResponding,
+    send,
+    interrupt,
+    retry,
+    clear
+  };
+}
+
+// src/react/styles.ts
+import { useEffect as useEffect2 } from "react";
+var STYLE_ELEMENT_ID = "ohx-chat-styles";
+var CHAT_CSS = `
+.ohx-root {
+  --ohx-accent: #4f46e5;
+  --ohx-accent-contrast: #ffffff;
+  --ohx-bg: #ffffff;
+  --ohx-surface: #f7f7f8;
+  --ohx-fg: #1f2328;
+  --ohx-muted: #6b7280;
+  --ohx-border: #e5e7eb;
+  --ohx-user-bg: var(--ohx-accent);
+  --ohx-user-fg: var(--ohx-accent-contrast);
+  --ohx-assistant-bg: #f1f2f4;
+  --ohx-assistant-fg: #1f2328;
+  --ohx-radius: 16px;
+  --ohx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: var(--ohx-bg);
+  color: var(--ohx-fg);
+  font-family: var(--ohx-font);
+  font-size: 14px;
+  line-height: 1.5;
+  border: 1px solid var(--ohx-border);
+  border-radius: var(--ohx-radius);
+  overflow: hidden;
+  min-height: 0;
+}
+.ohx-root[data-theme="dark"] {
+  --ohx-bg: #1b1c1f;
+  --ohx-surface: #242629;
+  --ohx-fg: #e8eaed;
+  --ohx-muted: #9aa0a6;
+  --ohx-border: #34363b;
+  --ohx-assistant-bg: #2a2c30;
+  --ohx-assistant-fg: #e8eaed;
+}
+.ohx-root *, .ohx-root *::before, .ohx-root *::after { box-sizing: border-box; }
+
+.ohx-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--ohx-border);
+  background: var(--ohx-bg);
+  flex: none;
+}
+.ohx-avatar {
+  width: 34px; height: 34px; border-radius: 50%;
+  object-fit: cover; flex: none;
+  background: var(--ohx-surface);
+}
+.ohx-header-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.ohx-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ohx-subtitle { font-size: 12px; color: var(--ohx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ohx-icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border: none; border-radius: 8px;
+  background: transparent; color: var(--ohx-muted); cursor: pointer;
+}
+.ohx-icon-btn:hover { background: var(--ohx-surface); color: var(--ohx-fg); }
+
+.ohx-messages {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: var(--ohx-bg);
+  scroll-behavior: smooth;
+}
+.ohx-empty {
+  margin: auto; text-align: center; color: var(--ohx-muted);
+  font-size: 13px; padding: 24px; max-width: 80%;
+}
+
+.ohx-row { display: flex; width: 100%; }
+.ohx-row.user { justify-content: flex-end; }
+.ohx-row.assistant, .ohx-row.system { justify-content: flex-start; }
+.ohx-bubble {
+  max-width: 82%;
+  padding: 9px 13px;
+  border-radius: 14px;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+.ohx-row.user .ohx-bubble {
+  background: var(--ohx-user-bg); color: var(--ohx-user-fg);
+  border-bottom-right-radius: 4px;
+}
+.ohx-row.assistant .ohx-bubble {
+  background: var(--ohx-assistant-bg); color: var(--ohx-assistant-fg);
+  border-bottom-left-radius: 4px;
+}
+.ohx-bubble.error { border: 1px solid #ef4444; }
+.ohx-bubble .ohx-p { margin: 0 0 6px; }
+.ohx-bubble .ohx-p:last-child { margin-bottom: 0; }
+.ohx-bubble a { color: inherit; text-decoration: underline; }
+.ohx-row.assistant .ohx-bubble a { color: var(--ohx-accent); }
+.ohx-bubble > :first-child { margin-top: 0; }
+.ohx-bubble > :last-child { margin-bottom: 0; }
+.ohx-bubble .ohx-h { font-weight: 600; line-height: 1.3; margin: 12px 0 6px; }
+.ohx-bubble .ohx-h1 { font-size: 1.3em; }
+.ohx-bubble .ohx-h2 { font-size: 1.18em; }
+.ohx-bubble .ohx-h3 { font-size: 1.08em; }
+.ohx-bubble .ohx-h4, .ohx-bubble .ohx-h5, .ohx-bubble .ohx-h6 { font-size: 1em; }
+.ohx-bubble .ohx-ul, .ohx-bubble .ohx-ol { margin: 6px 0; padding-left: 1.35em; }
+.ohx-bubble .ohx-ul { list-style: disc; }
+.ohx-bubble .ohx-ol { list-style: decimal; }
+.ohx-bubble .ohx-ul li, .ohx-bubble .ohx-ol li { margin: 3px 0; }
+.ohx-bubble .ohx-ul li::marker, .ohx-bubble .ohx-ol li::marker { color: var(--ohx-muted); }
+.ohx-bubble .ohx-hr { border: none; border-top: 1px solid var(--ohx-border); margin: 12px 0; }
+.ohx-bubble .ohx-quote {
+  margin: 6px 0; padding: 2px 0 2px 12px;
+  border-left: 3px solid var(--ohx-border); color: var(--ohx-muted);
+}
+.ohx-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.9em; background: rgba(127,127,127,0.16);
+  padding: 1px 5px; border-radius: 5px;
+}
+.ohx-pre {
+  margin: 6px 0; padding: 10px 12px; border-radius: 10px;
+  background: rgba(127,127,127,0.14); overflow-x: auto;
+}
+.ohx-pre code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.86em; white-space: pre; background: none; padding: 0;
+}
+.ohx-tools { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
+.ohx-tool {
+  font-size: 11px; color: var(--ohx-muted);
+  background: rgba(127,127,127,0.12); border-radius: 6px; padding: 2px 7px;
+  font-family: ui-monospace, monospace;
+}
+
+.ohx-typing { display: inline-flex; gap: 4px; padding: 3px 2px; align-items: center; }
+.ohx-typing span {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--ohx-muted); opacity: 0.5;
+  animation: ohx-blink 1.2s infinite ease-in-out both;
+}
+.ohx-typing span:nth-child(2) { animation-delay: 0.18s; }
+.ohx-typing span:nth-child(3) { animation-delay: 0.36s; }
+@keyframes ohx-blink { 0%, 80%, 100% { transform: scale(0.7); opacity: 0.3; } 40% { transform: scale(1); opacity: 0.9; } }
+
+.ohx-error-bar {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  margin: 0 16px 8px; padding: 8px 12px; font-size: 12px;
+  color: #b91c1c; background: rgba(239,68,68,0.1);
+  border: 1px solid rgba(239,68,68,0.3); border-radius: 8px;
+}
+.ohx-root[data-theme="dark"] .ohx-error-bar { color: #fca5a5; }
+.ohx-retry {
+  border: none; background: transparent; color: inherit; cursor: pointer;
+  text-decoration: underline; font-weight: 600; font-size: 12px; white-space: nowrap;
+}
+
+.ohx-composer {
+  display: flex; align-items: flex-end; gap: 8px;
+  padding: 10px 12px; border-top: 1px solid var(--ohx-border);
+  background: var(--ohx-bg); flex: none;
+}
+.ohx-textarea {
+  flex: 1; resize: none; border: 1px solid var(--ohx-border);
+  border-radius: 12px; padding: 9px 12px; max-height: 140px;
+  font-family: inherit; font-size: 14px; line-height: 1.4;
+  color: var(--ohx-fg); background: var(--ohx-surface); outline: none;
+}
+.ohx-textarea:focus { border-color: var(--ohx-accent); }
+.ohx-textarea::placeholder { color: var(--ohx-muted); }
+.ohx-send {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 38px; height: 38px; flex: none; border: none; border-radius: 12px;
+  background: var(--ohx-accent); color: var(--ohx-accent-contrast); cursor: pointer;
+  transition: opacity 0.15s;
+}
+.ohx-send:disabled { opacity: 0.45; cursor: not-allowed; }
+.ohx-send.stop { background: var(--ohx-surface); color: var(--ohx-fg); border: 1px solid var(--ohx-border); }
+.ohx-footer {
+  text-align: center; font-size: 10px; color: var(--ohx-muted);
+  padding: 0 0 8px; background: var(--ohx-bg); flex: none;
+}
+.ohx-footer a { color: var(--ohx-muted); }
+
+/* ---- Floating widget ---- */
+.ohx-launcher {
+  position: fixed; z-index: 2147483000;
+  width: 56px; height: 56px; border-radius: 50%; border: none;
+  background: var(--ohx-accent, #4f46e5); color: #fff; cursor: pointer;
+  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: transform 0.15s;
+}
+.ohx-launcher:hover { transform: scale(1.06); }
+.ohx-launcher.bottom-right { right: 20px; bottom: 20px; }
+.ohx-launcher.bottom-left { left: 20px; bottom: 20px; }
+.ohx-panel {
+  position: fixed; z-index: 2147483000;
+  width: 380px; height: min(620px, calc(100vh - 110px));
+  box-shadow: 0 12px 40px rgba(0,0,0,0.24);
+  border-radius: 18px;
+  overflow: hidden;
+  animation: ohx-pop 0.16s ease-out;
+}
+.ohx-panel.bottom-right { right: 20px; bottom: 88px; }
+.ohx-panel.bottom-left { left: 20px; bottom: 88px; }
+/* Inside a panel the wrapper owns the shape + shadow, so the ChatBox fills
+   it squared (no double border / radius). */
+.ohx-root.ohx-panel-inner { border: none; border-radius: 0; height: 100%; width: 100%; }
+@keyframes ohx-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+
+@media (max-width: 480px) {
+  .ohx-panel {
+    right: 0; left: 0; bottom: 0; top: 0;
+    width: 100vw; height: 100vh; height: 100dvh;
+    border-radius: 0;
+  }
+  .ohx-launcher.open-hidden { display: none; }
+}
+`;
+function useInjectStyles(enabled) {
+  useEffect2(() => {
+    if (!enabled) return;
+    if (typeof document === "undefined") return;
+    if (document.getElementById(STYLE_ELEMENT_ID)) return;
+    const style = document.createElement("style");
+    style.id = STYLE_ELEMENT_ID;
+    style.textContent = CHAT_CSS;
+    document.head.appendChild(style);
+  }, [enabled]);
+}
+
+// src/react/MarkdownView.tsx
+import { Fragment, createElement } from "react";
+
+// src/react/markdown.ts
+function sanitizeHref(href) {
+  const trimmed = href.trim();
+  if (/^(https?:|mailto:)/i.test(trimmed)) return trimmed;
+  if (/^\/\//.test(trimmed)) return `https:${trimmed}`;
+  if (/^www\./i.test(trimmed)) return `https://${trimmed}`;
+  return null;
+}
+var INLINE = [
+  { type: "code", re: /`([^`]+)`/ },
+  { type: "bold", re: /\*\*([^*]+)\*\*/ },
+  { type: "italic", re: /\*([^*\n]+)\*|_([^_\n]+)_/ },
+  { type: "link", re: /\[([^\]]+)\]\(([^)\s]+)\)/ },
+  { type: "url", re: /(https?:\/\/[^\s<]+[^\s<.,:;"')\]}]|www\.[^\s<]+[^\s<.,:;"')\]}])/ }
+];
+function parseInline(input) {
+  const spans = [];
+  let rest = input;
+  while (rest.length > 0) {
+    let best = null;
+    for (const rule of INLINE) {
+      const m = rule.re.exec(rest);
+      if (!m || m.index == null) continue;
+      if (best && m.index >= best.index) continue;
+      let span = null;
+      if (rule.type === "code") span = { type: "code", text: m[1] };
+      else if (rule.type === "bold") span = { type: "bold", text: m[1] };
+      else if (rule.type === "italic") span = { type: "italic", text: m[1] ?? m[2] };
+      else if (rule.type === "link") {
+        const href = sanitizeHref(m[2]);
+        span = href ? { type: "link", text: m[1], href } : { type: "text", text: m[0] };
+      } else if (rule.type === "url") {
+        const href = sanitizeHref(m[1]);
+        span = href ? { type: "link", text: m[1], href } : { type: "text", text: m[0] };
+      }
+      if (span) best = { index: m.index, length: m[0].length, span };
+    }
+    if (!best) {
+      spans.push({ type: "text", text: rest });
+      break;
+    }
+    if (best.index > 0) spans.push({ type: "text", text: rest.slice(0, best.index) });
+    spans.push(best.span);
+    rest = rest.slice(best.index + best.length);
+  }
+  return spans;
+}
+function parseMarkdown(input) {
+  const blocks = [];
+  const lines = input.replace(/\r\n/g, "\n").split("\n");
+  let i = 0;
+  let para = [];
+  const flushPara = () => {
+    if (para.length === 0) return;
+    const text = para.join("\n").trim();
+    if (text) blocks.push({ type: "paragraph", spans: parseInline(text) });
+    para = [];
+  };
+  const LIST_ITEM = /^\s*([-*+]|\d+[.)])\s+(.*)$/;
+  while (i < lines.length) {
+    const line = lines[i];
+    const fence = /^```(.*)$/.exec(line);
+    if (fence) {
+      flushPara();
+      const lang = fence[1].trim() || void 0;
+      const code = [];
+      i++;
+      while (i < lines.length && !/^```/.test(lines[i])) {
+        code.push(lines[i]);
+        i++;
+      }
+      i++;
+      blocks.push({ type: "code", text: code.join("\n"), lang });
+      continue;
+    }
+    const trimmed = line.trim();
+    if (trimmed === "") {
+      flushPara();
+      i++;
+      continue;
+    }
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
+      flushPara();
+      blocks.push({ type: "hr" });
+      i++;
+      continue;
+    }
+    const heading = /^(#{1,6})\s+(.*?)\s*#*\s*$/.exec(line);
+    if (heading) {
+      flushPara();
+      blocks.push({ type: "heading", level: heading[1].length, spans: parseInline(heading[2]) });
+      i++;
+      continue;
+    }
+    if (/^\s*>\s?/.test(line)) {
+      flushPara();
+      const quote = [];
+      while (i < lines.length && /^\s*>\s?/.test(lines[i])) {
+        quote.push(lines[i].replace(/^\s*>\s?/, ""));
+        i++;
+      }
+      blocks.push({ type: "blockquote", spans: parseInline(quote.join("\n").trim()) });
+      continue;
+    }
+    const firstItem = LIST_ITEM.exec(line);
+    if (firstItem) {
+      flushPara();
+      const ordered = /\d/.test(firstItem[1]);
+      const start = ordered ? parseInt(firstItem[1], 10) || 1 : 1;
+      const items = [];
+      while (i < lines.length) {
+        const m = LIST_ITEM.exec(lines[i]);
+        if (m) {
+          items.push(parseInline(m[2]));
+          i++;
+        } else if (lines[i].trim() !== "" && /^\s+\S/.test(lines[i]) && items.length > 0) {
+          items[items.length - 1].push(...parseInline(" " + lines[i].trim()));
+          i++;
+        } else {
+          break;
+        }
+      }
+      blocks.push({ type: "list", ordered, start, items });
+      continue;
+    }
+    para.push(line);
+    i++;
+  }
+  flushPara();
+  return blocks;
+}
+
+// src/react/MarkdownView.tsx
+import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
+function InlineSpans({ spans }) {
+  return /* @__PURE__ */ jsx(Fragment2, { children: spans.map((s, i) => {
+    switch (s.type) {
+      case "code":
+        return /* @__PURE__ */ jsx("code", { className: "ohx-code", children: s.text }, i);
+      case "bold":
+        return /* @__PURE__ */ jsx("strong", { children: s.text }, i);
+      case "italic":
+        return /* @__PURE__ */ jsx("em", { children: s.text }, i);
+      case "link":
+        return /* @__PURE__ */ jsx("a", { href: s.href, target: "_blank", rel: "noopener noreferrer nofollow", children: s.text }, i);
+      default:
+        return /* @__PURE__ */ jsx(Fragment, { children: s.text }, i);
+    }
+  }) });
+}
+function Markdown({ text }) {
+  const blocks = parseMarkdown(text);
+  return /* @__PURE__ */ jsx(Fragment2, { children: blocks.map((b, i) => {
+    switch (b.type) {
+      case "code":
+        return /* @__PURE__ */ jsx("pre", { className: "ohx-pre", children: /* @__PURE__ */ jsx("code", { children: b.text }) }, i);
+      case "heading": {
+        const level = Math.min(6, Math.max(1, b.level));
+        return createElement(
+          `h${level}`,
+          { key: i, className: `ohx-h ohx-h${level}` },
+          /* @__PURE__ */ jsx(InlineSpans, { spans: b.spans })
+        );
+      }
+      case "hr":
+        return /* @__PURE__ */ jsx("hr", { className: "ohx-hr" }, i);
+      case "blockquote":
+        return /* @__PURE__ */ jsx("blockquote", { className: "ohx-quote", children: /* @__PURE__ */ jsx(InlineSpans, { spans: b.spans }) }, i);
+      case "list": {
+        const items = b.items.map((spans, j) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(InlineSpans, { spans }) }, j));
+        return b.ordered ? /* @__PURE__ */ jsx("ol", { className: "ohx-ol", start: b.start, children: items }, i) : /* @__PURE__ */ jsx("ul", { className: "ohx-ul", children: items }, i);
+      }
+      default:
+        return /* @__PURE__ */ jsx("p", { className: "ohx-p", children: /* @__PURE__ */ jsx(InlineSpans, { spans: b.spans }) }, i);
+    }
+  }) });
+}
+
+// src/react/icons.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SendIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M4 12l16-8-6 16-3-6-7-2z",
+      fill: "currentColor",
+      stroke: "currentColor",
+      strokeWidth: "1.2",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx2("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+}
+function ChatIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7A8.5 8.5 0 1 1 21 11.5z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function StopIcon(props) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx2("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor" }) });
+}
+
+// src/react/ChatBox.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function useResolvedTheme(theme) {
+  const getSystem = () => typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  const [system, setSystem] = useState2(getSystem);
+  useEffect3(() => {
+    if (theme !== "auto" || typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => setSystem(mq.matches ? "dark" : "light");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [theme]);
+  return theme === "auto" ? system : theme;
+}
+var dim = (v) => typeof v === "number" ? `${v}px` : v;
+function TypingDots() {
+  return /* @__PURE__ */ jsxs("span", { className: "ohx-typing", "aria-label": "Assistant is typing", children: [
+    /* @__PURE__ */ jsx3("span", {}),
+    /* @__PURE__ */ jsx3("span", {}),
+    /* @__PURE__ */ jsx3("span", {})
+  ] });
+}
+function MessageBubble({ m, showToolCalls }) {
+  const showTyping = m.role === "assistant" && m.text.length === 0 && (m.pending || m.streaming);
+  return /* @__PURE__ */ jsx3("div", { className: `ohx-row ${m.role}`, children: /* @__PURE__ */ jsxs("div", { className: `ohx-bubble${m.error ? " error" : ""}`, children: [
+    showTyping ? /* @__PURE__ */ jsx3(TypingDots, {}) : /* @__PURE__ */ jsx3(Markdown, { text: m.text }),
+    showToolCalls && m.toolCalls && m.toolCalls.length > 0 && /* @__PURE__ */ jsx3("div", { className: "ohx-tools", children: m.toolCalls.map((t, i) => /* @__PURE__ */ jsx3("span", { className: "ohx-tool", children: t.name }, t.id ?? i)) })
+  ] }) });
+}
+function ChatBox(props) {
+  const {
+    title = "Chat",
+    subtitle,
+    placeholder = "Type a message\u2026",
+    greeting,
+    avatarUrl,
+    theme = "light",
+    accentColor,
+    height,
+    width,
+    className,
+    header,
+    emptyState,
+    footer,
+    disabled = false,
+    injectStyles = true,
+    showToolCalls = false
+  } = props;
+  useInjectStyles(injectStyles);
+  const resolvedTheme = useResolvedTheme(theme);
+  const chat = useOpenhexChat(props);
+  const [input, setInput] = useState2("");
+  const scrollRef = useRef2(null);
+  const textareaRef = useRef2(null);
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [chat.messages]);
+  useLayoutEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, 140)}px`;
+  }, [input]);
+  const submit = useCallback2(() => {
+    const text = input.trim();
+    if (!text || chat.isResponding || disabled) return;
+    setInput("");
+    void chat.send(text);
+  }, [input, chat, disabled]);
+  const onKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+        e.preventDefault();
+        submit();
+      }
+    },
+    [submit]
+  );
+  const rootStyle = useMemo2(() => {
+    const s = {};
+    if (height != null) s.height = dim(height);
+    if (width != null) s.width = dim(width);
+    if (height == null) s.height = "100%";
+    if (accentColor) s["--ohx-accent"] = accentColor;
+    return s;
+  }, [height, width, accentColor]);
+  const showGreeting = chat.messages.length === 0 && chat.status !== "connecting";
+  const respondingLabel = chat.status === "connecting" ? "Connecting\u2026" : subtitle;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `ohx-root${className ? ` ${className}` : ""}`,
+      "data-theme": resolvedTheme,
+      style: rootStyle,
+      children: [
+        header === false ? null : header != null ? header : /* @__PURE__ */ jsxs("div", { className: "ohx-header", children: [
+          avatarUrl && /* @__PURE__ */ jsx3("img", { className: "ohx-avatar", src: avatarUrl, alt: "" }),
+          /* @__PURE__ */ jsxs("div", { className: "ohx-header-text", children: [
+            /* @__PURE__ */ jsx3("span", { className: "ohx-title", children: title }),
+            (respondingLabel || chat.isResponding) && /* @__PURE__ */ jsx3("span", { className: "ohx-subtitle", children: chat.isResponding ? respondingLabel || "Typing\u2026" : subtitle })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "ohx-messages", ref: scrollRef, children: showGreeting ? emptyState != null ? emptyState : greeting ? /* @__PURE__ */ jsx3(
+          MessageBubble,
+          {
+            m: { id: "greeting", role: "assistant", text: greeting, createdAt: 0 }
+          }
+        ) : /* @__PURE__ */ jsx3("div", { className: "ohx-empty", children: "Ask me anything to get started." }) : chat.messages.map((m) => /* @__PURE__ */ jsx3(MessageBubble, { m, showToolCalls }, m.id)) }),
+        chat.status === "error" && chat.error && /* @__PURE__ */ jsxs("div", { className: "ohx-error-bar", role: "alert", children: [
+          /* @__PURE__ */ jsx3("span", { children: chat.error.message || "Something went wrong." }),
+          /* @__PURE__ */ jsx3("button", { type: "button", className: "ohx-retry", onClick: chat.retry, children: "Retry" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ohx-composer", children: [
+          /* @__PURE__ */ jsx3(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: "ohx-textarea",
+              rows: 1,
+              value: input,
+              placeholder,
+              disabled,
+              onChange: (e) => setInput(e.target.value),
+              onKeyDown,
+              "aria-label": "Message"
+            }
+          ),
+          chat.isResponding ? /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "ohx-send stop",
+              onClick: chat.interrupt,
+              "aria-label": "Stop",
+              title: "Stop",
+              children: /* @__PURE__ */ jsx3(StopIcon, {})
+            }
+          ) : /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "ohx-send",
+              onClick: submit,
+              disabled: disabled || input.trim().length === 0,
+              "aria-label": "Send",
+              title: "Send",
+              children: /* @__PURE__ */ jsx3(SendIcon, {})
+            }
+          )
+        ] }),
+        footer === false ? null : footer != null ? /* @__PURE__ */ jsx3("div", { className: "ohx-footer", children: footer }) : /* @__PURE__ */ jsx3("div", { className: "ohx-footer", children: "Powered by Openhex" })
+      ]
+    }
+  );
+}
+
+// src/react/ChatWidget.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChatWidget(props) {
+  const {
+    position = "bottom-right",
+    launcherIcon,
+    launcherLabel = "Open chat",
+    defaultOpen = false,
+    open: controlledOpen,
+    onOpenChange,
+    accentColor,
+    injectStyles = true,
+    className,
+    ...boxProps
+  } = props;
+  useInjectStyles(injectStyles);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState3(defaultOpen);
+  const isControlled = controlledOpen != null;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback3(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const launcherStyle = accentColor ? { background: accentColor } : void 0;
+  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    open && /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: `ohx-panel ${position}`,
+        role: "dialog",
+        "aria-label": boxProps.title ?? "Chat",
+        children: /* @__PURE__ */ jsx4(
+          ChatBox,
+          {
+            ...boxProps,
+            accentColor,
+            className: `ohx-panel-inner${className ? ` ${className}` : ""}`,
+            injectStyles: false,
+            header: boxProps.header !== void 0 ? boxProps.header : /* @__PURE__ */ jsxs2("div", { className: "ohx-header", children: [
+              boxProps.avatarUrl && /* @__PURE__ */ jsx4("img", { className: "ohx-avatar", src: boxProps.avatarUrl, alt: "" }),
+              /* @__PURE__ */ jsxs2("div", { className: "ohx-header-text", children: [
+                /* @__PURE__ */ jsx4("span", { className: "ohx-title", children: boxProps.title ?? "Chat" }),
+                boxProps.subtitle && /* @__PURE__ */ jsx4("span", { className: "ohx-subtitle", children: boxProps.subtitle })
+              ] }),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: "ohx-icon-btn",
+                  onClick: () => setOpen(false),
+                  "aria-label": "Close chat",
+                  title: "Close",
+                  children: /* @__PURE__ */ jsx4(CloseIcon, {})
+                }
+              )
+            ] })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        className: `ohx-launcher ${position}${open ? " open-hidden" : ""}`,
+        style: launcherStyle,
+        onClick: () => setOpen(!open),
+        "aria-label": open ? "Close chat" : launcherLabel,
+        "aria-expanded": open,
+        children: open ? /* @__PURE__ */ jsx4(CloseIcon, { width: 22, height: 22 }) : launcherIcon ?? /* @__PURE__ */ jsx4(ChatIcon, {})
+      }
+    )
+  ] });
+}
+export {
+  CHAT_CSS,
+  ChatBox,
+  ChatWidget,
+  Markdown,
+  STYLE_ELEMENT_ID,
+  foldRecords,
+  parseInline,
+  parseMarkdown,
+  resolveChatClient,
+  sanitizeHref,
+  useInjectStyles,
+  useOpenhexChat
+};
+//# sourceMappingURL=index.js.map