Deploy from mauritius-budget-pensions/app

app.py

@@ -571,43 +571,12 @@ def respond(message, history):
 # Submitting is done two ways on purpose. Gradio renders its send control
 # differently across versions, so try the button, and fall back to an Enter
 # keypress on the textarea, which is the path the reader's own keyboard takes.
-ASK_JS = """
-() => {
-  const fire = (el, type, init) => el.dispatchEvent(
-      new (type === 'keydown' ? KeyboardEvent : Event)(type,
-        Object.assign({bubbles: true}, init || {})));
-
-  document.addEventListener('click', (ev) => {
-    const a = ev.target.closest && ev.target.closest('a.askref');
-    if (!a) return;
-    ev.preventDefault();
-    ev.stopPropagation();
-    let q = '';
-    try { q = decodeURIComponent(a.dataset.q || ''); } catch (e) { q = a.dataset.q || ''; }
-    if (!q) return;
-
-    const box = document.querySelector('#askbox textarea, #askbox input[type=text]');
-    if (!box) return;
-    // React/Svelte track the value on the node, so write through the native
-    // setter -- assigning .value directly leaves the framework's copy stale and
-    // the submitted message comes out empty.
-    const proto = box.tagName === 'TEXTAREA'
-        ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
-    const setter = Object.getOwnPropertyDescriptor(proto, 'value').set;
-    setter.call(box, q);
-    fire(box, 'input');
-    box.focus();
-
-    const btn = document.querySelector(
-        '#askbox button[title="Submit"], #askbox button[aria-label="Submit"], ' +
-        '#askbox .submit-button, .chat-input-container button[title="Submit"]');
-    setTimeout(() => {
-      if (btn) { btn.click(); }
-      else { fire(box, 'keydown', {key: 'Enter', code: 'Enter', keyCode: 13, which: 13}); }
-    }, 30);
-  }, true);
-}
-"""
+# The page's own behaviour: cross-reference links that ask in this session,
+# ?q= asked automatically on arrival, and landing on the top of each new answer.
+# Kept in app/ask.js so it can be exercised against a stub DOM by
+# scripts/test_ask_js.mjs -- it is JavaScript, and testing it as a Python string
+# would mean testing nothing.
+ASK_JS = (Path(__file__).resolve().parent / "ask.js").read_text(encoding="utf-8")
 
 def build(cls, **kw):
     """Construct a Gradio component, dropping kwargs this version rejects.
@@ -678,12 +647,7 @@ demo = build(
 # box is pre-filled rather than auto-sent: the reader chooses whether to spend
 # the call, and can edit the question first.
 with demo:
-    def _prefill(request: gr.Request):
-        return (request.query_params.get("q") or "")[:700]
-
-    demo.load(_prefill, None, demo.textbox)
-
-    # Install the cross-reference click handler. ChatInterface itself does not
+    # Install the page's behaviour (links, auto-ask, scroll). ChatInterface itself does not
     # take a js= argument in Gradio 6 -- it is silently not a constructor
     # parameter -- but the load event does, so the script goes on here. If even
     # that changes, say so loudly: the links would still render and simply stop

ask.js

@@ -0,0 +1,113 @@
+// Client-side behaviour for the archive chat, loaded by app.py via demo.load(js=).
+//
+// Three jobs, all of them about a reader following a reference rather than
+// typing a question:
+//
+//   1. A cross-reference in an answer is a link that asks the question HERE.
+//      An ordinary ?q= href would open a new tab and start a fresh session,
+//      discarding the conversation the reader is in the middle of.
+//   2. A ?q= on the URL -- how the dashboard links every question -- is asked
+//      automatically on arrival. The reader followed a link to get an answer;
+//      making them press send again is a step with no decision in it.
+//   3. After each answer, the view goes to the TOP of that answer. Gradio pins
+//      a chat to the bottom, which for a long reply means landing on its last
+//      line and having to scroll back up to read it from the start.
+//
+// Kept in its own file so it can be exercised by scripts/test_ask_js.mjs
+// against a stub DOM; app.py inlines it at import.
+
+() => {
+  const SUBMIT_SELECTOR = [
+    '#askbox button[title="Submit"]',
+    '#askbox button[aria-label="Submit"]',
+    '#askbox .submit-button',
+    '.chat-input-container button[title="Submit"]',
+  ].join(', ');
+
+  // Gradio's markup for a bot turn has changed shape across versions, so try
+  // the stable hooks first and fall back to anything labelled as a bot row.
+  const BOT_SELECTOR = [
+    '#chatbox [data-testid="bot"]',
+    '#chatbox .bot',
+    '#chatbox .message.bot',
+    '#chatbox .message-row.bot-row',
+  ].join(', ');
+
+  const fire = (el, type, init) => el.dispatchEvent(
+      new (type === 'keydown' ? KeyboardEvent : Event)(type,
+        Object.assign({ bubbles: true }, init || {})));
+
+  const box = () => document.querySelector('#askbox textarea, #askbox input[type=text]');
+
+  // Poll rather than assume: this runs when the app mounts, and the textbox is
+  // not necessarily in the DOM yet on a cold Space.
+  function waitFor(get, ms, done) {
+    const started = Date.now();
+    (function tick() {
+      const el = get();
+      if (el) { done(el); return; }
+      if (Date.now() - started > ms) return;
+      setTimeout(tick, 60);
+    })();
+  }
+
+  function ask(text) {
+    if (!text) return;
+    waitFor(box, 8000, (el) => {
+      // React/Svelte track the value on the node, so write through the native
+      // setter -- assigning .value directly leaves the framework's copy stale
+      // and the submitted message comes out empty.
+      const proto = el.tagName === 'TEXTAREA'
+          ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
+      Object.getOwnPropertyDescriptor(proto, 'value').set.call(el, text);
+      fire(el, 'input');
+      el.focus();
+      setTimeout(() => {
+        const btn = document.querySelector(SUBMIT_SELECTOR);
+        if (btn) btn.click();
+        else fire(el, 'keydown', { key: 'Enter', code: 'Enter', keyCode: 13, which: 13 });
+      }, 30);
+    });
+  }
+
+  // --- 1. cross-reference links -------------------------------------------
+  document.addEventListener('click', (ev) => {
+    const a = ev.target.closest && ev.target.closest('a.askref');
+    if (!a) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    let q = a.dataset.q || '';
+    try { q = decodeURIComponent(q); } catch (e) { /* use it raw */ }
+    ask(q);
+  }, true);
+
+  // --- 2. ?q= is asked on arrival -----------------------------------------
+  let incoming = '';
+  try {
+    incoming = new URLSearchParams(window.location.search).get('q') || '';
+  } catch (e) { incoming = ''; }
+  if (incoming) ask(incoming.slice(0, 700));
+
+  // --- 3. land on the top of the newest answer ----------------------------
+  let lastSeen = null;
+  let timer = null;
+
+  function toLatestAnswer() {
+    const answers = document.querySelectorAll(BOT_SELECTOR);
+    const latest = answers[answers.length - 1];
+    // Only when the newest answer is one we have not already moved to, or the
+    // page would fight the reader every time they scrolled away from it.
+    if (!latest || latest === lastSeen) return;
+    lastSeen = latest;
+    latest.scrollIntoView({ block: 'start', behavior: 'smooth' });
+  }
+
+  waitFor(() => document.querySelector('#chatbox'), 8000, (chat) => {
+    // Debounced: an answer arrives as several mutations, and scrolling on each
+    // one lands somewhere arbitrary in the middle of it.
+    new MutationObserver(() => {
+      clearTimeout(timer);
+      timer = setTimeout(toLatestAnswer, 250);
+    }).observe(chat, { childList: true, subtree: true });
+  });
+}