workpeg 0.76.0__tar.gz → 0.78.0__tar.gz

{workpeg-0.76.0/src/workpeg.egg-info → workpeg-0.78.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: workpeg
-Version: 0.76.0
+Version: 0.78.0
 Summary: Workpeg function runtime and SDK
 Author-email: Workpeg <support@workpeg.com>
 License: MIT

{workpeg-0.76.0 → workpeg-0.78.0}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "workpeg"
-version = "0.76.0"
+version = "0.78.0"
 description = "Workpeg function runtime and SDK"
 readme = "README.md"
 requires-python = ">=3.10"

{workpeg-0.76.0 → workpeg-0.78.0}/src/workpeg/ui/runtime/ai.js

@@ -607,6 +607,7 @@
 
   // ── conversation view (/chat/<uuid>) ───────────────────────────────────
   var messagesEl = null;
+  var scrollDownEl = null;     // the "scroll to latest" button (when scrolled up)
   function renderConversation() {
     S.host.innerHTML = "";
     closePlusMenu();
@@ -614,7 +615,17 @@
     var conversation = el("div", "chat-conversation", { children: [messagesEl] });
 
     var composer = buildComposer("Message Workpeg AI…");
+    // A "scroll to latest" affordance — floats just above the (sticky) composer,
+    // shown only when the thread isn't scrolled to the bottom.
+    var scrollDown = el("button", "wpai-scroll-down", {
+      attrs: { type: "button", "aria-label": "Scroll to latest",
+               title: "Scroll to latest" },
+      children: [icon("arrow-down", 20)]
+    });
+    scrollDown.addEventListener("click", function () { scrollToBottom(true); });
+    scrollDownEl = scrollDown;
     var bar = el("div", "chat-input-bar", { children: [
+      scrollDown,
       el("div", "chat-input-wrap-holder", { children: [composer] })
     ] });
 
@@ -623,7 +634,13 @@
     S.host.appendChild(center);
 
     S.messages.forEach(function (m) { messagesEl.appendChild(renderMessage(m)); });
-    messagesEl.addEventListener("scroll", updateFade);
+    // The surface (#workpeg-ai-root) scrolls — toggle the scroll-to-latest
+    // button from there. Rebind (remove+add) so re-renders/re-attaches keep
+    // exactly one listener on the current host.
+    if (S.host) {
+      S.host.removeEventListener("scroll", updateScrollDown);
+      S.host.addEventListener("scroll", updateScrollDown);
+    }
     // Delegated copy for code blocks (their markup is set via innerHTML, so we
     // can't bind per-button). Copies the block's source text.
     messagesEl.addEventListener("click", function (e) {
@@ -637,7 +654,7 @@
       setTimeout(function () { btn.textContent = "Copy"; }, 1200);
     });
     scrollToBottom();
-    updateFade();
+    updateScrollDown();
   }
 
   function renderMessage(m) {
@@ -737,9 +754,7 @@
         el("div", "chat-message__response-header", { children: [
           thinkingVideoNode(),
           el("div", "chat-message__thinking", { children: [
-            el("span", "thinking-text", { text: "Thinking" }),
-            el("span", "thinking-dot"), el("span", "thinking-dot"),
-            el("span", "thinking-dot")
+            el("span", "thinking-text", { text: "Thinking" })
           ] })
         ] })
       ]
@@ -781,7 +796,7 @@
     if (messagesEl) { messagesEl.appendChild(renderMessage(userMsg)); scrollToBottom(); }
 
     var thinking = thinkingNode();
-    if (messagesEl) { messagesEl.appendChild(thinking); scrollToBottom(); updateFade(); }
+    if (messagesEl) { messagesEl.appendChild(thinking); scrollToBottom(); updateScrollDown(); }
 
     return json("POST", chatsPath(S.chatId + "/messages/"), { content: text })
       .then(function (created) {
@@ -985,16 +1000,21 @@
   }
 
   // ── scroll / fade ──────────────────────────────────────────────────────
-  function scrollToBottom() {
-    if (messagesEl) messagesEl.scrollTop = messagesEl.scrollHeight;
+  function scrollToBottom(smooth) {
+    // The whole surface scrolls (see mount): pin it to the newest message.
+    if (!S.host) return;
+    if (smooth && S.host.scrollTo) {
+      S.host.scrollTo({ top: S.host.scrollHeight, behavior: "smooth" });
+    } else {
+      S.host.scrollTop = S.host.scrollHeight;
+    }
   }
-  function updateFade() {
-    if (!messagesEl) return;
-    var top = messagesEl.scrollTop > 4;
-    var bottom = messagesEl.scrollTop + messagesEl.clientHeight <
-      messagesEl.scrollHeight - 4;
-    messagesEl.classList.toggle("is-fade-top", top);
-    messagesEl.classList.toggle("is-fade-bottom", bottom);
+  // Show the scroll-to-latest button only when the thread isn't at the bottom.
+  function updateScrollDown() {
+    if (!scrollDownEl || !S.host) return;
+    var atBottom = S.host.scrollTop + S.host.clientHeight >=
+      S.host.scrollHeight - 32;
+    scrollDownEl.classList.toggle("is-visible", !atBottom);
   }
 
   // ── misc helpers ───────────────────────────────────────────────────────
@@ -1079,9 +1099,12 @@
       host.parentNode.style.position = "relative";
     }
     if (host.setAttribute) {
+      // We are the SCROLL container: a conversation scrolls on #workpeg-ai-root
+      // itself (so the scrollbar rides the surface's far-right edge, not an inner
+      // column), and the composer sticks to the bottom inside us.
       host.setAttribute("style",
         "position:absolute;top:0;right:0;bottom:0;left:0;display:block;" +
-        "margin:0;padding:0;overflow:hidden;box-sizing:border-box");
+        "margin:0;padding:0;overflow-y:auto;overflow-x:hidden;box-sizing:border-box");
     }
     if (reattach) { redraw(chatId); return; }
     S.rendered = null;                     // force a fresh render on (re)mount
@@ -1126,7 +1149,8 @@
     // The landing centres in the area BELOW the top nav, so it reads a touch low;
     // a bottom pad (~the nav height) lifts it to look centred in the whole panel.
     R + " .chat-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;min-height:0;height:100%;overflow:hidden;position:relative;padding-bottom:var(--wpai-nav-h,64px)}",
-    R + " .wpai-center--convo{justify-content:flex-start;padding-bottom:0}",
+    // conversation centre: grow with the thread (don't clip) so the host scrolls
+    R + " .wpai-center--convo{justify-content:flex-start;padding-bottom:0;gap:0;height:auto;min-height:100%;overflow:visible}",
     R + " .chat-landing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;width:100%;padding:40px 24px}",
     R + " .chat-greeting{font-size:var(--text-headline-lg-size,2rem);line-height:40px;font-weight:var(--font-weight-medium,500);color:var(--color-text-primary);text-align:center;margin:0}",
     // the landing card: one subtle border around the composer + suggestions
@@ -1181,13 +1205,9 @@
     R + " .chat-plus-item--chevron{justify-content:space-between}",
     R + " .chat-plus-item--chevron span{display:flex;align-items:center;gap:10px}",
     R + " .chat-plus-divider{height:1px;background:var(--color-border-subtle);margin:4px}",
-    // conversation
-    R + " .chat-conversation{flex:1;min-height:0;width:100%;max-width:800px;margin:0 auto;display:flex;flex-direction:column;padding:0 24px 100px;overflow:hidden}",
-    R + " .chat-messages{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:32px;margin:0 auto 50px auto;width:min(720px,100%);--fade-size:48px}",
-    R + " .chat-messages::-webkit-scrollbar{display:none}",
-    R + " .chat-messages.is-fade-top{-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--fade-size));mask-image:linear-gradient(to bottom,transparent 0,black var(--fade-size))}",
-    R + " .chat-messages.is-fade-bottom{-webkit-mask-image:linear-gradient(to bottom,black calc(100% - var(--fade-size)),transparent 100%);mask-image:linear-gradient(to bottom,black calc(100% - var(--fade-size)),transparent 100%)}",
-    R + " .chat-messages.is-fade-top.is-fade-bottom{-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--fade-size),black calc(100% - var(--fade-size)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--fade-size),black calc(100% - var(--fade-size)),transparent 100%)}",
+    // conversation — the THREAD flows and grows; #workpeg-ai-root scrolls it.
+    R + " .chat-conversation{flex:1 0 auto;width:100%;max-width:800px;margin:0 auto;display:flex;flex-direction:column;padding:24px 24px 32px}",
+    R + " .chat-messages{display:flex;flex-direction:column;gap:32px;width:min(720px,100%);margin:0 auto}",
     R + " .chat-message{display:flex;gap:12px;animation:wpaiMessageIn .3s ease}",
     "@keyframes wpaiMessageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}",
     R + " .chat-message--user{justify-content:flex-end}",
@@ -1237,12 +1257,15 @@
     // thinking
     R + " .chat-message--thinking .chat-message__thinking{display:flex;align-items:center;gap:8px}",
     R + " .thinking-text{font-size:var(--text-body-sm-size,13px);color:var(--color-text-secondary)}",
-    R + " .thinking-dot{width:6px;height:6px;background:var(--color-brand-secondary,var(--color-text-secondary));border-radius:50%;animation:wpaiThinking 1.4s ease-in-out infinite}",
-    R + " .thinking-dot:nth-child(2){animation-delay:.2s}",
-    R + " .thinking-dot:nth-child(3){animation-delay:.4s}",
-    "@keyframes wpaiThinking{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}",
     // bottom input bar
-    R + " .chat-input-bar{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 48px));z-index:50}",
+    // the composer sticks to the bottom of the scrolling surface; its gradient
+    // lets the thread fade into it as messages scroll behind.
+    R + " .chat-input-bar{position:sticky;bottom:0;align-self:center;width:min(720px,calc(100% - 48px));z-index:50;padding:12px 0 24px;background:linear-gradient(to bottom,transparent,var(--color-bg-default) 20px)}",
+    // scroll-to-latest button — floats above the sticky composer, hidden until
+    // the thread is scrolled up.
+    R + " .wpai-scroll-down{position:absolute;left:50%;top:-46px;transform:translateX(-50%) translateY(6px);width:36px;height:36px;border-radius:9999px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-raised,var(--color-surface-default));border:1px solid var(--color-border-subtle);color:var(--color-icon-primary,var(--color-text-primary));cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility .15s}",
+    R + " .wpai-scroll-down.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}",
+    R + " .wpai-scroll-down:hover{background:var(--color-surface-sunken2,var(--color-surface-default))}",
     // banner
     // The announcement floats OVER the top nav (fixed to the viewport, so the
     // host's overflow can't clip it), centred in the content area to the right of

{workpeg-0.76.0 → workpeg-0.78.0}/src/workpeg/ui/scaffold.py

@@ -1624,13 +1624,21 @@ class Scaffold(Component):
                                "flexShrink": "0"},
                     ),
                     self.main,
-                    gap=0, align="stretch", scroll="auto",
+                    # The SCROLL lives on the .pg-main container (below), like the
+                    # static design — so the scrollbar rides the whole main area's
+                    # right edge, not an inner column inset by the padding. This
+                    # column stays `scroll="visible"` only to keep its height:100%
+                    # (so the Outlet's flex chain — and the AI page's absolute
+                    # fill — still bounds), without a scrollbar of its own.
+                    gap=0, align="stretch", scroll="visible",
                 ),
                 style={
                     "flex": "1", "minWidth": "0",
                     "background": "var(--color-bg-default)",
                     "boxSizing": "border-box",
-                    "overflow": "hidden", "padding": "0 16px",
+                    # scroll on the container itself (the design's .pg-main);
+                    # padding 0 24px 8px 24px (was 0 16px).
+                    "overflow": "auto", "padding": "0 24px 8px 24px",
                     "display": "flex", "flexDirection": "column",
                 },
             ),

{workpeg-0.76.0 → workpeg-0.78.0/src/workpeg.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: workpeg
-Version: 0.76.0
+Version: 0.78.0
 Summary: Workpeg function runtime and SDK
 Author-email: Workpeg <support@workpeg.com>
 License: MIT