@bitbaum/chatkit 0.7.0 → 0.8.0

package/README.md

@@ -15,7 +15,7 @@ interface that calls them.)
 ## Install
 
 ```sh
-pnpm add @bitbaum/chatkit@^0.6.0
+pnpm add @bitbaum/chatkit@^0.8.0
 ```
 
 **Install releases from npm, never a commit or a branch.** A semver range is
@@ -51,6 +51,37 @@ import "@bitbaum/chatkit/styles.css";
 />
 ```
 
+### The whole screen — `ChatScreen`
+
+A chat page is the conversation, edge to edge and top to bottom, as in the
+ChatGPT and Claude apps. The header and the composer float OVER it instead of
+each taking a strip of the screen: words scroll under both and fade as they
+pass, the header's buttons are frosted pills (`ck-glass`), and the composer is
+a see-through pill. The last line of an answer always rests above the
+composer — the scroller is padded by the measured height of each.
+
+```tsx
+<ChatScreen
+  fill="viewport"                    // or "parent": fill the box you give it
+  header={<>
+    <button className="ck-glass" aria-label="Chats"><IconMenu /></button>
+    <span style={{ flex: 1 }} />
+    <button className="ck-glass" aria-label="New chat"><IconPen /></button>
+  </>}
+  composer={<Composer … />}           // plus an error or a queue, if you have one
+  footnote="Answers can be wrong."
+>
+  <ChatThread … />
+</ChatScreen>
+```
+
+`fill="viewport"` follows the VISUAL viewport, so the composer rides above the
+phone keyboard. An app with its own thread pads its scroller with the two
+measured heights: `padding-block: var(--ck-top-inset) var(--ck-bottom-inset)`.
+The reading column is `--ck-measure` (48rem) wide with `--ck-gutter` (1rem)
+to the edge; the page behind it is `--ck-page`. `demo/screen.html` is the
+reference: look at it at 390px before changing any of this.
+
 ### The microphone
 
 `voice` is on by default. Give it a server leg so it works everywhere:
@@ -199,6 +230,8 @@ on `Composer`, `labels` on `ChatThread`.
 8. Starters in the empty state; suggested replies under the latest answer;
    the speaker's name on every answer once more than one agent speaks.
 9. Nothing overflows at 320–390px.
+10. In `ChatScreen`, the conversation fills the display and opens at the
+    latest message, with its end above the composer, not behind it.
 
 `pnpm run verify` proves all of it: unit and render tests, then
 `test/browser.mjs` drives Chromium through the demo at desktop and 390px, light

package/dist/react/Screen.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+/**
+ * The chat as the whole screen, the way the ChatGPT and Claude apps lay it
+ * out: the conversation runs edge to edge and top to bottom, and the controls
+ * FLOAT over it — a see-through header at the top, the composer at the bottom
+ * — instead of each taking a strip of the screen away from the reading.
+ *
+ * Words scroll under both. They fade out as they pass beneath the header and
+ * the composer, so the controls stay legible without an opaque bar behind
+ * them; the last line of an answer always rests above the composer, never
+ * behind it (the scroller is padded by the measured height of each).
+ *
+ * The heights are published as `--ck-top-inset` and `--ck-bottom-inset` on
+ * the screen, so an app whose thread is its own scroller pads it with them:
+ *
+ *   .my-thread { padding-block: var(--ck-top-inset) var(--ck-bottom-inset); }
+ *
+ * chatkit's own `ChatThread` does that already.
+ */
+export declare function ChatScreen({ header, composer, footnote, children, fill, className, }: {
+    /** Floats over the top of the conversation. Give its buttons `ck-glass`. */
+    header?: ReactNode;
+    /** The composer (and anything that belongs with it: an error, a queue). */
+    composer: ReactNode;
+    /** One quiet line under the composer ("Answers can be wrong"). */
+    footnote?: ReactNode;
+    /** The conversation: a `ChatThread`, or an app's own scroller. */
+    children: ReactNode;
+    /**
+     * "parent" fills the box the app gives it. "viewport" takes the visual
+     * viewport — the height that shrinks when the phone keyboard opens, so the
+     * composer rides on top of the keyboard instead of behind it.
+     */
+    fill?: "parent" | "viewport";
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Screen.d.ts.map

package/dist/react/Screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../src/react/Screen.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAe,EACf,SAAS,GACV,EAAE;IACD,4EAA4E;IAC5E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA2CA"}

package/dist/react/Screen.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+import { useViewportHeight } from "./hooks.js";
+/**
+ * The chat as the whole screen, the way the ChatGPT and Claude apps lay it
+ * out: the conversation runs edge to edge and top to bottom, and the controls
+ * FLOAT over it — a see-through header at the top, the composer at the bottom
+ * — instead of each taking a strip of the screen away from the reading.
+ *
+ * Words scroll under both. They fade out as they pass beneath the header and
+ * the composer, so the controls stay legible without an opaque bar behind
+ * them; the last line of an answer always rests above the composer, never
+ * behind it (the scroller is padded by the measured height of each).
+ *
+ * The heights are published as `--ck-top-inset` and `--ck-bottom-inset` on
+ * the screen, so an app whose thread is its own scroller pads it with them:
+ *
+ *   .my-thread { padding-block: var(--ck-top-inset) var(--ck-bottom-inset); }
+ *
+ * chatkit's own `ChatThread` does that already.
+ */
+export function ChatScreen({ header, composer, footnote, children, fill = "parent", className, }) {
+    const rootRef = useRef(null);
+    const headerRef = useRef(null);
+    const dockRef = useRef(null);
+    useViewportHeight(rootRef, fill === "viewport");
+    const hasHeader = header != null && header !== false;
+    // Measured, not guessed: the composer grows with a long draft, a staged
+    // screenshot or a dictation problem, and the reading has to move with it.
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const sync = () => {
+            root.style.setProperty("--ck-top-inset", `${headerRef.current?.offsetHeight ?? 0}px`);
+            root.style.setProperty("--ck-bottom-inset", `${dockRef.current?.offsetHeight ?? 0}px`);
+        };
+        sync();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(sync);
+        if (headerRef.current)
+            observer.observe(headerRef.current);
+        if (dockRef.current)
+            observer.observe(dockRef.current);
+        return () => observer.disconnect();
+    }, [hasHeader]);
+    const cls = ["ck-screen"];
+    if (fill === "viewport")
+        cls.push("ck-screen-viewport");
+    if (className)
+        cls.push(className);
+    return (_jsxs("div", { ref: rootRef, className: cls.join(" "), children: [_jsx("div", { className: "ck-screen-body", children: children }), hasHeader && (_jsx("div", { ref: headerRef, className: "ck-screen-header", children: _jsx("div", { className: "ck-screen-header-row", children: header }) })), _jsx("div", { ref: dockRef, className: "ck-screen-dock", children: _jsxs("div", { className: "ck-screen-column", children: [composer, footnote != null && _jsx("p", { className: "ck-screen-footnote", children: footnote })] }) })] }));
+}
+//# sourceMappingURL=Screen.js.map

package/dist/react/Screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Screen.js","sourceRoot":"","sources":["../../src/react/Screen.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,SAAS,GAiBV;IACC,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,iBAAiB,CAAC,OAAO,EAAE,IAAI,KAAK,UAAU,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,MAAM,IAAI,IAAI,IAAI,MAAM,KAAK,KAAK,CAAC;IAErD,wEAAwE;IACxE,0EAA0E;IAC1E,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,IAAI,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,YAAY,IAAI,CAAC,IAAI,CAAC,CAAC;YACtF,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,GAAG,OAAO,CAAC,OAAO,EAAE,YAAY,IAAI,CAAC,IAAI,CAAC,CAAC;QACzF,CAAC,CAAC;QACF,IAAI,EAAE,CAAC;QACP,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAO;QAClD,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,SAAS,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC3D,IAAI,OAAO,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,GAAG,GAAG,CAAC,WAAW,CAAC,CAAC;IAC1B,IAAI,IAAI,KAAK,UAAU;QAAE,GAAG,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACxD,IAAI,SAAS;QAAE,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CACL,eAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,aACzC,cAAK,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAO,EAC/C,SAAS,IAAI,CACZ,cAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,kBAAkB,YAC/C,cAAK,SAAS,EAAC,sBAAsB,YAAE,MAAM,GAAO,GAChD,CACP,EACD,cAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB,YAC3C,eAAK,SAAS,EAAC,kBAAkB,aAC9B,QAAQ,EACR,QAAQ,IAAI,IAAI,IAAI,YAAG,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAK,IACjE,GACF,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/react/hooks.d.ts

@@ -33,7 +33,7 @@ export declare function useStickToBottom(changes: DependencyList, grew: number):
  * keyboard (orangecat `ViewportHeightSync`, #1094). Rounded down: sub-pixel
  * heights leave a 1px seam under the composer on some devices.
  */
-export declare function useViewportHeight(target?: RefObject<HTMLElement | null>): void;
+export declare function useViewportHeight(target?: RefObject<HTMLElement | null>, enabled?: boolean): void;
 /** Grow a textarea to its content up to `max` px, keyed on the VALUE so a
  *  prefill, a dictated transcript or the clear after send resize it too.
  *

package/dist/react/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/react/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,SAAO;;iBAUhC,MAAM;EAYhB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM;;;;;;EA0BrE;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QAoBvE;AAED;;;;;;;;gFAQgF;AAChF,wBAAgB,WAAW,CAAC,GAAG,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAM,QAqB/F"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/react/hooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,SAAO;;iBAUhC,MAAM;EAYhB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM;;;;;;EAgDrE;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,OAAO,UAAO,QAqBvF;AAED;;;;;;;;gFAQgF;AAChF,wBAAgB,WAAW,CAAC,GAAG,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAM,QAqB/F"}

package/dist/react/hooks.js

@@ -51,6 +51,31 @@ export function useStickToBottom(changes, grew) {
         if (following)
             endRef.current?.scrollIntoView({ block: "end" });
     }, [following, ...changes]);
+    // Pinned through SIZE changes too, not only new tokens: a composer that
+    // grows (a long draft, a staged screenshot), ChatScreen measuring its insets
+    // after the first paint, a rotated phone — each moves the bottom away, and
+    // a reader who was at the bottom must still be there afterwards.
+    const followingRef = useRef(following);
+    followingRef.current = following;
+    const observed = useRef(null);
+    const observer = useRef(null);
+    useLayoutEffect(() => {
+        const el = scrollRef.current;
+        if (el === observed.current || typeof ResizeObserver === "undefined")
+            return;
+        observer.current?.disconnect();
+        observed.current = el;
+        if (!el)
+            return;
+        observer.current = new ResizeObserver(() => {
+            if (followingRef.current)
+                el.scrollTop = el.scrollHeight;
+        });
+        observer.current.observe(el);
+        if (el.firstElementChild)
+            observer.current.observe(el.firstElementChild);
+    });
+    useEffect(() => () => observer.current?.disconnect(), []);
     const previous = useRef(grew);
     useEffect(() => {
         if (grew > previous.current)
@@ -68,8 +93,10 @@ export function useStickToBottom(changes, grew) {
  * keyboard (orangecat `ViewportHeightSync`, #1094). Rounded down: sub-pixel
  * heights leave a 1px seam under the composer on some devices.
  */
-export function useViewportHeight(target) {
+export function useViewportHeight(target, enabled = true) {
     useEffect(() => {
+        if (!enabled)
+            return;
         const vv = window.visualViewport;
         const el = target?.current ?? document.documentElement;
         const sync = () => el.style.setProperty("--ck-viewport-height", `${Math.floor(vv?.height ?? window.innerHeight)}px`);
@@ -83,7 +110,7 @@ export function useViewportHeight(target) {
             window.removeEventListener("orientationchange", sync);
             el.style.removeProperty("--ck-viewport-height");
         };
-    }, [target]);
+    }, [target, enabled]);
 }
 /** Grow a textarea to its content up to `max` px, keyed on the VALUE so a
  *  prefill, a dictated transcript or the clear after send resize it too.

package/dist/react/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/react/hooks.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EACL,WAAW,EACX,SAAS,EACT,eAAe,EACf,MAAM,EACN,QAAQ,GAGT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,OAAO,GAAG,IAAI;IACzC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IACjE,SAAS,CACP,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,IAAI,KAAK,CAAC,OAAO;YAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC,EACD,EAAE,CACH,CAAC;IACF,MAAM,IAAI,GAAG,WAAW,CACtB,CAAC,IAAY,EAAE,EAAE;QACf,KAAK,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;aACvD,IAAI,CAAC,GAAG,EAAE;YACT,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,IAAI,KAAK,CAAC,OAAO;gBAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC/C,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAC9D,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IACF,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAAuB,EAAE,IAAY;IACpE,MAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACtD,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,CAAC;QAC7B,IAAI,EAAE;YAAE,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,SAAS;YAAE,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC;IAE5B,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,GAAG,QAAQ,CAAC,OAAO;YAAE,YAAY,CAAC,IAAI,CAAC,CAAC;QAChD,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;IAC1B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;AAClE,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,iBAAiB,CAAC,MAAsC;IACtE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,MAAM,CAAC,cAAc,CAAC;QACjC,MAAM,EAAE,GAAG,MAAM,EAAE,OAAO,IAAI,QAAQ,CAAC,eAAe,CAAC;QACvD,MAAM,IAAI,GAAG,GAAG,EAAE,CAChB,EAAE,CAAC,KAAK,CAAC,WAAW,CAClB,sBAAsB,EACtB,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,MAAM,IAAI,MAAM,CAAC,WAAW,CAAC,IAAI,CACpD,CAAC;QACJ,IAAI,EAAE,CAAC;QACP,EAAE,EAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACrC,EAAE,EAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE;YACV,EAAE,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YACxC,EAAE,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YACxC,MAAM,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;YACtD,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,sBAAsB,CAAC,CAAC;QAClD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC;AAED;;;;;;;;gFAQgF;AAChF,MAAM,UAAU,WAAW,CAAC,GAA0C,EAAE,KAAa,EAAE,GAAG,GAAG,GAAG;IAC9F,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,MAAM,GAAG,GAAG,GAAG,EAAE;YACf,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YACzB,IAAI,CAAC,EAAE,CAAC,KAAK;gBAAE,OAAO;YACtB,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,IAAI,CAAC;QAC1D,CAAC,CAAC;QACF,GAAG,EAAE,CAAC;QACN,IAAI,OAAO,cAAc,KAAK,WAAW;YAAE,OAAO;QAClD,yEAAyE;QACzE,IAAI,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC;QAC3B,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,IAAI,EAAE,CAAC,WAAW,KAAK,KAAK;gBAAE,OAAO;YACrC,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC;YACvB,GAAG,EAAE,CAAC;QACR,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACrB,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;AACxB,CAAC"}
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/react/hooks.ts"],"names":[],"mappings":"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"}

package/dist/react/index.d.ts

@@ -11,6 +11,7 @@ export { Composer, DEFAULT_COMPOSER_LABELS } from "./Composer.js";
 export type { ComposerProps, ComposerLabels, ComposerLabelOverrides, ComposerVoice, } from "./Composer.js";
 export { ChatThread, ChatMessage, ChatReplies, ChatStarters, DEFAULT_THREAD_LABELS, } from "./Thread.js";
 export type { ChatMessageData, ChatSpeaker, LiveTurn, Starter, ThreadLabels } from "./Thread.js";
+export { ChatScreen } from "./Screen.js";
 export { Markdown, defaultRenderLink } from "./Markdown.js";
 export type { CitationMap, RenderLink } from "./Markdown.js";
 export { useDictation } from "./use-dictation.js";

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAClE,YAAY,EACV,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,aAAa,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,qBAAqB,GACtB,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACjG,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAClE,YAAY,EACV,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,aAAa,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,qBAAqB,GACtB,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACpG,OAAO,EAAE,UAAU,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}

package/dist/react/index.js

@@ -9,6 +9,7 @@
  */
 export { Composer, DEFAULT_COMPOSER_LABELS } from "./Composer.js";
 export { ChatThread, ChatMessage, ChatReplies, ChatStarters, DEFAULT_THREAD_LABELS, } from "./Thread.js";
+export { ChatScreen } from "./Screen.js";
 export { Markdown, defaultRenderLink } from "./Markdown.js";
 export { useDictation } from "./use-dictation.js";
 export { AttachMenu, DEFAULT_ATTACH_MENU_LABELS } from "./AttachMenu.js";

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAOlE,OAAO,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,qBAAqB,GACtB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAOlE,OAAO,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,qBAAqB,GACtB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitbaum/chatkit",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "One chat for every product: a composer with a microphone that always works, a thread that does not fight the reader, messages with copy and retry, and LLM markdown \u2014 the fleet's chat standard as a package.",
   "license": "MIT",
   "author": "Cato",

package/styles.css

@@ -20,6 +20,7 @@
   /* Defaults at ZERO specificity on the root: an app's own :root (or any
      container) rule setting a --ck-* variable always wins. Declaring these on
      the chat's elements instead would silently override the app. */
+  --ck-page: hsl(var(--surface-page, 0 0% 99%));
   --ck-bg: hsl(var(--surface-base, 0 0% 100%));
   --ck-raised: hsl(var(--surface-raised, 0 0% 96%));
   --ck-overlay: hsl(var(--surface-overlay, 0 0% 98%));
@@ -43,8 +44,15 @@
   --ck-text: 1rem;
   --ck-leading: 1.6;
   --ck-target: 2.75rem;
+  /* ChatScreen: the reading column, and the margin it keeps from the edge. */
+  --ck-measure: 48rem;
+  --ck-gutter: 1rem;
+  /* The person's own words. Neutral, not the accent: the accent is for the
+     one thing to press, and a column of tinted pills spent it on every turn. */
+  --ck-bubble: var(--ck-raised);
 }
 
+.ck-screen,
 .ck-composer-wrap,
 .ck-thread-wrap,
 .ck-starters,
@@ -53,6 +61,7 @@
   color: var(--ck-fg);
 }
 
+.ck-screen *,
 .ck-composer-wrap *,
 .ck-thread-wrap *,
 .ck-starters *,
@@ -468,7 +477,7 @@
   max-width: min(85%, 42rem);
   padding: 0.625rem 1rem;
   border-radius: calc(var(--ck-radius) * 1.25);
-  background: var(--ck-accent-soft);
+  background: var(--ck-bubble);
   color: var(--ck-fg);
   font-size: var(--ck-text);
   line-height: var(--ck-leading);
@@ -590,6 +599,156 @@
   box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.35);
 }
 
+/* ── screen ─────────────────────────────────────────────────────────────
+   The whole display is the conversation; header and composer float over it.
+   --ck-top-inset / --ck-bottom-inset are measured by ChatScreen. */
+.ck-screen {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--ck-page);
+}
+.ck-screen-viewport {
+  height: var(--ck-viewport-height, 100dvh);
+}
+.ck-screen-body {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+/* Words pass under the header and fade as they do: the page colour at the
+   very top, nothing by the bottom of the row. No bar, no border. */
+.ck-screen-header {
+  position: absolute;
+  inset: 0 0 auto;
+  z-index: 3;
+  padding: env(safe-area-inset-top, 0px) var(--ck-gutter) 0;
+  background: linear-gradient(
+    to bottom,
+    var(--ck-page) 0%,
+    color-mix(in srgb, var(--ck-page) 75%, transparent) 55%,
+    transparent 100%
+  );
+  pointer-events: none;
+}
+.ck-screen-header-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  min-height: 3.5rem;
+  padding-block: 0.375rem;
+}
+.ck-screen-header-row > * {
+  pointer-events: auto;
+}
+.ck-screen-dock {
+  position: absolute;
+  inset: auto 0 0;
+  z-index: 3;
+  padding: 1.5rem var(--ck-gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px));
+  background: linear-gradient(to top, var(--ck-page) 0%, var(--ck-page) 40%, transparent 100%);
+  pointer-events: none;
+}
+.ck-screen-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  max-width: var(--ck-measure);
+  margin-inline: auto;
+  pointer-events: auto;
+}
+.ck-screen-footnote {
+  margin: 0;
+  color: var(--ck-muted);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  text-align: center;
+}
+/* The composer as a floating pill: see-through enough to show the words
+   passing under it, solid enough to type on. */
+.ck-screen-dock .ck-composer {
+  border-color: color-mix(in srgb, var(--ck-line-2) 70%, transparent);
+  border-radius: 1.75rem;
+  background: color-mix(in srgb, var(--ck-bg) 86%, transparent);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  backdrop-filter: blur(20px) saturate(1.4);
+  box-shadow: 0 6px 28px -12px rgb(0 0 0 / 0.28);
+}
+.ck-screen-dock .ck-voice-bar {
+  border-radius: 1.75rem;
+}
+/* The thread scrolls the full width (the scrollbar sits at the screen's
+   edge, and a swipe anywhere moves it); its column keeps a reading measure. */
+.ck-screen .ck-thread {
+  padding: var(--ck-top-inset, 0px) var(--ck-gutter) calc(var(--ck-bottom-inset, 0px) + 0.75rem);
+  scroll-padding-top: var(--ck-top-inset, 0px);
+  scroll-padding-bottom: var(--ck-bottom-inset, 0px);
+}
+.ck-screen .ck-thread-inner {
+  width: 100%;
+  max-width: var(--ck-measure);
+  margin-inline: auto;
+}
+.ck-screen .ck-jump {
+  bottom: calc(var(--ck-bottom-inset, 0px) + 0.5rem);
+  z-index: 4;
+}
+.ck-screen-body > .ck-starters,
+.ck-screen-body > .ck-thread-loading {
+  flex: 1;
+  justify-content: center;
+  width: 100%;
+  max-width: calc(var(--ck-measure) + 2 * var(--ck-gutter));
+  margin-inline: auto;
+  padding: var(--ck-top-inset, 0px) var(--ck-gutter) var(--ck-bottom-inset, 0px);
+  overflow-y: auto;
+}
+
+/* A control floating over the conversation: a frosted pill, the way the
+   header buttons sit over the words in the ChatGPT app. For an app's own
+   header buttons inside ChatScreen. */
+.ck-glass {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-width: var(--ck-target);
+  min-height: var(--ck-target);
+  padding: 0 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--ck-line-2) 60%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ck-bg) 70%, transparent);
+  -webkit-backdrop-filter: blur(16px) saturate(1.4);
+  backdrop-filter: blur(16px) saturate(1.4);
+  box-shadow: 0 2px 10px -4px rgb(0 0 0 / 0.18);
+  color: var(--ck-fg);
+  font: inherit;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+.ck-glass:hover {
+  background: color-mix(in srgb, var(--ck-bg) 88%, transparent);
+}
+.ck-glass:focus-visible {
+  outline: 2px solid var(--ck-accent);
+  outline-offset: 2px;
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .ck-glass,
+  .ck-screen-dock .ck-composer {
+    background: var(--ck-bg);
+  }
+}
+
 /* markdown: 16px, readable measure, no leaked ** or > */
 .ck-md {
   min-width: 0;