@bitbaum/chatkit 0.12.0 → 0.12.1

package/README.md

@@ -114,6 +114,11 @@ const system = `${yourPrompt}\n\n${REPLIES_INSTRUCTION}`; // server side
 <ChatThread messages={messages} onReply={send} … />
 ```
 
+Below 40rem the replies are one row that scrolls sideways with a fade, the
+lead reply first and always on screen; wider, they wrap. The Copy · Listen ·
+Share · Retry row under an answer keeps each word on one line and every button
+at the 44px target (0.12.1).
+
 That is the whole integration. `ChatThread` takes the `quick_replies` block out
 of every answer (and out of a streaming one before it has finished, so nobody
 watches JSON appear), and shows the buttons under the latest answer only, never

package/package.json

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

@@ -508,15 +508,20 @@
 }
 .ck-turn-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.25rem;
   margin-top: 0.25rem;
 }
+/* Each action is one word on one line and a full-size target: "Nochmals
+   versuchen" broke across two lines at 390px, and the row sat at 36px while
+   every other control in the chat is 44. */
 .ck-action {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  min-height: 2.25rem;
+  min-height: var(--ck-target);
   padding: 0 0.5rem;
+  white-space: nowrap;
   border: 0;
   border-radius: var(--ck-radius-sm);
   background: transparent;
@@ -1077,6 +1082,32 @@ a.ck-source:hover {
   opacity: 0.5;
   cursor: default;
 }
+/* On a phone the replies are ONE row that scrolls sideways, with a fade
+   where it runs on, never a box of pills that wraps into "two and an orphan"
+   wherever the words run out. The lead reply is first, so it is always on
+   screen. From 40rem up there is room for all of them on a line or two. */
+@media (max-width: 40rem) {
+  .ck-replies {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    padding-inline-end: 2.5rem;
+    scroll-padding-inline: 0.5rem;
+    -webkit-overflow-scrolling: touch;
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
+    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
+  }
+  .ck-replies::-webkit-scrollbar {
+    display: none;
+  }
+  .ck-reply {
+    flex: 0 0 auto;
+    max-width: 85vw;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
 
 .ck-spin {
   animation: ck-spin 0.9s linear infinite;