@bitbaum/chatkit 0.8.0 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitbaum/chatkit",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "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

@@ -47,6 +47,11 @@
   /* ChatScreen: the reading column, and the margin it keeps from the edge. */
   --ck-measure: 48rem;
   --ck-gutter: 1rem;
+  /* ChatScreen measures the floating header and dock into these; with no
+     ChatScreen they are 0. --ck-viewport-height is set by useViewportHeight. */
+  --ck-top-inset: 0px;
+  --ck-bottom-inset: 0px;
+  --ck-viewport-height: 100dvh;
   /* 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);
@@ -629,11 +634,15 @@
   position: absolute;
   inset: 0 0 auto;
   z-index: 3;
-  padding: env(safe-area-inset-top, 0px) var(--ck-gutter) 0;
+  /* Mostly page behind the row itself, so a title in it stays one line of
+     text and not two on top of each other; the words only show through
+     dimly, and the fade runs out in the strip below the row. */
+  padding: env(safe-area-inset-top, 0px) var(--ck-gutter) 0.75rem;
   background: linear-gradient(
     to bottom,
     var(--ck-page) 0%,
-    color-mix(in srgb, var(--ck-page) 75%, transparent) 55%,
+    color-mix(in srgb, var(--ck-page) 88%, transparent) 55%,
+    color-mix(in srgb, var(--ck-page) 55%, transparent) 80%,
     transparent 100%
   );
   pointer-events: none;
@@ -686,6 +695,12 @@
 .ck-screen-dock .ck-voice-bar {
   border-radius: 1.75rem;
 }
+/* With no header, the words still fade at the top edge instead of being cut
+   off mid-line. */
+.ck-screen:not(:has(> .ck-screen-header)) .ck-thread {
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
+  mask-image: linear-gradient(to bottom, transparent 0, #000 1.5rem);
+}
 /* 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 {