@twentyfourg/chat-kit 1.0.0-beta.1 → 1.0.0-beta.3

package/README.md

@@ -100,13 +100,34 @@ const engine = useChatEngine({ transport, agentId, typewriter: { speed: 1.5 } })
 | `showThinking` | `true`, `false` | `false` | Shows the model's reasoning: live while you wait, folded up on the finished reply. |
 | `autoScroll` | `'off'`, `'reply'`, `'bottom'` | `'reply'` | How far the view follows a streaming answer. `'reply'` stops once the answer's own header reaches the top, so a long answer can be read from the beginning. `'bottom'` keeps the newest line in view. `'off'` leaves the view alone. Under `'reply'` and `'bottom'`, scrolling up stops the follow until the reader comes back to the bottom. |
 | `showCopy` | `true`, `false` | `false` | Adds a copy button under each finished answer. |
+| `beforeSend` | `(text, mode) => boolean \| Promise<boolean>` | off | Runs before the composer's text reaches the engine. Return `false` to hold it: your app has something to do first (show an offer, refine the question) and calls `engine.sendMessage` itself when ready. |
+
+`copy` is read reactively, so a string that depends on app state (a placeholder
+that changes once the conversation has started, say) can be a computed.
 
 ### Slots
 
 | Slot | What it's for |
 | --- | --- |
 | `welcome` | Replaces the default welcome block that shows before the first message. Use it for a logo, suggested questions, whatever you want. A text-only welcome can just set `copy.welcome` and skip the slot. |
+| `message` | Scoped, gives you `{ message }`. Renders the messages your app put into the conversation itself with `engine.insertMessage`: an offer, a notice, a prompt to answer before the next question. The kit has no bubble for these, so without the slot they render as nothing. |
 | `message-actions` | Scoped, gives you `{ message }`. Sits on the left of the row that holds the thumbs, on finished replies. This is where an app's own button goes, an export for example, and it comes before the kit's copy button so your actions stay together. |
+| `message-footer` | Scoped, gives you `{ message }`. Whatever your app wants under a reply, below its sources and actions: follow-up prompts, a link back to something above. Rendered for every reply, streaming included, so check `message.isStreaming` if it should wait. |
+| `composer` | Replaces the whole composer. For a state the kit's field has no shape for, such as a locked bar with an upgrade prompt. Your content calls `engine.sendMessage` itself if it needs to send. |
+| `send` | Scoped, gives you `{ send, canSend }`. Replaces the send button and nothing else, so the field keeps its own typing, dictation, and Enter handling. For a client whose send button is a finished asset that draws its own shape and disabled state. Not rendered while an answer streams, when the stop button has the spot. |
+| `composer-footer` | Sits inside the composer, under the field. An option that changes how the next question is handled, a hint, a counter. |
+
+Your own send button, keeping everything else the kit does:
+
+```vue
+<Chat :engine="engine">
+  <template #send="{ send, canSend }">
+    <button :disabled="!canSend" @click="send">
+      <img :src="canSend ? sendIcon : sendDisabledIcon" alt="Send" />
+    </button>
+  </template>
+</Chat>
+```
 
 ### Events
 
@@ -144,6 +165,24 @@ The heading, label, and interface fonts follow `--font-body` unless you set
 them. The citation and button accents follow `--accent`. An app that already
 defines the whole set itself can skip the import.
 
+### Room around the chat
+
+Two properties control how much space the chat takes, separately from the rest
+of the theme:
+
+| Property | Default | What it does |
+| --- | --- | --- |
+| `--chat-inset` | `24px` | The gutter between the chat's edge and its contents. The conversation and the composer both read it, so they stay lined up with each other. |
+| `--composer-padding` | `8px` | Space between the composer's border and the field inside it. The 40px buttons set the height, not the text, so this is added to those: the default makes a 56px composer plus its border. |
+
+A roomier chat, for a design with space to spend:
+
+```css
+:root {
+  --composer-padding: 24px;
+}
+```
+
 One thing to watch. If your own tokens live inside a CSS cascade layer, layer
 order decides the winner before anything else does. Import `theme.css` before
 your layered styles, or state the order yourself: