inline-chat-kit 0.59.2 → 0.61.0

package/dist/ChatHeader/ChatHeader.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonVariant } from '../Button/Button';
 export type ChatHeaderVariant = "plain" | "glass" | "bordered";
 export type ChatHeaderSize = "s" | "m" | "l";
 /**
@@ -36,6 +37,12 @@ export interface ChatHeaderAction {
     disabled?: boolean;
     /** Stays visible when the rest collapse. For the one action that matters. */
     pinned?: boolean;
+    /**
+     * How it is drawn while it is in the header. `"secondary"` — naked until
+     * touched — by default; `"primary"` for the one a host wants to stand out.
+     * Folded into the menu, every action is a menu item and this does not apply.
+     */
+    variant?: Exclude<ButtonVariant, "glass">;
 }
 export interface ChatHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
     /** What the conversation is about, so the reader can see where they are. */

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/ChatInput.d.ts

@@ -132,6 +132,13 @@ export interface ChatInputProps {
     menu?: ComposerMenuItem[] | false;
     /** Every word the composer says. See `ChatLabels`. */
     labels?: Partial<ChatInputLabels>;
+    /**
+     * Given, watched for: called once the bubble has come to rest at its place
+     * — within a few pixels of it, which the eye reads as arrived, rather than
+     * when the spring finally stops, most of a second later. Called at once if
+     * it never moves. Keep it stable. See `ChatTurnRow`'s `answerAfterTravel`.
+     */
+    onLanded?: () => void;
     animationConfig?: InlineAnimConfig;
     style?: React.CSSProperties;
 }

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/ChatTurnRow/ChatTurnRow.d.ts

@@ -33,6 +33,28 @@ export interface ChatTurnRowProps {
     onArtifactChange?: (artifactId: string | null) => void;
     /** Stagger for the entrance, in seconds. */
     entranceDelay?: number;
+    /**
+     * How the row arrives. `"rise"` (the default): it fades in from a little
+     * above its place, which is how a new turn reads as arriving. `"fade"`: in
+     * place, opacity only.
+     *
+     * A composer docked at the bottom edge is what the second is for. It is not
+     * arriving anywhere — it is the box the reader types into, there a moment
+     * ago — so rising into place read as the input jumping 16px up and back on
+     * every send.
+     */
+    entrance?: "rise" | "fade";
+    /**
+     * Hold the answer back until the sent message has finished travelling.
+     *
+     * Docked, a sent message travels from the composer at the bottom to the top
+     * of the view, and its answer's "…" appeared at the top the moment it was
+     * sent — two things moving in opposite directions, the answer starting
+     * above a question that had not arrived yet. Held, the question lands
+     * first and the answer begins under it. The answer still takes its room the
+     * whole time, invisibly, so where the view is anchored does not change.
+     */
+    answerAfterTravel?: boolean;
     /** Passed through to the highlighter over the answer. */
     selectionMode?: "marker" | "precise";
     /**
@@ -145,4 +167,4 @@ export interface ChatTurnRowProps {
     labels?: ChatLabels;
     className?: string;
 }
-export declare const ChatTurnRow: import('react').MemoExoticComponent<({ turn, isActiveInput, inputRef, placeholder, animationConfig, foldMotion, openArtifactId, onOpenArtifact, onArtifactChange, entranceDelay, selectionMode, highlights, questionAlign, onDraft, onSubmit, onStop, busy, onEdit, onCancelEdit, onCopy, onHighlight, onReplyInThread, onRegenerate, onShowVersion, onFeedback, feedback, answerActions, onAnswerQuestion, onEditQuestion, onDecideApproval, renderPart, composerMenu, labels, className, onTranscribe, }: ChatTurnRowProps) => import("react").JSX.Element>;
+export declare const ChatTurnRow: import('react').MemoExoticComponent<({ turn, isActiveInput, inputRef, placeholder, animationConfig, foldMotion, openArtifactId, onOpenArtifact, onArtifactChange, entranceDelay, entrance, answerAfterTravel, selectionMode, highlights, questionAlign, onDraft, onSubmit, onStop, busy, onEdit, onCancelEdit, onCopy, onHighlight, onReplyInThread, onRegenerate, onShowVersion, onFeedback, feedback, answerActions, onAnswerQuestion, onEditQuestion, onDecideApproval, renderPart, composerMenu, labels, className, onTranscribe, }: ChatTurnRowProps) => import("react").JSX.Element>;

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-umh3nGe_.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';