sagedesk 1.0.0

package/dist/react/index.cjs

@@ -0,0 +1,1402 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  SageDeskWidget: () => SageDeskWidget,
+  useSageDesk: () => useSageDesk
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/SageDeskWidget.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/react/useSageDesk.ts
+var import_react = require("react");
+
+// src/core/embedder.ts
+var XENOVA_IDS = {
+  "all-MiniLM-L6-v2": "Xenova/all-MiniLM-L6-v2",
+  "bge-small-en-v1-5": "Xenova/bge-small-en-v1.5",
+  "paraphrase-multilingual-MiniLM-L12-v2": "Xenova/paraphrase-multilingual-MiniLM-L12-v2",
+  "all-mpnet-base-v2": "Xenova/all-mpnet-base-v2"
+};
+var _EmbedderRuntime = class _EmbedderRuntime {
+  constructor() {
+    this._ready = false;
+    this._failed = false;
+  }
+  async load(model = "all-MiniLM-L6-v2") {
+    if (this._ready) return;
+    if (this._failed) throw new Error("EmbedderRuntime previously failed to load");
+    if (_EmbedderRuntime._loadingPromise) {
+      await _EmbedderRuntime._loadingPromise;
+      this._ready = true;
+      return;
+    }
+    const modelId = XENOVA_IDS[model];
+    _EmbedderRuntime._loadingPromise = (async () => {
+      try {
+        const { pipeline } = await import("@huggingface/transformers");
+        _EmbedderRuntime._pipelineInstance = await pipeline(
+          "feature-extraction",
+          modelId,
+          { dtype: "q8" }
+        );
+      } catch (err) {
+        _EmbedderRuntime._loadingPromise = null;
+        _EmbedderRuntime._pipelineInstance = null;
+        throw err;
+      }
+    })();
+    try {
+      await _EmbedderRuntime._loadingPromise;
+      this._ready = true;
+    } catch (err) {
+      this._failed = true;
+      throw err;
+    }
+  }
+  async embed(text) {
+    if (!_EmbedderRuntime._pipelineInstance) {
+      await this.load();
+    }
+    try {
+      const output = await _EmbedderRuntime._pipelineInstance(text, {
+        pooling: "mean",
+        normalize: true
+      });
+      return output.data;
+    } catch (err) {
+      throw new Error(`Embedding failed: ${String(err)}`);
+    }
+  }
+  get isReady() {
+    return this._ready;
+  }
+  get hasFailed() {
+    return this._failed;
+  }
+  /** @internal */
+  static _reset() {
+    _EmbedderRuntime._pipelineInstance = null;
+    _EmbedderRuntime._loadingPromise = null;
+  }
+};
+// Module-level singleton so the WASM model is loaded at most once per page,
+// regardless of how many widget instances exist.
+_EmbedderRuntime._pipelineInstance = null;
+_EmbedderRuntime._loadingPromise = null;
+var EmbedderRuntime = _EmbedderRuntime;
+
+// src/core/search.ts
+function dotProduct(a, b) {
+  if (a.length !== b.length) {
+    throw new Error(`Vector dimension mismatch: query(${a.length}) vs index(${b.length})`);
+  }
+  let dot = 0;
+  for (let i = 0; i < a.length; i++) dot += a[i] * b[i];
+  return dot;
+}
+function search(queryVector, index, topK = 3, minScore = 0.42) {
+  const results = [];
+  for (const chunk of index) {
+    const score = dotProduct(queryVector, chunk.vector384);
+    if (score < minScore) continue;
+    if (results.length < topK) {
+      results.push({ chunk, score });
+      results.sort((a, b) => b.score - a.score);
+    } else if (score > results[topK - 1].score) {
+      results[topK - 1] = { chunk, score };
+      results.sort((a, b) => b.score - a.score);
+    }
+  }
+  return results;
+}
+function keywordSearch(query, index, topK = 3) {
+  const terms = query.toLowerCase().split(/\s+/).filter((w) => w.length > 2).map((w) => w.replace(/[^a-z0-9]/g, ""));
+  if (terms.length === 0) return [];
+  const results = [];
+  for (const chunk of index) {
+    const chunkLower = chunk.textLower || chunk.text.toLowerCase();
+    const matchCount = terms.filter((t) => chunkLower.includes(t)).length;
+    const score = matchCount / terms.length;
+    if (score <= 0) continue;
+    if (results.length < topK) {
+      results.push({ chunk, score });
+      results.sort((a, b) => b.score - a.score);
+    } else if (score > results[topK - 1].score) {
+      results[topK - 1] = { chunk, score };
+      results.sort((a, b) => b.score - a.score);
+    }
+  }
+  return results;
+}
+async function loadIndex(url) {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch index (HTTP ${res.status}): ${url}`);
+  }
+  const data = await res.json();
+  const chunks = Array.isArray(data) ? data : data.chunks;
+  for (const chunk of chunks) {
+    chunk.textLower = chunk.text.toLowerCase();
+    if (Array.isArray(chunk.vector384)) {
+      chunk.vector384 = new Float32Array(chunk.vector384);
+    }
+    if (Array.isArray(chunk.vector768)) {
+      chunk.vector768 = new Float32Array(chunk.vector768);
+    }
+  }
+  return chunks;
+}
+
+// src/core/retriever.ts
+async function fetchIndex(url) {
+  try {
+    return await loadIndex(url);
+  } catch (err) {
+    throw new Error(`Could not load knowledge index: ${String(err)}`);
+  }
+}
+async function retrieve(text, index, embedder, config) {
+  const topK = config?.topK ?? 3;
+  const minScore = config?.minScore ?? 0.42;
+  if (embedder.isReady) {
+    try {
+      const vector = await embedder.embed(text);
+      const results2 = search(vector, index, topK, minScore);
+      return { results: results2, mode: "vector" };
+    } catch {
+    }
+  }
+  const results = keywordSearch(text, index, topK);
+  return { results, mode: "keyword" };
+}
+
+// src/core/renderer.ts
+function buildAnswer(results) {
+  if (results.length === 0) return "";
+  const seen = /* @__PURE__ */ new Set();
+  const parts = [];
+  for (const r of results) {
+    if (!seen.has(r.chunk.sourceId)) {
+      seen.add(r.chunk.sourceId);
+      parts.push(r.chunk.text);
+    }
+  }
+  return parts.join("\n\n");
+}
+function extractChips(index, override) {
+  if (override && override.length > 0) return override.slice(0, 5);
+  const chips = [];
+  const seenText = /* @__PURE__ */ new Set();
+  const seenSource = /* @__PURE__ */ new Set();
+  for (const chunk of index) {
+    if (chips.length >= 5) break;
+    if (chunk.sourceId) {
+      if (seenSource.has(chunk.sourceId)) continue;
+      seenSource.add(chunk.sourceId);
+    }
+    const candidate = chunk.question ?? extractFirstSentence(chunk.text);
+    if (candidate && !seenText.has(candidate)) {
+      seenText.add(candidate);
+      chips.push(candidate);
+    }
+  }
+  return chips;
+}
+function extractFirstSentence(text) {
+  const match = text.match(/^[^\n.!?]{10,80}[.!?\n]?/);
+  if (!match) return text.slice(0, 60);
+  return match[0].trim();
+}
+
+// src/core/fallback.ts
+var DEFAULT_POOL = [
+  "That one's a bit outside what I have notes on right now. Feel free to reach out directly and I'll make sure you get a proper answer.",
+  "Hmm, I don't have a great answer for that one yet. You're welcome to get in touch and a real person will help.",
+  "I want to give you the right answer, not a guess. If you reach out through the contact page someone will follow up with you."
+];
+var rotationIndex = 0;
+function getFallback(config) {
+  const pool = config.fallbackPool && config.fallbackPool.length > 0 ? config.fallbackPool : config.fallback ? [config.fallback] : DEFAULT_POOL;
+  const message = pool[rotationIndex % pool.length];
+  rotationIndex = (rotationIndex + 1) % pool.length;
+  if (config.contactUrl) {
+    return `${message} You can reach us at: ${config.contactUrl}`;
+  }
+  return message;
+}
+
+// src/react/useSageDesk.ts
+var initialState = {
+  messages: [],
+  isOpen: false,
+  isTyping: false,
+  engineStatus: "idle",
+  engineError: null,
+  hasSentMessage: false
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case "OPEN":
+      return { ...state, isOpen: true };
+    case "CLOSE":
+      return { ...state, isOpen: false };
+    case "ADD_MESSAGE":
+      return { ...state, messages: [...state.messages, action.payload] };
+    case "SET_TYPING":
+      return { ...state, isTyping: action.payload };
+    case "SET_ENGINE_STATUS":
+      return {
+        ...state,
+        engineStatus: action.payload.status,
+        engineError: action.payload.error ?? null
+      };
+    case "MARK_SENT":
+      return { ...state, hasSentMessage: true };
+    default:
+      return state;
+  }
+}
+function useSageDesk(config) {
+  const [state, dispatch] = (0, import_react.useReducer)(reducer, initialState);
+  const engineStatusRef = (0, import_react.useRef)("idle");
+  engineStatusRef.current = state.engineStatus;
+  const indexRef = (0, import_react.useRef)(null);
+  const embedderRef = (0, import_react.useRef)(null);
+  const engineStartedRef = (0, import_react.useRef)(false);
+  const msgCounterRef = (0, import_react.useRef)(0);
+  const [chips, setChips] = (0, import_react.useState)([]);
+  const makeId = () => `msg-${++msgCounterRef.current}`;
+  const addMessage = (0, import_react.useCallback)(
+    (msg) => {
+      dispatch({
+        type: "ADD_MESSAGE",
+        payload: { ...msg, id: makeId(), timestamp: /* @__PURE__ */ new Date() }
+      });
+    },
+    []
+  );
+  const startEngine = (0, import_react.useCallback)(async () => {
+    if (engineStartedRef.current) return;
+    engineStartedRef.current = true;
+    dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "loading-index" } });
+    try {
+      indexRef.current = await fetchIndex(config.indexUrl);
+    } catch (err) {
+      console.warn("[sagedesk] Failed to load knowledge index from", config.indexUrl, "-", err);
+      dispatch({
+        type: "SET_ENGINE_STATUS",
+        payload: { status: "error-index", error: String(err) }
+      });
+      addMessage({
+        role: "bot",
+        text: "I'm having trouble loading right now. Please try again in a moment."
+      });
+      return;
+    }
+    setChips(extractChips(indexRef.current, config.agent.suggestedChips));
+    dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "loading-model" } });
+    try {
+      embedderRef.current = new EmbedderRuntime();
+      await embedderRef.current.load(config.agent.model);
+      dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "ready" } });
+    } catch (err) {
+      console.warn("[sagedesk] WASM model failed to load, falling back to keyword search -", err);
+      embedderRef.current = new EmbedderRuntime();
+      dispatch({ type: "SET_ENGINE_STATUS", payload: { status: "degraded" } });
+    }
+  }, [config.indexUrl, config.agent.suggestedChips, addMessage]);
+  const greetingShownRef = (0, import_react.useRef)(false);
+  const open = (0, import_react.useCallback)(() => {
+    dispatch({ type: "OPEN" });
+    if (!greetingShownRef.current) {
+      greetingShownRef.current = true;
+      addMessage({
+        role: "bot",
+        text: config.agent.greeting ?? "Hey, how can I help you today?"
+      });
+    }
+    startEngine();
+  }, [config.agent.greeting, addMessage, startEngine]);
+  const close = (0, import_react.useCallback)(() => {
+    dispatch({ type: "CLOSE" });
+  }, []);
+  const waitForEngine = (0, import_react.useCallback)(() => {
+    return new Promise((resolve) => {
+      const check = () => {
+        const s = engineStatusRef.current;
+        if (s === "ready" || s === "degraded" || s === "error-index" || s === "error-model") {
+          resolve();
+        } else {
+          setTimeout(check, 100);
+        }
+      };
+      check();
+    });
+  }, []);
+  const submit = (0, import_react.useCallback)(
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed) return;
+      const typingStart = Date.now();
+      dispatch({ type: "MARK_SENT" });
+      addMessage({ role: "user", text: trimmed });
+      dispatch({ type: "SET_TYPING", payload: true });
+      const currentStatus = engineStatusRef.current;
+      if (currentStatus !== "ready" && currentStatus !== "degraded" && currentStatus !== "error-index" && currentStatus !== "error-model") {
+        await waitForEngine();
+      }
+      let botText;
+      let isFallback = false;
+      let mode = "keyword";
+      if (!indexRef.current) {
+        botText = getFallback(config.agent);
+        isFallback = true;
+      } else {
+        try {
+          const res = await retrieve(
+            trimmed,
+            indexRef.current,
+            embedderRef.current,
+            config.search
+          );
+          mode = res.mode;
+          if (res.results.length > 0) {
+            botText = buildAnswer(res.results);
+          } else {
+            botText = getFallback(config.agent);
+            isFallback = true;
+          }
+        } catch (err) {
+          console.warn("[sagedesk] Query failed, showing fallback -", err);
+          botText = getFallback(config.agent);
+          isFallback = true;
+        }
+      }
+      const elapsed = Date.now() - typingStart;
+      const delayBase = mode === "keyword" || isFallback ? 800 : 3e3;
+      const minTypingMs = delayBase + Math.random() * 2e3;
+      const remaining = minTypingMs - elapsed;
+      if (remaining > 0) await new Promise((r) => setTimeout(r, remaining));
+      dispatch({ type: "SET_TYPING", payload: false });
+      addMessage({ role: "bot", text: botText, isFallback });
+    },
+    [addMessage, waitForEngine, config.agent, config.search]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!state.isOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [state.isOpen, close]);
+  const activeChips = (0, import_react.useMemo)(() => {
+    const askedTexts = new Set(
+      state.messages.filter((m) => m.role === "user").map((m) => m.text.toLowerCase().trim())
+    );
+    return chips.filter((chip) => !askedTexts.has(chip.toLowerCase().trim()));
+  }, [chips, state.messages]);
+  return { state, chips: activeChips, open, close, submit };
+}
+
+// src/react/SageDeskWidget.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var STYLE_ID = "sagedesk-widget-styles";
+var SHARED = `
+  @keyframes sd-bounce {
+    0%, 60%, 100% { transform: translateY(0); }
+    30%           { transform: translateY(-5px); }
+  }
+  @keyframes sd-panel-open {
+    from { transform: scale(0.94) translateY(6px); opacity: 0; }
+    to   { transform: scale(1)    translateY(0);   opacity: 1; }
+  }
+  @keyframes sd-panel-close {
+    from { transform: scale(1)    translateY(0);   opacity: 1; }
+    to   { transform: scale(0.94) translateY(6px); opacity: 0; }
+  }
+  .sd-r-opening { animation: sd-panel-open  200ms cubic-bezier(0.34,1.56,0.64,1) both; }
+  .sd-r-closing { animation: sd-panel-close 150ms ease-in both; }
+  .sd-r-dot-1   { animation: sd-bounce 1.2s ease-in-out          infinite; }
+  .sd-r-dot-2   { animation: sd-bounce 1.2s ease-in-out 0.2s     infinite; }
+  .sd-r-dot-3   { animation: sd-bounce 1.2s ease-in-out 0.4s     infinite; }
+  .sd-r-scrollable {
+    flex-wrap: nowrap !important;
+    overflow-x: auto !important;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
+  }
+  .sd-r-scrollable::-webkit-scrollbar { display: none !important; }
+  .sd-r-scrollable > * { flex-shrink: 0 !important; }
+  @media (max-width: 420px) {
+    .sd-r-panel {
+      bottom: 0 !important; right: 0 !important; left: 0 !important;
+      width: auto !important; max-width: 100% !important;
+      border-radius: 20px 20px 0 0 !important;
+      max-height: 85vh !important;
+      transform-origin: bottom center !important;
+    }
+  }
+`;
+var THEME_CSS = {
+  classic: `${SHARED}
+    .sd-r-trigger:hover  { transform: scale(1.06) !important; }
+    .sd-r-close-btn:hover { background: rgba(255,255,255,0.22) !important; }
+    .sd-r-chip:hover     { opacity: 0.8; }
+    .sd-r-send:hover     { opacity: 0.85; }
+    .sd-r-send:active    { transform: scale(0.95); }
+    .sd-r-input:focus    { outline: none; }
+    .sd-r-input::placeholder { color: #a8a8b0; }
+  `,
+  light: `${SHARED}
+    .sd-r-trigger-light:hover { box-shadow: 0 16px 32px -10px rgba(40,30,90,0.24),0 2px 10px rgba(40,30,90,0.08) !important; }
+    .sd-r-chip-light:hover   { opacity: 0.75; }
+    .sd-r-send:hover  { opacity: 0.85; }
+    .sd-r-send:active { transform: scale(0.95); }
+    .sd-r-input:focus { outline: none; }
+    .sd-r-input::placeholder { color: #a8a89e; }
+  `,
+  dark: `${SHARED}
+    @keyframes sd-blink { 0%,100%{opacity:1} 50%{opacity:0} }
+    .sd-r-cursor  { animation: sd-blink 1s infinite; }
+    .sd-r-trigger:hover  { transform: scale(1.04) !important; }
+    .sd-r-prompt:hover   { background: rgba(255,255,255,0.07) !important; }
+    .sd-r-send:hover  { opacity: 0.85; }
+    .sd-r-send:active { transform: scale(0.95); }
+    .sd-r-input:focus { outline: none; }
+    .sd-r-input::placeholder { color: rgba(255,255,255,0.35); }
+  `
+};
+function injectStyles(theme) {
+  if (typeof document === "undefined") return;
+  const id = `${STYLE_ID}-${theme}`;
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = THEME_CSS[theme];
+  document.head.prepend(style);
+}
+var IconChat = ({ size = 22 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "path",
+  {
+    d: "M5 6.5A2.5 2.5 0 017.5 4h9A2.5 2.5 0 0119 6.5v7A2.5 2.5 0 0116.5 16H11l-4 3.5V16H7.5A2.5 2.5 0 015 13.5v-7z",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinejoin: "round"
+  }
+) });
+var IconSend = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 12L20 4l-4 16-4-7-8-1z", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round" }) });
+var IconClose = ({ size = 14 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) });
+var IconBot = ({ size = 22 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "4", y: "8", width: "16", height: "12", rx: "3", stroke: "currentColor", strokeWidth: "1.6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "13.5", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "15", cy: "13.5", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.5 16.5h5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 8V5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "1.2", fill: "currentColor" })
+] });
+var IconPerson = ({ size = 18 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 12.5a4 4 0 100-8 4 4 0 000 8z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 20.5c0-3.5 3.13-6 7-6s7 2.5 7 6" })
+] });
+var PoweredBy = ({ dark = false }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+  fontSize: "11px",
+  color: dark ? "rgba(255,255,255,0.35)" : "#a8a8b0",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "4px"
+}, children: [
+  "Powered by",
+  " ",
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      href: "https://github.com/mzeeshanwahid/sagedesk",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        color: dark ? "rgba(255,255,255,0.7)" : "#5a5a64",
+        fontWeight: 500,
+        textDecoration: "none"
+      },
+      children: "sagedesk"
+    }
+  )
+] });
+function ClassicMessageBubble({ msg, accent }) {
+  const isBot = msg.role === "bot";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: isBot ? "flex-start" : "flex-end", gap: "4px" }, children: [
+    msg.isFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: "11px", fontWeight: 500, color: "#9b9aa3", margin: 0, padding: "0 4px", fontFamily: "inherit" }, children: "Not sure about that one" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      maxWidth: "82%",
+      padding: "10px 14px",
+      fontSize: "14px",
+      lineHeight: 1.5,
+      borderRadius: isBot ? "16px 16px 16px 6px" : "16px 16px 6px 16px",
+      background: isBot ? "#fff" : accent,
+      color: isBot ? "#1a1a2e" : "#fff",
+      border: isBot ? "1px solid rgba(20,20,40,0.06)" : "none",
+      boxShadow: isBot ? "0 1px 2px rgba(20,20,40,0.04)" : `0 6px 16px -6px color-mix(in oklab, ${accent} 60%, transparent)`,
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      fontFamily: "inherit"
+    }, children: msg.text }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
+      fontSize: "11px",
+      color: "#a8a8b0",
+      marginTop: "2px",
+      padding: isBot ? "0 0 0 4px" : "0 4px 0 0",
+      fontVariantNumeric: "tabular-nums",
+      fontFamily: "inherit"
+    }, children: "just now" })
+  ] });
+}
+function ClassicTypingIndicator() {
+  const dot = { width: 6, height: 6, borderRadius: "50%", background: "#c8c8ce", display: "inline-block" };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+    padding: "10px 14px",
+    borderRadius: "16px 16px 16px 6px",
+    background: "#fff",
+    border: "1px solid rgba(20,20,40,0.06)",
+    boxShadow: "0 1px 2px rgba(20,20,40,0.04)",
+    display: "flex",
+    alignItems: "center",
+    gap: "4px"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-3" })
+  ] }) });
+}
+function LightMessageBubble({ msg, accent, agentName }) {
+  const isBot = msg.role === "bot";
+  if (isBot) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+        width: 28,
+        height: 28,
+        borderRadius: "50%",
+        background: `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 60%, #fff))`,
+        flexShrink: 0,
+        marginTop: "2px"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: "8px", marginBottom: "4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600, color: "#1a1a2e", fontFamily: "inherit" }, children: agentName }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: "#a8a89e", fontVariantNumeric: "tabular-nums", fontFamily: "inherit" }, children: "just now" })
+        ] }),
+        msg.isFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: "11px", color: "#9b9aa3", margin: "0 0 4px", fontFamily: "inherit" }, children: "Not sure about that one" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "14px", lineHeight: 1.55, color: "#2a2a36", fontFamily: "inherit", whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: msg.text })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+    maxWidth: "78%",
+    padding: "11px 15px",
+    fontSize: "14px",
+    lineHeight: 1.5,
+    borderRadius: "16px 16px 4px 16px",
+    background: `color-mix(in oklab, ${accent} 10%, white)`,
+    color: accent,
+    border: `1px solid color-mix(in oklab, ${accent} 22%, transparent)`,
+    fontWeight: 500,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    fontFamily: "inherit"
+  }, children: msg.text }) });
+}
+function LightTypingIndicator({ accent }) {
+  const dot = { width: 6, height: 6, borderRadius: "50%", background: "#c4c4be", display: "inline-block" };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "10px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      width: 28,
+      height: 28,
+      borderRadius: "50%",
+      background: `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 60%, #fff))`,
+      flexShrink: 0,
+      marginTop: "2px"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+      padding: "10px 14px",
+      borderRadius: "16px 16px 16px 4px",
+      background: "#fff",
+      border: "1px solid rgba(20,20,40,0.07)",
+      boxShadow: "0 1px 2px rgba(20,20,40,0.04)",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px"
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-3" })
+    ] })
+  ] });
+}
+function DarkMessageBubble({ msg, accent }) {
+  const isBot = msg.role === "bot";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+    maxWidth: "85%",
+    padding: "12px 14px",
+    fontSize: "14px",
+    lineHeight: isBot ? 1.6 : 1.5,
+    borderRadius: isBot ? "14px 14px 14px 6px" : "14px 14px 6px 14px",
+    background: isBot ? "rgba(255,255,255,0.05)" : `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 75%, #1a1340))`,
+    border: isBot ? "1px solid rgba(255,255,255,0.06)" : "none",
+    color: isBot ? "rgba(255,255,255,0.92)" : "#fff",
+    alignSelf: isBot ? "flex-start" : "flex-end",
+    boxShadow: isBot ? "none" : `0 8px 20px -8px color-mix(in oklab, ${accent} 70%, transparent)`,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    fontFamily: "inherit"
+  }, children: [
+    msg.isFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: "rgba(255,255,255,0.5)", display: "block", marginBottom: "4px" }, children: "Not sure about that one" }),
+    msg.text
+  ] });
+}
+function DarkTypingIndicator() {
+  const dot = { width: 6, height: 6, borderRadius: "50%", background: "rgba(255,255,255,0.4)", display: "inline-block" };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+    maxWidth: "85%",
+    padding: "12px 14px",
+    borderRadius: "14px 14px 14px 6px",
+    background: "rgba(255,255,255,0.05)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    alignSelf: "flex-start",
+    display: "flex",
+    alignItems: "center",
+    gap: "4px"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dot, className: "sd-r-dot-3" })
+  ] });
+}
+function renderClassic(p) {
+  const {
+    agent,
+    state,
+    chips,
+    accent,
+    isLeft,
+    inputValue,
+    setInputValue,
+    handleClose,
+    handleSubmit,
+    handleKeyDown,
+    isClosing,
+    panelClass,
+    showChips,
+    showPoweredBy,
+    threadRef,
+    inputRef,
+    triggerRef,
+    open,
+    submit
+  } = p;
+  const side = isLeft ? "left" : "right";
+  const triggerStyle = {
+    position: "fixed",
+    bottom: "28px",
+    [side]: "28px",
+    width: "56px",
+    height: "56px",
+    borderRadius: "50%",
+    background: `linear-gradient(135deg, ${accent} 0%, color-mix(in oklab, ${accent} 78%, #1a1340) 100%)`,
+    border: "none",
+    color: "#fff",
+    cursor: "pointer",
+    display: "grid",
+    placeItems: "center",
+    zIndex: 9999,
+    padding: 0,
+    transition: "transform 150ms ease",
+    boxShadow: `0 14px 28px -6px color-mix(in oklab, ${accent} 55%, transparent), 0 4px 10px rgba(40,30,90,0.15)`
+  };
+  const panelStyle = {
+    position: "fixed",
+    bottom: "96px",
+    [side]: "28px",
+    width: "380px",
+    height: "580px",
+    maxHeight: "580px",
+    borderRadius: "20px",
+    background: "#ffffff",
+    boxShadow: "0 1px 0 rgba(20,20,40,0.04), 0 24px 48px -16px rgba(40,30,90,0.22), 0 4px 14px rgba(40,30,90,0.08)",
+    border: "1px solid rgba(20,20,40,0.04)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    zIndex: 9999,
+    transformOrigin: isLeft ? "bottom left" : "bottom right"
+  };
+  const headerGrad = `linear-gradient(135deg, ${accent} 0%, color-mix(in oklab, ${accent} 78%, #1a1340) 100%)`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref: triggerRef,
+        style: triggerStyle,
+        className: "sd-r-trigger",
+        onClick: state.isOpen ? handleClose : open,
+        "aria-label": "Open support chat",
+        "aria-expanded": state.isOpen,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconChat, { size: 22 })
+      }
+    ),
+    (state.isOpen || isClosing) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: panelStyle, className: `sd-r-panel ${panelClass}`, role: "dialog", "aria-label": agent.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "18px 20px", background: headerGrad, color: "#fff", display: "flex", alignItems: "center", gap: "12px", flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", width: 40, height: 40 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 40, height: 40, borderRadius: "50%", background: "rgba(255,255,255,0.18)", display: "grid", placeItems: "center", overflow: "hidden" }, children: agent.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: agent.avatarUrl, alt: agent.name, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconPerson, { size: 20 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", right: -1, bottom: -1, width: 12, height: 12, borderRadius: "50%", background: "#22c55e", boxShadow: `0 0 0 2.5px ${accent}` } })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "15px", fontWeight: 600, letterSpacing: "-0.01em" }, children: agent.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "12px", opacity: 0.85, display: "flex", alignItems: "center", gap: "6px", marginTop: "3px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 6, height: 6, borderRadius: "50%", background: "#4ade80", boxShadow: "0 0 0 2px rgba(74,222,128,0.25)" } }),
+            "Typically replies in under a minute"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "sd-r-close-btn", onClick: handleClose, "aria-label": "Close chat", style: {
+          background: "rgba(255,255,255,0.14)",
+          border: "none",
+          color: "#fff",
+          width: 30,
+          height: 30,
+          borderRadius: 8,
+          cursor: "pointer",
+          display: "grid",
+          placeItems: "center",
+          padding: 0,
+          transition: "background 120ms"
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconClose, { size: 14 }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: threadRef, role: "log", "aria-live": "polite", "aria-label": "Chat messages", style: {
+        flex: 1,
+        padding: "22px 18px 18px",
+        overflowY: "auto",
+        background: "#fbfbfa",
+        display: "flex",
+        flexDirection: "column",
+        gap: "18px",
+        scrollbarWidth: "thin",
+        overscrollBehavior: "contain"
+      }, children: [
+        state.messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClassicMessageBubble, { msg, accent }, msg.id)),
+        state.isTyping && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClassicTypingIndicator, {})
+      ] }),
+      showChips && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: state.hasSentMessage ? "0 0 16px" : "0 18px 16px", background: "#fbfbfa", flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+          fontSize: "11px",
+          color: "#9b9aa3",
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          fontWeight: 500,
+          paddingLeft: state.hasSentMessage ? 18 : 4,
+          marginBottom: "6px"
+        }, children: "Suggested" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: state.hasSentMessage ? "sd-r-scrollable" : "", style: {
+          display: "flex",
+          gap: "6px",
+          flexWrap: state.hasSentMessage ? "nowrap" : "wrap",
+          padding: state.hasSentMessage ? "0 18px" : 0
+        }, children: chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "sd-r-chip", onClick: () => {
+          setInputValue("");
+          submit(chip);
+        }, style: {
+          fontSize: "12.5px",
+          padding: "7px 12px",
+          borderRadius: "999px",
+          background: "#fff",
+          border: `1px solid color-mix(in oklab, ${accent} 24%, transparent)`,
+          color: accent,
+          cursor: "pointer",
+          fontWeight: 500,
+          fontFamily: "inherit",
+          letterSpacing: "-0.005em"
+        }, children: chip }, chip)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "14px 14px 16px", borderTop: "1px solid rgba(20,20,40,0.06)", background: "#fff", flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          background: "#f5f4f0",
+          borderRadius: "12px",
+          padding: "5px 6px 5px 14px",
+          border: `1px solid ${inputValue ? `color-mix(in oklab, ${accent} 30%, transparent)` : "transparent"}`,
+          boxShadow: inputValue ? `0 0 0 4px color-mix(in oklab, ${accent} 12%, transparent)` : "none",
+          transition: "border-color .15s, box-shadow .15s"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              value: inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: "Write a message\u2026",
+              className: "sd-r-input",
+              "aria-label": "Type your question",
+              autoComplete: "off",
+              style: { flex: 1, background: "transparent", border: "none", outline: "none", fontSize: "14px", padding: "8px 0", fontFamily: "inherit", color: "#1a1a2e" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "sd-r-send", onClick: handleSubmit, "aria-label": "Send message", style: {
+            width: 32,
+            height: 32,
+            borderRadius: 8,
+            padding: 0,
+            background: inputValue ? accent : `color-mix(in oklab, ${accent} 22%, #e5e3dc)`,
+            border: "none",
+            color: "#fff",
+            cursor: "pointer",
+            display: "grid",
+            placeItems: "center",
+            transition: "background .15s"
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconSend, { size: 14 }) })
+        ] }),
+        showPoweredBy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PoweredBy, {}) })
+      ] })
+    ] })
+  ] });
+}
+function renderLight(p) {
+  const {
+    agent,
+    state,
+    chips,
+    accent,
+    isLeft,
+    inputValue,
+    setInputValue,
+    handleClose,
+    handleSubmit,
+    handleKeyDown,
+    isClosing,
+    panelClass,
+    showChips,
+    showPoweredBy,
+    threadRef,
+    inputRef,
+    triggerRef,
+    open,
+    submit
+  } = p;
+  const side = isLeft ? "left" : "right";
+  const triggerStyle = {
+    position: "fixed",
+    bottom: "28px",
+    [side]: "28px",
+    height: "52px",
+    padding: "0 8px 0 20px",
+    borderRadius: "999px",
+    background: "#fdfcf9",
+    border: "1px solid rgba(20,20,40,0.08)",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: "14px",
+    boxShadow: "0 12px 26px -8px rgba(40,30,90,0.18), 0 2px 8px rgba(40,30,90,0.06)",
+    zIndex: 9999,
+    fontFamily: "inherit",
+    transition: "box-shadow 150ms ease"
+  };
+  const panelStyle = {
+    position: "fixed",
+    bottom: "92px",
+    [side]: "28px",
+    width: "400px",
+    height: "580px",
+    maxHeight: "580px",
+    borderRadius: "22px",
+    background: "#fdfcf9",
+    boxShadow: "0 1px 0 rgba(20,20,40,0.04), 0 30px 60px -20px rgba(40,30,90,0.18), 0 6px 16px rgba(40,30,90,0.06)",
+    border: "1px solid rgba(20,20,40,0.05)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    zIndex: 9999,
+    transformOrigin: isLeft ? "bottom left" : "bottom right"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        ref: triggerRef,
+        style: triggerStyle,
+        className: "sd-r-trigger-light",
+        onClick: state.isOpen ? handleClose : open,
+        "aria-label": "Open support chat",
+        "aria-expanded": state.isOpen,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", lineHeight: 1.2 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "14px", fontWeight: 600, color: "#1a1a2e" }, children: "Chat with us" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: "#9b9aa3", marginTop: "2px" }, children: "We typically reply in 1m" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: "36px", height: "36px", borderRadius: "50%", background: accent, color: "#fff", display: "grid", placeItems: "center", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconChat, { size: 18 }) })
+        ]
+      }
+    ),
+    (state.isOpen || isClosing) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: panelStyle, className: `sd-r-panel ${panelClass}`, role: "dialog", "aria-label": agent.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "18px 20px 14px", borderBottom: "1px solid rgba(20,20,40,0.05)", display: "flex", alignItems: "center", gap: "12px", background: "#fdfcf9", flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+          width: 36,
+          height: 36,
+          borderRadius: "50%",
+          flexShrink: 0,
+          background: `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 55%, #fff))`,
+          display: "grid",
+          placeItems: "center",
+          overflow: "hidden",
+          color: "#fff"
+        }, children: agent.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: agent.avatarUrl, alt: agent.name, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconPerson, { size: 16 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "14.5px", fontWeight: 600, color: "#1a1a2e", letterSpacing: "-0.01em" }, children: agent.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "12px", color: "#7a7a82", display: "flex", alignItems: "center", gap: "6px", marginTop: "2px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 6, height: 6, borderRadius: "50%", background: "#22c55e" } }),
+            "Online \xB7 replies in under a minute"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: handleClose, "aria-label": "Close chat", style: {
+          background: "transparent",
+          border: "none",
+          color: "#9b9aa3",
+          width: 30,
+          height: 30,
+          borderRadius: 8,
+          cursor: "pointer",
+          display: "grid",
+          placeItems: "center",
+          padding: 0
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconClose, { size: 16 }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: threadRef, role: "log", "aria-live": "polite", "aria-label": "Chat messages", style: {
+        flex: 1,
+        padding: "22px 20px 16px",
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "22px",
+        scrollbarWidth: "thin",
+        overscrollBehavior: "contain"
+      }, children: [
+        state.messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LightMessageBubble, { msg, accent, agentName: agent.name }, msg.id)),
+        state.isTyping && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LightTypingIndicator, { accent })
+      ] }),
+      showChips && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: state.hasSentMessage ? "sd-r-scrollable" : "", style: {
+        padding: "0 20px 14px",
+        display: "flex",
+        flexWrap: state.hasSentMessage ? "nowrap" : "wrap",
+        gap: "6px",
+        flexShrink: 0
+      }, children: chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "sd-r-chip-light", onClick: () => {
+        setInputValue("");
+        submit(chip);
+      }, style: {
+        fontSize: "12px",
+        padding: "5px 10px",
+        borderRadius: "6px",
+        background: "#f4f3ee",
+        border: "none",
+        color: "#5a5a64",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        fontWeight: 500
+      }, children: chip }, chip)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "14px", borderTop: "1px solid rgba(20,20,40,0.05)", background: "#fdfcf9", flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+          background: "#fff",
+          border: `1px solid ${inputValue ? `color-mix(in oklab, ${accent} 40%, transparent)` : "rgba(20,20,40,0.1)"}`,
+          borderRadius: "14px",
+          padding: "10px 12px",
+          transition: "border-color .15s, box-shadow .15s",
+          boxShadow: inputValue ? `0 0 0 4px color-mix(in oklab, ${accent} 12%, transparent)` : "none"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              value: inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: "Write a message\u2026",
+              className: "sd-r-input",
+              "aria-label": "Type your question",
+              autoComplete: "off",
+              style: { width: "100%", background: "transparent", border: "none", outline: "none", fontSize: "14px", fontFamily: "inherit", color: "#1a1a2e" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", marginTop: "8px", gap: "6px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "sd-r-send", onClick: handleSubmit, "aria-label": "Send message", style: {
+              width: 28,
+              height: 28,
+              borderRadius: 7,
+              padding: 0,
+              background: inputValue ? accent : "#e8e7e0",
+              color: inputValue ? "#fff" : "#a8a89e",
+              border: "none",
+              cursor: "pointer",
+              display: "grid",
+              placeItems: "center",
+              transition: "background .15s"
+            }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconSend, { size: 13 }) })
+          ] })
+        ] }),
+        showPoweredBy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PoweredBy, {}) })
+      ] })
+    ] })
+  ] });
+}
+function renderDark(p) {
+  const {
+    agent,
+    state,
+    chips,
+    accent,
+    isLeft,
+    inputValue,
+    setInputValue,
+    handleClose,
+    handleSubmit,
+    handleKeyDown,
+    isClosing,
+    panelClass,
+    showChips,
+    showPoweredBy,
+    threadRef,
+    inputRef,
+    triggerRef,
+    open,
+    submit
+  } = p;
+  const side = isLeft ? "left" : "right";
+  const triggerStyle = {
+    position: "fixed",
+    bottom: "28px",
+    [side]: "28px",
+    width: "60px",
+    height: "60px",
+    borderRadius: "50%",
+    background: `linear-gradient(135deg, color-mix(in oklab, ${accent} 70%, #1a1340), #1a1a2e)`,
+    border: "1px solid rgba(255,255,255,0.12)",
+    color: "#fff",
+    cursor: "pointer",
+    display: "grid",
+    placeItems: "center",
+    zIndex: 9999,
+    padding: 0,
+    transition: "transform 150ms ease",
+    boxShadow: "0 16px 32px -8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1)"
+  };
+  const glowStyle = {
+    position: "fixed",
+    bottom: "18px",
+    [side]: "18px",
+    width: "80px",
+    height: "80px",
+    borderRadius: "50%",
+    background: `radial-gradient(circle, color-mix(in oklab, ${accent} 50%, transparent), transparent 70%)`,
+    filter: "blur(10px)",
+    pointerEvents: "none",
+    zIndex: 9998
+  };
+  const panelStyle = {
+    position: "fixed",
+    bottom: "100px",
+    [side]: "28px",
+    width: "380px",
+    height: "580px",
+    maxHeight: "580px",
+    borderRadius: "22px",
+    background: "rgba(18, 16, 32, 0.86)",
+    backdropFilter: "blur(40px) saturate(180%)",
+    WebkitBackdropFilter: "blur(40px) saturate(180%)",
+    boxShadow: "0 30px 60px -20px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06)",
+    border: "1px solid rgba(255,255,255,0.08)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    zIndex: 9999,
+    color: "#fff",
+    transformOrigin: isLeft ? "bottom left" : "bottom right"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: glowStyle, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref: triggerRef,
+        style: triggerStyle,
+        className: "sd-r-trigger",
+        onClick: state.isOpen ? handleClose : open,
+        "aria-label": "Open support chat",
+        "aria-expanded": state.isOpen,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconBot, { size: 22 })
+      }
+    ),
+    (state.isOpen || isClosing) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: panelStyle, className: `sd-r-panel ${panelClass}`, role: "dialog", "aria-label": agent.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 200,
+        pointerEvents: "none",
+        background: `radial-gradient(ellipse 80% 100% at 50% 0%, color-mix(in oklab, ${accent} 40%, transparent) 0%, transparent 70%)`
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "20px 20px 16px", display: "flex", alignItems: "center", gap: "12px", position: "relative", zIndex: 1, flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+            width: 38,
+            height: 38,
+            borderRadius: "50%",
+            display: "grid",
+            placeItems: "center",
+            overflow: "hidden",
+            background: `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 50%, #fff))`,
+            boxShadow: `0 0 24px color-mix(in oklab, ${accent} 50%, transparent)`
+          }, children: agent.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: agent.avatarUrl, alt: agent.name, style: { width: "100%", height: "100%", objectFit: "cover" } }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconBot, { size: 16 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", right: -2, bottom: -2, width: 12, height: 12, borderRadius: "50%", background: "#22c55e", boxShadow: "0 0 0 2.5px rgba(18,16,32,1)" } })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "15px", fontWeight: 600, letterSpacing: "-0.01em" }, children: agent.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.55)", marginTop: "3px", display: "flex", alignItems: "center", gap: "6px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 5, height: 5, borderRadius: "50%", background: "#4ade80", boxShadow: "0 0 6px #4ade80" } }),
+            "Trained on this site \xB7 always on"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: handleClose, "aria-label": "Close chat", style: {
+          background: "rgba(255,255,255,0.06)",
+          border: "1px solid rgba(255,255,255,0.08)",
+          color: "rgba(255,255,255,0.7)",
+          width: 30,
+          height: 30,
+          borderRadius: 8,
+          cursor: "pointer",
+          display: "grid",
+          placeItems: "center",
+          padding: 0
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconClose, { size: 14 }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: threadRef, role: "log", "aria-live": "polite", "aria-label": "Chat messages", style: {
+        flex: 1,
+        padding: "8px 20px 16px",
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "14px",
+        position: "relative",
+        zIndex: 1,
+        scrollbarWidth: "thin",
+        overscrollBehavior: "contain"
+      }, children: [
+        state.messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DarkMessageBubble, { msg, accent }, msg.id)),
+        state.isTyping && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DarkTypingIndicator, {})
+      ] }),
+      showChips && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: state.hasSentMessage ? "0 0 16px" : "0 20px 16px", position: "relative", zIndex: 1, flexShrink: 0 }, children: [
+        !state.hasSentMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "11px", color: "rgba(255,255,255,0.4)", letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 500, marginBottom: "8px" }, children: "Try asking" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: state.hasSentMessage ? "sd-r-scrollable" : "", style: {
+          display: "flex",
+          flexDirection: state.hasSentMessage ? "row" : "column",
+          gap: "6px",
+          padding: state.hasSentMessage ? "0 20px" : 0
+        }, children: chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "sd-r-prompt", onClick: () => {
+          setInputValue("");
+          submit(chip);
+        }, style: {
+          textAlign: "left",
+          padding: "10px 14px",
+          borderRadius: "10px",
+          background: "rgba(255,255,255,0.04)",
+          border: "1px solid rgba(255,255,255,0.07)",
+          color: "rgba(255,255,255,0.85)",
+          cursor: "pointer",
+          fontSize: "13px",
+          fontFamily: "inherit",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          transition: "background .12s",
+          width: state.hasSentMessage ? "auto" : "100%",
+          whiteSpace: state.hasSentMessage ? "nowrap" : "normal"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 6l6 6-6 6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+          chip
+        ] }, chip)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "14px", borderTop: "1px solid rgba(255,255,255,0.06)", position: "relative", zIndex: 1, flexShrink: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          background: "rgba(255,255,255,0.05)",
+          border: `1px solid ${inputValue ? `color-mix(in oklab, ${accent} 60%, transparent)` : "rgba(255,255,255,0.08)"}`,
+          borderRadius: "12px",
+          padding: "4px 4px 4px 14px",
+          transition: "border-color .15s"
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              value: inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: "Write a message\u2026",
+              className: "sd-r-input",
+              "aria-label": "Type your question",
+              autoComplete: "off",
+              style: { flex: 1, background: "transparent", border: "none", outline: "none", fontSize: "14px", padding: "9px 0", fontFamily: "inherit", color: "#fff" }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "sd-r-send", onClick: handleSubmit, "aria-label": "Send message", style: {
+            width: 32,
+            height: 32,
+            borderRadius: 9,
+            padding: 0,
+            border: "none",
+            cursor: "pointer",
+            background: inputValue ? `linear-gradient(135deg, ${accent}, color-mix(in oklab, ${accent} 60%, #fff))` : "rgba(255,255,255,0.08)",
+            color: inputValue ? "#fff" : "rgba(255,255,255,0.4)",
+            display: "grid",
+            placeItems: "center",
+            transition: "background .15s",
+            boxShadow: inputValue ? `0 4px 12px -2px color-mix(in oklab, ${accent} 60%, transparent)` : "none"
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconSend, { size: 14 }) })
+        ] }),
+        showPoweredBy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PoweredBy, { dark: true }) })
+      ] })
+    ] })
+  ] });
+}
+function SageDeskWidget({ indexUrl, agent, search: search2 }) {
+  if (!indexUrl) {
+    throw new Error(
+      '[sagedesk] Required prop "indexUrl" is missing. Run `npx sagedesk build` and pass the output path, e.g. indexUrl="/support-index.json".'
+    );
+  }
+  if (!agent?.name) {
+    throw new Error('[sagedesk] Required prop "agent.name" is missing.');
+  }
+  const config = { indexUrl, agent, search: search2 };
+  const { state, chips, open, close, submit } = useSageDesk(config);
+  const theme = agent.theme ?? "classic";
+  const accent = agent.accentColor ?? "#534AB7";
+  const position = agent.position ?? "bottom-right";
+  const isLeft = position === "bottom-left";
+  const [inputValue, setInputValue] = (0, import_react2.useState)("");
+  const [isClosing, setIsClosing] = (0, import_react2.useState)(false);
+  const threadRef = (0, import_react2.useRef)(null);
+  const inputRef = (0, import_react2.useRef)(null);
+  const triggerRef = (0, import_react2.useRef)(null);
+  const [mounted, setMounted] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!indexUrl.startsWith("/") && !indexUrl.startsWith("http")) {
+      console.warn(
+        `[sagedesk] indexUrl "${indexUrl}" looks like a relative path. It should start with "/" so it resolves correctly from any page.`
+      );
+    }
+    setMounted(true);
+    injectStyles(theme);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (threadRef.current) {
+      threadRef.current.scrollTop = threadRef.current.scrollHeight;
+    }
+  }, [state.messages, state.isTyping]);
+  (0, import_react2.useEffect)(() => {
+    if (state.isOpen) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [state.isOpen]);
+  const handleClose = (0, import_react2.useCallback)(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      setIsClosing(false);
+      close();
+      triggerRef.current?.focus();
+    }, 150);
+  }, [close]);
+  const handleSubmit = (0, import_react2.useCallback)(() => {
+    const text = inputValue.trim();
+    if (!text) return;
+    setInputValue("");
+    submit(text);
+  }, [inputValue, submit]);
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  if (!mounted || typeof document === "undefined") return null;
+  const showPoweredBy = agent.poweredBy !== false;
+  const showChips = chips.length > 0;
+  const panelClass = isClosing ? "sd-r-closing" : state.isOpen ? "sd-r-opening" : "";
+  const props = {
+    agent,
+    state,
+    chips,
+    accent,
+    isLeft,
+    inputValue,
+    setInputValue,
+    handleClose,
+    handleSubmit,
+    handleKeyDown,
+    isClosing,
+    panelClass,
+    showChips,
+    showPoweredBy,
+    threadRef,
+    inputRef,
+    triggerRef,
+    open,
+    submit
+  };
+  const content = theme === "dark" ? renderDark(props) : theme === "light" ? renderLight(props) : renderClassic(props);
+  return (0, import_react_dom.createPortal)(content, document.body);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SageDeskWidget,
+  useSageDesk
+});
+//# sourceMappingURL=index.cjs.map