@feedvalue/core 0.1.11 → 0.1.15

package/dist/index.cjs

@@ -455,6 +455,123 @@ function clearFingerprint() {
   }
 }
 
+// src/context-capture.ts
+var DEFAULT_CONTEXT_CAPTURE_CONFIG = {
+  enabled: true,
+  maxDepth: 5,
+  maxHeadingLength: 100,
+  dataAttributeWhitelist: [
+    "data-section",
+    "data-feature",
+    "data-component",
+    "data-fv-section",
+    "data-fv-feature"
+  ]
+};
+function findNearestWithId(element, maxDepth) {
+  let current = element;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    if (current.id) {
+      return current;
+    }
+    current = current.parentElement;
+    depth++;
+  }
+  return null;
+}
+function findNearestHeading(element, section, maxDepth) {
+  if (section) {
+    const heading = section.querySelector("h1, h2, h3, h4, h5, h6");
+    if (heading) return heading;
+  }
+  let current = element;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    let sibling = current.previousElementSibling;
+    while (sibling) {
+      if (/^H[1-6]$/.test(sibling.tagName)) {
+        return sibling;
+      }
+      sibling = sibling.previousElementSibling;
+    }
+    current = current.parentElement;
+    depth++;
+  }
+  return null;
+}
+function captureDataAttributes(element, whitelist, maxDepth) {
+  const result = {};
+  let current = element;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    for (const attr of Array.from(current.attributes)) {
+      if (whitelist.includes(attr.name) && !result[attr.name]) {
+        result[attr.name] = attr.value;
+      }
+    }
+    current = current.parentElement;
+    depth++;
+  }
+  return result;
+}
+function generateSelector(element, maxDepth) {
+  const parts = [];
+  let current = element;
+  let depth = 0;
+  while (current && depth < maxDepth && current !== document.body) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id) {
+      selector = `#${current.id}`;
+      parts.unshift(selector);
+      break;
+    }
+    if (current.className && typeof current.className === "string") {
+      const classes = current.className.split(" ").filter((c) => c.trim()).slice(0, 2);
+      if (classes.length) {
+        selector += "." + classes.join(".");
+      }
+    }
+    parts.unshift(selector);
+    current = current.parentElement;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+function truncate(str, maxLength) {
+  if (str.length <= maxLength) return str;
+  return str.substring(0, maxLength - 3) + "...";
+}
+function captureContext(triggerElement, config = DEFAULT_CONTEXT_CAPTURE_CONFIG) {
+  if (!config.enabled || !triggerElement || typeof document === "undefined") {
+    return null;
+  }
+  const context = {};
+  const sectionWithId = findNearestWithId(triggerElement, config.maxDepth);
+  if (sectionWithId) {
+    context.sectionId = sectionWithId.id;
+    context.sectionTag = sectionWithId.tagName.toLowerCase();
+  }
+  const heading = findNearestHeading(triggerElement, sectionWithId, config.maxDepth);
+  if (heading) {
+    context.nearestHeading = truncate(heading.textContent?.trim() || "", config.maxHeadingLength);
+    const level = heading.tagName[1];
+    if (level) {
+      context.headingLevel = parseInt(level, 10);
+    }
+  }
+  const dataAttrs = captureDataAttributes(
+    triggerElement,
+    config.dataAttributeWhitelist,
+    config.maxDepth
+  );
+  if (Object.keys(dataAttrs).length > 0) {
+    context.dataAttributes = dataAttrs;
+  }
+  context.cssSelector = generateSelector(triggerElement, 3);
+  return Object.keys(context).length > 0 ? context : null;
+}
+
 // src/feedvalue.ts
 var SUCCESS_AUTO_CLOSE_DELAY_MS = 3e3;
 var VALID_SENTIMENTS = ["angry", "disappointed", "satisfied", "excited"];
@@ -477,6 +594,7 @@ var _FeedValue = class _FeedValue {
     __publicField(this, "apiClient");
     __publicField(this, "emitter");
     __publicField(this, "headless");
+    __publicField(this, "contextCaptureConfig");
     __publicField(this, "config");
     __publicField(this, "widgetConfig", null);
     // State
@@ -499,6 +617,8 @@ var _FeedValue = class _FeedValue {
     __publicField(this, "modal", null);
     __publicField(this, "overlay", null);
     __publicField(this, "stylesInjected", false);
+    // Viewport resize compensation cleanup
+    __publicField(this, "viewportResizeCleanup", null);
     // Auto-close timeout reference (for cleanup on destroy)
     __publicField(this, "autoCloseTimeout", null);
     // Destroyed flag - guards async continuations (fixes React StrictMode race condition)
@@ -506,6 +626,10 @@ var _FeedValue = class _FeedValue {
     this.widgetId = options.widgetId;
     this.headless = options.headless ?? false;
     this.config = { ...DEFAULT_CONFIG, ...options.config };
+    this.contextCaptureConfig = {
+      ...DEFAULT_CONTEXT_CAPTURE_CONFIG,
+      ...options.contextCapture
+    };
     this.apiClient = new ApiClient(
       options.apiBaseUrl ?? DEFAULT_API_BASE_URL,
       this.config.debug
@@ -569,12 +693,28 @@ var _FeedValue = class _FeedValue {
         thankYouMessage: configResponse.config.thankYouMessage ?? "Thank you for your feedback!",
         showBranding: configResponse.config.showBranding ?? true,
         customFields: configResponse.config.customFields,
-        // Reaction config (for reaction widgets) - only include if defined
+        // Reaction config (for reaction widgets) - pass through all fields
         ...configResponse.config.template && { template: configResponse.config.template },
         ...configResponse.config.options && { options: configResponse.config.options },
         followUpLabel: configResponse.config.followUpLabel ?? "Tell us more (optional)",
-        submitText: configResponse.config.submitText ?? "Send"
+        submitText: configResponse.config.submitText ?? "Send",
+        // Reaction widget display options (support both camelCase and snake_case from API)
+        ...(configResponse.config.showLabels !== void 0 || configResponse.config.show_labels !== void 0) && {
+          showLabels: configResponse.config.showLabels ?? configResponse.config.show_labels
+        },
+        ...(configResponse.config.buttonSize || configResponse.config.button_size) && {
+          buttonSize: configResponse.config.buttonSize ?? configResponse.config.button_size
+        },
+        ...(configResponse.config.followUpTrigger || configResponse.config.follow_up_trigger) && {
+          followUpTrigger: configResponse.config.followUpTrigger ?? configResponse.config.follow_up_trigger
+        }
       };
+      this.log("Built baseConfig:", {
+        buttonSize: baseConfig.buttonSize,
+        showLabels: baseConfig.showLabels,
+        followUpTrigger: baseConfig.followUpTrigger,
+        template: baseConfig.template
+      });
       this.widgetConfig = {
         widgetId: configResponse.widget_id,
         widgetKey: configResponse.widget_key,
@@ -582,12 +722,16 @@ var _FeedValue = class _FeedValue {
         type: configResponse.type ?? "feedback",
         config: baseConfig,
         styling: {
-          primaryColor: configResponse.styling.primaryColor ?? "#3b82f6",
-          backgroundColor: configResponse.styling.backgroundColor ?? "#ffffff",
-          textColor: configResponse.styling.textColor ?? "#1f2937",
-          buttonTextColor: configResponse.styling.buttonTextColor ?? "#ffffff",
-          borderRadius: configResponse.styling.borderRadius ?? "8px",
-          customCSS: configResponse.styling.customCSS
+          // Pass through all styling properties from API
+          ...configResponse.styling,
+          // Apply defaults for required fields (support both camelCase and snake_case from API)
+          primaryColor: configResponse.styling.primaryColor ?? configResponse.styling.primary_color ?? "#3b82f6",
+          backgroundColor: configResponse.styling.backgroundColor ?? configResponse.styling.background_color ?? "#ffffff",
+          textColor: configResponse.styling.textColor ?? configResponse.styling.text_color ?? "#1f2937",
+          buttonTextColor: configResponse.styling.buttonTextColor ?? configResponse.styling.button_text_color ?? "#ffffff",
+          borderColor: configResponse.styling.borderColor ?? configResponse.styling.border_color ?? "#e5e7eb",
+          borderWidth: configResponse.styling.borderWidth ?? configResponse.styling.border_width ?? "1",
+          borderRadius: configResponse.styling.borderRadius ?? configResponse.styling.border_radius ?? "8px"
         }
       };
       if (!this.headless && typeof window !== "undefined" && typeof document !== "undefined") {
@@ -613,6 +757,8 @@ var _FeedValue = class _FeedValue {
       clearTimeout(this.autoCloseTimeout);
       this.autoCloseTimeout = null;
     }
+    this.viewportResizeCleanup?.();
+    this.viewportResizeCleanup = null;
     this.triggerButton?.remove();
     this.modal?.remove();
     this.overlay?.remove();
@@ -821,12 +967,12 @@ var _FeedValue = class _FeedValue {
   getTemplateOptions(template) {
     const templates = {
       thumbs: [
-        { label: "Helpful", value: "helpful", icon: "thumbs-up", showFollowUp: false },
-        { label: "Not Helpful", value: "not_helpful", icon: "thumbs-down", showFollowUp: true }
+        { label: "Helpful", value: "helpful", icon: "\u{1F44D}", showFollowUp: false },
+        { label: "Not Helpful", value: "not_helpful", icon: "\u{1F44E}", showFollowUp: true }
       ],
       helpful: [
-        { label: "Yes", value: "yes", icon: "check", showFollowUp: false },
-        { label: "No", value: "no", icon: "x", showFollowUp: true }
+        { label: "Yes", value: "yes", icon: "\u2713", showFollowUp: false },
+        { label: "No", value: "no", icon: "\u2717", showFollowUp: true }
       ],
       emoji: [
         { label: "Angry", value: "angry", icon: "\u{1F620}", showFollowUp: true },
@@ -848,7 +994,7 @@ var _FeedValue = class _FeedValue {
   /**
    * Submit a reaction.
    * @param value - Selected reaction option value
-   * @param options - Optional follow-up text
+   * @param options - Optional follow-up text and trigger element for context capture
    */
   async react(value, options) {
     if (!this.state.isReady) {
@@ -866,13 +1012,25 @@ var _FeedValue = class _FeedValue {
       const validValues = reactionOptions.map((opt) => opt.value).join(", ");
       throw new Error(`Invalid reaction value. Must be one of: ${validValues}`);
     }
+    let capturedContext = null;
+    if (options?.triggerElement) {
+      capturedContext = captureContext(options.triggerElement, this.contextCaptureConfig);
+      this.log("Captured context", capturedContext);
+    }
     this.emitter.emit("react", { value, hasFollowUp: selectedOption.showFollowUp });
     this.updateState({ isSubmitting: true });
     try {
       const reactionData = {
         value,
         metadata: {
-          page_url: typeof window !== "undefined" ? window.location.href : ""
+          page_url: typeof window !== "undefined" ? window.location.href : "",
+          // Spread captured context into metadata
+          ...capturedContext?.sectionId && { section_id: capturedContext.sectionId },
+          ...capturedContext?.sectionTag && { section_tag: capturedContext.sectionTag },
+          ...capturedContext?.nearestHeading && { nearest_heading: capturedContext.nearestHeading },
+          ...capturedContext?.headingLevel && { heading_level: capturedContext.headingLevel },
+          ...capturedContext?.dataAttributes && { data_attributes: capturedContext.dataAttributes },
+          ...capturedContext?.cssSelector && { css_selector: capturedContext.cssSelector }
         },
         ...options?.followUp && { followUp: options.followUp }
       };
@@ -1024,6 +1182,7 @@ var _FeedValue = class _FeedValue {
     }
     this.renderTrigger();
     this.renderModal();
+    this.setupViewportCompensation();
   }
   /**
    * Sanitize CSS to block potentially dangerous patterns
@@ -1236,7 +1395,7 @@ var _FeedValue = class _FeedValue {
   getPositionStyles(position) {
     switch (position) {
       case "bottom-left":
-        return "bottom: 20px; left: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 20px;";
       case "top-right":
         return "top: 20px; right: 20px;";
       case "top-left":
@@ -1245,7 +1404,7 @@ var _FeedValue = class _FeedValue {
         return "top: 50%; left: 50%; transform: translate(-50%, -50%);";
       case "bottom-right":
       default:
-        return "bottom: 20px; right: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px;";
     }
   }
   /**
@@ -1254,9 +1413,9 @@ var _FeedValue = class _FeedValue {
   getModalPositionStyles(position) {
     switch (position) {
       case "bottom-left":
-        return "bottom: 20px; left: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 20px;";
       case "bottom-right":
-        return "bottom: 20px; right: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px;";
       case "top-right":
         return "top: 20px; right: 20px;";
       case "top-left":
@@ -1266,6 +1425,37 @@ var _FeedValue = class _FeedValue {
         return "top: 50%; left: 50%; transform: translate(-50%, -50%);";
     }
   }
+  /**
+   * Smooth viewport resize compensation for mobile browser toolbar show/hide.
+   *
+   * When Chrome/Safari's bottom toolbar appears or disappears, the layout viewport
+   * resizes and position:fixed elements jump. This detects toolbar-sized height
+   * changes and applies an inverse CSS translate to cancel the jump, then animates
+   * back to the natural position. Uses the `translate` CSS property (separate from
+   * `transform`) to avoid conflicting with the hover transform on the trigger.
+   */
+  setupViewportCompensation() {
+    if (typeof window === "undefined") return;
+    let lastHeight = window.innerHeight;
+    const handleResize = () => {
+      const newHeight = window.innerHeight;
+      const delta = newHeight - lastHeight;
+      lastHeight = newHeight;
+      if (Math.abs(delta) <= 5 || Math.abs(delta) >= 120) return;
+      const elements = [this.triggerButton, this.modal].filter(Boolean);
+      for (const el of elements) {
+        el.style.transition = "none";
+        el.style.translate = `0 ${delta}px`;
+        void el.offsetHeight;
+        el.style.transition = "translate 0.3s ease-out";
+        el.style.translate = "0 0";
+      }
+    };
+    window.addEventListener("resize", handleResize, { passive: true });
+    this.viewportResizeCleanup = () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }
   /**
    * Parse SVG string to DOM element safely using DOMParser
    */
@@ -1466,9 +1656,6 @@ var _FeedValue = class _FeedValue {
     }
   }
 };
-/**
- * SVG icons for trigger button (matching widget-bundle exactly)
- */
 /**
  * SVG icons for trigger button - must match Lucide icons used in frontend-web
  * chat = MessageCircle, message = MessageSquare, feedback = MessagesSquare,
@@ -1494,9 +1681,11 @@ var NEGATIVE_OPTIONS_MAP = {
 
 exports.ApiClient = ApiClient;
 exports.DEFAULT_API_BASE_URL = DEFAULT_API_BASE_URL;
+exports.DEFAULT_CONTEXT_CAPTURE_CONFIG = DEFAULT_CONTEXT_CAPTURE_CONFIG;
 exports.FeedValue = FeedValue;
 exports.NEGATIVE_OPTIONS_MAP = NEGATIVE_OPTIONS_MAP;
 exports.TypedEventEmitter = TypedEventEmitter;
+exports.captureContext = captureContext;
 exports.clearFingerprint = clearFingerprint;
 exports.generateFingerprint = generateFingerprint;
 //# sourceMappingURL=index.cjs.map