inline-chat-kit 0.60.0 → 0.61.0

package/dist/ChatInput/AddCardsOverlay.d.ts

@@ -24,5 +24,7 @@ export interface AddCardsOverlayProps {
     showInlineGlyph: boolean;
     showButtons: boolean;
     ac: InlineAnimConfig | undefined;
+    /** How big the composer's controls are, in pixels — `--ick-composer-control`. 28 by default. */
+    control?: number;
 }
-export declare function AddCardsOverlay({ isAddOpen, setIsAddOpen, onAdd, items, showInlineGlyph, showButtons, ac, }: AddCardsOverlayProps): React.JSX.Element;
+export declare function AddCardsOverlay({ isAddOpen, setIsAddOpen, onAdd, items, showInlineGlyph, control, showButtons, ac, }: AddCardsOverlayProps): React.JSX.Element;

package/dist/ChatInput/useComposerControl.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+/** What the composer's controls were before they were a token, and still are by default. */
+export declare const COMPOSER_CONTROL = 28;
+/**
+ * `--ick-composer-control` in pixels, for the parts of the composer Motion
+ * animates.
+ *
+ * The row of controls opens and closes by animating each one's width from
+ * nothing to its size, and a spring can only run between two numbers — not to
+ * `var(--…)`, and not to `2rem`. So the token is laid out once, on a probe as
+ * wide as it says, and read back. Everything that is not animated uses the
+ * token itself.
+ *
+ * Read again when the pointer changes, because the touch block of the tokens
+ * sets its own value. A host that changes the token at runtime remounts the
+ * composer, or does not need the row to follow until the next one.
+ */
+export declare function useComposerControl(ref: RefObject<HTMLElement | null>): number;

package/dist/components/components.d.ts

@@ -0,0 +1,102 @@
+import { ButtonHTMLAttributes, ComponentType, MouseEventHandler, ReactNode, RefAttributes } from 'react';
+import { ButtonSize, ButtonVariant } from '../Button/Button';
+/**
+ * What every button the kit draws is for — the same names it carries in
+ * `data-ick-role`. A host's button can switch on it.
+ *
+ * `send`, `stop` and `save` are listed because they are roles, but they are
+ * never handed to a host's component: the composer's glyph morphs between the
+ * three inside the button, and that animation is the kit's. They are themed
+ * through the `--ick-btn-primary-*` tokens on `[data-ick-role="send"]` and its
+ * siblings instead.
+ */
+export type KitButtonRole = "send" | "stop" | "save" | "add" | "dictate" | "cancel-edit" | "add-close" | "read-more" | "message-action" | "answer-action" | "suggestion" | "back" | "header-action" | "header-more" | "header-menu-item" | "approval-once" | "approval-always" | "approval-deny" | "question-next" | "highlight-action" | "thread-save" | "thread-close" | "pane-expand" | "pane-close" | "remove-attachment";
+/**
+ * The box the kit has laid out for a button. A hint: a host's button is free
+ * to draw its own corners.
+ *
+ * - `square` — an icon on its own. The box is as wide as it is tall.
+ * - `pill` — a short text button standing on its own, as a chip: an opener in
+ *   an empty conversation, an action over a highlight, "Read more".
+ * - `default` — a text button in a row of actions.
+ */
+export type KitButtonShape = "pill" | "square" | "default";
+/**
+ * Everything the kit hands a host's button.
+ *
+ * The kit owns the layout and the behaviour: the box this button sits in, its
+ * size, where it goes, how it arrives and leaves, its 44px hit area on a
+ * touch screen, and what it does when pressed. The host owns the paint:
+ * colour, border, radius, font, shadow, what hover and press look like, and
+ * the focus ring.
+ *
+ * So a host's component has to:
+ *
+ * - **forward its ref** to the element (`forwardRef`) — focus is moved to it,
+ *   and the header's "…" menu is anchored by it;
+ * - **render a `<button>`** — the kit relies on its keyboard behaviour;
+ * - **spread what it does not use** onto that `<button>`: the `aria-*`,
+ *   `data-*`, `title`, `role`, `tabIndex`, `type`, `onClick` and the other
+ *   handlers. `kitRole`, `variant`, `size`, `shape`, `icon`, `iconRight`,
+ *   `loading` and `pressed` are the kit's words for things and are not
+ *   attributes: take them out first;
+ * - **fill the box it is given** — the kit sets its height, and on `square`
+ *   its width, and positions it. Nothing the host draws should move it;
+ * - **show focus** — the kit's own ring is not drawn on a host's button.
+ *
+ * In development the kit warns, once per role, about a button that breaks one
+ * of the first two rules, drops the `aria-*` or `data-ick-*` it was given, or
+ * shows no change on keyboard focus.
+ */
+export interface KitButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children" | "disabled" | "onClick"> {
+    /** What the button is for. Also on the element as `data-ick-role`. */
+    kitRole: KitButtonRole;
+    /** What the kit would have drawn: a hint for picking the host's own variant. */
+    variant: ButtonVariant;
+    /** Which step of `--ick-control-*` the box is. The box is sized already. */
+    size: ButtonSize;
+    shape: KitButtonShape;
+    /** Leading icon. With no `children` it is the whole button, and `aria-label` names it. */
+    icon?: ReactNode;
+    iconRight?: ReactNode;
+    children?: ReactNode;
+    disabled?: boolean;
+    /** Working: draw a spinner if you have one. `disabled` and `aria-busy` are set too. */
+    loading?: boolean;
+    /** A toggle that is on. `aria-pressed` is set too. */
+    pressed?: boolean;
+    /** Always `"button"`. A host's button inside a form must not submit it. */
+    type: "button";
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    "data-ick-role": KitButtonRole;
+    "data-ick-variant": ButtonVariant;
+    /** Which of several the role is — `copy`, `edit`, a header action's `id`. */
+    "data-ick-action"?: string;
+    /** Anything else the kit marks a button with, such as `data-voice` on the microphone. */
+    [data: `data-${string}`]: string | number | boolean | undefined;
+}
+/** A host's button, as the kit takes it. It must forward its ref. */
+export type KitButtonComponent = ComponentType<KitButtonProps & RefAttributes<HTMLButtonElement>>;
+/**
+ * The components a host can draw in place of the kit's.
+ *
+ * One, so far: `Button`, used for every button the kit draws but the
+ * composer's send / stop / save glyph.
+ */
+export interface ChatComponents {
+    Button?: KitButtonComponent;
+}
+/**
+ * Hands a host's components to every kit component beneath it, the way
+ * `LabelsProvider` hands it the words. `ChatExperience` sets one up from its
+ * `components` prop; a host assembling the pieces itself — `ChatTurnRow`,
+ * `ChatHeader`, `Approval` — wraps them in this.
+ *
+ * Nests: an inner provider's components override the outer one's, one by one.
+ */
+export declare function ComponentsProvider({ components, children, }: {
+    components?: ChatComponents;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** The host's components, where there are any. */
+export declare function useChatComponents(): ChatComponents;

package/dist/demo.js

@@ -1,5 +1,5 @@
 "use client";
-import { et as e, n as t, t as n } from "./ChatExperience-BBd-p0wh.js";
+import { n as e, t, tt as n } from "./ChatExperience-BQgjY0-K.js";
 import { useCallback as r, useRef as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { AnimatePresence as c, motion as l } from "motion/react";
@@ -151,7 +151,7 @@ var h = {
 	offsetOut: -10,
 	blurOut: 10
 };
-function v({ logo: t, back: n, onStart: r, welcome: i = "Welcome", title: a = "This is inline chat experience", version: c = "v1.0.0", description: u = "Exploration of having the input be the same as response. Or better said input morphing into chat bubble and maintains the continuous experience.", status: d = h, motionConfig: f }) {
+function v({ logo: e, back: t, onStart: r, welcome: i = "Welcome", title: a = "This is inline chat experience", version: c = "v1.0.0", description: u = "Exploration of having the input be the same as response. Or better said input morphing into chat bubble and maintains the continuous experience.", status: d = h, motionConfig: f }) {
 	let m = {
 		..._,
 		...f
@@ -204,9 +204,9 @@ function v({ logo: t, back: n, onStart: r, welcome: i = "Welcome", title: a = "T
 			children: [
 				/* @__PURE__ */ s("div", {
 					className: g.infoContainer,
-					children: [t && /* @__PURE__ */ o(l.div, {
+					children: [e && /* @__PURE__ */ o(l.div, {
 						variants: y,
-						children: t
+						children: e
 					}), /* @__PURE__ */ s("div", {
 						className: g.content,
 						children: [/* @__PURE__ */ s("div", {
@@ -253,12 +253,12 @@ function v({ logo: t, back: n, onStart: r, welcome: i = "Welcome", title: a = "T
 				/* @__PURE__ */ s(l.div, {
 					variants: y,
 					className: g.buttonWrapper,
-					children: [/* @__PURE__ */ o(e, {
+					children: [/* @__PURE__ */ o(n, {
 						variant: "glass",
 						size: "m",
 						onClick: r,
 						children: "Start experience"
-					}), n]
+					}), t]
 				})
 			]
 		})
@@ -585,9 +585,9 @@ async function* H(e, { signal: t }) {
 	}
 }
 var U = { plan: "ick-plan-nXLe" }, W = 8e3, G = 900;
-function K({ logo: e, back: s, backHref: l = "/", backLabel: f = "Back to home", skipIntro: p = !1, theme: m, onThemeChange: h, cursor: g = !0, animationConfig: _, foldMotion: y, feedDelay: b, introMotion: x, composer: S = "inline" }) {
+function K({ logo: n, back: s, backHref: l = "/", backLabel: f = "Back to home", skipIntro: p = !1, theme: m, onThemeChange: h, cursor: g = !0, animationConfig: _, foldMotion: y, feedDelay: b, introMotion: x, composer: S = "inline" }) {
 	let [C, w] = a(p), [T, D] = a(S), O = T === "docked";
-	t(m === void 0 ? void 0 : m);
+	e(m === void 0 ? void 0 : m);
 	let k = i({}), A = r((e, t, n, r, i) => {
 		let a = {
 			...k.current[n] ?? {},
@@ -639,7 +639,7 @@ function K({ logo: e, back: s, backHref: l = "/", backLabel: f = "Back to home",
 	}, []);
 	return /* @__PURE__ */ o(c, {
 		mode: "wait",
-		children: C ? /* @__PURE__ */ o(n, {
+		children: C ? /* @__PURE__ */ o(t, {
 			onSend: B,
 			onTranscribe: H,
 			onThreadReply: V,
@@ -692,7 +692,7 @@ function K({ logo: e, back: s, backHref: l = "/", backLabel: f = "Back to home",
 			onEditQuestion: j,
 			onDecideApproval: M
 		}, "chat") : /* @__PURE__ */ o(v, {
-			logo: e,
+			logo: n,
 			back: s,
 			onStart: () => w(!0),
 			motionConfig: x

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { mergeParts } from './turnParts/turnParts';
 export type { CustomPart, CustomPartContext, TurnPart, TurnPartUpdate } from './turnParts/turnParts';
 export { LabelsProvider, defaultLabels } from './labels/labels';
 export type { ChatLabels, AnswerActionsLabels, ApprovalLabels, BranchLabels, ChainLabels, ChatInputLabels, ContextLabels, ReasoningLabels, SourcesLabels, TaskListLabels, ToolLabels, VoiceLabels, } from './labels/labels';
+export { ComponentsProvider } from './components/components';
+export type { ChatComponents, KitButtonComponent, KitButtonProps, KitButtonRole, KitButtonShape, } from './components/components';
 export type { ChatAnnouncements, ChatTurn, SendContext, SendHandler, UseChatTurnsOptions, UseChatTurnsResult, } from './useChatTurns/useChatTurns';
 export { useVoiceInput } from './voice/useVoiceInput';
 export type { TranscribeContext, TranscribeHandler, UseVoiceInputOptions, VoiceInput, VoiceState, } from './voice/useVoiceInput';