@bitbaum/chatkit 0.2.1 → 0.8.0

package/dist/replies.js

@@ -0,0 +1,84 @@
+/**
+ * Suggested replies: the two to four things the person is most likely to say
+ * next, as buttons under the answer. One tap sends it.
+ *
+ * From OrangeCat's Cat, where it was the most-used control in the chat and
+ * existed nowhere else in the fleet. The model writes the replies itself, at
+ * the end of its answer, in a fenced block:
+ *
+ *     ```quick_replies
+ *     ["Yes, set it up", "Show me the numbers first", "Not now"]
+ *     ```
+ *
+ * Asking the model in the same turn costs no second call and no latency, and
+ * the replies are written by the thing that knows what it just asked. This
+ * file is the one place the format lives: the instruction that asks for it,
+ * and the parser that takes it back out — including while it is still
+ * streaming, so a reader never watches raw JSON appear under an answer.
+ */
+export const REPLIES_FENCE = "quick_replies";
+/**
+ * Append to a system prompt. Written so a model leaves the block off when no
+ * reply is likely — a button row on every answer is noise, and noise is what
+ * makes people stop reading buttons.
+ */
+export const REPLIES_INSTRUCTION = [
+    "## Suggested replies",
+    "When the person's next message is predictable — you asked a question, offered a choice, or there is an obvious next step — end your answer with a fenced block of 2–4 short replies they could tap instead of typing:",
+    "```" + REPLIES_FENCE,
+    '["Yes, do it", "Show me first", "Not now"]',
+    "```",
+    "Rules: write them in the person's language, in their voice (what THEY would say, not what you would). Each under 40 characters. Each must make sense sent on its own. Never repeat what they already said. Put the block last, after everything else. Leave it out entirely when no reply is likely, or when the conversation is over.",
+].join("\n");
+const COMPLETE = new RegExp("\\n?```" + REPLIES_FENCE + "\\s*([\\s\\S]*?)```", "i");
+// Still streaming: the fence has opened (or is opening) and not yet closed.
+const OPEN_TAIL = new RegExp("\\n?```(?:" + REPLIES_FENCE + "[\\s\\S]*|q[a-z_]*)?$", "i");
+function clean(raw, { max = 4, maxLength = 48 }) {
+    let parsed;
+    try {
+        parsed = JSON.parse(raw.trim());
+    }
+    catch {
+        // A model sometimes writes one reply per line instead of a JSON array.
+        parsed = raw
+            .split(/\r?\n/)
+            .map((l) => l.replace(/^\s*(?:[-*•]|\d+[.)])\s*/, "").replace(/^["']|["'],?$/g, ""));
+    }
+    if (!Array.isArray(parsed))
+        return [];
+    const seen = new Set();
+    const out = [];
+    for (const item of parsed) {
+        if (typeof item !== "string")
+            continue;
+        const reply = item.trim();
+        const key = reply.toLowerCase();
+        if (!reply || reply.length > maxLength || seen.has(key))
+            continue;
+        seen.add(key);
+        out.push(reply);
+        if (out.length >= max)
+            break;
+    }
+    return out;
+}
+/**
+ * Split an answer into the text to show and its suggested replies. Safe on a
+ * partial, streaming answer: an unfinished block is hidden, never shown.
+ * Text with no block comes back unchanged with `replies: []`.
+ */
+export function extractReplies(text, options = {}) {
+    const match = COMPLETE.exec(text);
+    if (match) {
+        const rest = (text.slice(0, match.index) + text.slice(match.index + match[0].length)).trimEnd();
+        return { text: rest, replies: clean(match[1] ?? "", options) };
+    }
+    const tail = OPEN_TAIL.exec(text);
+    // A bare ``` at the end may be the start of an ordinary code block; only
+    // hide it while it could still become ours.
+    if (tail && tail[0].trim() !== "```") {
+        return { text: text.slice(0, tail.index).trimEnd(), replies: [] };
+    }
+    return { text, replies: [] };
+}
+//# sourceMappingURL=replies.js.map

package/dist/replies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replies.js","sourceRoot":"","sources":["../src/replies.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitbaum/chatkit",
-  "version": "0.2.1",
+  "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",
@@ -36,8 +36,12 @@
   },
   "files": [
     "dist",
+    "bin",
     "styles.css"
   ],
+  "bin": {
+    "chatkit-check-file-inputs": "./bin/chatkit-check-file-inputs.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,6 +51,10 @@
       "types": "./dist/react/index.d.ts",
       "default": "./dist/react/index.js"
     },
+    "./attach": {
+      "types": "./dist/react/attach.d.ts",
+      "default": "./dist/react/attach.js"
+    },
     "./styles.css": "./styles.css"
   },
   "scripts": {

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,18 +44,28 @@
   --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 {
+.ck-starters,
+.ck-replies {
   font-family: var(--ck-font);
   color: var(--ck-fg);
 }
 
+.ck-screen *,
 .ck-composer-wrap *,
 .ck-thread-wrap *,
-.ck-starters * {
+.ck-starters *,
+.ck-replies * {
   box-sizing: border-box;
 }
 
@@ -195,7 +206,7 @@
   color: var(--ck-fg);
   border: 1px solid var(--ck-line-2);
 }
-:where(.ck-composer-wrap, .ck-thread-wrap, .ck-starters) button:focus-visible,
+:where(.ck-composer-wrap, .ck-thread-wrap, .ck-starters, .ck-replies) button:focus-visible,
 .ck-input:focus-visible {
   outline: 2px solid var(--ck-accent);
   outline-offset: 2px;
@@ -275,6 +286,22 @@
 .ck-voice-wave > span:nth-child(5n) {
   animation-delay: -0.8s;
 }
+/* the words as they are heard: one line, its end always in view, the start
+   fading out — the person reads the newest words, not the oldest */
+.ck-voice-live {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 0.9375rem;
+  line-height: 1.4;
+  color: var(--ck-fg);
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.75rem);
+  mask-image: linear-gradient(to right, transparent, #000 1.75rem);
+}
+.ck-voice-live-dim {
+  color: var(--ck-fg-3);
+}
 .ck-voice-timer {
   flex-shrink: 0;
   font-size: 0.9375rem;
@@ -309,6 +336,25 @@
   flex: 1;
   min-width: 0;
 }
+.ck-problem-detail {
+  color: var(--ck-muted);
+}
+.ck-problem-retry {
+  flex-shrink: 0;
+  min-height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--ck-line-2);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ck-fg);
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.ck-problem-retry:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
 .ck-problem-x {
   display: inline-flex;
   flex-shrink: 0;
@@ -431,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);
@@ -553,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;
@@ -651,6 +847,38 @@
   color: var(--ck-fg);
 }
 
+/* suggested replies — under the latest answer, one tap sends */
+.ck-replies {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-width: 0;
+  margin-top: 0.75rem;
+}
+.ck-reply {
+  min-width: var(--ck-target);
+  min-height: var(--ck-target);
+  max-width: 100%;
+  padding: 0.5rem 0.875rem;
+  border: 1px solid var(--ck-line);
+  border-radius: 999px;
+  background: var(--ck-bg);
+  color: var(--ck-fg);
+  font: inherit;
+  font-size: 0.9375rem;
+  line-height: 1.25;
+  text-align: left;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+.ck-reply:hover {
+  border-color: var(--ck-accent);
+}
+.ck-reply:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 .ck-spin {
   animation: ck-spin 0.9s linear infinite;
 }
@@ -687,3 +915,110 @@
     animation: none;
   }
 }
+
+/* attach sheet: Camera / Photos / Files, from the bottom edge on a phone —
+   where the thumb already is after tapping the paperclip. A native <dialog>
+   in the top layer, so no panel around the composer can clip it. */
+.ck-sheet {
+  width: 100%;
+  max-width: 32rem;
+  max-height: none;
+  margin: auto auto 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--ck-fg);
+  font-family: var(--ck-font);
+}
+.ck-sheet::backdrop {
+  background: color-mix(in srgb, #000 40%, transparent);
+}
+.ck-sheet[open] .ck-sheet-panel {
+  animation: ck-rise 0.18s ease-out;
+}
+.ck-sheet-panel {
+  padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
+  border: 1px solid var(--ck-line);
+  border-bottom: 0;
+  border-radius: var(--ck-radius) var(--ck-radius) 0 0;
+  background: var(--ck-bg);
+}
+.ck-sheet-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+.ck-sheet-title {
+  font-size: 1rem;
+  font-weight: 600;
+}
+.ck-sheet-close {
+  border-color: transparent;
+  background: transparent;
+}
+.ck-attach-sources {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: 0.5rem;
+}
+.ck-attach-source {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-height: 5rem;
+  padding: 0.75rem 0.25rem;
+  border: 1px solid var(--ck-line);
+  border-radius: var(--ck-radius-sm);
+  background: var(--ck-raised);
+  color: var(--ck-fg);
+  font: inherit;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+.ck-attach-source > svg {
+  font-size: 1.375rem;
+  color: var(--ck-fg-2);
+}
+.ck-attach-source:hover {
+  border-color: var(--ck-line-2);
+}
+.ck-attach-source:focus-visible,
+.ck-sheet-close:focus-visible {
+  outline: 2px solid var(--ck-accent);
+  outline-offset: 2px;
+}
+.ck-attach-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-height: var(--ck-target);
+  padding: 0 1rem;
+  border: 1px solid var(--ck-line);
+  border-radius: 999px;
+  background: var(--ck-raised);
+  color: var(--ck-fg);
+  font: inherit;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+.ck-attach-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+@keyframes ck-rise {
+  from {
+    transform: translateY(1.5rem);
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ck-sheet[open] .ck-sheet-panel {
+    animation: none;
+  }
+}