static/app.js

/**
 * Nyra — pin input height + stop HF iframe infinite grow
 */
(function () {
  var PIN_H = "40px";
  var ROW_H = "56px";

  function pinInput() {
    var tas = document.querySelectorAll(
      '#nyra-input textarea, #nyra-input input, textarea[data-testid="textbox"]'
    );
    for (var i = 0; i < tas.length; i++) {
      var el = tas[i];
      // Override Gradio's auto-resize script
      el.style.setProperty("height", PIN_H, "important");
      el.style.setProperty("min-height", PIN_H, "important");
      el.style.setProperty("max-height", PIN_H, "important");
      el.style.setProperty("resize", "none", "important");
      el.style.setProperty("overflow", "hidden", "important");
      el.style.setProperty("line-height", PIN_H, "important");
      el.setAttribute("rows", "1");
      // Prevent scrollHeight-based growth: freeze scrollHeight feedback
      try {
        Object.defineProperty(el, "scrollHeight", {
          configurable: true,
          get: function () {
            return 40;
          },
        });
      } catch (e) {}
    }

    var row = document.getElementById("nyra-input-row");
    if (row) {
      row.style.setProperty("height", ROW_H, "important");
      row.style.setProperty("max-height", ROW_H, "important");
      row.style.setProperty("min-height", ROW_H, "important");
      row.style.setProperty("flex-grow", "0", "important");
      row.style.setProperty("overflow", "hidden", "important");
    }

    // Stop parent column from flex-growing forever
    var main = document.getElementById("nyra-main");
    if (main) {
      main.style.setProperty("flex-grow", "0", "important");
      main.style.setProperty("height", "auto", "important");
      main.style.setProperty("min-height", "0", "important");
    }

    document.documentElement.style.setProperty("height", "auto", "important");
    document.body.style.setProperty("height", "auto", "important");
    document.body.style.setProperty("min-height", "0", "important");

    var gc = document.querySelector(".gradio-container");
    if (gc) {
      gc.style.setProperty("height", "auto", "important");
      gc.style.setProperty("min-height", "0", "important");
      gc.style.setProperty("flex-grow", "0", "important");
      // Tell iframe-resizer a stable height
      try {
        if (window.parent && window.parent !== window) {
          var h = Math.ceil(document.documentElement.scrollHeight);
          // Cap absurd growth
          if (h > 2000) h = 900;
          window.parent.postMessage(
            { iframeHeight: h, type: "setHeight" },
            "*"
          );
        }
      } catch (e) {}
    }
  }

  function updateEmptyState() {
    var bot = document.querySelector("#nyra-chatbot");
    if (!bot) return;
    var messages = bot.querySelectorAll(
      ".message, .message-row, [data-testid='user'], [data-testid='bot']"
    );
    var has = messages && messages.length > 0;
    document.body.classList.toggle("nyra-has-messages", !!has);
    var hero = document.getElementById("nyra-hero");
    var chips = document.getElementById("nyra-chips");
    if (hero) hero.style.display = has ? "none" : "";
    if (chips) chips.style.display = has ? "none" : "";
  }

  function hydrateLucide() {
    try {
      if (window.lucide && typeof window.lucide.createIcons === "function") {
        window.lucide.createIcons({ attrs: { "stroke-width": 1.85 } });
      }
    } catch (e) {}
  }

  function boot() {
    pinInput();
    updateEmptyState();
    hydrateLucide();
  }

  // Disable Gradio / iframe-resizer auto height if present
  try {
    window.iFrameResizer = {
      autoResize: false,
      sizeWidth: false,
      heightCalculationMethod: "taggedElement",
    };
  } catch (e) {}

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", boot);
  } else {
    boot();
  }
  window.addEventListener("load", boot);

  // Keep pinning — Gradio rewrites height on every keystroke/render
  setInterval(pinInput, 250);

  // Observe DOM for Gradio re-renders
  var mo = new MutationObserver(function () {
    pinInput();
    updateEmptyState();
  });
  if (document.body) {
    mo.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ["style", "rows", "class"],
    });
  }
})();