Trim page props and page the conversation's messages

Bot and workspace lists in page props leave out instructions, memory and workspace context, and carry the last message as a short preview. The header avatar's edit form loads the bot's instructions when it opens. The conversation renders its latest 30 messages and loads older ones as the thread scrolls to its top. Also: the composer shows a placeholder until its editor loads, and `bun start` no longer builds first. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-20 20:09:01 +01:00
parent b3057119df
commit f13fa863c5
30 changed files with 583 additions and 45 deletions
@@ -0,0 +1,60 @@
+import { useEffect, useRef, type RefObject } from "react";
+import Loading from "@moduletrace/twui/elements/Loading";
+import Button from "@moduletrace/twui/layout/Button";
+import Stack from "@moduletrace/twui/layout/Stack";
+
+type Props = {
+    loading: boolean;
+    error?: string;
+    onLoad: () => void;
+};
+
+/**
+ * The top of a thread with older messages: loads them as it scrolls into
+ * view, with a button for when it can't (or a load failed).
+ */
+export default function OlderMessagesLoader({ loading, error, onLoad }: Props) {
+    const ref = useRef<HTMLDivElement>(null);
+    const load = useRef(onLoad);
+
+    load.current = onLoad;
+
+    useEffect(() => {
+        const el = ref.current;
+
+        if (!el || error || typeof IntersectionObserver == "undefined") return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries.some((entry) => entry.isIntersecting)) load.current();
+            },
+            { rootMargin: "400px 0px 0px 0px" },
+        );
+
+        observer.observe(el);
+
+        return () => observer.disconnect();
+    }, [error, loading]);
+
+    return (
+        <Stack
+            componentRef={ref as RefObject<HTMLDivElement>}
+            className="w-full items-center justify-center min-h-8"
+        >
+            {loading ? (
+                <Loading size="smaller" />
+            ) : (
+                <Button
+                    title="Show earlier messages"
+                    type="button"
+                    variant="ghost"
+                    color="text"
+                    onClick={onLoad}
+                    className="text-[13px]! leading-[18px]! text-ink-secondary"
+                >
+                    {error ? `${error} Try again` : "Show earlier messages"}
+                </Button>
+            )}
+        </Stack>
+    );
+}