framepexls-ui-lib 2.1.0 → 2.2.1

package/dist/SupportChatWidget.js

@@ -0,0 +1,696 @@
+"use strict";
+"use client";
+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);
+var SupportChatWidget_exports = {};
+__export(SupportChatWidget_exports, {
+  default: () => SupportChatWidget
+});
+module.exports = __toCommonJS(SupportChatWidget_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ActionIconButton = __toESM(require("./ActionIconButton"));
+var import_AvatarSquare = __toESM(require("./AvatarSquare"));
+var import_Badge = __toESM(require("./Badge"));
+var import_Button = __toESM(require("./Button"));
+var import_Textarea = __toESM(require("./Textarea"));
+var import_TimeAgo = __toESM(require("./TimeAgo"));
+var import_Tooltip = __toESM(require("./Tooltip"));
+var import_iconos = require("./iconos");
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+function createId(prefix) {
+  return `${prefix}_${Math.random().toString(16).slice(2)}_${Date.now().toString(16)}`;
+}
+function Dots() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-current opacity-45" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-current opacity-45 [animation-delay:150ms]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-current opacity-45 [animation-delay:300ms]" })
+  ] });
+}
+function iconForContact(kind) {
+  if (kind === "phone") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.PhoneIcon, { "aria-hidden": true, className: "h-4 w-4" });
+  if (kind === "email") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.EnvelopeIcon, { "aria-hidden": true, className: "h-4 w-4" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChatCenteredDotsIcon, { "aria-hidden": true, className: "h-4 w-4" });
+}
+function statusTone(mode, liveAvailable) {
+  if (mode === "live") return liveAvailable ? "emerald" : "amber";
+  if (mode === "offline") return "amber";
+  return "sky";
+}
+function ratingText(rating, ratingCount) {
+  if (typeof rating !== "number" || Number.isNaN(rating)) return null;
+  const formatted = rating.toFixed(rating % 1 === 0 ? 0 : 1);
+  if (!ratingCount) return formatted;
+  return `${formatted} (${ratingCount})`;
+}
+function roleLabel(role) {
+  if (role === "visitor") return "Visitante";
+  if (role === "agent") return "Agente";
+  if (role === "bot") return "Bot";
+  return "Sistema";
+}
+function formatTranscriptDate(value) {
+  if (!value) return "";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleString("es-MX", {
+    dateStyle: "medium",
+    timeStyle: "short"
+  });
+}
+function escapeHtml(value) {
+  return String(value != null ? value : "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function safeFileName(value) {
+  return String(value || "conversacion").trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 80) || "conversacion";
+}
+function downloadFile(fileName, content, mimeType) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+function buildTextTranscript(messages, title) {
+  const lines = [
+    title,
+    `Generado: ${formatTranscriptDate(/* @__PURE__ */ new Date())}`,
+    "",
+    ...messages.map((message) => {
+      const at = formatTranscriptDate(message.createdAt);
+      const prefix = at ? `[${at}] ${roleLabel(message.role)}` : roleLabel(message.role);
+      return `${prefix}: ${message.content}`;
+    }),
+    ""
+  ];
+  return lines.join("\n");
+}
+function buildHtmlTranscript(messages, title, brandName) {
+  const body = messages.map((message) => {
+    var _a;
+    const mine = message.role === "visitor";
+    const system = message.role === "system";
+    const side = mine ? "right" : system ? "center" : "left";
+    const at = formatTranscriptDate(message.createdAt);
+    const actor = ((_a = message.actor) == null ? void 0 : _a.name) || roleLabel(message.role);
+    return `
+      <article class="msg ${side}">
+        <div class="bubble">
+          <div class="meta">${escapeHtml(actor)}${at ? ` \xB7 ${escapeHtml(at)}` : ""}</div>
+          <div class="content">${escapeHtml(message.content).replace(/\n/g, "<br />")}</div>
+        </div>
+      </article>
+    `;
+  }).join("\n");
+  return `<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${escapeHtml(title)}</title>
+  <style>
+    :root { color-scheme: light; --bg: #f6f8fb; --card: #ffffff; --fg: #111827; --muted: #64748b; --line: #e2e8f0; --primary: #155dfc; }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: linear-gradient(180deg, #f8fafc, var(--bg)); color: var(--fg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    main { width: min(860px, calc(100vw - 32px)); margin: 40px auto; }
+    header { margin-bottom: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 18px 50px rgba(15, 23, 42, .08); }
+    .eyebrow { margin: 0 0 8px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
+    h1 { margin: 0; font-size: 28px; line-height: 1.15; }
+    .sub { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
+    .thread { display: flex; flex-direction: column; gap: 12px; }
+    .msg { display: flex; }
+    .msg.left { justify-content: flex-start; }
+    .msg.right { justify-content: flex-end; }
+    .msg.center { justify-content: center; }
+    .bubble { max-width: 72%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
+    .right .bubble { background: #eaf1ff; border-color: #c8d9ff; }
+    .center .bubble { max-width: 84%; background: #fff7ed; border-color: #fed7aa; text-align: center; }
+    .meta { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
+    .content { font-size: 14px; line-height: 1.55; white-space: normal; }
+    footer { margin-top: 24px; color: var(--muted); font-size: 12px; text-align: center; }
+    @media (max-width: 640px) { main { margin-block: 18px; } .bubble { max-width: 88%; } h1 { font-size: 23px; } }
+  </style>
+</head>
+<body>
+  <main>
+    <header>
+      <p class="eyebrow">${escapeHtml(brandName)}</p>
+      <h1>${escapeHtml(title)}</h1>
+      <p class="sub">Transcripcion completa generada el ${escapeHtml(formatTranscriptDate(/* @__PURE__ */ new Date()))}</p>
+    </header>
+    <section class="thread">${body}</section>
+    <footer>Exportado desde ${escapeHtml(brandName)}</footer>
+  </main>
+</body>
+</html>`;
+}
+function SupportChatWidget({
+  mode = "bot",
+  brandName = "Kontestalo",
+  assistant,
+  agent,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  messages: messagesProp,
+  defaultMessages,
+  onMessagesChange,
+  onSendMessage,
+  onRequestLive,
+  onSelectService,
+  onQuickReply,
+  transcript,
+  serviceSuggestions,
+  suggestedReplies,
+  contactActions,
+  knowledgeSignals,
+  businessHoursLabel,
+  rating,
+  ratingCount,
+  liveAllowed = false,
+  liveAvailable = false,
+  allowOfflineMessages = true,
+  disabled = false,
+  unreadCount = 0,
+  position = "bottom-right",
+  zIndex = 1280,
+  className,
+  panelClassName,
+  labels
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
+  const [openState, setOpenState] = import_react.default.useState(defaultOpen);
+  const open = openProp != null ? openProp : openState;
+  const setOpen = (next) => {
+    if (openProp === void 0) setOpenState(next);
+    onOpenChange == null ? void 0 : onOpenChange(next);
+  };
+  const [messagesState, setMessagesState] = import_react.default.useState(() => defaultMessages != null ? defaultMessages : []);
+  const messages = messagesProp != null ? messagesProp : messagesState;
+  const messagesRef = import_react.default.useRef(messages);
+  import_react.default.useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
+  const setMessages = (next) => {
+    if (typeof next === "function") {
+      const fn = next;
+      if (messagesProp === void 0) {
+        setMessagesState((prev) => {
+          const computed2 = fn(prev);
+          messagesRef.current = computed2;
+          onMessagesChange == null ? void 0 : onMessagesChange(computed2);
+          return computed2;
+        });
+        return;
+      }
+      const computed = fn(messagesRef.current);
+      messagesRef.current = computed;
+      onMessagesChange == null ? void 0 : onMessagesChange(computed);
+      return;
+    }
+    messagesRef.current = next;
+    if (messagesProp === void 0) setMessagesState(next);
+    onMessagesChange == null ? void 0 : onMessagesChange(next);
+  };
+  const [text, setText] = import_react.default.useState("");
+  const [sending, setSending] = import_react.default.useState(false);
+  const [requestingLive, setRequestingLive] = import_react.default.useState(false);
+  const endRef = import_react.default.useRef(null);
+  const textareaRef = import_react.default.useRef(null);
+  const labelTrigger = (_a = labels == null ? void 0 : labels.trigger) != null ? _a : "Abrir chat";
+  const labelTitle = (_b = labels == null ? void 0 : labels.title) != null ? _b : brandName;
+  const labelSubtitle = (_c = labels == null ? void 0 : labels.subtitle) != null ? _c : "Asistencia para visitantes";
+  const labelBotStatus = (_d = labels == null ? void 0 : labels.botStatus) != null ? _d : "Bot activo";
+  const labelLiveStatus = (_e = labels == null ? void 0 : labels.liveStatus) != null ? _e : "Atencion en vivo";
+  const labelOfflineStatus = (_f = labels == null ? void 0 : labels.offlineStatus) != null ? _f : "Fuera de horario";
+  const labelComposer = (_g = labels == null ? void 0 : labels.composerPlaceholder) != null ? _g : "Escribe tu pregunta...";
+  const labelOfflineComposer = (_h = labels == null ? void 0 : labels.offlineComposerPlaceholder) != null ? _h : "Dejanos tu mensaje...";
+  const labelSend = (_i = labels == null ? void 0 : labels.send) != null ? _i : "Enviar";
+  const labelClose = (_j = labels == null ? void 0 : labels.close) != null ? _j : "Cerrar";
+  const labelRequestLive = (_k = labels == null ? void 0 : labels.requestLive) != null ? _k : "Hablar con una persona";
+  const labelLiveUnavailable = (_l = labels == null ? void 0 : labels.liveUnavailable) != null ? _l : "Atencion en vivo no disponible";
+  const labelServicesTitle = (_m = labels == null ? void 0 : labels.servicesTitle) != null ? _m : "Servicios sugeridos";
+  const labelSuggestedTitle = (_n = labels == null ? void 0 : labels.suggestedTitle) != null ? _n : "Preguntas rapidas";
+  const labelContactTitle = (_o = labels == null ? void 0 : labels.contactTitle) != null ? _o : "Contacto";
+  const labelSaveTranscript = (_p = labels == null ? void 0 : labels.saveTranscript) != null ? _p : "Guardar conversacion";
+  const labelSaveRecentTranscript = (_q = labels == null ? void 0 : labels.saveRecentTranscript) != null ? _q : "Guardar extracto";
+  const labelSaveFullTranscript = (_r = labels == null ? void 0 : labels.saveFullTranscript) != null ? _r : "Guardar HTML";
+  const labelRating = (_s = labels == null ? void 0 : labels.ratingLabel) != null ? _s : "Calificacion";
+  const labelPoweredBy = (_t = labels == null ? void 0 : labels.poweredBy) != null ? _t : "Kontestalo";
+  const labelWelcomeTitle = (_v = labels == null ? void 0 : labels.defaultWelcomeTitle) != null ? _v : `Hola, soy ${(_u = assistant == null ? void 0 : assistant.name) != null ? _u : brandName}`;
+  const labelWelcomeMessage = (_w = labels == null ? void 0 : labels.defaultWelcomeMessage) != null ? _w : "Puedo ayudarte con servicios, horarios, contacto y dudas frecuentes.";
+  const labelError = (_x = labels == null ? void 0 : labels.errorMessage) != null ? _x : "No se pudo enviar el mensaje. Intenta de nuevo.";
+  const currentActor = mode === "live" && agent ? agent : {
+    name: (_y = assistant == null ? void 0 : assistant.name) != null ? _y : brandName,
+    subtitle: (_z = assistant == null ? void 0 : assistant.subtitle) != null ? _z : labelSubtitle,
+    avatarUrl: (_A = assistant == null ? void 0 : assistant.avatarUrl) != null ? _A : null,
+    initials: (_B = assistant == null ? void 0 : assistant.initials) != null ? _B : "KO",
+    color: (_C = assistant == null ? void 0 : assistant.color) != null ? _C : "accent"
+  };
+  const positionClass = position === "inline" ? "relative" : position === "bottom-left" ? "fixed bottom-5 left-5" : "fixed bottom-5 right-5";
+  const panelPositionClass = position === "inline" ? "relative" : position === "bottom-left" ? "fixed bottom-20 left-5" : "fixed bottom-20 right-5";
+  const canRequestLive = Boolean(liveAllowed && liveAvailable && mode !== "live" && onRequestLive);
+  const composerDisabled = disabled || sending || !allowOfflineMessages && mode === "offline";
+  const statusLabel = mode === "live" ? labelLiveStatus : mode === "offline" ? labelOfflineStatus : labelBotStatus;
+  const ratingResolved = ratingText(rating, ratingCount);
+  const transcriptEnabled = (_D = transcript == null ? void 0 : transcript.enabled) != null ? _D : true;
+  const transcriptFullAllowed = Boolean(transcript == null ? void 0 : transcript.fullHistoryAllowed);
+  import_react.default.useEffect(() => {
+    if (!open) return;
+    window.setTimeout(() => {
+      var _a2;
+      return (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
+    }, 0);
+  }, [open]);
+  import_react.default.useEffect(() => {
+    var _a2;
+    if (!open) return;
+    (_a2 = endRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [open, messages.length, sending]);
+  const appendBotResult = (result) => {
+    if (!result) return;
+    if (typeof result === "string") {
+      const replyMessage = {
+        id: createId("bot"),
+        role: mode === "live" ? "agent" : "bot",
+        content: result,
+        createdAt: /* @__PURE__ */ new Date(),
+        state: "complete",
+        actor: currentActor
+      };
+      setMessages((prev) => [...prev, replyMessage].slice(-200));
+      return;
+    }
+    if (Array.isArray(result)) {
+      setMessages((prev) => [...prev, ...result].slice(-200));
+      return;
+    }
+    const next = [];
+    if (result.reply) {
+      next.push({
+        id: createId("bot"),
+        role: mode === "live" ? "agent" : "bot",
+        content: result.reply,
+        createdAt: /* @__PURE__ */ new Date(),
+        state: "complete",
+        actor: currentActor
+      });
+    }
+    if (Array.isArray(result.messages)) next.push(...result.messages);
+    if (next.length) setMessages((prev) => [...prev, ...next].slice(-200));
+  };
+  const send = async (raw) => {
+    const trimmed = String(raw != null ? raw : text).trim();
+    if (!trimmed || composerDisabled) return;
+    const visitorMessage = {
+      id: createId("visitor"),
+      role: "visitor",
+      content: trimmed,
+      createdAt: /* @__PURE__ */ new Date(),
+      state: "sending"
+    };
+    setText("");
+    setSending(true);
+    const base = [...messagesRef.current, visitorMessage];
+    setMessages(base);
+    try {
+      const result = await (onSendMessage == null ? void 0 : onSendMessage({ text: trimmed, messages: base, mode }));
+      setMessages((prev) => prev.map((m) => m.id === visitorMessage.id ? { ...m, state: "complete" } : m));
+      appendBotResult(result);
+    } catch {
+      const errorMessage = {
+        id: createId("system"),
+        role: "system",
+        content: labelError,
+        createdAt: /* @__PURE__ */ new Date(),
+        state: "error"
+      };
+      setMessages((prev) => [
+        ...prev.map((m) => m.id === visitorMessage.id ? { ...m, state: "error" } : m),
+        errorMessage
+      ].slice(-200));
+    } finally {
+      setSending(false);
+    }
+  };
+  const requestLive = async () => {
+    if (!canRequestLive || requestingLive) return;
+    setRequestingLive(true);
+    try {
+      await (onRequestLive == null ? void 0 : onRequestLive());
+    } finally {
+      setRequestingLive(false);
+    }
+  };
+  const saveTranscript = async () => {
+    var _a2, _b2, _c2, _d2;
+    const config = transcript != null ? transcript : {};
+    if (config.enabled === false) return;
+    const allMessages = messagesRef.current.filter((message) => {
+      var _a3;
+      return (_a3 = message.content) == null ? void 0 : _a3.trim();
+    });
+    if (!allMessages.length) return;
+    const fullAllowed = Boolean(config.fullHistoryAllowed);
+    const mode2 = fullAllowed ? "full-html" : "recent-text";
+    const limit = Math.max(1, (_a2 = config.recentMessageLimit) != null ? _a2 : 8);
+    const selectedMessages = fullAllowed ? allMessages : allMessages.slice(-limit);
+    const title = (_b2 = config.title) != null ? _b2 : `${brandName} - conversacion`;
+    const baseFileName = safeFileName((_c2 = config.fileName) != null ? _c2 : title);
+    const content = fullAllowed ? buildHtmlTranscript(selectedMessages, title, brandName) : buildTextTranscript(selectedMessages, `${title} (extracto final)`);
+    const fileName = `${baseFileName}.${fullAllowed ? "html" : "txt"}`;
+    const mimeType = fullAllowed ? "text/html;charset=utf-8" : "text/plain;charset=utf-8";
+    const payload = {
+      mode: mode2,
+      messages: selectedMessages,
+      fileName,
+      content,
+      mimeType
+    };
+    await ((_d2 = config.onSave) == null ? void 0 : _d2.call(config, payload));
+    downloadFile(fileName, content, mimeType);
+  };
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, { content: labelTrigger, placement: position === "bottom-left" ? "right" : "left", offset: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx(positionClass, className), style: position === "inline" ? void 0 : { zIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type: "button",
+      "aria-label": labelTrigger,
+      onClick: () => setOpen(true),
+      className: cx(
+        "relative grid h-14 w-14 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--ring)_28%,var(--border))]",
+        "bg-[var(--primary)] text-[var(--primary-foreground)] shadow-xl transition hover:brightness-95 active:scale-[0.98]"
+      ),
+      children: [
+        mode === "live" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.HeadsetIcon, { "aria-hidden": true, className: "h-6 w-6" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChatCenteredDotsIcon, { "aria-hidden": true, className: "h-6 w-6" }),
+        unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -right-1.5 -top-1.5 grid h-5 min-w-5 place-items-center rounded-full bg-[var(--danger)] px-1 text-[0.65rem] font-semibold text-white shadow ring-2 ring-[var(--card)]", children: unreadCount > 99 ? "99+" : unreadCount }) : null
+      ]
+    }
+  ) }) });
+  const renderService = (service) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelectService == null ? void 0 : onSelectService(service),
+      className: "w-full rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)] p-3 text-left shadow-sm transition hover:bg-[color-mix(in_oklab,var(--surface)_72%,transparent)]",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-3", children: [
+        service.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { size: 42, src: service.imageUrl, alt: service.title, radiusClass: "rounded-xl", className: "ring-0" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid h-[42px] w-[42px] shrink-0 place-items-center rounded-xl bg-[color-mix(in_oklab,var(--primary)_12%,var(--card))] text-[var(--primary)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.StorefrontIcon, { "aria-hidden": true, className: "h-5 w-5" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-semibold text-[var(--foreground)]", children: service.title }),
+            service.priceLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 text-xs font-semibold text-[var(--primary)]", children: service.priceLabel }) : null
+          ] }),
+          service.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 line-clamp-2 text-xs leading-5 text-[var(--muted)]", children: service.description }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
+            service.meta ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-[0.6875rem] font-medium text-[var(--muted)]", children: service.meta }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
+            service.ctaLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 text-[0.6875rem] font-semibold text-[var(--primary)]", children: service.ctaLabel }) : null
+          ] })
+        ] })
+      ] })
+    },
+    service.id
+  );
+  const welcome = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] p-4 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_AvatarSquare.default,
+        {
+          size: 42,
+          src: (_E = currentActor.avatarUrl) != null ? _E : void 0,
+          alt: currentActor.name,
+          initials: currentActor.initials,
+          color: currentActor.color,
+          radiusClass: "rounded-xl",
+          className: "ring-0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: labelWelcomeTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-sm leading-6 text-[var(--muted)]", children: labelWelcomeMessage })
+      ] })
+    ] }) }),
+    businessHoursLabel || ratingResolved || (knowledgeSignals == null ? void 0 : knowledgeSignals.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+      businessHoursLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Badge.default, { tone: mode === "offline" ? "amber" : "emerald", size: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ClockIcon, { "aria-hidden": true, className: "h-3.5 w-3.5" }),
+        businessHoursLabel
+      ] }) : null,
+      ratingResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Badge.default, { tone: "amber", size: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.StarIcon, { "aria-hidden": true, filled: true, className: "h-3.5 w-3.5" }),
+        labelRating,
+        ": ",
+        ratingResolved
+      ] }) : null,
+      knowledgeSignals == null ? void 0 : knowledgeSignals.slice(0, 4).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Badge.default, { tone: "slate", size: "sm", children: [
+        item.label,
+        item.value ? `: ${item.value}` : ""
+      ] }, item.id))
+    ] }) : null,
+    (suggestedReplies == null ? void 0 : suggestedReplies.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--muted)]", children: labelSuggestedTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-2", children: suggestedReplies.slice(0, 6).map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onQuickReply == null ? void 0 : onQuickReply(reply);
+            void send(reply);
+          },
+          className: "rounded-full border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-xs font-semibold text-[var(--foreground)] shadow-sm transition hover:bg-[color-mix(in_oklab,var(--surface)_72%,transparent)]",
+          children: reply
+        },
+        reply
+      )) })
+    ] }) : null,
+    (serviceSuggestions == null ? void 0 : serviceSuggestions.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--muted)]", children: labelServicesTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: serviceSuggestions.slice(0, 4).map(renderService) })
+    ] }) : null
+  ] });
+  const messageList = messages.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
+    messages.map((message, index) => {
+      var _a2, _b2, _c2, _d2, _e2, _f2;
+      const mine = message.role === "visitor";
+      const system = message.role === "system";
+      const actor = (_a2 = message.actor) != null ? _a2 : message.role === "agent" ? agent : currentActor;
+      const prev = messages[index - 1];
+      const showAvatar = !mine && !system && (prev == null ? void 0 : prev.role) !== message.role;
+      const bubbleClass = system ? "mx-auto max-w-[92%] border-[color-mix(in_oklab,var(--warning)_28%,var(--border))] bg-[color-mix(in_oklab,var(--warning)_10%,transparent)] text-center text-[var(--foreground)]" : mine ? "border-[color-mix(in_oklab,var(--ring)_35%,var(--border))] bg-[color-mix(in_oklab,var(--primary)_14%,transparent)] text-[var(--foreground)]" : "border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] text-[var(--foreground)]";
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("flex items-end gap-2", mine ? "justify-end" : system ? "justify-center" : "justify-start"), children: [
+        !mine && !system ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("shrink-0", showAvatar ? "" : "opacity-0"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_AvatarSquare.default,
+          {
+            size: 28,
+            src: (_b2 = actor == null ? void 0 : actor.avatarUrl) != null ? _b2 : void 0,
+            alt: (_c2 = actor == null ? void 0 : actor.name) != null ? _c2 : brandName,
+            initials: actor == null ? void 0 : actor.initials,
+            color: actor == null ? void 0 : actor.color,
+            radiusClass: "rounded-lg",
+            className: "ring-0"
+          }
+        ) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("max-w-[82%]", mine ? "items-end" : "items-start"), children: [
+          !mine && !system && showAvatar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 px-2 text-[0.6875rem] font-semibold text-[var(--muted)]", children: (_d2 = actor == null ? void 0 : actor.name) != null ? _d2 : brandName }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("rounded-2xl border px-3.5 py-2.5 text-sm leading-6 shadow-sm", bubbleClass, message.state === "error" ? "border-[color-mix(in_oklab,var(--danger)_35%,var(--border))]" : ""), children: [
+            message.state === "typing" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dots, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "whitespace-pre-wrap", children: message.content }),
+            ((_e2 = message.suggestedReplies) == null ? void 0 : _e2.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: message.suggestedReplies.slice(0, 4).map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onQuickReply == null ? void 0 : onQuickReply(reply);
+                  void send(reply);
+                },
+                className: "rounded-full border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-xs font-semibold text-[var(--foreground)] shadow-sm transition hover:bg-[color-mix(in_oklab,var(--surface)_72%,transparent)]",
+                children: reply
+              },
+              `${message.id}:${reply}`
+            )) }) : null,
+            ((_f2 = message.serviceSuggestions) == null ? void 0 : _f2.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 space-y-2", children: message.serviceSuggestions.slice(0, 3).map(renderService) }) : null
+          ] }),
+          message.createdAt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("mt-1 px-2 text-[0.6875rem] text-[var(--muted)]", mine ? "text-right" : "text-left"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeAgo.default, { iso: message.createdAt }) }) : null
+        ] })
+      ] }, message.id);
+    }),
+    sending ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_AvatarSquare.default,
+        {
+          size: 28,
+          src: (_F = currentActor.avatarUrl) != null ? _F : void 0,
+          alt: currentActor.name,
+          initials: currentActor.initials,
+          color: currentActor.color,
+          radiusClass: "rounded-lg",
+          className: "ring-0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] px-3.5 py-2.5 text-sm text-[var(--muted)] shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dots, {}) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: endRef })
+  ] }) : welcome;
+  const panel = open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cx(
+        panelPositionClass,
+        "flex h-[min(680px,calc(100vh-7rem))] w-[min(400px,calc(100vw-2rem))] flex-col overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-2xl",
+        panelClassName
+      ),
+      style: position === "inline" ? void 0 : { zIndex },
+      role: "dialog",
+      "aria-label": labelTitle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_96%,transparent)] px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_AvatarSquare.default,
+              {
+                size: 42,
+                src: (_G = currentActor.avatarUrl) != null ? _G : void 0,
+                alt: currentActor.name,
+                initials: currentActor.initials,
+                color: currentActor.color,
+                radiusClass: "rounded-xl",
+                className: "ring-0"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-semibold text-[var(--foreground)]", children: labelTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: statusTone(mode, liveAvailable), size: "sm", children: statusLabel }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionIconButton.default, { title: labelClose, size: "sm", onClick: () => setOpen(false), className: "border border-[var(--border)] bg-[var(--card)] shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CloseIcon, { "aria-hidden": true, className: "h-4 w-4" }) })
+        ] }) }),
+        canRequestLive || liveAllowed && !liveAvailable && mode !== "live" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_65%,transparent)] px-4 py-3", children: canRequestLive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Button.default,
+          {
+            size: "sm",
+            variant: "secondary",
+            block: true,
+            loading: requestingLive,
+            onClick: () => void requestLive(),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.HeadsetIcon, { "aria-hidden": true, className: "h-4 w-4" }),
+            children: labelRequestLive
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 text-xs font-medium text-[var(--muted)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ClockIcon, { "aria-hidden": true, className: "h-4 w-4" }),
+          labelLiveUnavailable
+        ] }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto bg-[linear-gradient(180deg,color-mix(in_oklab,var(--surface)_48%,transparent),transparent_34%)] px-4 py-4", children: messageList }),
+        (contactActions == null ? void 0 : contactActions.length) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border-t border-[var(--border)] bg-[color-mix(in_oklab,var(--surface)_58%,transparent)] px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-[var(--muted)]", children: labelContactTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-2 overflow-x-auto pb-1", children: contactActions.map((action) => {
+            const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              iconForContact(action.kind),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: action.label })
+            ] });
+            const classNameAction = "inline-flex h-9 shrink-0 items-center gap-2 rounded-xl border border-[var(--border)] bg-[var(--card)] px-3 text-xs font-semibold text-[var(--foreground)] shadow-sm transition hover:bg-[color-mix(in_oklab,var(--surface)_72%,transparent)]";
+            if (action.href) {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: action.href, className: classNameAction, onClick: () => {
+                var _a2;
+                return (_a2 = action.onSelect) == null ? void 0 : _a2.call(action);
+              }, children: content }, action.id);
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: classNameAction, onClick: () => {
+              var _a2;
+              return (_a2 = action.onSelect) == null ? void 0 : _a2.call(action);
+            }, children: content }, action.id);
+          }) })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border-t border-[var(--border)] bg-[var(--card)] px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-end gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Textarea.default,
+              {
+                ref: textareaRef,
+                value: text,
+                onChange: (e) => setText(e.currentTarget.value),
+                placeholder: mode === "offline" ? labelOfflineComposer : labelComposer,
+                disabled: composerDisabled,
+                rows: 2,
+                className: "max-h-28 min-h-[44px] flex-1 resize-none rounded-xl",
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    void send();
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ActionIconButton.default,
+              {
+                title: labelSend,
+                size: "lg",
+                color: "blue",
+                disabled: !text.trim() || composerDisabled,
+                loading: sending,
+                onClick: () => void send(),
+                className: "border border-[color-mix(in_oklab,var(--ring)_30%,var(--border))] bg-[var(--primary)] text-[var(--primary-foreground)] shadow-sm",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.PaperPlaneIcon, { "aria-hidden": true, className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-2 flex items-center justify-between gap-3 text-[0.6875rem] text-[var(--muted)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 items-center gap-1.5 truncate", children: [
+              mode === "live" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.HeadsetIcon, { "aria-hidden": true, className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.RobotIcon, { "aria-hidden": true, className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: (_H = currentActor.subtitle) != null ? _H : labelSubtitle })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
+              transcriptEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void saveTranscript(),
+                  disabled: !messages.length,
+                  title: labelSaveTranscript,
+                  className: "inline-flex items-center gap-1.5 rounded-lg px-1.5 py-1 font-semibold text-[var(--muted)] transition hover:bg-[color-mix(in_oklab,var(--surface)_72%,transparent)] hover:text-[var(--foreground)] disabled:cursor-not-allowed disabled:opacity-45",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.DownloadSimpleIcon, { "aria-hidden": true, className: "h-3.5 w-3.5" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: transcriptFullAllowed ? labelSaveFullTranscript : labelSaveRecentTranscript })
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: labelPoweredBy })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) : null;
+  if (position === "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, children: open ? panel : trigger });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: open ? panel : trigger });
+}