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

package/README.md

@@ -114,8 +114,21 @@ that changes once the conversation has started, say) can be a computed.
 | `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
 
 `Chat` emits `rated` with the message and the rating now on it, or `null`
@@ -152,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:

package/dist/chat-kit.js

@@ -1271,8 +1271,10 @@ var it = {
 		}, {
 			default: j(() => [l(Z, { name: "stop" })]),
 			_: 1
-		}, 8, ["label"])) : (v(), r(X, {
-			key: 3,
+		}, 8, ["label"])) : w(t.$slots, "send", {
+			send: O,
+			canSend: x.value
+		}, () => [l(X, {
 			class: "input-bar__send",
 			label: D(u).composer.sendLabel,
 			disabled: !x.value,
@@ -1283,9 +1285,9 @@ var it = {
 				size: 20
 			})]),
 			_: 1
-		}, 8, ["label", "disabled"]))])]), w(t.$slots, "footer", {}, void 0, !0)]));
+		}, 8, ["label", "disabled"])], !0, 3)])]), w(t.$slots, "footer", {}, void 0, !0)]));
 	}
-}), [["__scopeId", "data-v-2a67b2cf"]]), St = 20, Ct = 300, wt = .3, Tt = 12, Et = 8;
+}), [["__scopeId", "data-v-4e9c096d"]]), St = 20, Ct = 300, wt = .3, Tt = 12, Et = 8;
 function Dt(e, t = {}) {
 	let n = S("following"), r = !1, i = 0, a = !1, o = null, s = !1, c = () => t.mode?.() ?? "reply";
 	function l(e) {
@@ -1893,7 +1895,7 @@ var Mt = { class: "citation-popover__source" }, Nt = ["src"], Pt = { class: "cit
 			}, E(D(u).status.retryLabel), 1)])) : i("", !0)
 		], 512));
 	}
-}), [["__scopeId", "data-v-2f494fbc"]]), rr = { class: "chat" }, ir = /*#__PURE__*/ Y(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-7817c1d9"]]), rr = { class: "chat" }, ir = /*#__PURE__*/ Y(/* @__PURE__ */ u({
 	__name: "Chat",
 	props: {
 		engine: {},
@@ -1957,13 +1959,20 @@ var Mt = { class: "citation-popover__source" }, Nt = ["src"], Pt = { class: "cit
 			"show-mic": e.showMic,
 			onSend: i,
 			onStop: n[1] ||= () => e.engine.stopGeneration()
-		}, s({ _: 2 }, [t.$slots["composer-footer"] ? {
+		}, s({ _: 2 }, [t.$slots.send ? {
+			name: "send",
+			fn: j(({ send: e, canSend: n }) => [w(t.$slots, "send", {
+				send: e,
+				canSend: n
+			}, void 0, !0)]),
+			key: "0"
+		} : void 0, t.$slots["composer-footer"] ? {
 			name: "footer",
 			fn: j(() => [w(t.$slots, "composer-footer", {}, void 0, !0)]),
-			key: "0"
+			key: "1"
 		} : void 0]), 1032, ["busy", "show-mic"])], !0)]));
 	}
-}), [["__scopeId", "data-v-7ad4b6f4"]]);
+}), [["__scopeId", "data-v-7ae994a7"]]);
 //#endregion
 export { H as AnonymousAuthError, ue as BaseCampClient, le as BaseCampError, ir as Chat, X as IconButton, et as MockTransport, fe as RateLimitError, Ke as StreamingMessage, Ye as Typewriter, U as consumeSSEResponse, ce as createAnonymousTokenProvider, G as decodeHtmlEntities, L as defaultChatCopy, ie as fetchAuthConfig, R as formatCopy, re as provideChatCopy, W as renderMarkdownSafe, Ve as renderMarkdownStreaming, te as resolveChatCopy, se as signInAnonymously, Se as streamSSE, Ge as stripHtmlTags, B as useChatCopy, Qe as useChatEngine };