@osvi-ai/chat 0.0.0-stage → 0.1.1

package/dist/ui.mjs

@@ -0,0 +1,646 @@
+import { nothing as c, html as a, svg as b, LitElement as W, css as X, unsafeCSS as nt } from "lit";
+import { property as l, state as v } from "lit/decorators.js";
+import { c as at, i as ot, a as lt, b as B } from "./index-HWHyM4-l.js";
+import { repeat as dt } from "lit/directives/repeat.js";
+import { live as ct } from "lit/directives/live.js";
+const Z = { primary: "#4f46e5", background: "#ffffff", surface: "#f4f4f5", text: "#18181b", userBubble: "#4f46e5", assistantBubble: "#f4f4f5" }, pt = { primary: "#6366f1", background: "#0a0a12", surface: "#1c1c27", text: "#f4f4f5", userBubble: "#6366f1", assistantBubble: "#1f1f2b" }, ht = { none: "0px", sm: "6px", md: "10px", lg: "16px", full: "9999px" }, C = { primary: "--osvi-color-primary", background: "--osvi-color-background", surface: "--osvi-color-surface", text: "--osvi-color-text", userBubble: "--osvi-color-user-bubble", assistantBubble: "--osvi-color-assistant-bubble" }, ut = (i) => `var(${C[i]}, ${Z[i]})`;
+function E(i) {
+  const t = { ...i?.mode === "dark" ? pt : Z, ...i?.colors };
+  !i?.colors?.userBubble && i?.colors?.primary && (t.userBubble = i.colors.primary);
+  const e = {};
+  for (const s of Object.keys(C)) e[C[s]] = t[s];
+  const r = i?.radius ?? "md";
+  return e["--osvi-radius"] = typeof r == "number" ? `${r}px` : ht[r], e;
+}
+function bt(i) {
+  if (!i) return {};
+  if (i.mode) return E(i);
+  const t = E(i), e = {};
+  for (const r of Object.keys(i.colors ?? {})) e[C[r]] = t[C[r]];
+  return i.radius !== void 0 && (e["--osvi-radius"] = t["--osvi-radius"]), e;
+}
+const O = /* @__PURE__ */ new WeakMap();
+function Q(i, t) {
+  for (const r of O.get(i) ?? []) i.style.removeProperty(r);
+  const e = bt(t);
+  for (const [r, s] of Object.entries(e)) i.style.setProperty(r, s);
+  O.set(i, Object.keys(e));
+}
+const H = {
+  placeholder: "Type your message…",
+  send: "Send",
+  typing: "Typing…",
+  humanJoined: "A team member has joined",
+  chooseOption: "Choose an option to continue.",
+  typeAnswer: "Type your answer below, then press Send.",
+  sending: "Sending your response…",
+  pausedForHuman: "Choices are paused while a team member is connected.",
+  sendFailed: "Message not sent.",
+  retry: "Retry",
+  sessionEnded: "Conversation ended",
+  reconnecting: "Reconnecting…",
+  offline: "You are offline. We will reconnect automatically.",
+  unavailable: "This chat is unavailable.",
+  originBlocked: "This chat is not enabled for this website.",
+  rateLimited: "Too many requests. Please try again in a few minutes.",
+  tryAgain: "Try again",
+  closeChat: "Close chat",
+  poweredBy: "Powered by Osvi AI",
+  newChat: "New chat",
+  emptyState: "Send a message to start chatting.",
+  defaultTitle: "Chat"
+}, N = /* @__PURE__ */ new Set();
+function tt(i, t) {
+  N.has(i) || (N.add(i), console.warn(`[osvi-chat] ${t}`));
+}
+function x(i, t) {
+  return i != null && t.includes(i) ? i : void 0;
+}
+function K(i) {
+  if (i != null)
+    return x(i, ["none", "sm", "md", "lg", "full"]) ?? (/^\d{1,2}(?:px)?$/.test(i) ? Number(i.replace(/px$/, "")) : void 0);
+}
+function V(i) {
+  if (i) {
+    try {
+      const t = new URL(i);
+      if (!t.username && !t.password && (t.protocol === "https:" || t.protocol === "http:" && ["localhost", "127.0.0.1"].includes(t.hostname))) return i.replace(/\/+$/, "");
+    } catch {
+    }
+    tt("base-url", "ignored an invalid base-url (https required, http only for localhost)");
+  }
+}
+function ft(i) {
+  if (i) {
+    if (/^data:image\/(png|jpeg|gif|webp);base64,[a-z0-9+/]+={0,2}$/i.test(i)) return i;
+    try {
+      const t = new URL(i);
+      if (t.protocol === "https:" && !t.username && !t.password) return i;
+    } catch {
+    }
+  }
+}
+function J(i, t) {
+  if (t) {
+    try {
+      const e = JSON.parse(t);
+      if (e && typeof e == "object" && !Array.isArray(e)) return e;
+    } catch {
+    }
+    tt(i, `ignored invalid JSON in the ${i} attribute`);
+  }
+}
+const gt = /https?:\/\/[^\s<>"']+/g, S = (i, t) => i.split(t).length - 1;
+function vt(i) {
+  for (; ; ) {
+    const t = i[i.length - 1];
+    if (t && ".,!?;:".includes(t) || t === ")" && S(i, ")") > S(i, "(") || t === "]" && S(i, "]") > S(i, "[")) {
+      i = i.slice(0, -1);
+      continue;
+    }
+    return i;
+  }
+}
+function mt(i) {
+  const t = [];
+  let e = 0;
+  for (const r of i.matchAll(gt)) {
+    const s = vt(r[0]), n = r.index;
+    try {
+      const o = new URL(s);
+      if (!["http:", "https:"].includes(o.protocol)) continue;
+    } catch {
+      continue;
+    }
+    n > e && t.push({ text: i.slice(e, n) }), t.push({ href: s, text: s }), e = n + s.length;
+  }
+  return e < i.length && t.push({ text: i.slice(e) }), t.length ? t : [{ text: i }];
+}
+function yt(i, t, e, r, s) {
+  return a`${i.items.length ? dt(i.items, (n) => n.id, (n) => {
+    if (n.kind === "divider") return a`<p class="divider">${t.sessionEnded}</p>`;
+    if (n.kind === "message") return a`<article class=${`bubble ${n.role}`}>${n.role === "human" ? a`<small class="team">Team</small>` : c}<p>${mt(n.content).map((k) => "href" in k ? a`<a href=${k.href} target="_blank" rel="noopener noreferrer">${k.text}</a>` : k.text)}</p>${n.role === "user" && n.status === "failed" ? a`<span class="failed"><span>${t.sendFailed}</span><button type="button" @click=${() => s(n.id)}>${t.retry}</button></span>` : c}</article>`;
+    const o = n.interaction, h = o.interaction_id === i.activeInteraction?.interaction_id && o.interaction_status === "pending", f = !h || i.interactionPending || i.mode === "human";
+    switch (o.tool_type) {
+      case "ui_buttons":
+        return a`<osvi-buttons data-live=${h ? "true" : "false"} .interaction=${o} .disabled=${f} .variant=${e.buttons ?? "chips"} base-url=${r}></osvi-buttons>`;
+      case "ui_carousel":
+        return a`<osvi-carousel data-live=${h ? "true" : "false"} .interaction=${o} .disabled=${f} .variant=${e.carousel ?? "slider"} base-url=${r}></osvi-carousel>`;
+      case "ui_date_picker":
+        return a`<osvi-date-picker data-live=${h ? "true" : "false"} .interaction=${o} .disabled=${f} base-url=${r}></osvi-date-picker>`;
+      default:
+        return a`<p>${o.content}</p>`;
+    }
+  }) : a`<p class="empty">${t.emptyState}</p>`}${i.awaitingReply ? a`<div class="typing" role="img" aria-label=${t.typing}><i></i><i></i><i></i></div>` : c}`;
+}
+const m = (i, t = "") => b`<svg class=${t} viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${i}</svg>`;
+m(b`<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z"/><path d="M8.5 8.5h7M8.5 11.5h4"/>`);
+const xt = m(b`<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z"/><path d="M12 6.5v6M9 9.5h6"/>`), $t = m(b`<path d="M6 6l12 12M18 6L6 18"/>`);
+m(b`<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z"/><path d="M8.5 8.5h7M8.5 11.5h4"/>`, "chat");
+m(b`<path d="M6 6l12 12M18 6L6 18"/>`, "close");
+const wt = m(b`<path d="M12 19V5M5.5 11.5L12 5l6.5 6.5"/>`), et = m(b`<path d="M15 6l-6 6 6 6"/>`), R = m(b`<path d="M9 6l6 6-6 6"/>`), kt = b`<svg viewBox="0 0 134 134" aria-hidden="true" focusable="false"><defs><linearGradient id="osvi-g" x1="-36.28" y1="32.2" x2="161.98" y2="93.64" gradientUnits="userSpaceOnUse"><stop offset=".304" stop-color="#155DFC"/><stop offset=".822" stop-color="#353333"/></linearGradient><mask id="osvi-m" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-7" y="-6" width="149" height="150"><path fill-rule="evenodd" clip-rule="evenodd" fill="#0F0F0F" d="M141.385 114.008L141.622 108.411V29.4704L141.385 23.8743C139.964 7.44314 126.224 -5.41602 109.523 -5.41602H25.3094C8.60869 -5.41602 -5.13083 7.44314 -6.55216 23.8743L-6.78906 29.4704V108.411L-6.55216 114.008C-5.13083 130.439 8.60869 143.298 25.3094 143.298H109.523C126.224 143.298 139.964 130.439 141.385 114.008ZM25.3094 102.339C9.55625 102.339 65.7059 83.8874 53.6176 66.6191C42.3654 50.5452 93.7703 32.6852 109.523 32.6852C125.277 32.6852 73.161 54.1172 81.4521 80.9071C86.1899 96.2156 40.944 102.339 25.3094 102.339Z"/></mask></defs><g mask="url(#osvi-m)"><ellipse cx="66.88" cy="66.79" rx="67.22" ry="66.81" fill="url(#osvi-g)"/></g></svg>`;
+function _t(i) {
+  return a`<div class="composer"><textarea rows="1" aria-label="Message" placeholder=${i.placeholder} .value=${ct(i.draft)} ?disabled=${i.disabled} @input=${(t) => {
+    const e = t.target;
+    e.style.height = "auto", e.style.height = `${Math.min(e.scrollHeight, 120)}px`, i.input(t);
+  }} @keydown=${(t) => {
+    t.key === "Enter" && !t.shiftKey && !t.isComposing && !i.disabled && (t.preventDefault(), i.send());
+  }}></textarea><button type="button" class="send" title=${i.strings.send} aria-label=${i.strings.send} ?disabled=${i.disabled || !i.draft.trim()} @click=${i.send}>${wt}<span class="sr">${i.strings.send}</span></button></div>`;
+}
+var Ct = Object.defineProperty, p = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && Ct(t, e, s), s;
+};
+const G = () => ({ status: "idle", mode: "ai", awaitingReply: !1, items: [], activeInteraction: null, interactionPending: !1, agent: null, error: null }), it = { fromAttribute: (i) => i !== "false" };
+var g;
+const d = (g = class extends W {
+  constructor() {
+    super(...arguments), this.agentId = "", this.baseUrl = "", this.client = null, this.theme = {}, this.variants = {}, this.strings = {}, this.poweredBy = !0, this.newChat = !0, this.header = {}, this.closable = !1, this.chatState = G(), this.draft = "", this.busy = !1, this.typed = null, this.ownClient = null, this.boundClient = null, this.ownKey = "", this.generation = 0, this.followBottom = !0, this.focusedInteraction = null, this.send = () => {
+      if (this.blocked || !this.draft.trim() || !this.boundClient) return;
+      const t = this.boundClient, e = this.draft.trim(), r = this.typed;
+      this.draft = "", r && this.restoreDraft(), this.requestUpdate();
+      const s = this.renderRoot.querySelector("textarea");
+      s && (s.style.height = ""), this.run(() => r ? t.respond(r.id, { kind: "text", value: e }) : t.send(e));
+    }, this.respond = (t) => {
+      const e = t.detail, r = this.chatState;
+      if (!e || this.busy || r.mode !== "ai" || r.interactionPending || r.activeInteraction?.interaction_status !== "pending" || e.interactionId !== r.activeInteraction.interaction_id) return;
+      t.stopPropagation();
+      const s = this.boundClient;
+      s && this.run(() => s.respond(e.interactionId, e.response));
+    }, this.requestInput = (t) => {
+      const e = t.detail, r = this.chatState;
+      !e || this.busy || r.mode !== "ai" || r.interactionPending || r.activeInteraction?.interaction_status !== "pending" || e.interactionId !== r.activeInteraction.interaction_id || (t.stopPropagation(), this.typed = { id: e.interactionId, placeholder: typeof e.placeholder == "string" ? e.placeholder : void 0, previousDraft: this.typed?.previousDraft ?? this.draft }, this.draft = "", this.requestUpdate(), this.updateComplete.then(() => this.renderRoot.querySelector("textarea")?.focus()));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.syncClient();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.releaseClient();
+  }
+  releaseClient() {
+    ++this.generation, this.unsubscribe?.(), this.unsubscribe = void 0, this.boundClient = null;
+    const t = this.ownClient;
+    this.ownClient = null, this.ownKey = "", t?.destroy(), this.busy = !1, this.typed = null, this.focusedInteraction = null, this.requestUpdate();
+  }
+  syncClient() {
+    if (!this.isConnected || !this.client && !this.agentId && !this.boundClient) return;
+    const t = JSON.stringify([this.agentId, V(this.baseUrl)]);
+    if ((this.client ? this.boundClient === this.client && !this.ownClient : this.ownClient && t === this.ownKey) || (this.releaseClient(), this.chatState = G(), !this.client && !this.agentId)) return;
+    const e = !this.client, r = this.client ?? g.clientFactory({ agentId: this.agentId, baseUrl: V(this.baseUrl) });
+    this.boundClient = r, e && (this.ownClient = r, this.ownKey = t);
+    const s = this.generation;
+    this.chatState = r.getState(), this.requestUpdate(), this.unsubscribe = r.subscribe((n) => {
+      this.generation !== s || this.boundClient !== r || (this.chatState = n, this.requestUpdate(), this.typed && (n.mode === "human" || n.activeInteraction?.interaction_id !== this.typed.id || n.activeInteraction.interaction_status !== "pending") && this.restoreDraft());
+    }), e && this.run(() => r.start());
+  }
+  willUpdate() {
+    this.syncClient(), Q(this, this.mergedTheme());
+  }
+  mergedTheme() {
+    const t = J("theme", this.themeAttribute), e = {}, r = t?.colors;
+    if (r && typeof r == "object" && !Array.isArray(r))
+      for (const o of ["primary", "background", "surface", "text", "userBubble", "assistantBubble"]) {
+        const h = r[o];
+        typeof h == "string" && (e[o] = h);
+      }
+    typeof this.primaryColor == "string" && (e.primary = this.primaryColor);
+    const s = K(this.radius) ?? (typeof t?.radius == "number" && Number.isInteger(t.radius) && t.radius >= 0 && t.radius <= 99 ? t.radius : typeof t?.radius == "string" ? K(t.radius) : void 0), n = x(this.mode, ["light", "dark"]) ?? x(typeof t?.mode == "string" ? t.mode : void 0, ["light", "dark"]);
+    return { ...this.theme, colors: { ...this.theme?.colors, ...e }, ...s === void 0 ? {} : { radius: s }, ...n === void 0 ? {} : { mode: n } };
+  }
+  get labels() {
+    const t = { ...H };
+    for (const e of [this.strings, J("strings", this.stringsAttribute)])
+      for (const r of Object.keys(H)) typeof e?.[r] == "string" && (t[r] = e[r]);
+    return t;
+  }
+  get blocked() {
+    const t = this.chatState;
+    return !this.boundClient || this.busy || t.status === "connecting" || t.status === "closed" && !!t.error && !t.error.retryable || t.mode === "ai" && (t.interactionPending || t.activeInteraction?.interaction_status === "pending" && !this.typed);
+  }
+  get sessionBusy() {
+    return this.busy || this.chatState.status === "connecting" || this.chatState.interactionPending || this.chatState.items.some((t) => t.kind === "message" && t.status === "sending");
+  }
+  async run(t) {
+    if (this.busy || !this.boundClient) return;
+    const e = this.generation;
+    this.busy = !0, this.requestUpdate();
+    try {
+      await t();
+    } catch {
+    } finally {
+      this.generation === e && (this.busy = !1, this.requestUpdate());
+    }
+  }
+  restoreDraft() {
+    this.typed && (this.draft = this.typed.previousDraft, this.typed = null, this.requestUpdate());
+  }
+  async focusActiveInteraction() {
+    if (await this.updateComplete, !this.isConnected || this.chatState.activeInteraction?.interaction_status !== "pending") return;
+    const t = this.renderRoot.querySelector('[data-live="true"]');
+    if (!t) return;
+    const e = this.chatState.activeInteraction.interaction_id;
+    await t.updateComplete, !(!this.isConnected || this.chatState.activeInteraction?.interaction_id !== e) && t.shadowRoot?.querySelector('button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex="0"]')?.focus();
+  }
+  updated() {
+    const t = this.renderRoot.querySelector(".transcript");
+    t && this.followBottom && (t.scrollTop = t.scrollHeight);
+    const e = this.chatState.activeInteraction?.interaction_status === "pending" ? this.chatState.activeInteraction.interaction_id : null;
+    e !== this.focusedInteraction && (this.focusedInteraction = e, e && this.isConnected && !this.hidden && document.visibilityState !== "hidden" && this.focusActiveInteraction());
+  }
+  statusText(t) {
+    const e = this.chatState;
+    return e.error?.code === "origin_not_allowed" ? t.originBlocked : e.error && ["agent_inactive", "agent_archived", "agent_not_found"].includes(e.error.code) ? t.unavailable : e.error?.code === "rate_limited" ? t.rateLimited : e.error?.code === "token_failed" ? e.error.message : e.status === "recovering" ? t.reconnecting : e.status === "offline" ? t.offline : e.interactionPending || this.busy && this.typed ? t.sending : e.activeInteraction?.interaction_status === "pending" ? e.mode === "human" ? t.pausedForHuman : this.typed ? t.typeAnswer : t.chooseOption : e.status === "closed" ? t.sessionEnded : "";
+  }
+  render() {
+    const t = this.labels, e = this.chatState, r = this.boundClient, s = ft(this.headerAvatar ?? this.header.avatarUrl), n = { ...this.variants, ...x(this.buttons, ["chips", "list"]) ? { buttons: x(this.buttons, ["chips", "list"]) } : {}, ...x(this.carousel, ["slider", "list"]) ? { carousel: x(this.carousel, ["slider", "list"]) } : {} }, o = this.headerTitle ?? this.header.title ?? e.agent?.name ?? t.defaultTitle;
+    return a`<header>${s ? a`<img class="avatar" src=${s} alt="" referrerpolicy="no-referrer">` : a`<span class="avatar" aria-hidden="true">${o.trim().charAt(0).toUpperCase()}</span>`}<div class="heading"><h2>${o}</h2>${this.headerSubtitle ?? this.header.subtitle ? a`<p>${this.headerSubtitle ?? this.header.subtitle}</p>` : c}${e.mode === "human" ? a`<small>${t.humanJoined}</small>` : c}</div>
+      ${this.newChat ? a`<button type="button" class="icon" title=${t.newChat} ?disabled=${!r || this.sessionBusy} @click=${() => r && !this.sessionBusy && void this.run(() => r.newSession({ keepHistory: this.newChatHistory === "keep" }))}>${xt}<span class="sr">${t.newChat}</span></button>` : c}
+      ${this.closable ? a`<button type="button" class="icon" title=${t.closeChat} aria-label=${t.closeChat} @click=${() => this.dispatchEvent(new CustomEvent("osvi-close", { bubbles: !0, composed: !0 }))}>${$t}</button>` : c}</header>
+      <div class="transcript" role="log" aria-live="polite" aria-label="Conversation" @scroll=${(h) => {
+      const f = h.currentTarget;
+      this.followBottom = f.scrollHeight - f.scrollTop - f.clientHeight <= 80;
+    }} @osvi-respond=${this.respond} @osvi-request-input=${this.requestInput}>${yt(e, t, n, r?.resolveUrl("") ?? "", (h) => {
+      r && this.run(() => r.retry(h));
+    })}</div>
+      <div class="status" role="status">${this.statusText(t)}${e.error?.retryable && (e.status === "idle" || e.status === "closed") ? a`<button type="button" ?disabled=${this.busy || !r} @click=${() => r && void this.run(() => r.start())}>${t.tryAgain}</button>` : c}</div>
+      ${_t({ strings: t, draft: this.draft, placeholder: this.typed?.placeholder ?? t.placeholder, disabled: this.blocked, input: (h) => {
+      this.draft = h.target.value, this.requestUpdate();
+    }, send: this.send })}
+      ${this.poweredBy ? a`<footer><a href="https://osvi.ai" target="_blank" rel="noopener noreferrer">${kt}<span>${t.poweredBy}</span></a></footer>` : c}`;
+  }
+}, g.clientFactory = at, g.properties = { themeAttribute: { attribute: "theme" }, stringsAttribute: { attribute: "strings" } }, g.styles = X`
+    :host { --p:var(--osvi-color-primary,#4f46e5); --bg:var(--osvi-color-background,#fff); --surface:var(--osvi-color-surface,#f4f4f5); --text:var(--osvi-color-text,#18181b);
+      --ub:var(--osvi-color-user-bubble,var(--p)); --ab:var(--osvi-color-assistant-bubble,var(--surface)); --r:var(--osvi-radius,14px);
+      --sub:color-mix(in srgb,var(--text) 58%,var(--bg)); --line:color-mix(in srgb,var(--text) 11%,var(--bg));
+      display:flex; flex-direction:column; height:100%; min-height:260px; color:var(--text); background:var(--bg); font-family:inherit; font-size:14px; line-height:1.5; border-radius:var(--r); overflow:hidden; }
+    * { box-sizing:border-box; } h2,p { margin:0; }
+    button,textarea { font:inherit; color:inherit; } button { cursor:pointer; } button:disabled { cursor:default; opacity:.45; }
+    button:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid color-mix(in srgb,var(--p) 55%,transparent); outline-offset:2px; }
+    .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
+    header { display:flex; align-items:center; gap:12px; padding:14px 12px 14px 16px; border-bottom:1px solid var(--line); }
+    .avatar { width:38px; height:38px; border-radius:50%; flex:none; object-fit:cover; display:grid; place-items:center; background:var(--p); color:#fff; font-weight:700; font-size:15px; }
+    .heading { flex:1; min-width:0; } h2 { font-size:15px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .heading p,.heading small { display:block; font-size:12.5px; color:var(--sub); }
+    .heading small { color:var(--p); font-weight:600; }
+    .icon { width:34px; height:34px; border:0; border-radius:10px; background:transparent; color:var(--sub); display:grid; place-items:center; flex:none; }
+    .icon:hover:not(:disabled) { background:var(--surface); color:var(--text); } .icon svg { width:18px; height:18px; }
+    .transcript { flex:1; overflow:auto; padding:18px 16px; min-height:0; display:flex; flex-direction:column; gap:10px; }
+    .empty { margin:auto; color:var(--sub); text-align:center; }
+    .bubble { width:fit-content; max-width:84%; padding:10px 14px; border-radius:var(--r); border-bottom-left-radius:6px; background:var(--ab); overflow-wrap:anywhere; white-space:pre-wrap; }
+    .bubble.user { align-self:flex-end; color:#fff; background:var(--ub); border-bottom-left-radius:var(--r); border-bottom-right-radius:6px; }
+    .bubble a { color:inherit; } .team { display:block; font-size:11px; font-weight:600; color:var(--p); margin-bottom:2px; }
+    .failed { display:flex; align-items:center; gap:8px; font-size:12px; margin-top:6px; } .failed button { border:0; background:rgb(255 255 255/.2); border-radius:8px; padding:2px 8px; }
+    .divider { display:flex; align-items:center; gap:10px; color:var(--sub); font-size:12px; } .divider::before,.divider::after { content:""; flex:1; height:1px; background:var(--line); }
+    .typing { display:inline-flex; gap:4px; padding:12px 14px; background:var(--ab); border-radius:var(--r); border-bottom-left-radius:6px; width:fit-content; }
+    .typing i { width:6px; height:6px; border-radius:50%; background:var(--sub); animation:osvi-dot 1.2s infinite; } .typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
+    @keyframes osvi-dot { 0%,60%,100% { opacity:.35; transform:none; } 30% { opacity:1; transform:translateY(-3px); } }
+    osvi-buttons,osvi-carousel,osvi-date-picker { display:block; max-width:100%; }
+    .status { padding:0 16px; font-size:12.5px; color:var(--sub); display:flex; gap:8px; align-items:center; } .status:empty { display:none; }
+    .status button { border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:3px 10px; }
+    .composer { margin:10px 12px; display:flex; align-items:flex-end; gap:8px; border:1px solid var(--line); border-radius:18px; padding:6px 6px 6px 14px; background:var(--surface); }
+    .composer:focus-within { border-color:var(--p); box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 18%,transparent); }
+    textarea { flex:1; min-width:0; border:0; outline:0; background:transparent; resize:none; min-height:24px; max-height:120px; padding:6px 0; field-sizing:content; }
+    textarea::placeholder { color:var(--sub); } textarea:focus-visible { outline:0; }
+    .send { width:36px; height:36px; border:0; border-radius:50%; background:var(--p); color:#fff; display:grid; place-items:center; flex:none; } .send svg { width:17px; height:17px; }
+    footer { padding:0 16px 12px; text-align:center; font-size:11.5px; } footer a { color:var(--sub); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
+    footer a:hover { color:var(--text); } footer svg { width:14px; height:14px; flex:none; }
+    @media (prefers-reduced-motion:reduce) { .typing i { animation:none; } }
+  `, g);
+p([
+  l({ attribute: "agent-id" })
+], d.prototype, "agentId");
+p([
+  l({ attribute: "base-url" })
+], d.prototype, "baseUrl");
+p([
+  l({ attribute: !1 })
+], d.prototype, "client");
+p([
+  l({ attribute: !1 })
+], d.prototype, "theme");
+p([
+  l({ attribute: !1 })
+], d.prototype, "variants");
+p([
+  l({ attribute: !1 })
+], d.prototype, "strings");
+p([
+  l({ attribute: "powered-by", converter: it })
+], d.prototype, "poweredBy");
+p([
+  l({ attribute: "new-chat", converter: it })
+], d.prototype, "newChat");
+p([
+  l({ attribute: "new-chat-history" })
+], d.prototype, "newChatHistory");
+p([
+  l({ attribute: !1 })
+], d.prototype, "header");
+p([
+  l({ type: Boolean })
+], d.prototype, "closable");
+p([
+  l({ attribute: "header-title" })
+], d.prototype, "headerTitle");
+p([
+  l({ attribute: "header-subtitle" })
+], d.prototype, "headerSubtitle");
+p([
+  l({ attribute: "header-avatar" })
+], d.prototype, "headerAvatar");
+p([
+  l({ attribute: "primary-color" })
+], d.prototype, "primaryColor");
+p([
+  l()
+], d.prototype, "radius");
+p([
+  l()
+], d.prototype, "mode");
+p([
+  l()
+], d.prototype, "buttons");
+p([
+  l()
+], d.prototype, "carousel");
+p([
+  v()
+], d.prototype, "chatState");
+p([
+  v()
+], d.prototype, "draft");
+p([
+  v()
+], d.prototype, "busy");
+p([
+  v()
+], d.prototype, "typed");
+let St = d;
+function U(i, t) {
+  typeof customElements > "u" || customElements.get(i) || customElements.define(i, t);
+}
+const I = (i) => nt(ut(i)), D = X`
+  :host { --p:${I("primary")}; --bg:${I("background")}; --surface:${I("surface")}; --text:${I("text")}; --r:var(--osvi-radius,14px);
+    --sub:color-mix(in srgb,var(--text) 58%,var(--bg)); --line:color-mix(in srgb,var(--text) 11%,var(--bg));
+    display:block; font:inherit; color:var(--text); }
+  * { box-sizing:border-box; }
+  p { margin:0 0 6px; } .label { font-weight:600; } .description { color:var(--sub); font-size:13px; }
+  .answer { display:inline-block; margin-top:2px; padding:4px 10px; border-radius:999px; background:color-mix(in srgb,var(--p) 12%,var(--bg)); color:var(--p); font-weight:600; font-size:13px; }
+  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
+  button { font:inherit; color:inherit; cursor:pointer; }
+  button:focus-visible { outline:3px solid color-mix(in srgb,var(--p) 55%,transparent); outline-offset:2px; }
+  button:disabled { opacity:.45; cursor:default; }
+  small { display:block; color:var(--sub); font-size:12px; font-weight:400; }
+  .chips { display:flex; flex-wrap:wrap; gap:8px; }
+  .chips button { border:1.5px solid color-mix(in srgb,var(--p) 55%,var(--line)); background:var(--bg); color:var(--p); border-radius:999px; padding:7px 14px; font-weight:600; font-size:13px; text-align:center; }
+  .chips button:hover:not(:disabled) { background:color-mix(in srgb,var(--p) 10%,var(--bg)); }
+  .text { display:grid; gap:1px; min-width:0; }
+  .chips small { color:inherit; opacity:.8; }
+  .list { display:grid; gap:6px; }
+  .list > button { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:10px 12px; }
+  .list > button:hover:not(:disabled) { border-color:var(--p); }
+  .list > button svg { width:16px; height:16px; flex:none; color:var(--sub); }
+  .card { background:var(--bg); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:0 6px 18px -10px rgb(16 18 30/.35); }
+  .card .body { padding:10px 12px 12px; display:grid; gap:4px; } .card h3 { margin:0; font-size:14px; } .card p { margin:0; color:var(--sub); font-size:12.5px; }
+  .image { aspect-ratio:16 / 9; max-width:100%; display:grid; place-items:center; overflow:hidden; background:var(--surface); color:var(--sub); font-size:12px; }
+  .image img { width:100%; height:100%; object-fit:cover; display:block; }
+  .primary { justify-self:start; margin-top:6px; border:0; border-radius:10px; background:var(--p); color:#fff; font-weight:600; font-size:13px; padding:8px 14px; }
+  .list .card { display:grid; grid-template-columns:minmax(0,88px) 1fr; } .list .card .image { aspect-ratio:auto; height:100%; min-height:88px; }
+  .list .card:not(:has(.image)) { grid-template-columns:1fr; }
+  .navigation { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 0; }
+  .round { width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--bg); display:grid; place-items:center; padding:0; flex:none; }
+  .round:hover:not(:disabled) { border-color:var(--p); } .round svg { width:15px; height:15px; }
+  .dots { display:flex; gap:5px; align-items:center; } .dots i { width:6px; height:6px; border-radius:3px; background:var(--line); transition:width .2s; } .dots i.on { width:16px; background:var(--p); }
+  .calendar { border:1px solid var(--line); border-radius:var(--r); padding:10px; background:var(--bg); display:grid; gap:6px; }
+  .calendar .navigation { margin:0; font-weight:600; font-size:13px; }
+  .days, .weekdays { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:2px 0; text-align:center; }
+  .weekdays { color:var(--sub); font-size:11px; }
+  .days button { border:0; background:transparent; height:30px; border-radius:8px; padding:0; font-size:12.5px; font-variant-numeric:tabular-nums; }
+  .days button:hover:not(:disabled) { background:var(--surface); }
+  .days button.today { box-shadow:inset 0 0 0 1.5px var(--line); }
+  .days button.in { background:color-mix(in srgb,var(--p) 14%,transparent); border-radius:0; }
+  .days button[aria-pressed="true"] { background:var(--p); color:#fff; }
+  .days button.start:not(.end) { border-radius:8px 0 0 8px; } .days button.end:not(.start) { border-radius:0 8px 8px 0; }
+  .hint { color:var(--sub); font-size:12px; margin:0; }
+  @media (prefers-reduced-motion:reduce) { .dots i { transition:none; } }
+`;
+var It = Object.defineProperty, P = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && It(t, e, s), s;
+};
+class w extends W {
+  constructor() {
+    super(...arguments), this.interaction = null, this.disabled = !1, this.baseUrl = "";
+  }
+  get live() {
+    return !this.disabled && this.interaction?.interaction_status === "pending";
+  }
+  get valid() {
+    const t = this.interaction;
+    return !!t && t.tool_type === this.toolType && ot(t, t.presentation);
+  }
+  respond(t) {
+    !this.interaction || !this.live || !this.valid || this.dispatchEvent(new CustomEvent("osvi-respond", { bubbles: !0, composed: !0, detail: { interactionId: this.interaction.interaction_id, response: t } }));
+  }
+  updated(t) {
+    t.has("theme") && Q(this, this.theme);
+  }
+}
+P([
+  l({ attribute: !1 })
+], w.prototype, "interaction");
+P([
+  l({ type: Boolean })
+], w.prototype, "disabled");
+P([
+  l({ attribute: !1 })
+], w.prototype, "theme");
+P([
+  l({ attribute: "base-url" })
+], w.prototype, "baseUrl");
+var At = Object.defineProperty, Mt = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && At(t, e, s), s;
+};
+const j = class j extends w {
+  constructor() {
+    super(...arguments), this.toolType = "ui_buttons", this.variant = "chips";
+  }
+  render() {
+    const t = this.interaction;
+    if (!t) return c;
+    if (!this.valid) return a`<p>${t.content}</p>`;
+    const e = t.presentation, r = t.response_payload?.kind === "text" ? t.response_payload.value : e.options.find((s) => s.id === (t.response_payload?.kind === "selection" ? t.response_payload.value : t.selected_option_id))?.label;
+    return a`<p class="label">${e.label}</p>${e.description ? a`<p class="description">${e.description}</p>` : c}
+      ${this.live ? a`<div role="group" aria-label="Options" class=${this.variant} @keydown=${this.onKey}>
+        ${e.options.map((s) => a`<button type="button" @click=${() => this.pick(s.id, s.allow_input, s.input_placeholder)}><span class="text"><span>${s.label}</span>${s.description ? a`<small>${s.description}</small>` : c}</span>${this.variant === "list" ? R : c}</button>`)}
+      </div>` : r ? a`<p class="answer">${r}</p>` : c}`;
+  }
+  pick(t, e, r) {
+    !this.live || !this.valid || !this.interaction || (this.interaction.schema_version === 2 && e ? this.dispatchEvent(new CustomEvent("osvi-request-input", { bubbles: !0, composed: !0, detail: { interactionId: this.interaction.interaction_id, placeholder: r } })) : this.respond({ kind: "selection", value: t }));
+  }
+  onKey(t) {
+    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(t.key)) return;
+    const e = [...this.renderRoot.querySelectorAll("button")], r = e.indexOf(this.renderRoot.activeElement), s = t.key === "ArrowDown" || t.key === "ArrowRight" ? 1 : -1;
+    e[(r + s + e.length) % e.length]?.focus(), t.preventDefault();
+  }
+};
+j.styles = D;
+let M = j;
+Mt([
+  l()
+], M.prototype, "variant");
+var Ut = Object.defineProperty, q = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && Ut(t, e, s), s;
+};
+const F = class F extends w {
+  constructor() {
+    super(...arguments), this.toolType = "ui_carousel", this.variant = "slider", this.index = 0, this.imageFailed = /* @__PURE__ */ new Set(), this.suppressPointerClick = !1;
+  }
+  willUpdate(t) {
+    t.has("interaction") && (this.index = 0, this.imageFailed = /* @__PURE__ */ new Set(), this.pointerStart = void 0, this.suppressPointerClick = !1);
+  }
+  render() {
+    const t = this.interaction;
+    if (!t) return c;
+    if (!this.valid) return a`<p>${t.content}</p>`;
+    const e = t.presentation, r = e.items.find((s) => s.id === (t.response_payload?.kind === "selection" ? t.response_payload.value : t.selected_option_id));
+    return a`<p class="label">${e.label}</p>${e.description ? a`<p class="description">${e.description}</p>` : c}
+      ${this.live ? this.variant === "list" ? a`<div class="list">${e.items.map((s, n) => this.card(s, n))}</div>` : a`<div @pointerdown=${(s) => {
+      this.pointerStart = s.clientX, this.suppressPointerClick = !1;
+    }} @pointerup=${(s) => {
+      this.pointerStart !== void 0 && Math.abs(s.clientX - this.pointerStart) > 40 && (this.suppressPointerClick = !0, this.navigate(s.clientX < this.pointerStart ? 1 : -1, e.items.length)), this.pointerStart = void 0;
+    }} @pointercancel=${() => {
+      this.pointerStart = void 0;
+    }}>${this.card(e.items[this.index], this.index)}</div>
+        <div class="navigation"><button type="button" class="round" aria-label="Previous card" ?disabled=${this.index === 0} @click=${() => this.navigate(-1, e.items.length)}>${et}</button>
+          <span class="dots" aria-hidden="true">${e.items.map((s, n) => a`<i class=${n === this.index ? "on" : ""}></i>`)}</span><span class="sr" aria-live="polite">${this.index + 1} of ${e.items.length}</span>
+          <button type="button" class="round" aria-label="Next card" ?disabled=${this.index === e.items.length - 1} @click=${() => this.navigate(1, e.items.length)}>${R}</button></div>` : r ? a`<p class="answer">${r.title}</p>` : c}`;
+  }
+  navigate(t, e) {
+    this.index = Math.max(0, Math.min(e - 1, this.index + t));
+  }
+  select(t, e) {
+    if (this.suppressPointerClick && t.detail !== 0) {
+      this.suppressPointerClick = !1, t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    this.respond({ kind: "selection", value: e });
+  }
+  card(t, e) {
+    const r = t.image;
+    return a`<article class="card">${r && lt(r.url) ? a`<div class="image">${this.imageFailed.has(e) ? a`<span role="img" aria-label="Image unavailable">Image unavailable</span>` : a`<img src=${this.baseUrl.replace(/\/$/, "") + r.url} alt=${r.alt} referrerpolicy="no-referrer" loading="lazy" @error=${() => {
+      this.imageFailed = /* @__PURE__ */ new Set([...this.imageFailed, e]);
+    }}>`}</div>` : c}
+      <div class="body"><h3>${t.title}</h3>${t.description ? a`<p>${t.description}</p>` : c}
+      <button type="button" class="primary" @click=${(s) => this.select(s, t.id)}>${t.action_label ?? "Select"}</button></div></article>`;
+  }
+};
+F.styles = D;
+let _ = F;
+q([
+  l()
+], _.prototype, "variant");
+q([
+  v()
+], _.prototype, "index");
+q([
+  v()
+], _.prototype, "imageFailed");
+var Pt = Object.defineProperty, T = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && Pt(t, e, s), s;
+};
+const st = (i) => `${String(i.getFullYear()).padStart(4, "0")}-${String(i.getMonth() + 1).padStart(2, "0")}-${String(i.getDate()).padStart(2, "0")}`, A = () => st(/* @__PURE__ */ new Date()), Y = (i) => {
+  const t = /* @__PURE__ */ new Date(0);
+  return t.setHours(0, 0, 0, 0), t.setFullYear(Number(i.slice(0, 4)), Number(i.slice(5, 7)) - 1, Number(i.slice(8, 10))), t;
+}, y = (i) => i.slice(0, 7), L = class L extends w {
+  constructor() {
+    super(...arguments), this.toolType = "ui_date_picker", this.variant = "grid", this.month = y(A()), this.start = "", this.end = "";
+  }
+  earliest(t) {
+    return t.min_date && t.min_date > A() ? t.min_date : A();
+  }
+  willUpdate(t) {
+    t.has("interaction") && (this.start = "", this.end = "", this.valid && (this.month = y(this.earliest(this.interaction.presentation))));
+  }
+  render() {
+    const t = this.interaction;
+    if (!t) return c;
+    if (!this.valid) return a`<p>${t.content}</p>`;
+    const e = t.presentation, r = t.response_payload, s = r?.kind === "date_range" ? `${r.value.start_date} – ${r.value.end_date}` : r?.kind === "date" || r?.kind === "text" ? r.value : t.selected_option_id;
+    if (!this.live) return a`<p class="label">${e.label}</p>${e.description ? a`<p class="description">${e.description}</p>` : c}${s ? a`<p class="answer">${s}</p>` : c}`;
+    const n = Y(`${this.month}-01`), o = new Date(n);
+    o.setMonth(o.getMonth() + 1, 0);
+    const h = this.earliest(e), f = Array.from({ length: o.getDate() }, (u, z) => `${this.month}-${String(z + 1).padStart(2, "0")}`), k = e.selection_mode === "range" ? this.start ? this.end ? `${this.start} – ${this.end}` : `Check-in: ${this.start}. Choose check-out.` : "Choose check-in, then check-out." : this.start, rt = A();
+    return a`<p class="label">${e.label}</p>${e.description ? a`<p class="description">${e.description}</p>` : c}
+      <div class="calendar"><div class="navigation"><button type="button" class="round" aria-label="Previous month" ?disabled=${this.month <= y(h)} @click=${() => this.moveMonth(-1, e)}>${et}</button>
+        <span aria-live="polite">${n.toLocaleDateString(void 0, { month: "long", year: "numeric" })}</span>
+        <button type="button" class="round" aria-label="Next month" ?disabled=${!!e.max_date && this.month >= y(e.max_date)} @click=${() => this.moveMonth(1, e)}>${R}</button></div>
+      <div class="weekdays" aria-hidden="true">${["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((u) => a`<span>${u}</span>`)}</div>
+      <div class="days" role="group" aria-label="Choose date" @keydown=${this.onKey}>
+        ${Array.from({ length: n.getDay() }, () => a`<span></span>`)}
+        ${f.map((u, z) => a`<button type="button" class=${[u === rt ? "today" : "", u === this.start ? "start" : "", u === this.end ? "end" : "", this.start && this.end && u > this.start && u < this.end ? "in" : ""].filter(Boolean).join(" ")} aria-label=${u} aria-pressed=${u === this.start || u === this.end} ?disabled=${u < h || !!e.max_date && u > e.max_date} @click=${() => this.pick(u, e)}>${z + 1}</button>`)}
+      </div><p class="hint" aria-live="polite">${k}</p>
+      <button type="button" class="primary" ?disabled=${!this.start || e.selection_mode === "range" && (!this.end || this.start >= this.end)} @click=${() => this.confirm(e)}>${e.confirm_label ?? "Confirm date"}</button></div>`;
+  }
+  moveMonth(t, e) {
+    const r = Y(`${this.month}-01`);
+    r.setMonth(r.getMonth() + t);
+    const s = y(st(r));
+    s >= y(this.earliest(e)) && (!e.max_date || s <= y(e.max_date)) && (this.month = s);
+  }
+  pick(t, e) {
+    !this.live || !this.valid || !B(t) || t < this.earliest(e) || e.max_date && t > e.max_date || (e.selection_mode === "single" || !this.start || this.end || t <= this.start ? (this.start = t, this.end = "") : this.end = t);
+  }
+  confirm(t) {
+    !B(this.start) || this.start < this.earliest(t) || t.max_date && this.start > t.max_date || (t.selection_mode === "single" ? this.respond({ kind: "date", value: this.start }) : B(this.end) && this.start < this.end && (!t.max_date || this.end <= t.max_date) && this.respond({ kind: "date_range", value: { start_date: this.start, end_date: this.end } }));
+  }
+  onKey(t) {
+    const r = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[t.key];
+    if (r === void 0) return;
+    const s = [...this.renderRoot.querySelectorAll(".days button")], n = s.indexOf(this.renderRoot.activeElement);
+    if (n < 0) return;
+    let o = n + r;
+    for (; o >= 0 && o < s.length && s[o]?.disabled; ) o += r > 0 ? 1 : -1;
+    s[o]?.focus(), t.preventDefault();
+  }
+};
+L.styles = D;
+let $ = L;
+T([
+  l()
+], $.prototype, "variant");
+T([
+  v()
+], $.prototype, "month");
+T([
+  v()
+], $.prototype, "start");
+T([
+  v()
+], $.prototype, "end");
+U("osvi-chat", St);
+U("osvi-buttons", M);
+U("osvi-carousel", _);
+U("osvi-date-picker", $);
+export {
+  H as DEFAULT_STRINGS,
+  M as OsviButtons,
+  _ as OsviCarousel,
+  St as OsviChat,
+  $ as OsviDatePicker,
+  Q as applyTheme,
+  ut as cssVar,
+  U as defineOnce,
+  bt as explicitThemeVariables,
+  E as themeVariables
+};
+//# sourceMappingURL=ui.mjs.map