@osvi-ai/chat 0.0.0-stage → 0.1.0

package/dist/ui.mjs

@@ -0,0 +1,570 @@
+import { nothing as d, html as a, LitElement as W, css as X, unsafeCSS as x } from "lit";
+import { property as l, state as b } from "lit/decorators.js";
+import { c as et, i as it, a as st, b as R } from "./index-BsRyQwUM.js";
+import { repeat as nt } from "lit/directives/repeat.js";
+import { live as rt } from "lit/directives/live.js";
+const Y = { primary: "#4f46e5", background: "#ffffff", surface: "#f4f4f5", text: "#18181b", userBubble: "#4f46e5", assistantBubble: "#f4f4f5" }, at = { primary: "#6366f1", background: "#0a0a12", surface: "#1c1c27", text: "#f4f4f5", userBubble: "#6366f1", assistantBubble: "#1f1f2b" }, ot = { 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" }, w = (i) => `var(${C[i]}, ${Y[i]})`;
+function F(i) {
+  const t = { ...i?.mode === "dark" ? at : Y, ...i?.colors }, e = {};
+  for (const n of Object.keys(C)) e[C[n]] = t[n];
+  const s = i?.radius ?? "md";
+  return e["--osvi-radius"] = typeof s == "number" ? `${s}px` : ot[s], e;
+}
+function lt(i) {
+  if (!i) return {};
+  if (i.mode) return F(i);
+  const t = F(i), e = {};
+  for (const s of Object.keys(i.colors ?? {})) e[C[s]] = t[C[s]];
+  return i.radius !== void 0 && (e["--osvi-radius"] = t["--osvi-radius"]), e;
+}
+const M = /* @__PURE__ */ new WeakMap();
+function G(i, t) {
+  for (const s of M.get(i) ?? []) i.style.removeProperty(s);
+  const e = lt(t);
+  for (const [s, n] of Object.entries(e)) i.style.setProperty(s, n);
+  M.set(i, Object.keys(e));
+}
+const N = {
+  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",
+  newChat: "New chat",
+  emptyState: "Send a message to start chatting.",
+  defaultTitle: "Chat"
+}, L = /* @__PURE__ */ new Set();
+function Q(i, t) {
+  L.has(i) || (L.add(i), console.warn(`[osvi-chat] ${t}`));
+}
+function y(i, t) {
+  return i != null && t.includes(i) ? i : void 0;
+}
+function K(i) {
+  if (i != null)
+    return y(i, ["none", "sm", "md", "lg", "full"]) ?? (/^\d{1,2}(?:px)?$/.test(i) ? Number(i.replace(/px$/, "")) : void 0);
+}
+function H(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 {
+    }
+    Q("base-url", "ignored an invalid base-url (https required, http only for localhost)");
+  }
+}
+function dt(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 {
+    }
+    Q(i, `ignored invalid JSON in the ${i} attribute`);
+  }
+}
+const ct = /https?:\/\/[^\s<>"']+/g, S = (i, t) => i.split(t).length - 1;
+function ht(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 ut(i) {
+  const t = [];
+  let e = 0;
+  for (const s of i.matchAll(ct)) {
+    const n = ht(s[0]), r = s.index;
+    try {
+      const o = new URL(n);
+      if (!["http:", "https:"].includes(o.protocol)) continue;
+    } catch {
+      continue;
+    }
+    r > e && t.push({ text: i.slice(e, r) }), t.push({ href: n, text: n }), e = r + n.length;
+  }
+  return e < i.length && t.push({ text: i.slice(e) }), t.length ? t : [{ text: i }];
+}
+function pt(i, t, e, s, n) {
+  return a`${i.items.length ? nt(i.items, (r) => r.id, (r) => {
+    if (r.kind === "divider") return a`<p class="divider">${t.sessionEnded}</p>`;
+    if (r.kind === "message") return a`<article class=${`bubble ${r.role}`}>${r.role === "human" ? a`<small>Team</small>` : d}<p>${ut(r.content).map(($) => "href" in $ ? a`<a href=${$.href} target="_blank" rel="noopener noreferrer">${$.text}</a>` : $.text)}</p>${r.role === "user" && r.status === "failed" ? a`<span>${t.sendFailed}</span><button type="button" @click=${() => n(r.id)}>${t.retry}</button>` : d}</article>`;
+    const o = r.interaction, u = o.interaction_id === i.activeInteraction?.interaction_id && o.interaction_status === "pending", _ = !u || i.interactionPending || i.mode === "human";
+    switch (o.tool_type) {
+      case "ui_buttons":
+        return a`<osvi-buttons data-live=${u ? "true" : "false"} .interaction=${o} .disabled=${_} .variant=${e.buttons ?? "chips"} base-url=${s}></osvi-buttons>`;
+      case "ui_carousel":
+        return a`<osvi-carousel data-live=${u ? "true" : "false"} .interaction=${o} .disabled=${_} .variant=${e.carousel ?? "slider"} base-url=${s}></osvi-carousel>`;
+      case "ui_date_picker":
+        return a`<osvi-date-picker data-live=${u ? "true" : "false"} .interaction=${o} .disabled=${_} base-url=${s}></osvi-date-picker>`;
+      default:
+        return a`<p>${o.content}</p>`;
+    }
+  }) : a`<p>${t.emptyState}</p>`}${i.awaitingReply ? a`<p aria-label=${t.typing}>${t.typing}<span aria-hidden="true"> •••</span></p>` : d}`;
+}
+function ft(i) {
+  return a`<div class="composer"><textarea aria-label="Message" placeholder=${i.placeholder} .value=${rt(i.draft)} ?disabled=${i.disabled} @input=${i.input} @keydown=${(t) => {
+    t.key === "Enter" && !t.shiftKey && !t.isComposing && !i.disabled && (t.preventDefault(), i.send());
+  }}></textarea><button type="button" aria-label=${i.strings.send} ?disabled=${i.disabled || !i.draft.trim()} @click=${i.send}>${i.strings.send}</button></div>`;
+}
+var bt = Object.defineProperty, h = (i, t, e, s) => {
+  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
+    (o = i[r]) && (n = o(t, e, n) || n);
+  return n && bt(t, e, n), n;
+};
+const z = () => ({ status: "idle", mode: "ai", awaitingReply: !1, items: [], activeInteraction: null, interactionPending: !1, agent: null, error: null }), Z = { fromAttribute: (i) => i !== "false" };
+var f;
+const c = (f = 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 = z(), 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(), s = this.typed;
+      this.draft = "", s && this.restoreDraft(), this.requestUpdate(), this.run(() => s ? t.respond(s.id, { kind: "text", value: e }) : t.send(e));
+    }, this.respond = (t) => {
+      const e = t.detail, s = this.chatState;
+      if (!e || this.busy || s.mode !== "ai" || s.interactionPending || s.activeInteraction?.interaction_status !== "pending" || e.interactionId !== s.activeInteraction.interaction_id) return;
+      t.stopPropagation();
+      const n = this.boundClient;
+      n && this.run(() => n.respond(e.interactionId, e.response));
+    }, this.requestInput = (t) => {
+      const e = t.detail, s = this.chatState;
+      !e || this.busy || s.mode !== "ai" || s.interactionPending || s.activeInteraction?.interaction_status !== "pending" || e.interactionId !== s.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, H(this.baseUrl)]);
+    if ((this.client ? this.boundClient === this.client && !this.ownClient : this.ownClient && t === this.ownKey) || (this.releaseClient(), this.chatState = z(), !this.client && !this.agentId)) return;
+    const e = !this.client, s = this.client ?? f.clientFactory({ agentId: this.agentId, baseUrl: H(this.baseUrl) });
+    this.boundClient = s, e && (this.ownClient = s, this.ownKey = t);
+    const n = this.generation;
+    this.chatState = s.getState(), this.requestUpdate(), this.unsubscribe = s.subscribe((r) => {
+      this.generation !== n || this.boundClient !== s || (this.chatState = r, this.requestUpdate(), this.typed && (r.mode === "human" || r.activeInteraction?.interaction_id !== this.typed.id || r.activeInteraction.interaction_status !== "pending") && this.restoreDraft());
+    }), e && this.run(() => s.start());
+  }
+  willUpdate() {
+    this.syncClient(), G(this, this.mergedTheme());
+  }
+  mergedTheme() {
+    const t = J("theme", this.themeAttribute), e = {}, s = t?.colors;
+    if (s && typeof s == "object" && !Array.isArray(s))
+      for (const o of ["primary", "background", "surface", "text", "userBubble", "assistantBubble"]) {
+        const u = s[o];
+        typeof u == "string" && (e[o] = u);
+      }
+    typeof this.primaryColor == "string" && (e.primary = this.primaryColor);
+    const n = 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), r = y(this.mode, ["light", "dark"]) ?? y(typeof t?.mode == "string" ? t.mode : void 0, ["light", "dark"]);
+    return { ...this.theme, colors: { ...this.theme?.colors, ...e }, ...n === void 0 ? {} : { radius: n }, ...r === void 0 ? {} : { mode: r } };
+  }
+  get labels() {
+    const t = { ...N };
+    for (const e of [this.strings, J("strings", this.stringsAttribute)])
+      for (const s of Object.keys(N)) typeof e?.[s] == "string" && (t[s] = e[s]);
+    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, s = this.boundClient, n = dt(this.headerAvatar ?? this.header.avatarUrl), r = { ...this.variants, ...y(this.buttons, ["chips", "list"]) ? { buttons: y(this.buttons, ["chips", "list"]) } : {}, ...y(this.carousel, ["slider", "list"]) ? { carousel: y(this.carousel, ["slider", "list"]) } : {} };
+    return a`<header>${n ? a`<img src=${n} alt="" referrerpolicy="no-referrer">` : d}<div class="heading"><h2>${this.headerTitle ?? this.header.title ?? e.agent?.name ?? t.defaultTitle}</h2>${this.headerSubtitle ?? this.header.subtitle ? a`<p>${this.headerSubtitle ?? this.header.subtitle}</p>` : d}${e.mode === "human" ? a`<small>${t.humanJoined}</small>` : d}</div>
+      ${this.newChat ? a`<button type="button" ?disabled=${!s || this.sessionBusy} @click=${() => s && !this.sessionBusy && void this.run(() => s.newSession())}>${t.newChat}</button>` : d}
+      ${this.closable ? a`<button type="button" aria-label=${t.closeChat} @click=${() => this.dispatchEvent(new CustomEvent("osvi-close", { bubbles: !0, composed: !0 }))}>×</button>` : d}</header>
+      <div class="transcript" role="log" aria-live="polite" aria-label="Conversation" @scroll=${(o) => {
+      const u = o.currentTarget;
+      this.followBottom = u.scrollHeight - u.scrollTop - u.clientHeight <= 80;
+    }} @osvi-respond=${this.respond} @osvi-request-input=${this.requestInput}>${pt(e, t, r, s?.resolveUrl("") ?? "", (o) => {
+      s && this.run(() => s.retry(o));
+    })}</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 || !s} @click=${() => s && void this.run(() => s.start())}>${t.tryAgain}</button>` : d}</div>
+      ${ft({ strings: t, draft: this.draft, placeholder: this.typed?.placeholder ?? t.placeholder, disabled: this.blocked, input: (o) => {
+      this.draft = o.target.value, this.requestUpdate();
+    }, send: this.send })}
+      ${this.poweredBy ? a`<footer><a href="https://osvi.ai" target="_blank" rel="noopener noreferrer">${t.poweredBy}</a></footer>` : d}`;
+  }
+}, f.clientFactory = et, f.properties = { themeAttribute: { attribute: "theme" }, stringsAttribute: { attribute: "strings" } }, f.styles = X`
+    :host { display:flex; flex-direction:column; height:100%; min-height:260px; color:var(--osvi-color-text,#18181b); background:var(--osvi-color-background,#fff); font:14px/1.5 system-ui,sans-serif; border-radius:var(--osvi-radius,10px); overflow:hidden; }
+    header { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--osvi-color-surface,#f4f4f5); } header img { width:36px; height:36px; border-radius:50%; } .heading { flex:1; } h2,p { margin:0; } h2 { font-size:16px; } small { display:block; }
+    .transcript { flex:1; overflow:auto; padding:16px; min-height:0; } .bubble { width:fit-content; max-width:85%; padding:10px 14px; margin:8px 0; border-radius:var(--osvi-radius,10px); background:var(--osvi-color-assistant-bubble,#f4f4f5); overflow-wrap:anywhere; white-space:pre-wrap; } .user { margin-left:auto; color:#fff; background:var(--osvi-color-user-bubble,#4f46e5); } .bubble a { color:inherit; } .divider { text-align:center; } .status { padding:0 14px; } .composer { display:flex; gap:8px; padding:14px; } textarea { flex:1; resize:vertical; min-width:0; } button,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:default; } footer { padding:0 14px 10px; text-align:center; } footer a { color:inherit; } osvi-buttons,osvi-carousel,osvi-date-picker { display:block; margin:8px 0; }
+  `, f);
+h([
+  l({ attribute: "agent-id" })
+], c.prototype, "agentId");
+h([
+  l({ attribute: "base-url" })
+], c.prototype, "baseUrl");
+h([
+  l({ attribute: !1 })
+], c.prototype, "client");
+h([
+  l({ attribute: !1 })
+], c.prototype, "theme");
+h([
+  l({ attribute: !1 })
+], c.prototype, "variants");
+h([
+  l({ attribute: !1 })
+], c.prototype, "strings");
+h([
+  l({ attribute: "powered-by", converter: Z })
+], c.prototype, "poweredBy");
+h([
+  l({ attribute: "new-chat", converter: Z })
+], c.prototype, "newChat");
+h([
+  l({ attribute: !1 })
+], c.prototype, "header");
+h([
+  l({ type: Boolean })
+], c.prototype, "closable");
+h([
+  l({ attribute: "header-title" })
+], c.prototype, "headerTitle");
+h([
+  l({ attribute: "header-subtitle" })
+], c.prototype, "headerSubtitle");
+h([
+  l({ attribute: "header-avatar" })
+], c.prototype, "headerAvatar");
+h([
+  l({ attribute: "primary-color" })
+], c.prototype, "primaryColor");
+h([
+  l()
+], c.prototype, "radius");
+h([
+  l()
+], c.prototype, "mode");
+h([
+  l()
+], c.prototype, "buttons");
+h([
+  l()
+], c.prototype, "carousel");
+h([
+  b()
+], c.prototype, "chatState");
+h([
+  b()
+], c.prototype, "draft");
+h([
+  b()
+], c.prototype, "busy");
+h([
+  b()
+], c.prototype, "typed");
+let vt = c;
+function A(i, t) {
+  typeof customElements > "u" || customElements.get(i) || customElements.define(i, t);
+}
+const B = X`
+  :host { display: block; font: inherit; color: ${x(w("text"))}; background: ${x(w("background"))}; }
+  * { box-sizing: border-box; }
+  button { font: inherit; color: inherit; background: ${x(w("surface"))}; border: 1px solid currentColor; border-radius: var(--osvi-radius, 10px); padding: 10px 14px; cursor: pointer; }
+  button:focus-visible { outline: 3px solid ${x(w("primary"))}; outline-offset: 3px; }
+  button:disabled { opacity: .5; cursor: default; }
+  button[aria-pressed="true"] { outline: 2px solid ${x(w("primary"))}; }
+  small { display: block; }
+  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
+  .list { display: grid; gap: 6px; }
+  .list button { width: 100%; text-align: left; }
+  .card { background: ${x(w("surface"))}; border-radius: var(--osvi-radius, 10px); padding: 12px; }
+  .image { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
+  .image img { width: 100%; height: 100%; object-fit: cover; }
+  .navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; }
+  .days, .weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
+  .days button { padding: 8px 0; }
+`;
+var yt = Object.defineProperty, P = (i, t, e, s) => {
+  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
+    (o = i[r]) && (n = o(t, e, n) || n);
+  return n && yt(t, e, n), n;
+};
+class m 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 && it(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") && G(this, this.theme);
+  }
+}
+P([
+  l({ attribute: !1 })
+], m.prototype, "interaction");
+P([
+  l({ type: Boolean })
+], m.prototype, "disabled");
+P([
+  l({ attribute: !1 })
+], m.prototype, "theme");
+P([
+  l({ attribute: "base-url" })
+], m.prototype, "baseUrl");
+var gt = Object.defineProperty, mt = (i, t, e, s) => {
+  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
+    (o = i[r]) && (n = o(t, e, n) || n);
+  return n && gt(t, e, n), n;
+};
+const E = class E extends m {
+  constructor() {
+    super(...arguments), this.toolType = "ui_buttons", this.variant = "chips";
+  }
+  render() {
+    const t = this.interaction;
+    if (!t) return d;
+    if (!this.valid) return a`<p>${t.content}</p>`;
+    const e = t.presentation, s = t.response_payload?.kind === "text" ? t.response_payload.value : e.options.find((n) => n.id === (t.response_payload?.kind === "selection" ? t.response_payload.value : t.selected_option_id))?.label;
+    return a`<p>${e.label}</p>${e.description ? a`<p>${e.description}</p>` : d}
+      ${this.live ? a`<div role="group" aria-label="Options" class=${this.variant} @keydown=${this.onKey}>
+        ${e.options.map((n) => a`<button type="button" @click=${() => this.pick(n.id, n.allow_input, n.input_placeholder)}><span>${n.label}</span>${n.description ? a`<small>${n.description}</small>` : d}</button>`)}
+      </div>` : s ? a`<p>${s}</p>` : d}`;
+  }
+  pick(t, e, s) {
+    !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: s } })) : this.respond({ kind: "selection", value: t }));
+  }
+  onKey(t) {
+    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(t.key)) return;
+    const e = [...this.renderRoot.querySelectorAll("button")], s = e.indexOf(this.renderRoot.activeElement), n = t.key === "ArrowDown" || t.key === "ArrowRight" ? 1 : -1;
+    e[(s + n + e.length) % e.length]?.focus(), t.preventDefault();
+  }
+};
+E.styles = B;
+let I = E;
+mt([
+  l()
+], I.prototype, "variant");
+var $t = Object.defineProperty, q = (i, t, e, s) => {
+  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
+    (o = i[r]) && (n = o(t, e, n) || n);
+  return n && $t(t, e, n), n;
+};
+const O = class O extends m {
+  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 d;
+    if (!this.valid) return a`<p>${t.content}</p>`;
+    const e = t.presentation, s = e.items.find((n) => n.id === (t.response_payload?.kind === "selection" ? t.response_payload.value : t.selected_option_id));
+    return a`<p>${e.label}</p>${e.description ? a`<p>${e.description}</p>` : d}
+      ${this.live ? this.variant === "list" ? a`<div class="list">${e.items.map((n, r) => this.card(n, r))}</div>` : a`<div @pointerdown=${(n) => {
+      this.pointerStart = n.clientX, this.suppressPointerClick = !1;
+    }} @pointerup=${(n) => {
+      this.pointerStart !== void 0 && Math.abs(n.clientX - this.pointerStart) > 40 && (this.suppressPointerClick = !0, this.navigate(n.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" aria-label="Previous card" ?disabled=${this.index === 0} @click=${() => this.navigate(-1, e.items.length)}>Previous</button>
+          <span aria-live="polite">${this.index + 1} of ${e.items.length}</span>
+          <button type="button" aria-label="Next card" ?disabled=${this.index === e.items.length - 1} @click=${() => this.navigate(1, e.items.length)}>Next</button></div>` : s ? a`<p>${s.title}</p>` : d}`;
+  }
+  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 s = t.image;
+    return a`<article class="card">${s && st(s.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(/\/$/, "") + s.url} alt=${s.alt} referrerpolicy="no-referrer" loading="lazy" @error=${() => {
+      this.imageFailed = /* @__PURE__ */ new Set([...this.imageFailed, e]);
+    }}>`}</div>` : d}
+      <h3>${t.title}</h3>${t.description ? a`<p>${t.description}</p>` : d}
+      <button type="button" @click=${(n) => this.select(n, t.id)}>${t.action_label ?? "Select"}</button></article>`;
+  }
+};
+O.styles = B;
+let k = O;
+q([
+  l()
+], k.prototype, "variant");
+q([
+  b()
+], k.prototype, "index");
+q([
+  b()
+], k.prototype, "imageFailed");
+var xt = Object.defineProperty, T = (i, t, e, s) => {
+  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
+    (o = i[r]) && (n = o(t, e, n) || n);
+  return n && xt(t, e, n), n;
+};
+const tt = (i) => `${String(i.getFullYear()).padStart(4, "0")}-${String(i.getMonth() + 1).padStart(2, "0")}-${String(i.getDate()).padStart(2, "0")}`, D = () => tt(/* @__PURE__ */ new Date()), V = (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;
+}, v = (i) => i.slice(0, 7), j = class j extends m {
+  constructor() {
+    super(...arguments), this.toolType = "ui_date_picker", this.variant = "grid", this.month = v(D()), this.start = "", this.end = "";
+  }
+  earliest(t) {
+    return t.min_date && t.min_date > D() ? t.min_date : D();
+  }
+  willUpdate(t) {
+    t.has("interaction") && (this.start = "", this.end = "", this.valid && (this.month = v(this.earliest(this.interaction.presentation))));
+  }
+  render() {
+    const t = this.interaction;
+    if (!t) return d;
+    if (!this.valid) return a`<p>${t.content}</p>`;
+    const e = t.presentation, s = t.response_payload, n = s?.kind === "date_range" ? `${s.value.start_date} – ${s.value.end_date}` : s?.kind === "date" || s?.kind === "text" ? s.value : t.selected_option_id;
+    if (!this.live) return a`<p>${e.label}</p>${e.description ? a`<p>${e.description}</p>` : d}${n ? a`<p>${n}</p>` : d}`;
+    const r = V(`${this.month}-01`), o = new Date(r);
+    o.setMonth(o.getMonth() + 1, 0);
+    const u = this.earliest(e), _ = Array.from({ length: o.getDate() }, (p, U) => `${this.month}-${String(U + 1).padStart(2, "0")}`), $ = 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;
+    return a`<p>${e.label}</p>${e.description ? a`<p>${e.description}</p>` : d}
+      <div class="navigation"><button type="button" aria-label="Previous month" ?disabled=${this.month <= v(u)} @click=${() => this.moveMonth(-1, e)}>Previous</button>
+        <span aria-live="polite">${r.toLocaleDateString(void 0, { month: "long", year: "numeric" })}</span>
+        <button type="button" aria-label="Next month" ?disabled=${!!e.max_date && this.month >= v(e.max_date)} @click=${() => this.moveMonth(1, e)}>Next</button></div>
+      <div class="weekdays" aria-hidden="true">${["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((p) => a`<span>${p}</span>`)}</div>
+      <div class="days" role="group" aria-label="Choose date" @keydown=${this.onKey}>
+        ${Array.from({ length: r.getDay() }, () => a`<span></span>`)}
+        ${_.map((p, U) => a`<button type="button" aria-label=${p} aria-pressed=${p === this.start || p === this.end} ?disabled=${p < u || !!e.max_date && p > e.max_date} @click=${() => this.pick(p, e)}>${U + 1}</button>`)}
+      </div><p aria-live="polite">${$}</p>
+      <button type="button" ?disabled=${!this.start || e.selection_mode === "range" && (!this.end || this.start >= this.end)} @click=${() => this.confirm(e)}>${e.confirm_label ?? "Confirm date"}</button>`;
+  }
+  moveMonth(t, e) {
+    const s = V(`${this.month}-01`);
+    s.setMonth(s.getMonth() + t);
+    const n = v(tt(s));
+    n >= v(this.earliest(e)) && (!e.max_date || n <= v(e.max_date)) && (this.month = n);
+  }
+  pick(t, e) {
+    !this.live || !this.valid || !R(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) {
+    !R(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 }) : R(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 s = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[t.key];
+    if (s === void 0) return;
+    const n = [...this.renderRoot.querySelectorAll(".days button")], r = n.indexOf(this.renderRoot.activeElement);
+    if (r < 0) return;
+    let o = r + s;
+    for (; o >= 0 && o < n.length && n[o]?.disabled; ) o += s > 0 ? 1 : -1;
+    n[o]?.focus(), t.preventDefault();
+  }
+};
+j.styles = B;
+let g = j;
+T([
+  l()
+], g.prototype, "variant");
+T([
+  b()
+], g.prototype, "month");
+T([
+  b()
+], g.prototype, "start");
+T([
+  b()
+], g.prototype, "end");
+A("osvi-chat", vt);
+A("osvi-buttons", I);
+A("osvi-carousel", k);
+A("osvi-date-picker", g);
+export {
+  N as DEFAULT_STRINGS,
+  I as OsviButtons,
+  k as OsviCarousel,
+  vt as OsviChat,
+  g as OsviDatePicker,
+  G as applyTheme,
+  w as cssVar,
+  A as defineOnce,
+  lt as explicitThemeVariables,
+  F as themeVariables
+};
+//# sourceMappingURL=ui.mjs.map