@sonordev/site-kit 6.5.0 → 7.0.1

package/dist/chunk-DWZGW77V.mjs

@@ -1,1669 +0,0 @@
-'use client';
-import { chatLauncherStyles } from './chunk-4U5NCKQY.mjs';
-import { GlassStyles } from './chunk-OBKS3CPP.mjs';
-import { useForm } from './chunk-42LLFAJQ.mjs';
-import { parseColor, relativeLuminance, DARK_LUMINANCE, contrastRatio } from './chunk-NYXENHD2.mjs';
-import { sonorFetch } from './chunk-3BLKKF67.mjs';
-import { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
-import ReactMarkdown from 'react-markdown';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-// src/engage/brand-color.ts
-var TEXT_CONTRAST = 4.5;
-var RESTING_TINT = 0.082;
-var UNREADABLE_BRAND_SHARE = 40;
-var WHITE = { r: 255, g: 255, b: 255 };
-var BLACK = { r: 0, g: 0, b: 0 };
-function mix(a, b, share) {
-  return {
-    r: a.r * share + b.r * (1 - share),
-    g: a.g * share + b.g * (1 - share),
-    b: a.b * share + b.b * (1 - share)
-  };
-}
-function round({ r, g, b }) {
-  const c = (v) => Math.round(Math.min(255, Math.max(0, v)));
-  return { r: c(r), g: c(g), b: c(b) };
-}
-function toHex(rgb) {
-  const { r, g, b } = round(rgb);
-  return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
-}
-function isLightColor(color) {
-  const rgb = parseColor(color);
-  if (!rgb) return false;
-  return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3 > 160;
-}
-function onBrandColor(brand) {
-  return isLightColor(brand) ? "#1a1a1a" : "white";
-}
-function rgbTriplet(color, fallback = "37, 99, 235") {
-  const rgb = parseColor(color);
-  if (!rgb) return fallback;
-  const { r, g, b } = round(rgb);
-  return `${r}, ${g}, ${b}`;
-}
-function brandTextColor(brand, panelTint) {
-  const tint = panelTint && parseColor(panelTint) || WHITE;
-  const pole = relativeLuminance(tint) < DARK_LUMINANCE ? WHITE : BLACK;
-  const rgb = parseColor(brand);
-  if (!rgb) return `color-mix(in srgb, ${brand} ${UNREADABLE_BRAND_SHARE}%, ${toHex(pole)})`;
-  const surface = relativeLuminance(mix(rgb, tint, RESTING_TINT));
-  const reads = (c) => contrastRatio(relativeLuminance(c), surface) >= TEXT_CONTRAST;
-  if (reads(rgb)) return brand;
-  let lo = 0;
-  let hi = 1;
-  for (let i = 0; i < 12; i++) {
-    const share = (lo + hi) / 2;
-    if (reads(round(mix(rgb, pole, share)))) lo = share;
-    else hi = share;
-  }
-  return toHex(mix(rgb, pole, lo));
-}
-function alpha(rgb, a) {
-  return `rgba(var(--sk-primary-rgb, ${rgb}), ${a})`;
-}
-function asString(v) {
-  return typeof v === "string" && v.trim() ? v : void 0;
-}
-function asRecord(v) {
-  return v && typeof v === "object" && !Array.isArray(v) ? v : void 0;
-}
-function isNavigable(action) {
-  return /^(https?:\/\/|\/|#|tel:|mailto:)/i.test(action.trim());
-}
-var DISPLAY_ONLY = ["heading", "section_header", "paragraph"];
-function InlineManagedForm({ slug, prefill, primaryColor, primaryRgb }) {
-  const {
-    form,
-    isLoading,
-    fetchError,
-    submitError,
-    visibleFields,
-    values,
-    errors,
-    setFieldValue,
-    submit,
-    isSubmitting,
-    isComplete
-  } = useForm(slug, { initialValues: prefill || {} });
-  const cardStyle = {
-    marginTop: 8,
-    padding: 12,
-    borderRadius: 12,
-    border: `1px solid ${alpha(primaryRgb, 0.25)}`,
-    backgroundColor: alpha(primaryRgb, 0.04)
-  };
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 13, color: "var(--sk-text-tertiary, #9ca3af)" }, children: "Loading form\u2026" }) });
-  }
-  if (fetchError || !form) {
-    return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 13, color: "var(--sk-text-tertiary, #9ca3af)" }, children: "This form is unavailable right now." }) });
-  }
-  if (isComplete) {
-    return /* @__PURE__ */ jsx("div", { style: cardStyle, role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 13.5, color: "var(--sk-text-primary, #111827)", lineHeight: 1.5 }, children: form.success_message }) });
-  }
-  const inputBase = {
-    width: "100%",
-    padding: "8px 10px",
-    borderRadius: 8,
-    // Longhand (not the `border` shorthand) so the error-state `borderColor`
-    // override doesn't mix shorthand+longhand and trigger React's style warning.
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: "var(--sk-border, #e5e7eb)",
-    backgroundColor: "var(--sk-bg, #ffffff)",
-    color: "var(--sk-text-primary, #111827)",
-    // 16px, not smaller: iOS Safari zooms the whole page into any focused
-    // field under 16px, which throws the visitor out of the chat window.
-    fontSize: 16,
-    boxSizing: "border-box",
-    outline: "none"
-  };
-  const renderField = (field) => {
-    const value = values[field.slug];
-    const strValue = value == null ? "" : String(value);
-    const err = errors[field.slug];
-    const labelEl = !field.hide_label && field.label ? /* @__PURE__ */ jsxs(
-      "label",
-      {
-        htmlFor: `echo-form-${form.id}-${field.slug}`,
-        style: { display: "block", fontSize: 12.5, fontWeight: 600, marginBottom: 4, color: "var(--sk-text-secondary, #4b5563)" },
-        children: [
-          field.label,
-          field.is_required ? /* @__PURE__ */ jsx("span", { style: { color: "var(--sk-error, #dc2626)" }, children: " *" }) : null
-        ]
-      }
-    ) : null;
-    const id = `echo-form-${form.id}-${field.slug}`;
-    const common = {
-      id,
-      placeholder: field.placeholder || (field.hide_label ? field.label : void 0),
-      "aria-invalid": !!err,
-      style: { ...inputBase, ...err ? { borderColor: "var(--sk-error, #dc2626)" } : {} }
-    };
-    let control;
-    switch (field.field_type) {
-      case "textarea":
-        control = /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            ...common,
-            rows: 3,
-            value: strValue,
-            onChange: (e) => setFieldValue(field.slug, e.target.value),
-            style: { ...common.style, resize: "vertical" }
-          }
-        );
-        break;
-      case "select":
-        control = /* @__PURE__ */ jsxs("select", { ...common, value: strValue, onChange: (e) => setFieldValue(field.slug, e.target.value), children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: field.placeholder || "Select\u2026" }),
-          (field.options || []).map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-        ] });
-        break;
-      case "radio":
-        control = /* @__PURE__ */ jsx("div", { role: "radiogroup", style: { display: "flex", flexDirection: "column", gap: 4 }, children: (field.options || []).map((opt) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, cursor: "pointer" }, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "radio",
-              name: id,
-              checked: strValue === opt.value,
-              onChange: () => setFieldValue(field.slug, opt.value)
-            }
-          ),
-          opt.label
-        ] }, opt.value)) });
-        break;
-      case "checkbox":
-        control = /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, cursor: "pointer" }, children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              checked: value === true || value === "true",
-              onChange: (e) => setFieldValue(field.slug, e.target.checked)
-            }
-          ),
-          field.placeholder || field.label
-        ] });
-        break;
-      default: {
-        const typeMap = {
-          email: "email",
-          phone: "tel",
-          tel: "tel",
-          number: "number",
-          date: "date",
-          time: "time",
-          datetime: "datetime-local"
-        };
-        control = /* @__PURE__ */ jsx(
-          "input",
-          {
-            ...common,
-            type: typeMap[field.field_type] || "text",
-            value: strValue,
-            onChange: (e) => setFieldValue(field.slug, e.target.value)
-          }
-        );
-      }
-    }
-    return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
-      field.field_type === "checkbox" ? null : labelEl,
-      control,
-      err ? /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontSize: 11.5, color: "var(--sk-error, #dc2626)" }, children: err }) : null
-    ] }, field.id || field.slug);
-  };
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      style: cardStyle,
-      onSubmit: (e) => {
-        e.preventDefault();
-        void submit();
-      },
-      children: [
-        form.name ? /* @__PURE__ */ jsx("div", { style: { fontSize: 13.5, fontWeight: 600, marginBottom: 8, color: "var(--sk-text-primary, #111827)" }, children: form.name }) : null,
-        visibleFields.map((field) => {
-          if (field.field_type === "hidden") return null;
-          if (DISPLAY_ONLY.includes(field.field_type)) {
-            return /* @__PURE__ */ jsx("p", { style: { margin: "0 0 8px", fontSize: 12.5, color: "var(--sk-text-secondary, #4b5563)" }, children: field.label }, field.id || field.slug);
-          }
-          return renderField(field);
-        }),
-        submitError ? /* @__PURE__ */ jsx("p", { role: "alert", style: { margin: "0 0 8px", fontSize: 12, color: "var(--sk-error, #dc2626)" }, children: submitError }) : null,
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            disabled: isSubmitting,
-            style: {
-              width: "100%",
-              padding: "9px 14px",
-              borderRadius: 8,
-              border: "none",
-              backgroundColor: primaryColor,
-              color: onBrandColor(primaryColor),
-              fontSize: 13.5,
-              fontWeight: 600,
-              cursor: isSubmitting ? "default" : "pointer",
-              opacity: isSubmitting ? 0.7 : 1
-            },
-            children: isSubmitting ? "Sending\u2026" : form.submit_button_text || "Submit"
-          }
-        )
-      ]
-    }
-  );
-}
-function SuggestActionChip({ action, message, primaryColor, primaryRgb, brandText, onSuggest }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => onSuggest(action, message),
-      style: {
-        padding: "6px 12px",
-        borderRadius: 16,
-        border: `1px solid ${primaryColor}`,
-        backgroundColor: alpha(primaryRgb, 0.063),
-        color: brandText,
-        fontSize: 13,
-        cursor: "pointer"
-      },
-      children: message
-    }
-  );
-}
-function EchoUiActions({ actions, primaryColor, primaryRgb, brandText, onSuggest }) {
-  if (!actions?.length) return null;
-  const chips = actions.filter((a) => a?.type === "suggest_action");
-  const forms = actions.filter((a) => a?.type === "show_form");
-  if (!chips.length && !forms.length) return null;
-  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 8 }, children: [
-    forms.map((a, i) => {
-      const slug = asString(a.data?.formSlug);
-      if (!slug) return null;
-      return /* @__PURE__ */ jsx(
-        InlineManagedForm,
-        {
-          slug,
-          prefill: asRecord(a.data?.prefill),
-          primaryColor,
-          primaryRgb
-        },
-        `form-${slug}-${i}`
-      );
-    }),
-    chips.length ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: chips.map((a, i) => {
-      const message = asString(a.data?.message);
-      const action = asString(a.data?.action);
-      const label = message || action;
-      if (!label) return null;
-      return /* @__PURE__ */ jsx(
-        SuggestActionChip,
-        {
-          action,
-          message: label,
-          primaryColor,
-          primaryRgb,
-          brandText,
-          onSuggest
-        },
-        `chip-${i}`
-      );
-    }) }) : null
-  ] });
-}
-
-// src/engage/chat-messages.ts
-function userRequestedHandoff(text) {
-  const lower = text.toLowerCase().trim();
-  const patterns = [
-    /\b(talk|speak)\s+(to|with)\s+(a\s+)?(person|human|agent|representative|someone)\b/,
-    /\b(real|live)\s+(person|human|agent|support)\b/,
-    /\bconnect\s+(me\s+)?(with|to)\s+(a\s+)?(person|human|agent)\b/,
-    /\b(need|want)\s+(to\s+)?(talk|speak)\s+(to|with)\s+(someone|a\s+person)\b/,
-    /\bhuman\s+(support|agent|help)\b/,
-    /\b(talk|speak)\s+to\s+(a\s+)?person\b/,
-    /\bget\s+(a\s+)?(person|human)\b/
-  ];
-  return patterns.some((p) => p.test(lower));
-}
-function visitorMessage(content, attachments = []) {
-  return {
-    id: `user-${Date.now()}`,
-    role: "user",
-    content,
-    timestamp: /* @__PURE__ */ new Date(),
-    ...attachments.length ? { attachments } : {}
-  };
-}
-function openingMessages(welcome, initialMessage) {
-  const opening = [{ id: "welcome", role: "assistant", content: welcome, timestamp: /* @__PURE__ */ new Date() }];
-  if (initialMessage) opening.push(visitorMessage(initialMessage));
-  return opening;
-}
-function echoReplyMessage(reply, probe) {
-  return {
-    id: `ai-${Date.now()}`,
-    role: "assistant",
-    content: reply.content,
-    timestamp: /* @__PURE__ */ new Date(),
-    ...reply.suggestions?.length ? { suggestions: reply.suggestions } : {},
-    ...reply.uiActions?.length ? { uiActions: reply.uiActions } : {},
-    ...reply.offerHandoff || userRequestedHandoff(probe) ? { offerHandoff: true } : {}
-  };
-}
-function echoErrorMessage() {
-  return {
-    id: `err-${Date.now()}`,
-    role: "assistant",
-    content: "I apologize, but I encountered an error. Would you like to speak with a team member?",
-    timestamp: /* @__PURE__ */ new Date(),
-    suggestions: ["Talk to a person", "Try again"],
-    offerHandoff: true
-  };
-}
-async function askEcho(content, deps) {
-  deps.setLoading(true);
-  try {
-    const reply = await deps.send(content);
-    deps.append(echoReplyMessage(reply, content));
-  } catch (err) {
-    deps.onError?.(err);
-    deps.append(echoErrorMessage());
-  } finally {
-    deps.setLoading(false);
-  }
-}
-function deliverOpeningMessage(pending, route) {
-  return route.signalEnabled ? route.ask(pending) : route.emitLive(pending);
-}
-function getApiConfig() {
-  const isDev = typeof process !== "undefined" && process.env?.NODE_ENV === "development";
-  const defaultApiUrl = isDev && process.env?.SONOR_API_URL ? process.env.SONOR_API_URL : "https://api.sonor.io";
-  const defaultSignalUrl = isDev && (process.env?.SONOR_SIGNAL_URL || process.env?.NEXT_PUBLIC_SIGNAL_API_URL) ? process.env.SONOR_SIGNAL_URL || process.env.NEXT_PUBLIC_SIGNAL_API_URL : "https://signal.sonor.io";
-  const apiUrl = typeof window !== "undefined" ? window.__SITE_KIT_API_URL__ || defaultApiUrl : defaultApiUrl;
-  const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ : void 0;
-  const signalUrl = typeof window !== "undefined" ? window.__SITE_KIT_SIGNAL_URL__ || defaultSignalUrl : defaultSignalUrl;
-  return { apiUrl, apiKey, signalUrl };
-}
-function generateVisitorId() {
-  const stored = typeof localStorage !== "undefined" ? localStorage.getItem("engage_visitor_id") : null;
-  if (stored) return stored;
-  const id = `visitor_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  if (typeof localStorage !== "undefined") localStorage.setItem("engage_visitor_id", id);
-  return id;
-}
-function linkifyUrls(text) {
-  return text.replace(
-    /(^|[^(\]])(https?:\/\/[^\s<>"{}|\\^`[\])]+)/g,
-    (_, before, url) => `${before}[${url}](${url})`
-  );
-}
-var BUBBLE_BG = "color-mix(in srgb, var(--sk-bg, #ffffff) 94%, transparent)";
-var HAIRLINE = "1px solid color-mix(in srgb, var(--sk-text-primary, #111827) 9%, transparent)";
-var ECHO_STYLE_HREF = "sk-echo";
-var ECHO_CSS = `
-@media print {
-  [data-sk-echo-launcher], [data-sk-echo-panel] { display: none !important; }
-}
-@media (prefers-reduced-motion: reduce) {
-  [data-sk-echo-panel] { animation: none !important; }
-}
-`;
-function staticPrimaryColor(apiFallback, hardDefault) {
-  return apiFallback || hardDefault;
-}
-function hexAlpha(rgbVar, alpha2, fallbackRgb = "37, 99, 235") {
-  return `rgba(var(${rgbVar}, ${fallbackRgb}), ${alpha2})`;
-}
-function isChatEnabled(config) {
-  return config !== null && config.is_enabled !== false;
-}
-function ChatWidget(props) {
-  const { projectId: propProjectId, apiUrl: propApiUrl } = props;
-  const [resolvedProjectId, setResolvedProjectId] = useState(propProjectId || null);
-  const projectId = propProjectId || resolvedProjectId || "";
-  const [widgetConfig, setWidgetConfig] = useState(null);
-  const baseUrl = propApiUrl || getApiConfig().apiUrl;
-  useEffect(() => {
-    if (propProjectId || resolvedProjectId) return;
-    const { apiKey } = getApiConfig();
-    if (!apiKey) return;
-    let cancelled = false;
-    sonorFetch(`${baseUrl}/api/public/seo/project-info`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((data) => {
-      if (cancelled || !data?.valid || !data?.project_id) return;
-      setResolvedProjectId(data.project_id);
-    }).catch(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [propProjectId, resolvedProjectId, baseUrl]);
-  useEffect(() => {
-    if (!projectId) return;
-    const { apiKey } = getApiConfig();
-    if (!apiKey) {
-      console.warn("[ChatWidget] No site credential found. Render SiteKitLayout in app/layout.tsx and set SONOR_API_KEY on the server.");
-      return;
-    }
-    let cancelled = false;
-    sonorFetch(`${baseUrl}/engage/widget/config?projectId=${projectId}`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((json) => {
-      if (!cancelled) setWidgetConfig(json?.data ?? null);
-    }).catch((error) => {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("[ChatWidget] Config fetch failed:", error instanceof Error ? error.message : error);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [projectId, baseUrl]);
-  if (!isChatEnabled(widgetConfig)) return null;
-  return /* @__PURE__ */ jsx(EchoChat, { ...props, projectId, widgetConfig });
-}
-function EchoChat({ projectId, widgetConfig, config, apiUrl: propApiUrl, signalUrl: propSignalUrl, suggested_questions: propSuggestedQuestions, assistant_name: propAssistantName, welcome_message: propWelcomeMessage, assistant_avatar: propAssistantAvatar }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState([]);
-  const [inputValue, setInputValue] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [availability, setAvailability] = useState(null);
-  const [sessionId, setSessionId] = useState(null);
-  const [visitorId] = useState(generateVisitorId);
-  const [agentTyping, setAgentTyping] = useState(false);
-  const [showOfflineForm, setShowOfflineForm] = useState(false);
-  const [offlineForm, setOfflineForm] = useState({ name: "", email: "", phone: "", message: "" });
-  const [offlineSubmitted, setOfflineSubmitted] = useState(false);
-  const [connectionStatus, setConnectionStatus] = useState("disconnected");
-  const [handoffOfflinePrompt, setHandoffOfflinePrompt] = useState(null);
-  const [pendingFiles, setPendingFiles] = useState([]);
-  const [lastFailedSend, setLastFailedSend] = useState(null);
-  const [showWelcome, setShowWelcome] = useState(true);
-  const [checkingAvailability, setCheckingAvailability] = useState(false);
-  const [checkingHandoff, setCheckingHandoff] = useState(false);
-  const [isHandedOff, setIsHandedOff] = useState(false);
-  useRef(null);
-  const pendingInitialMessageRef = useRef(null);
-  const apiKeyMissingWarnedRef = useRef(false);
-  const siteContextRef = useRef(null);
-  function ensureApiKey() {
-    const { apiKey } = getApiConfig();
-    if (apiKey) return apiKey;
-    if (!apiKeyMissingWarnedRef.current) {
-      apiKeyMissingWarnedRef.current = true;
-      console.warn("[ChatWidget] No site credential found. Render SiteKitLayout in app/layout.tsx and set SONOR_API_KEY on the server.");
-    }
-    return null;
-  }
-  const messagesEndRef = useRef(null);
-  const inputRef = useRef(null);
-  const socketRef = useRef(null);
-  const pollingIntervalRef = useRef(null);
-  const position = config?.position || widgetConfig?.position || "bottom-right";
-  const placement = chatLauncherStyles({
-    position: position === "bottom-left" ? "bottom-left" : "bottom-right",
-    offsetBottom: config?.offsetBottom,
-    zIndex: config?.zIndex
-  });
-  const primaryFallback = staticPrimaryColor(widgetConfig?.brand_primary || config?.buttonColor, "#2563eb");
-  const [primaryFromCssVar, setPrimaryFromCssVar] = useState(null);
-  const primaryColor = primaryFromCssVar ?? primaryFallback;
-  const primaryRgb = rgbTriplet(primaryColor);
-  useEffect(() => {
-    const cssValue = getComputedStyle(document.documentElement).getPropertyValue("--sk-primary").trim();
-    setPrimaryFromCssVar(cssValue || null);
-  }, []);
-  const onBrand = onBrandColor(primaryColor);
-  const panelRef = useRef(null);
-  const [panelTint, setPanelTint] = useState(null);
-  useLayoutEffect(() => {
-    if (!isOpen || !panelRef.current) return;
-    setPanelTint(getComputedStyle(panelRef.current).getPropertyValue("--sk-glass-t").trim() || null);
-  }, [isOpen]);
-  const brandText = brandTextColor(primaryColor, panelTint);
-  const businessName = propAssistantName || widgetConfig?.project_name || widgetConfig?.business_info?.name || "Chat with us";
-  const logoUrl = propAssistantAvatar || widgetConfig?.logo_url || null;
-  const welcomeEnabled = widgetConfig?.welcome_screen_enabled !== false;
-  const quickActions = propSuggestedQuestions ?? (Array.isArray(widgetConfig?.welcome_quick_actions) ? widgetConfig.welcome_quick_actions : []);
-  const showPoweredBy = widgetConfig?.show_powered_by !== false;
-  const welcomeMessage = propWelcomeMessage ?? widgetConfig?.initial_message ?? widgetConfig?.welcome_message ?? config?.welcomeMessage ?? "Hi! How can I help you today?";
-  const offlineHeading = widgetConfig?.offline_heading ?? "No agents available right now";
-  const offlineSubheading = handoffOfflinePrompt ?? widgetConfig?.offline_subheading ?? widgetConfig?.form_description ?? widgetConfig?.offline_message ?? config?.offlineMessage ?? "Leave us a message and we'll get back to you!";
-  const baseUrl = propApiUrl || getApiConfig().apiUrl;
-  const signalUrl = propSignalUrl || getApiConfig().signalUrl;
-  const checkAvailability = useCallback(async () => {
-    if (!projectId) return null;
-    const apiKey = ensureApiKey();
-    if (!apiKey) return null;
-    try {
-      const response = await sonorFetch(`${baseUrl}/engage/widget/availability?projectId=${projectId}`, {}, { apiKey, retries: 0 });
-      if (response.ok) {
-        const { data } = await response.json();
-        setAvailability(data);
-        return data;
-      }
-    } catch (error) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("[ChatWidget] Availability check failed:", error instanceof Error ? error.message : error);
-      }
-    }
-    return null;
-  }, [projectId, baseUrl]);
-  const initSession = useCallback(async () => {
-    const apiKey = ensureApiKey();
-    if (!apiKey) return null;
-    try {
-      const response = await sonorFetch(`${baseUrl}/engage/widget/session`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          projectId,
-          visitorId,
-          sourceUrl: typeof window !== "undefined" ? window.location.href : "",
-          userAgent: typeof navigator !== "undefined" ? navigator.userAgent : ""
-        })
-      }, { apiKey, retries: 0 });
-      if (response.ok) {
-        const { data } = await response.json();
-        const session = data.session ?? data;
-        const sid = session?.id ?? session?.session_id ?? data.id ?? data.session_id;
-        const signalEnabled = session?.chat_mode === "ai" || session?.chat_mode === "hybrid";
-        setSessionId(sid);
-        const messages2 = session?.messages ?? data.messages ?? [];
-        if (messages2.length > 0) {
-          setMessages(
-            messages2.map((m) => ({
-              id: m.id,
-              role: m.role === "visitor" ? "user" : m.role,
-              content: m.content,
-              timestamp: new Date(m.created_at),
-              agentName: m.sender_name
-            }))
-          );
-        }
-        return { id: sid, signalEnabled };
-      }
-    } catch (error) {
-      console.error("[ChatWidget] Session init failed:", error);
-    }
-    return null;
-  }, [projectId, visitorId, baseUrl]);
-  const fetchSiteContext = useCallback(async () => {
-    if (siteContextRef.current) return siteContextRef.current;
-    try {
-      const base = typeof window !== "undefined" ? window.location.origin : "";
-      const res = await fetch(`${base}/llms.txt`, { cache: "no-store" });
-      if (res.ok) {
-        const text = await res.text();
-        if (text?.trim()) siteContextRef.current = text.trim();
-      }
-    } catch {
-    }
-    return siteContextRef.current;
-  }, []);
-  const sendToSignalApi = useCallback(
-    async (content, conversationId) => {
-      const apiKey = ensureApiKey();
-      if (!apiKey) throw new Error("API key required for chat");
-      const url = `${signalUrl.replace(/\/$/, "")}/echo/public/chat`;
-      const siteContext = await fetchSiteContext();
-      const body = {
-        message: content,
-        visitorId,
-        ...conversationId ? { conversationId } : {},
-        pageUrl: typeof window !== "undefined" ? window.location.href : void 0,
-        ...siteContext ? { siteContext } : {}
-      };
-      const res = await sonorFetch(url, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(body)
-      }, { apiKey, retries: 0 });
-      const json = await res.json();
-      if (!res.ok) {
-        throw new Error(json?.error?.message || json?.message || `Signal API error: ${res.status}`);
-      }
-      const data = json?.data ?? json;
-      const aiContent = data?.content ?? data?.response ?? data?.message ?? "I'm sorry, I couldn't process that.";
-      const suggestions = data?.suggestions;
-      const offerHandoff = data?.offerHandoff === true || data?.offer_handoff === true;
-      const uiActions = Array.isArray(data?.uiActions) ? data.uiActions.filter((a) => a && typeof a === "object" && typeof a.type === "string" && a.data && typeof a.data === "object") : void 0;
-      const newConversationId = data?.conversationId ?? conversationId;
-      return { content: aiContent, suggestions, offerHandoff, uiActions, conversationId: newConversationId };
-    },
-    [signalUrl, visitorId, fetchSiteContext]
-  );
-  const sendTurnToEcho = useCallback(
-    (content, conversationId) => askEcho(content, {
-      send: (text) => sendToSignalApi(text, conversationId),
-      append: (message) => setMessages((prev) => [...prev, message]),
-      setLoading: setIsLoading,
-      onError: (err) => console.error("[ChatWidget] Signal API error:", err)
-    }),
-    [sendToSignalApi]
-  );
-  const handleSocketMessage = useCallback((data) => {
-    switch (data.type || data.event) {
-      case "message": {
-        const role = data.role === "visitor" ? "user" : data.role === "ai" ? "assistant" : data.role;
-        const newMessage = {
-          id: data.id || `msg-${Date.now()}`,
-          role,
-          content: data.content ?? "",
-          timestamp: /* @__PURE__ */ new Date(),
-          agentName: data.agentName,
-          ...data.attachments?.length ? { attachments: data.attachments } : {},
-          ...data.suggestions?.length ? { suggestions: data.suggestions } : {}
-        };
-        setMessages((prev) => [...prev, newMessage]);
-        if (role === "assistant" || role === "agent") {
-          setAgentTyping(false);
-          setIsLoading(false);
-        }
-        break;
-      }
-      case "agent:joined":
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: `system-${Date.now()}`,
-            role: "system",
-            content: data.agentName ? `${data.agentName} has joined the chat.` : "An agent has joined the chat.",
-            timestamp: /* @__PURE__ */ new Date()
-          }
-        ]);
-        break;
-      case "typing":
-        setAgentTyping(data.isTyping);
-        break;
-      case "handoff:initiated":
-        setMessages((prev) => [
-          ...prev,
-          { id: `system-${Date.now()}`, role: "system", content: data.message || "Connecting you with a team member...", timestamp: /* @__PURE__ */ new Date() }
-        ]);
-        break;
-      case "chat:closed":
-        setMessages((prev) => [
-          ...prev,
-          { id: `system-${Date.now()}`, role: "system", content: data.message || "This chat has been closed.", timestamp: /* @__PURE__ */ new Date() }
-        ]);
-        break;
-    }
-  }, []);
-  const connectSocket = useCallback(
-    async (currentSessionId) => {
-      if (socketRef.current?.connected) return;
-      if (socketRef.current) {
-        socketRef.current.disconnect();
-        socketRef.current = null;
-      }
-      const { createSocket } = await import('./socket-loader-JA2DI2RT.mjs');
-      const namespaceUrl = `${baseUrl.replace(/\/$/, "")}/engage/chat`;
-      const socket = await createSocket(namespaceUrl, {
-        query: { projectId, visitorId, sessionId: currentSessionId },
-        transports: ["websocket", "polling"],
-        // Auto-reconnect config
-        reconnection: true,
-        reconnectionAttempts: 10,
-        reconnectionDelay: 1e3,
-        reconnectionDelayMax: 1e4,
-        timeout: 15e3
-      });
-      socket.on("connect", () => {
-        setConnectionStatus("connected");
-        console.log("[ChatWidget] Socket.io connected");
-        if (currentSessionId) {
-          const apiKey = ensureApiKey();
-          if (apiKey) {
-            sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 }).then((res) => res.ok ? res.json() : null).then((json) => {
-              const data = json?.data ?? json;
-              if (Array.isArray(data) && data.length) {
-                setMessages((prev) => {
-                  const byId = new Map(prev.map((m) => [m.id, m]));
-                  data.forEach(
-                    (m) => byId.set(m.id, {
-                      id: m.id,
-                      role: m.role === "visitor" ? "user" : m.role,
-                      content: m.content,
-                      timestamp: new Date(m.created_at),
-                      agentName: m.sender_name,
-                      attachments: m.attachments
-                    })
-                  );
-                  return Array.from(byId.values()).sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-                });
-              }
-            }).catch((err) => console.warn("[ChatWidget] Refetch messages on reconnect failed", err));
-          }
-        }
-        if (lastFailedSend) {
-          socket.emit("visitor:message", {
-            content: lastFailedSend.content,
-            attachments: lastFailedSend.attachments?.length ? lastFailedSend.attachments : void 0
-          });
-          setLastFailedSend(null);
-          setMessages((prev) => prev.filter((m) => !m.sendFailed));
-          setIsLoading(true);
-        }
-      });
-      socket.on("message", (data) => handleSocketMessage({ type: "message", ...data }));
-      socket.on("agent:joined", (data) => handleSocketMessage({ type: "agent:joined", ...data }));
-      socket.on("typing", (data) => handleSocketMessage({ type: "typing", ...data }));
-      socket.on("handoff:initiated", (data) => handleSocketMessage({ type: "handoff:initiated", ...data }));
-      socket.on("chat:closed", (data) => handleSocketMessage({ type: "chat:closed", ...data }));
-      socket.on("disconnect", (reason) => {
-        setConnectionStatus("disconnected");
-        console.log("[ChatWidget] Socket disconnected:", reason);
-      });
-      socket.on("reconnect_attempt", (attempt) => {
-        setConnectionStatus("connecting");
-        console.log(`[ChatWidget] Reconnect attempt #${attempt}`);
-      });
-      socket.on("reconnect_failed", () => {
-        console.warn("[ChatWidget] All reconnect attempts failed, falling back to polling");
-        if (isOpen && currentSessionId) startPolling(currentSessionId);
-      });
-      socket.on("connect_error", (err) => {
-        console.error("[ChatWidget] Socket connect error:", err?.message || err, { baseUrl: namespaceUrl, projectId, visitorId });
-        setConnectionStatus("connecting");
-      });
-      socketRef.current = socket;
-    },
-    [projectId, visitorId, baseUrl, isOpen, handleSocketMessage, lastFailedSend]
-  );
-  const startPolling = useCallback(
-    (currentSessionId) => {
-      if (pollingIntervalRef.current) return;
-      pollingIntervalRef.current = setInterval(async () => {
-        try {
-          const apiKey = ensureApiKey();
-          if (!apiKey) return;
-          const response = await sonorFetch(`${baseUrl}/engage/widget/messages?sessionId=${currentSessionId}`, {}, { apiKey, retries: 0 });
-          if (response.ok) {
-            const { data } = await response.json();
-            setMessages((prev) => {
-              const existingIds = new Set(prev.map((m) => m.id));
-              const newMessages = data.filter((m) => !existingIds.has(m.id));
-              if (newMessages.length > 0) {
-                return [
-                  ...prev,
-                  ...newMessages.map((m) => ({
-                    id: m.id,
-                    role: m.role === "visitor" ? "user" : m.role,
-                    content: m.content,
-                    timestamp: new Date(m.created_at),
-                    agentName: m.sender_name
-                  }))
-                ];
-              }
-              return prev;
-            });
-          }
-        } catch (error) {
-          console.error("[ChatWidget] Polling failed:", error);
-        }
-      }, 3e3);
-    },
-    [baseUrl]
-  );
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, agentTyping]);
-  useEffect(() => {
-    if (isOpen && !showWelcome && inputRef.current) inputRef.current.focus();
-  }, [isOpen, showWelcome]);
-  useEffect(() => {
-    checkAvailability();
-    const interval = setInterval(checkAvailability, 6e4);
-    return () => {
-      clearInterval(interval);
-      if (socketRef.current) {
-        socketRef.current.disconnect();
-        socketRef.current = null;
-      }
-    };
-  }, [checkAvailability]);
-  useEffect(() => {
-    if (isOpen && !showWelcome && !checkingAvailability && !showOfflineForm && !sessionId) {
-      initSession().then(async (result) => {
-        if (!result?.id) return;
-        const { id, signalEnabled } = result;
-        const pending = pendingInitialMessageRef.current;
-        if (pending) {
-          pendingInitialMessageRef.current = null;
-        }
-        if (!signalEnabled) {
-          setConnectionStatus("connecting");
-          await connectSocket(id);
-        }
-        if (pending) {
-          await deliverOpeningMessage(pending, {
-            signalEnabled,
-            ask: (content) => sendTurnToEcho(content, id),
-            emitLive: async (content) => {
-              const waitForSocket = () => new Promise((resolve) => {
-                const check = (attempts = 0) => {
-                  if (socketRef.current?.connected || attempts > 20) {
-                    resolve();
-                    return;
-                  }
-                  setTimeout(() => check(attempts + 1), 150);
-                };
-                check();
-              });
-              await waitForSocket();
-              if (socketRef.current?.connected) {
-                socketRef.current.emit("visitor:message", { content });
-              }
-            }
-          });
-        }
-      });
-    }
-    return () => {
-      if (pollingIntervalRef.current) clearInterval(pollingIntervalRef.current);
-    };
-  }, [isOpen, showWelcome, checkingAvailability, showOfflineForm, sessionId, initSession, connectSocket, sendTurnToEcho]);
-  const handleToggle = useCallback(() => {
-    setIsOpen((prev) => !prev);
-  }, []);
-  const startChat = useCallback(
-    async (initialMessage) => {
-      setShowWelcome(false);
-      const beginChatSession = () => {
-        setMessages(openingMessages(welcomeMessage, initialMessage));
-        if (initialMessage) {
-          pendingInitialMessageRef.current = initialMessage;
-          setIsLoading(true);
-        }
-      };
-      if (widgetConfig?.signal_enabled) {
-        beginChatSession();
-        return;
-      }
-      setCheckingAvailability(true);
-      const firstCheck = await checkAvailability();
-      if (firstCheck?.available && firstCheck.agentsOnline > 0) {
-        setCheckingAvailability(false);
-        beginChatSession();
-        return;
-      }
-      await new Promise((resolve) => setTimeout(resolve, 5e3));
-      const secondCheck = await checkAvailability();
-      setCheckingAvailability(false);
-      if (secondCheck?.available && secondCheck.agentsOnline > 0) {
-        beginChatSession();
-      } else {
-        setShowOfflineForm(true);
-      }
-    },
-    [widgetConfig?.signal_enabled, welcomeMessage, checkAvailability]
-  );
-  const uploadWidgetFile = useCallback(
-    async (file) => {
-      if (!sessionId || !visitorId) return null;
-      const apiKey = ensureApiKey();
-      if (!apiKey) return null;
-      const form = new FormData();
-      form.append("file", file);
-      form.append("sessionId", sessionId);
-      form.append("visitorId", visitorId);
-      const res = await sonorFetch(`${baseUrl}/engage/widget/upload`, {
-        method: "POST",
-        body: form
-      }, { apiKey, retries: 0 });
-      if (!res.ok) throw new Error("Upload failed");
-      const json = await res.json();
-      const d = json?.data ?? json;
-      return d?.url ? { name: d.name ?? file.name, url: d.url, size: d.size, mimeType: d.mimeType } : null;
-    },
-    [sessionId, visitorId, baseUrl]
-  );
-  const handleSubmit = useCallback(
-    async (e) => {
-      e.preventDefault();
-      const hasText = !!inputValue.trim();
-      const hasFiles = pendingFiles.length > 0;
-      if (!hasText && !hasFiles || isLoading) return;
-      const content = inputValue.trim() || "";
-      let attachments = [];
-      if (pendingFiles.length) {
-        try {
-          for (const file of pendingFiles) {
-            const att = await uploadWidgetFile(file);
-            if (att) attachments.push(att);
-          }
-          setPendingFiles([]);
-        } catch (err) {
-          console.error("[ChatWidget] File upload failed", err);
-          setMessages((prev) => [...prev, { id: `err-${Date.now()}`, role: "assistant", content: "Failed to upload file. Please try again.", timestamp: /* @__PURE__ */ new Date() }]);
-          return;
-        }
-      }
-      const userMessage = visitorMessage(content, attachments);
-      setMessages((prev) => [...prev, userMessage]);
-      setInputValue("");
-      setIsLoading(true);
-      if (widgetConfig?.signal_enabled && !isHandedOff && hasText) {
-        await sendTurnToEcho(content, sessionId);
-        return;
-      }
-      const socket = socketRef.current;
-      if (socket?.connected) {
-        socket.emit("visitor:message", { content: userMessage.content, attachments: attachments.length ? attachments : void 0 });
-        setLastFailedSend(null);
-        return;
-      }
-      setLastFailedSend({ content: userMessage.content, attachments });
-      setTimeout(() => {
-        if (!socketRef.current?.connected) {
-          setMessages((prev) => [
-            ...prev,
-            { id: `error-${Date.now()}`, role: "system", content: "Reconnecting...", timestamp: /* @__PURE__ */ new Date(), sendFailed: true }
-          ]);
-          setIsLoading(false);
-        }
-      }, 3e3);
-    },
-    [inputValue, isLoading, pendingFiles, uploadWidgetFile, widgetConfig?.signal_enabled, isHandedOff, sendTurnToEcho, sessionId]
-  );
-  const sendEchoText = useCallback(
-    async (text) => {
-      const content = text.trim();
-      if (!content || isLoading) return;
-      setMessages((prev) => [...prev, visitorMessage(content)]);
-      await sendTurnToEcho(content, sessionId);
-    },
-    [isLoading, sessionId, sendTurnToEcho]
-  );
-  const handleSuggestAction = useCallback(
-    (action, message) => {
-      const a = (action || "").trim();
-      if (a && isNavigable(a)) {
-        if (typeof window !== "undefined") {
-          if (/^https?:\/\//i.test(a)) window.open(a, "_blank", "noopener,noreferrer");
-          else window.location.href = a;
-        }
-        return;
-      }
-      if (message?.trim()) void sendEchoText(message);
-    },
-    [sendEchoText]
-  );
-  const retryFailedSend = useCallback(() => {
-    if (!lastFailedSend || !sessionId) return;
-    const socket = socketRef.current;
-    if (socket?.connected) {
-      socket.emit("visitor:message", { content: lastFailedSend.content, attachments: lastFailedSend.attachments?.length ? lastFailedSend.attachments : void 0 });
-      setLastFailedSend(null);
-      setMessages((prev) => prev.filter((m) => !m.sendFailed));
-      setIsLoading(true);
-    } else {
-      connectSocket(sessionId);
-    }
-  }, [lastFailedSend, sessionId, connectSocket]);
-  const requestHandoff = useCallback(async () => {
-    if (!sessionId) return;
-    const apiKey = ensureApiKey();
-    if (!apiKey) return;
-    setCheckingHandoff(true);
-    try {
-      const res = await sonorFetch(`${baseUrl}/engage/widget/handoff`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ sessionId })
-      }, { apiKey, retries: 0 });
-      const json = await res.json();
-      const available = json?.data?.available === true;
-      setCheckingHandoff(false);
-      if (available) {
-        setIsHandedOff(true);
-        setConnectionStatus("connecting");
-        await connectSocket(sessionId);
-        setMessages((prev) => [
-          ...prev,
-          { id: `handoff-${Date.now()}`, role: "system", content: "Connecting you with a team member. Please hold on!", timestamp: /* @__PURE__ */ new Date() }
-        ]);
-      } else {
-        setHandoffOfflinePrompt(widgetConfig?.offline_subheading ?? "Nobody is online right now. Leave your details and we'll get back to you.");
-        setShowOfflineForm(true);
-        setMessages((prev) => [
-          ...prev,
-          { id: `handoff-offline-${Date.now()}`, role: "system", content: offlineHeading, timestamp: /* @__PURE__ */ new Date() }
-        ]);
-      }
-    } catch (error) {
-      setCheckingHandoff(false);
-      console.error("[ChatWidget] Handoff request failed:", error);
-    }
-  }, [sessionId, baseUrl, widgetConfig, offlineHeading, connectSocket]);
-  const [offlineError, setOfflineError] = useState(null);
-  const handleOfflineSubmit = useCallback(
-    async (e) => {
-      e.preventDefault();
-      if (!offlineForm.name || !offlineForm.email || !offlineForm.message) return;
-      const apiKey = ensureApiKey();
-      if (!apiKey) return;
-      setIsLoading(true);
-      setOfflineError(null);
-      try {
-        const response = await sonorFetch(`${baseUrl}/engage/widget/offline-form`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            projectId,
-            visitorId,
-            ...offlineForm,
-            pageUrl: typeof window !== "undefined" ? window.location.href : "",
-            ...widgetConfig?.offlineFormSlug && { formSlug: widgetConfig.offlineFormSlug }
-          })
-        }, { apiKey, retries: 0 });
-        if (response.ok) {
-          setOfflineSubmitted(true);
-        } else {
-          const errorBody = await response.text().catch(() => "");
-          console.error(`[ChatWidget] Offline form returned ${response.status}:`, errorBody);
-          setOfflineError("Something went wrong. Please try again.");
-        }
-      } catch (error) {
-        console.error("[ChatWidget] Offline form submission failed:", error);
-        setOfflineError("Unable to send message. Please check your connection and try again.");
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [offlineForm, projectId, visitorId, baseUrl, widgetConfig]
-  );
-  const handleKeyDown = useCallback((e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  }, [handleSubmit]);
-  const handleTyping = useCallback(() => {
-    const socket = socketRef.current;
-    if (socket?.connected) {
-      socket.emit("visitor:typing", { isTyping: true });
-      setTimeout(() => {
-        if (socketRef.current?.connected) socketRef.current.emit("visitor:typing", { isTyping: false });
-      }, 2e3);
-    }
-  }, []);
-  const statusLabel = (() => {
-    if (showOfflineForm) return null;
-    if (checkingAvailability) return { dot: "#f59e0b", text: "Checking for a team member..." };
-    if (widgetConfig?.signal_enabled) return { dot: null, text: "Echo Intelligent Site Assistant" };
-    if (availability && availability.agentsOnline > 0) return { dot: "#22c55e", text: "Online" };
-    return { dot: "var(--sk-text-tertiary, #9ca3af)", text: "We'll respond soon" };
-  })();
-  const ChatButton = /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      "data-sk-echo-launcher": true,
-      className: "sk-glass sk-glass--brand",
-      onClick: handleToggle,
-      "aria-label": isOpen ? "Close chat" : "Open chat",
-      style: {
-        position: "fixed",
-        ...placement.launcher,
-        width: "60px",
-        height: "60px",
-        borderRadius: "50%",
-        ["--sk-glass-brand"]: primaryColor,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer",
-        transition: "transform 0.2s, bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1)",
-        zIndex: placement.zIndex.launcher
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.transform = "scale(1.05)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.transform = "scale(1)";
-      },
-      children: isOpen ? /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ] }) : /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
-    }
-  );
-  const Header = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        padding: "16px 18px 14px",
-        background: `linear-gradient(180deg, color-mix(in srgb, ${primaryColor} 16%, transparent), transparent)`,
-        borderBottom: "1px solid color-mix(in srgb, var(--sk-text-primary, #111827) 8%, transparent)",
-        color: "var(--sk-text-primary, #111827)",
-        display: "flex",
-        alignItems: "center",
-        gap: 12
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: 40,
-              height: 40,
-              borderRadius: "50%",
-              backgroundColor: primaryColor,
-              color: onBrand,
-              boxShadow: "inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              overflow: "hidden",
-              flexShrink: 0
-            },
-            children: logoUrl ? /* @__PURE__ */ jsx("img", { src: logoUrl, alt: "", style: { width: 28, height: 28, objectFit: "contain", filter: isLightColor(primaryColor) ? "none" : "brightness(0) invert(1)" } }) : /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 16, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: showOfflineForm ? offlineHeading : businessName }),
-          statusLabel && /* @__PURE__ */ jsxs("div", { style: { fontSize: 13, color: "var(--sk-text-secondary, #6b7280)", display: "flex", alignItems: "center", gap: 6, marginTop: 2 }, children: [
-            statusLabel.dot && /* @__PURE__ */ jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", backgroundColor: statusLabel.dot, flexShrink: 0 } }),
-            statusLabel.text
-          ] })
-        ] }),
-        connectionStatus === "connecting" && !showWelcome && !showOfflineForm && /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: "var(--sk-text-secondary, #6b7280)", display: "flex", alignItems: "center", gap: 4 }, children: [
-          /* @__PURE__ */ jsx("span", { style: { animation: "chatDot 1s infinite ease-in-out" }, children: "\u25CF" }),
-          "Connecting"
-        ] })
-      ]
-    }
-  );
-  const WelcomeScreen = /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", padding: 20, gap: 16 }, children: [
-    /* @__PURE__ */ jsx("div", { style: { textAlign: "center", paddingTop: 8 }, children: /* @__PURE__ */ jsx("div", { style: { fontSize: 15, color: "var(--sk-text-primary, #374151)", lineHeight: 1.5 }, children: welcomeMessage }) }),
-    quickActions.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: quickActions.map((action, i) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => startChat(action),
-        style: {
-          padding: "12px 16px",
-          borderRadius: 12,
-          border: `1px solid ${hexAlpha("--sk-primary-rgb", 0.2, primaryRgb)}`,
-          backgroundColor: hexAlpha("--sk-primary-rgb", 0.031, primaryRgb),
-          color: brandText,
-          fontSize: 14,
-          cursor: "pointer",
-          textAlign: "left",
-          transition: "background-color 0.15s, border-color 0.15s",
-          lineHeight: 1.4
-        },
-        onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = hexAlpha("--sk-primary-rgb", 0.082, primaryRgb);
-          e.currentTarget.style.borderColor = hexAlpha("--sk-primary-rgb", 0.333, primaryRgb);
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.backgroundColor = hexAlpha("--sk-primary-rgb", 0.031, primaryRgb);
-          e.currentTarget.style.borderColor = hexAlpha("--sk-primary-rgb", 0.2, primaryRgb);
-        },
-        children: action
-      },
-      i
-    )) }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => startChat(),
-        style: {
-          padding: "12px 20px",
-          borderRadius: 12,
-          border: "none",
-          backgroundColor: primaryColor,
-          color: onBrand,
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: "pointer",
-          marginTop: "auto"
-        },
-        children: "Start a conversation"
-      }
-    ),
-    widgetConfig?.business_info?.phone && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", fontSize: 13, color: "var(--sk-text-secondary, #6b7280)" }, children: [
-      "Or call us at",
-      " ",
-      /* @__PURE__ */ jsx("a", { href: `tel:${widgetConfig.business_info.phone}`, style: { color: brandText, textDecoration: "none", fontWeight: 500 }, children: widgetConfig.business_info.phone })
-    ] })
-  ] });
-  const OfflineFormView = /* @__PURE__ */ jsx("div", { style: { padding: 20, flex: 1, overflowY: "auto" }, children: offlineSubmitted ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 20 }, children: [
-    /* @__PURE__ */ jsx("div", { style: { width: 56, height: 56, borderRadius: "50%", backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb), display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }, children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: brandText, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
-    /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600, color: "var(--sk-text-primary, #111827)" }, children: "Message Sent!" }),
-    /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "var(--sk-text-secondary, #6b7280)", fontSize: 14 }, children: offlineSubheading })
-  ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleOfflineSubmit, children: [
-    /* @__PURE__ */ jsx("p", { style: { margin: "0 0 16px", color: "var(--sk-text-secondary, #6b7280)", fontSize: 14 }, children: offlineSubheading }),
-    [
-      { name: "name", type: "text", placeholder: "Your name *", required: true },
-      { name: "email", type: "email", placeholder: "Your email *", required: true },
-      { name: "phone", type: "tel", placeholder: "Phone (optional)", required: false }
-    ].map((field) => /* @__PURE__ */ jsx("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: field.type,
-        placeholder: field.placeholder,
-        value: offlineForm[field.name],
-        onChange: (e) => setOfflineForm((prev) => ({ ...prev, [field.name]: e.target.value })),
-        required: field.required,
-        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--sk-border, #e5e7eb)", fontSize: 16, outline: "none", boxSizing: "border-box" },
-        onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
-        onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
-      }
-    ) }, field.name)),
-    /* @__PURE__ */ jsx("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        placeholder: "How can we help? *",
-        value: offlineForm.message,
-        onChange: (e) => setOfflineForm((prev) => ({ ...prev, message: e.target.value })),
-        required: true,
-        rows: 4,
-        style: { width: "100%", padding: "10px 12px", borderRadius: 8, border: "1px solid var(--sk-border, #e5e7eb)", fontSize: 16, outline: "none", resize: "vertical", boxSizing: "border-box" },
-        onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
-        onBlur: (e) => e.currentTarget.style.borderColor = "var(--sk-border, #e5e7eb)"
-      }
-    ) }),
-    offlineError && /* @__PURE__ */ jsx("div", { style: { padding: "8px 12px", borderRadius: 8, backgroundColor: "var(--sk-error-bg, #fef2f2)", border: "1px solid var(--sk-error, #fecaca)", color: "var(--sk-error, #dc2626)", fontSize: 13, marginBottom: 12 }, children: offlineError }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "submit",
-        disabled: isLoading,
-        style: {
-          width: "100%",
-          padding: "12px",
-          borderRadius: 8,
-          border: "none",
-          backgroundColor: primaryColor,
-          color: onBrand,
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: isLoading ? "wait" : "pointer",
-          opacity: isLoading ? 0.7 : 1
-        },
-        children: isLoading ? "Sending..." : "Send Message"
-      }
-    )
-  ] }) });
-  const CheckingScreen = /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 32, gap: 20, textAlign: "center" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: 64, height: 64 }, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            inset: 0,
-            borderRadius: "50%",
-            backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb),
-            animation: "checkPulse 2s infinite ease-out"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            inset: 8,
-            borderRadius: "50%",
-            backgroundColor: hexAlpha("--sk-primary-rgb", 0.145, primaryRgb),
-            animation: "checkPulse 2s infinite ease-out 0.4s"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            inset: 16,
-            borderRadius: "50%",
-            backgroundColor: primaryColor,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: onBrand, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
-            /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "7", r: "4" }),
-            /* @__PURE__ */ jsx("line", { x1: "20", y1: "8", x2: "20", y2: "14" }),
-            /* @__PURE__ */ jsx("line", { x1: "23", y1: "11", x2: "17", y2: "11" })
-          ] })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 600, color: "var(--sk-text-primary, #111827)", marginBottom: 6 }, children: checkingHandoff ? "Looking for online support" : "Checking for a team member" }),
-      /* @__PURE__ */ jsxs("div", { style: { fontSize: 14, color: "var(--sk-text-secondary, #6b7280)", lineHeight: 1.5 }, children: [
-        "One moment please",
-        /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", width: 20 }, children: /* @__PURE__ */ jsx("span", { style: { animation: "checkDots 1.5s infinite steps(4, end)" }, children: "..." }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { width: "80%", height: 3, backgroundColor: "var(--sk-border, #e5e7eb)", borderRadius: 2, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          width: "100%",
-          height: "100%",
-          backgroundColor: primaryColor,
-          borderRadius: 2,
-          animation: "checkProgress 5s linear forwards",
-          transformOrigin: "left"
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--sk-text-tertiary, #9ca3af)" }, children: "This usually takes just a few seconds" })
-  ] });
-  const MessagesView = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12, backgroundColor: "transparent" },
-        children: [
-          messages.map((message) => {
-            const isAssistant = message.role === "assistant" || message.role === "agent";
-            return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: message.role === "user" ? "flex-end" : "flex-start" }, children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  maxWidth: "80%",
-                  padding: message.role === "system" ? "8px 12px" : isAssistant ? "12px 16px" : "10px 14px",
-                  borderRadius: message.role === "user" ? "18px 18px 6px 18px" : message.role === "system" ? "10px" : "18px 18px 18px 6px",
-                  // Bubbles on glass stay near-opaque: the glass behind them
-                  // is for depth, never for the text to read against.
-                  backgroundColor: message.role === "user" ? primaryColor : message.role === "system" ? "color-mix(in srgb, var(--sk-text-primary, #111827) 7%, transparent)" : BUBBLE_BG,
-                  color: message.role === "user" ? onBrand : message.role === "system" ? "var(--sk-text-secondary, #6b7280)" : "var(--sk-text-primary, #111827)",
-                  border: message.role === "user" || message.role === "system" ? "none" : HAIRLINE,
-                  boxShadow: message.role === "system" ? "none" : message.role === "user" ? "inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent), 0 1px 2px rgba(0,0,0,0.10)" : "0 1px 2px rgba(0,0,0,0.06)",
-                  fontSize: message.role === "system" ? 13 : 14,
-                  fontStyle: message.role === "system" ? "italic" : "normal",
-                  lineHeight: isAssistant ? 1.6 : 1.5,
-                  whiteSpace: isAssistant ? "normal" : "pre-wrap",
-                  wordBreak: "break-word",
-                  textAlign: isAssistant ? "left" : void 0
-                },
-                children: [
-                  message.agentName && message.role === "agent" && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, opacity: 0.6, marginBottom: 4 }, children: message.agentName }),
-                  isAssistant ? /* @__PURE__ */ jsx("div", { className: "chatMessageContent", children: /* @__PURE__ */ jsx(
-                    ReactMarkdown,
-                    {
-                      components: {
-                        p: ({ children }) => /* @__PURE__ */ jsx("p", { style: { margin: "0 0 8px", lineHeight: 1.6 }, children }),
-                        strong: ({ children }) => /* @__PURE__ */ jsx("strong", { style: { fontWeight: 600 }, children }),
-                        ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "4px 0 8px", paddingLeft: 20 }, children }),
-                        ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "4px 0 8px", paddingLeft: 20 }, children }),
-                        li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { marginBottom: 4 }, children }),
-                        h3: ({ children }) => /* @__PURE__ */ jsx("h3", { style: { margin: "12px 0 6px", fontSize: 15, fontWeight: 600 }, children }),
-                        h4: ({ children }) => /* @__PURE__ */ jsx("h4", { style: { margin: "8px 0 4px", fontSize: 14, fontWeight: 600 }, children }),
-                        a: ({ href, children }) => /* @__PURE__ */ jsx(
-                          "a",
-                          {
-                            href,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            style: {
-                              display: "inline-block",
-                              marginTop: 6,
-                              marginRight: 6,
-                              padding: "8px 14px",
-                              borderRadius: 8,
-                              backgroundColor: hexAlpha("--sk-primary-rgb", 0.082, primaryRgb),
-                              color: brandText,
-                              fontWeight: 600,
-                              fontSize: 13,
-                              textDecoration: "none",
-                              border: `1px solid ${hexAlpha("--sk-primary-rgb", 0.25, primaryRgb)}`,
-                              boxShadow: "0 1px 2px rgba(0,0,0,0.06)",
-                              transition: "background-color 0.15s, transform 0.1s"
-                            },
-                            onMouseOver: (e) => {
-                              e.currentTarget.style.backgroundColor = hexAlpha("--sk-primary-rgb", 0.145, primaryRgb);
-                              e.currentTarget.style.transform = "translateY(-1px)";
-                            },
-                            onMouseOut: (e) => {
-                              e.currentTarget.style.backgroundColor = hexAlpha("--sk-primary-rgb", 0.082, primaryRgb);
-                              e.currentTarget.style.transform = "translateY(0)";
-                            },
-                            children
-                          }
-                        )
-                      },
-                      children: linkifyUrls(message.content)
-                    }
-                  ) }) : message.content,
-                  message.attachments?.length ? /* @__PURE__ */ jsx("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 6 }, children: message.attachments.map(
-                    (att, i) => att.mimeType?.startsWith("image/") ? /* @__PURE__ */ jsx("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { display: "block" }, children: /* @__PURE__ */ jsx("img", { src: att.url, alt: att.name, style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }) }, i) : /* @__PURE__ */ jsxs("a", { href: att.url, target: "_blank", rel: "noopener noreferrer", style: { fontSize: 13, wordBreak: "break-all", display: "flex", alignItems: "center", gap: 6 }, children: [
-                      /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }),
-                      att.name
-                    ] }, i)
-                  ) }) : null,
-                  message.suggestions?.length ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }, children: message.suggestions.map((s, i) => /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => {
-                        if (/talk\s+to\s+(a\s+)?person/i.test(s)) {
-                          requestHandoff();
-                        } else {
-                          setInputValue(s);
-                          inputRef.current?.focus();
-                        }
-                      },
-                      style: {
-                        padding: "6px 12px",
-                        borderRadius: 16,
-                        border: `1px solid ${primaryColor}`,
-                        backgroundColor: hexAlpha("--sk-primary-rgb", 0.063, primaryRgb),
-                        color: brandText,
-                        fontSize: 13,
-                        cursor: "pointer"
-                      },
-                      children: s
-                    },
-                    i
-                  )) }) : null,
-                  message.uiActions?.length ? /* @__PURE__ */ jsx(
-                    EchoUiActions,
-                    {
-                      actions: message.uiActions,
-                      primaryColor,
-                      primaryRgb,
-                      brandText,
-                      onSuggest: handleSuggestAction
-                    }
-                  ) : null,
-                  message.sendFailed && lastFailedSend && /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: retryFailedSend,
-                      style: { padding: "6px 12px", borderRadius: 6, border: "1px solid var(--sk-error, #dc2626)", backgroundColor: "var(--sk-error-bg, #fef2f2)", color: "var(--sk-error, #dc2626)", fontSize: 13, cursor: "pointer" },
-                      children: "Retry send"
-                    }
-                  ) }),
-                  widgetConfig?.signal_enabled && message.role === "assistant" && widgetConfig?.handoff_enabled !== false && message.offerHandoff && !message.suggestions?.some((s) => /talk\s+to\s+(a\s+)?person/i.test(s)) && message.id === messages.filter((m) => m.role === "assistant").slice(-1)[0]?.id && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: requestHandoff,
-                      style: {
-                        display: "inline-block",
-                        marginTop: 8,
-                        padding: "6px 12px",
-                        borderRadius: 6,
-                        border: `1px solid ${primaryColor}`,
-                        backgroundColor: "transparent",
-                        color: brandText,
-                        fontSize: 13,
-                        cursor: "pointer"
-                      },
-                      children: "Talk to a person"
-                    }
-                  )
-                ]
-              }
-            ) }, message.id);
-          }),
-          (isLoading || agentTyping) && /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                padding: "10px 14px",
-                borderRadius: "18px 18px 18px 6px",
-                backgroundColor: BUBBLE_BG,
-                border: HAIRLINE,
-                boxShadow: "0 1px 2px rgba(0,0,0,0.06)",
-                display: "flex",
-                gap: 4,
-                color: "var(--sk-text-tertiary, #9ca3af)"
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0s" }, children: "\u25CF" }),
-                /* @__PURE__ */ jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.2s" }, children: "\u25CF" }),
-                /* @__PURE__ */ jsx("span", { style: { animation: "chatDot 1.4s infinite ease-in-out", animationDelay: "0.4s" }, children: "\u25CF" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-        ]
-      }
-    ),
-    lastFailedSend && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px", backgroundColor: "var(--sk-error-bg, #fef2f2)", borderTop: "1px solid var(--sk-error, #fecaca)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
-      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--sk-error, #dc2626)" }, children: "Failed to send" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: retryFailedSend, style: { padding: "4px 10px", borderRadius: 6, border: "1px solid var(--sk-error, #dc2626)", background: "var(--sk-bg, #fff)", color: "var(--sk-error, #dc2626)", fontSize: 12, cursor: "pointer" }, children: "Retry" })
-    ] }),
-    /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, style: { padding: "10px 12px 12px", backgroundColor: "transparent" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: inputRef,
-          type: "text",
-          value: inputValue,
-          onChange: (e) => {
-            setInputValue(e.target.value);
-            handleTyping();
-          },
-          onKeyDown: handleKeyDown,
-          placeholder: "Type a message...",
-          disabled: isLoading,
-          style: {
-            flex: 1,
-            minWidth: 0,
-            padding: "10px 16px",
-            borderRadius: 24,
-            border: HAIRLINE,
-            backgroundColor: BUBBLE_BG,
-            color: "var(--sk-text-primary, #111827)",
-            // 16px: iOS Safari zooms the page into any focused field under 16px.
-            fontSize: 16,
-            outline: "none",
-            boxShadow: "inset 0 1px 2px rgba(0,0,0,0.04)",
-            transition: "border-color 0.2s"
-          },
-          onFocus: (e) => e.currentTarget.style.borderColor = primaryColor,
-          onBlur: (e) => e.currentTarget.style.borderColor = ""
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "submit",
-          disabled: !inputValue.trim() || isLoading,
-          style: {
-            width: 40,
-            height: 40,
-            borderRadius: "50%",
-            border: "none",
-            backgroundColor: (inputValue.trim() || pendingFiles.length) && !isLoading ? primaryColor : "var(--sk-border, #e5e7eb)",
-            color: (inputValue.trim() || pendingFiles.length) && !isLoading ? onBrand : "white",
-            cursor: inputValue.trim() && !isLoading ? "pointer" : "not-allowed",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            transition: "background-color 0.2s",
-            flexShrink: 0
-          },
-          children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
-        }
-      )
-    ] }) })
-  ] });
-  const ChatPopup = isOpen && /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: panelRef,
-      "data-sk-echo-panel": true,
-      className: "sk-glass sk-glass--panel",
-      style: {
-        position: "fixed",
-        ...placement.popup,
-        width: "380px",
-        maxWidth: "calc(100vw - 40px)",
-        height: "520px",
-        color: "var(--sk-text-primary, #111827)",
-        borderRadius: "24px",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-        zIndex: placement.zIndex.popup,
-        transformOrigin: position === "bottom-left" ? "bottom left" : "bottom right",
-        animation: "chatGlassIn 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.05)"
-      },
-      children: [
-        Header,
-        checkingAvailability || checkingHandoff ? CheckingScreen : showOfflineForm ? OfflineFormView : showWelcome && welcomeEnabled && messages.length === 0 ? WelcomeScreen : MessagesView,
-        showPoweredBy && /* @__PURE__ */ jsxs("div", { style: { padding: "0 0 8px", textAlign: "center", fontSize: 11, color: "var(--sk-text-tertiary, #9ca3af)", backgroundColor: "transparent" }, children: [
-          "Powered by",
-          " ",
-          /* @__PURE__ */ jsx("a", { href: "https://sonor.io", target: "_blank", rel: "noopener noreferrer", style: { color: "var(--sk-text-secondary, #6b7280)", textDecoration: "none", fontWeight: 500 }, children: "Sonor" })
-        ] }),
-        /* @__PURE__ */ jsx("style", { children: `
-        @keyframes chatGlassIn {
-          from { opacity: 0; transform: translateY(12px) scale(0.94); }
-          to { opacity: 1; transform: translateY(0) scale(1); }
-        }
-        @keyframes chatDot {
-          0%, 80%, 100% { opacity: 0.3; }
-          40% { opacity: 1; }
-        }
-        @keyframes checkPulse {
-          0% { transform: scale(1); opacity: 1; }
-          100% { transform: scale(1.8); opacity: 0; }
-        }
-        @keyframes checkDots {
-          0% { content: ''; }
-          25% { content: '.'; }
-          50% { content: '..'; }
-          75% { content: '...'; }
-        }
-        @keyframes checkProgress {
-          from { transform: scaleX(0); }
-          to { transform: scaleX(1); }
-        }
-        .chatMessageContent p:first-child { margin-top: 0; }
-        .chatMessageContent p:last-child { margin-bottom: 0; }
-      ` })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(GlassStyles, {}),
-    /* @__PURE__ */ jsx("style", { href: ECHO_STYLE_HREF, precedence: "default", children: ECHO_CSS }),
-    ChatPopup,
-    ChatButton
-  ] });
-}
-
-export { ChatWidget, EchoChat, isChatEnabled };
-//# sourceMappingURL=chunk-DWZGW77V.mjs.map
-//# sourceMappingURL=chunk-DWZGW77V.mjs.map