@oyehello/chat 0.5.1 → 0.6.0

package/dist/index.js

@@ -61,6 +61,16 @@ async function postMessage(opts) {
   });
   if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
 }
+async function getHistory(opts) {
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/messages`, {
+    method: "GET",
+    credentials: "omit",
+    headers: { Authorization: `Bearer ${opts.sessionToken}` }
+  });
+  if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
+  const body = await res.json();
+  return body.messages;
+}
 async function postPageViews(opts) {
   const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/page-views`, {
     method: "POST",
@@ -308,6 +318,33 @@ function installSpaHooks(onNav) {
 // src/client.ts
 var seq = 0;
 var uid = (p) => `${p}_${Date.now().toString(36)}_${(seq++).toString(36)}`;
+var isSafeRelativePath = (p) => p.startsWith("/") && !p.startsWith("//");
+var isSafeHttpUrl = (u) => {
+  try {
+    const parsed = new URL(u, window.location.origin);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+};
+var AFTER_RESULT = "__ohAfterResult";
+var BUILTIN_TOOL_HANDLERS = {
+  navigate: (args) => {
+    const path = String(args.path ?? "");
+    if (!isSafeRelativePath(path)) return { ok: false, error: "unsafe navigate path" };
+    const here = window.location.pathname + window.location.search + window.location.hash;
+    const target = new URL(path, window.location.href);
+    if (target.pathname + target.search + target.hash === here) return { ok: true, note: "already on this page" };
+    return { ok: true, [AFTER_RESULT]: () => window.location.assign(path) };
+  },
+  openUrl: (args) => {
+    const url = String(args.url ?? "");
+    if (!isSafeHttpUrl(url)) return { ok: false, error: "unsafe url" };
+    const sameHost = new URL(url, window.location.origin).hostname === window.location.hostname;
+    window.open(url, sameHost ? "_self" : "_blank", "noopener,noreferrer");
+    return { ok: true };
+  }
+};
 function createChatClient(options) {
   const fetchImpl = options.fetch ?? globalThis.fetch.bind(globalThis);
   const ES = options.eventSource ?? globalThis.EventSource;
@@ -416,6 +453,23 @@ function createChatClient(options) {
     } catch {
     }
   };
+  const callsKey = `oyehello-chat-calls:${options.agentId}`;
+  const handledCallIds = () => {
+    try {
+      const raw = store2?.getItem(callsKey);
+      const v = raw ? JSON.parse(raw) : null;
+      return v && session && v.sessionId === session.sessionId && Array.isArray(v.ids) ? v.ids : [];
+    } catch {
+      return [];
+    }
+  };
+  const rememberHandledCall = (callId) => {
+    if (!session) return;
+    try {
+      store2?.setItem(callsKey, JSON.stringify({ sessionId: session.sessionId, ids: [...handledCallIds(), callId].slice(-50) }));
+    } catch {
+    }
+  };
   const emit = (e) => {
     for (const l of listeners) l(e);
   };
@@ -464,9 +518,10 @@ function createChatClient(options) {
     } else if (ev.type === "error") {
       emit({ type: "error", error: new Error(ev.message) });
     } else if (ev.type === "tool_call") {
-      if (seenCallIds.has(ev.callId)) return;
+      if (seenCallIds.has(ev.callId) || handledCallIds().includes(ev.callId)) return;
       seenCallIds.add(ev.callId);
-      const handler = toolHandlers.get(ev.name);
+      rememberHandledCall(ev.callId);
+      const handler = toolHandlers.get(ev.name) ?? BUILTIN_TOOL_HANDLERS[ev.name];
       void (async () => {
         if (!session) return;
         const base = { baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, callId: ev.callId, fetchImpl };
@@ -475,8 +530,16 @@ function createChatClient(options) {
           return;
         }
         try {
-          const out = await handler(ev.args);
+          const raw = await handler(ev.args);
+          let after = null;
+          let out = raw;
+          if (raw && typeof raw === "object" && typeof raw[AFTER_RESULT] === "function") {
+            const { [AFTER_RESULT]: run, ...rest } = raw;
+            after = run;
+            out = rest;
+          }
           await postToolResult({ ...base, ok: true, result: typeof out === "string" ? out : JSON.stringify(out ?? { ok: true }) });
+          after?.();
         } catch (err) {
           await postToolResult({ ...base, ok: false, result: err.message });
         }
@@ -558,13 +621,24 @@ function createChatClient(options) {
     if (resumed) {
       session = resumed;
       emit({ type: "agent", agent: resumed.agent });
+      try {
+        const history2 = await getHistory({ baseUrl: options.baseUrl, sessionId: resumed.sessionId, sessionToken: resumed.sessionToken, fetchImpl });
+        for (const h of history2) {
+          const turnId = h.role === "assistant" || h.role === "human" ? h.turnId : void 0;
+          messages.push({ id: uid("m"), role: h.role, text: h.text, streaming: false, turnId });
+          if (h.turnId) seenTurnIds.add(h.turnId);
+        }
+        emitMessages();
+      } catch {
+      }
       await openStream();
       scheduleRefresh();
       flushJourney();
       return;
     }
     if (deviceFingerprint === void 0) deviceFingerprint = await computeDeviceFingerprint().catch(() => null);
-    session = await openSession({ baseUrl: options.baseUrl, apiKey: options.apiKey, agentId: options.agentId, user: options.user, clientTools: Array.from(toolHandlers.keys()), fingerprint: deviceFingerprint ?? void 0, fetchImpl });
+    const advertisedTools = /* @__PURE__ */ new Set([...toolHandlers.keys(), ...Object.keys(BUILTIN_TOOL_HANDLERS)]);
+    session = await openSession({ baseUrl: options.baseUrl, apiKey: options.apiKey, agentId: options.agentId, user: options.user, clientTools: Array.from(advertisedTools), fingerprint: deviceFingerprint ?? void 0, fetchImpl });
     persistSession(session);
     if (!warnedProtocol && typeof session.protocol === "number" && session.protocol !== CHAT_PROTOCOL_VERSION) {
       warnedProtocol = true;
@@ -697,6 +771,44 @@ function createChatClient(options) {
     }
   };
 }
+
+// src/page-theme.ts
+var WATCHED = ["class", "data-theme", "data-mode", "style"];
+function themeOf(node) {
+  for (const attr of ["data-theme", "data-mode"]) {
+    const v = node.getAttribute(attr);
+    if (v === "dark" || v === "light") return v;
+  }
+  if (node.classList.contains("dark")) return "dark";
+  if (node.classList.contains("light")) return "light";
+  return null;
+}
+function resolvePageTheme(el) {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const t = themeOf(node);
+    if (t) return t;
+  }
+  const scheme = (document.documentElement.style.colorScheme || getComputedStyle(document.documentElement).colorScheme || "").trim();
+  return scheme === "dark" || scheme === "light" ? scheme : null;
+}
+function watchPageTheme(el, onChange) {
+  let last;
+  const check = () => {
+    const t = resolvePageTheme(el);
+    if (t !== last) {
+      last = t;
+      onChange(t);
+    }
+  };
+  check();
+  if (typeof MutationObserver === "undefined") return () => {
+  };
+  const mo = new MutationObserver(check);
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    mo.observe(node, { attributes: true, attributeFilter: WATCHED });
+  }
+  return () => mo.disconnect();
+}
 marked.setOptions({ gfm: true, breaks: true });
 var hookInstalled = false;
 function installLinkHook() {
@@ -779,11 +891,15 @@ var STYLES = `
      * body children (oyehello-chat { display:none }) can't silently kill the widget. Also pinned
      * inline with !important at mount (see element.ts) to beat an external !important rule. */
     display: block; visibility: visible; opacity: 1;
+    /* The closed panel still takes up its full size in the layout (it fades, it is not removed), so
+     * the host box covers ~384x620px of the page. The host and its wrapper must not catch clicks;
+     * only the visible parts opt back in (launcher, teaser while shown, panel while open). */
+    pointer-events: none;
     font-family: 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
   }
   @media (prefers-color-scheme: dark) {
-    :host(:not([theme="light"])) {
+    :host(:not([theme="light"]):not([data-oc-page-theme="light"])) {
       --oc-bg: #000000; --oc-bg-sunk: #000000;
       --oc-fg: #FFFFFF; --oc-fg-muted: rgba(255,255,255,0.68); --oc-fg-dim: rgba(255,255,255,0.42);
       --oc-border: rgba(255,255,255,0.09);
@@ -793,7 +909,9 @@ var STYLES = `
       --oc-glass-border: rgba(255,255,255,0.12);
     }
   }
-  :host([theme="dark"]) {
+  /* Explicit dark, or auto on a page that declares dark (data-oc-page-theme, set by page-theme.ts). The OS rule above
+   * only applies when the page declares nothing; a page that declares light keeps the light base. */
+  :host([theme="dark"]), :host(:not([theme="light"])[data-oc-page-theme="dark"]) {
     --oc-bg: #000000; --oc-bg-sunk: #000000;
     --oc-fg: #FFFFFF; --oc-fg-muted: rgba(255,255,255,0.68); --oc-fg-dim: rgba(255,255,255,0.42);
     --oc-border: rgba(255,255,255,0.09);
@@ -805,7 +923,7 @@ var STYLES = `
   * { box-sizing: border-box; }
   button { font-family: inherit; }
 
-  .oc { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
+  .oc { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; }
 
   /* \u2500\u2500 Launcher \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
   .launcher {
@@ -814,6 +932,7 @@ var STYLES = `
     box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--oc-ac) 70%, transparent), 0 18px 48px -18px rgba(0,0,0,0.6);
     color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
     transition: transform .26s var(--oc-bounce), filter .2s var(--oc-ease); align-self: flex-end;
+    pointer-events: auto;
   }
   .launcher:hover { transform: scale(1.06); }
   .launcher:active { transform: scale(0.93); }
@@ -1181,6 +1300,7 @@ var OyehelloChatElement = class extends HTMLElement {
   // Uninstaller for the SPA history-navigation hooks (journey tracking), installed in
   // connectedCallback and torn down in disconnectedCallback alongside everything else.
   uninstallSpaHooks = null;
+  unwatchPageTheme = null;
   // ── shadow refs ──
   oc;
   bodyEl;
@@ -1214,6 +1334,11 @@ var OyehelloChatElement = class extends HTMLElement {
       this.uninstallSpaHooks = null;
     }
     this.renderShell();
+    this.unwatchPageTheme?.();
+    this.unwatchPageTheme = watchPageTheme(this, (t) => {
+      if (t) this.setAttribute("data-oc-page-theme", t);
+      else this.removeAttribute("data-oc-page-theme");
+    });
     this.style.setProperty("display", "block", "important");
     this.style.setProperty("visibility", "visible", "important");
     this.style.setProperty("opacity", "1", "important");
@@ -1324,6 +1449,8 @@ var OyehelloChatElement = class extends HTMLElement {
     this.teardownIdle();
     this.uninstallSpaHooks?.();
     this.uninstallSpaHooks = null;
+    this.unwatchPageTheme?.();
+    this.unwatchPageTheme = null;
     for (const t of this.timers) clearTimeout(t);
     for (const url of this.imagePreviewCache.values()) {
       if (typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(url);
@@ -1334,6 +1461,11 @@ var OyehelloChatElement = class extends HTMLElement {
     if (this.client) this.client.registerTools(handlers);
     else Object.assign(this.pendingTools, handlers);
   }
+  /** Open the chat window, exactly as a launcher click does. No-op if already open or not rendered. */
+  open() {
+    if (!this.oc || this.uiOpen) return;
+    this.openPanel();
+  }
   key(k) {
     return `oyehello-chat:${k}:${this.getAttribute("agent-id") ?? ""}`;
   }