@oyehello/chat 0.1.0

package/LICENSE

@@ -0,0 +1,59 @@
+oyehello Chat SDK — Software License Agreement
+
+Copyright (c) 2026 Hotreloads Digital Private Limited. All rights reserved.
+
+This is a legal agreement between you ("You") and Hotreloads Digital Private
+Limited ("Hotreloads") governing your use of the @oyehello/chat software package,
+including its source and distributed files (the "Software"). The "Service" means
+the oyehello platform operated by Hotreloads. By installing, embedding, or
+otherwise using the Software, You agree to be bound by this Agreement.
+
+1. LICENSE GRANT. Subject to Your compliance with this Agreement, Hotreloads
+   grants You a non-exclusive, non-transferable, non-sublicensable, revocable,
+   worldwide license to install and embed the Software in Your own website or
+   application, and to use it, solely to connect to and use the Service through a
+   valid oyehello account and a publishable key issued to You.
+
+2. RESTRICTIONS. You may not: (a) modify, adapt, translate, or create derivative
+   works of the Software; (b) reverse engineer, decompile, or disassemble the
+   Software, except to the extent this restriction is prohibited by applicable
+   law; (c) redistribute, sublicense, sell, rent, lease, or otherwise make the
+   Software available to any third party, except as embedded in and delivered as
+   part of Your own application to Your end users; (d) remove, obscure, or alter
+   any proprietary notices in the Software; or (e) use the Software other than in
+   connection with the Service.
+
+3. OWNERSHIP. The Software is licensed, not sold. Hotreloads and its licensors
+   retain all right, title, and interest in and to the Software, including all
+   intellectual property rights therein. No rights are granted except as
+   expressly set out in this Agreement.
+
+4. NO WARRANTY. THE SOFTWARE IS PROVIDED "AS IS" AND "AS AVAILABLE", WITHOUT
+   WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+   WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE, AND
+   NON-INFRINGEMENT.
+
+5. LIMITATION OF LIABILITY. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN
+   NO EVENT SHALL HOTRELOADS BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL,
+   CONSEQUENTIAL, OR PUNITIVE DAMAGES, OR FOR ANY LOSS OF PROFITS, REVENUE, DATA,
+   OR GOODWILL, ARISING OUT OF OR RELATED TO YOUR USE OF OR INABILITY TO USE THE
+   SOFTWARE, WHETHER IN CONTRACT, TORT, OR OTHERWISE, EVEN IF ADVISED OF THE
+   POSSIBILITY OF SUCH DAMAGES.
+
+6. TERMINATION. This license terminates automatically, without notice, if You
+   breach any term of this Agreement, or when Your oyehello account or the
+   corresponding publishable key is suspended or terminated. Upon termination You
+   must cease all use of the Software and remove it from Your website and
+   applications. Sections 3 through 8 survive termination.
+
+7. GOVERNING LAW. This Agreement is governed by the laws of India, without regard
+   to its conflict-of-laws rules. The courts at Bengaluru, Karnataka, India shall
+   have exclusive jurisdiction over any dispute arising out of or relating to this
+   Agreement.
+
+8. ENTIRE AGREEMENT. This Agreement is the entire agreement between You and
+   Hotreloads regarding the Software and supersedes any prior understanding on its
+   subject matter. If any provision is held unenforceable, the remaining
+   provisions remain in full force.
+
+For licensing enquiries, contact: legal@hotreloads.com

package/README.md

@@ -0,0 +1,79 @@
+# @oyehello/chat
+
+Framework-agnostic embeddable chat for oyehello agents — a `<oyehello-chat>` web component with a working default UI, plus a headless `createChatClient()` for custom UIs. Zero framework dependencies.
+
+## Install
+```bash
+npm install @oyehello/chat
+```
+
+## Drop-in web component (any framework or plain HTML / Astro / Vue / Svelte)
+```html
+<script type="module">import '@oyehello/chat';</script>
+<oyehello-chat
+  api-key="ohk_pub_…"
+  agent-id="agt_…"
+  base-url="https://call.hotreloads.ai"
+></oyehello-chat>
+```
+Or via a plain script tag (no bundler):
+```html
+<script src="https://unpkg.com/@oyehello/chat"></script>
+<oyehello-chat api-key="ohk_pub_…" agent-id="agt_…" base-url="https://call.hotreloads.ai"></oyehello-chat>
+```
+Theme the accent with the `--oc-accent` CSS variable.
+
+### React
+The custom element works in React too (React 19 natively; React 18 fine for these string attributes). The tag is `<oyehello-chat>` (hyphenated — a custom element must contain a dash; `<oyehelloChat>` is not valid) and attributes stay kebab-case:
+```tsx
+import '@oyehello/chat';
+export default function Chat() {
+  return <oyehello-chat api-key="ohk_pub_…" agent-id="agt_…" base-url="https://call.hotreloads.ai" />;
+}
+```
+TypeScript/TSX users add this ambient declaration once (e.g. `oyehello-chat.d.ts`) so the tag typechecks:
+```ts
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'oyehello-chat': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+        & { 'api-key'?: string; 'agent-id'?: string; 'base-url'?: string; title?: string };
+    }
+  }
+}
+export {};
+```
+
+## Headless (build your own UI)
+```js
+import { createChatClient } from '@oyehello/chat';
+const chat = createChatClient({ apiKey: 'ohk_pub_…', agentId: 'agt_…', baseUrl: 'https://call.hotreloads.ai' });
+chat.on((e) => { if (e.type === 'messages') render(e.messages); });
+await chat.start();
+await chat.sendMessage('Hello');
+```
+
+## Client tools (browser actions)
+
+An agent can call browser-side tools your page executes. Register a handler per tool; a tool
+reaches the agent only when it is (a) enabled for that agent in the console AND (b) registered here:
+```js
+const chat = createChatClient({ apiKey, agentId, baseUrl });
+chat.registerTools({
+  navigate: ({ path }) => router.push(path),
+  fillField: ({ selector, value }) => { /* your DOM logic */ },
+});
+// or on the web component: document.querySelector('oyehello-chat').registerTools({ … })
+```
+Register handlers BEFORE `start()` — only tools registered at open are offered to the agent that session.
+
+> **Security.** `navigate`/`openUrl` targets can be constrained to an allowlist in the agent's console
+> settings. The other tools (`click`, `fillField`, `readPageContext`, `custom`) receive
+> model-generated arguments with no server-side restriction: **your handler is the trust boundary.**
+> Because a visitor can influence the conversation, treat these as capable of arbitrary DOM action —
+> validate selectors/values and scope what each handler can do before enabling them.
+
+## Requirements
+- `api-key` is a **publishable** key (`ohk_pub_…`) created in the oyehello console.
+- The agent must have **chat enabled**.
+- The page's origin must be on the publishable key's **allowlist**.

package/dist/index.cjs

@@ -0,0 +1,545 @@
+'use strict';
+
+// src/errors.ts
+var ChatApiError = class extends Error {
+  constructor(message, status, code, meta) {
+    super(message);
+    this.status = status;
+    this.code = code;
+    this.meta = meta;
+    this.name = "ChatApiError";
+  }
+  status;
+  code;
+  meta;
+};
+
+// src/transport.ts
+async function asError(res, fallbackCode) {
+  let body = {};
+  try {
+    body = await res.json();
+  } catch {
+  }
+  return new ChatApiError(body.error ?? `HTTP ${res.status}`, res.status, body.code ?? fallbackCode, body.meta);
+}
+async function openSession(opts) {
+  const body = { agentId: opts.agentId };
+  if (opts.user) body.user = opts.user;
+  if (opts.clientTools && opts.clientTools.length > 0) body.clientTools = opts.clientTools;
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions`, {
+    method: "POST",
+    credentials: "omit",
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${opts.apiKey}` },
+    body: JSON.stringify(body)
+  });
+  if (!res.ok) throw await asError(res);
+  return await res.json();
+}
+async function postMessage(opts) {
+  const body = { text: opts.text };
+  if (opts.attachments && opts.attachments.length > 0) body.attachments = opts.attachments;
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/messages`, {
+    method: "POST",
+    credentials: "omit",
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${opts.sessionToken}` },
+    body: JSON.stringify(body)
+  });
+  if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
+}
+async function endSession(opts) {
+  await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/end`, {
+    method: "POST",
+    credentials: "omit",
+    headers: { Authorization: `Bearer ${opts.sessionToken}` }
+  }).catch(() => {
+  });
+}
+async function postToolResult(opts) {
+  await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/tool-results`, {
+    method: "POST",
+    credentials: "omit",
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${opts.sessionToken}` },
+    body: JSON.stringify({ callId: opts.callId, ok: opts.ok, result: opts.result })
+  }).catch(() => {
+  });
+}
+async function mintStreamTicket(opts) {
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/stream-ticket`, {
+    method: "POST",
+    credentials: "omit",
+    headers: { Authorization: `Bearer ${opts.sessionToken}` }
+  });
+  if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
+  return await res.json();
+}
+function streamUrl(baseUrl, sessionId, ticket) {
+  return `${baseUrl}/chat/sessions/${sessionId}/stream?ticket=${encodeURIComponent(ticket)}`;
+}
+async function presignAttachment(opts) {
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/attachments`, {
+    method: "POST",
+    credentials: "omit",
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${opts.sessionToken}` },
+    body: JSON.stringify({ contentType: opts.contentType })
+  });
+  if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
+  return await res.json();
+}
+async function getAttachmentUrl(opts) {
+  const res = await opts.fetchImpl(`${opts.baseUrl}/chat/sessions/${opts.sessionId}/attachment-url`, {
+    method: "POST",
+    credentials: "omit",
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${opts.sessionToken}` },
+    body: JSON.stringify({ storageRef: opts.storageRef })
+  });
+  if (!res.ok) throw await asError(res, res.status === 401 ? "session_expired" : void 0);
+  return (await res.json()).url;
+}
+async function uploadToPresigned(uploadUrl, file, fetchImpl) {
+  const res = await fetchImpl(uploadUrl, { method: "PUT", body: file, headers: { "Content-Type": file.type } });
+  if (!res.ok) throw new ChatApiError(`attachment upload failed with HTTP ${res.status}`, res.status);
+}
+
+// src/client.ts
+var seq = 0;
+var uid = (p) => `${p}_${Date.now().toString(36)}_${(seq++).toString(36)}`;
+function createChatClient(options) {
+  const fetchImpl = options.fetch ?? globalThis.fetch;
+  const ES = options.eventSource ?? globalThis.EventSource;
+  const maxAttachments = options.maxAttachments ?? 4;
+  const maxAttachmentBytes = options.maxAttachmentBytes ?? 1e7;
+  const listeners = /* @__PURE__ */ new Set();
+  let state = "idle";
+  const messages = [];
+  let streamingId = null;
+  let session = null;
+  let es = null;
+  const seenTurnIds = /* @__PURE__ */ new Set();
+  const seenCallIds = /* @__PURE__ */ new Set();
+  let handoffState = "ai";
+  let reconnectTimer = null;
+  let reconnectAttempts = 0;
+  let closed = false;
+  const toolHandlers = /* @__PURE__ */ new Map();
+  const clearReconnect = () => {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+  };
+  const emit = (e) => {
+    for (const l of listeners) l(e);
+  };
+  const setState = (s) => {
+    state = s;
+    emit({ type: "state", state: s });
+  };
+  const emitMessages = () => emit({ type: "messages", messages: messages.slice() });
+  const onEvent = (ev) => {
+    if (ev.type === "token") {
+      let m = streamingId ? messages.find((x) => x.id === streamingId) : void 0;
+      if (!m) {
+        m = { id: uid("m"), role: "assistant", text: "", streaming: true };
+        messages.push(m);
+        streamingId = m.id;
+      }
+      m.text += ev.text;
+      emitMessages();
+    } else if (ev.type === "message") {
+      if (seenTurnIds.has(ev.turnId)) {
+        if (streamingId) {
+          const idx = messages.findIndex((x) => x.id === streamingId);
+          if (idx !== -1) messages.splice(idx, 1);
+          streamingId = null;
+          emitMessages();
+        }
+        return;
+      }
+      seenTurnIds.add(ev.turnId);
+      const m = streamingId ? messages.find((x) => x.id === streamingId) : void 0;
+      if (m) {
+        m.text = ev.text;
+        m.streaming = false;
+        m.turnId = ev.turnId;
+      } else {
+        messages.push({ id: uid("m"), role: "assistant", text: ev.text, streaming: false, turnId: ev.turnId });
+      }
+      streamingId = null;
+      emitMessages();
+    } else if (ev.type === "citations") {
+      const m = messages.find((x) => x.turnId === ev.turnId);
+      if (m) {
+        m.sources = ev.sources;
+        emitMessages();
+      }
+    } 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;
+      seenCallIds.add(ev.callId);
+      const handler = toolHandlers.get(ev.name);
+      void (async () => {
+        if (!session) return;
+        const base = { baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, callId: ev.callId, fetchImpl };
+        if (!handler) {
+          await postToolResult({ ...base, ok: false, result: `no handler registered for ${ev.name}` });
+          return;
+        }
+        try {
+          const out = await handler(ev.args);
+          await postToolResult({ ...base, ok: true, result: typeof out === "string" ? out : JSON.stringify(out ?? { ok: true }) });
+        } catch (err) {
+          await postToolResult({ ...base, ok: false, result: err.message });
+        }
+      })();
+    } else if (ev.type === "attachment") {
+      const items = ev.items;
+      const alreadyRendered = messages.some((m) => m.attachments?.some((a) => items.some((i) => i.storageRef === a.storageRef)));
+      if (alreadyRendered) return;
+      const target = [...messages].reverse().find((m) => m.role === "user" && !m.attachments);
+      if (target) target.attachments = items;
+      else messages.push({ id: uid("u"), role: "user", text: "", streaming: false, attachments: items });
+      emitMessages();
+    } else if (ev.type === "human_message") {
+      if (seenTurnIds.has(ev.turnId)) return;
+      seenTurnIds.add(ev.turnId);
+      messages.push({ id: uid("m"), role: "human", text: ev.text, streaming: false });
+      emitMessages();
+    } else if (ev.type === "visitor_message") ; else if (ev.type === "state") {
+      if (ev.state === "ai" || ev.state === "awaiting_human" || ev.state === "human") {
+        handoffState = ev.state;
+        emit({ type: "handoff", state: handoffState });
+      }
+    } else if (ev.type === "agent_typing") {
+      emit({ type: "agentTyping", active: !!ev.active });
+    }
+  };
+  const openStream = async () => {
+    if (!session || closed) return;
+    es?.close();
+    const { ticket } = await mintStreamTicket({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, fetchImpl });
+    if (closed) return;
+    es = new ES(streamUrl(options.baseUrl, session.sessionId, ticket));
+    es.onopen = () => {
+      reconnectAttempts = 0;
+    };
+    es.onmessage = (e) => {
+      try {
+        onEvent(JSON.parse(e.data));
+      } catch {
+      }
+    };
+    es.onerror = () => {
+      es?.close();
+      es = null;
+      scheduleReconnect();
+    };
+  };
+  const scheduleReconnect = () => {
+    if (closed) return;
+    clearReconnect();
+    const delay = Math.min(3e4, 500 * 2 ** reconnectAttempts);
+    reconnectAttempts += 1;
+    reconnectTimer = setTimeout(() => {
+      openStream().catch((err) => {
+        if (err instanceof ChatApiError && err.code === "session_expired") {
+          open().catch((e) => {
+            emit({ type: "error", error: e });
+            scheduleReconnect();
+          });
+        } else {
+          scheduleReconnect();
+        }
+      });
+    }, delay);
+  };
+  const open = async () => {
+    session = await openSession({ baseUrl: options.baseUrl, apiKey: options.apiKey, agentId: options.agentId, user: options.user, clientTools: Array.from(toolHandlers.keys()), fetchImpl });
+    emit({ type: "agent", agent: session.agent });
+    await openStream();
+  };
+  const uploadFiles = async (files) => {
+    return Promise.all(files.map(async (file) => {
+      const { storageRef, uploadUrl } = await presignAttachment({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, contentType: file.type, fetchImpl });
+      await uploadToPresigned(uploadUrl, file, fetchImpl);
+      return { storageRef, contentType: file.type, name: file.name };
+    }));
+  };
+  return {
+    getMessages: () => messages.slice(),
+    getState: () => state,
+    on(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    registerTools(handlers) {
+      for (const [name, fn] of Object.entries(handlers)) toolHandlers.set(name, fn);
+    },
+    async getAttachmentUrl(storageRef) {
+      if (!session) throw new Error("call start() before getAttachmentUrl");
+      return getAttachmentUrl({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, storageRef, fetchImpl });
+    },
+    async start() {
+      if (state !== "idle") return;
+      setState("opening");
+      try {
+        await open();
+        setState("ready");
+      } catch (err) {
+        setState("error");
+        emit({ type: "error", error: err });
+      }
+    },
+    async sendMessage(text, files) {
+      if (!session) {
+        emit({ type: "error", error: new Error("call start() before sendMessage") });
+        return;
+      }
+      const fileList = files ?? [];
+      if (fileList.length > maxAttachments) {
+        emit({ type: "error", error: new Error(`too many attachments: max ${maxAttachments} per message`) });
+        return;
+      }
+      const oversized = fileList.find((f) => f.size > maxAttachmentBytes);
+      if (oversized) {
+        emit({ type: "error", error: new Error(`attachment too large: ${oversized.name} exceeds ${maxAttachmentBytes} bytes`) });
+        return;
+      }
+      let attachments = [];
+      if (fileList.length > 0) {
+        try {
+          attachments = await uploadFiles(fileList);
+        } catch (err) {
+          emit({ type: "error", error: err });
+          return;
+        }
+      }
+      messages.push({ id: uid("u"), role: "user", text, streaming: false, attachments: attachments.length > 0 ? attachments : void 0 });
+      emitMessages();
+      try {
+        await postMessage({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, text, attachments, fetchImpl });
+      } catch (err) {
+        if (err instanceof ChatApiError && err.code === "session_expired") {
+          try {
+            await open();
+            const freshAttachments = fileList.length ? await uploadFiles(fileList) : [];
+            await postMessage({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, text, attachments: freshAttachments, fetchImpl });
+          } catch (retryErr) {
+            emit({ type: "error", error: retryErr });
+          }
+        } else {
+          emit({ type: "error", error: err });
+        }
+      }
+    },
+    async end() {
+      closed = true;
+      clearReconnect();
+      if (session) await endSession({ baseUrl: options.baseUrl, sessionId: session.sessionId, sessionToken: session.sessionToken, fetchImpl });
+      es?.close();
+      es = null;
+      setState("ended");
+    }
+  };
+}
+
+// src/element.ts
+var HANDOFF_STATUS_TEXT = {
+  ai: null,
+  awaiting_human: "Connecting you to a person\u2026",
+  human: "You're chatting with a person"
+};
+var ATTACHMENT_ACCEPT = "image/*,application/pdf,text/plain,text/csv";
+var AGENT_TYPING_TEXT = "The agent is typing\u2026";
+var OyehelloChatElement = class extends HTMLElement {
+  static observedAttributes = ["api-key", "agent-id", "base-url", "title"];
+  client = null;
+  off = null;
+  messages = [];
+  state = "idle";
+  agentName = null;
+  handoffState = "ai";
+  // Transient "agent is typing…" affordance (Phase 7 followups) - never a message, only rendered
+  // while a handoff is active (human/awaiting_human).
+  agentTyping = false;
+  // registerTools() may be called before connectedCallback creates the client (e.g. right after
+  // document.createElement, before the element is attached). Buffer until the client exists.
+  pendingTools = {};
+  // Files picked in the file input, staged until the form submits alongside the text.
+  pendingFiles = [];
+  // Best-effort local thumbnail cache for images THIS widget instance just sent, keyed by filename -
+  // an instant blob src, no round-trip needed.
+  imagePreviewCache = /* @__PURE__ */ new Map();
+  // Read-back URLs resolved lazily (via client.getAttachmentUrl) for images with no local blob (a
+  // reconnect, or an `attachment` SSE echo), keyed by storageRef. Cached across re-renders so the
+  // same image isn't re-fetched on every render() call.
+  resolvedUrlCache = /* @__PURE__ */ new Map();
+  connectedCallback() {
+    if (!this.shadowRoot) this.attachShadow({ mode: "open" });
+    const apiKey = this.getAttribute("api-key");
+    const agentId = this.getAttribute("agent-id");
+    const baseUrl = this.getAttribute("base-url");
+    if (!apiKey || !agentId || !baseUrl) {
+      this.renderError("oyehello-chat: api-key, agent-id and base-url are required");
+      return;
+    }
+    this.client = createChatClient({ apiKey, agentId, baseUrl });
+    if (Object.keys(this.pendingTools).length > 0) {
+      this.client.registerTools(this.pendingTools);
+      this.pendingTools = {};
+    }
+    this.off = this.client.on((e) => {
+      if (e.type === "messages") this.messages = e.messages;
+      else if (e.type === "state") this.state = e.state;
+      else if (e.type === "agent") this.agentName = e.agent.name;
+      else if (e.type === "handoff") this.handoffState = e.state;
+      else if (e.type === "agentTyping") this.agentTyping = e.active;
+      this.render();
+    });
+    this.render();
+    void this.client.start();
+  }
+  disconnectedCallback() {
+    this.off?.();
+    void this.client?.end();
+    for (const url of this.imagePreviewCache.values()) {
+      if (typeof URL.revokeObjectURL === "function") URL.revokeObjectURL(url);
+    }
+    this.imagePreviewCache.clear();
+  }
+  registerTools(handlers) {
+    if (this.client) this.client.registerTools(handlers);
+    else Object.assign(this.pendingTools, handlers);
+  }
+  send(text, files) {
+    if (!text.trim()) return;
+    for (const f of files) {
+      if (f.type.startsWith("image/") && typeof URL.createObjectURL === "function" && !this.imagePreviewCache.has(f.name)) {
+        this.imagePreviewCache.set(f.name, URL.createObjectURL(f));
+      }
+    }
+    void this.client?.sendMessage(text, files.length > 0 ? files : void 0);
+  }
+  renderError(msg) {
+    if (!this.shadowRoot) this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `<div style="color:#b91c1c;font:13px system-ui;padding:12px">${escapeHtml(msg)}</div>`;
+  }
+  renderAttachment(a) {
+    if (a.contentType.startsWith("image/")) {
+      const cached = (a.name ? this.imagePreviewCache.get(a.name) : void 0) ?? this.resolvedUrlCache.get(a.storageRef);
+      const srcAttr = cached ? ` src="${cached}"` : "";
+      return `<img class="att-thumb" data-oc-ref="${escapeHtml(a.storageRef)}"${srcAttr} alt="${escapeHtml(a.name ?? "image")}"/>`;
+    }
+    return `<div class="att-chip">\u{1F4CE} ${escapeHtml(a.name ?? a.contentType)}</div>`;
+  }
+  renderSource(s) {
+    return `<div class="src-chip" title="${escapeHtml(s.snippet)}">${escapeHtml(s.title)}</div>`;
+  }
+  // After render() attaches the markup, resolve a read-back URL (via the client) for every image
+  // placeholder that has no src yet - a local blob or a previously-resolved URL already set one, so
+  // those are left untouched (no redundant network call).
+  hydrateAttachmentImages() {
+    if (!this.client) return;
+    const imgs = this.shadowRoot.querySelectorAll("img.att-thumb[data-oc-ref]");
+    imgs.forEach((img) => {
+      if (img.hasAttribute("src")) return;
+      const ref = img.getAttribute("data-oc-ref");
+      if (!ref) return;
+      void this.client.getAttachmentUrl(ref).then((url) => {
+        this.resolvedUrlCache.set(ref, url);
+        img.src = url;
+      }).catch(() => {
+      });
+    });
+  }
+  render() {
+    const title = this.getAttribute("title") ?? this.agentName ?? "Chat";
+    const bubbles = this.messages.map((m) => {
+      const atts = (m.attachments ?? []).map((a) => this.renderAttachment(a)).join("");
+      const label = m.role === "human" ? '<div class="human-label">Support</div>' : "";
+      const bubble = `<div class="b ${m.role}">${label}${atts}${m.text ? escapeHtml(m.text) : ""}${m.streaming ? "\u2026" : ""}</div>`;
+      const sources = m.sources && m.sources.length > 0 ? `<div class="src-row">${m.sources.map((s) => this.renderSource(s)).join("")}</div>` : "";
+      return bubble + sources;
+    }).join("");
+    const statusText = HANDOFF_STATUS_TEXT[this.handoffState];
+    const status = statusText ? `<div class="status">${escapeHtml(statusText)}</div>` : "";
+    const showTyping = this.agentTyping && (this.handoffState === "human" || this.handoffState === "awaiting_human");
+    const typingIndicator = showTyping ? `<div class="b assistant typing">${escapeHtml(AGENT_TYPING_TEXT)}</div>` : "";
+    const disabled = this.state !== "ready" ? "disabled" : "";
+    const prevInput = this.shadowRoot.querySelector('input[aria-label="message"]');
+    const prevValue = prevInput?.value ?? "";
+    const prevSelectionStart = prevInput?.selectionStart ?? null;
+    const prevSelectionEnd = prevInput?.selectionEnd ?? null;
+    const hadFocus = !!prevInput && this.shadowRoot.activeElement === prevInput;
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host{display:block;height:100%;min-height:320px;font-family:system-ui,sans-serif;--oc-accent:#2563eb}
+        .wrap{display:flex;flex-direction:column;height:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
+        .hd{padding:10px 14px;border-bottom:1px solid #e5e7eb;font-weight:600}
+        .body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
+        .b{max-width:80%;padding:8px 12px;border-radius:12px;white-space:pre-wrap;word-break:break-word}
+        .b.user{align-self:flex-end;background:var(--oc-accent);color:#fff}
+        .b.assistant{align-self:flex-start;background:#f3f4f6;color:#111}
+        .b.human{align-self:flex-start;background:#dbeafe;color:#111}
+        .b.typing{font-style:italic;color:#6b7280;opacity:.85}
+        .human-label{font-size:11px;font-weight:600;opacity:.7;margin-bottom:2px}
+        .status{padding:6px 14px;font-size:12px;color:#6b7280;background:#f9fafb;border-bottom:1px solid #e5e7eb}
+        .att-thumb{display:block;max-width:160px;max-height:160px;border-radius:8px;margin-bottom:6px}
+        .att-chip{display:inline-block;font-size:12px;background:rgba(0,0,0,.08);border-radius:6px;padding:2px 8px;margin:0 0 6px}
+        .b.user .att-chip{background:rgba(255,255,255,.25)}
+        .src-row{align-self:flex-start;display:flex;flex-wrap:wrap;gap:6px;max-width:80%}
+        .src-chip{display:inline-block;font-size:11px;background:rgba(0,0,0,.06);color:#374151;border-radius:6px;padding:2px 8px;cursor:default}
+        form{display:flex;gap:8px;padding:10px;border-top:1px solid #e5e7eb;align-items:center}
+        input[aria-label="message"]{flex:1;padding:8px 10px;border-radius:8px;border:1px solid #d1d5db;font:inherit}
+        input[type="file"]{max-width:120px;font-size:12px}
+        button{padding:8px 14px;border-radius:8px;border:none;background:var(--oc-accent);color:#fff;font-weight:600;cursor:pointer}
+        button:disabled,input:disabled{opacity:.6;cursor:not-allowed}
+      </style>
+      <div class="wrap">
+        <div class="hd">${escapeHtml(title)}</div>
+        ${status}
+        <div class="body">${bubbles}${typingIndicator}</div>
+        <form>
+          <input aria-label="message" placeholder="Type a message\u2026" ${disabled}/>
+          <input type="file" accept="${ATTACHMENT_ACCEPT}" multiple ${disabled}/>
+          <button type="submit" ${disabled}>Send</button>
+        </form>
+      </div>`;
+    const form = this.shadowRoot.querySelector("form");
+    const input = this.shadowRoot.querySelector('input[aria-label="message"]');
+    const fileInput = this.shadowRoot.querySelector('input[type="file"]');
+    fileInput.addEventListener("change", () => {
+      this.pendingFiles = fileInput.files ? Array.from(fileInput.files) : [];
+    });
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const files = this.pendingFiles;
+      this.pendingFiles = [];
+      this.send(input.value, files);
+      input.value = "";
+    });
+    if (prevValue) {
+      input.value = prevValue;
+      if (prevSelectionStart !== null && prevSelectionEnd !== null) input.setSelectionRange(prevSelectionStart, prevSelectionEnd);
+    }
+    if (hadFocus) input.focus();
+    const body = this.shadowRoot.querySelector(".body");
+    body.scrollTop = body.scrollHeight;
+    this.hydrateAttachmentImages();
+  }
+};
+function escapeHtml(s) {
+  return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+}
+
+// src/index.ts
+if (typeof customElements !== "undefined" && !customElements.get("oyehello-chat")) {
+  customElements.define("oyehello-chat", OyehelloChatElement);
+}
+
+exports.ChatApiError = ChatApiError;
+exports.OyehelloChatElement = OyehelloChatElement;
+exports.createChatClient = createChatClient;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map