@oyehello/chat 0.5.1 → 0.6.0

package/dist/index.d.cts

@@ -192,6 +192,7 @@ declare class OyehelloChatElement extends HTMLElement {
     private idleTimer;
     private idleReset;
     private uninstallSpaHooks;
+    private unwatchPageTheme;
     private oc;
     private bodyEl;
     private textareaEl;
@@ -209,6 +210,8 @@ declare class OyehelloChatElement extends HTMLElement {
     private applyBrandLogo;
     disconnectedCallback(): void;
     registerTools(handlers: Record<string, ChatToolHandler>): void;
+    /** Open the chat window, exactly as a launcher click does. No-op if already open or not rendered. */
+    open(): void;
     private key;
     private get attrSuggestions();
     private get chipLabels();

package/dist/index.d.ts

@@ -192,6 +192,7 @@ declare class OyehelloChatElement extends HTMLElement {
     private idleTimer;
     private idleReset;
     private uninstallSpaHooks;
+    private unwatchPageTheme;
     private oc;
     private bodyEl;
     private textareaEl;
@@ -209,6 +210,8 @@ declare class OyehelloChatElement extends HTMLElement {
     private applyBrandLogo;
     disconnectedCallback(): void;
     registerTools(handlers: Record<string, ChatToolHandler>): void;
+    /** Open the chat window, exactly as a launcher click does. No-op if already open or not rendered. */
+    open(): void;
     private key;
     private get attrSuggestions();
     private get chipLabels();

package/dist/index.global.js

@@ -61,6 +61,16 @@ var OyehelloChat = (function (exports) {
     });
     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 @@ var OyehelloChat = (function (exports) {
   // 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 = (u3) => {
+    try {
+      const parsed = new URL(u3, 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 @@ var OyehelloChat = (function (exports) {
       } catch {
       }
     };
+    const callsKey = `oyehello-chat-calls:${options.agentId}`;
+    const handledCallIds = () => {
+      try {
+        const raw = store2?.getItem(callsKey);
+        const v2 = raw ? JSON.parse(raw) : null;
+        return v2 && session && v2.sessionId === session.sessionId && Array.isArray(v2.ids) ? v2.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 @@ var OyehelloChat = (function (exports) {
       } 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 @@ var OyehelloChat = (function (exports) {
             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 @@ var OyehelloChat = (function (exports) {
       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;
@@ -698,6 +772,44 @@ var OyehelloChat = (function (exports) {
     };
   }
 
+  // src/page-theme.ts
+  var WATCHED = ["class", "data-theme", "data-mode", "style"];
+  function themeOf(node) {
+    for (const attr of ["data-theme", "data-mode"]) {
+      const v2 = node.getAttribute(attr);
+      if (v2 === "dark" || v2 === "light") return v2;
+    }
+    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();
+  }
+
   // ../../node_modules/marked/lib/marked.esm.js
   function A() {
     return { async: false, breaks: false, extensions: null, gfm: true, hooks: null, pedantic: false, renderer: null, silent: false, tokenizer: null, walkTokens: null };
@@ -3659,11 +3771,15 @@ Please report this to https://github.com/markedjs/marked.`, e) {
      * 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);
@@ -3673,7 +3789,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       --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);
@@ -3685,7 +3803,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   * { 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 {
@@ -3694,6 +3812,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     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); }
@@ -4061,6 +4180,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     // 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;
@@ -4094,6 +4214,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         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");
@@ -4204,6 +4329,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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);
@@ -4214,6 +4341,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       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(k2) {
       return `oyehello-chat:${k2}:${this.getAttribute("agent-id") ?? ""}`;
     }