@convai/web-widget 0.1.3 → 0.2.0-beta.0

package/chunks/lightbox-Dxfdw3VU.js

@@ -0,0 +1,683 @@
+const PREVIEW_TIMEOUT_MS = 12e3;
+const MAX_CARDS_PER_MESSAGE = 6;
+const SVG_OPEN = '<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">';
+const GLYPH_PATHS = {
+  document: '<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/>',
+  email: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>',
+  phone: '<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.8 2z"/>',
+  sms: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
+  ftp: '<path d="M4 17V7l8 5 8-5v10"/><path d="M4 7h16"/>',
+  zoom: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3M11 8v6M8 11h6"/>',
+  close: '<path d="M18 6 6 18M6 6l12 12"/>',
+  external: '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="M15 3h6v6M10 14 21 3"/>'
+};
+function glyph(name) {
+  return `${SVG_OPEN}${GLYPH_PATHS[name]}</svg>`;
+}
+const UNITLESS = /* @__PURE__ */ new Set([
+  "opacity",
+  "zIndex",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "lineHeight",
+  "fontWeight",
+  "order",
+  "WebkitLineClamp"
+]);
+function toCssText(style) {
+  return Object.entries(style).map(([k, v]) => {
+    const prop = k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+    const val = typeof v === "number" && !UNITLESS.has(k) ? `${v}px` : String(v);
+    return `${prop}: ${val};`;
+  }).join(" ");
+}
+const RADIUS = 8;
+const ACCENT = "#10b981";
+const chrome = (pct) => `color-mix(in srgb, currentColor ${pct}%, transparent)`;
+const presentationStyles = {
+  link: {
+    color: ACCENT,
+    textDecoration: "underline",
+    wordBreak: "break-all",
+    borderRadius: 2
+  },
+  /** Applied on focus-visible by the renderer; kept here so both agree. */
+  linkFocus: { outline: `2px solid ${chrome(60)}`, outlineOffset: 2 },
+  blocked: { opacity: 0.75, textDecoration: "underline dotted", cursor: "help" },
+  card: {
+    display: "block",
+    position: "relative",
+    marginTop: 6,
+    maxWidth: 320,
+    aspectRatio: "16 / 10",
+    borderRadius: RADIUS,
+    overflow: "hidden",
+    background: chrome(6),
+    boxShadow: `inset 0 0 0 1px ${chrome(10)}`
+  },
+  cardButton: { cursor: "zoom-in" },
+  zoom: {
+    position: "absolute",
+    right: 6,
+    bottom: 6,
+    width: 24,
+    height: 24,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+    background: "rgba(0,0,0,.55)",
+    color: "#fff",
+    fontSize: 14,
+    pointerEvents: "none"
+  },
+  media: {
+    display: "block",
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    borderRadius: RADIUS,
+    transition: "opacity .18s ease"
+  },
+  videoMedia: { objectFit: "contain" },
+  skeleton: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: RADIUS,
+    background: chrome(8),
+    backgroundImage: `linear-gradient(90deg, transparent, ${chrome(12)}, transparent)`,
+    backgroundSize: "200% 100%",
+    animation: "convai-preview-shimmer 1.4s ease-in-out infinite"
+  },
+  caption: {
+    display: "block",
+    marginTop: 4,
+    fontSize: 11,
+    opacity: 0.7,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  unavailable: {
+    display: "block",
+    marginTop: 6,
+    fontSize: 11,
+    opacity: 0.55,
+    fontStyle: "italic",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  fileCard: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    marginTop: 6,
+    maxWidth: 320,
+    padding: "8px 10px",
+    borderRadius: RADIUS,
+    background: chrome(6),
+    boxShadow: `inset 0 0 0 1px ${chrome(10)}`,
+    color: "inherit",
+    textDecoration: "none"
+  },
+  fileIcon: {
+    position: "relative",
+    flex: "0 0 auto",
+    width: 36,
+    height: 44,
+    display: "flex",
+    alignItems: "flex-end",
+    justifyContent: "center",
+    paddingBottom: 4,
+    boxSizing: "border-box",
+    borderRadius: 4,
+    background: chrome(10),
+    color: ACCENT,
+    fontSize: 9,
+    fontWeight: 700,
+    letterSpacing: ".04em"
+  },
+  fileBody: { minWidth: 0, display: "flex", flexDirection: "column", gap: 2 },
+  fileName: {
+    fontSize: 13,
+    fontWeight: 600,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  fileMeta: {
+    fontSize: 11,
+    opacity: 0.7,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  contact: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    padding: "1px 8px 1px 6px",
+    borderRadius: 999,
+    background: chrome(8),
+    color: ACCENT,
+    textDecoration: "none",
+    fontSize: "0.95em",
+    lineHeight: 1.6,
+    verticalAlign: "baseline",
+    maxWidth: "100%"
+  },
+  contactGlyph: { display: "inline-flex", fontSize: 13, opacity: 0.9 },
+  badge: {
+    display: "inline-block",
+    marginLeft: 4,
+    padding: "0 4px",
+    borderRadius: 3,
+    fontSize: 9,
+    fontWeight: 700,
+    letterSpacing: ".04em",
+    verticalAlign: "middle",
+    background: chrome(10),
+    opacity: 0.8
+  },
+  lightboxBackdrop: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 2147483e3,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "rgba(0,0,0,.82)",
+    padding: 24,
+    boxSizing: "border-box",
+    animation: "convai-lightbox-in .16s ease-out"
+  },
+  lightbox: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 10,
+    maxWidth: "90vw",
+    maxHeight: "90vh",
+    color: "#fff"
+  },
+  lightboxImage: {
+    display: "block",
+    maxWidth: "90vw",
+    maxHeight: "calc(90vh - 72px)",
+    objectFit: "contain",
+    borderRadius: RADIUS,
+    background: "#000"
+  },
+  lightboxCaption: {
+    fontSize: 12,
+    opacity: 0.8,
+    maxWidth: "90vw",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  lightboxControls: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    transform: "translateY(-100%)",
+    display: "flex",
+    gap: 6
+  },
+  lightboxButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "6px 10px",
+    borderRadius: 999,
+    border: "1px solid rgba(255,255,255,.25)",
+    background: "rgba(0,0,0,.5)",
+    color: "#fff",
+    fontSize: 12,
+    cursor: "pointer",
+    textDecoration: "none"
+  },
+  lightboxFallback: {
+    padding: "32px 40px",
+    fontSize: 13,
+    opacity: 0.8,
+    border: "1px dashed rgba(255,255,255,.3)",
+    borderRadius: RADIUS
+  },
+  // Site card: Open Graph metadata under a plain web link. Same chrome as the
+  // file card so the three card kinds read as one family.
+  siteCard: {
+    display: "block",
+    marginTop: 6,
+    maxWidth: 320,
+    padding: "8px 10px",
+    borderRadius: RADIUS,
+    background: chrome(6),
+    boxShadow: `inset 0 0 0 1px ${chrome(10)}`,
+    color: "inherit",
+    textDecoration: "none"
+  },
+  siteHeader: { display: "flex", alignItems: "center", gap: 6, minWidth: 0 },
+  siteFavicon: {
+    width: 16,
+    height: 16,
+    flex: "0 0 auto",
+    borderRadius: 3,
+    objectFit: "contain"
+  },
+  siteName: {
+    fontSize: 12,
+    fontWeight: 700,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  siteTitle: {
+    display: "block",
+    marginTop: 2,
+    fontSize: 13,
+    fontWeight: 600,
+    color: ACCENT,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
+  siteDescription: {
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: 2,
+    overflow: "hidden",
+    marginTop: 2,
+    fontSize: 12,
+    opacity: 0.75,
+    lineHeight: 1.35
+  },
+  siteImage: {
+    display: "block",
+    width: "100%",
+    aspectRatio: "16 / 9",
+    objectFit: "cover",
+    marginTop: 8,
+    borderRadius: 6
+  }
+};
+const aeroTheme = {
+  colors: {
+    convai: {
+      light: "#1EB453",
+      dark: "#084c3a"
+    },
+    neutral: {
+      100: "#f5f5f5",
+      200: "#e5e5e5",
+      300: "#d4d4d4",
+      400: "#a3a3a3",
+      700: "#404040"
+    },
+    glass: {
+      medium: "rgba(255, 255, 255, 0.15)",
+      backdrop: "rgba(255, 255, 255, 0.8)"
+    },
+    error: {
+      500: "#ef4444"
+    },
+    text: {
+      primary: "#1f2937",
+      secondary: "#6b7280"
+    }
+  },
+  typography: {
+    fontFamily: {
+      primary: '"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    },
+    fontSize: {
+      sm: "14px",
+      base: "16px"
+    },
+    fontWeight: {
+      semibold: 600
+    }
+  },
+  spacing: {
+    xs: "4px"
+  },
+  borderRadius: {
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  },
+  shadows: {
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    glass: "0 8px 32px rgba(0, 0, 0, 0.1)"
+  },
+  glass: {
+    backdrop: "blur(20px)",
+    border: "1px solid rgba(255, 255, 255, 0.2)"
+  },
+  transitions: {
+    fast: "0.15s ease-in-out"
+  },
+  zIndex: {
+    modal: 1040
+  }
+};
+const getGlobalStyles = () => `
+  @keyframes convai-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes convai-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes convai-bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @keyframes convai-slide-up {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes convai-slide-down {
+    from {
+      transform: translateY(-20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes convai-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes convai-scale-in {
+    from {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .convai-widget * {
+    box-sizing: border-box;
+  }
+
+  .convai-widget {
+    font-family: var(--convai-font, ${aeroTheme.typography.fontFamily.primary});
+    color: var(--convai-panel-fg, ${aeroTheme.colors.text.primary});
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .convai-widget button {
+    font-family: inherit;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .convai-widget input {
+    font-family: inherit;
+    border: none;
+    outline: none;
+    background: none;
+  }
+
+  .convai-widget::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .convai-widget::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+  }
+
+  .convai-widget::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+  }
+
+  .convai-widget::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.3);
+  }
+`;
+const WIDGET_STYLES_ID = "convai-widget-styles";
+const WIDGET_KEYFRAMES_ID = "convai-widget-keyframes";
+const styledTargets = /* @__PURE__ */ new WeakSet();
+const keyframedTargets = /* @__PURE__ */ new WeakSet();
+const styleHost = (target) => target instanceof ShadowRoot ? target : target.head;
+const hasStyleNode = (target, id) => styleHost(target).querySelector(`#${id}`) !== null;
+const WIDGET_KEYFRAMES = `
+  @keyframes popIn {
+    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+  }
+
+  /* Link-preview skeleton: one sweep across the placeholder while the media
+   * decodes. Lives here rather than in getGlobalStyles() because that string is
+   * pinned byte-for-byte by the inline-style parity fixture, and this is an
+   * addition no existing element uses. */
+  @keyframes convai-preview-shimmer {
+    from { background-position: 200% 0; }
+    to { background-position: -200% 0; }
+  }
+
+  /* Image lightbox entrance. Additive, like the shimmer above. */
+  @keyframes convai-lightbox-in {
+    from { opacity: 0; transform: scale(.98); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  /* Connecting overlay: logo spin + label pulse. Values match the React
+   * widget's framer-motion transitions (ConvaiWidget.tsx:681-737) exactly --
+   * a full turn every 2s linear, and opacity 0.5 -> 1 -> 0.5 every 2s
+   * ease-in-out. React does not honour prefers-reduced-motion; vanilla does,
+   * via the media query below, since a full-turn infinite spin plus a
+   * pulsing label is exactly what that setting exists for. */
+  @keyframes convaiConnectingSpin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes convaiConnectingPulse {
+    0%, 100% { opacity: 0.5; }
+    50% { opacity: 1; }
+  }
+
+  /* Voice mode's avatar: two counter-rotating liquid-gradient layers behind
+   * the character image. Matches the React overlay's framer-motion values
+   * (VoiceModeOverlay.tsx) — 20s clockwise for the conic layer, 15s
+   * anticlockwise for the radial one, both linear and infinite — and the
+   * gentle scale breathing it applies while the character is speaking. */
+  @keyframes convaiVoiceSpin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes convaiVoiceSpinReverse {
+    from { transform: rotate(360deg); }
+    to { transform: rotate(0deg); }
+  }
+
+  @keyframes convaiVoiceBreathe {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .convai-connecting-spin {
+      animation: none !important;
+    }
+    .convai-connecting-pulse {
+      animation: none !important;
+    }
+    .convai-voice-gradient,
+    .convai-voice-avatar {
+      animation: none !important;
+    }
+    [data-convai-skeleton] {
+      animation: none !important;
+    }
+    [part~="lightbox-backdrop"] {
+      animation: none !important;
+    }
+  }
+`;
+const injectGlobalStyles = (target = document) => {
+  if (styledTargets.has(target)) return;
+  if (hasStyleNode(target, WIDGET_STYLES_ID)) {
+    styledTargets.add(target);
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = WIDGET_STYLES_ID;
+  styleElement.textContent = getGlobalStyles();
+  styleHost(target).appendChild(styleElement);
+  styledTargets.add(target);
+};
+const injectKeyframes = (target = document) => {
+  if (keyframedTargets.has(target)) return;
+  if (hasStyleNode(target, WIDGET_KEYFRAMES_ID)) {
+    keyframedTargets.add(target);
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = WIDGET_KEYFRAMES_ID;
+  style.textContent = WIDGET_KEYFRAMES;
+  styleHost(target).appendChild(style);
+  keyframedTargets.add(target);
+};
+let current = null;
+const el = (tag, part, style) => {
+  const node = document.createElement(tag);
+  node.setAttribute("part", part);
+  node.style.cssText = toCssText(style);
+  return node;
+};
+function openLightbox(opts) {
+  var _a;
+  current == null ? void 0 : current.close();
+  injectKeyframes(opts.root);
+  const mount = opts.root instanceof ShadowRoot ? opts.root : opts.root.body;
+  const backdrop = el("div", "lightbox-backdrop", presentationStyles.lightboxBackdrop);
+  backdrop.setAttribute("role", "dialog");
+  backdrop.setAttribute("aria-modal", "true");
+  backdrop.setAttribute("aria-label", opts.alt || "Image preview");
+  const box = el("div", "lightbox", presentationStyles.lightbox);
+  const img = el("img", "lightbox-image", presentationStyles.lightboxImage);
+  img.src = opts.src;
+  img.alt = opts.alt;
+  const caption = el("span", "lightbox-caption", presentationStyles.lightboxCaption);
+  caption.textContent = opts.caption;
+  const controls = el("div", "lightbox-controls", presentationStyles.lightboxControls);
+  const open = el("a", "lightbox-open", presentationStyles.lightboxButton);
+  open.href = opts.href;
+  open.target = "_blank";
+  open.rel = "noopener noreferrer";
+  open.innerHTML = `${glyph("external")}<span>Open original</span>`;
+  const close = el("button", "lightbox-close", presentationStyles.lightboxButton);
+  close.type = "button";
+  close.setAttribute("aria-label", "Close image preview");
+  close.innerHTML = glyph("close");
+  controls.append(open, close);
+  img.addEventListener("error", () => {
+    const fallback = el("div", "lightbox-fallback", presentationStyles.lightboxFallback);
+    fallback.textContent = "Image could not be loaded";
+    img.replaceWith(fallback);
+  });
+  const previousOverflow = document.body.style.overflow;
+  const restoreFocus = (_a = opts.returnFocusTo) != null ? _a : document.activeElement;
+  const activeElement = () => opts.root instanceof ShadowRoot ? opts.root.activeElement : document.activeElement;
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      handle.close();
+      return;
+    }
+    if (e.key === "Tab") {
+      const active = activeElement();
+      if (e.shiftKey && active === open) {
+        e.preventDefault();
+        close.focus();
+      } else if (!e.shiftKey && active === close) {
+        e.preventDefault();
+        open.focus();
+      }
+    }
+  };
+  const handle = {
+    close() {
+      var _a2;
+      if (current !== handle) return;
+      current = null;
+      document.removeEventListener("keydown", onKey, true);
+      backdrop.remove();
+      document.body.style.overflow = previousOverflow;
+      (_a2 = restoreFocus == null ? void 0 : restoreFocus.focus) == null ? void 0 : _a2.call(restoreFocus);
+    }
+  };
+  backdrop.addEventListener("click", (e) => {
+    if (e.target === backdrop) handle.close();
+  });
+  close.addEventListener("click", () => handle.close());
+  document.addEventListener("keydown", onKey, true);
+  box.append(controls, img, caption);
+  backdrop.appendChild(box);
+  mount.appendChild(backdrop);
+  document.body.style.overflow = "hidden";
+  current = handle;
+  close.focus();
+  return handle;
+}
+export {
+  MAX_CARDS_PER_MESSAGE as M,
+  PREVIEW_TIMEOUT_MS as P,
+  injectGlobalStyles as a,
+  aeroTheme as b,
+  glyph as g,
+  injectKeyframes as i,
+  openLightbox as o,
+  presentationStyles as p,
+  toCssText as t
+};

package/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * `@convai/web-widget` for bundlers.
+ *
+ * The package's other two artifacts are for a script tag: `v1.js` registers
+ * `<convai-widget>` on the page, and `runtime.js` is the chunk it fetches. Both
+ * bundle `@convai/web-sdk`, because a copy/paste embed's whole value is that
+ * the host page installs nothing.
+ *
+ * This entry is the opposite trade. It treats the SDK as **external**, so an
+ * application that already depends on it links one copy rather than two, and
+ * has no side effects, so a bundler can drop whatever is unused. Nothing here
+ * touches `document` or registers an element at import time.
+ *
+ * Importing it does not define `<convai-widget>`. That is deliberate: a
+ * bundler consumer composes the pieces, and a custom element registered as a
+ * side effect of an import is exactly the kind of thing tree-shaking cannot
+ * reason about.
+ */
+export type { ErrorCode, ErrorDetail, MessageDetail, Placement, Preload, WidgetConfig, } from './types';
+/**
+ * The version this build came from, for a consumer reporting a bug.
+ *
+ * Injected from package.json at build time by Vite's `define`, so it cannot
+ * drift from the published version the way a hand-written constant would.
+ */
+export declare const VERSION: string;

package/index.js

@@ -0,0 +1,4 @@
+const VERSION = "0.2.0-beta.0";
+export {
+  VERSION
+};